diff --git a/src/api/base/area.js b/src/api/base/area.js
new file mode 100644
index 00000000..63cd3f7c
--- /dev/null
+++ b/src/api/base/area.js
@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+
+// export function listData(query) {
+//   return request({
+//     url: '/system/dict/data/list',
+//     method: 'get',
+//     params: query
+//   })
+// } 
+
+// export function getDicts(dictType) {
+//   return request({
+//     url: '/system/dict/data/type/' + dictType,
+//     method: 'get'
+//   })
+// }
+
+// 系统区域权限树
+export function systemAreaTreeApi(data) {
+  return request({
+    url: '/smart-canteen/api/v2/alloc/area/system-auth/tree',
+    method: 'post',
+    headers: {
+        "merchant-id":"378915229716713472",
+    },
+    data: data
+  })
+}
+// 查询区域列表
+export function getAreaListApi(data) {
+    return request({
+      url: '/smart-canteen/api/v2/alloc/area/page',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+}
+// 根据区域id，查询区域名称
+export function getAreaNameApi(data) {
+    return request({
+      url: '/smart-canteen/api/v2/alloc/area/get-area-name',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+}
+// 查询区域(食堂,档口,餐线)编号
+export function getAreaNumApi(data) {
+    return request({
+      url: 'smart-canteen/api/v2/alloc/canteen/get-canteen-num',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+}
+// 新增区域
+export function addAreaApi(data) {
+    return request({
+      url: 'smart-canteen/api/v2/alloc/area/add',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+} 
+//修改区域
+export function updateAreaApi(data) {
+    return request({
+      url: 'smart-canteen/api/v2/alloc/area/update',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+}
+//删除区域
+export function removeAreaApi(data) {
+    return request({
+      url: 'smart-canteen/api/v2/alloc/area/remove',
+      method: 'post',
+      headers: {
+          "merchant-id":"378915229716713472",
+      },
+      data: data
+    })
+}
diff --git a/src/views/base/area/index.vue b/src/views/base/area/index.vue
index e69de29b..6b101515 100644
--- a/src/views/base/area/index.vue
+++ b/src/views/base/area/index.vue
@@ -0,0 +1,648 @@
+<template>
+    <!-- 类型管理 -->
+    <div class="app-container" id="toolsType">
+      <el-row :gutter="20">
+        <!--树数据-->
+        <el-col :span="5" :xs="24">
+          <div class="head-container">
+            <el-input
+              v-model="areaName"
+              placeholder="请输入类型名称"
+              clearable
+              maxlength="50"
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+            />
+          </div>
+          <div class="head-container" style>
+            <el-tree
+              style="height: 700px; overflow: scroll"
+              :data="treeOptions"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              node-key="id"
+              :default-expand-all="false"
+              highlight-current
+              @node-click="handleNodeClick"
+            >
+              <span
+                class="custom-tree-node"
+                slot-scope="{ node, data }"
+                @mousemove="onMousemove(data)"
+                @mouseleave="onMouseleave()"
+              >
+                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
+                  node.label.slice(0, 10) + "..."
+                }}</span>
+                <span v-else>{{ node.label }}</span>
+  
+                <span class="btn-items" v-if="isMousemoveId === data.id">
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-plus"
+                    @click.stop="() => appendTreeNode(data)"
+                  >
+                  </el-button>
+                  <!-- <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-edit-outline"
+                    style="color: #67c23a"
+                    v-if="data.id !== 0"
+                    @click.stop="() => editTreeNode(data)"
+                  >
+                  </el-button> -->
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-delete"
+                    style="color: #f56c6c"
+                    v-if="data.parentId != '-1'"
+                    @click.stop="() => removeTreeNode(data)"
+                  >
+                  </el-button>
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </el-col>
+        <!--用户数据-->
+        <el-col :span="19" :xs="24">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
+          >
+            <el-form-item label="区域" prop="keyword">
+              <el-input
+                v-model="queryParams.keyword"
+                placeholder="请输入关键字"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+  
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >查询</el-button
+              >
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form> 
+  
+          <el-table v-loading="loading" :data="typeList" border>
+            <el-table-column label="序号" align="center" width="80" type="index">
+                  <template slot-scope="scope">
+                      <span>{{(queryParams.pageNum - 1) * 10 + scope.$index + 1}}</span>
+                  </template>
+            </el-table-column>
+            <el-table-column label="区域编号" align="center" key="areaNum" prop="areaNum" show-overflow-tooltip/>
+            <el-table-column label="区域名称" align="center" key="areaName" prop="areaName" show-overflow-tooltip/>
+            <el-table-column label="区域描述" align="center" key="areaDescribe" prop="areaDescribe" show-overflow-tooltip/>
+            <el-table-column label="上级区域" align="center" key="superAreaName" prop="superAreaName" show-overflow-tooltip/>
+            <el-table-column label="负责人" align="center" key="director" prop="director" show-overflow-tooltip/>
+            <el-table-column label="电话" align="center" key="contactTel" prop="contactTel" show-overflow-tooltip/>  
+            <el-table-column label="操作" align="center" width="180">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)" 
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+  
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+  
+      <!-- 添加或修改用户配置对话框 -->
+      <el-dialog
+        :title="title+'-区域'"
+        :visible.sync="open"
+        width="1000px"
+        append-to-body
+        :close-on-click-modal="false"
+      >
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="区域编号" prop="areaNum">
+                <el-input
+                  v-model="form.areaNum"
+                  type="text" disabled
+                  placeholder="请输入区域编号"
+                  maxlength="30"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="区域名称" prop="areaName">
+                <el-input
+                  v-model="form.areaName"
+                  type="text"
+                  placeholder="请输入区域名称"
+                  maxlength="30" 
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="区域描述" prop="areaDescribe">
+                <el-input
+                  v-model="form.areaDescribe"
+                  type="text"
+                  placeholder="请输入区域描述"
+                  maxlength="30"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="上级区域" prop="superAreaName">
+                <el-input
+                  v-model="form.superAreaName"
+                  type="text" disabled
+                  placeholder="请输入上级区域"
+                  maxlength="30" 
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="负责人" prop="director">
+                <el-input
+                  v-model="form.director"
+                  type="text"
+                  placeholder="请输入负责人"
+                  maxlength="30"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系方式" prop="contactTel">
+                <el-input
+                  v-model="form.contactTel"
+                  type="text"
+                  placeholder="请输入联系方式"
+                  maxlength="30" 
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <template>
+            <el-button
+              v-if="this.title == '新增' || this.title == '修改'"
+              type="primary"
+              @click="submitForm"
+              >确 定</el-button
+            >
+          </template>
+  
+          <el-button @click="cancel">取 消</el-button> 
+        </div>
+      </el-dialog> 
+    </div>
+  </template>
+  
+  <script>
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import { systemAreaTreeApi,getAreaListApi,getAreaNameApi,getAreaNumApi,addAreaApi,updateAreaApi,removeAreaApi } from "@/api/base/area";
+//   import { imgUpLoad } from "@/api/system/upload";
+  
+  export default {
+    name: "ToolsType",
+    components: { Treeselect },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 树选项
+        treeOptions: undefined,
+        treeTemp: [],
+        isMousemoveId: null,
+        defaultProps: {
+          children: "children",
+          label: "treeName",
+        },
+        areaName:"",
+        areaId:"",
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10, 
+        },
+        // 总条数
+        total: 0, 
+        //列表数据
+        typeList: undefined,
+        // 是否显示弹出层
+        open: false,
+        // 弹出层标题
+        title: "",
+        // 表单参数
+        form: {
+          areaName:""
+        },
+        // 表单校验
+        rules: {
+          areaName: [
+            {
+              required: true,
+              message: "区域名称不能为空",
+              trigger: "blur",
+            },
+          ],
+        },  
+        parentId: undefined,  
+      
+      };
+    },
+    watch: {
+      // 根据名称筛选部门树
+      areaName(val) {
+        this.$refs.tree.filter(val);
+      },
+    },
+    created() {
+      this.getTreeData(); 
+    },
+    methods: {
+      // 筛选节点 - 左侧树
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.treeName.indexOf(value) !== -1;
+      },
+      /** 查询新增页面-上级类型下拉树结构 */
+      getTreeData() {
+        systemAreaTreeApi({}).then((response) => {
+          this.treeOptions = response;
+          console.log(this.treeOptions)
+          if(this.treeOptions&&this.treeOptions.length>0){
+            this.areaId = this.treeOptions[0].id
+            this.getList();
+          }else{
+            this.areaId = ""
+            this.getList();
+          }
+        });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() { 
+        this.resetForm("queryForm"); 
+        this.queryParams.pageNum = 1;
+        this.queryParams.pageSize = 10; 
+        this.$refs.tree.setCurrentKey(null);
+        this.handleQuery();
+      },
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        let params= {
+          "areaName":this.areaName,
+          "areaId":this.areaId,
+          "size": this.queryParams.pageSize,
+          "current": this.queryParams.pageNum
+        }
+        getAreaListApi(params).then((response) => {
+          this.typeList = response.records;
+          this.total = Number(response.total);
+          this.loading = false;
+        });
+      }, 
+      // 节点单击事件 - 左侧树
+      async handleNodeClick(data, node) {
+        console.log(data)
+        this.areaId = data.id;
+        this.handleQuery();
+      },
+
+      // 节点单击事件 - 左侧树
+      async getAreaName(data) {
+        let params= {
+          "areaId":data.id
+        }
+        const res = await getAreaNameApi(params);
+        this.$set(this.form,"superAreaName",res.msg) 
+      },
+      // 节点单击事件 - 左侧树
+      async getAreaNum(data) {
+        let params= {
+          "superId":data.id||""
+        }
+        if(data.parentId=="-1"){
+          params.canteenTreeType=-1
+        }else{
+          params.canteenTreeType=0
+        }
+        const res = await getAreaNumApi(params);
+        this.$set(this.form,"areaNum",res.data)
+      },
+
+
+      /* 树节点增加 */
+      appendTreeNode(data) { 
+        console.log("dataAdd", data);
+        this.reset();
+        if(data.parentId=="-1"){
+          this.$set(this.form,"superAreaName",data.treeName) 
+          this.getAreaNum(data)
+        }else{
+          this.getAreaName(data)
+          this.getAreaNum(data)
+        }
+        
+        this.$set(this.form,"areaName","")
+        this.$set(this.form,"superId",data.id) 
+        this.open = true;
+        this.title = "新增";
+      },
+      /* 树节点删除 */
+      removeTreeNode(data) { 
+        console.log(data, "删除时的数据源--"); 
+        this.$modal
+          .confirm("是否确认删除数据项？")
+          .then(function () {
+            return removeAreaApi({"areaId":data.id});
+          })
+          .then(() => {
+            this.$modal.msgSuccess("删除成功");
+            this.getList();
+            this.getTreeData();
+          })
+          .catch(() => {});
+      },
+      /* 树节点修改 */
+      editTreeNode(data) {
+        console.log("dataEdit", data);
+      },
+      onMousemove(data) {
+        this.isMousemoveId = data.id;
+      },
+      onMouseleave() {
+        this.isMousemoveId = null;
+      }, 
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {};
+        this.resetForm("form");
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        console.log(row)
+        this.$set(this.form,"areaDescribe",row.areaDescribe)
+        this.$set(this.form,"areaId",row.areaId)
+        this.$set(this.form,"areaName",row.areaName)
+        this.$set(this.form,"areaNum",row.areaNum)
+        this.$set(this.form,"contactTel",row.contactTel)
+        this.$set(this.form,"director",row.director)
+        this.$set(this.form,"superAreaName",row.superAreaName)
+        this.$set(this.form,"superId",row.superId) 
+        this.open = true;
+        this.title = "修改";
+      },
+      /** 提交按钮 */
+      submitForm: function () {
+        console.log(this.form, "提交参数---");
+        this.$refs["form"].validate((valid) => {
+          if (valid) {  
+            if (this.form.areaId != undefined) { 
+                    updateAreaApi(this.form).then((response) => {
+                        this.$modal.msgSuccess("修改成功");
+                        this.open = false;
+                        this.getList();
+                        this.getTreeData();
+                    });  
+            }else {
+                    addAreaApi(this.form).then((response) => {
+                        this.$modal.msgSuccess("新增成功");
+                        this.open = false;
+                        this.getList();
+                        this.getTreeData();
+                    });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) { 
+        this.$modal
+          .confirm("是否确认删除数据项？")
+          .then(function () {
+            return removeAreaApi({"areaId":row.areaId});
+          })
+          .then(() => {
+            this.$modal.msgSuccess("删除成功");
+            this.getList();
+            this.getTreeData();
+          })
+          .catch(() => {});
+      }, 
+      
+       
+      
+      getParentName(list, id) {
+        try {
+          list.forEach((e) => {
+            if (e.id == id) {
+              this.form.label = e.label;
+              throw new Error();
+            } else {
+              if (e.children && e.children.length > 0) {
+                this.getParentName(e.children, id);
+              }
+            }
+          });
+        } catch (error) {}
+      },
+  
+      
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  ::v-deep.el-table .fixed-width .el-button--mini {
+    width: 60px !important;
+    margin-bottom: 10px;
+  }
+  
+  ::v-deep .btn-items .el-button + .el-button {
+    margin-left: 6px;
+  }
+  .btn-items {
+    margin-left: 4px;
+    .el-button--text {
+      font-size: 16px;
+    }
+  }
+  ::v-deep .el-tree .el-tree-node__expand-icon.expanded {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  ::v-deep .el-tree .el-icon-caret-right:before {
+    content: "\e783";
+    font-size: 16px;
+  }
+  ::v-deep
+    .el-tree
+    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+    content: "\e781";
+    font-size: 16px;
+    color: #1890ff;
+  }
+  
+  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
+    color: #1890ff !important;
+  }
+  ::v-deep .el-tree-node__expand-icon.is-leaf {
+    color: transparent !important;
+  }
+  
+  ::v-deep
+    .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: #8decf1;
+  }
+  
+  ::v-deep .el-dialog {
+    // 表单标签文字样式
+    .el-form-item__label {
+      font-size: 14px;
+      color: #606266;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  
+    // 输入框文字样式
+    .el-input__inner {
+      font-size: 14px;
+      color: #303133;
+  
+      &::placeholder {
+        font-size: 13px;
+        color: #c0c4cc;
+      }
+    }
+  
+    // 单位文字样式
+    span {
+      font-size: 14px;
+      // color: #606266;
+      margin-left: 8px;
+    }
+  
+    // 下拉选择框文字样式
+    .el-select {
+      .el-input__inner {
+        font-size: 14px;
+        color: #303133;
+      }
+    }
+  
+    // 只读输入框样式
+    .el-input.is-disabled .el-input__inner {
+      background-color: #f5f7fa;
+      border-color: #e4e7ed;
+      color: #606266;
+      cursor: not-allowed;
+    }
+  }
+  
+  // 表格内文字样式
+  ::v-deep .el-table {
+    font-size: 14px;
+  
+    th {
+      font-weight: 500;
+      color: #303133;
+    }
+  
+    td {
+      color: #606266;
+    }
+  }
+  
+  // 按钮文字样式
+  ::v-deep .el-button {
+    font-size: 14px;
+  
+    &--text {
+      font-size: 13px;
+    }
+  }
+  
+  // 树节点文字样式
+  ::v-deep .el-tree-node__label {
+    font-size: 14px;
+    color: #606266;
+  }
+  
+  // 搜索框文字样式
+  ::v-deep .el-input--small {
+    .el-input__inner {
+      font-size: 13px;
+  
+      &::placeholder {
+        font-size: 13px;
+        color: #c0c4cc;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file