From 73f3d2a6033185966274a8bf34ebdf8797da37c6 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Fri, 27 May 2022 17:32:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=B1=BB=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E9=97=A8=E7=B1=BB=E5=AD=97=E6=AE=B5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/category/baseInfo/index.vue         |  76 ++++++++
 src/views/category/fieldManage/index.vue      | 173 ++++++++++++++++++
 .../category/fieldManage/module/form.vue      | 107 +++++++++++
 src/views/category/index.vue                  |  33 +++-
 4 files changed, 382 insertions(+), 7 deletions(-)
 create mode 100644 src/views/category/baseInfo/index.vue
 create mode 100644 src/views/category/fieldManage/index.vue
 create mode 100644 src/views/category/fieldManage/module/form.vue

diff --git a/src/views/category/baseInfo/index.vue b/src/views/category/baseInfo/index.vue
new file mode 100644
index 0000000..7402729
--- /dev/null
+++ b/src/views/category/baseInfo/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="base-info">
+    <el-form ref="form" :model="form" size="small" label-width="80px">
+      <el-form-item label="门类名称" prop="fieldCnName">
+        <el-input v-model="form.fieldCnName" class="input-width" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="门类类型" prop="isDataType">
+        <el-select v-model="form.isDataType" placeholder="请选择" class="input-width" :disabled="true">
+          <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
+          <el-option label="区域二" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联父级" prop="fieldName">
+        <el-input v-model="form.fieldName" class="input-width" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="档号规则" prop="isColumnLength">
+        <el-input v-model="form.isColumnLength" class="input-width" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="内容说明" prop="isDefaultValue">
+        <el-input v-model="form.isDefaultValue" type="textarea" :rows="4" class="input-width" :disabled="true" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseInfo',
+  data() {
+    return {
+      showFields: [],
+      form: {
+        fieldCnName: '',
+        isDataType: '',
+        fieldName: '',
+        isColumnLength: '',
+        isDefaultValue: ''
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/variables.scss";
+::v-deep .el-form {
+  .el-form-item__label {
+    line-height: 36px;
+    color: $subMenuActiveText;
+    padding: 0px 20px 0 0;
+  }
+  .el-input__inner {
+    color: #fff;
+    border: 1px solid #339cff;
+    background-color: transparent !important;
+  }
+  .el-textarea__inner {
+    color: #fff;
+    border: 1px solid #339cff;
+    background-color: transparent !important;
+  }
+  .el-form-item--small.el-form-item {
+    margin-bottom: 24px;
+  }
+}
+.base-info {
+  padding: 30px;
+}
+.input-width {
+  width: 360px;
+}
+</style>
diff --git a/src/views/category/fieldManage/index.vue b/src/views/category/fieldManage/index.vue
new file mode 100644
index 0000000..e9f513a
--- /dev/null
+++ b/src/views/category/fieldManage/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <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 - 263px)" @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 prop="isColumnLength" label="著录形式" />
+      <el-table-column prop="isColumnLength" label="对应字典" />
+      <el-table-column prop="isColumnLength" label="显示长度" />
+      <el-table-column label="显示一整行">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="输入字段">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="必填字段">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="自动生成">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="自动加一">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="自动补零">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="isColumnLength" label="位数" />
+      <el-table-column label="值不重复">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--表单渲染-->
+    <eForm />
+  </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: true,
+        edit: true,
+        del: false,
+        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;
+}
+</style>
diff --git a/src/views/category/fieldManage/module/form.vue b/src/views/category/fieldManage/module/form.vue
new file mode 100644
index 0000000..f2d6b14
--- /dev/null
+++ b/src/views/category/fieldManage/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>
diff --git a/src/views/category/index.vue b/src/views/category/index.vue
index dbed9d9..37172ab 100644
--- a/src/views/category/index.vue
+++ b/src/views/category/index.vue
@@ -44,15 +44,16 @@
         <span class="right-top-line" />
         <span class="left-bottom-line" />
         <ul class="tab-nav">
-          <li :class="{'active-tab-nav': activeIndex == 0}">基本信息<i /></li>
-          <li :class="{'active-tab-nav': activeIndex == 1}">门类字段管理<i /></li>
-          <li :class="{'active-tab-nav': activeIndex == 2}">著录界面管理<i /></li>
-          <li :class="{'active-tab-nav': activeIndex == 3}">列表界面浏览设置<i /></li>
-          <li :class="{'active-tab-nav': activeIndex == 4}">浏览排序规则设置<i /></li>
-          <li :class="{'active-tab-nav': activeIndex == 5}">档号规则设置<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">门类字段管理<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 2}" @click="changeActiveTab(2)">著录界面管理<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 3}" @click="changeActiveTab(3)">列表界面浏览设置<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 4}" @click="changeActiveTab(4)">浏览排序规则设置<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 5}" @click="changeActiveTab(5)">档号规则设置<i /></li>
           <!-- 最右侧装饰img -->
           <span class="tab-right-img" />
         </ul>
+        <component :is="comName" />
       </el-col>
     </el-row>
   </div>
@@ -63,12 +64,15 @@ import crudDict from '@/api/archivesConfig/dict'
 import CRUD, { presenter, header } from '@crud/crud'
 import eForm from './form'
 import sortDialog from './sortDialog'
+import baseInfo from './baseInfo/index'
+import fieldManage from './fieldManage/index'
+import descriptionPreview from './descriptionPreview/index'
 import crudOperation from '@crud/CRUD.operation'
 import { findSubsetById } from '@/api/archivesConfig/dictDetail'
 
 export default {
   name: 'Category',
-  components: { crudOperation, eForm, sortDialog },
+  components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview },
   cruds() {
     return [
       CRUD({
@@ -114,6 +118,18 @@ export default {
       // sortTableData: []
     }
   },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'baseInfo'
+      } else if (this.activeIndex === 1) {
+        return 'fieldManage'
+      } else if (this.activeIndex === 2) {
+        return 'descriptionPreview'
+      }
+      return 'baseInfo'
+    }
+  },
   methods: {
     // 右边初始化数据是空
     // [CRUD.HOOK.beforeRefresh]() {
@@ -168,6 +184,9 @@ export default {
         this.$refs.sort.sortVisible = true
         // this.rowDrop()
       })
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
     }
   }
 }