diff --git a/Api/Ewide.Core/SeedData/SysDictDataSeedData.cs b/Api/Ewide.Core/SeedData/SysDictDataSeedData.cs
index 50211b1..9d51631 100644
--- a/Api/Ewide.Core/SeedData/SysDictDataSeedData.cs
+++ b/Api/Ewide.Core/SeedData/SysDictDataSeedData.cs
@@ -94,6 +94,8 @@ namespace Ewide.Core
                 new SysDictData{Id="375362c8-d694-40d9-8c55-07669e472460", TypeId="a2068ed1-62a6-463c-b720-06111d994079", Value="本部门数据", Code="3", Sort=100, Remark="本部门数据", Status=0 },
                 new SysDictData{Id="70afe4c1-3495-483a-bdd0-3d4ea45136b3", TypeId="a2068ed1-62a6-463c-b720-06111d994079", Value="仅本人数据", Code="4", Sort=100, Remark="仅本人数据", Status=0 },
                 new SysDictData{Id="6f395e69-8add-40ae-a378-0881d64a4413", TypeId="a2068ed1-62a6-463c-b720-06111d994079", Value="自定义数据", Code="5", Sort=100, Remark="自定义数据", Status=0 },
+                new SysDictData{Id="2285a101-70b3-4492-a5d7-2605448d99b3", TypeId="a2068ed1-62a6-463c-b720-06111d994079", Value="本部门所在区域及以下区域", Code="6", Sort=100, Remark="本部门所在区域及以下区域", Status=0 },
+                new SysDictData{Id="0b471624-f9a2-4f0a-9ff5-9cb12414fec0", TypeId="a2068ed1-62a6-463c-b720-06111d994079", Value="仅本部门所在区域数据", Code="7", Sort=100, Remark="仅本部门所在区域数据", Status=0 },
                 new SysDictData{Id="a819d549-6107-43a2-99d2-377cf0a5681a", TypeId="688f9a69-ec95-46f4-87bb-e19e3cc5c7fc", Value="app", Code="1", Sort=100, Remark="app", Status=0 },
                 new SysDictData{Id="b1e821b3-4e7b-4e60-a67f-a40d327ab6d6", TypeId="688f9a69-ec95-46f4-87bb-e19e3cc5c7fc", Value="pc", Code="2", Sort=100, Remark="pc", Status=0 },
                 new SysDictData{Id="2bce5da0-b386-4412-935d-d081b7cf4391", TypeId="688f9a69-ec95-46f4-87bb-e19e3cc5c7fc", Value="其他", Code="3", Sort=100, Remark="其他", Status=0 },
diff --git a/Api/Ewide.Core/Service/Dict/SysDictDataService.cs b/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
index 0d7f1ba..aec83b6 100644
--- a/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
+++ b/Api/Ewide.Core/Service/Dict/SysDictDataService.cs
@@ -145,7 +145,8 @@ namespace Ewide.Core.Service
                                                          .Select(u => new
                                                          {
                                                              u.Code,
-                                                             u.Value
+                                                             u.Value,
+                                                             u.Remark
                                                          }).ToListAsync();
         }
 
diff --git a/Web/src/App.vue b/Web/src/App.vue
index bd456df..d298c5d 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -1,6 +1,12 @@
 <template>
   <div id="app">
     <a-config-provider :locale="zh_CN">
+      <template #renderEmpty>
+        <div class="text-center pt-md">
+          <a-icon class="h3 mb-md" type="smile" />
+          <p>暂无数据</p>
+        </div>
+      </template>
       <router-view />
     </a-config-provider>
   </div>
@@ -17,4 +23,4 @@ export default {
     };
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/Web/src/assets/style/frame/dark.less b/Web/src/assets/style/frame/dark.less
index 267c598..988c16a 100644
--- a/Web/src/assets/style/frame/dark.less
+++ b/Web/src/assets/style/frame/dark.less
@@ -1,4 +1,5 @@
 @import (reference) '~@/assets/style/main.less';
+@layout-header-background: #1c2127;
 .dark {
   .main(@nav-background: @layout-header-background;
   @nav-box-shadow-color: fade(@black, 25%);
diff --git a/Web/src/assets/style/lib/cascader.less b/Web/src/assets/style/lib/cascader.less
index 17054de..5f3e6bb 100644
--- a/Web/src/assets/style/lib/cascader.less
+++ b/Web/src/assets/style/lib/cascader.less
@@ -1,4 +1,6 @@
 @import (reference) '~@/assets/style/extend.less';
 .ant-cascader-picker-arrow {
-  transform: scaleY(.75);
+  svg {
+    transform: scaleY(.75);
+  }
 }
diff --git a/Web/src/assets/style/lib/form.less b/Web/src/assets/style/lib/form.less
index 50b5296..99e5ed4 100644
--- a/Web/src/assets/style/lib/form.less
+++ b/Web/src/assets/style/lib/form.less
@@ -40,6 +40,7 @@
     background-color: @white;
 
     @box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
+    @control-background: lighten(@black, 95%) !important;
     &::before,
     &::after {
       content: none;
@@ -60,7 +61,7 @@
 
       color: lighten(@black, 10%);
       border: 0;
-      background-color: lighten(@black, 95%) !important;
+      background-color: @control-background;
     }
     .ant-mentions {
       textarea {
@@ -103,6 +104,9 @@
         z-index: 0;
       }
     }
+    .ant-cascader-picker-clear {
+      background-color: @control-background;
+    }
   }
   .ant-form-item-label {
     overflow: hidden;
diff --git a/Web/src/components/yoTable/index.js b/Web/src/components/yoTable/index.js
index e0ce949..9b80819 100644
--- a/Web/src/components/yoTable/index.js
+++ b/Web/src/components/yoTable/index.js
@@ -114,6 +114,7 @@ export default {
           this.data = this.onClearChildren(res)
           this.pagination = false
         }
+      }).finally(() => {
         this.onLoaded()
       })
     },
diff --git a/Web/src/components/yoTreeLayout/index.js b/Web/src/components/yoTreeLayout/index.js
index e50a0d8..9078cc8 100644
--- a/Web/src/components/yoTreeLayout/index.js
+++ b/Web/src/components/yoTreeLayout/index.js
@@ -1,4 +1,5 @@
 import Swiper from 'swiper'
+import { Empty } from 'ant-design-vue'
 
 let timer, swiper
 
@@ -107,7 +108,7 @@ export default {
         this.$nextTick(() => {
           this.onUpdateSwiper()
         })
-
+      }).finally(() => {
         this.loading = false
       })
     },
@@ -256,7 +257,17 @@ export default {
               <div class="swiper-slide">
                 <a-spin style={{ height: '100%' }} spinning={this.loading}>
                   <a-icon slot="indicator" type="loading" spin />
-                  <a-tree {...{ props, on, scopedSlots }} />
+                  {
+                    !this.loading && !this.list.length ?
+                      <a-empty description={false} class="ant-list-empty-text">
+                        <template slot="image">
+                          <a-icon class="h3 mt-xl mb-md" type="smile" />
+                          <p>暂无数据</p>
+                        </template>
+                      </a-empty>
+                      :
+                      <a-tree {...{ props, on, scopedSlots }} />
+                  }
                 </a-spin>
               </div>
             </div>
diff --git a/Web/src/pages/system/dict/dictdata/form.vue b/Web/src/pages/system/dict/dictdata/form.vue
index 4168210..930abc9 100644
--- a/Web/src/pages/system/dict/dictdata/form.vue
+++ b/Web/src/pages/system/dict/dictdata/form.vue
@@ -4,11 +4,11 @@
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
         <!-- 表单控件 -->
-        <a-form-model-item label="字典值" prop="value">
-          <a-input placeholder="请输入字典值" v-model="form.value" />
+        <a-form-model-item label="文本" prop="value">
+          <a-input placeholder="请输入文本" v-model="form.value" />
         </a-form-model-item>
-        <a-form-model-item label="唯一编码" prop="code">
-          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        <a-form-model-item label="字典值" prop="code">
+          <a-input placeholder="请输入字典值" v-model="form.code" />
         </a-form-model-item>
         <a-form-model-item label="排序" prop="sort">
           <a-input-number class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
diff --git a/Web/src/pages/system/dict/dictdata/index.vue b/Web/src/pages/system/dict/dictdata/index.vue
index 4e39ef9..42f8efd 100644
--- a/Web/src/pages/system/dict/dictdata/index.vue
+++ b/Web/src/pages/system/dict/dictdata/index.vue
@@ -4,11 +4,11 @@
       <div class="yo-query-bar">
         <a-form-model :model="query" layout="inline">
           <!-- 此处添加查询表单控件 -->
-          <a-form-model-item label="字典值">
-            <a-input placeholder="请输入字典值" v-model="query.value" />
+          <a-form-model-item label="文本">
+            <a-input placeholder="请输入文本" v-model="query.value" />
           </a-form-model-item>
-          <a-form-model-item label="唯一编码">
-            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          <a-form-model-item label="字典值">
+            <a-input placeholder="请输入字典值" v-model="query.code" />
           </a-form-model-item>
           <a-form-model-item>
             <a-button-group>
@@ -71,12 +71,12 @@ export default {
       },
       columns: [
         {
-          title: '字典值',
+          title: '文本',
           dataIndex: 'value',
           sorter: true,
         },
         {
-          title: '唯一编码',
+          title: '字典值',
           dataIndex: 'code',
           sorter: true,
         },
diff --git a/Web/src/pages/system/role/orgForm.vue b/Web/src/pages/system/role/dataForm.vue
similarity index 66%
rename from Web/src/pages/system/role/orgForm.vue
rename to Web/src/pages/system/role/dataForm.vue
index 08480ec..4d26a6e 100644
--- a/Web/src/pages/system/role/orgForm.vue
+++ b/Web/src/pages/system/role/dataForm.vue
@@ -1,170 +1,205 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    :width="600"
-    @cancel="onCancel"
-    @ok="onOk"
-    title="授权数据"
-  >
-    <a-spin :spinning="loading">
-      <a-icon slot="indicator" spin type="loading" />
-      <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-        <div class="yo-form-group">
-          <a-form-model-item has-feedback label="授权范围" prop="dataScopeType">
-            <a-select placeholder="请选择授权范围" v-model="form.dataScopeType">
-              <a-select-option
-                :key="item.code"
-                :value="item.code"
-                @click="onChange(item.code)"
-                v-for="item in dataScopeTypeData"
-              >{{ item.value }}</a-select-option>
-            </a-select>
-          </a-form-model-item>
-          <a-form-model-item label="选择机构" v-show="orgTreeShow">
-            <a-tree-select
-              :show-checked-strategy="SHOW_PARENT"
-              :tree-data="orgTreeData"
-              placeholder="请选择机构"
-              tree-checkable
-              v-model="checkedKeys"
-            />
-          </a-form-model-item>
-        </div>
-      </a-form-model>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-import { TreeSelect } from 'ant-design-vue';
-const SHOW_PARENT = TreeSelect.SHOW_PARENT;
-
-export default {
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-      loading: true,
-
-      record: {},
-
-      form: {
-        dataScopeType: '',
-      },
-      rules: {
-        dataScopeType: [{ required: true, message: '请选择授权范围' }],
-      },
-
-      SHOW_PARENT,
-      orgTreeData: [],
-
-      checkedKeys: [],
-      dataScopeTypeData: [],
-      orgTreeShow: false,
-      replaceFields: {
-        key: 'id',
-      },
-    };
-  },
-
-  methods: {
-    async onOpen(record) {
-      this.visible = true;
-      this.record = record;
-
-      this.loading = true;
-
-      await this.onLoadCodes();
-      this.form.dataScopeType = record.dataScopeType.toString();
-
-      await this.onChange(record.dataScopeType);
-
-      this.loading = false;
-    },
-
-    /**
-     * 加载字典数据时的必要方法
-     */
-    onLoadCodes() {
-      return this.$api
-        .$queue([this.$api.sysDictTypeDropDownAwait({ code: 'data_scope_type' })])
-        .then(([dataScopeType]) => {
-          this.dataScopeTypeData = dataScopeType.data;
-        });
-    },
-
-    async onChange(value) {
-      if (value == '5') {
-        this.loading = true;
-        this.orgTreeShow = true;
-        // 获取机构树
-        this.orgTreeData = await this.onLoadTreeData();
-        // 已关联数据
-        this.checkedKeys = await this.onLoadRoleOwn();
-
-        this.loading = false;
-      } else {
-        this.orgTreeShow = false;
-        // 清理已选中机构
-        this.checkedKeys = [];
-      }
-    },
-
-    /**
-     * 获取机构树
-     */
-    onLoadTreeData() {
-      return this.$api.getOrgTree().then(({ data }) => {
-        return data;
-      });
-    },
-
-    /**
-     * 此角色已有数据列表
-     */
-    onLoadRoleOwn() {
-      return this.$api.sysRoleOwnData({ id: this.record.id }).then(({ data }) => {
-        return data;
-      });
-    },
-
-    onOk() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysRoleGrantData({
-              id: this.record.id,
-              grantOrgIdList: this.checkedKeys,
-              dataScopeType: this.form.dataScopeType,
-            })
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('授权成功');
-                this.$emit('ok');
-                this.onCancel();
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-    onCancel() {
-      this.visible = false;
-
-      setTimeout(() => {
-        this.record = {};
-        this.checkedKeys = [];
-        this.dataScopeTypeData = [];
-        this.orgTreeShow = false;
-        this.form = {};
-
-        this.$refs.form.resetFields();
-      }, 300);
-    },
-  },
-};
-</script>
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="600"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="授权数据"
+  >
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+        <div class="yo-form-group">
+          <a-form-model-item label="授权范围" prop="dataScopeType">
+            <a-select placeholder="请选择授权范围" v-model="form.dataScopeType">
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                @click="onChange(item.code)"
+                v-for="item in dataScopeTypeData"
+              >{{ item.value }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="选择机构" v-show="isDefine">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="orgTreeData"
+              placeholder="请选择机构"
+              tree-checkable
+              v-model="orgCheckedKeys"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="选择区域" v-show="isDefine">
+            <a-tree-select
+              :replace-fields="{ title: 'name', value: 'code', children: 'children' }"
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="areaTreeData"
+              placeholder="请选择所属区域"
+              tree-checkable
+              v-model="areaCheckedKeys"
+            />
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      loading: true,
+
+      record: {},
+
+      form: {
+        dataScopeType: '',
+      },
+      rules: {
+        dataScopeType: [{ required: true, message: '请选择授权范围' }],
+      },
+
+      SHOW_PARENT,
+      orgTreeData: [],
+      orgCheckedKeys: [],
+
+      areaTreeData: [],
+      areaCheckedKeys: [],
+
+      dataScopeTypeData: [],
+      isDefine: false,
+      replaceFields: {
+        key: 'id',
+      },
+    };
+  },
+
+  methods: {
+    async onOpen(record) {
+      this.visible = true;
+      this.record = record;
+
+      this.loading = true;
+
+      await this.onLoadCodes();
+      this.form.dataScopeType = record.dataScopeType.toString();
+
+      await this.onChange(record.dataScopeType);
+
+      this.loading = false;
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      return this.$api
+        .$queue([this.$api.sysDictTypeDropDownAwait({ code: 'data_scope_type' })])
+        .then(([dataScopeType]) => {
+          this.dataScopeTypeData = dataScopeType.data;
+        });
+    },
+
+    async onChange(value) {
+      if (value == '5') {
+        this.loading = true;
+        this.isDefine = true;
+        // 获取机构树
+        this.orgTreeData = await this.onLoadOrgTreeData();
+        // 获取区域
+        this.areaTreeData = await this.onLoadAreaTreeData();
+        // 已关联数据
+        this.orgCheckedKeys = await this.onLoadRoleOwn();
+
+        this.loading = false;
+      } else {
+        this.isDefine = false;
+        // 清理已选中机构
+        this.orgCheckedKeys = [];
+      }
+    },
+
+    /**
+     * 获取机构树
+     */
+    onLoadOrgTreeData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadAreaTreeData() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        // 为了防止出现空的层级选择,删除所有空children节点
+        const clearChiildren = (data) => {
+          data.forEach((item) => {
+            if (item.children && item.children.length) {
+              clearChiildren(item.children);
+            } else {
+              delete item.children;
+            }
+          });
+        };
+        clearChiildren(data);
+        return data;
+      });
+    },
+
+    /**
+     * 此角色已有数据列表
+     */
+    onLoadRoleOwn() {
+      return this.$api.sysRoleOwnData({ id: this.record.id }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    onOk() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysRoleGrantData({
+              id: this.record.id,
+              grantOrgIdList: this.orgCheckedKeys,
+              grantAreaCodeList: this.areaCheckedKeys,
+              dataScopeType: this.form.dataScopeType,
+            })
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('授权成功');
+                this.$emit('ok');
+                this.onCancel();
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.record = {};
+        this.orgCheckedKeys = [];
+        this.areaCheckedKeys = [];
+        this.dataScopeTypeData = [];
+        this.isDefine = false;
+        this.form = {};
+
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/Web/src/pages/system/role/index.vue b/Web/src/pages/system/role/index.vue
index 2827ee2..2057f1a 100644
--- a/Web/src/pages/system/role/index.vue
+++ b/Web/src/pages/system/role/index.vue
@@ -50,7 +50,7 @@
                   </Auth>
                   <Auth auth="sysRole:grantData">
                     <a-menu-item>
-                      <a @click="onOpen('org-form', record)">授权数据</a>
+                      <a @click="onOpen('data-form', record)">授权数据</a>
                     </a-menu-item>
                   </Auth>
                 </a-menu>
@@ -64,20 +64,20 @@
     <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
     <menu-form @ok="onReloadData" ref="menu-form" />
-    <org-form @ok="onReloadData" ref="org-form" />
+    <data-form @ok="onReloadData" ref="data-form" />
   </container>
 </template>
 <script>
 import AddForm from './addForm';
-import editForm from './editForm';
-import menuForm from './menuForm';
-import orgForm from './orgForm';
+import EditForm from './editForm';
+import MenuForm from './menuForm';
+import DataForm from './dataForm';
 export default {
   components: {
     AddForm,
-    editForm,
-    menuForm,
-    orgForm,
+    EditForm,
+    MenuForm,
+    DataForm,
   },
   data() {
     return {