更新,新增地区筛选用户

src/views/user/component/order.vue

@@ -10,6 +10,7 @@ import { useRouter } from "vue-router";
 import mitt from "@/utils/mitt.js";
 import moment from "moment";
 import add from './add.vue';
+import { apiProvince, apiCity, apiArea, apiStreet, apiVillage, apiBrigade } from '@/api/public'
 
 const userStore = useUserStore();
 const props = defineProps({
@@ -29,7 +30,8 @@ const where = ref({
     page_no: 1,
     page_size: 20,
     mobile: "",
-    user_ship: ""
+    user_ship: "",
+    street: null
 });
 
 const loading = ref(false);
@@ -42,6 +44,9 @@ const getOrderList = (reload = false) => {
     if (reload) where.value.page_no = 1;
     else if (loadEnd.value || loading.value) return;
     loading.value = true;
+    if(where.value.mobile == '' && where.value.user_ship == ''){
+        where.value.store_id = userStore.userInfo.store_id;
+    } else where.value.store_id = null;
     userListsApi(where.value)
         .then((res) => {
             if (reload) orderList.value = res.data.lists;
@@ -83,9 +88,110 @@ const getUserShip = () => {
 }
 getUserShip()
 
-onMounted(() => {
+const resetWhere = ()=>{
-    mitt.on('re-load-user-list', () => {
+    where.value.mobile = "";
+    where.value.user_ship = "";
+    where.value.street = null;
+    selectedValues.value = [];
     getOrderList(true);
+}
+
+
+const selectedValues = ref([])
+const options = ref([]);
+// 异步加载数据的方法
+const loadOptions = async (node, resolve) => {
+    const level = node.level;
+    let response;
+    if (level !== 0 && !node.data.code) return resolve([]);
+    // if (level === 0) {
+    //     response = await apiProvince();
+    //     response = response.data.map((item) => {
+    //         return {
+    //             code: item.province_code,
+    //             name: item.province_name
+    //         }
+    //     })
+    // } else 
+    if (level === 0) {
+        response = await apiCity({
+            province_code: 510000 // 四川省
+        });
+        response = response.data.map((item) => {
+            return {
+                code: item.city_code,
+                name: item.city_name
+            }
+        })
+    } else if (level === 1) {
+        response = await apiArea({
+            city_code: node.data.code
+        });
+        response = response.data.map((item) => {
+            return {
+                code: item.area_code,
+                name: item.area_name
+            }
+        })
+    }
+    else if (level === 2) {
+        response = await apiStreet({
+            area_code: node.data.code
+        });
+        response = response.data.map((item) => {
+            return {
+                code: item.street_code,
+                name: item.street_name,
+                leaf: true
+            }
+        })
+    }
+    else if (level === 3) {
+        response = await apiVillage({
+            street_code: node.data.code
+        });
+        response = response.data.map((item) => {
+            return {
+                code: item.village_code,
+                name: item.village_name,
+            }
+        })
+    }
+    else if (level === 4) {
+        response = await apiBrigade({
+            village_code: node.data.code
+        });
+        response = response.data.map((item) => {
+            return {
+                code: item.id,
+                name: item.brigade_name,
+                leaf: true
+            }
+        })
+    }
+
+    resolve(response);
+};
+const propOptions = {
+    value: 'code',
+    label: 'name',
+    children: 'children',
+    multiple: false,
+    lazy: true,
+    lazyLoad: loadOptions
+};
+const changeAddress = ()=>{
+    if(selectedValues.value.length){
+        where.value.street = selectedValues.value[selectedValues.value.length - 1];
+    }else{
+        where.value.street = "";
+    }
+    getOrderList(true);
+}
+
+onMounted(() => {
+    mitt.on('re-load-user-list', (e) => {
+        if(e) getOrderList(true);
     })
 })
 onUnmounted(() => {
@@ -108,10 +214,15 @@ onUnmounted(() => {
             <el-select v-model="where.user_ship" @change="getOrderList(true)" placeholder="请选择用户类型" style="flex: 1">
                 <el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id" />
             </el-select>
-            <el-button @click="where.user_ship='';getOrderList(true)" style="margin-left: 1rem;">重置</el-button>
+            <el-button @click="resetWhere" style="margin-left: 1rem;">重置</el-button>
+        </div>
+        <div class="header-row">
+            <div class="label">用户地区</div>
+            <el-cascader style="flex: 1;" :options="options" v-model="selectedValues"
+                            :props="propOptions" :load="loadOptions" class="w-full" @change="changeAddress" />
         </div>
         <div class="header-input">
-            <el-input v-model="where.mobile" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"
+            <el-input v-model="where.mobile" placeholder="搜索手机号" @keydown.enter="getOrderList(true)"
                 @clear="getOrderList(true)" clearable>
                 <template #append>
                     <el-button type="primary" style="
@@ -129,7 +240,7 @@ onUnmounted(() => {
                 <el-avatar class="avatar" :src="item.avatar" />
                 <div style="display: flex; flex-direction: column; justify-content: space-around;flex:1;">
                     <div class="top flex">
-                        <div class="r-1"><span class="bold">{{ item.nickname }}</span><span>{{ ' (ID:' + item.id
+                        <div class="r-1"><span class="bold">{{ item.real_name || item.nickname }}</span><span>{{ ' (ID:' + item.id
                                 +')'}}</span>
                         </div>
                         <div>手机号: {{ item.mobile }}</div>
@@ -141,7 +252,7 @@ onUnmounted(() => {
                         <div>返还金: <span class="red">{{ item.return_money?.toFixed(2) }}</span></div>
                         <div>礼品券: <span class="red">{{ item.get_frozen?.toFixed(2) }}</span></div>
                         <div>
-                            <el-tag type="primary" v-if="item.user_ship != 1">{{ item.user_ship_name }}</el-tag>
+                            <el-tag type="primary" v-if="item.user_ship == 0 || item.user_ship == 4">{{ item.user_ship_name }}</el-tag>
                             <el-tag type="success" v-else>{{ item.user_ship_name }}</el-tag>
                         </div>
                     </div>