|
|
@@ -1,44 +1,316 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="holding4">
|
|
|
+ <div class="holding">
|
|
|
<TabList :ind='4'/>
|
|
|
<div class="right">
|
|
|
<div class="top">
|
|
|
<el-breadcrumb separator="/">
|
|
|
<el-breadcrumb-item to="">首页</el-breadcrumb-item>
|
|
|
<el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item id="mytitle">藏品盘核</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item id="mytitle">藏品修改</el-breadcrumb-item>
|
|
|
+
|
|
|
</el-breadcrumb>
|
|
|
</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.name"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 217px"
|
|
|
+ ></el-input>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <!--表格 -->
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="" label="藏品名称" >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" label="总登记号" width="280">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="realName" label="编辑登记人" width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建日期" width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="230">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="295">
|
|
|
+ <template #default='{row}'>
|
|
|
+ <el-button type="text" @click="myLook(row)">查看</el-button>
|
|
|
+ <el-button type="text" @click="audit(row)" >审核</el-button>
|
|
|
+ <el-button type="text" @click="delData(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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getList, delData } from '@/apis/holding1'
|
|
|
import TabList from '@/components/tabLeft.vue'
|
|
|
export default {
|
|
|
name: 'Holding4',
|
|
|
- // import引入的组件需要注入到对象中才能使用
|
|
|
components: { TabList },
|
|
|
data () {
|
|
|
- // 这里存放数据
|
|
|
return {
|
|
|
-
|
|
|
+ userLogo: {
|
|
|
+ add: true, // 申请
|
|
|
+ edit: true, // 编辑
|
|
|
+ audit: true, // 审核
|
|
|
+ del: true// 删除
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ myData: {
|
|
|
+ name: '',
|
|
|
+ endTime: '', // 结束时间
|
|
|
+ pageNum: 1, // 起始页码，默认1为第一页
|
|
|
+ pageSize: 10, // 每页数量
|
|
|
+ searchKey: '', // 搜索条件
|
|
|
+ startTime: '', // 开始时间
|
|
|
+ status: null // 状态，不传返回全部，0：草稿中， 1：待审核， 2：审核不通过， 3：审核通过,
|
|
|
+ },
|
|
|
+ // 选择状态的变量
|
|
|
+ stateInd: 0,
|
|
|
+ stateArr: [
|
|
|
+ { txt: '全部', num: 0 },
|
|
|
+ { txt: '待审核', num: 0 },
|
|
|
+ { txt: '已完成', num: 0 },
|
|
|
+ { txt: '审核不通过', num: 0 }
|
|
|
+ ],
|
|
|
+ type: '',
|
|
|
+ time: '',
|
|
|
+ // 表格数据
|
|
|
+ tableData: []
|
|
|
}
|
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
// 监控data中的数据变化
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ // 处理时间
|
|
|
+ time (val) {
|
|
|
+ this.handleSelect(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 点击查询
|
|
|
+ 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 === 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
|
|
|
+ }, // 点击查看
|
|
|
+ myLook (val) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/layout/holding1_look',
|
|
|
+ query: val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击删除
|
|
|
+ async delData (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: '已取消.'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击审核
|
|
|
+ audit (val) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/layout/holding4_audit',
|
|
|
+ query: val
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
+ // 封装获取列表方法
|
|
|
+ async getList (data) {
|
|
|
+ const res = await getList(data)
|
|
|
+ this.total = res.data.total
|
|
|
+ // console.log(666, res.data.list)
|
|
|
+ this.tableData = res.data.list
|
|
|
+ this.tableData.forEach(v => {
|
|
|
+ v.status = this.myState(v.status)
|
|
|
+ // v.updateTime = v.updateTime.slice(0, 10)
|
|
|
+ // v.createTime = v.createTime.slice(0, 10)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 时间处理----------------
|
|
|
+ handleSelect (e) {
|
|
|
+ const date = []
|
|
|
+ for (const i in e) {
|
|
|
+ date.push(this.gettime(e[i]))
|
|
|
+ }
|
|
|
+ this.myData.startTime = date[0]
|
|
|
+ if (date[1]) this.myData.endTime = date[1].replace('00:00:00', '23:59:59')
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created () {},
|
|
|
+ created () {
|
|
|
+ this.getList(this.myData)
|
|
|
+ },
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted () {},
|
|
|
+ async mounted () {
|
|
|
+ // 进页面拿到所有数据
|
|
|
+ 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
|
|
|
+ res.data.list.forEach(v => {
|
|
|
+ if (v.status === 1) num1++
|
|
|
+ if (v.status === 0) num2++
|
|
|
+ if (v.status === 3) num3++
|
|
|
+ })
|
|
|
+ this.stateArr[1].num = num1
|
|
|
+ this.stateArr[2].num = num2
|
|
|
+ this.stateArr[3].num = num3
|
|
|
+ // 获取用户角色权限标识
|
|
|
+ let temp = localStorage.getItem('daliCK')
|
|
|
+ temp = JSON.parse(temp)
|
|
|
+ if (temp) {
|
|
|
+ const temp2 = temp.role[0]
|
|
|
+ if (temp2 === 'sys_audit') this.userLogo.del = false // 保管部主任
|
|
|
+ if (temp2 === 'sys_edit') {
|
|
|
+ this.userLogo.del = false
|
|
|
+ this.userLogo.audit = false
|
|
|
+ } // 保管部成员
|
|
|
+ if (temp2 === 'sys_look') {
|
|
|
+ this.userLogo.del = false
|
|
|
+ this.userLogo.audit = false
|
|
|
+ this.userLogo.add = false
|
|
|
+ this.userLogo.edit = false
|
|
|
+ } // 其他部门人员
|
|
|
+ if (temp2 === 'sys_collect') {
|
|
|
+ this.userLogo.del = false
|
|
|
+ this.userLogo.audit = false
|
|
|
+ this.userLogo.add = false
|
|
|
+ this.userLogo.edit = false
|
|
|
+ } // 征集部主任
|
|
|
+ }
|
|
|
+ },
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
@@ -49,16 +321,14 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
-//@import url(); 引入公共css类
|
|
|
-.holding4 {
|
|
|
+.holding {
|
|
|
/deep/#mytitle>span{
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
+
|
|
|
display: flex;
|
|
|
.right {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
.top {
|
|
|
padding-left: 35px;
|
|
|
display: flex;
|
|
|
@@ -68,11 +338,60 @@ export default {
|
|
|
height: 40px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
- }
|
|
|
- .conten {
|
|
|
- flex: 1;
|
|
|
- background-color: #fff;
|
|
|
- margin: 20px 20px 40px;
|
|
|
+ .conten {
|
|
|
+ padding: 20px 20px 40px;
|
|
|
+ width: 100%;
|
|
|
+ height: 829px;
|
|
|
+ .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 {
|
|
|
+ max-height: 580px;
|
|
|
+ max-width: 1710px;
|
|
|
+ // overflow: auto;
|
|
|
+ padding: 24px;
|
|
|
+ /deep/.el-table__body-wrapper{
|
|
|
+ max-height: 510px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paging {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
