门类管理列表界面浏览设置

3 years ago · 4dbcd8f735
3 changed files with 280 additions and 2 deletions
--- a/src/views/category/index.vue
+++ b/src/views/category/index.vue
@ -67,6 +67,7 @@ import sortDialog from './sortDialog'
 import baseInfo from './baseInfo/index'
 import fieldManage from './fieldManage/index'
 import descriptionPreview from './descriptionPreview/index'
+import listBrowsing from './listBrowsing/index'
 import orderingRule from './orderingRule/index'
 import fileNoFormat from './fileNoFormat/index'
 import crudOperation from '@crud/CRUD.operation'
@ -74,7 +75,7 @@ import { findSubsetById } from '@/api/archivesConfig/dictDetail'

 export default {
  name: 'Category',
-  components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview, orderingRule, fileNoFormat },
+  components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview, listBrowsing, orderingRule, fileNoFormat },
  cruds() {
    return [
      CRUD({
@ -129,7 +130,7 @@ export default {
      } else if (this.activeIndex === 2) {
        return 'descriptionPreview'
      } else if (this.activeIndex === 3) {
-        return 'fieldManage'
+        return 'listBrowsing'
      } else if (this.activeIndex === 4) {
        return 'orderingRule'
      } else if (this.activeIndex === 5) {
--- a/src/views/category/listBrowsing/index.vue
+++ b/src/views/category/listBrowsing/index.vue
@ -0,0 +1,170 @@
+<template>
+  <div class="format-main">
+    <div class="format-main-left">
+      <div class="head-container">
+        <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" @click="crud.toAdd">
+          新增
+        </el-button>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 350px;" height="calc(100vh - 302px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column prop="fieldCnName" label="隐藏字段" align="center" />
+      </el-table>
+      <!--表单渲染-->
+      <eForm />
+    </div>
+    <div class="format-main-right">
+      <div class="head-container">
+        <crudOperation :permission="permission">
+          <template v-slot:right>
+            <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="!crud.selections[0]||!crud.selections[0].childMenus || crud.selections[0].childMenus.length <= 1" @click="toSort(crud.selections)">排序</el-button>
+          </template>
+        </crudOperation>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column prop="fieldCnName" label="显示字段" align="center" />
+        <el-table-column prop="fieldCnName" label="排序" align="center" />
+      </el-table>
+      <!--表单渲染-->
+      <eForm />
+    </div>
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="302" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column prop="fieldCnName" label="显示字段" align="center" />
+      <el-table-column prop="fieldCnName" label="排序" align="center" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { add, edit } from '@/api/archivesConfig/field'
+import eForm from './module/form'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+
+export default {
+  components: { eForm, crudOperation },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/field/findGroupType',
+      crudMethod: { add, edit },
+      optShow: {
+        add: false,
+        edit: true,
+        del: true,
+        download: false,
+        group: false
+      },
+      queryOnPresenterCreated: false
+    })
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', this.permissionStr + ':add'],
+        edit: ['admin', this.permissionStr + ':edit']
+      },
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      formLabelWidth: '110px',
+      btn: '',
+      showVerifyDialog: true
+    }
+  },
+  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
+    //   }
+    // },
+    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)
+      }
+    }
+  }
+}
+</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;
+}
+.format-main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  .format-main-left,
+  .format-main-right {
+    height: calc(100vh - 531px);
+  }
+  .format-main-left {
+    padding-right: 10px;
+    width: 350px;
+  }
+  .format-main-right {
+    flex-grow: 1;
+  }
+}
+</style>
--- a/src/views/category/listBrowsing/module/form.vue
+++ b/src/views/category/listBrowsing/module/form.vue
@ -0,0 +1,107 @@
+<template>
+  <el-dialog :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="fieldCnName">
+          <el-input v-model="form.fieldCnName" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="字段标识" prop="fieldName">
+          <el-input v-model="form.fieldName" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="数据类型" prop="isDataType">
+          <el-select v-model="form.isDataType" 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="isColumnLength">
+          <el-input-number v-model="form.isColumnLength" controls-position="right" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="默认值" prop="isDefaultValue">
+          <el-input v-model="form.isDefaultValue" 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>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+
+const defaultForm = {
+  id: null,
+  fieldCnName: '',
+  fieldName: '',
+  isDataType: 1,
+  isColumnLength: 100,
+  isDefaultValue: ''
+}
+export default {
+  mixins: [form(defaultForm)],
+  data() {
+    var checkMaxLength = (rule, value, callback) => {
+      if (value !== undefined && (!Number.isInteger(value) || value <= 0)) {
+        callback(new Error('请输入正整数数字值'))
+      } else {
+        if (this.form.isDataType === 1 && value > 2000) {
+          callback(new Error('字符最大长度不能超过2000位'))
+        } else if (this.form.isDataType === 2 && value > 11) {
+          callback(new Error('数字最大长度不能超过11位'))
+        } else {
+          callback()
+        }
+      }
+    }
+    var checkFieldName = (rule, value, callback) => {
+      const reg = /^[A-Za-z][A-Za-z_]+[a-zA-Z]*$/
+      if (reg.test(value)) {
+        callback()
+      } else {
+        callback(new Error('字段标识只能由字母、字符“_”组成，并且必须以字母开头和结尾'))
+      }
+    }
+    return {
+      rules: {
+        fieldCnName: [
+          { required: true, message: '请输入中文名称', trigger: 'blur' }
+        ],
+        fieldName: [
+          { required: true, message: '请选择字段标识', trigger: 'blur' },
+          { validator: checkFieldName, trigger: 'blur' }
+        ],
+        isDataType: [
+          { required: true, message: '请选择数据类型', trigger: 'blur' }
+        ],
+        isColumnLength: [
+          { validator: checkMaxLength, trigger: 'blur' }
+        ]
+      },
+      options: [
+        {
+          value: 1,
+          label: '字符'
+        },
+        {
+          value: 2,
+          label: '数字'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+</style>