系统字段管理，文件字段管理添加

src/views/archivesConfig/commonFields/index.vue

@@ -7,7 +7,7 @@
       <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 ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 290px)" @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="中文名称" />

src/views/archivesConfig/electronicFields/index.vue

@@ -1,21 +1,150 @@
 <template>
-  <div class="app-container">电子文件字段管理</div>
+  <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%;" height="calc(100vh - 290px)" @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">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <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>
+      </div>
+    </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: 'ElectronicFields',
+  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: 3
+      }
+    })
+  },
+  mixins: [presenter()],
   data() {
     return {
+      permission: {
+        add: ['admin', 'electronicFields:add'],
+        edit: ['admin', 'electronicFields:edit']
+      },
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      formLabelWidth: '110px',
+      btn: '',
+      showVerifyDialog: true
     }
   },
-  mounted: function() {
-  },
   methods: {
-
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      console.log(btn)
+      if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+        this.verifyDialogVisible = true
+        this.btn = btn
+        return false
+      }
+    },
+    handleConfirm() {
+      if (this.form.verifyCode === '123') {
+        // 关闭输入验证码对话框
+        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)
+      }
+    }
   }
 }
 </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>

src/views/archivesConfig/electronicFields/module/form.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="中文名称" prop="field_cn_name">
+        <el-input v-model="form.field_cn_name" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="字段标识" prop="field_name">
+        <el-input v-model="form.field_name" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="数据类型" prop="is_data_type">
+        <el-select v-model="form.is_data_type" placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字段长度" prop="is_column_length">
+        <el-input-number v-model="form.is_column_length" controls-position="right" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="默认值" prop="is_default_value">
+        <el-input v-model="form.is_default_value" style="width: 370px;" />
+      </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>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+
+const defaultForm = {
+  id: null,
+  field_cn_name: '',
+  field_name: '',
+  is_data_type: 1,
+  is_column_length: 100,
+  is_default_value: ''
+}
+export default {
+  mixins: [form(defaultForm)],
+  data() {
+    var checkMaxLength = (rule, value, callback) => {
+      if (!Number.isInteger(value) || value <= 0) {
+        callback(new Error('请输入正整数数字值'))
+      } else {
+        if (this.form.is_data_type === 1 && value > 2000) {
+          callback(new Error('字符最大长度不能超过2000位'))
+        } else if (this.form.is_data_type === 2 && value > 11) {
+          callback(new Error('数字最大长度不能超过11位'))
+        } else {
+          callback()
+        }
+      }
+    }
+    return {
+      rules: {
+        field_cn_name: [
+          { required: true, message: '请输入中文名称', trigger: 'blur' }
+        ],
+        field_name: [
+          { required: true, message: '请输入字段标识', trigger: 'blur' }
+        ],
+        is_data_type: [
+          { required: true, message: '请选择数据类型', trigger: 'blur' }
+        ],
+        is_column_length: [
+          { validator: checkMaxLength, trigger: 'blur' }
+        ]
+      },
+      options: [
+        {
+          value: 1,
+          label: '字符',
+          maxlength: 2000
+        },
+        {
+          value: 2,
+          label: '数字',
+          maxlength: 11
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+</style>

src/views/archivesConfig/systemFields/index.vue

@@ -1,21 +1,150 @@
 <template>
-  <div class="app-container">系统字段管理</div>
+  <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%;" height="calc(100vh - 290px)" @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">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <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>
+      </div>
+    </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: 'SystemFields',
+  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: 1
+      }
+    })
+  },
+  mixins: [presenter()],
   data() {
     return {
+      permission: {
+        add: ['admin', 'systemFields:add'],
+        edit: ['admin', 'systemFields:edit']
+      },
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      formLabelWidth: '110px',
+      btn: '',
+      showVerifyDialog: true
     }
   },
-  mounted: function() {
-  },
   methods: {
-
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      console.log(btn)
+      if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+        this.verifyDialogVisible = true
+        this.btn = btn
+        return false
+      }
+    },
+    handleConfirm() {
+      if (this.form.verifyCode === '123') {
+        // 关闭输入验证码对话框
+        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)
+      }
+    }
   }
 }
 </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>

src/views/archivesConfig/systemFields/module/form.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="中文名称" prop="field_cn_name">
+        <el-input v-model="form.field_cn_name" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="字段标识" prop="field_name">
+        <el-input v-model="form.field_name" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="数据类型" prop="is_data_type">
+        <el-select v-model="form.is_data_type" placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字段长度" prop="is_column_length">
+        <el-input-number v-model="form.is_column_length" controls-position="right" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item label="默认值" prop="is_default_value">
+        <el-input v-model="form.is_default_value" style="width: 370px;" />
+      </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>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+
+const defaultForm = {
+  id: null,
+  field_cn_name: '',
+  field_name: '',
+  is_data_type: 1,
+  is_column_length: 100,
+  is_default_value: ''
+}
+export default {
+  mixins: [form(defaultForm)],
+  data() {
+    var checkMaxLength = (rule, value, callback) => {
+      if (!Number.isInteger(value) || value <= 0) {
+        callback(new Error('请输入正整数数字值'))
+      } else {
+        if (this.form.is_data_type === 1 && value > 2000) {
+          callback(new Error('字符最大长度不能超过2000位'))
+        } else if (this.form.is_data_type === 2 && value > 11) {
+          callback(new Error('数字最大长度不能超过11位'))
+        } else {
+          callback()
+        }
+      }
+    }
+    return {
+      rules: {
+        field_cn_name: [
+          { required: true, message: '请输入中文名称', trigger: 'blur' }
+        ],
+        field_name: [
+          { required: true, message: '请输入字段标识', trigger: 'blur' }
+        ],
+        is_data_type: [
+          { required: true, message: '请选择数据类型', trigger: 'blur' }
+        ],
+        is_column_length: [
+          { validator: checkMaxLength, trigger: 'blur' }
+        ]
+      },
+      options: [
+        {
+          value: 1,
+          label: '字符',
+          maxlength: 2000
+        },
+        {
+          value: 2,
+          label: '数字',
+          maxlength: 11
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+</style>