diff --git a/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs b/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs
index a5c5bb5..9dbb16d 100644
--- a/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs
+++ b/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs
@@ -79,7 +79,7 @@ LEFT JOIN sys_area_code AA ON AA.AdCode = SUBSTR(CA.AdCode,1,6) WHERE HC.Address
         /// </summary>
         /// <param name="projectId"></param>
         /// <returns></returns>
-        [HttpGet("/houseCode/GetNextNoByFullNumber")]
+        [HttpGet("/houseCode/getNextNoByCode")]
         public async Task<dynamic> GetNextNoByFullNumber([Required] string projectId)
         {
             var areaCodeRep = Db.GetRepository<SysAreaCode>();
diff --git a/Api/Ewide.Core/Ewide.Core.xml b/Api/Ewide.Core/Ewide.Core.xml
index fcb21db..e7d4520 100644
--- a/Api/Ewide.Core/Ewide.Core.xml
+++ b/Api/Ewide.Core/Ewide.Core.xml
@@ -3989,6 +3989,36 @@
             子节点集合
             </summary>
         </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.Id">
+            <summary>
+            Id
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.ParentId">
+            <summary>
+            父Id
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.Title">
+            <summary>
+            名称
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.Value">
+            <summary>
+            值
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.Weight">
+            <summary>
+            排序，越小优先级越高
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.DictTreeNode.Children">
+            <summary>
+            子节点
+            </summary>
+        </member>
         <member name="T:Ewide.Core.Service.DictTypeInput">
             <summary>
             字典类型参数
@@ -4086,11 +4116,11 @@
             <param name="input"></param>
             <returns></returns>
         </member>
-        <member name="M:Ewide.Core.Service.SysDictDataService.DeleteDictDataBatch(System.Collections.Generic.List{System.String})">
+        <member name="M:Ewide.Core.Service.SysDictDataService.DeleteDictDataBatch(System.String[])">
             <summary>
             删除字典值 id数组传入
             </summary>
-            <param name="idList"></param>
+            <param name="ids"></param>
             <returns></returns>
         </member>
         <member name="M:Ewide.Core.Service.SysDictDataService.UpdateDictData(Ewide.Core.Service.UpdateDictDataInput)">
diff --git a/Api/Ewide.Core/Service/Dict/Dto/DictTreeOutput.cs b/Api/Ewide.Core/Service/Dict/Dto/DictTreeOutput.cs
index 67d1505..680cbe5 100644
--- a/Api/Ewide.Core/Service/Dict/Dto/DictTreeOutput.cs
+++ b/Api/Ewide.Core/Service/Dict/Dto/DictTreeOutput.cs
@@ -57,4 +57,52 @@ namespace Ewide.Core.Service
             Children = (List<DictTreeOutput>)children;
         }
     }
+
+    public class DictTreeNode : ITreeNode
+    {
+        /// <summary>
+        /// Id
+        /// </summary>
+        public string Id { get; set; }
+
+        /// <summary>
+        /// 父Id
+        /// </summary>
+        public string ParentId { get; set; }
+
+        /// <summary>
+        /// 名称
+        /// </summary>
+        public string Title { get; set; }
+
+        /// <summary>
+        /// 值
+        /// </summary>
+        public string Value { get; set; }
+
+        /// <summary>
+        /// 排序，越小优先级越高
+        /// </summary>
+        public int Weight { get; set; }
+
+        /// <summary>
+        /// 子节点
+        /// </summary>
+        public List<DictTreeNode> Children { get; set; } = new List<DictTreeNode>();
+
+        public string GetId()
+        {
+            return Id;
+        }
+
+        public string GetPid()
+        {
+            return ParentId;
+        }
+
+        public void SetChildren(IList children)
+        {
+            Children = (List<DictTreeNode>)children;
+        }
+    }
 }
diff --git a/Api/Ewide.Core/Service/Dict/Dto/DictTypeInput.cs b/Api/Ewide.Core/Service/Dict/Dto/DictTypeInput.cs
index 9920495..8fd349b 100644
--- a/Api/Ewide.Core/Service/Dict/Dto/DictTypeInput.cs
+++ b/Api/Ewide.Core/Service/Dict/Dto/DictTypeInput.cs
@@ -7,6 +7,7 @@ namespace Ewide.Core.Service
     /// </summary>
     public class DictTypeInput : PageInputBase
     {
+        public string Pid { get; set; }
         /// <summary>
         /// 名称
         /// </summary>
@@ -17,6 +18,8 @@ namespace Ewide.Core.Service
         /// </summary>
         public virtual string Code { get; set; }
 
+        public int Type { get; set; }
+
         /// <summary>
         /// 排序
         /// </summary>
diff --git a/Api/Ewide.Core/Service/Dict/ISysDictDataService.cs b/Api/Ewide.Core/Service/Dict/ISysDictDataService.cs
index b89fb9d..ba44595 100644
--- a/Api/Ewide.Core/Service/Dict/ISysDictDataService.cs
+++ b/Api/Ewide.Core/Service/Dict/ISysDictDataService.cs
@@ -14,6 +14,7 @@ namespace Ewide.Core.Service
         Task<dynamic> GetDictDataListByDictTypeId(string dictTypeId);
         Task<dynamic> GetDictDataListByDictTypeIds(SysDictType[] dictTypes);
         Task<dynamic> QueryDictDataPageList([FromQuery] DictDataInput input);
+        Task DeleteDictDataBatch(string[] Ids);
         Task UpdateDictData(UpdateDictDataInput input);
     }
 }
\ No newline at end of file
diff --git a/Api/Ewide.Core/Service/Dict/ISysDictTypeService.cs b/Api/Ewide.Core/Service/Dict/ISysDictTypeService.cs
index e0df868..e1bbf2c 100644
--- a/Api/Ewide.Core/Service/Dict/ISysDictTypeService.cs
+++ b/Api/Ewide.Core/Service/Dict/ISysDictTypeService.cs
@@ -9,7 +9,7 @@ namespace Ewide.Core.Service
         Task AddDictType(AddDictTypeInput input);
         Task ChangeDictTypeStatus(UpdateDictTypeInput input);
         Task DeleteDictType(DeleteDictTypeInput input);
-        Task<List<DictTreeOutput>> GetDictTree();
+        Task<List<DictTreeNode>> GetDictTree();
         Task<dynamic> GetDictType([FromQuery] QueryDictTypeInfoInput input);
         Task<dynamic> GetDictTypeDropDown([FromQuery] DropDownDictTypeInput input);
         Task<dynamic> GetDictTypeDropDowns([FromQuery] DropDownDictTypesInput input);
diff --git a/Api/Ewide.Core/Service/Dict/SysDictDataService.cs b/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
index 8e756ad..b301f7d 100644
--- a/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
+++ b/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
@@ -95,12 +95,12 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 删除字典值 id数组传入
         /// </summary>
-        /// <param name="idList"></param>
+        /// <param name="ids"></param>
         /// <returns></returns>
         [HttpPost("/sysDictData/deleteBatch")]
-        public async Task DeleteDictDataBatch(List<string> idList)
+        public async Task DeleteDictDataBatch([FromBody] string[] ids)
         {
-            var dictDataList = await _sysDictDataRep.Where(s => idList.Contains(s.Id)).ToListAsync();
+            var dictDataList = await _sysDictDataRep.Where(s => ids.Contains(s.Id)).ToListAsync();
             if (dictDataList.Count == 0) throw Oops.Oh(ErrorCode.D3004);
             dictDataList.ForEach(s =>
             {
diff --git a/Api/Ewide.Core/Service/Dict/SysDictTypeService.cs b/Api/Ewide.Core/Service/Dict/SysDictTypeService.cs
index f5ae5b1..0adc3af 100644
--- a/Api/Ewide.Core/Service/Dict/SysDictTypeService.cs
+++ b/Api/Ewide.Core/Service/Dict/SysDictTypeService.cs
@@ -40,9 +40,13 @@ namespace Ewide.Core.Service
         {
             var code = !string.IsNullOrEmpty(input.Code?.Trim());
             var name = !string.IsNullOrEmpty(input.Name?.Trim());
+            var pId = !string.IsNullOrEmpty(input.Pid?.Trim());
+            var type = input.Type > 0;
             var dictTypes = await _sysDictTypeRep.DetachedEntities
+                                  .Where(pId, u => EF.Functions.Like(u.Pids, $"%[{input.Pid.Trim()}]%") || u.Id == input.Pid.Trim())
                                   .Where((code, u => EF.Functions.Like(u.Code, $"%{input.Code.Trim()}%")),
                                          (name, u => EF.Functions.Like(u.Name, $"%{input.Name.Trim()}%")))
+                                  .Where(type, u => input.Type == 1 ? string.IsNullOrEmpty(u.Code) : !string.IsNullOrEmpty(u.Code))
                                   .Where(u => u.Status != CommonStatus.DELETED).OrderBy(u => u.Sort)
                                   //.ToPagedListAsync(input.PageNo, input.PageSize);
                                   .ToPageData(input);
@@ -176,18 +180,18 @@ namespace Ewide.Core.Service
         /// <returns></returns>
         [AllowAnonymous]
         [HttpGet("/sysDictType/tree")]
-        public async Task<List<DictTreeOutput>> GetDictTree()
+        public async Task<List<DictTreeNode>> GetDictTree()
         {
-            var DictTypeList = await _sysDictTypeRep.AsQueryable().ToListAsync();
-            return new TreeBuildUtil<DictTreeOutput>().DoTreeBuild(DictTypeList.Select(u => new DictTreeOutput
-            {
-                Name=u.Name,
-                Code = u.Code,
-                Pid=u.Pid,
-                Id=u.Id,
-                Remark=u.Remark,
-                Sort =u.Sort
-            }).OrderBy(s => s.Sort).ToList());
+            var DictTypeList = await _sysDictTypeRep.AsQueryable().Where(p => string.IsNullOrEmpty(p.Code)).ToListAsync();
+            return new TreeBuildUtil<DictTreeNode>().DoTreeBuild(DictTypeList
+                .OrderBy(s => s.Sort)
+                .Select(u => new DictTreeNode
+                {
+                    Title = u.Name,
+                    ParentId = u.Pid,
+                    Id = u.Id,
+                    Value = u.Id
+                }).ToList());
         }
         /// <summary>
         /// 创建Pids格式 
diff --git a/Web/package.json b/Web/package.json
index 1604acb..d5afe21 100644
--- a/Web/package.json
+++ b/Web/package.json
@@ -21,6 +21,8 @@
     "nprogress": "^0.2.0",
     "photoswipe": "^4.1.3",
     "swiper": "^6.5.0",
+    "monaco-editor": "^0.22.3",
+    "monaco-editor-webpack-plugin": "^3.0.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-color": "^2.8.1",
@@ -56,4 +58,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}
\ No newline at end of file
diff --git a/Web/src/common/api/requests/business/houseCode.js b/Web/src/common/api/requests/business/houseCode.js
index 87ae030..cc586a6 100644
--- a/Web/src/common/api/requests/business/houseCode.js
+++ b/Web/src/common/api/requests/business/houseCode.js
@@ -1,3 +1,5 @@
 export default {
-    houseCodeAdd: ['/houseCode/add', 'post']
+    houseCodeAdd: ['/houseCode/add', 'post'],
+    houseCodePage: ['/houseCode/page', 'post'],
+    houseCodeNo: '/houseCode/getNextNoByCode',
 }
\ No newline at end of file
diff --git a/Web/src/common/api/requests/sys/dictDataManage.js b/Web/src/common/api/requests/sys/dictDataManage.js
index 75cc250..0a60ca5 100644
--- a/Web/src/common/api/requests/sys/dictDataManage.js
+++ b/Web/src/common/api/requests/sys/dictDataManage.js
@@ -15,4 +15,8 @@ export default {
      * 删除系统字典值
      */
     sysDictDataDelete: ['/sysDictData/delete', 'post'],
+    /**
+     * 批量删除系统字典值
+     */
+    sysDictDataDeleteBatch: ['/sysDictData/deleteBatch', 'post'],
 }
\ No newline at end of file
diff --git a/Web/src/common/api/requests/sys/dictManage.js b/Web/src/common/api/requests/sys/dictManage.js
index c3c2c93..88e6ace 100644
--- a/Web/src/common/api/requests/sys/dictManage.js
+++ b/Web/src/common/api/requests/sys/dictManage.js
@@ -24,7 +24,7 @@ export default {
      */
     sysDictTypeDropDowns: ['/sysDictType/dropDowns', 'get'],
     /**
-     * 获取所有字典，启动时加入缓存使用
+     * 获取所有字典树
      */
     sysDictTypeTree: ['/sysDictType/tree', 'get'],
 }
\ No newline at end of file
diff --git a/Web/src/components/yoModalForm/index.js b/Web/src/components/yoModalForm/index.js
index f1a6cc8..90a1296 100644
--- a/Web/src/components/yoModalForm/index.js
+++ b/Web/src/components/yoModalForm/index.js
@@ -122,19 +122,23 @@ export default {
                 && this.body.onGetData
                 && this.body.onGetData()
                     .then((data) => {
-                        this.confirmLoading = true
-                        this.action
-                            && this.action(data)
+                        if (this.action) {
+                            this.confirmLoading = true
+                            this.action(data)
                                 .then(({ success }) => {
                                     if (success) {
-                                        this.$message.success(this.successMessage || '保存成功');
+                                        this.$message.success(this.successMessage || '保存成功')
                                         this.onClose();
-                                        this.$emit('ok');
+                                        this.$emit('ok', data)
                                     }
                                 })
                                 .finally(() => {
                                     this.confirmLoading = false
                                 })
+                        } else {
+                            this.onClose()
+                            this.$emit('ok', data)
+                        }
                     }).catch(() => { })
         }
     },
diff --git a/Web/src/components/yoTable/index.js b/Web/src/components/yoTable/index.js
index 5ee24f3..4c64ca2 100644
--- a/Web/src/components/yoTable/index.js
+++ b/Web/src/components/yoTable/index.js
@@ -174,6 +174,10 @@ export default {
         this.data.splice(this.data.indexOf(row), 1)
       }
     },
+
+    getData() {
+      return this.data
+    },
   },
 
   render() {
diff --git a/Web/src/pages/business/house/houseCode/form/index.vue b/Web/src/pages/business/house/houseCode/form/index.vue
index 99608b9..d7f02f7 100644
--- a/Web/src/pages/business/house/houseCode/form/index.vue
+++ b/Web/src/pages/business/house/houseCode/form/index.vue
@@ -101,7 +101,15 @@ export default {
         .then(({ success }) => {
           if (success) {
             this.$message.success('保存成功');
-            this.closeContentWindow();
+            this.$confirm({
+              content: '已添加成功，是否继续添加？',
+              onOk() {
+                console.log('OK');
+              },
+              onCancel: () => {
+                this.closeContentWindow();
+              },
+            });
           }
         })
         .finally(() => {
diff --git a/Web/src/pages/business/house/houseCode/form/part.vue b/Web/src/pages/business/house/houseCode/form/part.vue
index e326c96..d5749b7 100644
--- a/Web/src/pages/business/house/houseCode/form/part.vue
+++ b/Web/src/pages/business/house/houseCode/form/part.vue
@@ -46,6 +46,7 @@
                 :field-names="{ label: 'name', value: 'code', children: 'children' }"
                 :options="options.areaTree"
                 @change="onAreaCodeChange"
+                expand-trigger="hover"
                 placeholder="请选择所在区域"
                 v-model="form.areaCode"
               />
@@ -407,30 +408,40 @@ export default {
       this.getProjects();
     },
 
-    getProjects() {
+    async getProjects() {
       if (this.form.projectId) {
         this.form.projectId = undefined;
       }
       if (this.form.areaCode && this.form.areaCode.length === 4) {
         this.loading = true;
-        this.$api
+        const projects = await this.$api
           .houseProjectList({
             areaCode: this.form.areaCode[3],
             type: this.form.type,
           })
           .then(({ data }) => {
-            this.options.projects = data;
-          })
-          .finally(() => {
-            this.loading = false;
+            return data;
           });
+        this.options.projects = projects;
+        this.loading = false;
       }
     },
 
     /**
      * 切换项目
      */
-    onProjectChange() {},
+    async onProjectChange() {
+      this.loading = true;
+      const no = await this.$api
+        .houseCodeNo({
+          projectId: this.form.projectId,
+        })
+        .then(({ data }) => {
+          return data;
+        });
+      this.$set(this.form, 'no', no);
+      this.loading = false;
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseCode/index.vue b/Web/src/pages/business/house/houseCode/index.vue
index a2e4ffc..76abf34 100644
--- a/Web/src/pages/business/house/houseCode/index.vue
+++ b/Web/src/pages/business/house/houseCode/index.vue
@@ -1,10 +1,222 @@
 <template>
-  <div>
-    <a-button
-      @click="openContentWindow({
-        title: '编码表单',
-        path: 'business/house/houseCode/form',
-      });"
-    >打开表单</a-button>
-  </div>
-</template>
\ No newline at end of file
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="authCode:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+        </Auth>
+        <Auth auth="authCode:add" slot="operator">
+          <a-button
+            @click="openContentWindow({
+              title: '编码表单',
+              path: 'business/house/houseCode/form',
+            })"
+            icon="plus"
+          >新增编码</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
+        <!-- 添加操作控件 -->
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="authCode:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="authCode:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
+  </container>
+</template>
+<script>
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'houseCodePage',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
+  /* ... */
+};
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
+      query: {},
+
+      /* 表格字段 */
+      columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
+    };
+  },
+  created() {
+    /** 按需加载字典编码 */
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/* ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
+        ])
+        .then(([code1, code2]) => {
+          this.codes.code1 = code1.data;
+          this.codes.code2 = code2.data;
+          /* ... */
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/_index.vue b/Web/src/pages/system/dict/_index.vue
new file mode 100644
index 0000000..c044c35
--- /dev/null
+++ b/Web/src/pages/system/dict/_index.vue
@@ -0,0 +1,232 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysDictType:page" slot="query">
+          <a-form-model-item label="类型名称">
+            <a-input placeholder="请输入类型名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码">
+            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
+        <Auth auth="sysDictType:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+        <!-- 添加操作控件 -->
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysDictType:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysDictType:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+          </yo-table-actions>
+        </span>
+        <div slot="expandedRowRender" slot-scope="record">
+          <dict-data :codes="codes" :type="record" />
+        </div>
+      </yo-table>
+    </a-card>
+    <br />
+
+    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
+      <form-body />
+    </yo-modal-form>
+  </container>
+</template>
+<script>
+import DictData from './dictdata';
+
+import FormBody from './form';
+
+export default {
+  components: {
+    DictData,
+    FormBody,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '类型名称',
+          dataIndex: 'name',
+          sorter: true,
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+          sorter: true,
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort',
+          sorter: true,
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          width: 200,
+          sorter: true,
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          sorter: true,
+        },
+      ],
+      codes: {
+        commonStatus: [],
+      },
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypePage({
+            ...params,
+            ...this.query,
+          })
+          .then((res) => {
+            const data = res.data;
+            data.rows = data.rows.map(
+              (p) =>
+                (p = {
+                  ...p,
+                  data: [],
+                  query: {},
+                })
+            );
+            return data;
+          })
+      );
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
+        this.codes.commonStatus = commonStatus.data;
+      });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen({
+        record,
+      });
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysDictTypeDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/form.vue b/Web/src/pages/system/dict/dictdata/form.vue
new file mode 100644
index 0000000..0df599a
--- /dev/null
+++ b/Web/src/pages/system/dict/dictdata/form.vue
@@ -0,0 +1,140 @@
+<template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <!-- ... -->
+        <div :style="{ height: '300px' }" ref="code"></div>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+import * as monaco from 'monaco-editor';
+
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {
+        /* ... */
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
+    };
+  },
+
+  mounted() {
+    this.editor = monaco.editor.create(this.$refs['code'], {
+      language: 'json',
+      fontSize: 12,
+    });
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(params) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+
+      this.editor.setValue(this.form.extCode);
+
+      setTimeout(() => {
+        this.editor.getAction(['editor.action.formatDocument'])._run();
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+            try {
+              const code = JSON.parse(this.editor.getValue());
+              if (code.constructor === Object) {
+                record.extCode = JSON.stringify(code);
+              } else {
+                throw 0;
+              }
+              reslove(record);
+            } catch {
+              this.$message.error('错误的JSON格式');
+              reject();
+            }
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/index.vue b/Web/src/pages/system/dict/dictdata/index.vue
index 6b2b7bb..481d636 100644
--- a/Web/src/pages/system/dict/dictdata/index.vue
+++ b/Web/src/pages/system/dict/dictdata/index.vue
@@ -4,6 +4,7 @@
       :bordered="false"
       :columns="columns"
       :load-data="loadData"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (e) => selectedRowKeys = e  }"
       @query="onQuery"
       @resetQuery="onResetQuery"
       ref="table"
@@ -18,6 +19,16 @@
           <a-input placeholder="请输入字典值" v-model="query.code" />
         </a-form-model-item>
       </Auth>
+      <Auth auth="sysDictData:delete" slot="operator">
+        <a-popconfirm
+          :disabled="!selectedRowKeys.length"
+          @confirm="onDeleteBatch"
+          placement="bottomLeft"
+          title="是否确认删除"
+        >
+          <a-button :disabled="!selectedRowKeys.length">批量删除</a-button>
+        </a-popconfirm>
+      </Auth>
       <Auth auth="sysDictData:add" slot="footer">
         <a-button @click="onAddRow" block icon="plus">新增字典数据</a-button>
       </Auth>
@@ -29,7 +40,7 @@
         <a-input placeholder="请输入字典值" v-model="record.code" />
       </Auth>
       <Auth auth="sysDictData:edit" slot="extCode" slot-scope="text, record">
-        <a-input placeholder="请输入扩展值" v-model="record.extCode" />
+        <a @click="onOpen('ext-code-form', record)">编辑</a>
       </Auth>
       <Auth auth="sysDictData:edit" slot="sort" slot-scope="text, record">
         <a-input-number
@@ -68,20 +79,31 @@
         </yo-table-actions>
       </span>
     </yo-table>
+
+    <yo-modal-form :title="'编辑'" @ok="onSaveExtCode" ref="ext-code-form">
+      <form-body />
+    </yo-modal-form>
   </a-card>
 </template>
 <style scoped>
-.ant-card >>> .ant-table-footer {
-  background-color: transparent;
+.ant-card>>>.ant-table-footer {
   border-width: 1px 0 0 !important;
+  background-color: transparent;
 }
-.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-thead > tr > th:last-child,
-.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-tbody > tr > td:last-child {
+.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-thead>tr>th:last-child,
+.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-tbody>tr>td:last-child {
   border-right-width: 0 !important;
 }
+
 </style>
 <script>
+import FormBody from './form';
+
 export default {
+  components: {
+    FormBody,
+  },
+
   props: {
     type: {
       type: Object,
@@ -114,9 +136,9 @@ export default {
         {
           title: '扩展值',
           dataIndex: 'extCode',
-          sorter: true,
           scopedSlots: { customRender: 'extCode' },
-          width: '15%',
+          width: 100,
+          align: 'center',
         },
         {
           title: '排序',
@@ -139,6 +161,8 @@ export default {
           width: 80,
         },
       ],
+
+      selectedRowKeys: [],
     };
   },
   created() {
@@ -260,6 +284,13 @@ export default {
         });
     },
 
+    onDeleteBatch() {
+      this.$refs.table.onLoading();
+      this.$api.sysDictDataDeleteBatch(this.selectedRowKeys).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+
     onAddRow() {
       this.$refs.table.onAddRow({
         value: '',
@@ -305,6 +336,11 @@ export default {
         });
       }
     },
+
+    onSaveExtCode(record) {
+      const data = this.$refs.table.getData().find((p) => p.id === record.id);
+      data.extCode = record.extCode;
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/form.vue b/Web/src/pages/system/dict/form.vue
index a56ed6c..82c3c75 100644
--- a/Web/src/pages/system/dict/form.vue
+++ b/Web/src/pages/system/dict/form.vue
@@ -7,7 +7,22 @@
         <a-form-model-item label="类型名称" prop="name">
           <a-input placeholder="请输入类型名称" v-model="form.name" />
         </a-form-model-item>
-        <a-form-model-item label="唯一编码" prop="code">
+        <a-form-model-item label="类型" prop="type">
+          <a-radio-group v-model="form.type">
+            <a-radio-button :value="1">目录</a-radio-button>
+            <a-radio-button :value="2">字典类型</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item label="父结点" prop="pid">
+          <a-tree-select
+            :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
+            :tree-data="dicTree"
+            placeholder="请选择父结点"
+            tree-default-expand-all
+            v-model="form.pid"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="唯一编码" prop="code" v-if="form.type == 2">
           <a-input placeholder="请输入唯一编码" v-model="form.code" />
         </a-form-model-item>
         <a-form-model-item label="排序" prop="sort">
@@ -21,16 +36,23 @@
   </a-form-model>
 </template>
 <script>
+import { EMPTY_ID } from '@/util/global';
+
+const defaultForm = {
+  type: 1,
+  sort: 100,
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
-        sort: 100,
-      },
+      form: {},
       /** 验证格式 */
       rules: {
         name: [{ required: true, message: '请输入类型名称' }],
+        type: [{ required: true, message: '请选择需要添加的数据类型' }],
+        pid: [{ required: true, message: '请选择父结点' }],
         code: [{ required: true, message: '请输入唯一编码' }],
       },
 
@@ -39,6 +61,7 @@ export default {
 
       /** 其他成员属性 */
       /** ... */
+      dicTree: [],
     };
   },
 
@@ -48,11 +71,16 @@ export default {
      * 在打开编辑页时允许填充数据
      */
     onFillData(params) {
+      let type = defaultForm.type;
+      if (params.record && params.record.code) type = 2;
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        pid: params.pid,
         ...params.record,
         /** 在此处添加默认数据转换 */
         /** ... */
+        type,
       });
     },
 
@@ -106,12 +134,27 @@ export default {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
       /** ...BEGIN */
+      await this.onLoadDicTreeData();
       /** ...END */
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
     /** ... */
+    onLoadDicTreeData() {
+      return this.$api.sysDictTypeTree().then(({ data }) => {
+        this.dicTree = [
+          {
+            id: EMPTY_ID,
+            parentId: undefined,
+            title: '顶级',
+            value: EMPTY_ID,
+            pid: undefined,
+            children: data,
+          },
+        ];
+      });
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/index.vue b/Web/src/pages/system/dict/index.vue
index c044c35..67d1571 100644
--- a/Web/src/pages/system/dict/index.vue
+++ b/Web/src/pages/system/dict/index.vue
@@ -1,76 +1,134 @@
 <template>
-  <container>
-    <br />
-    <a-card :bordered="false">
-      <yo-table
-        :columns="columns"
-        :load-data="loadData"
-        @query="onQuery"
-        @resetQuery="onResetQuery"
-        ref="table"
-      >
-        <Auth auth="sysDictType:page" slot="query">
-          <a-form-model-item label="类型名称">
-            <a-input placeholder="请输入类型名称" v-model="query.name" />
-          </a-form-model-item>
-          <a-form-model-item label="唯一编码">
-            <a-input placeholder="请输入唯一编码" v-model="query.code" />
-          </a-form-model-item>
-        </Auth>
-        <Auth auth="sysDictType:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
-        </Auth>
-        <!-- 格式化字段内容 -->
-        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
-        <!-- 添加操作控件 -->
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <Auth auth="sysDictType:edit">
-              <a @click="onOpen('edit-form', record)">编辑</a>
-            </Auth>
-            <Auth auth="sysDictType:delete">
-              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                <a>删除</a>
-              </a-popconfirm>
-            </Auth>
-            <!-- 可在此处添加其他操作控件 -->
-          </yo-table-actions>
-        </span>
-        <div slot="expandedRowRender" slot-scope="record">
-          <dict-data :codes="codes" :type="record" />
-        </div>
-      </yo-table>
-    </a-card>
-    <br />
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <container>
+      <a-card :bordered="false">
+        <yo-table
+          :columns="columns"
+          :load-data="loadData"
+          @query="onQuery"
+          @resetQuery="onResetQuery"
+          ref="table"
+        >
+          <Auth auth="authCode:page" slot="query">
+            <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
+            <a-form-model-item label="类型名称">
+              <a-input placeholder="请输入类型名称" v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="唯一编码">
+              <a-input placeholder="请输入唯一编码" v-model="query.code" />
+            </a-form-model-item>
+            <a-form-model-item label="类型">
+              <a-radio-group v-model="query.type">
+                <a-radio-button :value="1">目录</a-radio-button>
+                <a-radio-button :value="2">字典类型</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </Auth>
+          <Auth auth="authCode:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增目录/字典类型</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <span slot="code" slot-scope="text">
+            <span>{{ text ? '字典类型' : '目录' }}</span>
+          </span>
+          <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+          <!-- 添加操作控件 -->
+          <span slot="action" slot-scope="text, record">
+            <yo-table-actions>
+              <Auth auth="authCode:edit">
+                <a @click="onOpen('edit-form', record)">编辑</a>
+              </Auth>
+              <Auth auth="authCode:delete">
+                <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                  <a>删除</a>
+                </a-popconfirm>
+              </Auth>
+              <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
+            </yo-table-actions>
+          </span>
 
-    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
+          <div slot="expandedRowRender" slot-scope="record">
+            <dict-data :codes="codes" :type="record" v-if="record.code" />
+            <span class="text-normal" v-else>不可在目录中添加字典数据</span>
+          </div>
+        </yo-table>
+      </a-card>
+    </container>
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
       <form-body />
     </yo-modal-form>
 
-    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
-  </container>
+  </yo-tree-layout>
 </template>
 <script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
+import FormBody from './form';
+
 import DictData from './dictdata';
 
-import FormBody from './form';
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'sysDictTypeTree',
+  page: 'sysDictTypePage',
+  add: 'sysDictTypeAdd',
+  edit: 'sysDictTypeEdit',
+  delete: 'sysDictTypeDelete',
+  /* ... */
+};
 
 export default {
   components: {
-    DictData,
+    YoTreeLayout,
     FormBody,
+    DictData,
   },
+
   data() {
     return {
-      query: {},
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
+      query: {
+        type: 2,
+      },
+
+      /* 表格字段 */
       columns: [
         {
-          title: '类型名称',
+          title: '字典名称',
           dataIndex: 'name',
           sorter: true,
         },
+        {
+          title: '类型',
+          key: 'type',
+          dataIndex: 'code',
+          sorter: true,
+          scopedSlots: { customRender: 'code' },
+        },
         {
           title: '唯一编码',
           dataIndex: 'code',
@@ -94,16 +152,19 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
       codes: {
         commonStatus: [],
       },
     };
   },
+
   created() {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -113,32 +174,42 @@ export default {
       });
     }
   },
+
   methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([id]) {
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      this.query = {
+        pid: id,
+        type: this.query.type,
+      };
+      this.onQuery();
+    },
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return (
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictTypePage({
-            ...params,
-            ...this.query,
-          })
-          .then((res) => {
-            const data = res.data;
-            data.rows = data.rows.map(
-              (p) =>
-                (p = {
-                  ...p,
-                  data: [],
-                  query: {},
-                })
-            );
-            return data;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -150,12 +221,19 @@ export default {
     },
 
     /**
-     * 有查询功能时的必要方法
-     * 重置查询条件
+     * 必要方法
+     * 重新列表数据
      */
     onResetQuery() {
-      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+        if (p === 'type') {
+          this.query.type = 2;
+        }
+      });
       this.onQuery();
     },
 
@@ -165,6 +243,7 @@ export default {
      */
     onReloadData() {
       this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
     },
 
     /**
@@ -173,9 +252,15 @@ export default {
      * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
-        this.codes.commonStatus = commonStatus.data;
-      });
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
+          /* ... */
+        ])
+        .then(([common_status]) => {
+          this.codes.commonStatus = common_status.data;
+          /* ... */
+        });
     },
 
     /**
@@ -191,12 +276,15 @@ export default {
     },
 
     /**
-     * 必要方法
+     * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
       this.$refs[formName].onOpen({
         record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
       });
     },
 
@@ -217,9 +305,7 @@ export default {
      */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .sysDictTypeDelete(record)
+      this.$api[api.delete](record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
         })
diff --git a/Web/src/views/main/_layout/content.vue b/Web/src/views/main/_layout/content.vue
index 304648e..295783b 100644
--- a/Web/src/views/main/_layout/content.vue
+++ b/Web/src/views/main/_layout/content.vue
@@ -117,14 +117,14 @@ export default {
       const i = import(`@/pages${pane.path}`);
       pane.component = () => i;
       pane.loaded = false;
-      i.then(() => {
-        pane.loaded = true;
-        NProgress.done();
-      }).catch(() => {
-        pane.component = () => import('@/views/error/404');
-        pane.loaded = true;
-        NProgress.done();
-      });
+      i.then(() => {})
+        .catch(() => {
+          pane.component = () => import('@/views/error/404');
+        })
+        .finally(() => {
+          pane.loaded = true;
+          NProgress.done();
+        });
     },
     onClose(targetKey, action) {
       if (action === 'remove') {
diff --git a/Web/vue.config.js b/Web/vue.config.js
index 820d9da..1e3652f 100644
--- a/Web/vue.config.js
+++ b/Web/vue.config.js
@@ -1,3 +1,5 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
+
 module.exports = {
     devServer: {
         open: true,
@@ -19,4 +21,9 @@ module.exports = {
             }
         }
     },
+    configureWebpack: {
+        plugins: [
+            new MonacoWebpackPlugin()
+        ]
+    }
 }
\ No newline at end of file
diff --git a/Web/yarn.lock b/Web/yarn.lock
index eb91bce..8b74055 100644
--- a/Web/yarn.lock
+++ b/Web/yarn.lock
@@ -5773,6 +5773,18 @@ moment@^2.21.0:
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
 
+monaco-editor-webpack-plugin@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.nlark.com/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-3.1.0.tgz#972efc47a91b3bf3bd977885684a3180eb8f341b"
+  integrity sha1-ly78R6kbO/O9l3iFaEoxgOuPNBs=
+  dependencies:
+    loader-utils "^2.0.0"
+
+monaco-editor@^0.22.3:
+  version "0.22.3"
+  resolved "https://registry.nlark.com/monaco-editor/download/monaco-editor-0.22.3.tgz#69b42451d3116c6c08d9b8e052007ff891fd85d7"
+  integrity sha1-abQkUdMRbGwI2bjgUgB/+JH9hdc=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"