From ae8cb170ddfdbf7ede01ed51b91a701ecb1b655f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 8 Jul 2026 19:00:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E5=AE=8C=E5=96=84=E8=BF=90?=
 =?UTF-8?q?=E8=B4=B9=E6=A8=A1=E6=9D=BF=E9=85=8D=E9=80=81=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 模板列表操作列新增“配送区域”跳转链接，调整操作列宽度为200
- 配送区域页根据路由参数设置页面标题并过滤对应模板数据
- 合并省市列为配送地区列，显示具体地区名称
- 移除配送区域页模板ID和计费方式列
- 搜索组件去除模板ID搜索框，保留新增与批量删除
- 编辑表单用级联选择组件替代省市输入，移除所属模板与计费方式字段
- 编辑表单支持配送地区回显及动态标签显示，保存时自动赋值模板ID和计费方式
- 加载地区数据建立ID到名称映射以支持地区展示
---
 .workbuddy/memory/2026-07-08.md               |  31 +++++
 src/views/shop/shopExpressTemplate/index.vue  |  18 ++-
 .../components/search.vue                     |  21 ----
 .../shopExpressTemplateDetailEdit.vue         | 116 +++++++-----------
 .../shop/shopExpressTemplateDetail/index.vue  |  88 +++++++------
 5 files changed, 146 insertions(+), 128 deletions(-)
 create mode 100644 .workbuddy/memory/2026-07-08.md

diff --git a/.workbuddy/memory/2026-07-08.md b/.workbuddy/memory/2026-07-08.md
new file mode 100644
index 0000000..9a89a20
--- /dev/null
+++ b/.workbuddy/memory/2026-07-08.md
@@ -0,0 +1,31 @@
+# 2026-07-08 工作日志
+
+## 完善运费模板配送区域功能
+
+### 改造内容
+1. **模板列表页** (`shopExpressTemplate/index.vue`)
+   - 操作列增加"配送区域"链接，点击跳转到 `shopExpressTemplateDetail?templateId=xxx&title=xxx&type=xxx`
+   - 操作列宽度从 140 调整为 200
+
+2. **配送区域页面** (`shopExpressTemplateDetail/index.vue`)
+   - 读取路由参数 `templateId`/`title`/`type`，页面标题显示"模板名称 - 配送区域"
+   - 数据源自动按 `templateId` 过滤
+   - 移除"所属模板ID"和"计费方式"列
+   - 省份/城市列合并为"配送地区"列，显示地区名称（通过 regions-data.json 建立 ID→名称映射）
+   - 传 `templateId` 和 `templateType` 给编辑组件
+
+3. **搜索组件** (`shopExpressTemplateDetail/components/search.vue`)
+   - 移除模板ID搜索框，仅保留添加/批量删除按钮
+
+4. **编辑表单** (`shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue`)
+   - 用 `RegionsSelect` 级联选择器（provinceCity 模式）替换省份/城市的 `a-input-number`
+   - 移除"所属模板"下拉选择（由路由参数确定）
+   - 移除"计费方式"radio（从父模板继承）
+   - 标签根据 `templateType` 动态显示"首件数量"或"首重重量"
+   - 保存时自动填充 `templateId` 和 `type`
+   - 编辑回显时将 provinceId/cityId 数字转回字符串数组给级联选择器
+
+### 技术要点
+- `RegionsSelect` 组件位于 `src/components/RegionsSelect/`，数据源为 `public/json/regions-data.json`
+- 级联选择器 value 是字符串数组（如 `["110000", "110100"]`），需与 model 的 number 类型互转
+- 路由路径 `/shop/shopExpressTemplateDetail` 依赖后端菜单配置，如不一致需调整
diff --git a/src/views/shop/shopExpressTemplate/index.vue b/src/views/shop/shopExpressTemplate/index.vue
index 9278cb4..423834c 100644
--- a/src/views/shop/shopExpressTemplate/index.vue
+++ b/src/views/shop/shopExpressTemplate/index.vue
@@ -33,6 +33,8 @@
             <a-space>
               <a @click="openEdit(record)">修改</a>
               <a-divider type="vertical" />
+              <a @click="goDetail(record)">配送区域</a>
+              <a-divider type="vertical" />
               <a-popconfirm
                 title="确定要删除此记录吗？"
                 @confirm="remove(record)"
@@ -56,6 +58,7 @@
 
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
+  import { useRouter } from 'vue-router';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -79,6 +82,7 @@
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const router = useRouter();
 
   // 表格选中数据
   const selection = ref<ShopExpressTemplate[]>([]);
@@ -178,7 +182,7 @@
     {
       title: '操作',
       key: 'action',
-      width: 140,
+      width: 200,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -197,6 +201,18 @@
     showEdit.value = true;
   };
 
+  /* 跳转到配送区域 */
+  const goDetail = (row: ShopExpressTemplate) => {
+    router.push({
+      path: '/shop/shopExpressTemplateDetail',
+      query: {
+        templateId: String(row.id),
+        title: row.title || '',
+        type: String(row.type)
+      }
+    });
+  };
+
   /* 删除单个 */
   const remove = (row: ShopExpressTemplate) => {
     const hide = message.loading('请求中..', 0);
diff --git a/src/views/shop/shopExpressTemplateDetail/components/search.vue b/src/views/shop/shopExpressTemplateDetail/components/search.vue
index ed82367..7838ccb 100644
--- a/src/views/shop/shopExpressTemplateDetail/components/search.vue
+++ b/src/views/shop/shopExpressTemplateDetail/components/search.vue
@@ -1,13 +1,6 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-input-search
-      allow-clear
-      placeholder="请输入模板ID"
-      v-model:value="keywords"
-      style="width: 220px"
-      @search="onSearch"
-    />
     <a-button type="primary" class="ele-btn-icon" @click="add">
       <template #icon>
         <PlusOutlined />
@@ -30,9 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import type { ShopExpressTemplateDetailParam } from '@/api/shop/shopExpressTemplateDetail/model';
   import type { ShopExpressTemplateDetail } from '@/api/shop/shopExpressTemplateDetail/model';
 
   const props = withDefaults(
@@ -44,22 +35,10 @@
   );
 
   const emit = defineEmits<{
-    (e: 'search', where?: ShopExpressTemplateDetailParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
   }>();
 
-  const keywords = ref('');
-
-  // 搜索
-  const onSearch = () => {
-    const where: ShopExpressTemplateDetailParam = {};
-    if (keywords.value) {
-      where.templateId = Number(keywords.value);
-    }
-    emit('search', where);
-  };
-
   // 新增
   const add = () => {
     emit('add');
diff --git a/src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue b/src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue
index 70fff59..39cb439 100644
--- a/src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue
+++ b/src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue
@@ -6,7 +6,7 @@
     :maskClosable="false"
     :maxable="maxable"
     :confirm-loading="loading"
-    :title="isUpdate ? '编辑运费模板明细' : '添加运费模板明细'"
+    :title="isUpdate ? '编辑配送区域' : '添加配送区域'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -20,43 +20,20 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="所属模板" name="templateId">
-        <a-select
-          allow-clear
-          placeholder="请选择所属运费模板"
-          v-model:value="form.templateId"
-          :options="templateOptions"
-          :field-names="{ label: 'title', value: 'id' }"
+      <a-form-item label="配送地区" name="regions">
+        <RegionsSelect
+          v-model:value="regions"
+          type="provinceCity"
+          :show-search="true"
+          placeholder="请选择配送省份/城市（不选则默认全国）"
         />
       </a-form-item>
-      <a-form-item label="计费方式" name="type">
-        <a-radio-group v-model:value="form.type">
-          <a-radio :value="true">按件</a-radio>
-          <a-radio :value="false">按重量</a-radio>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item label="省份ID" name="provinceId">
-        <a-input-number
-          :min="0"
-          class="ele-fluid"
-          placeholder="请输入省份ID"
-          v-model:value="form.provinceId"
-        />
-      </a-form-item>
-      <a-form-item label="城市ID" name="cityId">
-        <a-input-number
-          :min="0"
-          class="ele-fluid"
-          placeholder="请输入城市ID"
-          v-model:value="form.cityId"
-        />
-      </a-form-item>
-      <a-form-item :label="form.type ? '首件数量' : '首重重量'" name="firstNum">
+      <a-form-item :label="templateType ? '首件数量' : '首重重量'" name="firstNum">
         <a-input-number
           :min="0"
           :precision="2"
           class="ele-fluid"
-          :placeholder="form.type ? '请输入首件数量' : '请输入首重重量'"
+          :placeholder="templateType ? '请输入首件数量' : '请输入首重重量'"
           v-model:value="form.firstNum"
         />
       </a-form-item>
@@ -69,12 +46,12 @@
           v-model:value="form.firstAmount"
         />
       </a-form-item>
-      <a-form-item :label="form.type ? '续件数量' : '续重重量'" name="extraNum">
+      <a-form-item :label="templateType ? '续件数量' : '续重重量'" name="extraNum">
         <a-input-number
           :min="0"
           :precision="2"
           class="ele-fluid"
-          :placeholder="form.type ? '请输入续件数量' : '请输入续重重量'"
+          :placeholder="templateType ? '请输入续件数量' : '请输入续重重量'"
           v-model:value="form.extraNum"
         />
       </a-form-item>
@@ -107,18 +84,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch, onMounted } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
   import { assignObject } from 'ele-admin-pro';
   import {
     addShopExpressTemplateDetail,
     updateShopExpressTemplateDetail
   } from '@/api/shop/shopExpressTemplateDetail';
-  import { listShopExpressTemplate } from '@/api/shop/shopExpressTemplate';
   import {
     ShopExpressTemplateDetail
   } from '@/api/shop/shopExpressTemplateDetail/model';
-  import type { ShopExpressTemplate } from '@/api/shop/shopExpressTemplate/model';
+  import RegionsSelect from '@/components/RegionsSelect/index.vue';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
   import { FormInstance } from 'ant-design-vue/es/form';
@@ -135,6 +111,10 @@
     visible: boolean;
     // 修改回显的数据
     data?: ShopExpressTemplateDetail | null;
+    // 所属模板ID
+    templateId?: number;
+    // 模板计费方式：true=按件, false=按重量
+    templateType?: boolean;
   }>();
 
   const emit = defineEmits<{
@@ -148,12 +128,11 @@
   const maxable = ref(true);
   // 表单实例
   const formRef = ref<FormInstance | null>(null);
-  // 运费模板下拉选项
-  const templateOptions = ref<ShopExpressTemplate[]>([]);
+  // 级联选择器选中值（字符串ID数组）
+  const regions = ref<string[]>([]);
 
   // 表单数据
   const form = reactive<ShopExpressTemplateDetail>({
-    shopExpressTemplateDetailId: undefined,
     id: undefined,
     templateId: undefined,
     type: true,
@@ -164,9 +143,6 @@
     extraAmount: undefined,
     extraNum: undefined,
     deleted: 0,
-    tenantId: undefined,
-    createTime: undefined,
-    updateTime: undefined,
     status: 0,
     sortNumber: 100
   });
@@ -178,20 +154,6 @@
 
   // 表单验证规则
   const rules = reactive<Record<string, any>>({
-    templateId: [
-      {
-        required: true,
-        message: '请选择所属运费模板',
-        trigger: 'change'
-      }
-    ],
-    type: [
-      {
-        required: true,
-        message: '请选择计费方式',
-        trigger: 'change'
-      }
-    ],
     firstNum: [
       {
         required: true,
@@ -224,16 +186,16 @@
 
   const { resetFields } = useForm(form, rules);
 
-  /* 加载运费模板列表 */
-  const loadTemplates = () => {
-    listShopExpressTemplate()
-      .then((data) => {
-        templateOptions.value = data || [];
-      })
-      .catch(() => {
-        templateOptions.value = [];
-      });
-  };
+  /* 级联选择器值变化时，同步到 form.provinceId / form.cityId */
+  watch(regions, (val) => {
+    if (val && val.length > 0) {
+      form.provinceId = Number(val[0]);
+      form.cityId = val.length > 1 ? Number(val[1]) : undefined;
+    } else {
+      form.provinceId = undefined;
+      form.cityId = undefined;
+    }
+  });
 
   /* 保存编辑 */
   const save = () => {
@@ -245,6 +207,9 @@
       .then(() => {
         loading.value = true;
         const formData = { ...form };
+        // 确保templateId和type从父级继承
+        formData.templateId = props.templateId;
+        formData.type = props.templateType ?? true;
         const saveOrUpdate = isUpdate.value
           ? updateShopExpressTemplateDetail
           : addShopExpressTemplateDetail;
@@ -263,10 +228,6 @@
       .catch(() => {});
   };
 
-  onMounted(() => {
-    loadTemplates();
-  });
-
   watch(
     () => props.visible,
     (visible) => {
@@ -276,9 +237,22 @@
           isUpdate.value = true;
         } else {
           isUpdate.value = false;
+          form.templateId = props.templateId;
+          form.type = props.templateType ?? true;
+        }
+        // 回显级联选择器
+        if (form.provinceId) {
+          const arr = [String(form.provinceId)];
+          if (form.cityId) {
+            arr.push(String(form.cityId));
+          }
+          regions.value = arr;
+        } else {
+          regions.value = [];
         }
       } else {
         resetFields();
+        regions.value = [];
       }
     },
     { immediate: true }
diff --git a/src/views/shop/shopExpressTemplateDetail/index.vue b/src/views/shop/shopExpressTemplateDetail/index.vue
index 03f4720..b8994dc 100644
--- a/src/views/shop/shopExpressTemplateDetail/index.vue
+++ b/src/views/shop/shopExpressTemplateDetail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+  <a-page-header :title="pageTitle" @back="() => $router.go(-1)">
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
       <ele-pro-table
         ref="tableRef"
@@ -13,18 +13,12 @@
       >
         <template #toolbar>
           <search
-            @search="reload"
             :selection="selection"
             @add="openEdit"
             @remove="removeBatch"
           />
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'type'">
-            <a-tag v-if="record.type === true" color="blue">按件</a-tag>
-            <a-tag v-else-if="record.type === false" color="cyan">按重量</a-tag>
-            <span v-else>{{ record.type }}</span>
-          </template>
           <template v-if="column.key === 'status'">
             <a-tag v-if="record.status === 0" color="green">启用</a-tag>
             <a-tag v-else color="red">禁用</a-tag>
@@ -49,13 +43,16 @@
     <ShopExpressTemplateDetailEdit
       v-model:visible="showEdit"
       :data="current"
+      :template-id="templateId"
+      :template-type="templateType"
       @done="reload"
     />
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
+  import { createVNode, ref, computed, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -76,10 +73,26 @@
     ShopExpressTemplateDetail,
     ShopExpressTemplateDetailParam
   } from '@/api/shop/shopExpressTemplateDetail/model';
+  import { getRegionsData } from '@/components/RegionsSelect/load-data';
 
-  // 表格实例
+  const route = useRoute();
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
+  // 从路由参数获取模板信息
+  const templateId = Number(route.query.templateId) || undefined;
+  const templateTitle = (route.query.title as string) || '';
+  const templateType = route.query.type !== 'false'; // 默认 true（按件）
+
+  // 页面标题
+  const pageTitle = computed(() => {
+    return templateTitle
+      ? `${templateTitle} - 配送区域`
+      : (getPageTitle() as string);
+  });
+
+  // 地区ID→名称映射
+  const regionMap = ref<Record<string, string>>({});
+
   // 表格选中数据
   const selection = ref<ShopExpressTemplateDetail[]>([]);
   // 当前编辑数据
@@ -87,7 +100,7 @@
   // 是否显示编辑弹窗
   const showEdit = ref(false);
 
-  // 表格数据源
+  // 表格数据源（自动按 templateId 过滤）
   const datasource: DatasourceFunction = ({
     page,
     limit,
@@ -99,6 +112,7 @@
       where.status = filters.status;
     }
     return pageShopExpressTemplateDetail({
+      templateId: templateId,
       ...where,
       ...orders,
       page,
@@ -109,32 +123,20 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '所属模板ID',
-      dataIndex: 'templateId',
-      key: 'templateId',
+      title: '配送地区',
+      key: 'region',
       align: 'center',
-      width: 110
-    },
-    {
-      title: '计费方式',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '省份ID',
-      dataIndex: 'provinceId',
-      key: 'provinceId',
-      align: 'center',
-      width: 90
-    },
-    {
-      title: '城市ID',
-      dataIndex: 'cityId',
-      key: 'cityId',
-      align: 'center',
-      width: 90
+      width: 150,
+      customRender: ({ record }) => {
+        const province = record.provinceId
+          ? regionMap.value[String(record.provinceId)]
+          : '';
+        const city = record.cityId
+          ? regionMap.value[String(record.cityId)]
+          : '';
+        if (!province && !city) return '默认全国';
+        return city ? `${province} / ${city}` : province;
+      }
     },
     {
       title: '首件数量/重量',
@@ -263,6 +265,22 @@
       }
     };
   };
+
+  /* 加载地区数据，建立ID→名称映射 */
+  onMounted(() => {
+    getRegionsData().then((data) => {
+      const map: Record<string, string> = {};
+      data.forEach((province) => {
+        map[province.value] = province.label;
+        if (province.children) {
+          province.children.forEach((city) => {
+            map[city.value] = city.label;
+          });
+        }
+      });
+      regionMap.value = map;
+    });
+  });
 </script>
 
 <script lang="ts">