diff --git a/src/api/company/archives/archivesRole.js b/src/api/company/archives/archivesRole.js
new file mode 100644
index 0000000..9f001e8
--- /dev/null
+++ b/src/api/company/archives/archivesRole.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查看档案名称
+export function getArchivesCatalogList(dictType){
+  return request({
+    url: "/archives/role/list?dictType=" + dictType,
+    method: "get"
+  })
+}
+
+// 新增或修改档案名称
+export function updateArchivesRoleAndDict(data){
+  return request({
+    url: "/archives/role/update",
+    method: "post",
+    data
+  })
+}
+
+// 删除档案名称
+export function removeArchivesRoleAndDict(ids){
+  return request({
+    url: "/archives/role/remove/" + ids,
+    method: "delete"
+  })
+}
diff --git a/src/utils/dict.js b/src/utils/dict.js
index ed0b27e..b315b44 100644
--- a/src/utils/dict.js
+++ b/src/utils/dict.js
@@ -164,10 +164,8 @@ export const DICT_TYPE = {
   JY_ORDER_STATUS: 'jy_order_status',
   // 车辆类型
   RESCUE_CAR_TYPE: 'rescue_car_type',
-  // 合同分类
-  CONTRACT_TYPE: 'contract_type',
-  // 资料分类
-  MATERIAL_TYPE: 'material_type',
+  // 档案分类
+  ARCHIVES_TYPE: 'archives_type',
 }
 
 /**
diff --git a/src/views/knowledge/views/archives/archives.vue b/src/views/knowledge/views/archives/archives.vue
index 1b760cb..3eb874d 100644
--- a/src/views/knowledge/views/archives/archives.vue
+++ b/src/views/knowledge/views/archives/archives.vue
@@ -1,19 +1,13 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeTab" @tab-click="handleClick">
-      <!-- 合同管理 -->
-      <el-tab-pane label="合同管理" :name="DICT_TYPE.CONTRACT_TYPE">
-        <ArchivesTable :active-tab="activeTab" />
-      </el-tab-pane>
-      <!-- 资料管理 -->
-      <el-tab-pane label="资料管理" :name="DICT_TYPE.MATERIAL_TYPE">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in this.getDictDatas(DICT_TYPE.ARCHIVES_TYPE)">
         <ArchivesTable :active-tab="activeTab" />
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
-import { DICT_TYPE } from '@/utils/dict'
 import ArchivesTable from '@/views/knowledge/views/archives/components/ArchivesTable'
 
 export default {
@@ -23,13 +17,10 @@ export default {
   },
   data(){
     return{
-      activeTab: DICT_TYPE.CONTRACT_TYPE,
+      activeTab: "contract_type",
     }
   },
   methods:{
-    handleClick(tab, event) {
-      console.log(this.activeTab)
-    }
   }
 }
 </script>
diff --git a/src/views/knowledge/views/archives/components/ArchivesTable.vue b/src/views/knowledge/views/archives/components/ArchivesTable.vue
index 72b9095..499d284 100644
--- a/src/views/knowledge/views/archives/components/ArchivesTable.vue
+++ b/src/views/knowledge/views/archives/components/ArchivesTable.vue
@@ -7,72 +7,90 @@
       <!-- 操作工具栏 -->
       <el-row :gutter="10" class="mb8" style="margin-top: 1rem">
         <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openCreateForm"
                      v-hasPermi="['archives:catalog:create']"
           >新增
           </el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="success" plain icon="el-icon-edit" :disabled="updateMultiple" size="mini" @click="openForm(undefined)"
+          <el-button type="success" plain icon="el-icon-edit" :disabled="updateMultiple" size="mini"
+                     @click="openUpdateForm"
                      v-hasPermi="['archives:catalog:update']"
           >修改
           </el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="danger" plain icon="el-icon-delete" :disabled="deleteMultiple" size="mini" @click="openForm(undefined)"
+          <el-button type="danger" plain icon="el-icon-delete" :disabled="deleteMultiple" size="mini"
+                     @click="handleDelete"
                      v-hasPermi="['archives:catalog:remove']"
           >删除
           </el-button>
         </el-col>
       </el-row>
       <el-input placeholder="请输入名称" size="small" style="margin:1rem 0 1rem 0" v-model="filterText"/>
-      <el-tree @check="handleSelectionChange" show-checkbox :data="this.getDictDatas(activeTab)" ref="tree" :filter-node-method="filterNode"
+      <el-skeleton v-if="treeLoading"/>
+      <el-tree v-else @check="handleSelectionChange" show-checkbox :data="dictDataTree" ref="tree"
+               :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                highlight-current
       >
         <template v-slot="{ node, data }">
           <!-- 自定义节点内容 -->
           <span class="custom-tree-node">
-        {{ truncateText(data.label, 15) }}
+        {{ truncateText(data.dictLabel, 15) }}
       </span>
         </template>
       </el-tree>
     </div>
     <div class="right">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
-        <el-form-item label="名称" prop="fileName">
-          <el-input v-model="queryParams.fileName" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
-        </el-form-item>
-        <el-form-item label="时间区间" prop="fileDateArray">
-          <el-date-picker v-model="queryParams.fileDateArray" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange"
-                          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
+      <el-empty style="margin-top: 10%" v-if="!chooseData" description="请先选择目录"></el-empty>
+      <div v-else>
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="90px"
+        >
+          <el-form-item label="名称" prop="fileName">
+            <el-input v-model="queryParams.fileName" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="时间区间" prop="fileDateArray">
+            <el-date-picker v-model="queryParams.fileDateArray" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
+                            type="daterange"
+                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                            :default-time="['00:00:00', '23:59:59']"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-      <!-- 操作工具栏 -->
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
-                     v-hasPermi="['company:staff:create']"
-          >新增
-          </el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+        <!-- 操作工具栏 -->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini"
+                       v-hasPermi="['company:staff:create']"
+            >新增
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </div>
     </div>
+
+    <ArchivesCatalogForm ref="formRef" @success="getList"/>
   </div>
 </template>
 
 <script>
+
+import { getArchivesCatalogList, removeArchivesRoleAndDict } from '@/api/company/archives/archivesRole'
+import ArchivesCatalogForm from '@/views/knowledge/views/archives/form/ArchivesCatalogForm'
+
 export default {
   name: 'ArchivesTable',
+  components: {
+    ArchivesCatalogForm
+  },
   props: {
     activeTab: {
       type: String,
@@ -84,31 +102,62 @@ export default {
     return {
       filterText: '',
       chooseData: '',
-      queryParams:{
+      queryParams: {
         fileName: null,
-        fileDateArray: null,
+        fileDateArray: null
       },
       // 显示搜索条件
       showSearch: true,
       deleteMultiple: true,
       updateMultiple: true,
+      dictDataTree: [],
+      selectNodes: [],
+      // 档案目录加载遮罩
+      treeLoading : true
     }
   },
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val)
+    },
+    activeTab() {
+      this.getList()
     }
   },
+  mounted() {
+    this.getList()
+  },
   methods: {
-    openForm(row){
-
+    // 新增
+    openCreateForm() {
+      const data = {
+        activeTab: this.activeTab
+      }
+      this.$refs['formRef'].open(data)
     },
-    getList(){
-
+    // 修改
+    openUpdateForm() {
+      const data = {
+        ...this.selectNodes[0],
+        activeTab: this.activeTab
+      }
+      this.$refs['formRef'].open(data)
+    },
+    async getList() {
+      this.selectNodes = []
+      this.deleteMultiple = !this.selectNodes.length > 0
+      this.updateMultiple = !(this.selectNodes.length === 1)
+      try {
+        this.treeLoading = true
+        const res = await getArchivesCatalogList(this.activeTab)
+        this.dictDataTree = res.data
+      } finally {
+        this.treeLoading = false
+      }
     },
     // 节点事件
     handleNodeClick(e) {
-      this.chooseData = e.label
+      this.chooseData = e.dictLabel
     },
     // 节点筛选
     filterNode(value, data) {
@@ -121,7 +170,7 @@ export default {
       }
       return text
     },
-    handleQuery(){
+    handleQuery() {
 
     },
     /** 重置按钮操作 */
@@ -129,8 +178,27 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    handleSelectionChange(selection){
-      console.log(selection)
+    handleSelectionChange(selection) {
+      const flag = this.selectNodes.findIndex(item => item.dataId === selection.dataId)
+      if (flag > -1) {
+        this.selectNodes.splice(flag, 1)
+      } else {
+        this.selectNodes.push(selection)
+      }
+      this.deleteMultiple = !this.selectNodes.length > 0
+      this.updateMultiple = !(this.selectNodes.length === 1)
+    },
+    /** 删除按钮操作 */
+    async handleDelete() {
+      const dataIds = this.selectNodes.map(item => item.dataId)
+      const dictLabels = this.selectNodes.map(item => item.dictLabel)
+      try {
+        await this.$modal.confirm('是否确认删除名称为"' + dictLabels + '"的数据项?')
+        await removeArchivesRoleAndDict(dataIds)
+        await this.getList()
+        this.$modal.msgSuccess('删除成功')
+      } catch {
+      }
     }
   }
 }
@@ -171,7 +239,8 @@ div {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-::v-deep .el-tree-node__expand-icon.is-leaf{
+
+::v-deep .el-tree-node__expand-icon.is-leaf {
   display: none;
 }
 </style>
diff --git a/src/views/knowledge/views/archives/form/ArchivesCatalogForm.vue b/src/views/knowledge/views/archives/form/ArchivesCatalogForm.vue
new file mode 100644
index 0000000..e407681
--- /dev/null
+++ b/src/views/knowledge/views/archives/form/ArchivesCatalogForm.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="80px">
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="档案名称" prop="dictLabel">
+              <el-input v-model="formData.dictLabel" placeholder="请输入档案名称"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="查看权限" prop="queryRoleIds">
+              <el-select
+                style="width: 100%"
+                filterable
+                clearable
+                v-model="formData.queryRoleIds" multiple placeholder="请选择有查看权限的角色"
+              >
+                <el-option
+                  v-for="(item, index) in roleList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="新增权限" prop="createRoleIds">
+              <el-select
+                style="width: 100%"
+                filterable
+                clearable
+                v-model="formData.createRoleIds" multiple placeholder="请选择有新增权限的角色"
+              >
+                <el-option
+                  v-for="(item, index) in roleList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="修改权限" prop="updateRoleIds">
+              <el-select
+                style="width: 100%"
+                filterable
+                clearable
+                v-model="formData.updateRoleIds" multiple placeholder="请选择有修改权限的角色"
+              >
+                <el-option
+                  v-for="(item, index) in roleList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="删除权限" prop="deleteRoleIds">
+              <el-select
+                style="width: 100%"
+                filterable
+                clearable
+                v-model="formData.deleteRoleIds" multiple placeholder="请选择有修改权限的角色"
+              >
+                <el-option
+                  v-for="(item, index) in roleList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import {updateArchivesRoleAndDict} from '@/api/company/archives/archivesRole'
+import {getRoleList} from '@/api/company/staff'
+
+export default {
+  name: 'ArchivesCatalogForm',
+  data(){
+    return{
+      dialogTitle: null,
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      formData: {
+        dictType: null,
+        dataId: null,
+        queryRoleIds: null,
+        updateRoleIds: null,
+        createRoleIds: null,
+        deleteRoleIds: null,
+        dictLabel: null,
+      },
+      formRules:{
+        queryRoleIds: [{required: true, message: "查看权限不能为空", trigger: "blur"}],
+        updateRoleIds: [{required: true, message: "修改权限不能为空", trigger: "blur"}],
+        deleteRoleIds: [{required: true, message: "删除权限不能为空", trigger: "blur"}],
+        createRoleIds: [{required: true, message: "新增权限不能为空", trigger: "blur"}],
+        dictLabel: [{required: true, message: "档案名称不能为空", trigger: "blur"}],
+      },
+      roleList: [],
+    }
+  },
+  methods:{
+    /** 打开弹窗 */
+    async open(data) {
+      this.dialogVisible = true
+      this.reset()
+      // 修改时，设置数据
+      if (data.dataId) {
+        this.formData = {
+          ...data,
+          queryRoleIds: data.queryRoleIds.split(",").map(item => parseInt(item)),
+          createRoleIds: data.createRoleIds.split(",").map(item => parseInt(item)),
+          updateRoleIds: data.updateRoleIds.split(",").map(item => parseInt(item)),
+          deleteRoleIds: data.deleteRoleIds.split(",").map(item => parseInt(item))
+        }
+      }
+      await this.listRoles()
+      this.formData.dictType = data.activeTab
+      this.dialogTitle = data.dataId ? '修改档案目录' : '新增档案目录'
+    },
+    async listRoles(){
+      const res = await getRoleList()
+      this.roleList = res.data
+    },
+    /** 提交按钮 */
+    async submitForm(){
+      // 校验主表
+      await this.$refs['formRef'].validate()
+      this.formLoading = true
+      try {
+        const data = {
+          ...this.formData,
+          queryRoleIds: this.formData.queryRoleIds.join(","),
+          updateRoleIds: this.formData.updateRoleIds.join(","),
+          deleteRoleIds: this.formData.deleteRoleIds.join(","),
+          createRoleIds: this.formData.createRoleIds.join(","),
+        }
+        console.log(data)
+        // 修改的提交
+        if (data.dataId) {
+          await updateArchivesRoleAndDict(data)
+          this.$modal.msgSuccess('修改成功')
+          this.dialogVisible = false
+          this.$emit('success')
+          return
+        }
+        // 添加的提交
+        await updateArchivesRoleAndDict(data)
+        this.$modal.msgSuccess('新增成功')
+        this.dialogVisible = false
+        this.$emit('success')
+      } finally {
+        this.formLoading = false
+      }
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        dictType: null,
+        dataId: null,
+        queryRoleIds: null,
+        updateRoleIds: null,
+        createRoleIds: null,
+        deleteRoleIds: null,
+        dictLabel: null,
+      }
+      this.resetForm('formRef')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>