yxk-storeroom-system/src/views/archivesConfig/dict/dictDetail.vue

<template>
  <div>
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission">
        <template v-slot:left>
          <el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button>
        </template>
        <template v-slot:right>
          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
        </template>
      </crudOperation>
    </div>
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="字典名称" prop="dicName">
            <el-input v-model="form.dicName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="字典代码" prop="dicCode">
            <el-input v-model="form.dicCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="内容说明" prop="dicExplain">
            <el-input v-model="form.dicExplain" style="width: 370px;" type="textarea" :rows="4" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</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">
        <div class="dialog-delt">
          <p><span>确定删除当前字典内容吗？</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="dicName" label="字典名称" />
      <el-table-column prop="dicCode" label="字典代码" />
      <el-table-column prop="dicExplain" label="内容说明" />
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudDictDetail from '@/api/archivesConfig/dictDetail'
import CRUD, { presenter, header, form } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, dicName: null, dicCode: null, dicExplain: null, dicType: false }

export default {
  components: { crudOperation, pagination },
  cruds() {
    return [
      CRUD({
        title: '字典内容', url: 'api/dictrionary/findSubsetById', query: { id: '' },
        crudMethod: { ...crudDictDetail },
        optShow: {
          add: false,
          edit: true,
          del: false,
          reset: false,
          download: false,
          group: false
        },
        queryOnPresenterCreated: false,
        sort: ['dicCode,asc']
      })
    ]
  },
  mixins: [
    presenter(),
    header(),
    form(function() {
      return Object.assign({ dicPid: this.dicPid }, defaultForm)
    })
  ],
  props: {
    activeAddBtn: {
      type: Boolean
    }
  },
  data() {
    return {
      dicPid: null,
      needRefreshTree: false,
      rules: {
        dicName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        dicCode: [
          { required: true, message: '请输入字典代码', trigger: 'blur' }
        ]
      },
      permission: {
        add: ['admin', 'dict:add'],
        edit: ['admin', 'dict:edit'],
        del: ['admin', 'dict:del']
      },
      deleteVisible: false,
      deleteData: {}
    }
  },
  methods: {
    [CRUD.HOOK.afterSubmit]() {
      this.needRefreshTree = true
    },
    [CRUD.HOOK.afterDelete]() {
      this.needRefreshTree = true
    },
    // 获取数据前设置默认参数
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.id = this.dicPid
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (this.needRefreshTree) {
        this.needRefreshTree = false
        this.$emit('treeRefresh', crud.data)
      }
    },
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      if (val.length > 1) {
        // 取出最后val的最后一个返回出来
        const finalVal = val.pop()
        // 清除所有选中
        this.$refs.table.clearSelection()
        // 给最后一个加上选中
        this.$refs.table.toggleRowSelection(finalVal)
        this.crud.selectionChangeHandler([finalVal])
      } else {
        this.crud.selectionChangeHandler(val)
      }
    },
    toDelete(data) {
      this.deleteData = data
      this.deleteVisible = true
    },
    handleConfirm() {
      this.deleteVisible = false
      this.crud.delAllLoading = true
      this.crud.doDelete(this.deleteData)
    },
    handleClose(done) {
      this.deleteData = {}
      done()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep thead .el-table-column--selection .cell {
  display: none;
}
</style>