yxk-electronic-archives/src/views/system/fileLibraryField/field/index.vue

<template>
  <div>
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission">
        <template v-slot:right>
          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
            <i class="iconfont icon-daochu" />
            全部导出
          </el-button>
        </template>
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 286px)" @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="中文名称" />
      <el-table-column prop="fieldName" label="字段标识" />
      <el-table-column label="数据类型">
        <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="字段长度" />
      <el-table-column label="默认值">
        <template slot-scope="scope">
          <span v-if="scope.row.defaultValue === ''">-</span>
          <span v-else>{{ scope.row.defaultValue }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--表单渲染-->
    <eForm ref="eform" />
    <el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="verifyDialogVisible" :before-close="handleClose">
      <div class="setting-dialog">
        <div class="tip-content">
          <p class="tipMsg">这里为技术人员维护系统时使用，普通用户无需设置</p>
          <p class="delt-tip"><span>注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
        </div>
        <el-form :model="form" style="margin-top:30px;" @submit.native.prevent>
          <el-form-item label="维护验证码" :label-width="formLabelWidth">
            <el-input v-model="form.verifyCode" show-password style="width: 480px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="verifyDialogVisible=false">取消 </el-button>
          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, edit, verifyMaintenance } from '@/api/system/fileLibraryField'
import eForm from './module/form'
import { encrypt } from '@/utils/rsaEncrypt'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils/index'
import qs from 'qs'
export default {
  name: 'Field',
  components: { eForm, crudOperation },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      url: 'api/documentField/findGroupType',
      crudMethod: { add, edit },
      optShow: {
        add: true,
        edit: true,
        del: false,
        download: false,
        group: false
      },
      queryOnPresenterCreated: false
    })
  },
  props: {
    isType: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: ''
    },
    permissionStr: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', this.permissionStr + ':add'],
        edit: ['admin', this.permissionStr + ':edit']
      },
      verifyDialogVisible: false,
      form: {
        verifyCode: ''
      },
      formLabelWidth: '110px',
      btn: '',
      showVerifyDialog: true
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  created() {
    this.crud.title = this.title
    this.crud.query = {
      isType: this.isType
    }
    this.crud.toQuery()
  },
  methods: {
    [CRUD.HOOK.beforeToCU](crud, form, btn) {
      if (this.showVerifyDialog) {
        // 打开输入验证码对话框
        this.verifyDialogVisible = true
        this.btn = btn
        return false
      }
    },
    [CRUD.HOOK.beforeToEdit](crud, form, btn) {
      if (form.isColumnLength === null) {
        form.isColumnLength = undefined
      }
    },
    [CRUD.HOOK.beforeSubmit]() {
      this.crud.form.isType = this.isType
      if (this.crud.status.add > CRUD.STATUS.NORMAL) {
        if (this.crud.data && this.crud.data.length > 0) {
          this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
        } else {
          this.crud.form.isSequence = 1
        }
      }
    },
    handleConfirm() {
      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
        if (res) {
          // 关闭输入验证码对话框
          this.verifyDialogVisible = false
          this.form.verifyCode = ''
          this.showVerifyDialog = false
          if (this.btn === 'add') {
            this.crud.toAdd()
          } else if (this.btn === 'edit') {
            this.crud.toEdit(this.crud.selections[0])
          }
          this.showVerifyDialog = true
        } 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)
      }
    },
    doExport(data) {
      this.crud.downloadLoading = true
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const params = {
          'isType': this.isType
        }
        exportFile(this.baseApi + '/api/documentField/download?' + qs.stringify(params, { indices: false }))
        this.crud.downloadLoading = false
      }).catch(() => {
      })
    }
  }
}
</script>

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