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

<template>
  <div class="app-container container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <div class="head-container">
      <el-button size="mini" @click="handleAdd">
        <svg-icon icon-class="xinzengpandian-fanbai" class-name="svg-style" />新增盘点</el-button>
      <el-button
        icon="el-icon-delete"
        size="mini"
        style="margin:0 7px 0 7px"
        :disabled="selections.length ? false : true "
        @click="deleteVisible = true"
      >删除</el-button>
      <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: 80px">
          <el-option
            v-for="item in cateSearchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-input>
      <rrOperation />
      <!-- <crudOperation :permission="permission" /> -->
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableData"
      :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="checkNum" align="center" label="盘点单号" min-width="100" />
      <el-table-column prop="containPath" 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 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="storeNum" align="center" label="在库档案" min-width="60" />
      <el-table-column prop="CheckedNum" align="center" label="已盘档案" min-width="60" />
      <el-table-column prop="noCheckNum" align="center" label="未盘档案" min-width="60" />
      <el-table-column prop="haveLendNum" align="center" label="已借档案" min-width="60" />
      <el-table-column prop="misplaceNum" align="center" label="错位档案" min-width="60" />
      <el-table-column prop="CreateTime" align="center" label="创建时间" min-width="100" />
    </el-table>
    <!-- 删除模态框 -->
    <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>确定删除当前盘点任务？</span></p>
          <p class="delt-tip"><span>提示：确定删除后,该数据将无法找回!</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增模态框 -->
    <addCheck ref="addCheckDom" />
    <!-- 盘点详情 -->
    <checkDetail ref="checkDetailDom" />
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import rrOperation from '@crud/RR.operation'
import CRUD, { presenter } from '@crud/crud'
// import crudJob from '@/api/system/job'
// import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import data1 from './data1.json'
import addCheck from './module/addCheck.vue'
import checkDetail from './module/checkDetail.vue'

export default {
  name: 'ArchivesCheck',
  components: { pagination, rrOperation, addCheck, checkDetail },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      url: 'api/case/initCaseList',
      // crudMethod: caseCrudMethod,
      title: '档案盒',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        group: false
      }
    })
  },
  // dicts: ['job_status'],

  data() {
    return {
      tableData: [],
      selections: [],
      keyWord: '',
      cateSearch: '区域',
      cateSearchOptions: [
        { value: '选项1', label: '区域' }
      ],
      deleteVisible: false
    }
  },
  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.tableData = data1.rows
    },
    handleConfirm() {
      this.deleteVisible = false
    },
    handleAdd() {
      this.$refs.addCheckDom.addFormVisible = true
    },
    handleClose() {
      this.deleteVisible = false
    },
    cell({ row, columnIndex }) {
      if (row.checkState === '已执行' && columnIndex === 4) {
        return 'have-clear'
      } else if (row.checkState === '待执行' && columnIndex === 4) {
        return 'fail-clear'
      } else if (row.checkState === '执行中' && columnIndex === 4) {
        return 'no-clear'
      }
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    handleDbClick(row) {
      // this.$refs.table.clearSelection()
      const checkDetailDom = this.$refs.checkDetailDom
      checkDetailDom.detailVisible = true
      checkDetailDom.rowData = row
      const arr = data1.rows.filter(item => item.checkNum === row.checkNum)
      checkDetailDom.tableData = arr
      // 状态类名
      if (row.checkState === '已执行') {
        checkDetailDom.classLend = 'have-clear'
      } else if (row.checkState === '待执行') {
        checkDetailDom.classLend = 'fail-clear'
      } else if (row.checkState === '执行中') {
        checkDetailDom.classLend = 'no-clear'
      }
    }

  }
}
</script>

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

.head-container {
  color: #fff;
}

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

.el-dialog .dialog-footer {
  padding: 0;
  margin: 0;
}
.svg-style{
  margin-right: 5px;
}
</style>