diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 0ac301a..fdf0d26 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1772,10 +1772,6 @@ input[type ='number'] {
   display: flex;
   justify-content: flex-start;
   @include category-padding;
-  .format-main-left,
-  .format-main-right {
-    height: calc(100vh - 531px);
-  }
   .format-main-left {
     padding-right: 10px;
   }
@@ -1792,4 +1788,126 @@ input[type ='number'] {
       overflow-y: scroll;
     }
   }
+}
+
+// 著录界面
+@mixin main-padding{
+  [data-theme="dark"] & {
+    padding: 0 20px 20px 20px;
+  }
+  [data-theme="light"] & {
+    padding: 20px 0;
+  }
+}
+.category-main {
+  display: flex;
+  justify-content: flex-start;
+  @include main-padding;
+  .des-preview-left,
+  .des-preview-right {
+    height: calc(100vh - 274px);
+    padding-right: 10px;
+    overflow-y: auto;
+  }
+  .des-preview-left {
+    flex: 1;
+    .des-form{
+      .input-num{
+        display: flex;
+        justify-content: flex-end;
+        text-align: right;
+        @include des-preview-input-num;
+        .el-form-item__content{
+          margin-left: 0 !important;
+          .el-input,
+          .el-input-number--small,
+          .el-input-number.is-controls-right {
+            padding-left: 2px;
+            padding-right: 2px;
+            @include des-preview-input-cont;
+          }
+        }
+      }
+    }
+    .el-col-8{
+      text-align: right;
+    }
+    checkbox-item{
+      .el-form-item__content{
+        margin-left: 0 !important;
+      }
+    }
+  }
+  .des-title {
+    position: relative;
+    height: 28px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    cursor: pointer;
+    @include des-title;
+    p {
+      line-height: 28px;
+      i {
+        font-size: 16px;
+        margin-left: 6px;
+        background-image: none;
+
+        transition: all ease-in 0.5s;
+        &.arrow-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .des-fields {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    margin-left: 1px;
+    li {
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      margin: -1px 0 0 -1px;
+      font-size: 14px;
+      text-align: center;
+      @include des-fields;
+      cursor: pointer;
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+    }
+  }
+  .des-set-btn {
+    display: flex;
+    justify-content: flex-end;
+    text-align: right;
+    margin-bottom: 20px;
+    .el-button {
+      display: block;
+      @include elButton-style;
+    }
+    .des-set-sort {
+      .iconfont {
+        line-height: 0 !important;
+      }
+    }
+  }
+
+  .des-preview-right {
+    width: 758px;
+    margin-left: 20px;
+  }
 }
\ No newline at end of file
diff --git a/src/views/system/archivesCategory/descriptionPreview/index.vue b/src/views/system/archivesCategory/descriptionPreview/index.vue
index e372770..f779434 100644
--- a/src/views/system/archivesCategory/descriptionPreview/index.vue
+++ b/src/views/system/archivesCategory/descriptionPreview/index.vue
@@ -183,127 +183,4 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
-
-@mixin main-padding{
-  [data-theme="dark"] & {
-    padding: 0 20px 20px 20px;
-  }
-  [data-theme="light"] & {
-    padding: 20px 0;
-  }
-}
-.category-main {
-  display: flex;
-  justify-content: flex-start;
-  @include main-padding;
-  .des-preview-left,
-  .des-preview-right {
-    height: calc(100vh - 274px);
-    padding-right: 10px;
-    overflow-y: auto;
-  }
-  .des-preview-left {
-    flex: 1;
-    .des-form{
-      ::v-deep .input-num{
-        display: flex;
-        justify-content: flex-end;
-        text-align: right;
-        @include des-preview-input-num;
-        .el-form-item__content{
-          margin-left: 0 !important;
-          .el-input,
-          .el-input-number--small,
-          .el-input-number.is-controls-right {
-            padding-left: 2px;
-            padding-right: 2px;
-            @include des-preview-input-cont;
-          }
-        }
-      }
-    }
-    ::v-deep .el-col-8{
-      text-align: right;
-    }
-    ::v-deep .checkbox-item{
-      .el-form-item__content{
-        margin-left: 0 !important;
-      }
-    }
-  }
-  .des-title {
-    position: relative;
-    height: 28px;
-    margin-bottom: 10px;
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-    cursor: pointer;
-    @include des-title;
-    p {
-      line-height: 28px;
-      i {
-        font-size: 16px;
-        margin-left: 6px;
-        background-image: none;
-
-        transition: all ease-in 0.5s;
-        &.arrow-up {
-          transform: rotate(180deg);
-        }
-      }
-    }
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      z-index: 1;
-    }
-  }
-  .des-fields {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-    margin-left: 1px;
-    li {
-      width: 100px;
-      height: 40px;
-      line-height: 40px;
-      margin: -1px 0 0 -1px;
-      font-size: 14px;
-      text-align: center;
-      @include des-fields;
-      cursor: pointer;
-      p {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-      }
-    }
-  }
-  .des-set-btn {
-    display: flex;
-    justify-content: flex-end;
-    text-align: right;
-    margin-bottom: 20px;
-    .el-button {
-      display: block;
-      @include elButton-style;
-    }
-    .des-set-sort {
-      ::v-deep .iconfont {
-        line-height: 0 !important;
-      }
-    }
-  }
-
-  .des-preview-right {
-    width: 758px;
-    margin-left: 20px;
-  }
-}
 </style>
diff --git a/src/views/system/archivesCategory/index.vue b/src/views/system/archivesCategory/index.vue
index 5ef7904..cbe85f4 100644
--- a/src/views/system/archivesCategory/index.vue
+++ b/src/views/system/archivesCategory/index.vue
@@ -6,21 +6,22 @@
         <div class="head-container">
           <crudOperation :permission="permission">
             <template v-slot:left>
-              <el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0 || crud.selections[0].isType === 2 || crud.selections[0].isType === 3 || crud.selections[0].isType === 5" @click="crud.toAdd">
+              <!-- crud.selections.length === 0 || crud.selections[0].isType === 2 || crud.selections[0].isType === 3 || crud.selections[0].isType === 5 -->
+              <el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0 || crud.selections[0].isType !== 1" @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])">
+              <el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 4" @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)">
+              <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' ) || crud.selections[0].isType === 4" @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>
+              <el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 5" @click="toSort(crud.selections)">排序</el-button>
             </template>
           </crudOperation>
         </div>
diff --git a/src/views/system/archivesClassify/index.vue b/src/views/system/archivesClassify/index.vue
index 0211de2..39779c3 100644
--- a/src/views/system/archivesClassify/index.vue
+++ b/src/views/system/archivesClassify/index.vue
@@ -136,7 +136,7 @@ export default {
   name: 'Classify',
   components: { crudOperation, pagination, Treeselect },
   cruds() {
-    return CRUD({ title: '档案分类', url: 'api/dept', crudMethod: {}})
+    return CRUD({ title: '分类', url: 'api/dept', crudMethod: {}})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
diff --git a/src/views/system/fileLibraryField/commonFields/index.vue b/src/views/system/fileLibraryField/commonFields/index.vue
new file mode 100644
index 0000000..5eb1993
--- /dev/null
+++ b/src/views/system/fileLibraryField/commonFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="常用字段" :is-type="2" permission-str="commonFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'CommonFields',
+  components: { Field }
+}
+</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/system/fileLibraryField/electronicFields/index.vue b/src/views/system/fileLibraryField/electronicFields/index.vue
new file mode 100644
index 0000000..6dc2a44
--- /dev/null
+++ b/src/views/system/fileLibraryField/electronicFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="电子文件字段" :is-type="3" permission-str="electronicFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'ElectronicFields',
+  components: { Field }
+}
+</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/system/fileLibraryField/index.vue b/src/views/system/fileLibraryField/index.vue
new file mode 100644
index 0000000..c97f7f8
--- /dev/null
+++ b/src/views/system/fileLibraryField/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <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>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+    </div>
+  </div>
+</template>
+
+<script>
+import commonFields from './commonFields/index.vue'
+import systemFields from './systemFields/index.vue'
+import electronicFields from './electronicFields/index.vue'
+
+export default {
+  name: 'FileLibraryField',
+  components: {
+    commonFields,
+    electronicFields,
+    systemFields
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'commonFields'
+      } else if (this.activeIndex === 1) {
+        return 'systemFields'
+      } else if (this.activeIndex === 2) {
+        return 'electronicFields'
+      }
+      return 'commonFields'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/system/fileLibraryField/systemFields/index.vue b/src/views/system/fileLibraryField/systemFields/index.vue
new file mode 100644
index 0000000..c3e09a7
--- /dev/null
+++ b/src/views/system/fileLibraryField/systemFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="系统字段" :is-type="1" permission-str="systemFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'SystemFields',
+  components: { Field }
+}
+</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/system/fileLibraryManage/baseInfo/index.vue b/src/views/system/fileLibraryManage/baseInfo/index.vue
new file mode 100644
index 0000000..0650bb9
--- /dev/null
+++ b/src/views/system/fileLibraryManage/baseInfo/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="system-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>
+</style>
diff --git a/src/views/system/fileLibraryManage/descriptionPreview/index.vue b/src/views/system/fileLibraryManage/descriptionPreview/index.vue
new file mode 100644
index 0000000..f779434
--- /dev/null
+++ b/src/views/system/fileLibraryManage/descriptionPreview/index.vue
@@ -0,0 +1,186 @@
+<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="iconfont icon-bianji" @click="settingForm">编辑</el-button>
+        <el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu" @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="修改字段">
+      <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 sort-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" title="著录界面排序">
+      <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>
+</style>
diff --git a/src/views/system/fileLibraryManage/fieldManage/index.vue b/src/views/system/fileLibraryManage/fieldManage/index.vue
new file mode 100644
index 0000000..8078987
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fieldManage/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="head-container">
+      <crudOperation :permission="permission" crud-tag="field">
+        <template v-slot:right>
+          <el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button>
+          <el-button size="mini" @click="toQuick"><i class="iconfont icon-kuaisushezhi" />快速设置</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" />
+    <quickSetting ref="quick" />
+    <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 quickSetting from './module/quickSetting'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+
+export default {
+  components: { eForm, quickSetting, 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 || '-'
+    },
+    toQuick() {
+      this.$refs.quick.quickTableData = JSON.parse(JSON.stringify(this.crud.data))
+      this.$refs.quick.quickVisible = true
+    }
+  }
+}
+</script>
+
+<style 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>
diff --git a/src/views/system/fileLibraryManage/fieldManage/module/form.vue b/src/views/system/fileLibraryManage/fieldManage/module/form.vue
new file mode 100644
index 0000000..6923931
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fieldManage/module/form.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-dialog class="field-setting-dialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <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 @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'
+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>
diff --git a/src/views/system/fileLibraryManage/fieldManage/module/quickSetting.vue b/src/views/system/fileLibraryManage/fieldManage/module/quickSetting.vue
new file mode 100644
index 0000000..c112410
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fieldManage/module/quickSetting.vue
@@ -0,0 +1,56 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="快速设置" :visible.sync="quickVisible">
+    <div class="setting-dialog">
+      <el-table :data="quickTableData" 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-column prop="fieldName" label="字段标识" />
+        <el-table-column label="输入字段" min-width="85" align="center">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.isInput" />
+          </template>
+        </el-table-column>
+        <el-table-column label="必填字段" min-width="85" align="center">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.isRequired" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.native="quickVisible=false">取消</el-button>
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      quickVisible: false,
+      quickTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    handleSort() {
+      this.quickTableData.forEach((item, index) => {
+        item.sequence = index + 1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog .el-dialog__body{
+  padding-top: 20px;
+}
+</style>
diff --git a/src/views/system/fileLibraryManage/fileNoFormat/index.vue b/src/views/system/fileLibraryManage/fileNoFormat/index.vue
new file mode 100644
index 0000000..b1855e5
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fileNoFormat/index.vue
@@ -0,0 +1,176 @@
+<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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">此操作将移除当前所选字段</p>
+          <span>你是否还要继续?</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="deleteVisible = false">取消</el-button>
+          <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;
+// }
+</style>
diff --git a/src/views/system/fileLibraryManage/fileNoFormat/module/form.vue b/src/views/system/fileLibraryManage/fileNoFormat/module/form.vue
new file mode 100644
index 0000000..c731adc
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fileNoFormat/module/form.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <div class="setting-dialog">
+      <el-form ref="formData" :model="formData" size="small" label-width="90px">
+        <el-row v-for="(item) in formData.fields" :key="item.id">
+          <el-col :span="12">
+            <el-form-item label="组成字段">
+              <el-input v-model="item.fieldCnName" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="组成符号">
+              <el-input v-model="item.connector" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cuDialogVisible=false">取消</el-button>
+        <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>
diff --git a/src/views/system/fileLibraryManage/fileNoFormat/module/sortDialog.vue b/src/views/system/fileLibraryManage/fileNoFormat/module/sortDialog.vue
new file mode 100644
index 0000000..8d24c9b
--- /dev/null
+++ b/src/views/system/fileLibraryManage/fileNoFormat/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>
diff --git a/src/views/system/fileLibraryManage/form.vue b/src/views/system/fileLibraryManage/form.vue
new file mode 100644
index 0000000..7cc924a
--- /dev/null
+++ b/src/views/system/fileLibraryManage/form.vue
@@ -0,0 +1,204 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <div class="setting-dialog">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
+        <el-row>
+          <el-form-item label="所属父级" prop="parentName">
+            <el-input v-model="selectedCategory.parentName" disabled />
+          </el-form-item>
+        </el-row>
+        <el-form-item label="名称" prop="cnName">
+          <el-input v-model="form.cnName" />
+        </el-form-item>
+        <el-form-item label="节点类型" prop="isType">
+          <!-- :disabled="crud.status.edit === 1" -->
+          <!--  @change="changeType" -->
+          <el-select v-model="form.isType" style="width: 225px;">
+            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="编码" prop="code">
+          <el-input v-model="form.code" />
+        </el-form-item> -->
+        <!-- <el-row v-if="isAdd">
+          <el-form-item label="是否装盒" prop="packing">
+            <el-radio-group v-model="form.packing" style="width: 580px;">
+              <el-radio label="1">装盒</el-radio>
+              <el-radio label="0">不装盒</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+        <el-row v-if="isAdd">
+          <el-form-item label="整理方式" prop="makeType">
+            <el-radio-group v-model="form.makeType" style="width: 580px;">
+              <el-radio label="piece">按件整理</el-radio>
+              <el-radio label="volumes">按卷整理</el-radio>
+              <el-radio label="project">项目管理（三层）</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row> -->
+        <!-- <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" type="textarea" :rows="4" style="width: 580px;" />
+        </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>
+// getCategoryType
+// import { getCategoryTree } 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'
+// code: null, packing: '1', makeType: 'piece', templateId: null
+const defaultForm = { id: null, parentName: null, cnName: null, isType: null, remark: 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,
+      // isAdd: false,
+      rules: {
+        parentLevel: [
+          { required: true, message: '所属父级不可为空', trigger: 'blur' }
+        ],
+        cnName: [
+          { required: true, message: '名称不可为空', trigger: 'blur' }
+        ],
+        isType: [
+          { required: true, message: '节点类型不可为空', trigger: 'change' }
+        ],
+        // code: [
+        //   { required: true, message: '编码不可为空', trigger: 'blur' }
+        // ],
+        packing: [
+          { required: true, message: '请选择是否装盒', trigger: 'change' }
+        ],
+        makeType: [
+          { required: true, message: '请选择装盒类型', trigger: 'change' }
+        ]
+      },
+      selectOptions: [
+        {
+          value: '1',
+          label: '分类'
+        },
+        {
+          value: '2',
+          label: '文件夹'
+        }
+      ],
+      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() {
+    //   // this.isAdd = this.form.isType === '1'
+    //   // 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>
diff --git a/src/views/system/fileLibraryManage/index.vue b/src/views/system/fileLibraryManage/index.vue
new file mode 100644
index 0000000..39fb049
--- /dev/null
+++ b/src/views/system/fileLibraryManage/index.vue
@@ -0,0 +1,290 @@
+<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>
+              <!-- crud.selections.length === 0 || crud.selections[0].isType === 2 || crud.selections[0].isType === 3 || crud.selections[0].isType === 5 -->
+              <el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0 || crud.selections[0].isType !== 1" @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' || crud.selections[0].isType === 4" @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' ) || crud.selections[0].isType === 4" @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' || crud.selections[0].isType === 5" @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>
+            <!-- 最右侧装饰img -->
+            <span class="tab-right-img" />
+          </ul>
+          <component :is="comName" :selected-category="selectedCategory" />
+        </div>
+      </div>
+      <!--修改新增表单组件-->
+      <eForm ref="eform" :selected-category="selectedCategory" />
+      <el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :before-close="handleClose">
+        <div class="setting-dialog">
+          <div class="tip-content">
+            <p class="tipMsg">此操作将删除当前所选分类项及其子集</p>
+            <span>你是否还要继续?</span>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="deleteVisible = false">取消</el-button>
+            <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog class="tip-dialog" title="确认删除" :visible.sync="reconfirmDeleteVisible" :before-close="handleClose">
+        <div class="setting-dialog">
+          <div class="tip-content">
+            <p class="tipMsg">删除后，会永久清除此门类的相关设置及报表，请谨慎操作！</p>
+            <span>提示：为确保档案安全，必须先手工删除此门类的所有档案数据。</span>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="reconfirmDeleteVisible = false">取消</el-button>
+            <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 crudOperation from '@crud/CRUD.operation'
+import Vue from 'vue'
+
+export default {
+  name: 'FileLibraryManage',
+  components: { crudOperation, eForm, sortDialog, baseInfo, fieldManage, descriptionPreview, listBrowsing, orderingRule },
+  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'
+      }
+      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
+        console.log(this.selectedCategory)
+        if (val.pid !== '0') {
+          Vue.set(this.selectedCategory, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName)
+        }
+        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
+      setTimeout(() => {
+        this.reconfirmDeleteVisible = true
+      }, 300)
+    },
+    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>
diff --git a/src/views/system/fileLibraryManage/listBrowsing/index.vue b/src/views/system/fileLibraryManage/listBrowsing/index.vue
new file mode 100644
index 0000000..30029a4
--- /dev/null
+++ b/src/views/system/fileLibraryManage/listBrowsing/index.vue
@@ -0,0 +1,228 @@
+<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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+        <div class="setting-dialog">
+          <div class="tip-content">
+            <p class="tipMsg">此操作将移除当前所选字段</p>
+            <span>你是否还要继续?</span>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="deleteVisible = false">取消</el-button>
+            <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 lang="scss" scoped>
+// ::v-deep div.el-dialog__footer {
+//   text-align: center;
+// }
+// ::v-deep .el-table tr .el-table__cell {
+//   height: 40px;
+// }
+// ::v-deep .nowrap-tab .el-table__header .cell {
+//   text-overflow: unset !important;
+//   white-space: nowrap !important;
+// }
+</style>
diff --git a/src/views/system/fileLibraryManage/listBrowsing/module/form.vue b/src/views/system/fileLibraryManage/listBrowsing/module/form.vue
new file mode 100644
index 0000000..59037d9
--- /dev/null
+++ b/src/views/system/fileLibraryManage/listBrowsing/module/form.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <div class="setting-dialog">
+      <el-form ref="formData" :model="formData" size="small" label-width="95px">
+        <el-row v-for="(item, index) in formData.fields" :key="item.id">
+          <el-col :span="9">
+            <el-form-item label="字段名称">
+              <el-input v-model="item.fieldCnName" :disabled="true" style="width:160px;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item label="列宽" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '列宽不能为空', trigger: 'blur'}" :model="item">
+              <el-input v-model.number="item.displayLength" style="width:160px;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="对齐方式" :prop="'fields.' + index + '.displayformatType'" :rules="{required: true, message: '对齐方式不能为空', trigger: 'change'}">
+              <el-select v-model="item.displayformatType" style="width:80px;">
+                <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 slot="footer" class="dialog-footer">
+        <el-button @click="cuDialogVisible=false">取消</el-button>
+        <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 lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/fileLibraryManage/listBrowsing/module/sortDialog.vue b/src/views/system/fileLibraryManage/listBrowsing/module/sortDialog.vue
new file mode 100644
index 0000000..85bc8d3
--- /dev/null
+++ b/src/views/system/fileLibraryManage/listBrowsing/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>
diff --git a/src/views/system/fileLibraryManage/orderingRule/index.vue b/src/views/system/fileLibraryManage/orderingRule/index.vue
new file mode 100644
index 0000000..52b7114
--- /dev/null
+++ b/src/views/system/fileLibraryManage/orderingRule/index.vue
@@ -0,0 +1,202 @@
+<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 >5" @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">注意：最多只可选择5个字段进行排序</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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">此操作将移除当前所选字段</p>
+          <span>你是否还要继续?</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="deleteVisible = false">取消</el-button>
+          <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;
+}
+.tip {
+  display: inline-block;
+  margin: 4px 0 0 14px;
+  padding-left: 20px;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 20px;
+  background: url('~@/assets/images/icon/tip-icon.png') no-repeat left center;
+  background-size: 14px 14px;
+}
+</style>
diff --git a/src/views/system/fileLibraryManage/orderingRule/module/form.vue b/src/views/system/fileLibraryManage/orderingRule/module/form.vue
new file mode 100644
index 0000000..281b086
--- /dev/null
+++ b/src/views/system/fileLibraryManage/orderingRule/module/form.vue
@@ -0,0 +1,69 @@
+<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="100px">
+          <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 @click="cuDialogVisible=false">取消</el-button>
+        <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>
diff --git a/src/views/system/fileLibraryManage/orderingRule/module/sortDialog.vue b/src/views/system/fileLibraryManage/orderingRule/module/sortDialog.vue
new file mode 100644
index 0000000..534ff1e
--- /dev/null
+++ b/src/views/system/fileLibraryManage/orderingRule/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>
diff --git a/src/views/system/fileLibraryManage/sortDialog.vue b/src/views/system/fileLibraryManage/sortDialog.vue
new file mode 100644
index 0000000..42705b1
--- /dev/null
+++ b/src/views/system/fileLibraryManage/sortDialog.vue
@@ -0,0 +1,76 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" :close-on-click-modal="false" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible = false">取消</el-button>
+        <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>
+
+</style>
diff --git a/src/views/system/subjectLibraryField/commonFields/index.vue b/src/views/system/subjectLibraryField/commonFields/index.vue
new file mode 100644
index 0000000..5eb1993
--- /dev/null
+++ b/src/views/system/subjectLibraryField/commonFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="常用字段" :is-type="2" permission-str="commonFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'CommonFields',
+  components: { Field }
+}
+</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/system/subjectLibraryField/electronicFields/index.vue b/src/views/system/subjectLibraryField/electronicFields/index.vue
new file mode 100644
index 0000000..6dc2a44
--- /dev/null
+++ b/src/views/system/subjectLibraryField/electronicFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="电子文件字段" :is-type="3" permission-str="electronicFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'ElectronicFields',
+  components: { Field }
+}
+</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/system/subjectLibraryField/index.vue b/src/views/system/subjectLibraryField/index.vue
new file mode 100644
index 0000000..d9b4bc0
--- /dev/null
+++ b/src/views/system/subjectLibraryField/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <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>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+    </div>
+  </div>
+</template>
+
+<script>
+import commonFields from './commonFields/index.vue'
+import systemFields from './systemFields/index.vue'
+import electronicFields from './electronicFields/index.vue'
+
+export default {
+  name: 'SubjectLibraryField',
+  components: {
+    commonFields,
+    electronicFields,
+    systemFields
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'commonFields'
+      } else if (this.activeIndex === 1) {
+        return 'systemFields'
+      } else if (this.activeIndex === 2) {
+        return 'electronicFields'
+      }
+      return 'commonFields'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/system/subjectLibraryField/systemFields/index.vue b/src/views/system/subjectLibraryField/systemFields/index.vue
new file mode 100644
index 0000000..c3e09a7
--- /dev/null
+++ b/src/views/system/subjectLibraryField/systemFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="系统字段" :is-type="1" permission-str="systemFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'SystemFields',
+  components: { Field }
+}
+</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/system/subjectLibraryManage/descriptionPreview/index.vue b/src/views/system/subjectLibraryManage/descriptionPreview/index.vue
new file mode 100644
index 0000000..09b4bbc
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/descriptionPreview/index.vue
@@ -0,0 +1,192 @@
+<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="iconfont icon-bianji" @click="settingForm">编辑</el-button>
+        <el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu" @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="修改字段">
+      <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 sort-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" title="著录界面排序">
+      <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 {
+  .des-preview-left,
+  .des-preview-right {
+    height: calc(100vh - 254px);
+  }
+}
+</style>
diff --git a/src/views/system/subjectLibraryManage/fieldManage/index.vue b/src/views/system/subjectLibraryManage/fieldManage/index.vue
new file mode 100644
index 0000000..e3e40d7
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fieldManage/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="head-container">
+      <crudOperation :permission="permission" crud-tag="field">
+        <template v-slot:right>
+          <el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button>
+          <el-button size="mini" @click="toQuick"><i class="iconfont icon-kuaisushezhi" />快速设置</el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 286px)" 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" />
+    <quickSetting ref="quick" />
+    <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 quickSetting from './module/quickSetting'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+
+export default {
+  components: { eForm, quickSetting, 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 || '-'
+    },
+    toQuick() {
+      this.$refs.quick.quickTableData = JSON.parse(JSON.stringify(this.crud.data))
+      this.$refs.quick.quickVisible = true
+    }
+  }
+}
+</script>
+
+<style 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>
diff --git a/src/views/system/subjectLibraryManage/fieldManage/module/form.vue b/src/views/system/subjectLibraryManage/fieldManage/module/form.vue
new file mode 100644
index 0000000..6923931
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fieldManage/module/form.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-dialog class="field-setting-dialog" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <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 @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'
+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>
diff --git a/src/views/system/subjectLibraryManage/fieldManage/module/quickSetting.vue b/src/views/system/subjectLibraryManage/fieldManage/module/quickSetting.vue
new file mode 100644
index 0000000..c112410
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fieldManage/module/quickSetting.vue
@@ -0,0 +1,56 @@
+<template>
+  <!--表单组件-->
+  <el-dialog title="快速设置" :visible.sync="quickVisible">
+    <div class="setting-dialog">
+      <el-table :data="quickTableData" 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-column prop="fieldName" label="字段标识" />
+        <el-table-column label="输入字段" min-width="85" align="center">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.isInput" />
+          </template>
+        </el-table-column>
+        <el-table-column label="必填字段" min-width="85" align="center">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.isRequired" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.native="quickVisible=false">取消</el-button>
+        <el-button type="primary" @click.native="handleSort">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      quickVisible: false,
+      quickTableData: [],
+      tableHeight: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight * 0.6
+    })
+  },
+  methods: {
+    handleSort() {
+      this.quickTableData.forEach((item, index) => {
+        item.sequence = index + 1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog .el-dialog__body{
+  padding-top: 20px;
+}
+</style>
diff --git a/src/views/system/subjectLibraryManage/fileNoFormat/index.vue b/src/views/system/subjectLibraryManage/fileNoFormat/index.vue
new file mode 100644
index 0000000..76fde53
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fileNoFormat/index.vue
@@ -0,0 +1,176 @@
+<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 - 286px)" @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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">此操作将移除当前所选字段</p>
+          <span>你是否还要继续?</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="deleteVisible = false">取消</el-button>
+          <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;
+// }
+</style>
diff --git a/src/views/system/subjectLibraryManage/fileNoFormat/module/form.vue b/src/views/system/subjectLibraryManage/fileNoFormat/module/form.vue
new file mode 100644
index 0000000..c731adc
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fileNoFormat/module/form.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <div class="setting-dialog">
+      <el-form ref="formData" :model="formData" size="small" label-width="90px">
+        <el-row v-for="(item) in formData.fields" :key="item.id">
+          <el-col :span="12">
+            <el-form-item label="组成字段">
+              <el-input v-model="item.fieldCnName" :disabled="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="组成符号">
+              <el-input v-model="item.connector" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cuDialogVisible=false">取消</el-button>
+        <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>
diff --git a/src/views/system/subjectLibraryManage/fileNoFormat/module/sortDialog.vue b/src/views/system/subjectLibraryManage/fileNoFormat/module/sortDialog.vue
new file mode 100644
index 0000000..8d24c9b
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/fileNoFormat/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>
diff --git a/src/views/system/subjectLibraryManage/index.vue b/src/views/system/subjectLibraryManage/index.vue
new file mode 100644
index 0000000..1cd35ea
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <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>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" :selected-category="selectedCategory" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, header } from '@crud/crud'
+import fieldManage from './fieldManage/index'
+import descriptionPreview from './descriptionPreview/index'
+import listBrowsing from './listBrowsing/index'
+import orderingRule from './orderingRule/index'
+
+export default {
+  name: 'SubjectLibraryManage',
+  components: { fieldManage, descriptionPreview, listBrowsing, orderingRule },
+  cruds() {
+    return [
+      CRUD({
+        title: '分类', url: 'api/archives-type/menu'
+      })
+    ]
+  },
+  mixins: [presenter(), header()],
+  data() {
+    return {
+      activeIndex: 1,
+      selectedCategory: {
+        'id': 'DA92B36D1AE9BC95FC6B26',
+        'cnName': '文书档案（卷内）',
+        'enName': 'tb_2022_08_23_1661222926063',
+        'pid': '699CD61A5E0320DB77600E',
+        'isType': 4,
+        'categorySeq': null,
+        'children': [],
+        'remark': null,
+        'typeMetic': true,
+        'create_by': 'admin',
+        'update_by': 'admin',
+        'create_time': 1661222927000,
+        'update_time': 1661222927000,
+        'parentName': '文书档案（案卷）'
+      }
+    }
+  },
+  computed: {
+    comName: function() {
+      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'
+      }
+      return 'fieldManage'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/system/subjectLibraryManage/listBrowsing/index.vue b/src/views/system/subjectLibraryManage/listBrowsing/index.vue
new file mode 100644
index 0000000..0227eaf
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/listBrowsing/index.vue
@@ -0,0 +1,228 @@
+<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 - 586px)" @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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+        <div class="setting-dialog">
+          <div class="tip-content">
+            <p class="tipMsg">此操作将移除当前所选字段</p>
+            <span>你是否还要继续?</span>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="deleteVisible = false">取消</el-button>
+            <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 lang="scss" scoped>
+// ::v-deep div.el-dialog__footer {
+//   text-align: center;
+// }
+// ::v-deep .el-table tr .el-table__cell {
+//   height: 40px;
+// }
+// ::v-deep .nowrap-tab .el-table__header .cell {
+//   text-overflow: unset !important;
+//   white-space: nowrap !important;
+// }
+</style>
diff --git a/src/views/system/subjectLibraryManage/listBrowsing/module/form.vue b/src/views/system/subjectLibraryManage/listBrowsing/module/form.vue
new file mode 100644
index 0000000..59037d9
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/listBrowsing/module/form.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog class="addEdit-category-form" :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
+    <div class="setting-dialog">
+      <el-form ref="formData" :model="formData" size="small" label-width="95px">
+        <el-row v-for="(item, index) in formData.fields" :key="item.id">
+          <el-col :span="9">
+            <el-form-item label="字段名称">
+              <el-input v-model="item.fieldCnName" :disabled="true" style="width:160px;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item label="列宽" :prop="'fields.' + index + '.displayLength'" :rules="{required: true, message: '列宽不能为空', trigger: 'blur'}" :model="item">
+              <el-input v-model.number="item.displayLength" style="width:160px;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="对齐方式" :prop="'fields.' + index + '.displayformatType'" :rules="{required: true, message: '对齐方式不能为空', trigger: 'change'}">
+              <el-select v-model="item.displayformatType" style="width:80px;">
+                <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 slot="footer" class="dialog-footer">
+        <el-button @click="cuDialogVisible=false">取消</el-button>
+        <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 lang="scss" scoped>
+
+</style>
diff --git a/src/views/system/subjectLibraryManage/listBrowsing/module/sortDialog.vue b/src/views/system/subjectLibraryManage/listBrowsing/module/sortDialog.vue
new file mode 100644
index 0000000..85bc8d3
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/listBrowsing/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>
diff --git a/src/views/system/subjectLibraryManage/orderingRule/index.vue b/src/views/system/subjectLibraryManage/orderingRule/index.vue
new file mode 100644
index 0000000..8027f3a
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/orderingRule/index.vue
@@ -0,0 +1,202 @@
+<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 >5" @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 - 286px)" @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">注意：最多只可选择5个字段进行排序</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 class="tip-dialog" title="提示" :visible.sync="deleteVisible">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">此操作将移除当前所选字段</p>
+          <span>你是否还要继续?</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="deleteVisible = false">取消</el-button>
+          <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;
+}
+.tip {
+  display: inline-block;
+  margin: 4px 0 0 14px;
+  padding-left: 20px;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 20px;
+  background: url('~@/assets/images/icon/tip-icon.png') no-repeat left center;
+  background-size: 14px 14px;
+}
+</style>
diff --git a/src/views/system/subjectLibraryManage/orderingRule/module/form.vue b/src/views/system/subjectLibraryManage/orderingRule/module/form.vue
new file mode 100644
index 0000000..281b086
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/orderingRule/module/form.vue
@@ -0,0 +1,69 @@
+<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="100px">
+          <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 @click="cuDialogVisible=false">取消</el-button>
+        <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>
diff --git a/src/views/system/subjectLibraryManage/orderingRule/module/sortDialog.vue b/src/views/system/subjectLibraryManage/orderingRule/module/sortDialog.vue
new file mode 100644
index 0000000..534ff1e
--- /dev/null
+++ b/src/views/system/subjectLibraryManage/orderingRule/module/sortDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="sort-dialog" title="排序" :visible.sync="sortVisible" @opened="opened">
+    <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 @click.native="sortVisible=false">取消</el-button>
+        <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>
+</style>