yxk-electronic-archives/src/views/system/subjectLibraryManage/fieldManage/index.vue

<template>
  <div class="subject-contaier">
    <div class="head-container">
      <crudOperation :permission="permission" crud-tag="field">
        <template v-slot:right>
          <el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button>
          <el-button size="mini" @click="toQuick"><i class="iconfont icon-kuaisushezhi" />快速设置</el-button>
        </template>
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 286px)" crud-tag="field" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="fieldCnName" label="字段名称" min-width="145" show-overflow-tooltip />
      <el-table-column prop="fieldName" label="字段标识" min-width="145" show-overflow-tooltip />
      <el-table-column label="数据类型" min-width="85">
        <template slot-scope="scope">
          <span v-if="scope.row.isDataType === 1">字符</span>
          <span v-if="scope.row.isDataType === 2">数字</span>
        </template>
      </el-table-column>
      <el-table-column prop="isColumnLength" label="字段长度" min-width="85" />
      <el-table-column label="著录形式" min-width="85">
        <template slot-scope="scope">
          <span v-if="scope.row.isInputClass === 'select'">下拉框</span>
          <span v-if="scope.row.isInputClass === 'text'">文本框</span>
          <span v-if="scope.row.isInputClass === 'date'">日期框</span>
          <span v-if="scope.row.isInputClass === 'number'">数字框</span>
          <span v-if="scope.row.isInputClass === 'popover'">弹出框</span>
          <span v-if="scope.row.isInputClass === 'textarea'">文本域</span>
        </template>
      </el-table-column>
      <el-table-column prop="dictionaryConfigId.dicName" label="对应字典" min-width="85" show-overflow-tooltip />
      <el-table-column prop="editLength" label="显示长度" min-width="85" />
      <el-table-column label="显示一整行" min-width="110" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isLine" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="输入字段" min-width="85" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isInput" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="必填字段" min-width="85" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isRequired" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="自动生成" min-width="85" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isAuto" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="自动补零" min-width="85" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isFilling" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column prop="fillingDigit" label="位数" min-width="55" align="center" :formatter="digitFormatter" />
      <el-table-column label="值不重复" min-width="85" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isRepeat" :disabled="true" />
        </template>
      </el-table-column>
    </el-table>
    <!--表单渲染-->
    <eForm crud-tag="field" />
    <quickSetting ref="quick" />
    <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>
  </div>
</template>

<script>
import fieldCrudMethod from '@/api/category/fieldManage'
import eForm from './module/form'
import quickSetting from './module/quickSetting'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'

export default {
  components: { eForm, quickSetting, crudOperation },
  mixins: [
    presenter()
  ],
  cruds() {
    return CRUD({
      tag: 'field',
      url: 'api/arc-dic/manage',
      crudMethod: fieldCrudMethod,
      title: '字段',
      optShow: {
        add: true,
        edit: true,
        del: false,
        download: false,
        group: false
      }
    })
  },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', 'fieldManage:add'],
        edit: ['admin', 'fieldManage:edit'],
        del: ['admin', 'fieldManage:edit']
      },
      deleteVisible: false,
      deleteData: {},
      delLoading: false
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
      this.crud.refresh()
    }
  },
  methods: {
    // 获取数据前设置默认参数
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.categoryId = this.selectedCategory.id
      this.crud.query.isType = 2
    },
    [CRUD.HOOK.afterRefresh](crud) {
      crud.data.forEach(function(item, index) {
        item.dictionaryConfigId = item.dictionaryConfigId || { id: null }
      })
    },
    [CRUD.HOOK.beforeValidateCU](crud) {
      // 页面重复添加信息时，下拉框的校验会存在，需要手工取消
      crud.findVM('form').$refs['editForm'].$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        if (crud.status.add === CRUD.STATUS.PREPARED) {
          crud.doAdd()
        } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
          crud.doEdit()
        }
      })
      return false
    },
    [CRUD.HOOK.beforeSubmit]() {
      if (this.crud.status.add > CRUD.STATUS.NORMAL) {
        this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
      }
    },
    [CRUD.HOOK.beforeToCU]() {
      if (this.crud.findVM('form').$refs['editForm']) {
        this.crud.findVM('form').$refs['editForm'].$refs['form'].clearValidate()
      }
    },
    clickRowHandler(row) {
      this.$refs.fieldTable.clearSelection()
      this.$refs.fieldTable.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      if (val.length > 1) {
        // 取出最后val的最后一个返回出来
        const finalVal = val.pop()
        // 清除所有选中
        this.$refs.fieldTable.clearSelection()
        // 给最后一个加上选中
        this.$refs.fieldTable.toggleRowSelection(finalVal)
        this.crud.selectionChangeHandler([finalVal])
      } else {
        this.crud.selectionChangeHandler(val)
      }
    },
    toDelete(data) {
      if (data[0].isSystem) {
        this.$message({
          message: '系统字段不可删除',
          type: 'warning',
          duration: 2500
        })
        return
      }
      this.deleteData = data
      this.deleteVisible = true
    },
    handleConfirm() {
      this.deleteVisible = false
      this.crud.delAllLoading = true
      this.crud.doDelete(this.deleteData)
    },
    handleClose(done) {
      this.deleteData = {}
      done()
    },
    digitFormatter(row, column, cellValue) {
      return cellValue || '-'
    },
    toQuick() {
      this.$refs.quick.quickTableData = JSON.parse(JSON.stringify(this.crud.data))
      this.$refs.quick.quickVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>