yxk-storeroom-system/src/views/archivesConfig/commonFields/index.vue

<template>
  <div class="app-container  container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @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="field_cn_name" label="中文名称" />
      <el-table-column prop="field_name" label="字段标识" />
      <el-table-column label="数据类型">
        <template slot-scope="scope">
          <span v-if="scope.row.is_data_type === 1">字符</span>
          <span v-if="scope.row.is_data_type === 2">数字</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_column_length" label="字段长度" />
      <el-table-column label="默认值">
        <template slot-scope="scope">
          <span v-if="scope.row.is_default_value === ''">-</span>
          <span v-else>{{ scope.row.is_default_value }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--表单渲染-->
    <eForm />
    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" width="35%" :before-close="handleClose">
      <p><span>这里为技术人员维护系统时使用，用户无需设置</span></p>
      <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
      <el-form :model="form">
        <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
          <el-input v-model="form.verifyCode" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crudFields from '@/api/archivesConfig/field'
import eForm from './module/form'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'

export default {
  name: 'CommonFields',
  components: { eForm, crudOperation },
  cruds() {
    return CRUD({
      title: '常用字段',
      url: 'api/field/findGroupType',
      crudMethod: { ...crudFields },
      optShow: {
        add: true,
        edit: true,
        del: false,
        download: false,
        group: false
      },
      query: {
        is_type: 2
      }
    })
  },
  mixins: [presenter()],
  data() {
    return {
      permission: {
        add: ['admin', 'commonFields:add'],
        edit: ['admin', 'commonFields:edit']
      },
      verifyDialogVisible: false,
      form: {
        verifyCode: ''
      },
      formLabelWidth: '110px'
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    // [CRUD.HOOK.beforeToCU]() {
    //   const h = this.$createElement
    //   return this.$prompt(h('p', null, [
    //     h('span', null, '这里为技术人员维护系统时使用，用户级无需设置。'),
    //     h('br', null, ''),
    //     h('span', { style: 'color: red' }, '警告：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！')
    //   ]), '关键提示', {
    //     confirmButtonText: '确定验证',
    //     showCancelButton: false,
    //     customClass: 'validate',
    //     beforeClose: (action, instance, done) => {
    //       if (action === 'confirm') {
    //         if (instance.inputValue === '123') {
    //           done()
    //         } else {
    //           this.$message.error('验证码错误！')
    //         }
    //       } else {
    //         done()
    //       }
    //     }
    //   }).then(({ value }) => {
    //     // call crud.status.add = CRUD.STATUS.PREPARED
    //   }).catch(() => {
    //     return false
    //   })
    // },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeToCU]() {
      this.verifyDialogVisible = true
    },
    handleConfirm() {
      if (this.form.verifyCode === '123') {
        this.verifyDialogVisible = false
        this.form.verifyCode = ''
      } else {
        this.$message.error('验证码错误！')
      }
    },
    handleClose(done) {
      this.form.verifyCode = ''
      done()
    },
    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)
      }
    }
  }
}
</script>

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