feat(shop): 完善运费模板配送区域功能

- 模板列表操作列新增“配送区域”跳转链接，调整操作列宽度为200 - 配送区域页根据路由参数设置页面标题并过滤对应模板数据 - 合并省市列为配送地区列，显示具体地区名称 - 移除配送区域页模板ID和计费方式列 - 搜索组件去除模板ID搜索框，保留新增与批量删除 - 编辑表单用级联选择组件替代省市输入，移除所属模板与计费方式字段 - 编辑表单支持配送地区回显及动态标签显示，保存时自动赋值模板ID和计费方式 - 加载地区数据建立ID到名称映射以支持地区展示
2026-07-08 19:00:03 +08:00
parent 6118e2be01
commit ae8cb170dd
5 changed files with 146 additions and 128 deletions
--- a/.workbuddy/memory/2026-07-08.md
+++ 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` 依赖后端菜单配置，如不一致需调整
--- 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);
--- 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');
--- 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 }
--- 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">