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

<template>
  <div class="to-lend">
    <headSlot>
      <el-button icon="el-icon-document-add" size="mini" @click="handleRecord">登记</el-button>
      <el-button icon="el-icon-document-remove" size="mini" :disabled="selections.length ? false : true " @click="handleRemove">移出</el-button>
      <!-- <button @click="getTableData">测试按钮</button> -->
    </headSlot>

    <!--表格渲染-->
    <el-table
      ref="table"
      style="min-width: 100%"
      height="calc(100vh - 355px)"
      :data="tableData"
      :cell-class-name="cell"
      :default-sort="{ prop: 'isOperationTime', order: 'descending' }"
      @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="isCategoryName" label="所属门类" min-width="85" />
      <el-table-column prop="isArchivesID" label="档号" :show-overflow-tooltip="true" min-width="120" />
      <el-table-column prop="isTitleName" :show-overflow-tooltip="true" label="题名" min-width="120" />
      <el-table-column prop="isFieldName" label="盒名称" min-width="85" />
      <el-table-column prop="isStoragePath" label="存放位置" :show-overflow-tooltip="true" min-width="120" />
      <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 sortable prop="isOperationTime" label="操作时间" min-width="85" />
    </el-table>
    <!-- 借阅登记模态框 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="recordFormVisible"
      title="借阅登记"
    >
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form
          ref="form"
          :model="recordForm"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="借阅人" prop="borrowerName">
            <el-input v-model="recordForm.borrowerName" style="width: 420px" />
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="recordForm.tel" style="width: 420px" />
          </el-form-item>
          <el-form-item label="所属部门" prop="department" class="down-select">
            <el-select
              v-model="recordForm.departmentDatas"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in recordForm.departmentDatas"
                :key="item.name"
                :disabled="level !== 1 && item.level <= level"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="证件类型" prop="idType" class="down-select">
            <el-select
              v-model="recordForm.idType"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in recordForm.idType"
                :key="item.name"
                :disabled="level !== 1 && item.level <= level"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="idNumber">
            <el-input v-model="recordForm.idNumber" style="width: 420px" />
          </el-form-item>
          <el-form-item label="借阅时间" prop="lendDate">
            <date-range-picker style="width: 420px" />
          </el-form-item>
          <el-form-item label="借阅目的" prop="borrowGoal" class="down-select">
            <el-select
              v-model="recordForm.borrowGoal"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in recordForm.borrowGoal"
                :key="item.name"
                :disabled="level !== 1 && item.level <= level"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="recordFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="handleRecordConfirm"
          >确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 移出确认弹框 -->
    <delConfirm ref="delConfirmDom" :list-name="listName" />
    <!-- 档案详情 -->
    <archiveDetail ref="archiveDetailDom" />
    <!-- 分页 -->
    <pagination />

  </div>
</template>

<script>
import pagination from '@crud/Pagination'
// import crudOperation from '@crud/CRUD.operation'
import headSlot from '../components/headSlot.vue'
import DateRangePicker from '@/components/DateRangePicker'
import CRUD, { presenter } from '@crud/crud'
import delConfirm from '../components/delConfirm.vue'
import archiveDetail from './module/archiveDetail.vue'
import data1 from '../data1.json'
export default {
  components: { headSlot, DateRangePicker, pagination, delConfirm, archiveDetail },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      // title: '岗位',
      //   url: 'api/job',
      // crudMethod: { ...crudJob },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        group: false
      }
    })
  },
  data() {
    return {
      tableData: [],
      selections: [],
      listName: '借出列表',
      recordFormVisible: false,
      recordForm: {
        borrowerName: '',
        tel: '',
        departmentDatas: [],
        idType: [],
        idNumber: '',
        lendDate: '',
        borrowGoal: []
      },
      rules: {
        borrowerName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      this.tableData = data1.rows
    },
    handleRecord() {
      this.recordFormVisible = true
    },
    // 移出
    handleRemove() {
      this.$refs.delConfirmDom.deleteVisible = true
    },
    // 档案详情
    handleDbClick(row) {
      this.$refs.archiveDetailDom.detailVisible = true
      this.$refs.archiveDetailDom.rowData = row
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    handleRecordConfirm() {
      this.recordFormVisible = false
    },
    cell({ row, columnIndex }) {
      if (row.isLendStatus === '待借' && columnIndex === 7) {
        return 'no-lend'
      } else if (row.isLendStatus === '已借' && columnIndex === 7) {
        return 'have-lend'
      } else if (row.isLendStatus === '' && columnIndex === 7) {
        return 'other-lend'
      }
    }
  }
}
</script>

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