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

<template>
  <div class="to-lend">
    <div class="head-container head-archives clearfix">
      <div class="archives-crud">
        <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" @click="crud.toAdd">
          新增
        </el-button>
        <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections[0])">
          修改
        </el-button>
        <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="!crud.selections.length" @click="toDelete(crud.selections)">删除</el-button>
      </div>
      <div class="head-search">
        <el-input v-model="lendQuery[lendSelect]" clearable size="small" placeholder="请输入关键词" style="width: 300px;" class="input-prepend filter-item" @clear="crud.toQuery" @blur="crud.toQuery" @keyup.enter.native="crud.toQuery">
          <el-select slot="prepend" v-model="lendSelect" style="width: 100px">
            <el-option
              v-for="item in queryOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-input>
        <rrOperation />
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="crud.data"
      style="min-width: 100%"
      height="calc(100vh - 356px)"
      @selection-change="crud.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="department" align="center" label="所属部门" min-width="85" />
      <el-table-column prop="cardType" align="center" label="证件类型" min-width="85" />
      <el-table-column prop="idcard" align="center" label="证件号码" min-width="140" />
      <el-table-column prop="phone" align="center" label="电话号码" min-width="120" />
      <el-table-column prop="create_time" align="center" label="操作时间" min-width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.create_time | parseTime }}</div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 借阅者增加模态框 -->
    <addBorrower ref="addBorrowerDom" />
    <!-- 删除模态框 -->
    <el-dialog title="确认删除" :visible.sync="deleteVisible">
      <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(crud.selections)">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, crud } from '@crud/crud'
import crudMethod from '@/api/archivesManage/lendManage'
import { lendingCrud } from '../mixins/lending'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import addBorrower from './module/addBorrower.vue'

export default {
  name: 'BorrowerManage',
  components: { pagination, rrOperation, addBorrower },
  mixins: [presenter(), crud(), lendingCrud],
  cruds() {
    return CRUD({
      url: 'api/borrow/initBorrower',
      crudMethod: { ...crudMethod },
      title: '借阅者',
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        group: false
      },
      sort: ['create_time,desc']
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'borrowerManage:add'],
        edit: ['admin', 'borrowerManage:edit'],
        del: ['admin', 'borrowerManage:del']
      },
      editFormVisible: false,
      deleteVisible: false,
      deleteData: {},
      queryOption: [
        { value: 'query', label: '借阅人' },
        { value: 'phone', label: '电话号码' }
      ]
    }
  },
  mounted() {
  },
  methods: {
    // 获取数据前的处理
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.query = null
      this.crud.query.phone = null
      this.crud.query[this.lendSelect] = this.lendQuery[this.lendSelect]
    },
    [CRUD.HOOK.beforeSubmit]() {
      delete this.crud.form.borrowerNamePy
      delete this.crud.form.create_by
      delete this.crud.form.create_time
      delete this.crud.form.isDelete
      delete this.crud.form.update_by
      delete this.crud.form.update_time
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    handleDelConfirm() {
      this.deleteVisible = false
      this.crud.delAllLoading = true
      this.crud.doDelete(this.deleteData).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    toDelete(data) {
      this.deleteData = data
      this.deleteVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/archives-manage.scss";
.head-archives{
  padding: 20px;
}
::v-deep .input-prepend .el-input__inner {
    padding-left: 100px;
}
</style>