From 91e6961cd49922edcee3b137145d9c97fbe07798 Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Fri, 10 Nov 2023 17:20:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/api/common.ts                |  27 ++
 admin/src/config/index.ts              |   2 +-
 admin/src/views/sub_merchant/edit.vue  | 468 ++++++++++++++++---------
 admin/src/views/sub_merchant/index.vue | 294 ++++++++--------
 4 files changed, 472 insertions(+), 319 deletions(-)
 create mode 100644 admin/src/api/common.ts

diff --git a/admin/src/api/common.ts b/admin/src/api/common.ts
new file mode 100644
index 0000000..cec74ca
--- /dev/null
+++ b/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' })
+}
+
diff --git a/admin/src/config/index.ts b/admin/src/config/index.ts
index 8385963..47e7897 100755
--- a/admin/src/config/index.ts
+++ b/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 //请求超时时长
 }
diff --git a/admin/src/views/sub_merchant/edit.vue b/admin/src/views/sub_merchant/edit.vue
index f5140a1..130a3c3 100644
--- a/admin/src/views/sub_merchant/edit.vue
+++ b/admin/src/views/sub_merchant/edit.vue
@@ -1,163 +1,305 @@
-<template>
-    <div class="edit-popup">
-        <popup
-            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="请输入子商户名" />
-                </el-form-item>
-                <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-input v-model="formData.province" clearable placeholder="请输入省" />
-                </el-form-item>
-                <el-form-item label="市" prop="city">
-                    <el-input v-model="formData.city" clearable placeholder="请输入市" />
-                </el-form-item>
-                <el-form-item label="区/县" prop="area">
-                    <el-input v-model="formData.area" clearable placeholder="请输入区/县" />
-                </el-form-item>
-                <el-form-item label="镇" prop="street">
-                    <el-input v-model="formData.street" clearable placeholder="请输入镇" />
-                </el-form-item>
-                <el-form-item label="村" prop="village">
-                    <el-input v-model="formData.village" clearable placeholder="请输入村" />
-                </el-form-item>

-            </el-form>
-        </popup>
-    </div>
-</template>
-
-<script lang="ts" setup name="subMerchantEdit">
-import type { FormInstance } from 'element-plus'
-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'
-defineProps({
-    dictData: {
-        type: Object as PropType<Record<string, any[]>>,
-        default: () => ({})
-    }
-})
-const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
-
-
-// 弹窗标题
-const popupTitle = computed(() => {
-    return mode.value == 'edit' ? '编辑微信支付子商户表' : '新增微信支付子商户表'
-})
-
-// 表单数据
-const formData = reactive({
-    id: '',
-    sub_merchant_name: '',
-    sub_mch_id: '',
-    province: '',
-    city: '',
-    area: '',
-    street: '',
-    village: '',

-})
-
-
-// 表单验证
-const formRules = reactive<any>({
-    sub_merchant_name: [{
-        required: true,
-        message: '请输入子商户名',
-        trigger: ['blur']
-    }],
-    sub_mch_id: [{
-        required: true,
-        message: '请输入子商户号',
-        trigger: ['blur']
-    }],
-    province: [{
-        required: true,
-        message: '请输入省',
-        trigger: ['blur']
-    }],
-    city: [{
-        required: true,
-        message: '请输入市',
-        trigger: ['blur']
-    }],
-    area: [{
-        required: true,
-        message: '请输入区/县',
-        trigger: ['blur']
-    }],
-    street: [{
-        required: true,
-        message: '请输入镇',
-        trigger: ['blur']
-    }],
-    village: [{
-        required: true,
-        message: '请输入村',
-        trigger: ['blur']
-    }],
-})
-
-
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
-    }
-    
-    
-}
-
-const getDetail = async (row: Record<string, any>) => {
-    const data = await apiSubMerchantDetail({
-        id: row.id
-    })
-    setFormData(data)
-}
-
-
-// 提交按钮
-const handleSubmit = async () => {
-    await formRef.value?.validate()
-    const data = { ...formData,  }
-    mode.value == 'edit' 
-        ? await apiSubMerchantEdit(data) 
-        : await apiSubMerchantAdd(data)
-    popupRef.value?.close()
-    emit('success')
-}
-
-//打开弹窗
-const open = (type = 'add') => {
-    mode.value = type
-    popupRef.value?.open()
-}
-
-// 关闭回调
-const handleClose = () => {
-    emit('close')
-}
-
-
-
-defineExpose({
-    open,
-    setFormData,
-    getDetail
-})
-</script>
+<template>
+    <div class="edit-popup">
+        <popup 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="请输入子商户名" />
+                </el-form-item>
+                <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="省" :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">
+                    <el-input v-model="formData.city" clearable placeholder="请输入市" />
+                </el-form-item>
+                <el-form-item label="区/县" prop="area">
+                    <el-input v-model="formData.area" clearable placeholder="请输入区/县" />
+                </el-form-item>
+                <el-form-item label="镇" prop="street">
+                    <el-input v-model="formData.street" clearable placeholder="请输入镇" />
+                </el-form-item>
+                <el-form-item label="村" prop="village">
+                    <el-input v-model="formData.village" clearable placeholder="请输入村" />
+                </el-form-item> -->
+
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="subMerchantEdit">
+import type { FormInstance } from 'element-plus'
+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[]>>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+
+
+// 弹窗标题
+const popupTitle = computed(() => {
+    return mode.value == 'edit' ? '编辑微信支付子商户表' : '新增微信支付子商户表'
+})
+
+// 表单数据
+const formData = reactive({
+    id: '',
+    sub_merchant_name: '',
+    sub_mch_id: '',
+    province: '',
+    city: '',
+    area: '',
+    street: '',
+    village: '',
+
+})
+const addressList = reactive(['province', 'city', 'area', 'street', 'village'])
+
+// 表单验证
+const formRules = reactive<any>({
+    sub_merchant_name: [{
+        required: true,
+        message: '请输入子商户名',
+        trigger: ['blur']
+    }],
+    sub_mch_id: [{
+        required: true,
+        message: '请输入子商户号',
+        trigger: ['blur']
+    }],
+    province: [{
+        required: true,
+        message: '请输入省',
+        trigger: ['blur']
+    }],
+    city: [{
+        required: true,
+        message: '请输入市',
+        trigger: ['blur']
+    }],
+    area: [{
+        required: true,
+        message: '请输入区/县',
+        trigger: ['blur']
+    }],
+    street: [{
+        required: true,
+        message: '请输入镇',
+        trigger: ['blur']
+    }],
+    village: [{
+        required: true,
+        message: '请输入村',
+        trigger: ['blur']
+    }],
+})
+
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key]
+        }
+    }
+
+
+}
+
+const getDetail = async (row: Record<string, any>) => {
+    const data = await apiSubMerchantDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData, }
+    mode.value == 'edit'
+        ? await apiSubMerchantEdit(data)
+        : await apiSubMerchantAdd(data)
+    popupRef.value?.close()
+    emit('success')
+}
+
+//打开弹窗
+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()
+    }
+
+
+
+}
+
+// 关闭回调
+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>
diff --git a/admin/src/views/sub_merchant/index.vue b/admin/src/views/sub_merchant/index.vue
index aa63907..ed863ce 100644
--- a/admin/src/views/sub_merchant/index.vue
+++ b/admin/src/views/sub_merchant/index.vue
@@ -1,155 +1,139 @@
-<template>
-    <div>
-        <el-card class="!border-none mb-4" shadow="never">
-            <el-form
-                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-input class="w-[280px]" v-model="queryParams.province" clearable placeholder="请输入省" />
-                </el-form-item>
-                <el-form-item label="市" prop="city">
-                    <el-input class="w-[280px]" v-model="queryParams.city" clearable placeholder="请输入市" />
-                </el-form-item>
-                <el-form-item label="区/县" prop="area">
-                    <el-input class="w-[280px]" v-model="queryParams.area" clearable placeholder="请输入区/县" />
-                </el-form-item>
-                <el-form-item label="镇" prop="street">
-                    <el-input class="w-[280px]" v-model="queryParams.street" clearable placeholder="请输入镇" />
-                </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-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
-            <el-button v-perms="['sub_merchant/add']" type="primary" @click="handleAdd">
-                <template #icon>
-                    <icon name="el-icon-Plus" />
-                </template>
-                新增
-            </el-button>
-            <el-button
-                v-perms="['sub_merchant/delete']"
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
-                删除
-            </el-button>
-            <div class="mt-4">
-                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
-                    <el-table-column type="selection" width="55" />
-                    <el-table-column label="子商户名" prop="sub_merchant_name" show-overflow-tooltip />
-                    <el-table-column label="子商户号" prop="sub_mch_id" show-overflow-tooltip />
-                    <el-table-column label="省" prop="province" show-overflow-tooltip />
-                    <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="操作" width="120" fixed="right">
-                        <template #default="{ row }">
-                             <el-button
-                                v-perms="['sub_merchant/edit']"
-                                type="primary"
-                                link
-                                @click="handleEdit(row)"
-                            >
-                                编辑
-                            </el-button>
-                            <el-button
-                                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">
-                <pagination v-model="pager" @change="getLists" />
-            </div>
-        </el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
-    </div>
-</template>
-
-<script lang="ts" setup name="subMerchantLists">
-import { usePaging } from '@/hooks/usePaging'
-import { useDictData } from '@/hooks/useDictOptions'
-import { apiSubMerchantLists, apiSubMerchantDelete } from '@/api/sub_merchant'
-import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
-import EditPopup from './edit.vue'
-
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-// 是否显示编辑框
-const showEdit = ref(false)
-
-
-// 查询条件
-const queryParams = reactive({
-    sub_merchant_name: '',
-    sub_mch_id: '',
-    province: '',
-    city: '',
-    area: '',
-    street: '',
-    village: '',
-})
-
-// 选中数据
-const selectData = ref<any[]>([])
-
-// 表格选择后回调事件
-const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ id }) => id)
-}
-
-// 获取字典数据
-const { dictData } = useDictData('')
-
-// 分页相关
-const { pager, getLists, resetParams, resetPage } = usePaging({
-    fetchFun: apiSubMerchantLists,
-    params: queryParams
-})
-
-// 添加
-const handleAdd = async () => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('add')
-}
-
-// 编辑
-const handleEdit = async (data: any) => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-    editRef.value?.setFormData(data)
-}
-
-// 删除
-const handleDelete = async (id: number | any[]) => {
-    await feedback.confirm('确定要删除？')
-    await apiSubMerchantDelete({ id })
-    getLists()
-}
-
-getLists()
-</script>
-
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form 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-input class="w-[280px]" v-model="queryParams.province" clearable placeholder="请输入省" />
+                </el-form-item>
+                <el-form-item label="市" prop="city">
+                    <el-input class="w-[280px]" v-model="queryParams.city" clearable placeholder="请输入市" />
+                </el-form-item>
+                <el-form-item label="区/县" prop="area">
+                    <el-input class="w-[280px]" v-model="queryParams.area" clearable placeholder="请输入区/县" />
+                </el-form-item>
+                <el-form-item label="镇" prop="street">
+                    <el-input class="w-[280px]" v-model="queryParams.street" clearable placeholder="请输入镇" />
+                </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-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button @click="resetParams">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+            <el-button v-perms="['sub_merchant/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button v-perms="['sub_merchant/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
+                删除
+            </el-button>
+            <div class="mt-4">
+                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column label="子商户名" prop="sub_merchant_name" show-overflow-tooltip />
+                    <el-table-column label="子商户号" prop="sub_mch_id" show-overflow-tooltip />
+                    <el-table-column label="省" prop="province" show-overflow-tooltip />
+                    <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="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                            <el-button v-perms="['sub_merchant/edit']" type="primary" link @click="handleEdit(row)">
+                                编辑
+                            </el-button>
+                            <el-button v-perms="['sub_merchant/delete']" type="danger" link @click="handleDelete(row.id)">
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="flex justify-end mt-4">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+    </div>
+</template>
+
+<script lang="ts" setup name="subMerchantLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiSubMerchantLists, apiSubMerchantDelete } from '@/api/sub_merchant'
+import { timeFormat } from '@/utils/util'
+import feedback from '@/utils/feedback'
+import EditPopup from './edit.vue'
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+// 是否显示编辑框
+const showEdit = ref(false)
+
+
+// 查询条件
+const queryParams = reactive({
+    sub_merchant_name: '',
+    sub_mch_id: '',
+    province: '',
+    city: '',
+    area: '',
+    street: '',
+    village: '',
+})
+
+// 选中数据
+const selectData = ref<any[]>([])
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
+
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiSubMerchantLists,
+    params: queryParams
+})
+
+// 添加
+const handleAdd = async () => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('add')
+}
+
+// 编辑
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm('确定要删除？')
+    await apiSubMerchantDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+