增加分区功能
This commit is contained in:
wuweihua
@@ -1,523 +1,513 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 分区方案 -->
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="mb16"
|
||||
title="国家来自 bms_region；点击国家查看分区，点击「分区点击」查看邮编明细。导入 Excel 时需 sheet 名以「分区」结尾且能匹配国家表。"
|
||||
/>
|
||||
|
||||
<basic-table
|
||||
ref="schemeTableRef"
|
||||
:columns="schemeColumns"
|
||||
:search-columns="schemeSearchColumns"
|
||||
:query="querySchemeList"
|
||||
row-key="zsId"
|
||||
@row-click="handleSchemeRowClick"
|
||||
ref="countryTableRef"
|
||||
:columns="countryColumns"
|
||||
:search-columns="countrySearchColumns"
|
||||
:query="queryCountryList"
|
||||
row-key="regionId"
|
||||
@row-click="handleCountryRowClick"
|
||||
>
|
||||
<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-button type="primary" plain icon="Plus" @click="handlePickRegionAddZone" 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-button type="danger" plain icon="Delete" :disabled="!selection.length" @click="handleCountryDelete(ids)" v-hasPermi="['price:zone:remove']">清空分区</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-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['price:zone:add']">导入 Excel</el-button>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<template #col-ssCode="{ row }">
|
||||
<el-tag :type="row.ssCode === 'on' ? 'success' : 'info'" size="small">
|
||||
{{ row.ssCode === 'on' ? 'on' : 'of' }}
|
||||
<template #col-status="{ row }">
|
||||
<el-tag :type="String(row.status) === '0' ? 'success' : 'info'" size="small">
|
||||
{{ String(row.status) === '0' ? '正常' : '停用' }}
|
||||
</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>
|
||||
<el-button link type="primary" icon="List" @click.stop="handleCountryRowClick(row)" v-hasPermi="['price:zone:query']">分区</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click.stop="handleCountryDelete(row.regionId)" v-hasPermi="['price:zone:remove']">清空</el-button>
|
||||
</template>
|
||||
</basic-table>
|
||||
|
||||
<!-- 区划明细 -->
|
||||
<el-card shadow="never" class="detail-card" v-loading="divisionLoading">
|
||||
<el-card shadow="never" class="detail-card" v-loading="zoneLoading">
|
||||
<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 v-if="selectedCountry" class="sub-hint">
|
||||
当前：{{ selectedCountry.countryNameCn }}
|
||||
<template v-if="selectedCountry.countryCode2">（{{ selectedCountry.countryCode2 }}）</template>
|
||||
，共 {{ zoneList.length }} 个分区
|
||||
</span>
|
||||
<span v-else class="sub-hint">请点击上方国家行查看分区</span>
|
||||
</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="small"
|
||||
:disabled="!selectedScheme"
|
||||
@click="handleDivisionAdd"
|
||||
:disabled="!selectedCountry"
|
||||
@click="handleZoneAdd"
|
||||
v-hasPermi="['price:zone:add']"
|
||||
>新增区划</el-button>
|
||||
>新增分区</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
:data="divisionList"
|
||||
:data="zoneList"
|
||||
border
|
||||
highlight-current-row
|
||||
row-key="zdId"
|
||||
empty-text="暂无区划数据"
|
||||
row-key="zoneId"
|
||||
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">
|
||||
<el-table-column label="国家" align="center" min-width="180">
|
||||
<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>
|
||||
<div class="zone-country-cell">
|
||||
<div class="zone-title">{{ row.zoneName || ((selectedCountry?.countryNameCn || '') + '(' + row.zoneCode + ')') }}</div>
|
||||
<el-button link type="primary" class="zone-click" @click="openDetailDrawer(row)" v-hasPermi="['price:zone:query']">分区点击</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="国家编码" prop="countryCode" align="center" width="110" />
|
||||
<el-table-column label="分区代码" prop="zoneCode" align="center" width="120" />
|
||||
<el-table-column label="邮编数" prop="detailCount" align="center" width="100" />
|
||||
<el-table-column label="排序" prop="zoneSort" align="center" width="80" />
|
||||
<el-table-column label="操作" align="center" width="220" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" icon="View" @click="openDetailDrawer(row)" v-hasPermi="['price:zone:query']">明细</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleZoneUpdate(row)" v-hasPermi="['price:zone:edit']">编辑</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleZoneDelete(row.zoneId)" 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-dialog :title="zoneTitle" v-model="zoneOpen" width="520px" append-to-body>
|
||||
<el-form ref="zoneFormRef" :model="zoneForm" :rules="zoneRules" label-width="100px">
|
||||
<el-form-item v-if="!selectedCountry || zoneForm._pickRegion" label="国家" prop="regionId">
|
||||
<el-select
|
||||
v-model="zoneForm.regionId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="从 bms_region 选择国家"
|
||||
style="width: 100%"
|
||||
@change="onZoneRegionChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="r in regionOptions"
|
||||
:key="r.regionId"
|
||||
:label="regionLabel(r)"
|
||||
:value="r.regionId"
|
||||
/>
|
||||
</el-select>
|
||||
</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 v-else label="国家">
|
||||
<span>{{ selectedCountry.countryNameCn }} ({{ selectedCountry.countryCode2 }})</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品组" prop="pgCode">
|
||||
<el-input v-model="schemeForm.pgCode" placeholder="如 EXP / EMS / LINE" maxlength="10" />
|
||||
<el-form-item label="国家编码" prop="countryCode">
|
||||
<el-input v-model="zoneForm.countryCode" placeholder="ISO2，如 AU" maxlength="10" style="text-transform: uppercase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="渠道ID" prop="snId">
|
||||
<el-input v-model="schemeForm.snId" placeholder="请输入渠道 snId" />
|
||||
<el-form-item label="分区代码" prop="zoneCode">
|
||||
<el-input v-model="zoneForm.zoneCode" placeholder="如 1区" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="zsNote">
|
||||
<el-input v-model="schemeForm.zsNote" type="textarea" placeholder="请输入备注" :rows="3" />
|
||||
<el-form-item label="显示名" prop="zoneName">
|
||||
<el-input v-model="zoneForm.zoneName" placeholder="如 澳大利亚(1区)" maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="zoneSort">
|
||||
<el-input-number v-model="zoneForm.zoneSort" :min="0" :max="9999" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="zoneForm.remark" type="textarea" :rows="3" placeholder="备注" />
|
||||
</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>
|
||||
<el-button type="primary" @click="submitZoneForm">确 定</el-button>
|
||||
<el-button @click="zoneOpen = 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>
|
||||
<el-drawer v-model="detailDrawerVisible" size="720px" 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 class="drawer-title">邮编明细</span>
|
||||
<span v-if="selectedZone" class="drawer-sub">
|
||||
{{ selectedZone.zoneName || selectedZone.zoneCode }}
|
||||
（{{ detailTotal }}条）
|
||||
</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>
|
||||
<el-input
|
||||
v-model="detailQuery.postcode"
|
||||
clearable
|
||||
placeholder="搜索邮编"
|
||||
style="width: 200px; margin-right: 8px"
|
||||
@keyup.enter="loadDetailList"
|
||||
/>
|
||||
<el-button type="primary" plain icon="Search" size="small" @click="loadDetailList">搜索</el-button>
|
||||
<el-button type="primary" plain icon="Plus" size="small" @click="handleDetailAdd" 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 v-loading="detailLoading" :data="detailList" border row-key="detailId" empty-text="暂无邮编">
|
||||
<el-table-column label="ID" prop="detailId" align="center" width="90" />
|
||||
<el-table-column label="邮编" prop="postcode" align="center" min-width="140" />
|
||||
<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>
|
||||
<el-button link type="primary" icon="Edit" @click="handleDetailUpdate(row)" v-hasPermi="['price:zone:edit']">编辑</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDetailDelete(row.detailId)" v-hasPermi="['price:zone:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="drawer-pager">
|
||||
<el-pagination
|
||||
v-model:current-page="detailQuery.pageNum"
|
||||
v-model:page-size="detailQuery.pageSize"
|
||||
:total="detailTotal"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="loadDetailList"
|
||||
@current-change="loadDetailList"
|
||||
/>
|
||||
</div>
|
||||
</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-dialog :title="detailTitle" v-model="detailOpen" width="420px" append-to-body>
|
||||
<el-form ref="detailFormRef" :model="detailForm" :rules="detailRules" label-width="80px">
|
||||
<el-form-item label="邮编" prop="postcode">
|
||||
<el-input v-model="detailForm.postcode" placeholder="请输入邮编" maxlength="32" />
|
||||
</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>
|
||||
<el-button type="primary" @click="submitDetailForm">确 定</el-button>
|
||||
<el-button @click="detailOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<excel-import-dialog
|
||||
ref="importRef"
|
||||
title="分区 Excel 导入"
|
||||
action="/price/zone/importData"
|
||||
width="560px"
|
||||
:show-update-support="false"
|
||||
@success="onImportSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="PriceZone">
|
||||
import ExcelImportDialog from '@/components/ExcelImportDialog'
|
||||
import { listRegionOptions } from '@/api/data/region'
|
||||
import {
|
||||
listScheme, getScheme, addScheme, updateScheme, delScheme,
|
||||
listDivision, addDivision, updateDivision, delDivision,
|
||||
listCountry, addCountry, updateCountry, delCountry
|
||||
listCountry, delCountryZones,
|
||||
listZone, addZone, updateZone, delZone,
|
||||
listDetail, addDetail, updateDetail, delDetail
|
||||
} from '@/api/price/zone'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const schemeTableRef = ref()
|
||||
const selectedScheme = ref(null)
|
||||
const divisionList = ref([])
|
||||
const divisionLoading = ref(false)
|
||||
const countryTableRef = ref()
|
||||
const selectedCountry = ref(null)
|
||||
const zoneList = ref([])
|
||||
const zoneLoading = ref(false)
|
||||
const regionOptions = ref([])
|
||||
|
||||
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 zoneOpen = ref(false)
|
||||
const zoneTitle = ref('')
|
||||
const zoneFormRef = ref()
|
||||
const zoneForm = ref({})
|
||||
const zoneRules = {
|
||||
regionId: [{ required: true, message: '请选择国家', trigger: 'change' }],
|
||||
countryCode: [{ required: true, message: '国家编码不能为空', trigger: 'blur' }],
|
||||
zoneCode: [{ required: true, message: '分区代码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
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 detailDrawerVisible = ref(false)
|
||||
const selectedZone = ref(null)
|
||||
const detailList = ref([])
|
||||
const detailLoading = ref(false)
|
||||
const detailTotal = ref(0)
|
||||
const detailQuery = ref({ pageNum: 1, pageSize: 50, postcode: undefined })
|
||||
const detailOpen = ref(false)
|
||||
const detailTitle = ref('')
|
||||
const detailFormRef = ref()
|
||||
const detailForm = ref({})
|
||||
const detailRules = {
|
||||
postcode: [{ 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 importRef = ref()
|
||||
|
||||
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 countrySearchColumns = [
|
||||
{ label: '国家名称', prop: 'countryNameCn', component: 'input', placeholder: '请输入国家名称', width: '220px' },
|
||||
{ label: '国家代码', prop: 'countryCode2', component: 'input', placeholder: 'AU', width: '140px' }
|
||||
]
|
||||
|
||||
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 },
|
||||
const countryColumns = [
|
||||
{ label: 'ID', prop: 'regionId', align: 'center', width: 80 },
|
||||
{ label: '国家', prop: 'countryNameCn', align: 'center', minWidth: 140 },
|
||||
{ label: '代码', prop: 'countryCode2', align: 'center', width: 90 },
|
||||
{ label: '状态', prop: 'status', align: 'center', width: 90 },
|
||||
{ label: '分区数', prop: 'zoneCount', align: 'center', width: 90 },
|
||||
{ label: '邮编数', prop: 'detailCount', align: 'center', width: 100 },
|
||||
{ label: '操作', prop: 'action', align: 'center', width: 160, showInToolbar: false }
|
||||
]
|
||||
|
||||
function querySchemeList(params) {
|
||||
return listScheme(params)
|
||||
function queryCountryList(params) {
|
||||
return listCountry(params)
|
||||
}
|
||||
|
||||
function handleSchemeRowClick(row) {
|
||||
if (!row?.zsId) return
|
||||
selectedScheme.value = row
|
||||
loadDivisionList(row.zsId)
|
||||
function regionLabel(r) {
|
||||
const cn = r.countryNameCn || r.countryNameEn || ''
|
||||
return cn ? `${r.flagEmoji || ''} ${cn} (${r.countryCode2})`.trim() : r.countryCode2
|
||||
}
|
||||
|
||||
function loadDivisionList(zsId) {
|
||||
if (!zsId) {
|
||||
divisionList.value = []
|
||||
function ensureRegions() {
|
||||
if (regionOptions.value.length) return Promise.resolve()
|
||||
return listRegionOptions().then(res => {
|
||||
regionOptions.value = res.data || []
|
||||
})
|
||||
}
|
||||
|
||||
function onZoneRegionChange(regionId) {
|
||||
const r = regionOptions.value.find(item => item.regionId === regionId)
|
||||
zoneForm.value.countryCode = r?.countryCode2 ? String(r.countryCode2).toUpperCase() : undefined
|
||||
}
|
||||
|
||||
function handleCountryRowClick(row) {
|
||||
if (!row?.regionId) return
|
||||
selectedCountry.value = row
|
||||
loadZoneList(row.regionId)
|
||||
}
|
||||
|
||||
function loadZoneList(regionId) {
|
||||
if (!regionId) {
|
||||
zoneList.value = []
|
||||
return
|
||||
}
|
||||
divisionLoading.value = true
|
||||
listDivision({ zsId, pageNum: 1, pageSize: 200 }).then(res => {
|
||||
divisionList.value = res.rows || []
|
||||
zoneLoading.value = true
|
||||
listZone({ regionId, pageNum: 1, pageSize: 200 }).then(res => {
|
||||
zoneList.value = res.rows || []
|
||||
}).catch(() => {
|
||||
divisionList.value = []
|
||||
zoneList.value = []
|
||||
}).finally(() => {
|
||||
divisionLoading.value = false
|
||||
zoneLoading.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)
|
||||
function handleCountryDelete(regionIds) {
|
||||
proxy.$modal.confirm('是否清空国家 regionId="' + regionIds + '" 下的全部分区与邮编？（不会删除 bms_region 国家主数据）').then(() => {
|
||||
return delCountryZones(regionIds)
|
||||
}).then(() => {
|
||||
countryTableRef.value.refresh()
|
||||
if (selectedCountry.value && String(regionIds).split(',').map(String).includes(String(selectedCountry.value.regionId))) {
|
||||
selectedCountry.value = null
|
||||
zoneList.value = []
|
||||
}
|
||||
const req = payload.zsId != null ? updateScheme(payload) : addScheme(payload)
|
||||
proxy.$modal.msgSuccess('清空成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function resetZoneForm(pickRegion) {
|
||||
zoneForm.value = {
|
||||
zoneId: undefined,
|
||||
regionId: pickRegion ? undefined : selectedCountry.value?.regionId,
|
||||
countryCode: pickRegion ? undefined : (selectedCountry.value?.countryCode2 || undefined),
|
||||
zoneCode: undefined,
|
||||
zoneName: undefined,
|
||||
zoneSort: 0,
|
||||
remark: undefined,
|
||||
_pickRegion: !!pickRegion
|
||||
}
|
||||
proxy.resetForm('zoneFormRef')
|
||||
}
|
||||
|
||||
function handlePickRegionAddZone() {
|
||||
ensureRegions().then(() => {
|
||||
resetZoneForm(true)
|
||||
zoneOpen.value = true
|
||||
zoneTitle.value = '为国家新增分区'
|
||||
})
|
||||
}
|
||||
|
||||
function handleZoneAdd() {
|
||||
if (!selectedCountry.value) {
|
||||
handlePickRegionAddZone()
|
||||
return
|
||||
}
|
||||
resetZoneForm(false)
|
||||
zoneOpen.value = true
|
||||
zoneTitle.value = '新增分区'
|
||||
}
|
||||
|
||||
function handleZoneUpdate(row) {
|
||||
resetZoneForm(false)
|
||||
zoneForm.value = { ...row, _pickRegion: false }
|
||||
zoneOpen.value = true
|
||||
zoneTitle.value = '编辑分区'
|
||||
}
|
||||
|
||||
function submitZoneForm() {
|
||||
proxy.$refs['zoneFormRef'].validate(valid => {
|
||||
if (!valid) return
|
||||
const regionId = zoneForm.value.regionId || selectedCountry.value?.regionId
|
||||
const region = regionOptions.value.find(r => r.regionId === regionId)
|
||||
|| selectedCountry.value
|
||||
const cn = region?.countryNameCn || ''
|
||||
const code = (zoneForm.value.countryCode || region?.countryCode2 || selectedCountry.value?.countryCode2 || '')
|
||||
.toString().trim().toUpperCase()
|
||||
const payload = {
|
||||
...zoneForm.value,
|
||||
regionId,
|
||||
countryCode: code,
|
||||
zoneName: zoneForm.value.zoneName || (cn ? (cn + '(' + zoneForm.value.zoneCode + ')') : zoneForm.value.zoneCode)
|
||||
}
|
||||
delete payload._pickRegion
|
||||
delete payload.detailCount
|
||||
delete payload.countryNameCn
|
||||
delete payload.countryCode2
|
||||
const req = payload.zoneId != null ? updateZone(payload) : addZone(payload)
|
||||
req.then(() => {
|
||||
proxy.$modal.msgSuccess(payload.zsId != null ? '修改成功' : '新增成功')
|
||||
schemeOpen.value = false
|
||||
schemeTableRef.value.refresh()
|
||||
if (selectedScheme.value?.zsId === payload.zsId) {
|
||||
loadDivisionList(payload.zsId)
|
||||
proxy.$modal.msgSuccess(payload.zoneId != null ? '修改成功' : '新增成功')
|
||||
zoneOpen.value = false
|
||||
countryTableRef.value.refresh()
|
||||
if (selectedCountry.value?.regionId === regionId) {
|
||||
loadZoneList(regionId)
|
||||
} else {
|
||||
selectedCountry.value = {
|
||||
regionId,
|
||||
countryNameCn: cn || region?.countryNameCn,
|
||||
countryCode2: region?.countryCode2
|
||||
}
|
||||
loadZoneList(regionId)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleSchemeDelete(zsIds) {
|
||||
proxy.$modal.confirm('是否确认删除分区方案编号为"' + zsIds + '"的数据项？').then(() => {
|
||||
return delScheme(zsIds)
|
||||
function handleZoneDelete(zoneIds) {
|
||||
proxy.$modal.confirm('是否确认删除分区编号为"' + zoneIds + '"的数据？将同时删除邮编明细。').then(() => {
|
||||
return delZone(zoneIds)
|
||||
}).then(() => {
|
||||
schemeTableRef.value.refresh()
|
||||
if (selectedScheme.value && String(zsIds).split(',').map(String).includes(String(selectedScheme.value.zsId))) {
|
||||
selectedScheme.value = null
|
||||
divisionList.value = []
|
||||
}
|
||||
loadZoneList(selectedCountry.value.regionId)
|
||||
countryTableRef.value.refresh()
|
||||
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 openDetailDrawer(row) {
|
||||
selectedZone.value = row
|
||||
detailQuery.value = { pageNum: 1, pageSize: 50, postcode: undefined }
|
||||
detailDrawerVisible.value = true
|
||||
loadDetailList()
|
||||
}
|
||||
|
||||
function handleDivisionAdd() {
|
||||
if (!selectedScheme.value) {
|
||||
proxy.$modal.msgWarning('请先选择分区方案')
|
||||
function loadDetailList() {
|
||||
if (!selectedZone.value?.zoneId) {
|
||||
detailList.value = []
|
||||
detailTotal.value = 0
|
||||
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 || []
|
||||
detailLoading.value = true
|
||||
listDetail({
|
||||
zoneId: selectedZone.value.zoneId,
|
||||
postcode: detailQuery.value.postcode || undefined,
|
||||
pageNum: detailQuery.value.pageNum,
|
||||
pageSize: detailQuery.value.pageSize
|
||||
}).then(res => {
|
||||
detailList.value = res.rows || []
|
||||
detailTotal.value = res.total || 0
|
||||
}).catch(() => {
|
||||
countryList.value = []
|
||||
detailList.value = []
|
||||
detailTotal.value = 0
|
||||
}).finally(() => {
|
||||
countryLoading.value = false
|
||||
detailLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function resetCountryForm() {
|
||||
countryForm.value = {
|
||||
zcId: undefined,
|
||||
zdId: selectedDivision.value?.zdId,
|
||||
countryCode: undefined,
|
||||
zcDividekind: 'C'
|
||||
function resetDetailForm() {
|
||||
detailForm.value = {
|
||||
detailId: undefined,
|
||||
zoneId: selectedZone.value?.zoneId,
|
||||
postcode: undefined
|
||||
}
|
||||
proxy.resetForm('countryFormRef')
|
||||
proxy.resetForm('detailFormRef')
|
||||
}
|
||||
|
||||
function handleCountryAdd() {
|
||||
resetCountryForm()
|
||||
countryOpen.value = true
|
||||
countryTitle.value = '新增国家'
|
||||
function handleDetailAdd() {
|
||||
resetDetailForm()
|
||||
detailOpen.value = true
|
||||
detailTitle.value = '新增邮编'
|
||||
}
|
||||
|
||||
function handleCountryUpdate(row) {
|
||||
resetCountryForm()
|
||||
countryForm.value = { ...row }
|
||||
countryOpen.value = true
|
||||
countryTitle.value = '编辑国家'
|
||||
function handleDetailUpdate(row) {
|
||||
resetDetailForm()
|
||||
detailForm.value = { ...row }
|
||||
detailOpen.value = true
|
||||
detailTitle.value = '编辑邮编'
|
||||
}
|
||||
|
||||
function submitCountryForm() {
|
||||
proxy.$refs['countryFormRef'].validate(valid => {
|
||||
function submitDetailForm() {
|
||||
proxy.$refs['detailFormRef'].validate(valid => {
|
||||
if (!valid) return
|
||||
const payload = {
|
||||
...countryForm.value,
|
||||
zdId: selectedDivision.value.zdId,
|
||||
countryCode: (countryForm.value.countryCode || '').toUpperCase()
|
||||
...detailForm.value,
|
||||
zoneId: selectedZone.value.zoneId,
|
||||
postcode: String(detailForm.value.postcode || '').trim()
|
||||
}
|
||||
const req = payload.zcId != null ? updateCountry(payload) : addCountry(payload)
|
||||
const req = payload.detailId != null ? updateDetail(payload) : addDetail(payload)
|
||||
req.then(() => {
|
||||
proxy.$modal.msgSuccess(payload.zcId != null ? '修改成功' : '新增成功')
|
||||
countryOpen.value = false
|
||||
loadCountryList(selectedDivision.value.zdId)
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
proxy.$modal.msgSuccess(payload.detailId != null ? '修改成功' : '新增成功')
|
||||
detailOpen.value = false
|
||||
loadDetailList()
|
||||
loadZoneList(selectedCountry.value.regionId)
|
||||
countryTableRef.value.refresh()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleCountryDelete(zcIds) {
|
||||
proxy.$modal.confirm('是否确认删除国家编号为"' + zcIds + '"的数据项？').then(() => {
|
||||
return delCountry(zcIds)
|
||||
function handleDetailDelete(detailIds) {
|
||||
proxy.$modal.confirm('是否确认删除邮编编号为"' + detailIds + '"的数据？').then(() => {
|
||||
return delDetail(detailIds)
|
||||
}).then(() => {
|
||||
loadCountryList(selectedDivision.value.zdId)
|
||||
loadDivisionList(selectedScheme.value.zsId)
|
||||
loadDetailList()
|
||||
loadZoneList(selectedCountry.value.regionId)
|
||||
countryTableRef.value.refresh()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function handleImport() {
|
||||
importRef.value.open()
|
||||
}
|
||||
|
||||
function onImportSuccess() {
|
||||
countryTableRef.value.refresh()
|
||||
if (selectedCountry.value?.regionId) {
|
||||
loadZoneList(selectedCountry.value.regionId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.mb16 { margin-bottom: 16px; }
|
||||
.detail-card { margin-top: 16px; }
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -529,20 +519,22 @@ function handleCountryDelete(zcIds) {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.zone-country-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.zone-title { font-weight: 500; }
|
||||
.zone-click { padding: 0; height: auto; font-size: 12px; }
|
||||
.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;
|
||||
}
|
||||
.drawer-title { font-size: 16px; font-weight: 600; }
|
||||
.drawer-sub { color: #909399; font-size: 13px; }
|
||||
.drawer-toolbar { margin-bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
|
||||
.drawer-pager { margin-top: 16px; display: flex; justify-content: flex-end; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user