liuminghui
125 lines
4.1 KiB
Vue
125 lines
4.1 KiB
Vue
<template>
|
||
<el-drawer v-model="visible" size="760px" append-to-body>
|
||
<template #header>
|
||
<div class="drawer-head">
|
||
<span class="drawer-title">邮编明细</span>
|
||
<span v-if="zone" class="drawer-sub">{{ zone.zoneName }}（{{ total }} 条）</span>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="drawer-toolbar">
|
||
<el-input v-model="query.postcode" clearable placeholder="搜索邮编" style="width: 200px" @keyup.enter="loadList" />
|
||
<el-button type="primary" plain icon="Search" size="small" @click="loadList">搜索</el-button>
|
||
<el-button type="primary" plain icon="Plus" size="small" @click="handleAdd" v-hasPermi="['data:payPostcode:edit']">新增邮编</el-button>
|
||
</div>
|
||
|
||
<el-table v-loading="loading" :data="list" border row-key="lineId" empty-text="暂无邮编">
|
||
<el-table-column label="地段" prop="cityName" min-width="140" show-overflow-tooltip>
|
||
<template #default="{ row }">{{ row.cityName || row.regionName || '-' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="邮编" prop="postcode" min-width="140" show-overflow-tooltip />
|
||
<el-table-column label="截止邮编" prop="postcodeEnd" width="140" show-overflow-tooltip />
|
||
<el-table-column label="操作" width="160" align="center">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" icon="Edit" @click="handleEdit(row)" v-hasPermi="['data:payPostcode:edit']">编辑</el-button>
|
||
<el-button link type="primary" icon="Delete" @click="handleDelete(row)" v-hasPermi="['data:payPostcode:remove']">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="drawer-pager">
|
||
<el-pagination
|
||
v-model:current-page="query.pageNum"
|
||
v-model:page-size="query.pageSize"
|
||
:total="total"
|
||
:page-sizes="[20, 50, 100, 200]"
|
||
layout="total, sizes, prev, pager, next"
|
||
@size-change="loadList"
|
||
@current-change="loadList"
|
||
/>
|
||
</div>
|
||
|
||
<pay-postcode-form-dialog ref="formRef" @success="onChanged" />
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script setup name="PayPostcodeDrawer">
|
||
import { listPayPostcodeLine, delPayPostcodeLine } from '@/api/data/payPostcode'
|
||
import PayPostcodeFormDialog from './PayPostcodeFormDialog.vue'
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
const emit = defineEmits(['changed'])
|
||
|
||
const visible = ref(false)
|
||
const loading = ref(false)
|
||
const country = ref(null)
|
||
const zone = ref(null)
|
||
const list = ref([])
|
||
const total = ref(0)
|
||
const query = ref({ pageNum: 1, pageSize: 50, postcode: '' })
|
||
const formRef = ref()
|
||
|
||
function open(countryRow, zoneRow) {
|
||
country.value = countryRow
|
||
zone.value = zoneRow
|
||
query.value = { pageNum: 1, pageSize: 50, postcode: '' }
|
||
visible.value = true
|
||
loadList()
|
||
}
|
||
|
||
function loadList() {
|
||
if (!zone.value) {
|
||
list.value = []
|
||
total.value = 0
|
||
return
|
||
}
|
||
loading.value = true
|
||
listPayPostcodeLine({
|
||
countryCode: country.value?.countryCode,
|
||
countryName: country.value?.countryName,
|
||
zoneName: zone.value.zoneName,
|
||
postcode: query.value.postcode || undefined,
|
||
pageNum: query.value.pageNum,
|
||
pageSize: query.value.pageSize
|
||
}).then(res => {
|
||
list.value = res.rows || []
|
||
total.value = res.total || 0
|
||
}).catch(() => {
|
||
list.value = []
|
||
total.value = 0
|
||
}).finally(() => {
|
||
loading.value = false
|
||
})
|
||
}
|
||
|
||
function onChanged() {
|
||
loadList()
|
||
emit('changed')
|
||
}
|
||
|
||
function handleAdd() {
|
||
formRef.value.open(country.value, zone.value)
|
||
}
|
||
|
||
function handleEdit(row) {
|
||
formRef.value.open(country.value, zone.value, row)
|
||
}
|
||
|
||
function handleDelete(row) {
|
||
proxy.$modal.confirm('删除邮编「' + row.postcode + '」？').then(() => delPayPostcodeLine(row.lineId)).then(() => {
|
||
proxy.$modal.msgSuccess('删除成功')
|
||
onChanged()
|
||
}).catch(() => {})
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.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; display: flex; align-items: center; gap: 8px; }
|
||
.drawer-pager { margin-top: 16px; display: flex; justify-content: flex-end; }
|
||
</style>
|