DLBWG_CK/src/views/statistics/statistics2.vue

<!--  -->
<template>
  <div class="holding">
    <TabList :ind='2'/>
    <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>
      </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-select v-model="myData.type" placeholder="请选择" style="width:108px">
                  <el-option label="藏品名称" value="name"></el-option>
                  <el-option label="登记人" value="user"></el-option>
                </el-select>

            <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: '#d8dff0', color: '#404040' }"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column prop="name" label="藏品名称" :resizable="false">
              </el-table-column>
              <el-table-column prop="num" label="总登记号" width="280" :resizable="false">
              </el-table-column>
              <el-table-column prop="realName" label="登记人" width="200" :resizable="false">
              </el-table-column>
              <el-table-column prop="updateTime" label="编辑日期" width="200" :resizable="false">
              </el-table-column>
              <el-table-column prop="status" label="状态" width="230" :resizable="false">
              </el-table-column>
              <el-table-column label="操作" width="295" :resizable="false">
                <template #default='{row}'>
                  <el-button type="text"  @click="myLook(row)" v-if="row.status!=='待审核'">查看</el-button>
                  <el-button type="text"  @click="audit(row)" v-if="row.status==='待审核'" v-show="userLimits.audit">审核</el-button>
                  <el-button type="text"  @click="delData(row.id,row.status)" v-if="row.status!=='已完成'" v-show="userLimits.del" style="color:#C94848;">删除</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/statistics2'
import TabList from '@/components/tabLeft3.vue'
export default {
  name: 'statistics2',
  components: { TabList },
  data () {
    return {
      userLimits: {
        del: false,
        audit: false
      }, // 用户权限数据
      total: 0,
      myData: {
        type: 'name',
        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: {
    // 处理时间
    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 === 2) {
          // 点击已完成
          this.myData.status = 3
          this.getList(this.myData)
        } else if (index === 3) {
          // 点击审核不通过
          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/statistics2_look',
        query: val
      })
    },
    // 点击删除
    async delData (id, status) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发请求删除
        await delData(id)
        // 发请求刷新页面
        this.getList(this.myData)
        // 更新顶部数据
        this.stateArr.forEach(v => {
          if (v.txt === status) v.num--
        })
        this.stateArr[0].num--
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消.'
        })
      })
    },

    // 点击审核
    audit (val) {
      this.$router.push({
        path: '/layout/statistics2_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 () {
    this.getList(this.myData)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  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 === 3) num2++
      if (v.status === 2) num3++
    })
    this.stateArr[1].num = num1
    this.stateArr[2].num = num2
    this.stateArr[3].num = num3
    // 获取角色权限树
    let temp2 = localStorage.getItem('daliCK_limits')
    temp2 = JSON.parse(temp2)
    this.userLimits.del = temp2[7].children[0].authority
    this.userLimits.audit = temp2[7].children[1].authority
    // console.log(999, temp2[7])
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.holding {
    /deep/#mytitle>span{
    font-weight: 800;
  }

  display: flex;
  .right {
    width: 100%;
   .top {
      padding-left: 18px;
      display: flex;
      align-items: center;
      margin-left: 2px;
      height: 40px;
    }
    .conten {
      padding: 0 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: #3E5EB3;
            border-bottom: 2px solid #3E5EB3;
          }
          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>