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="min-width: 100%"
      height="calc(100vh - 355px)"
      :data="tableData"
      :cell-class-name="cell"
      @selection-change="selectionChangeHandler"
      @row-click="clickRowHandler"
      @row-dblclick="handleDbClick"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="isLendStatus" label="借阅状态" min-width="60">
        <template slot-scope="scope">
          <!-- 已借 / 待借 -->
          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isFieldName" label="所属门类" min-width="85" />
      <el-table-column prop="isArchivesID" label="档号" min-width="130" />
      <el-table-column prop="isTitleName" label="题名" min-width="130" />
      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
      <el-table-column prop="isStoragePath" label="存放位置" min-width="130" />
      <el-table-column prop="borrowerName" label="借阅人" min-width="60" />
      <el-table-column prop="borrowDays" label="借阅时间" min-width="130" />
      <el-table-column prop="borrowGoal" label="借阅目的" min-width="85" />
      <el-table-column v-if="false" sortable prop="isOperationTime" label="操作时间" min-width="85" />
    </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 data1 from '../data1.json'
import archiveDetail from './module/archiveDetail.vue'
export default {
  components: { headSlot, pagination, rrOperation, crudOperation, archiveDetail },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      // title: '岗位',
      //   url: 'api/job',
      // crudMethod: { ...crudJob },
      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 = data1.rows
    },
    selectionChangeHandler() {
      console.log('selectionChangeHandler')
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    cell({ row, columnIndex }) {
      if (row.isLendStatus === '待借' && columnIndex === 2) {
        return 'no-lend'
      } else if (row.isLendStatus === '已借' && columnIndex === 2) {
        return 'have-lend'
      } else if (row.isLendStatus === '' && columnIndex === 2) {
        return 'other-lend'
      }
    },
    // 档案详情
    handleDbClick(row) {
      this.$refs.archiveDetailDom.detailVisible = true
      const arr = data1.rows.filter(item => item.isDocNum === row.isDocNum)
      this.$refs.archiveDetailDom.rowData = arr
    }
  }
}
</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: #fff;
  }
  .el-input__inner {
    background-color: #021941;
    border: none;
    caret-color: #fff;
    height: 28px;
    line-height: 28px;
  }
  .el-input-group__prepend {
    border: none;
  }
}
</style>