页面修改

admin/src/api/common.ts

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+// 省列表
+export function apiProvinceList() {
+    return request.get({ url: '/common/province' })
+}
+// 市列表
+export function apiCityList(params: any) {
+    return request.get({ url: '/common/city', params })
+}
+// 区列表
+export function apiAreaList(params: any) {
+    return request.get({ url: '/common/area', params })
+}
+// 镇列表
+export function apiStreetList(params: any) {
+    return request.get({ url: '/common/street', params })
+}
+// 村列表
+export function apiVillageList(params: any) {
+    return request.get({ url: '/common/village', params })
+}
+
+// 队列表
+export function apiBrigadeList() {
+    return request.get({ url: '/common/brigade' })
+}
+

admin/src/config/index.ts

@@ -2,7 +2,7 @@ const config = {
     terminal: 1, //终端
     title: '后台管理系统', //网站默认标题
     version: '1.6.0', //版本号
-    baseUrl: `${import.meta.env.VITE_APP_BASE_URL || ''}/`, //请求接口域名
+    baseUrl: `${import.meta.env.VITE_APP_BASE_URL || 'http://192.168.1.16:8081'}/`, //请求接口域名
     urlPrefix: 'adminapi', //请求默认前缀
     timeout: 10 * 1000 //请求超时时长
 }

admin/src/views/sub_merchant/edit.vue

@@ -1,13 +1,6 @@
 <template>
     <div class="edit-popup">
-        <popup
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
-            ref="popupRef"
-            :title="popupTitle"
-            :async="true"
-            width="550px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
             <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                 <el-form-item label="子商户名" prop="sub_merchant_name">
                     <el-input v-model="formData.sub_merchant_name" clearable placeholder="请输入子商户名" />
@@ -15,7 +8,43 @@
                 <el-form-item label="子商户号" prop="sub_mch_id">
                     <el-input v-model="formData.sub_mch_id" clearable placeholder="请输入子商户号" />
                 </el-form-item>
-                <el-form-item label="省" prop="province">
+                <el-form-item label="省" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]" prop="province">
+                    <el-select v-model="formData.province" placeholder="请选择省" clearable @change="province_change"
+                        :style="{ width: '100%' }">
+                        <el-option v-for="(item, index) in provinceOptions" :key="index" :label="item.province_name"
+                            :value="item.province_code"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="市" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]" prop="city">
+                    <el-select v-model="formData.city" placeholder="请选择市" clearable @change="city_change"
+                        :style="{ width: '100%' }">
+                        <el-option v-for="(item, index) in cityOptions" :key="index" :label="item.city_name"
+                            :value="item.city_code"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="区/县" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]" prop="area">
+                    <el-select v-model="formData.area" placeholder="请选择区/县" clearable @change="area_change"
+                        :style="{ width: '100%' }">
+                        <el-option v-for="(item, index) in areaOptions" :key="index" :label="item.area_name"
+                            :value="item.area_code"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="镇" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]" prop="street">
+                    <el-select v-model="formData.street" placeholder="请选择镇" clearable @change="street_change"
+                        :style="{ width: '100%' }">
+                        <el-option v-for="(item, index) in streetOptions" :key="index" :label="item.street_name"
+                            :value="item.street_code"></el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- <el-form-item label="村" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]" prop="village">
+                    <el-select v-model="formData.village" placeholder="请选择村" clearable @change="village_change"
+                        :style="{ width: '100%' }">
+                        <el-option v-for="(item, index) in villageOptions" :key="index" :label="item.village_name"
+                            :value="item.village_code"></el-option>
+                    </el-select>
+                </el-form-item> -->
+                <!-- <el-form-item label="省" prop="province">
                     <el-input v-model="formData.province" clearable placeholder="请输入省" />
                 </el-form-item>
                 <el-form-item label="市" prop="city">
@@ -29,7 +58,8 @@
                 </el-form-item>
                 <el-form-item label="村" prop="village">
                     <el-input v-model="formData.village" clearable placeholder="请输入村" />
-                </el-form-item>
+                </el-form-item> -->
+
             </el-form>
         </popup>
     </div>
@@ -41,6 +71,13 @@ import Popup from '@/components/popup/index.vue'
 import { apiSubMerchantAdd, apiSubMerchantEdit, apiSubMerchantDetail } from '@/api/sub_merchant'
 import { timeFormat } from '@/utils/util'
 import type { PropType } from 'vue'
+import {
+    apiCityList,
+    apiAreaList,
+    apiStreetList,
+    apiProvinceList,
+    apiVillageList,
+} from "@/api/common";
 defineProps({
     dictData: {
         type: Object as PropType<Record<string, any[]>>,
@@ -68,8 +105,9 @@ const formData = reactive({
     area: '',
     street: '',
     village: '',
-})
 
+})
+const addressList = reactive(['province', 'city', 'area', 'street', 'village'])
 
 // 表单验证
 const formRules = reactive<any>({
@@ -143,9 +181,34 @@ const handleSubmit = async () => {
 }
 
 //打开弹窗
-const open = (type = 'add') => {
+const open = async (type = 'add') => {
+    console.log(formData)
     mode.value = type
     popupRef.value?.open()
+
+    if (type == 'add') {
+        addressFn()
+    }
+    if (type == 'edit') {
+        await nextTick()
+
+        for (let key in formData) {
+
+            if (addressList.includes(key)) {
+
+                formData[key] = String(formData[key])
+            }
+        }
+
+        await addressFn()
+        await province_change()
+        await city_change()
+        await area_change()
+        await street_change()
+    }
+
+
+
 }
 
 // 关闭回调
@@ -153,11 +216,90 @@ const handleClose = () => {
     emit('close')
 }
 
+// 地址选择
+const provinceOptions = reactive([])
+const cityOptions = reactive([])
+const areaOptions = reactive([])
+const Options = reactive([])
+const streetOptions = reactive([])
+const villageOptions = reactive([])
 
 
+const addressFn = () => {
+    apiProvinceList().then(res => {
+        res.forEach((item: any) => {
+            provinceOptions.push(
+                // @ts-ignore
+                {
+                    province_name: item.province_name,
+                    province_code: item.province_code
+
+                })
+        });
+    })
+}
+
+
+const province_change = async () => {
+    cityOptions.splice(0, cityOptions.length)
+    let res = await apiCityList({ city: formData.province })
+    res.forEach((item: any) => {
+        cityOptions.push(
+            // @ts-ignore
+            {
+                city_name: item.city_name,
+                city_code: item.city_code
+
+            })
+    });
+}
+const city_change = async () => {
+    areaOptions.splice(0, areaOptions.length)
+
+    let res = await apiAreaList({ area: formData.city })
+    res.forEach((item: any) => {
+        areaOptions.push(
+            // @ts-ignore
+            {
+                area_name: item.area_name,
+                area_code: item.area_code
+
+            })
+    });
+}
+const area_change = async () => {
+    streetOptions.splice(0, streetOptions.length)
+
+    let res = await apiStreetList({ street: formData.area })
+    res.forEach((item: any) => {
+        streetOptions.push(
+            // @ts-ignore
+            {
+                street_name: item.street_name,
+                street_code: item.street_code
+
+            })
+    });
+}
+const street_change = async () => {
+    villageOptions.splice(0, villageOptions.length)
+
+    let res = await apiVillageList({ village: formData.street })
+    res.forEach((item: any) => {
+        villageOptions.push(
+            // @ts-ignore
+            {
+                village_name: item.village_name,
+                village_code: item.village_code
+
+            })
+    });
+}
+
 defineExpose({
     open,
     setFormData,
     getDetail
 })
+
 </script>

admin/src/views/sub_merchant/index.vue

@@ -1,18 +1,14 @@
 <template>
     <div>
         <el-card class="!border-none mb-4" shadow="never">
-            <el-form
+            <el-form class="mb-[-16px]" :model="queryParams" inline>
-                class="mb-[-16px]"
-                :model="queryParams"
-                inline
-            >
                 <el-form-item label="子商户名" prop="sub_merchant_name">
                     <el-input class="w-[280px]" v-model="queryParams.sub_merchant_name" clearable placeholder="请输入子商户名" />
                 </el-form-item>
                 <el-form-item label="子商户号" prop="sub_mch_id">
                     <el-input class="w-[280px]" v-model="queryParams.sub_mch_id" clearable placeholder="请输入子商户号" />
                 </el-form-item>
-                <el-form-item label="省" prop="province">
+                <!-- <el-form-item label="省" prop="province">
                     <el-input class="w-[280px]" v-model="queryParams.province" clearable placeholder="请输入省" />
                 </el-form-item>
                 <el-form-item label="市" prop="city">
@@ -26,7 +22,8 @@
                 </el-form-item>
                 <el-form-item label="村" prop="village">
                     <el-input class="w-[280px]" v-model="queryParams.village" clearable placeholder="请输入村" />
-                </el-form-item>
+                </el-form-item> -->
+
                 <el-form-item>
                     <el-button type="primary" @click="resetPage">查询</el-button>
                     <el-button @click="resetParams">重置</el-button>
@@ -40,11 +37,7 @@
                 </template>
                 新增
             </el-button>
-            <el-button
+            <el-button v-perms="['sub_merchant/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
-                v-perms="['sub_merchant/delete']"
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
                 删除
             </el-button>
             <div class="mt-4">
@@ -56,30 +49,21 @@
                     <el-table-column label="市" prop="city" show-overflow-tooltip />
                     <el-table-column label="区/县" prop="area" show-overflow-tooltip />
                     <el-table-column label="镇" prop="street" show-overflow-tooltip />
-                    <el-table-column label="村" prop="village" show-overflow-tooltip />
+                    <!-- <el-table-column label="村" prop="village" show-overflow-tooltip /> -->
+
                     <el-table-column label="操作" width="120" fixed="right">
                         <template #default="{ row }">
-                             <el-button
+                            <el-button v-perms="['sub_merchant/edit']" type="primary" link @click="handleEdit(row)">
-                                v-perms="['sub_merchant/edit']"
-                                type="primary"
-                                link
-                                @click="handleEdit(row)"
-                            >
                                 编辑
                             </el-button>
-                            <el-button
+                            <el-button v-perms="['sub_merchant/delete']" type="danger" link @click="handleDelete(row.id)">
-                                v-perms="['sub_merchant/delete']"
-                                type="danger"
-                                link
-                                @click="handleDelete(row.id)"
-                            >
                                 删除
                             </el-button>
                         </template>
                     </el-table-column>
                 </el-table>
             </div>
-            <div class="flex mt-4 justify-end">
+            <div class="flex justify-end mt-4">
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>