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

<template>
  <div class="to-lend">
    <headSlot>
      <el-button size="mini" @click="handleRecord">
        <svg-icon icon-class="dengji-fanbai" class-name="svg-style" />登记</el-button>
      <el-button size="mini" @click="handleRemove">
        <svg-icon icon-class="yichu-fanbai" class-name="svg-style" />移出</el-button>
      <!-- <button @click="getTableData">测试按钮</button> -->
    </headSlot>

    <!--表格渲染-->
    <el-table
      ref="table"
      style="min-width: 100%"
      height="calc(100vh - 355px)"
      :data="tableData"
      :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="序号" align="center" width="55" />
      <el-table-column prop="isCategoryName" label="所属门类" align="center" min-width="85" />
      <el-table-column prop="isArchivesID" label="档号" align="center" min-width="120" />
      <el-table-column prop="isTitleName" align="center" label="题名" min-width="120" />
      <el-table-column prop="isFieldName" align="center" label="盒名称" min-width="85" />
      <el-table-column prop="isStoragePath" align="center" label="存放位置" min-width="120" />
      <el-table-column prop="isLendStatus" align="center" label="借阅状态" min-width="60">
        <template slot-scope="scope">
          <!-- 待登记 -->
          <span class="cell-lend">{{ scope.row.isLendStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isOperationTime" align="center" 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 v-model="lendDates" style="width: 420px" />
            <!-- <el-date-picker v-model="lendDates" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" 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 crudUser from '@/api/system/user'

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, crud } from '@crud/crud'
import delConfirm from '../components/delConfirm.vue'
import archiveDetail from './module/archiveDetail.vue'
import data2 from '../data2.json'
export default {
  components: { headSlot, pagination, delConfirm, archiveDetail, DateRangePicker },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
      // title: '岗位',
      //   url: 'api/job',
      // crudMethod: { ...crudUser },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        group: false
      }
    })
  },
  data() {
    return {
      lendDates: '',
      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 = data2.rows
    },
    handleRecord() {
      this.recordFormVisible = true
    },
    // 移出
    handleRemove() {
      this.$refs.delConfirmDom.deleteVisible = true
    },
    // 档案详情
    handleDbClick(row) {
      this.$refs.table.clearSelection()
      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
      console.log(this.lendDates)
    }
    // 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';
.cell-lend{
  display: inline-block;
  text-align: center;
  width: 76px;
  height: 26px;
  line-height: 26px;
  color: #F65163;
  border: 1px solid #F65163;
  border-radius:13px ;
}
::v-deep .el-range-separator{
  color: #fff;
  padding-top:2px ;
}
.svg-style{
  margin-right: 5px;
}
</style>