页面修改

This commit is contained in:
zmj 2023-11-10 17:20:17 +08:00
parent f775b60a74
commit 91e6961cd4
4 changed files with 472 additions and 319 deletions

27
admin/src/api/common.ts Normal file
View File

@ -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' })
}

View File

@ -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 //请求超时时长
}

View File

@ -1,13 +1,6 @@
<template>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="550px"
@confirm="handleSubmit"
@close="handleClose"
>
<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="请输入子商户名" />
@ -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>({
@ -134,7 +172,7 @@ const getDetail = async (row: Record<string, any>) => {
//
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
const data = { ...formData, }
mode.value == 'edit'
? await apiSubMerchantEdit(data)
: await apiSubMerchantAdd(data)
@ -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>

View File

@ -1,18 +1,14 @@
<template>
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form
class="mb-[-16px]"
:model="queryParams"
inline
>
<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-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
v-perms="['sub_merchant/delete']"
:disabled="!selectData.length"
@click="handleDelete(selectData)"
>
<el-button 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
v-perms="['sub_merchant/edit']"
type="primary"
link
@click="handleEdit(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 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>