yxk-storeroom-system/src/views/archivesManage/lendManage/lendQuery/index.vue

<template>
  <div class="lend-query">
    <head-slot>
      <!-- <el-button icon="el-icon-download" size="mini" class="margin-r" disabled
        >导出</el-button
      > -->
      <crudOperation />
      <el-select
        v-model="lendState"
        class="filter-item"
        style="width: 100px; height: 30px;margin-left:10px"
      >
        <el-option
          v-for="item in lendStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <!-- <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> -->
      <el-input
        v-model="keyWord"
        size="small"
        clearable
        placeholder="请输入关键词"
        style="width: 300px"
        class="input-prepend"
        @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 />
    </head-slot>
    <!--表格渲染-->
    <el-table
      ref="table"
      style="width: 100%"
      height="calc(100vh - 355px)"
      :data="tableData"
      :cell-class-name="cell"
      @row-click="clickRowHandler"
      @row-dblclick="handleDbClick"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" align="center" width="55" />
      <el-table-column prop="lendStatus" align="center" label="借阅状态" width="100">
        <template slot-scope="scope">
          <!-- 已借 / 待借 -->
          <span class="cell-lend" style="width:76px">{{ scope.row.lendStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="docNum" align="center" label="单据号" width="160" />
      <el-table-column prop="fieldName" align="center" label="门类名称" width="150" />
      <el-table-column prop="archivesID" align="center" label="档号" width="200" />
      <el-table-column prop="titleName" align="center" label="题名" width="200" />
      <el-table-column prop="fieldName" align="center" label="盒名称" width="150" />
      <el-table-column prop="storagePath" align="center" label="存放位置" width="250" />
      <el-table-column prop="borrowerName" align="center" label="借阅人" width="90" />
      <el-table-column prop="borrowDays" align="center" label="借阅时间" width="180" />
      <el-table-column prop="borrowGoal" align="center" label="借阅目的" width="90" />
      <el-table-column align="center" prop="operationTime" label="归还时间" width="200" />
    </el-table>
    <!-- 档案详情 -->
    <archiveDetail ref="archiveDetailDom" />
    <!-- 分页 -->
    <pagination />
  </div>
</template>

<script>
import headSlot from '../components/headSlot.vue'
import CRUD, { presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import data3 from '../data3.json'
import archiveDetail from '../returnArchives/module/archiveDetail.vue'
export default {
  name: 'LendQuery',
  components: { headSlot, pagination, rrOperation, crudOperation, archiveDetail },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      url: 'api/case/initCaseList',
      // crudMethod: caseCrudMethod,
      title: '档案盒',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: true,
        group: false
      }
    })
  },
  data() {
    return {
      tableData: [],
      lendStateOptions: [
        { value: '选项1', label: '全部' },
        { value: '选项2', label: '待登记' },
        { value: '选项3', label: '待借阅' },
        { value: '选项4', label: '待归还' },
        { value: '选项5', label: '逾期' },
        { value: '选项6', label: '已归还' }
      ],
      lendState: '全部',
      keyWord: '',
      cateSearch: '借阅人',
      cateSearchOptions: [
        { value: '选项1', label: '借阅人' },
        { value: '选项2', label: '档号' },
        { value: '选项3', label: '题名' },
        { value: '选项4', label: '位置' },
        { value: '选项5', label: '档案盒' },
        { value: '选项6', label: '条形码' },
        { value: '选项7', label: 'TID' }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.tableData = data3.rows
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    cell({ row, columnIndex }) {
      if (row.lendStatus === '逾期' && columnIndex === 2) {
        return 'no-lend'
      } else if (row.lendStatus === '待归还' && columnIndex === 2) {
        return 'have-lend'
      }
    },
    // 档案详情
    handleDbClick(row) {
      this.$refs.table.clearSelection()
      const archiveDetailDom = this.$refs.archiveDetailDom
      // const arr = data3.rows.filter(item => item.docNum === row.docNum)
      archiveDetailDom.rowData = row
      console.log(row)
      // 借阅状态样式类名
      if (row.lendStatus === '待归还') {
        archiveDetailDom.classLend = 'have-lend'
      } else if (row.lendStatus === '逾期') {
        archiveDetailDom.classLend = 'no-lend'
      }
      archiveDetailDom.detailVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep.input-prepend {
  margin: 0 10px 0 -10px;
  background-color: #021941;
  border-radius: 3px;
  // word-spacing: -10px;
  border: 1px solid #339cff;
  .el-select {
    background-color: #021941;
    color: #339CFF;
  }
  .el-input__inner {
    background-color: #021941;
    border: none;
    caret-color: #fff;
    color: #fff;
    height: 28px;
    line-height: 28px;
  }
  .el-input-group__prepend {
    border: none;
  }
}
::v-deep .el-icon-arrow-up:before{
  color: #339CFF;
}
</style>