|
@@ -1,7 +1,7 @@
|
|
|
<!-- -->
|
|
<!-- -->
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="collect2">
|
|
|
|
|
- <TabList :ind='2'/>
|
|
|
|
|
|
|
+ <div class="holding5">
|
|
|
|
|
+ <TabList :ind="2" />
|
|
|
<div class="right">
|
|
<div class="right">
|
|
|
<div class="top">
|
|
<div class="top">
|
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb separator="/">
|
|
@@ -10,12 +10,79 @@
|
|
|
<el-breadcrumb-item id="mytitle">征集品注销</el-breadcrumb-item>
|
|
<el-breadcrumb-item id="mytitle">征集品注销</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="conten"></div>
|
|
|
|
|
|
|
+ <div class="conten">
|
|
|
|
|
+ <div class="middle">
|
|
|
|
|
+
|
|
|
|
|
+ <ul class="title">
|
|
|
|
|
+ <li :class="{active:stateInd===index}" @click="stateSelect(index)" v-for="(item,index) in stateArr" :key="index">{{item.txt}}({{item.num}})</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <div class="select">
|
|
|
|
|
+ <span>登记人:</span>
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="myData.searchKey"
|
|
|
|
|
+ placeholder="请输入"
|
|
|
|
|
+ style="width: 217px"
|
|
|
|
|
+ ></el-input>
|
|
|
|
|
+ <span>日期范围:</span>
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ v-model="time"
|
|
|
|
|
+ type="daterange"
|
|
|
|
|
+ range-separator="-"
|
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
|
+ >
|
|
|
|
|
+ </el-date-picker>
|
|
|
|
|
+ <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="cancel">申请注销</el-button
|
|
|
|
|
+ >
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!--表格 -->
|
|
|
|
|
+ <div class="table">
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
|
|
+ :data="tableData"
|
|
|
|
|
+ border
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column prop="num" label="注销单号" width="220">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="realName" label="登记人" width="150">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="description" label="注销原因">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="updateTime" label="注销日期" width="180">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="status" label="状态" width="130">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
|
|
+ <template #default='{row}'>
|
|
|
|
|
+ <el-button type="text" v-if="row.status==='已完成'||row.status==='审核不通过'" @click="myLook(row)">查看</el-button>
|
|
|
|
|
+ <el-button type="text" v-if="row.status==='待审核'" @click="audit(row)">审核</el-button>
|
|
|
|
|
+ <el-button type="text" v-if="row.status==='待办理'" @click="compile(row)">编辑</el-button>
|
|
|
|
|
+ <el-button type="text" v-if="row.status!=='已完成'" @click="delOne(row.id)">删除</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 分页器 -->
|
|
|
|
|
+ <div class="paging">
|
|
|
|
|
+ <el-pagination
|
|
|
|
|
+ @current-change="currentChange"
|
|
|
|
|
+ @size-change="sizeChange"
|
|
|
|
|
+ background
|
|
|
|
|
+ layout="prev, pager, next,sizes,jumper"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ >
|
|
|
|
|
+ </el-pagination>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { getList, enterBank, delData } from '@/apis/collect2'
|
|
|
import TabList from '@/components/tabLeft2.vue'
|
|
import TabList from '@/components/tabLeft2.vue'
|
|
|
export default {
|
|
export default {
|
|
|
name: 'collect2',
|
|
name: 'collect2',
|
|
@@ -24,21 +91,224 @@ export default {
|
|
|
data () {
|
|
data () {
|
|
|
// 这里存放数据
|
|
// 这里存放数据
|
|
|
return {
|
|
return {
|
|
|
-
|
|
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ // 选择状态的变量
|
|
|
|
|
+ stateInd: 0,
|
|
|
|
|
+ stateArr: [
|
|
|
|
|
+ { txt: '全部', num: 0 },
|
|
|
|
|
+ { txt: '待审核', num: 0 },
|
|
|
|
|
+ { txt: '待办理', num: 0 },
|
|
|
|
|
+ { txt: '已完成', num: 0 },
|
|
|
|
|
+ { txt: '审核不通过', num: 0 }
|
|
|
|
|
+ ],
|
|
|
|
|
+ myData: {
|
|
|
|
|
+ startTime: '',
|
|
|
|
|
+ endTime: '',
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ searchKey: '',
|
|
|
|
|
+ status: null
|
|
|
|
|
+ },
|
|
|
|
|
+ time: '',
|
|
|
|
|
+ // 表格数据
|
|
|
|
|
+ tableData: []
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
// 监听属性 类似于data概念
|
|
|
computed: {},
|
|
computed: {},
|
|
|
// 监控data中的数据变化
|
|
// 监控data中的数据变化
|
|
|
- watch: {},
|
|
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ // 处理时间
|
|
|
|
|
+ time (val) {
|
|
|
|
|
+ this.handleSelect(val)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
// 方法集合
|
|
// 方法集合
|
|
|
methods: {
|
|
methods: {
|
|
|
-
|
|
|
|
|
|
|
+ // 点击查看
|
|
|
|
|
+ myLook (val) {
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/layout/collect2_look',
|
|
|
|
|
+ query: val
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击审核
|
|
|
|
|
+ audit (val) {
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/layout/collect2_audit',
|
|
|
|
|
+ query: val
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击编辑
|
|
|
|
|
+ compile (val) {
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/layout/collect2_add',
|
|
|
|
|
+ query: val
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击删除
|
|
|
|
|
+ delOne (id) {
|
|
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
|
|
+ confirmButtonText: '删除',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(async () => {
|
|
|
|
|
+ // 发请求删除
|
|
|
|
|
+ await delData(id)
|
|
|
|
|
+ // 发请求刷新页面
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: '删除成功!'
|
|
|
|
|
+ })
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'info',
|
|
|
|
|
+ message: '已取消.'
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击注销
|
|
|
|
|
+ async cancel () {
|
|
|
|
|
+ const res = await enterBank()
|
|
|
|
|
+ // console.log(999, res)
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/layout/collect2_add',
|
|
|
|
|
+ query: res.data
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击查询
|
|
|
|
|
+ inquire () {
|
|
|
|
|
+ this.myData.pageNum = 1
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 分页器
|
|
|
|
|
+ currentChange (val) {
|
|
|
|
|
+ // console.log('当前页改变了', val)
|
|
|
|
|
+ // this.myData.sourceId = null
|
|
|
|
|
+ // this.myData.searchKey = ''
|
|
|
|
|
+ // this.time = []
|
|
|
|
|
+ // this.myData.endTime = ''
|
|
|
|
|
+ // this.myData.startTime = ''
|
|
|
|
|
+ this.myData.pageNum = val
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ // 所有dom加载完毕之后---要执行的代码
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ if (this.tableData.length === 0) {
|
|
|
|
|
+ this.myData.pageNum = 1
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 100)
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ sizeChange (val) {
|
|
|
|
|
+ // this.myData.sourceId = null
|
|
|
|
|
+ // this.myData.searchKey = ''
|
|
|
|
|
+ // this.time = []
|
|
|
|
|
+ // this.myData.endTime = ''
|
|
|
|
|
+ // this.myData.startTime = ''
|
|
|
|
|
+ // console.log('条数改变了', val)
|
|
|
|
|
+ this.myData.pageSize = val
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击上面的状态切换
|
|
|
|
|
+ stateSelect (index) {
|
|
|
|
|
+ if (index !== this.stateInd) {
|
|
|
|
|
+ this.myData.pageNum = 1
|
|
|
|
|
+ // 点击待审核
|
|
|
|
|
+ if (index === 1) {
|
|
|
|
|
+ this.myData.status = 1
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ } else if (index === 2) {
|
|
|
|
|
+ // 点击待办理
|
|
|
|
|
+ this.myData.status = 0
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ } else if (index === 3) {
|
|
|
|
|
+ // 点击已完成
|
|
|
|
|
+ this.myData.status = 3
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ } else if (index === 4) {
|
|
|
|
|
+ // 点击审核不通过
|
|
|
|
|
+ this.myData.status = 2
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ } else if (index === 0) {
|
|
|
|
|
+ // 点击全部
|
|
|
|
|
+ this.myData.status = ''
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.stateInd = index
|
|
|
|
|
+ },
|
|
|
|
|
+ // 封装获取列表方法
|
|
|
|
|
+ async getList (data) {
|
|
|
|
|
+ const res = await getList(data)
|
|
|
|
|
+ this.total = res.data.total
|
|
|
|
|
+ this.tableData = res.data.list
|
|
|
|
|
+ this.tableData.forEach(v => {
|
|
|
|
|
+ v.status = this.myStateDan(v.status)
|
|
|
|
|
+ })
|
|
|
|
|
+ // console.log(666, res)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 时间处理----------------
|
|
|
|
|
+ handleSelect (e) {
|
|
|
|
|
+ const date = []
|
|
|
|
|
+ for (const i in e) {
|
|
|
|
|
+ date.push(this.gettime(e[i]))
|
|
|
|
|
+ }
|
|
|
|
|
+ this.myData.startTime = date[0]
|
|
|
|
|
+ this.myData.endTime = date[1]
|
|
|
|
|
+ },
|
|
|
|
|
+ gettime (data) {
|
|
|
|
|
+ const value = data.getFullYear() + '-' +
|
|
|
|
|
+ this.checkTime(data.getMonth() + 1) + '-' +
|
|
|
|
|
+ this.checkTime(data.getDate()) + ' ' +
|
|
|
|
|
+ this.checkTime(data.getHours()) + ':' +
|
|
|
|
|
+ this.checkTime(data.getMinutes()) + ':' +
|
|
|
|
|
+ this.checkTime(data.getSeconds())
|
|
|
|
|
+ return value
|
|
|
|
|
+ },
|
|
|
|
|
+ checkTime (i) {
|
|
|
|
|
+ if (i < 10) {
|
|
|
|
|
+ i = '0' + i
|
|
|
|
|
+ }
|
|
|
|
|
+ return i
|
|
|
|
|
+ },
|
|
|
|
|
+ // 状态的数据处理
|
|
|
|
|
+ myStateDan (id) {
|
|
|
|
|
+ const list = [
|
|
|
|
|
+ { id: 0, name: '待办理' },
|
|
|
|
|
+ { id: 1, name: '待审核' },
|
|
|
|
|
+ { id: 2, name: '审核不通过' },
|
|
|
|
|
+ { id: 3, name: '已完成' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ return list.filter(v => id === v.id)[0].name
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
// 生命周期 - 创建完成(可以访问当前this实例)
|
|
// 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created () {},
|
|
created () {},
|
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted () {},
|
|
|
|
|
|
|
+ async mounted () {
|
|
|
|
|
+ // 调用获取列表方法
|
|
|
|
|
+ this.getList(this.myData)
|
|
|
|
|
+ // 进页面拿到所有数据
|
|
|
|
|
+ const res = await getList({ ...this.myData, pageSize: 99999 })
|
|
|
|
|
+ this.stateArr[0].num = res.data.list.length
|
|
|
|
|
+ let num1 = 0
|
|
|
|
|
+ let num2 = 0
|
|
|
|
|
+ let num3 = 0
|
|
|
|
|
+ let num4 = 0
|
|
|
|
|
+ res.data.list.forEach(v => {
|
|
|
|
|
+ if (v.status === 1) num1++
|
|
|
|
|
+ if (v.status === 0) num2++
|
|
|
|
|
+ if (v.status === 3) num3++
|
|
|
|
|
+ if (v.status === 2) num4++
|
|
|
|
|
+ })
|
|
|
|
|
+ this.stateArr[1].num = num1
|
|
|
|
|
+ this.stateArr[2].num = num2
|
|
|
|
|
+ this.stateArr[3].num = num3
|
|
|
|
|
+ this.stateArr[4].num = num4
|
|
|
|
|
+ },
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
beforeMount () {}, // 生命周期 - 挂载之前
|
|
beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
|
@@ -50,8 +320,8 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
//@import url(); 引入公共css类
|
|
|
-.collect2 {
|
|
|
|
|
- /deep/#mytitle>span{
|
|
|
|
|
|
|
+.holding5 {
|
|
|
|
|
+ /deep/#mytitle > span {
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
}
|
|
}
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -73,6 +343,56 @@ export default {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
margin: 20px 20px 40px;
|
|
margin: 20px 20px 40px;
|
|
|
|
|
+ .middle {
|
|
|
|
|
+ .title{
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
|
|
+ margin: 0 25px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ .active{
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ border-bottom: 2px solid #409eff;
|
|
|
|
|
+ }
|
|
|
|
|
+ li {
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ line-height: 60px;
|
|
|
|
|
+ padding: 0 15px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-left: 40px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ .select {
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ padding: 30px 0 0 0;
|
|
|
|
|
+ & > span {
|
|
|
|
|
+ margin-left: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .table {
|
|
|
|
|
+ /deep/.el-table__body-wrapper{
|
|
|
|
|
+ max-width: 1643px;
|
|
|
|
|
+ max-height: 510px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ // max-height: 640px;
|
|
|
|
|
+ // overflow: auto;
|
|
|
|
|
+ padding: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .paging {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 15px;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|