yxk-storeroom-system/src/views/archivesManage/archivesCheck/index.vue

<template>
  <div class="app-container">
    <div class="head-container" style="padding:0 0 20px 0">
      <div>
        <el-button size="mini" class="iconfont icon-xinzengpandian-fanbai" @click="handleAdd">新增</el-button>
        <el-button
          icon="el-icon-delete"
          size="mini"
          style="margin:0 0 0 10px"
          :disabled="!(selections.length) "
          @click="handleDel"
        >删除</el-button>
        <el-button size="mini" icon="el-icon-tickets" :disabled="!(selections.length===1 && selections[0].checkState === 1) " @click="handleCalc">结算</el-button>
        <el-button :loading="btnLoading" size="mini" :disabled="!(selections.length ===1)" icon="el-icon-download" @click="handleExport">导出</el-button>
        <el-select v-model="stateVal" class="filter-item" style="width: 90px;height:30px;margin:0 10px 0 10px" @change="crud.toQuery">
          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input
          v-model="keyWord"
          size="small"
          clearable
          placeholder="请输入关键词"
          style="width: 300px;margin-right:10px"
          class="input-prepend filter-item"
          @keyup.enter.native="crud.toQuery"
        >
          <el-select slot="prepend" v-model="cateSearch" style="width: 100px;">
            <el-option
              v-for="item in cateSearchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-input>
        <rrOperation />
      </div>
      <div>
        <el-button size="mini" icon="el-icon-brush" @click="handleClear">清空缓存</el-button>
      </div>
      <!-- <crudOperation :permission="permission" /> -->
    </div>
    <div class="container-wrap" style="min-height: calc(100vh - 242px)">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="crud.data"
        :cell-class-name="cell"
        style="min-width: 100%"
        height="calc(100vh - 315px)"
        @selection-change="selectionChangeHandler"
        @row-click="clickRowHandler"
        @row-dblclick="handleDbClick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" align="center" label="序号" width="55" />
        <el-table-column prop="id" align="center" label="盘点单号" min-width="100" />
        <el-table-column prop="region" align="center" label="包含位置" min-width="140" />
        <el-table-column prop="checkState" align="center" label="盘点状态" min-width="60">
          <template slot-scope="scope">
            <!-- 已执行 / 待执行/执行中 -->
            <span class="clear">{{ scope.row.checkState | checkState }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="correct" align="center" label="在库档案" min-width="60" />
        <el-table-column prop="checked" align="center" label="已盘档案" min-width="60" />
        <el-table-column prop="abnormal" align="center" label="异常档案" min-width="60" />
        <el-table-column prop="noCheck" align="center" label="未盘档案" min-width="60" />
        <el-table-column prop="borrowed" align="center" label="已借档案" min-width="60" />
        <el-table-column prop="dislocation" align="center" label="错位档案" min-width="60" />
        <el-table-column prop="others" align="center" label="多余档案" min-width="60" />
        <el-table-column prop="create_time" align="center" label="创建时间" min-width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time | parseTime }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <!-- 删除模态框 -->
    <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div class="dialog-delt">
          <p><span style="font-size:16px">确定删除当前盘点任务？</span></p>
          <p class="delt-tip"><span>提示：确定删除后,该数据将无法找回!</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增模态框 -->
    <addCheck ref="addCheckDom" />
    <!-- 盘点详情 -->
    <checkDetail ref="checkDetailDom" />
    <!-- 结算 -->
    <CalcSteps ref="calcDom" />
  </div>
</template>

<script>
import rrOperation from '@crud/RR.operation'
import CRUD, { presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import addCheck from './module/addCheck.vue'
import checkDetail from './module/checkDetail.vue'
import { getArrange, getArrangeDetailes, checkDel, settlement, arrangeClean } from '@/api/archivesManage/archivesCheck'
import { exportFile } from '@/utils/index'
import qs from 'qs'
import { mapGetters } from 'vuex'
import CalcSteps from './module/calcSteps.vue'

export default {
  name: 'ArchivesCheck',
  components: { pagination, rrOperation, addCheck, checkDetail, CalcSteps },
  filters: {
    checkState(val) {
      switch (val) {
        case 0:
          return '待执行'
        case 1:
          return '执行中'
        case 2:
          return '已执行'
      }
    }
  },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      url: 'api/arrange/initArrangeList',
      // url: 'api/case/initCaseList',
      // crudMethod: caseCrudMethod,
      title: '档案盒',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        group: false
      }
    })
  },
  // dicts: ['job_status'],
  data() {
    return {
      btnLoading: false,
      // tableData: [],
      selections: [],
      keyWord: '',
      stateVal: -1,
      stateOptions: [
        { value: -1, label: '全部' },
        { value: 0, label: '待执行' },
        { value: 1, label: '执行中' },
        { value: 2, label: '已执行' }
      ],
      cateSearch: 'region',
      cateSearchOptions: [
        { value: 'region', label: '区域' },
        { value: 'id', label: '盘点单号' }
      ],
      deleteVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    // 获取数据前的处理
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.downloadLoading = true
      this.crud.query.checkState = null
      this.crud.query.id = null
      this.crud.query.region = null
      if (this.stateVal > -1) {
        this.crud.query.checkState = this.stateVal
      }
      // todo
      if (this.cateSearch === 'region') {
        this.crud.query.region = this.keyWord
      } else {
        this.crud.query.id = this.keyWord
        console.log(this.crud.query.id)
        // this.crud.data = this.crud.data.filter(item => item.id.includes(this.keyWord))
        console.log(this.crud.data)
      }
      this.crud.downloadLoading = false
    },
    // 删除
    handleDel() {
      const bool = this.selections.every(item => item.checkState === 0)
      if (bool) {
        this.deleteVisible = true
      } else {
        this.$message({
          message: '只能删除待执行的档案',
          type: 'warning'
        })
      }
    },
    handleDelConfirm() {
      const ids = this.selections.map(item => { return item.id })
      checkDel(ids).then(res => {
        if (res) {
          this.crud.refresh()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.deleteVisible = false
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 结算
    handleCalc() {
      const calcDom = this.$refs.calcDom
      calcDom.calcVisible = true
      calcDom.stepActive = 2
      const params = {
        'orderId': this.selections[0].id
      }
      settlement(params).then(res => {
        if (res) {
          calcDom.stepActive = 3
          calcDom.res = 1
          calcDom.source = this.source
          // calcDom.calcVisible = false
          this.crud.refresh()
        } else {
          calcDom.stepActive = 3
          calcDom.res = 0
        }
      })
    },
    // 清空缓存
    handleClear() {
      arrangeClean().then(res => {
        // this.crud.refresh()
        this.$message({
          message: '清空成功',
          type: 'success'
        })
      })
    },
    // 新增盘点
    handleAdd() {
      this.$refs.addCheckDom.addFormVisible = true
    },
    handleClose() {
      this.deleteVisible = false
    },
    cell({ row, columnIndex }) {
      if (row.checkState === 2 && columnIndex === 4) {
        return 'have-clear'
      } else if (row.checkState === 0 && columnIndex === 4) {
        return 'fail-clear'
      } else if (row.checkState === 1 && columnIndex === 4) {
        return 'no-clear'
      }
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 双击详情
    handleDbClick(row) {
      const checkDetailDom = this.$refs.checkDetailDom
      const params = {
        orderNo: row.id
      }
      getArrange(params).then(res => {
        checkDetailDom.rowData.push(res)
      })
      getArrangeDetailes(params).then(res => {
        checkDetailDom.tableData = res.content
      })
      checkDetailDom.detailVisible = true
    },
    // 导出
    handleExport() {
      this.btnLoading = true
      const id = this.selections[0].id
      const params = {
        'orderNo': id
      }
      exportFile(this.baseApi + '/api/arrange/exportArrange?' + qs.stringify(params, { indices: false }))
      this.btnLoading = false
    }

  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
@import "~@/assets/styles/archives-manage.scss";

.head-container {
  color: #fff;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-dialog__footer {
  background-color: #031435;
}

.el-dialog .dialog-footer {
  padding: 0;
  margin: 0;
}
.svg-style{
  margin-right: 5px;
}
::v-deep .input-prepend .el-input__inner{
padding-left: 94px;
}
</style>