用户列表和查询省市区树形接口联调

src/common/js/home.js

@@ -76,7 +76,7 @@ export function getroleAll(data) {
 // 查询地市和区县树形接口（用户列表地区选择框）
 export function getCityAreaList(data) {
   return request({
-    url: '/api/api/web/area/cityArea',
+    url: '/api/api/web/area/tree',
     method: 'post',
     data: data
   })

src/components/permissions/user/index.vue

@@ -34,7 +34,13 @@
         />
       </el-form-item>
       <el-form-item label="地区" prop="areaId">
-        <el-select
+        <el-cascader
+        v-model="queryParams.areaId"
+        placeholder="请选择省份/地市/区县"
+        :options="cityList"
+        @change="areaIdChange"
+        clearable></el-cascader>
+        <!-- <el-select
           v-model="queryParams.areaId"
           placeholder="请选择省份/地市/区县"
           clearable
@@ -46,7 +52,7 @@
             :label="dict.systemName"
             :value="dict.system"
           />
-        </el-select>
+        </el-select> -->
       </el-form-item>
       <el-form-item style="float: right">
         <el-button
@@ -117,7 +123,7 @@
       <el-table-column label="省份" align="center" prop="provinceName" />
       <el-table-column label="地市" align="center" prop="cityName" />
       <el-table-column label="区县" align="center" prop="areaName" />
-      <el-table-column label="部门" align="center" prop="org" />
+      <el-table-column label="部门" align="center" prop="org"  :show-overflow-tooltip="true"/>
       <el-table-column label="操作" width="200">
         <template slot-scope="scope">
           <el-button
@@ -321,23 +327,12 @@ export default {
       queryParams: {
         current: 1,
         pageSize: 10,
-        loginName: "",
-        userName: "",
-        org: "",
-        areaId: "",
+        loginName: null,
+        userName: null,
+        org: null,
+        areaId: null,
       },
-      tableList: [
-        {
-          userName: "投诉大屏",
-          loginName: "大屏",
-          org: "web",
-        },
-        {
-          userName: "工单查询",
-          loginName: "流程",
-          org: "web",
-        },
-      ],
+      tableList: [],
       total: 0,
       multiple: true,
       delList: [],
@@ -347,6 +342,7 @@ export default {
       isDisabled: true,
       isDisabled2: true,
       isDisabledEmail: true,
+      props: { multiple: true },
       // 表单校验
       rules: {
         loginName: [
@@ -363,26 +359,29 @@ export default {
   },
   methods: {
     init() {
-      // getSystemList().then(res=>{
-      //   console.log('res: ', res);
-      //   this.systemList = res.data
-      // })
+      getCityAreaList().then(res=>{
+        this.cityList = res.data
+      })
     },
     getList() {
-      // this.loading = true;
-      // getUserList(this.queryParams).then(res=>{
-      //   console.log('res: ', res);
-      // this.loading = false;
-      //   this.tableList = res.data;
-      //   this.total = res.total
-      // })
+      this.loading = true;
+      getUserList(this.queryParams).then(res=>{
+      this.loading = false;
+        this.tableList = res.data.list;
+        this.total = res.data.total
+      })
     },
     handleQuery() {
       this.getList();
     },
+    // 查询条件地区选择
+    areaIdChange(val){
+      this.queryParams.areaId = val[val.length-1]
+    },
     // 重置
     resetQuery() {
       this.resetForm("queryForm");
+      this.getList();
     },
     handleSelectionChange(val) {
       console.log("val: ", val);