Skip to content

Commit 4e69f15

Browse files
cooling-jasoncooling-jason
committed
mall: 订单中心->运费模板(第一版 性能有问题)
1 parent b0984c9 commit 4e69f15

File tree

7 files changed

+513
-6
lines changed

7 files changed

+513
-6
lines changed

‎src/api/mall/trade/delivery/expressTemplate/index.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import request from '@/config/axios'
2+
3+
export interface DeliveryExpressTemplateVO {
4+
id: number
5+
name: string
6+
chargeMode: number
7+
sort: number
8+
templateCharge: ExpressTemplateChargeVO[]
9+
templateFree: ExpressTemplateFreeVO[]
10+
}
11+
12+
export declare type ExpressTemplateChargeVO = {
13+
areaId: number
14+
startCount: number
15+
startPrice: number
16+
extraCount: number
17+
extraPrice: number
18+
}
19+
20+
export declare type ExpressTemplateFreeVO = {
21+
areaId: number
22+
freeCount: number
23+
freePrice: number
24+
}
25+
26+
// 查询快递运费模板列表
27+
export const getDeliveryExpressTemplatePage = async (params: PageParam) => {
28+
return await request.get({ url: '/trade/delivery/express-template/page', params })
29+
}
30+
31+
// 查询快递运费模板详情
32+
export const getDeliveryExpressTemplate = async (id: number) => {
33+
return await request.get({ url: '/trade/delivery/express-template/get?id=' + id })
34+
}
35+
36+
// 新增快递运费模板
37+
export const createDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
38+
return await request.post({ url: '/trade/delivery/express-template/create', data })
39+
}
40+
41+
// 修改快递运费模板
42+
export const updateDeliveryExpressTemplate = async (data: DeliveryExpressTemplateVO) => {
43+
return await request.put({ url: '/trade/delivery/express-template/update', data })
44+
}
45+
46+
// 删除快递运费模板
47+
export const deleteDeliveryExpressTemplate = async (id: number) => {
48+
return await request.delete({ url: '/trade/delivery/express-template/delete?id=' + id })
49+
}
50+
51+
// 导出快递运费模板 Excel
52+
export const exportDeliveryExpressTemplateApi = async (params) => {
53+
return await request.download({ url: '/trade/delivery/express-template/export-excel', params })
54+
}

‎src/api/system/area/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import request from '@/config/axios'
22

33
// 获得地区树
4-
export const getAreaTree = async () => {
5-
return await request.get({ url: '/system/area/tree' })
4+
export const getAreaTree = async (id: number) => {
5+
return await request.get({ url: '/system/area/tree?id=' + id })
66
}
77

88
// 获得 IP 对应的地区名

‎src/utils/dict.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,5 +148,7 @@ export enum DICT_TYPE {
148148

149149
// ========== MALL 模块 ==========
150150
PRODUCT_UNIT = 'product_unit', // 商品单位
151-
PRODUCT_SPU_STATUS = 'product_spu_status' //商品状态
151+
PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
152+
// ========== MALL 交易模块 ==========
153+
EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode' //快递的计费方式
152154
}

‎src/views/mall/trade/delivery/express/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
:inline="true"
99
label-width="100px"
1010
>
11-
<el-form-item label="快递公司编码" prop="code">
11+
<el-form-item label="快递公司编号" prop="code">
1212
<el-input
1313
v-model="queryParams.code"
14-
placeholder="请输快递公司编码"
14+
placeholder="请输快递公司编号"
1515
clearable
1616
@keyup.enter="handleQuery"
1717
class="!w-240px"

‎src/views/mall/trade/delivery/expressTemplate/DeliveryExpressTemplateForm.vue

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible" width="85%">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="模板名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入模板名称" />
12+
</el-form-item>
13+
<el-form-item label="计费方式" prop="chargeMode">
14+
<el-radio-group v-model="formData.chargeMode" @change="changeChargeMode">
15+
<el-radio :label="1">按件数</el-radio>
16+
<el-radio :label="2">按重量</el-radio>
17+
<el-radio :label="3">按体积</el-radio>
18+
</el-radio-group>
19+
</el-form-item>
20+
<el-form-item label="运费" prop="templateCharge">
21+
<el-table border style="width: 100%" :data="formData.templateCharge">
22+
<el-table-column align="center" label="区域">
23+
<template #default="{ row }">
24+
<!-- @芋艿 TODO 数据多，性能有问题 , 如何解决 -->
25+
<el-tree-select
26+
v-model="row.areaId"
27+
:data="areaList"
28+
:props="defaultProps"
29+
node-key="id"
30+
check-strictly
31+
show-checkbox
32+
check-on-click-node
33+
:render-after-expand="false"
34+
/>
35+
</template>
36+
</el-table-column>
37+
<el-table-column :label="columnTitle.startCountTitle" prop="startCount">
38+
<template #default="{ row }">
39+
<el-input-number v-model="row.startCount" :min="1" />
40+
</template>
41+
</el-table-column>
42+
<!-- TODO 元转换 分 -->
43+
<el-table-column label="运费(元)" prop="startPrice">
44+
<template #default="{ row }">
45+
<el-input-number v-model="row.startPrice" :min="1" />
46+
</template>
47+
</el-table-column>
48+
<el-table-column :label="columnTitle.extraCountTitle" prop="extraCount">
49+
<template #default="{ row }">
50+
<el-input-number v-model="row.extraCount" :min="1" />
51+
</template>
52+
</el-table-column>
53+
<el-table-column label="续费(元)" prop="extraPrice">
54+
<template #default="{ row }">
55+
<el-input-number v-model="row.extraPrice" :min="1" />
56+
</template>
57+
</el-table-column>
58+
<el-table-column label="操作" align="center">
59+
<template #default="scope">
60+
<el-button link type="danger" @click="deleteChargeArea(scope.$index)">
61+
删除
62+
</el-button>
63+
</template>
64+
</el-table-column>
65+
</el-table>
66+
</el-form-item>
67+
<el-form-item>
68+
<el-button type="primary" plain @click="addChargeArea()">
69+
<Icon icon="ep:plus" class="mr-5px" /> 添加区域
70+
</el-button>
71+
</el-form-item>
72+
<el-form-item label="包邮区域" prop="templateFree">
73+
<el-table border style="width: 100%" :data="formData.templateFree">
74+
<el-table-column label="区域">
75+
<template #default="{ row }">
76+
<!-- @芋艿 TODO 数据多，性能有问题 , 如何解决 -->
77+
<el-tree-select
78+
v-model="row.areaId"
79+
:data="areaList"
80+
:props="defaultProps"
81+
node-key="id"
82+
check-strictly
83+
show-checkbox
84+
check-on-click-node
85+
:render-after-expand="false"
86+
/>
87+
</template>
88+
</el-table-column>
89+
<el-table-column :label="columnTitle.freeCountTitle" prop="freeCount">
90+
<template #default="{ row }">
91+
<el-input-number v-model="row.freeCount" :min="1" />
92+
</template>
93+
</el-table-column>
94+
<el-table-column label="包邮金额（元）" prop="freePrice">
95+
<template #default="{ row }">
96+
<el-input-number v-model="row.freePrice" :min="1" />
97+
</template>
98+
</el-table-column>
99+
<el-table-column label="操作" align="center">
100+
<template #default="scope">
101+
<el-button link type="danger" @click="deleteFreeArea(scope.$index)"> 删除 </el-button>
102+
</template>
103+
</el-table-column>
104+
</el-table>
105+
</el-form-item>
106+
<el-form-item>
107+
<el-button type="primary" plain @click="addFreeArea()">
108+
<Icon icon="ep:plus" class="mr-5px" /> 添加区域
109+
</el-button>
110+
</el-form-item>
111+
<el-form-item label="排序" prop="sort">
112+
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
113+
</el-form-item>
114+
</el-form>
115+
<template #footer>
116+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
117+
<el-button @click="dialogVisible = false">取 消</el-button>
118+
</template>
119+
</Dialog>
120+
</template>
121+
<script setup lang="ts">
122+
import * as DeliveryExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
123+
import { defaultProps } from '@/utils/tree'
124+
import { getAreaTree } from '@/api/system/area'
125+
const { t } = useI18n() // 国际化
126+
const message = useMessage() // 消息弹窗
127+
128+
const dialogVisible = ref(false) // 弹窗的是否展示
129+
const dialogTitle = ref('') // 弹窗的标题
130+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
131+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
132+
const formData = ref({
133+
id: undefined,
134+
name: '',
135+
chargeMode: 1,
136+
sort: 0,
137+
templateCharge: [],
138+
templateFree: []
139+
})
140+
const columnTitle = ref({
141+
startCountTitle: '首件',
142+
extraCountTitle: '续件',
143+
freeCountTitle: '包邮件数'
144+
})
145+
const formRules = reactive({
146+
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
147+
chargeMode: [{ required: true, message: '配送计费方式不能为空', trigger: 'blur' }],
148+
sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
149+
})
150+
const formRef = ref() // 表单 Ref
151+
const areaList = ref([]) //区域数据
152+
/** 打开弹窗 */
153+
const open = async (type: string, id?: number) => {
154+
dialogVisible.value = true
155+
dialogTitle.value = t('action.' + type)
156+
formType.value = type
157+
resetForm()
158+
try {
159+
// 修改时，设置数据
160+
if (id) {
161+
formLoading.value = true
162+
formData.value = await DeliveryExpressTemplateApi.getDeliveryExpressTemplate(id)
163+
}
164+
} finally {
165+
formLoading.value = false
166+
}
167+
}
168+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
169+
170+
/** 提交表单 */
171+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
172+
const submitForm = async () => {
173+
// 校验表单
174+
if (!formRef) return
175+
const valid = await formRef.value.validate()
176+
if (!valid) return
177+
// 提交请求
178+
formLoading.value = true
179+
try {
180+
const data = formData.value as DeliveryExpressTemplateApi.DeliveryExpressTemplateVO
181+
if (formType.value === 'create') {
182+
await DeliveryExpressTemplateApi.createDeliveryExpressTemplate(data)
183+
message.success(t('common.createSuccess'))
184+
} else {
185+
await DeliveryExpressTemplateApi.updateDeliveryExpressTemplate(data)
186+
message.success(t('common.updateSuccess'))
187+
}
188+
dialogVisible.value = false
189+
// 发送操作成功的事件
190+
emit('success')
191+
} finally {
192+
formLoading.value = false
193+
}
194+
}
195+
/** 重置表单 */
196+
const resetForm = () => {
197+
formData.value = {
198+
id: undefined,
199+
name: '',
200+
chargeMode: 1,
201+
templateCharge: [
202+
{
203+
areaId: 1,
204+
startCount: 2,
205+
startPrice: 5,
206+
extraCount: 5,
207+
extraPrice: 10
208+
}
209+
],
210+
templateFree: [],
211+
sort: 0
212+
}
213+
columnTitle.value = {
214+
startCountTitle: '首件',
215+
extraCountTitle: '续件',
216+
freeCountTitle: '包邮件数'
217+
}
218+
formRef.value?.resetFields()
219+
}
220+
/** 配送计费方法改变 */
221+
const changeChargeMode = (chargeMod: number) => {
222+
if (chargeMod === 1) {
223+
columnTitle.value = {
224+
startCountTitle: '首件',
225+
extraCountTitle: '续件',
226+
freeCountTitle: '包邮件数'
227+
}
228+
}
229+
if (chargeMod === 2) {
230+
columnTitle.value = {
231+
startCountTitle: '首件重量(kg)',
232+
extraCountTitle: '续件重量(kg)',
233+
freeCountTitle: '包邮重量(kg)'
234+
}
235+
}
236+
if (chargeMod === 3) {
237+
columnTitle.value = {
238+
startCountTitle: '首件体积(m³)',
239+
extraCountTitle: '续件体积(m³)',
240+
freeCountTitle: '包邮体积(m³)'
241+
}
242+
}
243+
}
244+
245+
/** 初始化区域数据 */
246+
const initAreaData = async () => {
247+
formLoading.value = true
248+
try {
249+
const data = await getAreaTree(1)
250+
areaList.value = data
251+
} finally {
252+
formLoading.value = false
253+
}
254+
}
255+
/** 添加计费区域 */
256+
const addChargeArea = () => {
257+
const data = formData.value
258+
data.templateCharge.push({
259+
areaId: undefined,
260+
startCount: 1,
261+
startPrice: 1,
262+
extraCount: 1,
263+
extraPrice: 1
264+
})
265+
}
266+
/** 删除计费区域 */
267+
const deleteChargeArea = (index) => {
268+
const data = formData.value
269+
data.templateCharge.splice(index, 1)
270+
}
271+
/** 添加包邮区域 */
272+
const addFreeArea = () => {
273+
const data = formData.value
274+
data.templateFree.push({
275+
areaId: undefined,
276+
freeCount: 1,
277+
freePrice: 1
278+
})
279+
}
280+
/** 删除包邮区域 */
281+
const deleteFreeArea = (index) => {
282+
const data = formData.value
283+
data.templateFree.splice(index, 1)
284+
}
285+
286+
/** 初始化 **/
287+
onMounted(() => {
288+
initAreaData()
289+
})
290+
</script>

0 commit comments

Comments
 (0)