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

<template>
  <div class="to-lend">
    <head-slot>
      <!-- <crudOperation :permission="permission" /> -->
      <el-button icon="el-icon-plus" size="mini" @click="addFormVisible = true">新增</el-button>
      <el-button icon="el-icon-edit" size="mini" :disabled="selections.length===1 ? false : true " @click="handelEdit">修改</el-button>
      <el-button icon="el-icon-delete" size="mini" :disabled="selections.length ? false : true " @click="deleteVisible = true">删除</el-button>

      <!-- 搜索 -->
      <el-input
        v-model="query.name"
        clearable
        size="small"
        placeholder="请输入关键词"
        prefix-icon="el-icon-search"
        style="width: 200px; margin-left: 10px"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <rrOperation />
    </head-slot>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableData"
      style="min-width: 100%"
      height="calc(100vh - 355px)"
      @selection-change="selectionChangeHandler"
      @row-click="clickRowHandler"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column type="index" align="center" label="序号" width="100" />
      <el-table-column prop="borrowerName" align="center" label="借阅人" min-width="85" />
      <el-table-column prop="borrowerDepartment" align="center" label="所属部门" min-width="85" />
      <el-table-column prop="borrowerIdType" align="center" label="证件类型" min-width="85" />
      <el-table-column prop="borrowerIdNum" align="center" label="证件号码" min-width="140" />
      <el-table-column prop="borrowerTel" align="center" label="电话号码" min-width="120" />
      <el-table-column prop="operationTime" align="center" label="操作时间" min-width="140" />
    </el-table>

    <!-- 借阅者增加模态框 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="addFormVisible"
      title="借阅人信息"
    >
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form
          ref="borrowerFormDom"
          :model="borrowerForm"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="借阅人" prop="addName">
            <el-input
              v-model="borrowerForm.borrowerName"
              style="width: 420px"
            />
          </el-form-item>
          <el-form-item label="电话号码" prop="addTel">
            <el-input v-model="borrowerForm.tel" style="width: 420px" />
          </el-form-item>
          <el-form-item label="所属部门" prop="department" class="down-select">
            <el-select
              v-model="borrowerForm.departmentDatas"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in borrowerForm.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="borrowerForm.idType"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in borrowerForm.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="borrowerForm.idNumber" style="width: 420px" />
          </el-form-item>
          <!-- <el-form-item label="借阅时间" prop="lendDate">
            <date-range-picker style="width: 420px" />
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="handleAddConfirm"
          >确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="editFormVisible"
      title="修改借阅人"
    >
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form
          ref="form"
          :model="borrowerForm"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="借阅人" prop="borrowerName">
            <el-input
              v-model="borrowerForm.borrowerName"
              style="width: 420px"
            />
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="borrowerForm.borrowerTel" style="width: 420px" />
          </el-form-item>
          <el-form-item label="所属部门" prop="borrowerDepartment" class="down-select">
            <el-select
              v-model="borrowerForm.departmentDatas"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in borrowerForm.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="borrowerIdType" class="down-select">
            <el-select
              v-model="borrowerForm.idType"
              style="width: 420px"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in borrowerForm.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="borrowerIdNum">
            <el-input v-model="borrowerForm.borrowerIdNum" style="width: 420px" />
          </el-form-item>
          <!-- <el-form-item label="借阅时间" prop="lendDate">
            <date-range-picker style="width: 420px" />
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="editFormVisible = false"
          >确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 删除模态框 -->
    <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <p><span style="color:#fff;">您确定要删除当前借阅人信息吗？</span></p>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <pagination />
  </div>
</template>

<script>
import headSlot from '../components/headSlot.vue'
import pagination from '@crud/Pagination'
import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
// import crudOperation from '@crud/CRUD.operation'
import data1 from '../data1.json'
export default {
  components: { headSlot, pagination, rrOperation },
  mixins: [presenter(), header()],
  cruds() {
    return CRUD({
      // title: '岗位',
      //   url: 'api/job',
      // crudMethod: { ...crudJob },
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        group: false
      }
    })
  },
  data() {
    return {
      tableData: [],
      selections: [],
      addFormVisible: false,
      editFormVisible: false,
      deleteVisible: false,
      borrowerForm: {},
      // permission: {
      //   add: ['admin', 'lend:add'],
      //   edit: ['admin', 'lend:edit'],
      //   del: ['admin', 'lend:del']
      // },
      rules: {
        addName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        addTel: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.tableData = data1.rows
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    handleAdd() {
      this.addFormVisible = true
    },
    handleDelConfirm() {
      this.deleteVisible = false
    },
    handelEdit() {
      this.borrowerForm = this.selections[0]
      this.editFormVisible = true
    },
    handleAddConfirm() {
      this.$refs.borrowerFormDom.validate((valid) => {
        if (valid) {
          this.$message({
            message: '新增成功！',
            type: 'success'
          })
          this.addFormVisible = false
        } else {
          this.$message.error('新增失败！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>