提交价格套餐功能
This commit is contained in:
wuweihua
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 分区方案 -->
|
||||
<basic-table
|
||||
ref="schemeTableRef"
|
||||
:columns="schemeColumns"
|
||||
:search-columns="schemeSearchColumns"
|
||||
:query="querySchemeList"
|
||||
row-key="zsId"
|
||||
@row-click="handleSchemeRowClick"
|
||||
>
|
||||
<template #toolbar="{ selection, ids }">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleSchemeAdd"
|
||||
v-hasPermi="['price:zone:add']"
|
||||
>新建分区方案</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="selection.length !== 1"
|
||||
@click="handleSchemeUpdate(selection[0])"
|
||||
v-hasPermi="['price:zone:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="!selection.length"
|
||||
@click="handleSchemeDelete(ids)"
|
||||
v-hasPermi="['price:zone:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<template #col-ssCode="{ row }">
|
||||
<el-tag :type="row.ssCode === 'on' ? 'success' : 'info'" size="small">
|
||||
{{ row.ssCode === 'on' ? 'on' : 'of' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #col-action="{ row }">
|
||||
<el-button link type="primary" icon="Edit" @click.stop="handleSchemeUpdate(row)" v-hasPermi="['price:zone:edit']">编辑</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click.stop="handleSchemeDelete(row.zsId)" v-hasPermi="['price:zone:remove']">删除</el-button>
|
||||
</template>
|
||||
</basic-table>
|
||||
|
||||
<!-- 区划明细 -->
|
||||
<el-card shadow="never" class="detail-card" v-loading="divisionLoading">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
区划明细
|
||||
<span v-if="selectedScheme" class="sub-hint">当前方案：{{ selectedScheme.zsName }}（zsId={{ selectedScheme.zsId }}）</span>
|
||||
<span v-else class="sub-hint">请点击上方方案行查看区划</span>
|
||||
</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="small"
|
||||
:disabled="!selectedScheme"
|
||||
@click="handleDivisionAdd"
|
||||
v-hasPermi="['price:zone:add']"
|
||||
>新增区划</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
:data="divisionList"
|
||||
border
|
||||
highlight-current-row
|
||||
row-key="zdId"
|
||||
empty-text="暂无区划数据"
|
||||
>
|
||||
<el-table-column label="zdId" prop="zdId" align="center" width="80" />
|
||||
<el-table-column label="区划代码" prop="zdCode" align="center" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="中文名" prop="znName" align="center" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="英文名" prop="znEname" align="center" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="国家数" prop="countryCount" align="center" width="90" />
|
||||
<el-table-column label="操作" align="center" width="240" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" icon="View" @click="openCountryDrawer(row)" v-hasPermi="['price:zone:query']">查看国家</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleDivisionUpdate(row)" v-hasPermi="['price:zone:edit']">编辑</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDivisionDelete(row.zdId)" v-hasPermi="['price:zone:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 方案表单 -->
|
||||
<el-dialog :title="schemeTitle" v-model="schemeOpen" width="560px" append-to-body>
|
||||
<el-form ref="schemeFormRef" :model="schemeForm" :rules="schemeRules" label-width="100px">
|
||||
<el-form-item label="方案名称" prop="zsName">
|
||||
<el-input v-model="schemeForm.zsName" placeholder="请输入分区方案名称" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="ssCode">
|
||||
<el-radio-group v-model="schemeForm.ssCode">
|
||||
<el-radio value="on">有效(on)</el-radio>
|
||||
<el-radio value="of">停用(of)</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品组" prop="pgCode">
|
||||
<el-input v-model="schemeForm.pgCode" placeholder="如 EXP / EMS / LINE" maxlength="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="渠道ID" prop="snId">
|
||||
<el-input v-model="schemeForm.snId" placeholder="请输入渠道 snId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="zsNote">
|
||||
<el-input v-model="schemeForm.zsNote" type="textarea" placeholder="请输入备注" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitSchemeForm">确 定</el-button>
|
||||
<el-button @click="schemeOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 区划表单 -->
|
||||
<el-dialog :title="divisionTitle" v-model="divisionOpen" width="560px" append-to-body>
|
||||
<el-form ref="divisionFormRef" :model="divisionForm" :rules="divisionRules" label-width="100px">
|
||||
<el-form-item label="区划代码" prop="zdCode">
|
||||
<el-input v-model="divisionForm.zdCode" placeholder="如 DHL-ASIA" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="中文名" prop="znName">
|
||||
<el-input v-model="divisionForm.znName" placeholder="请输入中文名" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="英文名" prop="znEname">
|
||||
<el-input v-model="divisionForm.znEname" placeholder="请输入英文名" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="zdSort">
|
||||
<el-input v-model="divisionForm.zdSort" placeholder="显示排序号" maxlength="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="znNote">
|
||||
<el-input v-model="divisionForm.znNote" type="textarea" placeholder="请输入备注" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitDivisionForm">确 定</el-button>
|
||||
<el-button @click="divisionOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 国家抽屉 -->
|
||||
<el-drawer v-model="countryDrawerVisible" size="640px" append-to-body>
|
||||
<template #header>
|
||||
<div class="drawer-head">
|
||||
<span class="drawer-title">区划国家</span>
|
||||
<span v-if="selectedDivision" class="drawer-sub">
|
||||
{{ selectedDivision.zdCode }} {{ selectedDivision.znName }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="drawer-toolbar">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="small"
|
||||
@click="handleCountryAdd"
|
||||
v-hasPermi="['price:zone:add']"
|
||||
>新增国家</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="countryLoading" :data="countryList" border row-key="zcId" empty-text="暂无国家">
|
||||
<el-table-column label="zcId" prop="zcId" align="center" width="80" />
|
||||
<el-table-column label="国家代码" prop="countryCode" align="center" width="100" />
|
||||
<el-table-column label="划分类型" prop="zcDividekind" align="center" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="divideKindTag(row.zcDividekind)">
|
||||
{{ divideKindLabel(row.zcDividekind) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" icon="Edit" @click="handleCountryUpdate(row)" v-hasPermi="['price:zone:edit']">编辑</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleCountryDelete(row.zcId)" v-hasPermi="['price:zone:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 国家表单 -->
|
||||
<el-dialog :title="countryTitle" v-model="countryOpen" width="480px" append-to-body>
|
||||
<el-form ref="countryFormRef" :model="countryForm" :rules="countryRules" label-width="100px">
|
||||
<el-form-item label="国家代码" prop="countryCode">
|
||||
<el-input v-model="countryForm.countryCode" placeholder="ISO两位码，如 DE" maxlength="2" style="text-transform: uppercase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="划分类型" prop="zcDividekind">
|
||||
<el-radio-group v-model="countryForm.zcDividekind">
|
||||
<el-radio value="C">国家(C)</el-radio>
|
||||
<el-radio value="T">城市(T)</el-radio>
|
||||
<el-radio value="P">邮编(P)</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitCountryForm">确 定</el-button>
|
||||
<el-button @click="countryOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="PriceZone">
|
||||
import {
|
||||
listScheme, getScheme, addScheme, updateScheme, delScheme,
|
||||
listDivision, addDivision, updateDivision, delDivision,
|
||||
listCountry, addCountry, updateCountry, delCountry
|
||||
} from '@/api/price/zone'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const schemeTableRef = ref()
|
||||
const selectedScheme = ref(null)
|
||||
const divisionList = ref([])
|
||||
const divisionLoading = ref(false)
|
||||
|
||||
const schemeOpen = ref(false)
|
||||
const schemeTitle = ref('')
|
||||
const schemeFormRef = ref()
|
||||
const schemeForm = ref({})
|
||||
const schemeRules = {
|
||||
zsName: [{ required: true, message: '方案名称不能为空', trigger: 'blur' }],
|
||||
ssCode: [{ required: true, message: '状态不能为空', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const divisionOpen = ref(false)
|
||||
const divisionTitle = ref('')
|
||||
const divisionFormRef = ref()
|
||||
const divisionForm = ref({})
|
||||
const divisionRules = {
|
||||
zdCode: [{ required: true, message: '区划代码不能为空', trigger: 'blur' }],
|
||||
znName: [{ required: true, message: '中文名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const countryDrawerVisible = ref(false)
|
||||
const selectedDivision = ref(null)
|
||||
const countryList = ref([])
|
||||
const countryLoading = ref(false)
|
||||
const countryOpen = ref(false)
|
||||
const countryTitle = ref('')
|
||||
const countryFormRef = ref()
|
||||
const countryForm = ref({})
|
||||
const countryRules = {
|
||||
countryCode: [
|
||||
{ required: true, message: '国家代码不能为空', trigger: 'blur' },
|
||||
{ min: 2, max: 2, message: '国家代码须为2位', trigger: 'blur' }
|
||||
],
|
||||
zcDividekind: [{ required: true, message: '划分类型不能为空', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const schemeSearchColumns = [
|
||||
{ label: '方案名称', prop: 'zsName', component: 'input', placeholder: '请输入方案名称', width: '220px' },
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'ssCode',
|
||||
component: 'select',
|
||||
options: [
|
||||
{ label: '有效(on)', value: 'on' },
|
||||
{ label: '停用(of)', value: 'of' }
|
||||
],
|
||||
placeholder: '状态',
|
||||
width: '160px'
|
||||
}
|
||||
]
|
||||
|
||||
const schemeColumns = [
|
||||
{ label: 'zsId', prop: 'zsId', align: 'center', width: 80 },
|
||||
{ label: '方案名称', prop: 'zsName', align: 'center', minWidth: 140 },
|
||||
{ label: '状态', prop: 'ssCode', align: 'center', width: 90 },
|
||||
{ label: '产品组', prop: 'pgCode', align: 'center', width: 100 },
|
||||
{ label: '渠道', prop: 'snId', align: 'center', width: 100 },
|
||||
{ label: '区划数', prop: 'divisionCount', align: 'center', width: 90 },
|
||||
{ label: '操作', prop: 'action', align: 'center', width: 160, showInToolbar: false }
|
||||
]
|
||||
|
||||
function querySchemeList(params) {
|
||||
return listScheme(params)
|
||||
}
|
||||
|
||||
function handleSchemeRowClick(row) {
|
||||
if (!row?.zsId) return
|
||||
selectedScheme.value = row
|
||||
loadDivisionList(row.zsId)
|
||||
}
|
||||
|
||||
function loadDivisionList(zsId) {
|
||||
if (!zsId) {
|
||||
divisionList.value = []
|
||||
return
|
||||
}
|
||||
divisionLoading.value = true
|
||||
listDivision({ zsId, pageNum: 1, pageSize: 200 }).then(res => {
|
||||
divisionList.value = res.rows || []
|
||||
}).catch(() => {
|
||||
divisionList.value = []
|
||||
}).finally(() => {
|
||||
divisionLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function resetSchemeForm() {
|
||||
schemeForm.value = {
|
||||
zsId: undefined,
|
||||
zsName: undefined,
|
||||
ssCode: 'on',
|
||||
pgCode: undefined,
|
||||
snId: undefined,
|
||||
zsNote: undefined
|
||||
}
|
||||
proxy.resetForm('schemeFormRef')
|
||||
}
|
||||
|
||||
function handleSchemeAdd() {
|
||||
resetSchemeForm()
|
||||
schemeOpen.value = true
|
||||
schemeTitle.value = '新建分区方案'
|
||||
}
|
||||
|
||||
function handleSchemeUpdate(row) {
|
||||
resetSchemeForm()
|
||||
getScheme(row.zsId).then(res => {
|
||||
schemeForm.value = res.data || {}
|
||||
schemeOpen.value = true
|
||||
schemeTitle.value = '编辑分区方案'
|
||||
})
|
||||
}
|
||||
|
||||
function submitSchemeForm() {
|
||||
proxy.$refs['schemeFormRef'].validate(valid => {
|
||||
if (!valid) return
|
||||
const payload = { ...schemeForm.value }
|
||||
if (payload.snId === '' || payload.snId === null) {
|
||||
payload.snId = undefined
|
||||
} else if (payload.snId !== undefined) {
|
||||
payload.snId = Number(payload.snId)
|
||||
}
|
||||
const req = payload.zsId != null ? updateScheme(payload) : addScheme(payload)
|
||||
req.then(() => {
|
||||
proxy.$modal.msgSuccess(payload.zsId != null ? '修改成功' : '新增成功')
|
||||
schemeOpen.value = false
|
||||
schemeTableRef.value.refresh()
|
||||
if (selectedScheme.value?.zsId === payload.zsId) {
|
||||
loadDivisionList(payload.zsId)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleSchemeDelete(zsIds) {
|
||||
proxy.$modal.confirm('是否确认删除分区方案编号为"' + zsIds + '"的数据项？').then(() => {
|
||||
return delScheme(zsIds)
|
||||
}).then(() => {
|
||||
schemeTableRef.value.refresh()
|
||||
if (selectedScheme.value && String(zsIds).split(',').map(String).includes(String(selectedScheme.value.zsId))) {
|
||||
selectedScheme.value = null
|
||||
divisionList.value = []
|
||||
}
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function resetDivisionForm() {
|
||||
divisionForm.value = {
|
||||
zdId: undefined,
|
||||
zsId: selectedScheme.value?.zsId,
|
||||
zdCode: undefined,
|
||||
znName: undefined,
|
||||
znEname: undefined,
|
||||
zdSort: undefined,
|
||||
znNote: undefined
|
||||
}
|
||||
proxy.resetForm('divisionFormRef')
|
||||
}
|
||||
|
||||
function handleDivisionAdd() {
|
||||
if (!selectedScheme.value) {
|
||||
proxy.$modal.msgWarning('请先选择分区方案')
|
||||
return
|
||||
}
|
||||
resetDivisionForm()
|
||||
divisionOpen.value = true
|
||||
divisionTitle.value = '新增区划'
|
||||
}
|
||||
|
||||
function handleDivisionUpdate(row) {
|
||||
resetDivisionForm()
|
||||
divisionForm.value = { ...row }
|
||||
divisionOpen.value = true
|
||||
divisionTitle.value = '编辑区划'
|
||||
}
|
||||
|
||||
function submitDivisionForm() {
|
||||
proxy.$refs['divisionFormRef'].validate(valid => {
|
||||
if (!valid) return
|
||||
const payload = { ...divisionForm.value, zsId: selectedScheme.value.zsId }
|
||||
const req = payload.zdId != null ? updateDivision(payload) : addDivision(payload)
|
||||
req.then(() => {
|
||||
proxy.$modal.msgSuccess(payload.zdId != null ? '修改成功' : '新增成功')
|
||||
divisionOpen.value = false
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
schemeTableRef.value.refresh()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleDivisionDelete(zdIds) {
|
||||
proxy.$modal.confirm('是否确认删除区划编号为"' + zdIds + '"的数据项？').then(() => {
|
||||
return delDivision(zdIds)
|
||||
}).then(() => {
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
schemeTableRef.value.refresh()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function divideKindLabel(kind) {
|
||||
const map = { C: '国家(C)', T: '城市(T)', P: '邮编(P)' }
|
||||
return map[kind] || kind
|
||||
}
|
||||
|
||||
function divideKindTag(kind) {
|
||||
const map = { C: 'primary', T: 'warning', P: 'success' }
|
||||
return map[kind] || 'info'
|
||||
}
|
||||
|
||||
function openCountryDrawer(row) {
|
||||
selectedDivision.value = row
|
||||
countryDrawerVisible.value = true
|
||||
loadCountryList(row.zdId)
|
||||
}
|
||||
|
||||
function loadCountryList(zdId) {
|
||||
if (!zdId) {
|
||||
countryList.value = []
|
||||
return
|
||||
}
|
||||
countryLoading.value = true
|
||||
listCountry({ zdId, pageNum: 1, pageSize: 500 }).then(res => {
|
||||
countryList.value = res.rows || []
|
||||
}).catch(() => {
|
||||
countryList.value = []
|
||||
}).finally(() => {
|
||||
countryLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function resetCountryForm() {
|
||||
countryForm.value = {
|
||||
zcId: undefined,
|
||||
zdId: selectedDivision.value?.zdId,
|
||||
countryCode: undefined,
|
||||
zcDividekind: 'C'
|
||||
}
|
||||
proxy.resetForm('countryFormRef')
|
||||
}
|
||||
|
||||
function handleCountryAdd() {
|
||||
resetCountryForm()
|
||||
countryOpen.value = true
|
||||
countryTitle.value = '新增国家'
|
||||
}
|
||||
|
||||
function handleCountryUpdate(row) {
|
||||
resetCountryForm()
|
||||
countryForm.value = { ...row }
|
||||
countryOpen.value = true
|
||||
countryTitle.value = '编辑国家'
|
||||
}
|
||||
|
||||
function submitCountryForm() {
|
||||
proxy.$refs['countryFormRef'].validate(valid => {
|
||||
if (!valid) return
|
||||
const payload = {
|
||||
...countryForm.value,
|
||||
zdId: selectedDivision.value.zdId,
|
||||
countryCode: (countryForm.value.countryCode || '').toUpperCase()
|
||||
}
|
||||
const req = payload.zcId != null ? updateCountry(payload) : addCountry(payload)
|
||||
req.then(() => {
|
||||
proxy.$modal.msgSuccess(payload.zcId != null ? '修改成功' : '新增成功')
|
||||
countryOpen.value = false
|
||||
loadCountryList(selectedDivision.value.zdId)
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleCountryDelete(zcIds) {
|
||||
proxy.$modal.confirm('是否确认删除国家编号为"' + zcIds + '"的数据项？').then(() => {
|
||||
return delCountry(zcIds)
|
||||
}).then(() => {
|
||||
loadCountryList(selectedDivision.value.zdId)
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sub-hint {
|
||||
margin-left: 10px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.drawer-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.drawer-sub {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
.drawer-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user