区域组织管理

.env.development

@@ -5,7 +5,7 @@ VUE_APP_TITLE = 幼儿园体质检测管理系统
 ENV = 'development'
 
 # 若依管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.16.64:8080'
+VUE_APP_BASE_API = 'http://192.168.16.62:8080'
 #'/dev-api'
 
 # 路由懒加载

src/api/system/area.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询区域管理列表
+export function listArea(query) {
+    return request({
+        url: '/system/area/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询区域管理详细
+export function getArea(id) {
+    return request({
+        url: '/system/area/' + id,
+        method: 'get'
+    })
+}
+
+// 新增区域管理
+export function addArea(data) {
+    return request({
+        url: '/system/area/add',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改区域管理
+export function edit(data) {
+    return request({
+        url: '/system/area/edit',
+        method: 'post',
+        data: data
+    })
+}
+
+// 删除区域管理
+export function delArea(id) {
+    return request({
+        url: '/system/area/' + id,
+        method: 'delete'
+    })
+}

src/api/system/info.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询区域管理列表
+export function list(query) {
+    return request({
+        url: '/system/info/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询区域管理详细
+export function getinfo(id) {
+    return request({
+        url: '/system/info/' + id,
+        method: 'get'
+    })
+}
+
+// 新增区域管理
+export function add(data) {
+    return request({
+        url: '/system/info/add',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改区域管理
+export function edit(data) {
+    return request({
+        url: '/system/info/edit',
+        method: 'post',
+        data: data
+    })
+}
+
+// 删除区域管理
+export function delinfo(id) {
+    return request({
+        url: '/system/info/' + id,
+        method: 'delete'
+    })
+}

src/api/system/user.js

@@ -3,125 +3,125 @@ import { parseStrEmpty } from "@/utils/xinyilu";
 
 // 查询用户列表
 export function listUser(query) {
-  return request({
+    return request({
-    url: '/system/user/list',
+        url: '/system/user/list',
-    method: 'get',
+        method: 'get',
-    params: query
+        params: query
-  })
+    })
 }
 
 // 查询用户详细
 export function getUser(userId) {
-  return request({
+    return request({
-    url: '/system/user/' + parseStrEmpty(userId),
+        url: '/system/user/' + parseStrEmpty(userId),
-    method: 'get'
+        method: 'get'
-  })
+    })
 }
 
 // 新增用户
 export function addUser(data) {
-  return request({
+    return request({
-    url: '/system/user',
+        url: '/system/user',
-    method: 'post',
+        method: 'post',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 修改用户
 export function updateUser(data) {
-  return request({
+    return request({
-    url: '/system/user',
+        url: '/system/user',
-    method: 'put',
+        method: 'put',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 删除用户
 export function delUser(userId) {
-  return request({
+    return request({
-    url: '/system/user/' + userId,
+        url: '/system/user/' + userId,
-    method: 'delete'
+        method: 'delete'
-  })
+    })
 }
 
 // 用户密码重置
 export function resetUserPwd(userId, password) {
-  const data = {
+    const data = {
-    userId,
+        userId,
-    password
+        password
-  }
+    }
-  return request({
+    return request({
-    url: '/system/user/resetPwd',
+        url: '/system/user/resetPwd',
-    method: 'put',
+        method: 'put',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 用户状态修改
 export function changeUserStatus(userId, status) {
-  const data = {
+    const data = {
-    userId,
+        userId,
-    status
+        status
-  }
+    }
-  return request({
+    return request({
-    url: '/system/user/changeStatus',
+        url: '/system/user/changeStatus',
-    method: 'put',
+        method: 'put',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 查询用户个人信息
 export function getUserProfile() {
-  return request({
+    return request({
-    url: '/system/user/profile',
+        url: '/system/user/profile',
-    method: 'get'
+        method: 'get'
-  })
+    })
 }
 
 // 修改用户个人信息
 export function updateUserProfile(data) {
-  return request({
+    return request({
-    url: '/system/user/profile',
+        url: '/system/user/profile',
-    method: 'put',
+        method: 'put',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 用户密码重置
 export function updateUserPwd(oldPassword, newPassword) {
-  const data = {
+    const data = {
-    oldPassword,
+        oldPassword,
-    newPassword
+        newPassword
-  }
+    }
-  return request({
+    return request({
-    url: '/system/user/profile/updatePwd',
+        url: '/system/user/profile/updatePwd',
-    method: 'put',
+        method: 'put',
-    params: data
+        params: data
-  })
+    })
 }
 
 // 用户头像上传
 export function uploadAvatar(data) {
-  return request({
+    return request({
-    url: '/system/user/profile/avatar',
+        url: '/system/user/profile/avatar',
-    method: 'post',
+        method: 'post',
-    data: data
+        data: data
-  })
+    })
 }
 
 // 查询授权角色
 export function getAuthRole(userId) {
-  return request({
+    return request({
-    url: '/system/user/authRole/' + userId,
+        url: '/system/user/authRole/' + userId,
-    method: 'get'
+        method: 'get'
-  })
+    })
 }
 
 // 保存授权角色
 export function updateAuthRole(data) {
-  return request({
+    return request({
-    url: '/system/user/authRole',
+        url: '/system/user/authRole',
-    method: 'put',
+        method: 'put',
-    params: data
+        params: data
-  })
+    })
-}
+}

src/layout/components/Navbar.vue

@@ -10,11 +10,11 @@
         <search id="header-search" class="right-menu-item" />
 
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="xinyilu-git" class="right-menu-item hover-effect" />
+          <!-- <ruo-yi-git id="xinyilu-git" class="right-menu-item hover-effect" /> -->
         </el-tooltip>
 
         <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="xinyilu-doc" class="right-menu-item hover-effect" />
+          <!-- <ruo-yi-doc id="xinyilu-doc" class="right-menu-item hover-effect" /> -->
         </el-tooltip>
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />

src/utils/request.js

@@ -13,54 +13,54 @@ export let isRelogin = { show: false };
 console.log(process.env.VUE_APP_BASE_API);
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-// 创建axios实例
+    // 创建axios实例
 const service = axios.create({
-  // axios中请求配置有baseURL选项，表示请求URL公共部分
+    // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.VUE_APP_BASE_API,//'http://192.168.16.64:8080',
+    baseURL: process.env.VUE_APP_BASE_API, //'http://192.168.16.64:8080',
-  // 超时
+    // 超时
-  timeout: 10000
+    timeout: 10000
 })
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // 是否需要设置 token
+    // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
+    const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
+        // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
+    if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
+    // get请求映射params参数
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+    if (config.method === 'get' && config.params) {
-      cache.session.setJSON('sessionObj', requestObj)
+        let url = config.url + '?' + tansParams(config.params);
-    } else {
+        url = url.slice(0, -1);
-      const s_url = sessionObj.url;                  // 请求地址
+        config.params = {};
-      const s_data = sessionObj.data;                // 请求数据
+        config.url = url;
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
-      } else {
-        cache.session.setJSON('sessionObj', requestObj)
-      }
     }
-  }
+    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-  return config
+        const requestObj = {
+            url: config.url,
+            data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+            time: new Date().getTime()
+        }
+        const sessionObj = cache.session.getJSON('sessionObj')
+        if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+            cache.session.setJSON('sessionObj', requestObj)
+        } else {
+            const s_url = sessionObj.url; // 请求地址
+            const s_data = sessionObj.data; // 请求数据
+            const s_time = sessionObj.time; // 请求时间
+            const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+            if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+                const message = '数据正在处理，请勿重复提交';
+                console.warn(`[${s_url}]: ` + message)
+                return Promise.reject(new Error(message))
+            } else {
+                cache.session.setJSON('sessionObj', requestObj)
+            }
+        }
+    }
+    return config
 }, error => {
     console.log(error)
     Promise.reject(error)
@@ -68,92 +68,89 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
+        // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
+        const code = res.data.code || 200;
-    // 获取错误信息
+        // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+        const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
+            // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
+        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-      return res.data
+            return res.data
-    }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
         }
-      ).then(() => {
+        if (code === 401) {
-        isRelogin.show = false;
+            if (!isRelogin.show) {
-        store.dispatch('LogOut').then(() => {
+                isRelogin.show = true;
-          location.href = '/index';
+                MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+                    confirmButtonText: '重新登录',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    isRelogin.show = false;
+                    store.dispatch('LogOut').then(() => {
+                        location.href = '/index';
+                    })
+                }).catch(() => {
+                    isRelogin.show = false;
+                });
+            }
+            return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+        } else if (code === 500) {
+            Message({
+                message: msg,
+                type: 'error'
+            })
+            return Promise.reject(new Error(msg))
+        } else if (code !== 200) {
+            Notification.error({
+                title: msg
+            })
+            return Promise.reject('error')
+        } else {
+            return res.data
+        }
+    },
+    error => {
+        console.log('err' + error)
+        let { message } = error;
+        if (message == "Network Error") {
+            message = "后端接口连接异常";
+        } else if (message.includes("timeout")) {
+            message = "系统接口请求超时";
+        } else if (message.includes("Request failed with status code")) {
+            message = "系统接口" + message.substr(message.length - 3) + "异常";
+        }
+        Message({
+            message: message,
+            type: 'error',
+            duration: 5 * 1000
         })
-      }).catch(() => {
+        return Promise.reject(error)
-        isRelogin.show = false;
-      });
     }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      Notification.error({
-        title: msg
-      })
-      return Promise.reject('error')
-    } else {
-      return res.data
-    }
-  },
-  error => {
-    console.log('err' + error)
-    let { message } = error;
-    if (message == "Network Error") {
-      message = "后端接口连接异常";
-    }
-    else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    }
-    else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
-    }
-    Message({
-      message: message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
 )
 
 // 通用下载方法
 export function download(url, params, filename) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
+    return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
+        transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob'
+        responseType: 'blob'
-  }).then(async (data) => {
+    }).then(async(data) => {
-    const isLogin = await blobValidate(data);
+        const isLogin = await blobValidate(data);
-    if (isLogin) {
+        if (isLogin) {
-      const blob = new Blob([data])
+            const blob = new Blob([data])
-      saveAs(blob, filename)
+            saveAs(blob, filename)
-    } else {
+        } else {
-      const resText = await data.text();
+            const resText = await data.text();
-      const rspObj = JSON.parse(resText);
+            const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
+            Message.error(errMsg);
-    }
+        }
-    downloadLoadingInstance.close();
+        downloadLoadingInstance.close();
-  }).catch((r) => {
+    }).catch((r) => {
-    console.error(r)
+        console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
+        Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
+        downloadLoadingInstance.close();
-  })
+    })
 }
 
-export default service
+export default service

src/views/system/area/index.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="区域名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入区域名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="区域编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入区域编码"
+          clearable
+          @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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:area:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+          >展开/折叠</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:area:export']"
+          >导出</el-button
+        >
+      </el-col> -->
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="areaList"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="id"
+      border
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column label="区域名称" align="center" prop="name" />
+      <el-table-column label="区域编码" align="center" prop="code" />
+      <el-table-column label="创建人" align="center" prop="createBy" />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:area:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleAdd2(scope.row)"
+            v-hasPermi="['system:area:add']"
+            >新增</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:area:remove']"
+            v-if="scope.row.id != 1"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改区域管理对话框 -->
+
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="所属上级区域" prop="parentId" v-if="form.id != 1">
+          <treeselect
+            :normalizer="normalizer"
+            :options="areaList"
+            placeholder="请选择所属上级区域"
+            v-model="form.parentId"
+          />
+        </el-form-item>
+        <el-form-item label="区域名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入区域名称" />
+        </el-form-item>
+        <el-form-item label="区域编码" prop="code">
+          <el-input v-model.number="form.code" placeholder="请输入区域编码" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model.number="form.sort" placeholder="请输入排序" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listArea,
+  getArea,
+  delArea,
+  addArea,
+  edit,
+} from "@/api/system/area.js";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  components: { Treeselect },
+  name: "areas",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 区域管理表格数据
+      areaList: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        name: "",
+        code: "",
+      },
+      // 表单参数
+      form: {},
+      form2: {
+        parentId: "",
+        name: "",
+        code: "",
+        sort: "",
+        id: "",
+      },
+      // 表单校验
+
+      rules: {
+        sort: [
+          { required: true, message: "排序不能为空" },
+          { type: "number", message: "排序必须为数字值", trigger: "blur" },
+        ],
+        code: [
+          { required: true, message: "区域编码不能为空" },
+          { type: "number", message: "区域编码必须为数字值", trigger: "blur" },
+        ],
+        parentId: [
+          { required: true, message: "请选择所属上级区域", trigger: "blur" },
+        ],
+        name: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      // console.log(node);
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        parentId: node.id,
+        label: node.name,
+        children: node.children,
+      };
+    },
+    /** 查询区域管理列表 */
+    getList() {
+      this.loading = true;
+      // console.log(this.queryParams);
+      listArea(this.queryParams).then((response) => {
+        // this.areaList = response.data.forEach((e) => {
+        //   e.code = Number(e.code);
+        // });
+        this.areaList = this.handleTree(response.data);
+        console.log(this.areaList);
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        parentId: undefined,
+        name: "",
+        code: undefined,
+        sort: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 项目新增按钮操作 */
+    handleAdd2(row) {
+      console.log(row);
+      this.reset();
+      this.form.parentId = row.id;
+      console.log(this.form);
+      this.open = true;
+      this.title = "添加区域管理";
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      listArea(this.queryParams).then((response) => {
+        this.areaList = this.handleTree(response.data);
+        // console.log(this.areaList);
+      });
+      this.open = true;
+      this.title = "添加区域管理";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.form2.id = row.id;
+      // console.log(this.form2);
+      const id = row.id || this.ids;
+      getArea(id).then((response) => {
+        response.data.code = Number(response.data.code);
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改区域管理";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      console.log(this.form);
+      this.form2.name = this.form.name;
+      this.form2.code = this.form.code;
+      this.form2.sort = this.form.sort;
+      this.form2.parentId = this.form.parentId;
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            edit(this.form2).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addArea(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm('是否确认删除区域名称为"' + row.name + '"的数据项？')
+        .then(function () {
+          return delArea(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/area/export",
+        {
+          ...this.queryParams,
+        },
+        `area_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>

src/views/system/dept/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -10,7 +16,11 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="部门状态"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             :key="dict.value"
@@ -20,8 +30,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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>
 
@@ -34,7 +52,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dept:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -43,9 +62,13 @@
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
-        >展开/折叠</el-button>
+          >展开/折叠</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table
@@ -54,21 +77,41 @@
       :data="deptList"
       row-key="deptId"
       :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+      <el-table-column
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+        prop="deptName"
+        label="部门名称"
+        width="260"
+      ></el-table-column>
+      <el-table-column
+        prop="orderNum"
+        label="排序"
+        width="200"
+      ></el-table-column>
       <el-table-column prop="status" label="状态" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="200"
+      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -76,14 +119,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dept:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:dept:add']"
-          >新增</el-button>
+            >新增</el-button
+          >
           <el-button
             v-if="scope.row.parentId != 0"
             size="mini"
@@ -91,7 +136,8 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dept:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -102,7 +148,12 @@
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
-              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+              <treeselect
+                placeholder="选择上级部门"
+                v-model="form.parentId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -114,26 +165,42 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+              <el-input-number
+                v-model="form.orderNum"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="负责人" prop="leader">
-              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
+              <el-input
+                v-model="form.leader"
+                placeholder="请输入负责人"
+                maxlength="20"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系电话" prop="phone">
-              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入联系电话"
+                maxlength="11"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+              <el-input
+                v-model="form.email"
+                placeholder="请输入邮箱"
+                maxlength="50"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -143,7 +210,8 @@
                   v-for="dict in dict.type.sys_normal_disable"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -158,13 +226,20 @@
 </template>
 
 <script>
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
+import {
+  listDept,
+  getDept,
+  delDept,
+  addDept,
+  updateDept,
+  listDeptExcludeChild,
+} from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Dept",
-  dicts: ['sys_normal_disable'],
+  dicts: ["sys_normal_disable"],
   components: { Treeselect },
   data() {
     return {
@@ -187,36 +262,36 @@ export default {
       // 查询参数
       queryParams: {
         deptName: undefined,
-        status: undefined
+        status: undefined,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         parentId: [
-          { required: true, message: "上级部门不能为空", trigger: "blur" }
+          { required: true, message: "上级部门不能为空", trigger: "blur" },
         ],
         deptName: [
-          { required: true, message: "部门名称不能为空", trigger: "blur" }
+          { required: true, message: "部门名称不能为空", trigger: "blur" },
         ],
         orderNum: [
-          { required: true, message: "显示排序不能为空", trigger: "blur" }
+          { required: true, message: "显示排序不能为空", trigger: "blur" },
         ],
         email: [
           {
             type: "email",
             message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
+            trigger: ["blur", "change"],
-          }
+          },
         ],
         phone: [
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的手机号码",
-            trigger: "blur"
+            trigger: "blur",
-          }
+          },
-        ]
+        ],
-      }
+      },
     };
   },
   created() {
@@ -226,9 +301,11 @@ export default {
     /** 查询部门列表 */
     getList() {
       this.loading = true;
-      listDept(this.queryParams).then(response => {
+      listDept(this.queryParams).then((response) => {
         this.deptList = this.handleTree(response.data, "deptId");
         this.loading = false;
+        console.log(response.data);
+        console.log(this.deptList);
       });
     },
     /** 转换部门数据结构 */
@@ -239,7 +316,7 @@ export default {
       return {
         id: node.deptId,
         label: node.deptName,
-        children: node.children
+        children: node.children,
       };
     },
     // 取消按钮
@@ -257,7 +334,7 @@ export default {
         leader: undefined,
         phone: undefined,
         email: undefined,
-        status: "0"
+        status: "0",
       };
       this.resetForm("form");
     },
@@ -278,8 +355,9 @@ export default {
       }
       this.open = true;
       this.title = "添加部门";
-      listDept().then(response => {
+      listDept().then((response) => {
         this.deptOptions = this.handleTree(response.data, "deptId");
+        console.log(this.deptOptions);
       });
     },
     /** 展开/折叠操作 */
@@ -293,27 +371,29 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      getDept(row.deptId).then(response => {
+      getDept(row.deptId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改部门";
       });
-      listDeptExcludeChild(row.deptId).then(response => {
+      listDeptExcludeChild(row.deptId).then((response) => {
         this.deptOptions = this.handleTree(response.data, "deptId");
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      console.log(this.form);
+
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.deptId != undefined) {
-            updateDept(this.form).then(response => {
+            updateDept(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addDept(this.form).then(response => {
+            addDept(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -324,13 +404,17 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
+      this.$modal
-        return delDept(row.deptId);
+        .confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
-      }).then(() => {
+        .then(function () {
-        this.getList();
+          return delDept(row.deptId);
-        this.$modal.msgSuccess("删除成功");
+        })
-      }).catch(() => {});
+        .then(() => {
-    }
+          this.getList();
-  }
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>

src/views/system/info/index.vue

@@ -0,0 +1,507 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="所属组织" prop="parentId" v-if="form.id != 1">
+        <treeselect
+          :normalizer="normalizer3"
+          :options="List"
+          placeholder="请选择所属组织"
+          v-model="queryParams.parentId"
+          style="width: 300px"
+        />
+      </el-form-item>
+
+      <!-- <el-input
+          v-model="queryParams.parentId"
+          placeholder="请输入组织名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        /> -->
+
+      <el-form-item label="区域名称" prop="">
+        <treeselect
+          :normalizer="normalizer4"
+          :options="areaList"
+          placeholder="请选择所属区域"
+          v-model="queryParams.areaId"
+          style="width: 300px"
+        />
+      </el-form-item>
+      <el-form-item label="组织地址" prop="">
+        <el-input
+          v-model="queryParams.organizeAddress"
+          placeholder="请输入组织地址"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="联系人" prop="">
+        <el-input
+          v-model="queryParams.contacts"
+          placeholder="请输入联系人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="联系电话" prop="">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入联系电话"
+          clearable
+          @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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:area:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+          >展开/折叠</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:area:export']"
+          >导出</el-button
+        >
+      </el-col> -->
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="List"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="id"
+      border
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column label="组织名称" align="center" prop="organizeName" />
+      <el-table-column label="所属区域" align="center" prop="areaName" />
+      <el-table-column label="组织地址" align="center" prop="organizeAddress" />
+      <el-table-column label="联系人" align="center" prop="contacts" />
+      <el-table-column label="联系电话" align="center" prop="phone" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:area:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleAdd2(scope.row)"
+            v-hasPermi="['system:area:add']"
+            >新增</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:area:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改区域管理对话框 -->
+
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <!-- <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="所属上级区域" prop="areaId">
+          <treeselect
+            :normalizer="normalizer"
+            :options="areaList"
+            placeholder="请选择所属上级区域"
+            v-model="form.areaId"
+          />
+        </el-form-item>
+
+        <el-form-item label="区域名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入区域名称" />
+        </el-form-item>
+        <el-form-item label="区域编码" prop="code">
+          <el-input v-model.number="form.code" placeholder="请输入区域编码" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model.number="form.sort" placeholder="请输入排序" />
+        </el-form-item>
+      </el-form> -->
+
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="所属上级区域" prop="areaId">
+          <treeselect
+            :normalizer="normalizer"
+            :options="areaList"
+            placeholder="请选择所属区域"
+            v-model="form.areaId"
+          />
+        </el-form-item>
+
+        <el-form-item label="所属组织" prop="parentId" v-if="form.id != 1">
+          <treeselect
+            :normalizer="normalizer2"
+            :options="List"
+            placeholder="请选择所属组织"
+            v-model="form.parentId"
+          />
+        </el-form-item>
+
+        <el-form-item label="组织名称" prop="organizeName">
+          <el-input v-model="form.organizeName" placeholder="请输入组织名称" />
+        </el-form-item>
+        <el-form-item label="组织地址" prop="organizeAddress">
+          <el-input
+            v-model="form.organizeAddress"
+            placeholder="请输入组织地址"
+          />
+        </el-form-item>
+        <el-form-item label="联系人" prop="contacts">
+          <el-input v-model="form.contacts" placeholder="请输入联系人姓名" />
+        </el-form-item>
+        <el-form-item label="联系人电话" prop="">
+          <el-input v-model="form.phone" placeholder="请输入联系人电话" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list, getinfo, delinfo, add, edit } from "@/api/system/info.js";
+import { listArea } from "@/api/system/area.js";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  components: { Treeselect },
+  name: "areas",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 区域管理表格数据
+      List: [],
+      areaList: [],
+      areaList2: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        parentId: undefined,
+        areaId: undefined,
+        organizeName: "",
+        organizeAddress: "",
+        phone: "",
+        contacts: "",
+      },
+      // 表单参数
+      form: {
+        id: undefined,
+        parentId: undefined,
+        areaId: undefined,
+        organizeName: "",
+        organizeAddress: "",
+        phone: "",
+        contacts: "",
+      },
+      // 表单校验
+      rules: {
+        code: [
+          { required: true, message: "区域编码不能为空" },
+          { type: "number", message: "区域编码必须为数字值", trigger: "blur" },
+        ],
+        areaId: [
+          { required: true, message: "请选择所属上级区域", trigger: "blur" },
+        ],
+        parentId: [
+          { required: true, message: "请选择所属上级区域", trigger: "blur" },
+        ],
+        organizeName: [
+          { required: true, message: "请输入组织名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 转换部门数据结构 */
+    normalizer4(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        areaId: node.id,
+        label: node.name,
+        children: node.children,
+      };
+    },
+
+    normalizer3(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        parentId: node.id,
+        label: node.organizeName,
+        children: node.children,
+      };
+    },
+
+    normalizer2(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        areaId: node.id,
+        label: node.organizeName,
+        children: node.children,
+      };
+    },
+    normalizer(node) {
+      // console.log(node);
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        areaId: node.areaId,
+        label: node.name,
+        children: node.children,
+      };
+    },
+    /** 查询区域管理列表 */
+    getList() {
+      listArea(this.queryParams).then((response) => {
+        this.areaList2 = this.handleTree(response.data);
+        this.areaList = this.handleTree(response.data);
+        console.log(this.areaList);
+      });
+      this.loading = true;
+      console.log(this.queryParams);
+      list(this.queryParams).then((response) => {
+        this.List = this.handleTree(response.data);
+        console.log(this.List);
+        this.loading = false;
+        this.queryParams = {
+          parentId: undefined,
+          areaId: undefined,
+          organizeName: "",
+          organizeAddress: "",
+          phone: "",
+          contacts: "",
+        };
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        parentId: undefined,
+        areaId: undefined,
+        organizeName: "",
+        organizeAddress: "",
+        phone: "",
+        contacts: "",
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 项目新增按钮操作 */
+    handleAdd2(row) {
+      console.log(row);
+      this.reset();
+      this.form.areaId = row.areaId;
+      this.form.parentId = row.id;
+      console.log(this.form);
+      this.open = true;
+      this.title = "添加区域管理";
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      list(this.queryParams).then((response) => {
+        this.List = this.handleTree(response.data);
+        console.log(this.List);
+      });
+      this.reset();
+      listArea(this.queryParams).then((response) => {
+        this.areaList2 = this.handleTree(response.data);
+        this.areaList = this.handleTree(response.data);
+        console.log(this.areaList);
+      });
+      this.open = true;
+      this.title = "添加区域管理";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getinfo(id).then((response) => {
+        console.log(response);
+        if (response.data.phone == 0) {
+          response.data.phone = "";
+        }
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改区域管理";
+        console.log(this.form);
+      });
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      if (this.form.phone == "" || this.form.phone.toString().length == 11) {
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            if (this.form.id != null) {
+              edit(this.form).then((response) => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              add(this.form).then((response) => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      } else {
+        this.$message.error("请输入正确的手机号码");
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm("是否确认删除？")
+        .then(function () {
+          return delinfo(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/area/export",
+        {
+          ...this.queryParams,
+        },
+        `area_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>
+<style lang='scss'>
+::v-deep .el-input {
+}
+</style>