档案门类管理

src/assets/styles/index.scss

@@ -220,6 +220,11 @@ ul{
   background-color: rgba(0,0,0,0.2);
 }
 
+
+.iconfont{
+  font-weight: normal;
+}
+
 @media screen and (min-width:1200px) and (max-width:1536px){
   .tab-content .tab-nav {
     li{

src/assets/styles/mixin.scss

@@ -32,7 +32,7 @@
     background-color:  #13439E;
   }
   [data-theme="light"] & {
-    background-color:#d3dce6;
+    background-color:#0348F3;
   }
 }
 
@@ -364,6 +364,11 @@
   }
 }
 
+@mixin tree_children_icon_font{
+  [data-theme="light"] & {
+    color: #0C0E1E;
+  }
+}
 
 @mixin tree_children_padding{
   [data-theme="light"] & {
@@ -692,3 +697,50 @@
     }
   }
 }
+@mixin category-left-style{
+  [data-theme="dark"] & {
+    width: 328px;
+  }
+  [data-theme="light"] & {
+    width: 368px;
+  }
+}
+
+@mixin category-right-hide{
+  [data-theme="dark"] & {
+    width: calc(100vw - 442px);
+  }
+  [data-theme="light"] & {
+    width: calc(100vw - 482px);
+  }
+}
+
+@mixin category-right-open{
+  [data-theme="dark"] & {
+    width: calc(100vw - 644px);
+  }
+  [data-theme="light"] & {
+    width: calc(100vw - 684px);
+  }
+}
+
+@mixin category-info-item{
+  [data-theme="dark"] & {
+    margin-bottom: 30px;
+  }
+  [data-theme="light"] & {
+    margin-bottom: 15px;
+  }
+}
+
+@mixin category-info-text{
+  [data-theme="dark"] & {
+    background-color: #02255f;
+    color: #fff;
+    border-radius: 4px;
+    margin-right: 20px;
+  }
+  [data-theme="light"] & {
+    color: #0C0E1E;
+  }
+}

src/assets/styles/yxk-admin.scss

@@ -38,22 +38,21 @@
   .elect-cont-right{
     width: calc(100vw - 379px);
   }
-
   .category-container{
     .elect-cont-right{
-      width: calc(100vw - 482px);
+      @include category-right-hide;
     }
   }
 }
+
 .openSidebar{
   // siderbar-展开 256 + 间距 60 + treeLeft 265
   .elect-cont-right{
     width: calc(100vw - 581px);
   }
-
   .category-container{
     .elect-cont-right{
-      width: calc(100vw - 684px);
+      @include category-right-open;
     }
   }
 }
@@ -86,7 +85,7 @@
 
 .category-container{
   .elect-cont-left{
-    width: 368px;
+    @include category-left-style;
   }
   .elect-cont-right{
     margin-top: 0;
@@ -308,7 +307,7 @@
     @include tree_font_color;
   }
   .el-tree-node__children{
-    padding: 0 18px;
+    padding: 0 0 0 18px;
     .el-tree-node__content{
       @include tree_children_padding;
       height: 30px;
@@ -1574,3 +1573,33 @@ input[type ='number'] {
   -webkit-box-shadow: -1px 0 0 0 #1890ff;
   box-shadow: -1px 0 0 0 #E8F2FF;
 }
+
+.iconFolder{
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  padding-left: 22px;
+  background: url('~@/assets/images/icon/tree-01.png') no-repeat left center;
+  background-size: contain;
+}
+.iconArch{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  padding-left: 22px;
+  background: url('~@/assets/images/icon/tree-02.png') no-repeat left center;
+  background-size: cover;
+}
+
+.iconFile{
+  @include tree_children_font;
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &::before{
+    content: "\e623";
+    font-size: 16px;
+    @include tree_children_icon_font;
+  }
+}

src/components/Crud/CRUD.operation.vue

@@ -249,9 +249,6 @@ export default {
 .crud-opts .crud-opts-right span {
   float: left;
 }
-.iconfont{
-  font-weight: normal;
-}
 .icon-xinzeng{
   font-size: 14px !important;
 }

src/views/system/archivesCategory/archiveSealSetting/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    归档章设置
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArchiveSealSetting',
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/archivesCategory/baseInfo/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="base-info" style="display:flex; justify-content: flex-start;">
+    <div class="base-info-left">
+      <div class="info-item">
+        <span>名称：</span>
+        <p>{{ selectedCategory.cnName }}</p>
+      </div>
+      <div class="info-item">
+        <span>节点类型：</span>
+        <p v-if="selectedCategory.isType == 1">文件夹</p>
+        <p v-else-if="selectedCategory.isType == 2">项目</p>
+        <p v-else-if="selectedCategory.isType == 3">案卷</p>
+        <p v-else-if="selectedCategory.isType == 4">卷内</p>
+        <p v-else-if="selectedCategory.isType == 5">文件</p>
+        <p v-else />
+      </div>
+      <!-- v-if="selectedCategory.pid !== '0'" -->
+      <div class="info-item">
+        <span>所属父级：</span>
+        <p>{{ selectedCategory.parentName ? selectedCategory.parentName : '-' }}</p>
+      </div>
+      <div class="info-item info-content">
+        <span>备注：</span>
+        <p>{{ selectedCategory.remark ? selectedCategory.remark : '-' }}</p>
+      </div>
+    </div>
+    <div class="base-info-right">
+      <!-- <div v-if="selectedCategory.isType !== 1" class="info-item">
+        <span>档号规则：</span>
+        <p>{{ fileNoFormatStr }}</p>
+      </div> -->
+      <div v-if="selectedCategory.isType !== 1" class="info-item">
+        <span>编码：</span>
+        <p>WS01</p>
+      </div>
+      <div v-if="selectedCategory.isType !== 1" class="info-item">
+        <span>整理方式：</span>
+        <p>按件整理</p>
+      </div>
+      <div v-if="selectedCategory.isType !== 1" class="info-item">
+        <span>是否装盒：</span>
+        <p>装盒</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoFormatField } from '@/api/category/fileNoFormat'
+export default {
+  name: 'BaseInfo',
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {
+          cnName: '',
+          isType: '',
+          parentName: '',
+          isColumnLength: '',
+          remark: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      fileNoFormatStr: ''
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      if (newValue && newValue.id) {
+        this.initData()
+      }
+    }
+  },
+  created() {
+    if (this.selectedCategory && this.selectedCategory.id) {
+      this.initData()
+    }
+  },
+  methods: {
+    initData() {
+      getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => {
+        this.fileNoFormatStr = ''
+        res.forEach((item) => {
+          this.fileNoFormatStr += item.fieldCnName + item.connector
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+.base-info {
+  padding: 20px;
+  .info-item {
+    display: flex;
+    font-size: 14px;
+    @include category-info-item;
+    span {
+      display: block;
+      width: 80px;
+      height: 36px;
+      line-height: 36px;
+      text-align: right;
+      // margin-right: 10px;
+      @include pagination-font;
+    }
+    p {
+      width: 300px;
+      padding: 0 10px;
+      line-height: 36px;
+      @include category-info-text;
+    }
+  }
+  .info-content p {
+    height: 120px;
+  }
+}
+</style>

src/views/system/archivesCategory/descriptionPreview/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="category-main">
+    <div class="des-preview-left">
+      <div class="des-title">
+        <p>字段调整 输入字段</p>
+      </div>
+      <ul class="des-fields">
+        <li v-for="(item,index) in allFieldsData" v-show="item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)">
+          <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
+            <p>{{ item.fieldCnName }}</p>
+          </el-tooltip>
+        </li>
+      </ul>
+      <div class="des-title">
+        <p @click="isCollaspeHiddenFields = !isCollaspeHiddenFields">非输入字段 <i :class="['el-icon-arrow-down', isCollaspeHiddenFields ?'el-icon-arrow-down':'arrow-up']" /></p>
+      </div>
+      <!-- 收起展开 -->
+      <el-collapse-transition>
+        <ul v-show="!isCollaspeHiddenFields" class="des-fields">
+          <li v-for="(item,index) in allFieldsData" v-show="!item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)">
+            <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
+              <p>{{ item.fieldCnName }}</p>
+            </el-tooltip>
+          </li>
+        </ul>
+      </el-collapse-transition>
+      <div class="des-set-btn">
+        <el-button type="primary" icon="el-icon-edit" @click="settingForm">修改</el-button>
+        <el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu-fanbai" @click="previewFormVisible = true">排序</el-button>
+      </div>
+      <SettingForm :is-disabled="true" :is-add="false" :this-fields="thisFields" />
+    </div>
+    <div class="des-preview-right">
+      <div class="des-title">
+        <p>界面预览效果</p>
+      </div>
+      <PreviewForm ref="previewForm1" :is-has-code="true" :is-disabled="false" :form-preview-data.sync="isInputFields" :selected-category="selectedCategory" :is-des-form-type="isDesFormType" />
+    </div>
+
+    <!-- 修改字段 -->
+    <el-dialog class="edit-form-dialog" :visible="settingFormVisible" :before-close="handleClose" :close-on-click-modal="false" title="修改字段">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <SettingForm ref="editForm" :is-disabled="false" :is-add="false" :this-fields="editField" />
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" :loading="loading" @click="editSubmit">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 界面字段预览排序 -->
+    <el-dialog class="preview-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" title="修改排序">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+        <!-- <PreviewForm :is-disabled="true" :all-fields-data="allFieldsData" .sync/> -->
+        <PreviewForm ref="previewForm" :is-has-code="true" :is-disabled="false" :is-draggable="true" :form-preview-data="JSON.parse(JSON.stringify(isInputFields))" :is-des-form-type="isDesFormType" :selected-category="selectedCategory" />
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleSort">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PreviewForm from '@/views/components/category/PreviewForm'
+import SettingForm from '@/views/components/category/SettingForm'
+import { FetchArchivesTypeManage } from '@/api/category/category'
+import { edit } from '@/api/category/fieldManage'
+import { previewFormOrder } from '@/api/category/listBrowsing'
+export default {
+  name: 'DescriptionPreview',
+  components: { PreviewForm, SettingForm },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      allFieldsData: [],
+      isCollaspeHiddenFields: true, // 隐藏字段收起展开
+      settingFormVisible: false, // 修改编辑字段 - dialog
+      previewFormVisible: false, // 界面预览form - dialog
+      fieldsActive: 0, // 当前字段index
+      thisFields: { dictionaryConfigId: { dicName: null, id: null }}, // 当前项字段内容
+      editField: {},
+      isInputFields: [],
+      loading: false,
+      isDesFormType: 'category'
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      this.getArchivesType()
+    }
+  },
+  mounted() {
+    this.getArchivesType()
+  },
+  methods: {
+    getArchivesType(setField) {
+      // 门类切换时，表单校验清除
+      this.$refs.previewForm1.$refs['addOrUpdateForm'].clearValidate()
+      FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then(res => {
+        this.allFieldsData.splice(0, this.allFieldsData.length)
+        this.isInputFields.splice(0, this.isInputFields.length)
+        if (!setField) {
+          setField = false
+        }
+        res.sort(this.compare).forEach((item, index) => {
+          // 防止对应字典是null时报错
+          item.dictionaryConfigId = item.dictionaryConfigId || { dicName: null, id: null }
+          this.allFieldsData.push(item)
+          if (item.isInput && !setField) {
+            this.fieldsActive = index
+            this.thisFields = item
+            setField = true
+          }
+          if (item.isInput) {
+            this.isInputFields.push(item)
+          }
+        })
+      })
+    },
+    handleClose(done) {
+      this.settingFormVisible = false
+      this.previewFormVisible = false
+      // this.editResetForm()
+      done()
+    },
+    compare(a, b) {
+      return a.isSequence - b.isSequence
+    },
+    settingForm() {
+      this.editField = JSON.parse(JSON.stringify(this.thisFields))
+      this.settingFormVisible = true
+    },
+    // 当前选中的字段
+    selectField(index) {
+      this.hiddenFieldsActive = -1
+      this.fieldsActive = index
+      this.thisFields = this.allFieldsData[this.fieldsActive]
+    },
+    // 修改字段"保存"提交
+    editSubmit() {
+      this.$refs['editForm'].$refs['form'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        this.loading = true
+        edit(this.editField).then(() => {
+          this.loading = false
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.settingFormVisible = false
+          // 清空数组数据
+          this.allFieldsData.splice(0, this.allFieldsData.length)
+          this.getArchivesType(true)
+          this.thisFields = this.editField
+        })
+      })
+      return false
+    },
+    handleSort() {
+      const sortParam = this.$refs.previewForm.formPreviewData.map((item, index) => {
+        return {
+          isSequence: index + 1,
+          id: item.id
+        }
+      })
+      previewFormOrder(sortParam).then(() => {
+        this.previewFormVisible = false
+        this.getArchivesType()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.category-main {
+  display: flex;
+  justify-content: flex-start;
+  padding: 20px;
+  .des-preview-left,
+  .des-preview-right {
+    height: calc(100vh - 274px);
+    padding-right: 10px;
+    overflow-y: auto;
+  }
+  .des-preview-left {
+    flex: 1;
+  }
+  .des-title {
+    position: relative;
+    height: 28px;
+    margin-bottom: 10px;
+    padding-left: 46px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    cursor: pointer;
+    p {
+      position: absolute;
+      left: 46px;
+      top: 0;
+      line-height: 28px;
+      background-image: -webkit-gradient(
+        linear,
+        0 0,
+        0 bottom,
+        from(rgba(255, 255, 255, 1)),
+        to(rgba(46, 143, 237, 1))
+      );
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      z-index: 2;
+      i {
+        font-size: 16px;
+        margin-left: 6px;
+        background-image: none;
+        -webkit-text-fill-color: #fff;
+        transition: all ease-in 0.5s;
+        &.arrow-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 93px;
+      height: 28px;
+      background: url(~@/assets/images/des_title.png) no-repeat;
+      background-size: contain;
+      z-index: 1;
+    }
+  }
+  .des-fields {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+    margin-left: 1px;
+    li {
+      width: 116px;
+      height: 40px;
+      line-height: 40px;
+      margin: -1px 0 0 -1px;
+      font-size: 14px;
+      text-align: center;
+      color: #3a99fd;
+      border: 1px solid #339cff;
+      cursor: pointer;
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+      &:hover,
+      &.fields-active {
+        color: #fff;
+        background-color: #339cff;
+      }
+    }
+  }
+  .des-set-btn {
+    text-align: right;
+    .el-button {
+      background-color: #3a99fd;
+    }
+    .des-set-sort {
+      ::v-deep .iconfont {
+        line-height: 0 !important;
+      }
+      ::v-deep span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .des-preview-right {
+    width: 690px;
+    margin-left: 20px;
+  }
+  .edit-form-dialog {
+    ::v-deep .el-dialog {
+      .el-input.is-disabled .el-input__inner {
+        color: #fff;
+      }
+      .el-input-number.is-controls-right {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .drag-tip {
+    display: block;
+    padding-left: 20px;
+    padding-bottom: 10px;
+    font-style: normal;
+    font-weight: bold;
+    color: #fff;
+  }
+}
+</style>

src/views/system/archivesCategory/fieldManage/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <div class="head-container">
+      <crudOperation :permission="permission" crud-tag="field">
+        <template v-slot:right>
+          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 302px)" crud-tag="field" @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="字段名称" min-width="145" show-overflow-tooltip />
+      <el-table-column prop="fieldName" label="字段标识" min-width="145" show-overflow-tooltip />
+      <el-table-column label="数据类型" min-width="85">
+        <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="字段长度" min-width="85" />
+      <el-table-column label="著录形式" min-width="85">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isInputClass === 'select'">下拉框</span>
+          <span v-if="scope.row.isInputClass === 'text'">文本框</span>
+          <span v-if="scope.row.isInputClass === 'date'">日期框</span>
+          <span v-if="scope.row.isInputClass === 'number'">数字框</span>
+          <span v-if="scope.row.isInputClass === 'popover'">弹出框</span>
+          <span v-if="scope.row.isInputClass === 'textarea'">文本域</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="dictionaryConfigId.dicName" label="对应字典" min-width="85" show-overflow-tooltip />
+      <el-table-column prop="editLength" label="显示长度" min-width="85" />
+      <el-table-column label="显示一整行" min-width="110" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isLine" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="输入字段" min-width="85" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isInput" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="必填字段" min-width="85" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isRequired" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="自动生成" min-width="85" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isAuto" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column label="自动补零" min-width="85" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isFilling" :disabled="true" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="fillingDigit" label="位数" min-width="55" align="center" :formatter="digitFormatter" />
+      <el-table-column label="值不重复" min-width="85" align="center">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.isRepeat" :disabled="true" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--表单渲染-->
+    <eForm crud-tag="field" />
+    <el-dialog title="删除字段" :visible.sync="deleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定要删除当前字段吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import fieldCrudMethod from '@/api/category/fieldManage'
+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({
+      tag: 'field',
+      url: 'api/arc-dic/manage',
+      crudMethod: fieldCrudMethod,
+      title: '字段',
+      optShow: {
+        add: true,
+        edit: true,
+        del: false,
+        download: false,
+        group: false
+      }
+    })
+  },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'fieldManage:add'],
+        edit: ['admin', 'fieldManage:edit'],
+        del: ['admin', 'fieldManage:edit']
+      },
+      deleteVisible: false,
+      deleteData: {},
+      delLoading: false
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      this.crud.refresh()
+    }
+  },
+  methods: {
+    // 获取数据前设置默认参数
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.categoryId = this.selectedCategory.id
+      this.crud.query.isType = 2
+    },
+    [CRUD.HOOK.afterRefresh](crud) {
+      crud.data.forEach(function(item, index) {
+        item.dictionaryConfigId = item.dictionaryConfigId || { id: null }
+      })
+    },
+    [CRUD.HOOK.beforeValidateCU](crud) {
+      // 页面重复添加信息时，下拉框的校验会存在，需要手工取消
+      crud.findVM('form').$refs['editForm'].$refs['form'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        if (crud.status.add === CRUD.STATUS.PREPARED) {
+          crud.doAdd()
+        } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
+          crud.doEdit()
+        }
+      })
+      return false
+    },
+    [CRUD.HOOK.beforeSubmit]() {
+      if (this.crud.status.add > CRUD.STATUS.NORMAL) {
+        this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
+      }
+    },
+    [CRUD.HOOK.beforeToCU]() {
+      if (this.crud.findVM('form').$refs['editForm']) {
+        this.crud.findVM('form').$refs['editForm'].$refs['form'].clearValidate()
+      }
+    },
+    clickRowHandler(row) {
+      this.$refs.fieldTable.clearSelection()
+      this.$refs.fieldTable.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      if (val.length > 1) {
+        // 取出最后val的最后一个返回出来
+        const finalVal = val.pop()
+        // 清除所有选中
+        this.$refs.fieldTable.clearSelection()
+        // 给最后一个加上选中
+        this.$refs.fieldTable.toggleRowSelection(finalVal)
+        this.crud.selectionChangeHandler([finalVal])
+      } else {
+        this.crud.selectionChangeHandler(val)
+      }
+    },
+    toDelete(data) {
+      if (data[0].isSystem) {
+        this.$message({
+          message: '系统字段不可删除',
+          type: 'warning',
+          duration: 2500
+        })
+        return
+      }
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+      this.crud.delAllLoading = true
+      this.crud.doDelete(this.deleteData)
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
+    },
+    digitFormatter(row, column, cellValue) {
+      return cellValue || '-'
+    }
+  }
+}
+</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;
+}
+::v-deep .el-table tr .el-table__cell {
+  height: 40px;
+}
+</style>

src/views/system/archivesCategory/fieldManage/module/form.vue

@@ -0,0 +1,65 @@
+<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">
+      <SettingForm ref="editForm" :is-disabled="false" :is-add="crud.status.add === 1" :this-fields="form" />
+      <div slot="footer" class="dialog-footer">
+        <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'
+import SettingForm from '@/views/components/category/SettingForm'
+
+const defaultForm = {
+  id: null,
+  fieldName: null,
+  fieldCnName: null,
+  isDefaultValue: null,
+  isInputClass: 'text',
+  isDataType: null,
+  isDataTypeDetails: null,
+  isColumnLength: null,
+  isColumnType: 1,
+  isSequence: null,
+  isType: 2,
+  isSystem: true,
+  isLine: false,
+  isInput: true,
+  isRequired: false,
+  isAutomatic: false,
+  isAdd: null,
+  isSearch: null,
+  isInherit: null,
+  isFilling: false,
+  fillingDigit: null,
+  isRepeat: null,
+  isDisplay: false,
+  displayOrder: null,
+  isDisplayformat: null,
+  displayformatType: null,
+  editLength: 196,
+  displayLength: null,
+  dictionaryConfigId: {
+    id: null
+  }
+}
+export default {
+  components: { SettingForm },
+  mixins: [
+    form(function() {
+      return Object.assign({ categoryId: this.$parent.selectedCategory.id }, defaultForm)
+    })
+  ],
+  data() {
+    return {
+    }
+  }
+}
+</script>

src/views/system/archivesCategory/fileNoFormat/index.vue

@@ -0,0 +1,190 @@
+<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" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)">
+          新增
+        </el-button>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')">
+        <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">
+        <!-- type="danger" -->
+        <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)">
+          移除
+        </el-button>
+        <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)">
+          修改
+        </el-button>
+        <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
+        <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="connector" label="组成符号" align="center" />
+      </el-table>
+      <!--表单渲染-->
+      <eForm ref="cuform" @refresh="initData" />
+    </div>
+    <!--排序对话框组件-->
+    <sortDialog ref="sort" @refresh="initData" />
+    <!--删除对话框组件-->
+    <el-dialog title="移除字段" :visible.sync="deleteVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定要移除当前字段吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { FetchArchivesTypeManage } from '@/api/category/category'
+import { getNoFormatField, del } from '@/api/category/fileNoFormat'
+import eForm from './module/form'
+import sortDialog from './module/sortDialog'
+import Vue from 'vue'
+
+export default {
+  components: { eForm, sortDialog },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'fileNoFormat:add'],
+        edit: ['admin', 'fileNoFormat:edit'],
+        del: ['admin', 'fileNoFormat:delete'],
+        sort: ['admin', 'fileNoFormat:sort']
+      },
+      deleteVisible: false,
+      sortLoading: false,
+      delAllLoading: false,
+      table: {
+        left: {
+          data: [],
+          Loading: false,
+          selections: []
+        },
+        right: {
+          data: [],
+          Loading: false,
+          selections: []
+        }
+      }
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      this.initData()
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => {
+        this.table.left.data.splice(0, this.table.left.data.length)
+        res.forEach((item) => {
+          if (!item.isDisplayformat && item.isInput && !item.isAutomatic) {
+            this.table.left.data.push(item)
+          }
+        })
+      })
+      getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => {
+        this.table.right.data.splice(0, this.table.right.data.length)
+        res.forEach((item) => {
+          this.table.right.data.push(item)
+        })
+      })
+    },
+    clickRowHandler(row, column, e, tableName) {
+      this.$refs[tableName].toggleRowSelection(row)
+    },
+    selectionChangeHandler(val, tableName) {
+      this.table[tableName].selections = val
+    },
+    toAdd() {
+      this.table.left.selections.forEach((item) => {
+        Vue.set(item, 'connector', '-')
+        Vue.set(item, 'categoryId', this.selectedCategory.id)
+      })
+      this.$refs.cuform.title = '新增字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toEdit() {
+      this.$refs.cuform.title = '编辑字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toDelete() {
+      this.deleteVisible = true
+    },
+    handleDelConfirm() {
+      this.deleteVisible = false
+      this.delAllLoading = true
+      const deleteData = this.table.right.selections
+      del(deleteData).then((res) => {
+        this.delAllLoading = false
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.initData()
+      })
+    },
+    toSort() {
+      this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
+      this.$refs.sort.sortVisible = true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+::v-deep .el-table tr .el-table__cell {
+  height: 40px;
+}
+.format-main {
+  display: flex;
+  justify-content: flex-start;
+  .format-main-left,
+  .format-main-right {
+    height: calc(100vh - 231px);
+  }
+  .format-main-left {
+    padding-right: 10px;
+  }
+  .format-main-right {
+    flex-grow: 1;
+  }
+}
+</style>

src/views/system/archivesCategory/fileNoFormat/module/form.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="fields-list">
+        <el-form ref="formData" :model="formData" size="small" label-width="75px">
+          <el-row v-for="(item) in formData.fields" :key="item.id" :gutter="10">
+            <el-col :span="15">
+              <el-form-item label="组成字段">
+                <el-input v-model="item.fieldCnName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="组成符号">
+                <el-input v-model="item.connector" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="loading" @click="save">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/category/fileNoFormat'
+export default {
+  data() {
+    return {
+      cuDialogVisible: false,
+      formData: {},
+      title: '新增字段',
+      loading: false
+    }
+  },
+  methods: {
+    save() {
+      this.loading = true
+      if (this.title === '新增字段') {
+        const addData = this.formData.fields.map((item) => {
+          return {
+            dictionaryId: item.id,
+            fieldName: item.fieldName,
+            fieldCnName: item.fieldCnName,
+            connector: item.connector,
+            categoryId: item.categoryId
+          }
+        })
+        add(addData).then((res) => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.cuDialogVisible = false
+          this.loading = false
+          this.$emit('refresh')
+        })
+      } else {
+        edit(this.formData.fields).then((res) => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.cuDialogVisible = false
+          this.loading = false
+          this.$emit('refresh')
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.fields-list {
+  max-height: calc(100vh - 312px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+</style>

src/views/system/archivesCategory/fileNoFormat/module/sortDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="排序" :visible.sync="sortVisible" @opened="opened">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+      <el-table :data="sortTableData" class="fileno-format-sort" style="width: 100%;" :max-height="tableHeight" row-key="id">
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="fieldCnName" label="字段名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { order } from '@/api/category/fileNoFormat'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    opened() {
+      this.rowDrop('fileno-format-sort', 'sortTableData')
+    },
+    handleSort() {
+      this.sortTableData.forEach((item, index) => {
+        item.sequence = index + 1
+      })
+      order(this.sortTableData).then(() => {
+        this.sortVisible = false
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.$emit('refresh')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drag-tip {
+  display: block;
+  padding-left: 20px;
+  padding-bottom: 10px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+}
+</style>

src/views/system/archivesCategory/form.vue

@@ -0,0 +1,152 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :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="cnName">
+          <el-input v-model="form.cnName" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="门类类型" prop="isType">
+          <el-select v-model="form.isType" style="width: 370px;" :disabled="crud.status.edit === 1" @change="changeType">
+            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.typeState" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="crud.status.add === 1" label="选择模板" prop="templateId">
+          <treeselect v-model="form.templateId" :flat="true" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.isType !== 6" :normalizer="normalizer" :default-expand-level="2" @select="updateTemplateValue" />
+        </el-form-item>
+        <el-form-item label="内容说明">
+          <el-input v-model="form.remark" style="width: 370px;" type="textarea" :rows="4" />
+        </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 { getCategoryTree, getCategoryType } from '@/api/category/category'
+import { form } from '@crud/crud'
+import CRUD from '@crud/crud'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+const defaultForm = { id: null, cnName: null, isType: 1, remark: null, templateId: null }
+export default {
+  components: { Treeselect },
+  mixins: [
+    form(function() {
+      return Object.assign({ pid: this.pid }, defaultForm)
+    })
+  ],
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      pid: null,
+      rules: {
+        cnName: [
+          { required: true, message: '请输入门类名称', trigger: 'blur' }
+        ]
+      },
+      selectOptions: [],
+      templateTree: [],
+      selectedTemplateNode: {}
+    }
+  },
+  created() {
+    this.getSelectOptions()
+  },
+  methods: {
+    // 新建时，判断当前节点类型，“门类类型” option区分可选
+    beforeToAdd() {
+      this.form.isType = null
+      if (this.selectedCategory.isType === 1) {
+        this.selectOptions.forEach(item => {
+          if (item.value === 4) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+      } else if (this.selectedCategory.isType === 2) {
+        this.selectOptions.forEach(item => {
+          if (item.value !== 3) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+        this.form.isType = 3
+      } else if (this.selectedCategory.isType === 3) {
+        this.selectOptions.forEach(item => {
+          if (item.value !== 4) {
+            item.typeState = true
+          } else {
+            item.typeState = false
+          }
+        })
+        this.form.isType = 4
+      }
+    },
+    [CRUD.HOOK.beforeSubmit]() {
+      if (this.form.templateId) {
+        this.form.children = [this.selectedTemplateNode]
+      } else {
+        this.form.children = null
+      }
+    },
+    updateTemplateValue(node, instanceId) {
+      this.selectedTemplateNode = node
+    },
+    changeType() {
+      if (this.form.isType === 6) {
+        // this.crudDict.getDicts()
+        this.getTemplateTree()
+      } else {
+        this.form.dicExplain = null
+      }
+    },
+    getTemplateTree() {
+      getCategoryTree().then(res => {
+        this.templateTree = res
+      })
+    },
+    getSelectOptions() {
+      getCategoryType().then(res => {
+        for (const key in res) {
+          this.selectOptions.push({
+            value: Number(key),
+            label: res[key],
+            typeState: false
+          })
+        }
+      })
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.cnName,
+        children: node.children,
+        isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/system/archivesCategory/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="app-container category-container">
+    <!-- 门类列表 -->
+    <div class="container-main">
+      <div class="elect-cont-left">
+        <div class="head-container">
+          <crudOperation :permission="permission">
+            <template v-slot:left>
+              <el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0" @click="crud.toAdd">
+                <i class="iconfont icon-xinzeng" />
+                新增
+              </el-button>
+              <el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0'" @click="crud.toEdit(crud.selections[0])">
+                <i class="iconfont icon-bianji" />
+                编辑
+              </el-button>
+            </template>
+            <template v-slot:right>
+              <el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0 || (crud.selections.length === 1 && crud.selections[0].pid === '0' )" @click="toDelete(crud.selections)">
+                <i class="iconfont icon-shanchu" />
+                删除
+              </el-button>
+              <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].pid === '0'" @click="toSort(crud.selections)">排序</el-button>
+            </template>
+          </crudOperation>
+        </div>
+        <div class="container-left">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <!--门类树状结构-->
+          <div class="tree-scroll">
+            <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span v-if="data.isType===1 " class="iconFolder">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===2 || data.isType === 3 || data.isType===5" class="iconArch">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===4" class="iconFile">
+                  {{ data.cnName }}
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <!-- 门类管理tab -->
+      <div class="elect-cont-right">
+        <div class="container-right tab-content">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <ul class="tab-nav">
+            <li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">门类字段管理<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 2}" @click="changeActiveTab(2)">著录界面管理<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 3}" @click="changeActiveTab(3)">列表界面浏览设置<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 4}" @click="changeActiveTab(4)">浏览排序规则设置<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType === 4" :class="{'active-tab-nav': activeIndex == 5}" @click="changeActiveTab(5)">档号规则设置<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType !== 1 && selectedCategory.isType !== 4" :class="{'active-tab-nav': activeIndex == 6}" @click="changeActiveTab(6)">归档章设置<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType !== 1 && selectedCategory.isType !== 4" :class="{'active-tab-nav': activeIndex == 7}" @click="changeActiveTab(7)">公共筛选<i /></li>
+            <li v-if="selectedCategory.isType && selectedCategory.isType !== 1 && selectedCategory.isType !== 4" :class="{'active-tab-nav': activeIndex == 8}" @click="changeActiveTab(8)">流程管理<i /></li>
+            <!-- 最右侧装饰img -->
+            <span class="tab-right-img" />
+          </ul>
+          <component :is="comName" :selected-category="selectedCategory" />
+        </div>
+      </div>
+      <!--修改新增表单组件-->
+      <eForm ref="eform" :selected-category="selectedCategory" />
+      <el-dialog title="确认删除" :visible.sync="deleteVisible" :before-close="handleClose">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <p><span style="color:#fff;">确认删除当前门类？</span></p>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog title="确认删除" :visible.sync="reconfirmDeleteVisible" :before-close="handleClose">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <div class="dialog-delt">
+            <p><span>删除后，会永久清除此门类的相关设置及报表，请谨慎操作！</span></p>
+            <p class="delt-tip"><span>提示：为确保档案安全，必须先手工删除此门类的所有档案数据。</span></p>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click.native="handleReconfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--排序对话框组件-->
+      <sortDialog ref="sort" @treeNodeSort="treeNodeSort" />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudCategory from '@/api/category/category'
+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 listBrowsing from './listBrowsing/index'
+import orderingRule from './orderingRule/index'
+import fileNoFormat from './fileNoFormat/index'
+import archiveSealSetting from './archiveSealSetting/index'
+import publicScreening from './publicScreening/index'
+import processManage from './processManage/index'
+import crudOperation from '@crud/CRUD.operation'
+import Vue from 'vue'
+
+export default {
+  name: 'ArchivesCategory',
+  components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview, listBrowsing, orderingRule, fileNoFormat, archiveSealSetting, publicScreening, processManage },
+  cruds() {
+    return [
+      CRUD({
+        title: '门类', url: 'api/archives-type/menu',
+        crudMethod: { ...crudCategory },
+        optShow: {
+          add: false,
+          edit: false,
+          del: false,
+          download: false,
+          group: false
+        }
+      })
+    ]
+  },
+  mixins: [presenter(), header()],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'category:add'],
+        edit: ['admin', 'category:edit'],
+        del: ['admin', 'category:del'],
+        sort: ['admin', 'category:sort']
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'cnName'
+      },
+      deleteVisible: false,
+      reconfirmDeleteVisible: false,
+      selectedCategory: {},
+      deleteData: {},
+      activeIndex: 0,
+      sortLoading: false,
+      brotherNodeNum: 0
+      // sortTableData: []
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'baseInfo'
+      } else if (this.activeIndex === 1) {
+        return 'fieldManage'
+      } else if (this.activeIndex === 2) {
+        return 'descriptionPreview'
+      } else if (this.activeIndex === 3) {
+        return 'listBrowsing'
+      } else if (this.activeIndex === 4) {
+        return 'orderingRule'
+      } else if (this.activeIndex === 5) {
+        return 'fileNoFormat'
+      } else if (this.activeIndex === 6) {
+        return 'archiveSealSetting'
+      } else if (this.activeIndex === 7) {
+        return 'publicScreening'
+      } else if (this.activeIndex === 8) {
+        return 'processManage'
+      }
+      return 'baseInfo'
+    }
+  },
+  methods: {
+    // 逆归实现 获取指定元素
+    findNode(tree, func) {
+      for (const node of tree) {
+        if (func(node)) return node
+        if (node.children) {
+          const res = this.findNode(node.children, func)
+          if (res) return res
+        }
+      }
+      return null
+    },
+    // 展开选中的父级
+    expandParents(node) {
+      node.expanded = true
+      if (node.parent) {
+        this.expandParents(node.parent)
+      }
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      let currentKey
+      if (localStorage.getItem('currentCategoryKey')) {
+        currentKey = JSON.parse(localStorage.getItem('currentCategoryKey'))
+      } else {
+        if (this.crud.data[0].isType === 1) {
+          currentKey = this.findNode(this.crud.data[0].children, (node) => {
+            return node.isType !== 1
+          })
+        } else {
+          currentKey = this.crud.data[0]
+        }
+      }
+      // 设置某个节点的当前选中状态
+      this.$refs.tree.setCurrentKey(currentKey.id)
+      this.$nextTick(() => {
+        // 设置某个节点的父级展开
+        const selectedKey = this.$refs.tree.getCurrentNode()
+        if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) {
+          this.expandParents(this.$refs.tree.getNode(selectedKey).parent)
+        }
+        // 选中节点的门类详情
+        this.handleNodeClick(selectedKey)
+      })
+    },
+    // 选中门类后，设置门类详情数据
+    handleNodeClick(val) {
+      if (val) {
+        this.crud.selectionChangeHandler([val])
+        this.$refs.eform.pid = val.id
+        this.selectedCategory = val
+        if (val.pid !== '0') {
+          Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName)
+        }
+        if (val.isType === 1 || val.isType !== 4) {
+          this.changeActiveTab(0)
+        }
+        // 缓存当前的选中的
+        localStorage.setItem('currentCategoryKey', JSON.stringify(val))
+        if (this.$refs.tree.getNode(val.pid) && this.$refs.tree.getNode(val.pid).childNodes) {
+          this.brotherNodeNum = this.$refs.tree.getNode(val.pid).childNodes.length
+        }
+      }
+    },
+    // 新增 - 判断当前节点类型，卷内/文件不可新建
+    [CRUD.HOOK.beforeToAdd](crud, form, btn) {
+      const isCanAddKey = JSON.parse(localStorage.getItem('currentCategoryKey'))
+      if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) {
+        this.$message({
+          message: '此门类下不可新建门类',
+          type: 'error',
+          duration: 2500
+        })
+        return false
+      }
+      this.$refs.eform.beforeToAdd()
+    },
+    // 新增/编辑后 - 新增后默认选中新增的门类
+    [CRUD.HOOK.afterSubmit](crud, addedCategory) {
+      if (addedCategory) {
+        // 缓存当前的选中的
+        localStorage.setItem('currentCategoryKey', JSON.stringify(addedCategory))
+      }
+    },
+    treeNodeSort(data) {
+      this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data)))
+    },
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    handleConfirm() {
+      this.deleteVisible = false
+      this.reconfirmDeleteVisible = true
+    },
+    handleReconfirm() {
+      this.reconfirmDeleteVisible = false
+      this.crud.delAllLoading = true
+      this.crud.doDelete(this.deleteData).then((res) => {
+        // 清空缓存的门类节点
+        localStorage.removeItem('currentCategoryKey')
+      })
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
+    },
+    toSort(data) {
+      this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].pid).data.children
+      this.$refs.sort.sortVisible = true
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-scroll{
+  font-size: 14px;
+}
+</style>

src/views/system/archivesCategory/listBrowsing/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <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" :disabled="table.left.selections.length == 0" @click="toAdd(table.left.selections)">
+            新增
+          </el-button>
+        </div>
+        <!--表格渲染-->
+        <el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')">
+          <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">
+          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)">
+            移除
+          </el-button>
+          <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)">
+            修改
+          </el-button>
+          <!-- type="danger" -->
+          <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
+        </div>
+        <!--表格渲染-->
+        <el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" height="calc(100vh - 602px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
+          <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="displayLength" label="显示长度" align="center" />
+          <el-table-column label="显示格式">
+            <template slot-scope="scope">
+              <span v-if="scope.row.displayformatType === 'center'">居中</span>
+              <span v-if="scope.row.displayformatType === 'left'">靠左</span>
+              <span v-if="scope.row.displayformatType === 'right'">靠右</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!--表单渲染-->
+      <eForm ref="cuform" @refresh="initData" />
+      <!--排序对话框组件-->
+      <sortDialog ref="sort" @refresh="initData" />
+      <!--删除对话框组件-->
+      <el-dialog title="移除字段" :visible.sync="deleteVisible">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <div class="dialog-delt">
+            <p><span>确定要移除当前字段吗？</span></p>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <!-- @selection-change="selectionChangeHandler" -->
+    <el-table ref="table" :key="tableKey" v-loading="table.bottom.loading" :data="table.bottom.data" style="min-width: 100%;" height="300" class="nowrap-tab">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column v-for="field in table.right.data" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
+        <template slot-scope="scope">
+          {{ scope.row[field.fieldName] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import { FetchArchivesTypeManage } from '@/api/category/category'
+import { FetchInitArchivesView } from '@/api/archivesManage/archivesList'
+import { add } from '@/api/category/listBrowsing'
+import eForm from './module/form'
+import sortDialog from './module/sortDialog'
+import Vue from 'vue'
+
+export default {
+  components: { eForm, sortDialog },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'listBrowsing:add'],
+        edit: ['admin', 'listBrowsing:edit'],
+        del: ['admin', 'listBrowsing:delete'],
+        sort: ['admin', 'listBrowsing:sort']
+      },
+      deleteVisible: false,
+      sortLoading: false,
+      delAllLoading: false,
+      tableKey: false, // 刷新下面预览表格用的:key
+      table: {
+        left: {
+          data: [],
+          Loading: false,
+          selections: []
+        },
+        right: {
+          data: [],
+          Loading: false,
+          selections: []
+        },
+        bottom: {
+          data: [],
+          Loading: false,
+          selections: []
+        }
+      }
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      this.getDisplayFieldData()
+      this.getBottomTableData()
+    },
+    getDisplayFieldData() {
+      FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then((res) => {
+        this.table.right.data.splice(0, this.table.right.data.length)
+        this.table.left.data.splice(0, this.table.left.data.length)
+        res.sort((item1, item2) => { return item1.displayOrder - item2.displayOrder }).forEach((item) => {
+          if (item.isInput) {
+            if (item.isDisplay) {
+              this.table.right.data.push(item)
+            } else {
+              this.table.left.data.push(item)
+            }
+          }
+        })
+        this.tableKey = !this.tableKey
+      })
+    },
+    getBottomTableData() {
+      FetchInitArchivesView({ categoryId: this.selectedCategory.id, isdel: false, page: 0, size: 10 }).then((res) => {
+        this.table.bottom.data.splice(0, this.table.bottom.data.length)
+        if (res && res.list) {
+          res.list.content.forEach((item) => {
+            this.table.bottom.data.push(item)
+          })
+        }
+      })
+    },
+    clickRowHandler(row, column, e, tableName) {
+      this.$refs[tableName].toggleRowSelection(row)
+    },
+    selectionChangeHandler(val, tableName) {
+      this.table[tableName].selections = val
+    },
+    toAdd() {
+      const maxDisplayOrder = this.table.right.data.reduce((prev, cur) => { return { displayOrder: Math.max(prev.displayOrder, cur.displayOrder) } }, { displayOrder: 0 }).displayOrder + 1
+      this.table.left.selections.forEach((item, index) => {
+        Vue.set(item, 'displayLength', 100)
+        Vue.set(item, 'displayformatType', 'center')
+        Vue.set(item, 'displayOrder', maxDisplayOrder + index)
+        item.isDisplay = true
+      })
+      this.$refs.cuform.title = '新增字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toEdit() {
+      this.$refs.cuform.title = '编辑字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toDelete() {
+      this.deleteVisible = true
+    },
+    handleDelConfirm() {
+      this.deleteVisible = false
+      this.delAllLoading = true
+      const deleteData = this.table.right.selections.map((item) => {
+        item.isDisplay = false
+        item.displayformatType = null
+        item.displayLength = null
+        item.displayOrder = null
+        return item
+      })
+      add(deleteData).then((res) => {
+        this.delAllLoading = false
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.getDisplayFieldData()
+      })
+    },
+    toSort() {
+      this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
+      this.$refs.sort.sortVisible = true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+::v-deep .el-table tr .el-table__cell {
+  height: 40px;
+}
+.format-main {
+  display: flex;
+  justify-content: flex-start;
+  .format-main-left,
+  .format-main-right {
+    height: calc(100vh - 531px);
+  }
+  .format-main-left {
+    padding-right: 10px;
+  }
+  .format-main-right {
+    flex-grow: 1;
+  }
+}
+::v-deep .nowrap-tab .el-table__header .cell {
+  text-overflow: unset !important;
+  white-space: nowrap !important;
+}
+</style>

src/views/system/archivesCategory/listBrowsing/module/form.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="fields-list">
+        <el-form ref="formData" :model="formData" size="small" label-width="75px">
+          <el-row v-for="(item, index) in formData.fields" :key="item.id" :gutter="10">
+            <el-col :span="9">
+              <el-form-item label="字段名称">
+                <el-input v-model="item.fieldCnName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <!--   -->
+              <el-form-item label="显示长度" label-width="90px" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '显示长度不能为空', trigger: 'blur'}" :model="item">
+                <el-input v-model.number="item.displayLength" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="显示格式" :prop="'fields.' + index + '.displayformatType'">
+                <el-select v-model="item.displayformatType">
+                  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="loading" @click="save">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/category/listBrowsing'
+export default {
+  data() {
+    return {
+      cuDialogVisible: false,
+      formData: {},
+      title: '新增字段',
+      options: [
+        {
+          label: '居中',
+          value: 'center'
+        },
+        {
+          label: '靠左',
+          value: 'left'
+        },
+        {
+          label: '靠右',
+          value: 'right'
+        }
+      ],
+      loading: false
+    }
+  },
+  methods: {
+    save() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          if (this.title === '新增字段') {
+            add(this.formData.fields).then((res) => {
+              this.$message({
+                message: '保存成功',
+                type: 'success',
+                duration: 2500
+              })
+              this.cuDialogVisible = false
+              this.loading = false
+              this.$emit('refresh')
+            })
+          } else {
+            edit(this.formData.fields).then((res) => {
+              this.$message({
+                message: '保存成功',
+                type: 'success',
+                duration: 2500
+              })
+              this.cuDialogVisible = false
+              this.loading = false
+              this.$emit('refresh')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.fields-list {
+  max-height: calc(100vh - 312px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+</style>

src/views/system/archivesCategory/listBrowsing/module/sortDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="排序" :visible.sync="sortVisible" @opened="opened">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+      <el-table :data="sortTableData" class="list-browsing-sort" style="width: 100%;" :max-height="tableHeight" row-key="id">
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="fieldCnName" label="字段名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { order } from '@/api/category/listBrowsing'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    opened() {
+      this.rowDrop('list-browsing-sort', 'sortTableData')
+    },
+    handleSort() {
+      this.sortTableData.forEach((item, index) => {
+        item.displayOrder = index + 1
+      })
+      order(this.sortTableData).then(() => {
+        this.sortVisible = false
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.$emit('refresh')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drag-tip {
+  display: block;
+  padding-left: 20px;
+  padding-bottom: 10px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+}
+</style>

src/views/system/archivesCategory/orderingRule/index.vue

@@ -0,0 +1,212 @@
+<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" :disabled="table.left.selections.length == 0 || orderFieldsSum >3" @click="toAdd(table.left.selections)">
+          新增
+        </el-button>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="leftTable" v-loading="table.left.loading" :data="table.left.data" style="width: 400px;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'left')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'leftTable')">
+        <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">
+        <!-- type="danger" -->
+        <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="delAllLoading" :disabled="table.right.selections.length === 0" @click="toDelete(table.right.selections)">
+          移除
+        </el-button>
+        <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="table.right.selections.length === 0" @click="toEdit(table.right.selections)">
+          修改
+        </el-button>
+        <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="table.right.data <= 1" @click="toSort">排序</el-button>
+        <span class="tip">注意：最多只可选择3个字段进行排序</span>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="rightTable" v-loading="table.right.loading" :data="table.right.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="(val)=>selectionChangeHandler(val,'right')" @row-click="(row,column,e)=>clickRowHandler(row,column,e,'rightTable')">
+        <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 label="排序方式" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.displayOrderBy === 'asc'">升序</span>
+            <span v-if="scope.row.displayOrderBy === 'desc'">降序</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--表单渲染-->
+    <eForm ref="cuform" @refresh="initData" />
+    <!--排序对话框组件-->
+    <sortDialog ref="sort" @refresh="initData" />
+    <!--删除对话框组件-->
+    <el-dialog title="移除字段" :visible.sync="deleteVisible">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定要移除当前字段吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDisplayField } from '@/api/category/orderingRule'
+import { edit } from '@/api/category/orderingRule'
+import eForm from './module/form'
+import sortDialog from './module/sortDialog'
+import Vue from 'vue'
+
+export default {
+  components: { eForm, sortDialog },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'orderingRule:add'],
+        edit: ['admin', 'orderingRule:edit'],
+        del: ['admin', 'orderingRule:delete'],
+        sort: ['admin', 'orderingRule:sort']
+      },
+      deleteVisible: false,
+      sortLoading: false,
+      delAllLoading: false,
+      table: {
+        left: {
+          data: [],
+          Loading: false,
+          selections: []
+        },
+        right: {
+          data: [],
+          Loading: false,
+          selections: []
+        }
+      }
+    }
+  },
+  computed: {
+    // 计算属性的 getter
+    orderFieldsSum: function() {
+      // `this` 指向 vm 实例
+      return this.table.left.selections.length + this.table.right.data.length
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+      this.initData()
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getDisplayField({ categoryId: this.selectedCategory.id, isDisPlayState: 'true' }).then((res) => {
+        this.table.right.data.splice(0, this.table.right.data.length)
+        this.table.left.data.splice(0, this.table.left.data.length)
+        res.sort((item1, item2) => { return item1.queue - item2.queue }).forEach((item) => {
+          if (item.displayOrderBy) {
+            this.table.right.data.push(item)
+          } else {
+            this.table.left.data.push(item)
+          }
+        })
+      })
+    },
+    clickRowHandler(row, column, e, tableName) {
+      this.$refs[tableName].toggleRowSelection(row)
+    },
+    selectionChangeHandler(val, tableName) {
+      this.table[tableName].selections = val
+    },
+    toAdd() {
+      const maxQueue = this.table.right.data.reduce((prev, cur) => { return { queue: Math.max(prev.queue, cur.queue) } }, { queue: 0 }).queue + 1
+      this.table.left.selections.forEach((item, index) => {
+        Vue.set(item, 'displayOrderBy', 'asc')
+        Vue.set(item, 'queue', maxQueue + index)
+      })
+      this.$refs.cuform.title = '新增字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.left.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toEdit() {
+      this.$refs.cuform.title = '编辑字段'
+      Vue.set(this.$refs.cuform.formData, 'fields', JSON.parse(JSON.stringify(this.table.right.selections)))
+      this.$refs.cuform.cuDialogVisible = true
+    },
+    toDelete() {
+      this.deleteVisible = true
+    },
+    handleDelConfirm() {
+      this.deleteVisible = false
+      this.delAllLoading = true
+      const deleteData = this.table.right.selections.map((item) => {
+        item.displayOrderBy = null
+        item.queue = null
+        return item
+      })
+      edit(deleteData).then((res) => {
+        this.delAllLoading = false
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.initData()
+      })
+    },
+    toSort() {
+      this.$refs.sort.sortTableData = JSON.parse(JSON.stringify(this.table.right.data))
+      this.$refs.sort.sortVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+::v-deep .el-table tr .el-table__cell {
+  height: 40px;
+}
+.format-main {
+  display: flex;
+  justify-content: flex-start;
+  .format-main-left,
+  .format-main-right {
+    height: calc(100vh - 231px);
+  }
+  .format-main-left {
+    padding-right: 10px;
+  }
+  .format-main-right {
+    flex-grow: 1;
+  }
+}
+.tip {
+  padding-left: 20px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+  font-size: 12px;
+}
+</style>

src/views/system/archivesCategory/orderingRule/module/form.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="fields-list">
+        <el-form ref="form" :model="formData" size="small" label-width="75px">
+          <el-row v-for="(item) in formData.fields" :key="item.id" :gutter="10">
+            <el-col :span="13">
+              <el-form-item label="组成字段">
+                <el-input v-model="item.fieldCnName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="排序方式">
+                <el-radio-group v-model="item.displayOrderBy">
+                  <el-radio label="asc">升序</el-radio>
+                  <el-radio label="desc">降序</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="loading" @click="save">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { edit } from '@/api/category/orderingRule'
+export default {
+  data() {
+    return {
+      cuDialogVisible: false,
+      formData: {},
+      title: '',
+      loading: false
+    }
+  },
+  methods: {
+    save() {
+      this.loading = true
+      edit(this.formData.fields).then((res) => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.cuDialogVisible = false
+        this.$emit('refresh')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fields-list {
+  max-height: calc(100vh - 312px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+</style>

src/views/system/archivesCategory/orderingRule/module/sortDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="排序" :visible.sync="sortVisible" @opened="opened">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+      <el-table :data="sortTableData" class="ordering-rule-sort" style="width: 100%;;" :max-height="tableHeight" row-key="id">
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="fieldCnName" label="字段名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { order } from '@/api/category/orderingRule'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    opened() {
+      this.rowDrop('ordering-rule-sort', 'sortTableData')
+    },
+    handleSort() {
+      this.sortTableData.forEach((item, index) => {
+        item.queue = index + 1
+      })
+      order(this.sortTableData).then(() => {
+        this.sortVisible = false
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.$emit('refresh')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drag-tip {
+  display: block;
+  padding-left: 20px;
+  padding-bottom: 10px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+}
+</style>

src/views/system/archivesCategory/processManage/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>流程管理</div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/system/archivesCategory/publicScreening/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>公共筛选</div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/system/archivesCategory/sortDialog.vue

@@ -0,0 +1,84 @@
+<template>
+  <!--表单组件-->
+  <el-dialog :close-on-click-modal="false" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+      <el-table :data="sortTableData" :tree-props="{children: 'childrens'}" class="category-sort" style="width: 100%;" :max-height="tableHeight" row-key="id">
+        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column prop="cnName" label="门类名称" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+import { sort } from '@/api/category/category'
+
+export default {
+  data() {
+    return {
+      sortVisible: false,
+      sortTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    // 行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    opened() {
+      this.rowDrop('category-sort', 'sortTableData')
+    },
+    handleSort() {
+      const data = this.sortTableData.map((value, index) => {
+        return { id: value.id, sort: index + 1 }
+      })
+      this.sortTableData.forEach((item, index) => {
+        item.categorySeq = index + 1
+      })
+      sort(data).then(() => {
+        this.sortVisible = false
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.$emit('treeNodeSort', this.sortTableData)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drag-tip {
+  display: block;
+  padding-left: 20px;
+  padding-bottom: 10px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+}
+</style>

src/views/system/dept/index.vue

@@ -44,7 +44,6 @@
               <el-form-item label="部门简称" prop="name">
                 <el-input v-model="form.name" />
               </el-form-item>
-
               <el-form-item label="顶级部门">
                 <el-radio-group v-model="form.isTop">
                   <el-radio label="1">是</el-radio>