diff --git a/Web/src/common/api/requests/index.js b/Web/src/common/api/requests/index.js
index 1e6bf3f..b9bb99e 100644
--- a/Web/src/common/api/requests/index.js
+++ b/Web/src/common/api/requests/index.js
@@ -12,7 +12,9 @@
  */
 
 import sys from './sys'
+import business from './business'
 
 export default {
-    ...sys
+    ...sys,
+    ...business
 }
\ No newline at end of file
diff --git a/Web/src/common/api/requests/sys/areaManage.js b/Web/src/common/api/requests/sys/areaManage.js
new file mode 100644
index 0000000..405b523
--- /dev/null
+++ b/Web/src/common/api/requests/sys/areaManage.js
@@ -0,0 +1,7 @@
+export default {
+    getAreaTree: ['/sysArea/tree', 'get'],
+    sysAreaPage: ['/sysArea/page', 'get'],
+    sysAreaAdd: ['/sysArea/add', 'post'],
+    sysAreaEdit: ['/sysArea/edit', 'post'],
+    sysAreaDelete:[ '/sysArea/delete','post'],
+}
\ No newline at end of file
diff --git a/Web/src/common/api/requests/sys/index.js b/Web/src/common/api/requests/sys/index.js
index 3b8a165..8aaab95 100644
--- a/Web/src/common/api/requests/sys/index.js
+++ b/Web/src/common/api/requests/sys/index.js
@@ -17,6 +17,7 @@ import smsManage from './smsManage'
 import tenantManage from './tenantManage'
 import timersManage from './timersManage'
 import userManage from './userManage'
+import areaManage from './areaManage'
 
 export default {
     ...appManage,
@@ -38,4 +39,5 @@ export default {
     ...tenantManage,
     ...timersManage,
     ...userManage,
+    ...areaManage,
 }
\ No newline at end of file
diff --git a/Web/src/pages/system/area/addForm.vue b/Web/src/pages/system/area/addForm.vue
new file mode 100644
index 0000000..d039d74
--- /dev/null
+++ b/Web/src/pages/system/area/addForm.vue
@@ -0,0 +1,71 @@
+<template>
+  <a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="新增区域编码">
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysAreaAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/area/editForm.vue b/Web/src/pages/system/area/editForm.vue
new file mode 100644
index 0000000..68f877b
--- /dev/null
+++ b/Web/src/pages/system/area/editForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="编辑区域编码">
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysAreaEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/area/form.vue b/Web/src/pages/system/area/form.vue
new file mode 100644
index 0000000..f9bd546
--- /dev/null
+++ b/Web/src/pages/system/area/form.vue
@@ -0,0 +1,133 @@
+<template>
+  <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">
+        <!-- 表单控件 -->
+        <a-form-model-item label="参数类型" prop="levelType">
+          <a-select placeholder="请选择参数类型" v-model="form.levelType" :disabled="editDisabled">
+            <a-select-option :key="i" :value="item.code" v-for="(item, i) in levelType">{{ item.value }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <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-input placeholder="请输入参数编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="显示编码" prop="showCode">
+          <a-input placeholder="请输入显示编码" v-model="form.showCode" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number :max="1000" :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="note">
+          <a-textarea v-model="form.note" :rows="4" placeholder="请输入备注"></a-textarea>
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {
+        levelType: [{ required: true, message: '请选择参数类型' }],
+        name: [{ required: true, message: '请输入参数名称' }],
+        code: [{ required: true, message: '请输入参数编码' }],
+        showCode: [{ required: true, message: '请输入显示编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+      /** 其他成员属性 */
+      levelType: [],
+      editDisabled: false,
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+        levelType: record.levelType.toString(),
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      this.levelType = await this.onLoadlevelTypeData();
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    onLoadlevelTypeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'dic_areacode_type' }).then(({ data }) => {
+        return data;
+      });
+    },
+    /** ... */
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/area/index.vue b/Web/src/pages/system/area/index.vue
new file mode 100644
index 0000000..61c2d03
--- /dev/null
+++ b/Web/src/pages/system/area/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="sysArea:page">
+        <div class="yo-query-bar">
+          <a-form-model :model="query" layout="inline">
+            <!-- 此处添加查询表单控件 -->
+            <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>
+              <a-button-group>
+                <a-button @click="onQuery" type="primary">查询</a-button>
+                <a-button @click="onResetQuery">重置</a-button>
+              </a-button-group>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+      </Auth>
+
+      <yo-table :columns="columns" :load-data="loadData" ref="table">
+        <Auth auth="sysArea:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
+        <!-- 添加操作控件 -->
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysArea:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysArea:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    AddForm,
+    EditForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '参数类型',
+          dataIndex: 'levelType',
+          scopedSlots: { customRender: 'levelType' },
+          sorter: false,
+        },
+        {
+          title: '参数名称',
+          dataIndex: 'name',
+          sorter: false,
+        },
+        {
+          title: '参数编号',
+          dataIndex: 'code',
+          sorter: false,
+        },
+        {
+          title: '显示编号',
+          dataIndex: 'showCode',
+          sorter: false,
+        },
+        {
+          title: '描述',
+          dataIndex: 'note',
+          sorter: false,
+        },
+        {
+          title: '序号',
+          dataIndex: 'sort',
+          sorter: false,
+        },
+      ],
+      codes: {
+        levelType: [],
+      },
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth({ sysArea: [['edit'], ['delete']] });
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysAreaPage({
+            ...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: 'dic_areacode_type' })]).then(([dic_areacode_type]) => {
+        this.codes.levelType = dic_areacode_type.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
+        /** !!此处必须修改调用的接口方法 */
+        .sysAreaDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file