应付计费邮编改造

2026-11-13 18:26:21 +08:00
parent 880b4751c5
commit bde1d7d86e
30 changed files with 1761 additions and 254 deletions
@@ -0,0 +1,124 @@
+<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>