refactor(shopExpressTemplate): 优化运费模板及明细功能界面和数据结构

- 规范和补充ShopExpressTemplate及ShopExpressTemplateDetail接口字段注释
- 调整列表列配置，增加字段宽度和排序支持，优化表格显示
- 添加计费方式和状态的标签显示，替换原有文字提示
- 删除批量移动功能相关代码和UI，简化操作流程
- 搜索组件添加清除按钮，支持批量删除操作提升用户体验
- 编辑弹窗宽度调整，表单控件换为数字输入或单选框提升输入准确性
- 编辑弹窗中新增运费模板下拉选择和表单验证，确保数据完整性
- 移除无用变量和注释，清理代码结构，提高维护性
- 优化时间显示为日期格式，界面更友好

src/api/shop/shopExpressTemplate/model/index.ts

@@ -4,33 +4,35 @@ import type { PageParam } from '@/api';
  * 运费模板
  */
 export interface ShopExpressTemplate {
-  //
+  /** 主键ID */
+  shopExpressTemplateId?: number;
+  /** 旧字段ID（兼容） */
   id?: number;
-  //
+  /** 计费方式: 0=按件, 1=按重量 */
   type?: string;
-  //
+  /** 模板名称 */
   title?: string;
-  // 收件价格
+  /** 首件价格 */
   firstAmount?: string;
-  // 续件价格
+  /** 续件价格 */
   extraAmount?: string;
-  // 状态, 0已发布, 1待审核 2已驳回 3违规内容
+  /** 状态: 0=启用, 1=禁用 */
   status?: number;
-  // 是否删除, 0否, 1是
+  /** 是否删除: 0=否, 1=是 */
   deleted?: number;
-  // 租户id
+  /** 租户ID */
   tenantId?: number;
-  // 创建时间
+  /** 创建时间 */
   createTime?: string;
-  // 修改时间
+  /** 修改时间 */
   updateTime?: string;
-  // 排序
+  /** 排序号 */
   sortNumber?: number;
-  // 备注
+  /** 备注 */
   comments?: string;
-  // 首件数量/重量
+  /** 首件数量/重量 */
   firstNum?: string;
-  // 续件数量/重量
+  /** 续件数量/重量 */
   extraNum?: string;
 }
 
@@ -39,5 +41,11 @@ export interface ShopExpressTemplate {
  */
 export interface ShopExpressTemplateParam extends PageParam {
   id?: number;
+  /** 模板名称 */
+  title?: string;
+  /** 计费方式 */
+  type?: string;
+  /** 状态 */
+  status?: number;
   keywords?: string;
 }

src/api/shop/shopExpressTemplateDetail/model/index.ts

@@ -1,45 +1,53 @@
 import type { PageParam } from '@/api';
 
 /**
- * 运费模板
+ * 运费模板明细（区域运费设置）
  */
 export interface ShopExpressTemplateDetail {
-  //
+  /** 主键ID */
+  shopExpressTemplateDetailId?: number;
+  /** 旧字段ID（兼容） */
   id?: number;
-  //
+  /** 所属运费模板ID */
   templateId?: number;
-  // 0按件
+  /** 计费方式: 0=按件, 1=按重量 */
   type?: string;
-  //
+  /** 省份ID */
   provinceId?: number;
-  //
+  /** 城市ID */
   cityId?: number;
-  // 首件数量/重量
+  /** 首件数量/重量 */
   firstNum?: string;
-  // 收件价格
+  /** 首件价格 */
   firstAmount?: string;
-  // 续件价格
+  /** 续件价格 */
   extraAmount?: string;
-  // 续件数量/重量
+  /** 续件数量/重量 */
   extraNum?: string;
-  // 状态, 0已发布, 1待审核 2已驳回 3违规内容
+  /** 状态: 0=启用, 1=禁用 */
   status?: number;
-  // 是否删除, 0否, 1是
+  /** 是否删除: 0=否, 1=是 */
   deleted?: number;
-  // 租户id
+  /** 租户ID */
   tenantId?: number;
-  // 创建时间
+  /** 创建时间 */
   createTime?: string;
-  // 修改时间
+  /** 修改时间 */
   updateTime?: string;
-  //
+  /** 排序号 */
   sortNumber?: number;
 }
 
 /**
- * 运费模板搜索条件
+ * 运费模板明细搜索条件
  */
 export interface ShopExpressTemplateDetailParam extends PageParam {
   id?: number;
+  /** 所属运费模板ID */
+  templateId?: number;
+  /** 计费方式 */
+  type?: string;
+  /** 状态 */
+  status?: number;
   keywords?: string;
 }

src/views/shop/shopExpressTemplate/components/search.vue

@@ -1,42 +1,68 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
+    <a-input-search
+      allow-clear
+      placeholder="请输入模板名称"
+      v-model:value="keywords"
+      style="width: 220px"
+      @search="onSearch"
+    />
     <a-button type="primary" class="ele-btn-icon" @click="add">
       <template #icon>
         <PlusOutlined />
       </template>
       <span>添加</span>
     </a-button>
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      :disabled="!selection?.length"
+      @click="remove"
+    >
+      <template #icon>
+        <DeleteOutlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
-  import type { GradeParam } from '@/api/user/grade/model';
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import { watch } from 'vue';
+  import type { ShopExpressTemplateParam } from '@/api/shop/shopExpressTemplate/model';
+  import type { ShopExpressTemplate } from '@/api/shop/shopExpressTemplate/model';
 
   const props = withDefaults(
     defineProps<{
-      // 选中的角色
+      // 选中的表格数据
-      selection?: [];
+      selection?: ShopExpressTemplate[];
     }>(),
     {}
   );
 
   const emit = defineEmits<{
-    (e: 'search', where?: GradeParam): void;
+    (e: 'search', where?: ShopExpressTemplateParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
-    (e: 'batchMove'): void;
   }>();
 
+  const keywords = ref('');
+
+  // 搜索
+  const onSearch = () => {
+    emit('search', { title: keywords.value });
+  };
+
   // 新增
   const add = () => {
     emit('add');
   };
 
-  watch(
+  // 批量删除
-    () => props.selection,
+  const remove = () => {
-    () => {}
+    emit('remove');
-  );
+  };
 </script>

src/views/shop/shopExpressTemplate/components/shopExpressTemplateEdit.vue

@@ -1,10 +1,11 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="680"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
+    :confirm-loading="loading"
     :title="isUpdate ? '编辑运费模板' : '添加运费模板'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
@@ -19,50 +20,63 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="" name="type">
+      <a-form-item label="模板名称" name="title">
-        <a-input allow-clear placeholder="请输入" v-model:value="form.type" />
-      </a-form-item>
-      <a-form-item label="" name="title">
-        <a-input allow-clear placeholder="请输入" v-model:value="form.title" />
-      </a-form-item>
-      <a-form-item label="收件价格" name="firstAmount">
         <a-input
           allow-clear
-          placeholder="请输入收件价格"
+          placeholder="请输入模板名称"
+          v-model:value="form.title"
+          :maxlength="50"
+        />
+      </a-form-item>
+      <a-form-item label="计费方式" name="type">
+        <a-radio-group v-model:value="form.type">
+          <a-radio value="0">按件</a-radio>
+          <a-radio value="1">按重量</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="首件数量/重量" name="firstNum">
+        <a-input-number
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入首件数量/重量"
+          v-model:value="form.firstNum"
+        />
+      </a-form-item>
+      <a-form-item label="首件价格" name="firstAmount">
+        <a-input-number
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入首件价格"
           v-model:value="form.firstAmount"
         />
       </a-form-item>
+      <a-form-item label="续件数量/重量" name="extraNum">
+        <a-input-number
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入续件数量/重量"
+          v-model:value="form.extraNum"
+        />
+      </a-form-item>
       <a-form-item label="续件价格" name="extraAmount">
-        <a-input
+        <a-input-number
-          allow-clear
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
           placeholder="请输入续件价格"
           v-model:value="form.extraAmount"
         />
       </a-form-item>
-      <a-form-item
+      <a-form-item label="状态" name="status">
-        label="状态, 0已发布, 1待审核 2已驳回 3违规内容"
-        name="status"
-      >
         <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="0">启用</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
+          <a-radio :value="1">禁用</a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+      <a-form-item label="排序号" name="sortNumber">
-        <a-input
-          allow-clear
-          placeholder="请输入是否删除, 0否, 1是"
-          v-model:value="form.deleted"
-        />
-      </a-form-item>
-      <a-form-item label="修改时间" name="updateTime">
-        <a-input
-          allow-clear
-          placeholder="请输入修改时间"
-          v-model:value="form.updateTime"
-        />
-      </a-form-item>
-      <a-form-item label="" name="sortNumber">
         <a-input-number
           :min="0"
           :max="9999"
@@ -71,18 +85,13 @@
           v-model:value="form.sortNumber"
         />
       </a-form-item>
-      <a-form-item label="首件数量/重量" name="firstNum">
+      <a-form-item label="备注" name="comments">
-        <a-input
+        <a-textarea
           allow-clear
-          placeholder="请输入首件数量/重量"
+          placeholder="请输入备注"
-          v-model:value="form.firstNum"
+          v-model:value="form.comments"
-        />
+          :rows="2"
-      </a-form-item>
+          :maxlength="200"
-      <a-form-item label="续件数量/重量" name="extraNum">
-        <a-input
-          allow-clear
-          placeholder="请输入续件数量/重量"
-          v-model:value="form.extraNum"
         />
       </a-form-item>
     </a-form>
@@ -92,7 +101,7 @@
 <script lang="ts" setup>
   import { ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
+  import { assignObject } from 'ele-admin-pro';
   import {
     addShopExpressTemplate,
     updateShopExpressTemplate
@@ -100,9 +109,7 @@
   import { ShopExpressTemplate } from '@/api/shop/shopExpressTemplate/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -127,18 +134,18 @@
   const loading = ref(false);
   // 是否显示最大化切换按钮
   const maxable = ref(true);
-  // 表格选中数据
+  // 表单实例
   const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
 
-  // 用户信息
+  // 表单数据
   const form = reactive<ShopExpressTemplate>({
+    shopExpressTemplateId: undefined,
     id: undefined,
-    type: undefined,
+    type: '0',
     title: undefined,
     firstAmount: undefined,
     extraAmount: undefined,
-    deleted: undefined,
+    deleted: 0,
     tenantId: undefined,
     createTime: undefined,
     updateTime: undefined,
@@ -156,30 +163,51 @@
 
   // 表单验证规则
   const rules = reactive({
-    shopExpressTemplateName: [
+    title: [
       {
         required: true,
         type: 'string',
-        message: '请填写运费模板名称',
+        message: '请填写模板名称',
+        trigger: 'blur'
+      }
+    ],
+    type: [
+      {
+        required: true,
+        message: '请选择计费方式',
+        trigger: 'change'
+      }
+    ],
+    firstNum: [
+      {
+        required: true,
+        message: '请输入首件数量/重量',
+        trigger: 'blur'
+      }
+    ],
+    firstAmount: [
+      {
+        required: true,
+        message: '请输入首件价格',
+        trigger: 'blur'
+      }
+    ],
+    extraNum: [
+      {
+        required: true,
+        message: '请输入续件数量/重量',
+        trigger: 'blur'
+      }
+    ],
+    extraAmount: [
+      {
+        required: true,
+        message: '请输入续件价格',
         trigger: 'blur'
       }
     ]
   });
 
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-    form.image = data.path;
-  };
-
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-    form.image = '';
-  };
-
   const { resetFields } = useForm(form, rules);
 
   /* 保存编辑 */
@@ -191,9 +219,7 @@
       .validate()
       .then(() => {
         loading.value = true;
-        const formData = {
+        const formData = { ...form };
-          ...form
-        };
         const saveOrUpdate = isUpdate.value
           ? updateShopExpressTemplate
           : addShopExpressTemplate;
@@ -216,16 +242,8 @@
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
         if (props.data) {
           assignObject(form, props.data);
-          if (props.data.image) {
-            images.value.push({
-              uid: uuid(),
-              url: props.data.image,
-              status: 'done'
-            });
-          }
           isUpdate.value = true;
         } else {
           isUpdate.value = false;

src/views/shop/shopExpressTemplate/index.vue

@@ -7,6 +7,7 @@
         :columns="columns"
         :datasource="datasource"
         :customRow="customRow"
+        :selection="selection"
         tool-class="ele-toolbar-form"
         class="sys-org-table"
       >
@@ -16,16 +17,17 @@
             :selection="selection"
             @add="openEdit"
             @remove="removeBatch"
-            @batchMove="openMove"
           />
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'image'">
+          <template v-if="column.key === 'type'">
-            <a-image :src="record.image" :width="50" />
+            <a-tag v-if="record.type === '0'" color="blue">按件</a-tag>
+            <a-tag v-else-if="record.type === '1'" 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-if="record.status === 0" color="green">启用</a-tag>
-            <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            <a-tag v-else color="red">禁用</a-tag>
           </template>
           <template v-if="column.key === 'action'">
             <a-space>
@@ -84,10 +86,6 @@
   const current = ref<ShopExpressTemplate | null>(null);
   // 是否显示编辑弹窗
   const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 加载状态
-  const loading = ref(true);
 
   // 表格数据源
   const datasource: DatasourceFunction = ({
@@ -111,85 +109,76 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '',
+      title: '模板名称',
-      dataIndex: 'id',
-      key: 'id',
-      align: 'center',
-      width: 90
-    },
-    {
-      title: '',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center'
-    },
-    {
-      title: '',
       dataIndex: 'title',
       key: 'title',
-      align: 'center'
+      align: 'center',
+      ellipsis: true
     },
     {
-      title: '收件价格',
+      title: '计费方式',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '首件数量/重量',
+      dataIndex: 'firstNum',
+      key: 'firstNum',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '首件价格',
       dataIndex: 'firstAmount',
       key: 'firstAmount',
-      align: 'center'
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '续件数量/重量',
+      dataIndex: 'extraNum',
+      key: 'extraNum',
+      align: 'center',
+      width: 120
     },
     {
       title: '续件价格',
       dataIndex: 'extraAmount',
       key: 'extraAmount',
-      align: 'center'
+      align: 'center',
+      width: 100
     },
     {
-      title: '状态, 0已发布, 1待审核 2已驳回 3违规内容',
+      title: '状态',
       dataIndex: 'status',
       key: 'status',
-      align: 'center'
+      align: 'center',
+      width: 80
     },
     {
-      title: '是否删除, 0否, 1是',
+      title: '排序',
-      dataIndex: 'deleted',
+      dataIndex: 'sortNumber',
-      key: 'deleted',
+      key: 'sortNumber',
-      align: 'center'
+      align: 'center',
+      width: 80,
+      sorter: true
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
       align: 'center',
+      width: 120,
       sorter: true,
       ellipsis: true,
       customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
-    {
-      title: '修改时间',
-      dataIndex: 'updateTime',
-      key: 'updateTime',
-      align: 'center'
-    },
-    {
-      title: '',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      align: 'center'
-    },
-    {
-      title: '首件数量/重量',
-      dataIndex: 'firstNum',
-      key: 'firstNum',
-      align: 'center'
-    },
-    {
-      title: '续件数量/重量',
-      dataIndex: 'extraNum',
-      key: 'extraNum',
-      align: 'center'
-    },
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 140,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -208,11 +197,6 @@
     showEdit.value = true;
   };
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
-    showMove.value = true;
-  };
-
   /* 删除单个 */
   const remove = (row: ShopExpressTemplate) => {
     const hide = message.loading('请求中..', 0);
@@ -257,25 +241,14 @@
     });
   };
 
-  /* 查询 */
-  const query = () => {
-    loading.value = true;
-  };
-
   /* 自定义行属性 */
   const customRow = (record: ShopExpressTemplate) => {
     return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
       onDblclick: () => {
         openEdit(record);
       }
     };
   };
-  query();
 </script>
 
 <script lang="ts">

src/views/shop/shopExpressTemplateDetail/components/search.vue

@@ -1,42 +1,72 @@
 <!-- 搜索表单 -->
 <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 />
       </template>
       <span>添加</span>
     </a-button>
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      :disabled="!selection?.length"
+      @click="remove"
+    >
+      <template #icon>
+        <DeleteOutlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
-  import type { GradeParam } from '@/api/user/grade/model';
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import { watch } from 'vue';
+  import type { ShopExpressTemplateDetailParam } from '@/api/shop/shopExpressTemplateDetail/model';
+  import type { ShopExpressTemplateDetail } from '@/api/shop/shopExpressTemplateDetail/model';
 
   const props = withDefaults(
     defineProps<{
-      // 选中的角色
+      // 选中的表格数据
-      selection?: [];
+      selection?: ShopExpressTemplateDetail[];
     }>(),
     {}
   );
 
   const emit = defineEmits<{
-    (e: 'search', where?: GradeParam): void;
+    (e: 'search', where?: ShopExpressTemplateDetailParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
-    (e: 'batchMove'): void;
   }>();
 
+  const keywords = ref('');
+
+  // 搜索
+  const onSearch = () => {
+    const where: ShopExpressTemplateDetailParam = {};
+    if (keywords.value) {
+      where.templateId = Number(keywords.value);
+    }
+    emit('search', where);
+  };
+
   // 新增
   const add = () => {
     emit('add');
   };
 
-  watch(
+  // 批量删除
-    () => props.selection,
+  const remove = () => {
-    () => {}
+    emit('remove');
-  );
+  };
 </script>

src/views/shop/shopExpressTemplateDetail/components/shopExpressTemplateDetailEdit.vue

@@ -1,11 +1,12 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="680"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑运费模板' : '添加运费模板'"
+    :confirm-loading="loading"
+    :title="isUpdate ? '编辑运费模板明细' : '添加运费模板明细'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -19,82 +20,80 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="" name="templateId">
+      <a-form-item label="所属模板" name="templateId">
-        <a-input
+        <a-select
           allow-clear
-          placeholder="请输入"
+          placeholder="请选择所属运费模板"
           v-model:value="form.templateId"
+          :options="templateOptions"
+          :field-names="{ label: 'title', value: 'shopExpressTemplateId' }"
         />
       </a-form-item>
-      <a-form-item label="0按件" name="type">
+      <a-form-item label="计费方式" name="type">
-        <a-input
+        <a-radio-group v-model:value="form.type">
-          allow-clear
+          <a-radio value="0">按件</a-radio>
-          placeholder="请输入0按件"
+          <a-radio value="1">按重量</a-radio>
-          v-model:value="form.type"
+        </a-radio-group>
-        />
       </a-form-item>
-      <a-form-item label="" name="provinceId">
+      <a-form-item label="省份ID" name="provinceId">
-        <a-input
+        <a-input-number
-          allow-clear
+          :min="0"
-          placeholder="请输入"
+          class="ele-fluid"
+          placeholder="请输入省份ID"
           v-model:value="form.provinceId"
         />
       </a-form-item>
-      <a-form-item label="" name="cityId">
+      <a-form-item label="城市ID" name="cityId">
-        <a-input allow-clear placeholder="请输入" v-model:value="form.cityId" />
+        <a-input-number
+          :min="0"
+          class="ele-fluid"
+          placeholder="请输入城市ID"
+          v-model:value="form.cityId"
+        />
       </a-form-item>
       <a-form-item label="首件数量/重量" name="firstNum">
-        <a-input
+        <a-input-number
-          allow-clear
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
           placeholder="请输入首件数量/重量"
           v-model:value="form.firstNum"
         />
       </a-form-item>
-      <a-form-item label="收件价格" name="firstAmount">
+      <a-form-item label="首件价格" name="firstAmount">
-        <a-input
+        <a-input-number
-          allow-clear
+          :min="0"
-          placeholder="请输入收件价格"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入首件价格"
           v-model:value="form.firstAmount"
         />
       </a-form-item>
-      <a-form-item label="续件价格" name="extraAmount">
-        <a-input
-          allow-clear
-          placeholder="请输入续件价格"
-          v-model:value="form.extraAmount"
-        />
-      </a-form-item>
       <a-form-item label="续件数量/重量" name="extraNum">
-        <a-input
+        <a-input-number
-          allow-clear
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
           placeholder="请输入续件数量/重量"
           v-model:value="form.extraNum"
         />
       </a-form-item>
-      <a-form-item
+      <a-form-item label="续件价格" name="extraAmount">
-        label="状态, 0已发布, 1待审核 2已驳回 3违规内容"
+        <a-input-number
-        name="status"
+          :min="0"
-      >
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入续件价格"
+          v-model:value="form.extraAmount"
+        />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
         <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="0">启用</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
+          <a-radio :value="1">禁用</a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+      <a-form-item label="排序号" name="sortNumber">
-        <a-input
-          allow-clear
-          placeholder="请输入是否删除, 0否, 1是"
-          v-model:value="form.deleted"
-        />
-      </a-form-item>
-      <a-form-item label="修改时间" name="updateTime">
-        <a-input
-          allow-clear
-          placeholder="请输入修改时间"
-          v-model:value="form.updateTime"
-        />
-      </a-form-item>
-      <a-form-item label="" name="sortNumber">
         <a-input-number
           :min="0"
           :max="9999"
@@ -108,17 +107,20 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+  import { ref, reactive, watch, onMounted } from 'vue';
   import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
+  import { assignObject } from 'ele-admin-pro';
   import {
     addShopExpressTemplateDetail,
     updateShopExpressTemplateDetail
   } from '@/api/shop/shopExpressTemplateDetail';
-  import { ShopExpressTemplateDetail } from '@/api/shop/shopExpressTemplateDetail/model';
+  import { listShopExpressTemplate } from '@/api/shop/shopExpressTemplate';
+  import {
+    ShopExpressTemplateDetail
+  } from '@/api/shop/shopExpressTemplateDetail/model';
+  import type { ShopExpressTemplate } from '@/api/shop/shopExpressTemplate/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
 
   // 是否是修改
@@ -144,22 +146,24 @@
   const loading = ref(false);
   // 是否显示最大化切换按钮
   const maxable = ref(true);
-  // 表格选中数据
+  // 表单实例
   const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
+  // 运费模板下拉选项
+  const templateOptions = ref<ShopExpressTemplate[]>([]);
 
-  // 用户信息
+  // 表单数据
   const form = reactive<ShopExpressTemplateDetail>({
+    shopExpressTemplateDetailId: undefined,
     id: undefined,
     templateId: undefined,
-    type: undefined,
+    type: '0',
     provinceId: undefined,
     cityId: undefined,
     firstNum: undefined,
     firstAmount: undefined,
     extraAmount: undefined,
     extraNum: undefined,
-    deleted: undefined,
+    deleted: 0,
     tenantId: undefined,
     createTime: undefined,
     updateTime: undefined,
@@ -174,11 +178,45 @@
 
   // 表单验证规则
   const rules = reactive({
-    shopExpressTemplateDetailName: [
+    templateId: [
       {
         required: true,
-        type: 'string',
+        message: '请选择所属运费模板',
-        message: '请填写运费模板名称',
+        trigger: 'change'
+      }
+    ],
+    type: [
+      {
+        required: true,
+        message: '请选择计费方式',
+        trigger: 'change'
+      }
+    ],
+    firstNum: [
+      {
+        required: true,
+        message: '请输入首件数量/重量',
+        trigger: 'blur'
+      }
+    ],
+    firstAmount: [
+      {
+        required: true,
+        message: '请输入首件价格',
+        trigger: 'blur'
+      }
+    ],
+    extraNum: [
+      {
+        required: true,
+        message: '请输入续件数量/重量',
+        trigger: 'blur'
+      }
+    ],
+    extraAmount: [
+      {
+        required: true,
+        message: '请输入续件价格',
         trigger: 'blur'
       }
     ]
@@ -186,6 +224,17 @@
 
   const { resetFields } = useForm(form, rules);
 
+  /* 加载运费模板列表 */
+  const loadTemplates = () => {
+    listShopExpressTemplate()
+      .then((data) => {
+        templateOptions.value = data || [];
+      })
+      .catch(() => {
+        templateOptions.value = [];
+      });
+  };
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {
@@ -195,9 +244,7 @@
       .validate()
       .then(() => {
         loading.value = true;
-        const formData = {
+        const formData = { ...form };
-          ...form
-        };
         const saveOrUpdate = isUpdate.value
           ? updateShopExpressTemplateDetail
           : addShopExpressTemplateDetail;
@@ -216,11 +263,14 @@
       .catch(() => {});
   };
 
+  onMounted(() => {
+    loadTemplates();
+  });
+
   watch(
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
         if (props.data) {
           assignObject(form, props.data);
           isUpdate.value = true;

src/views/shop/shopExpressTemplateDetail/index.vue

@@ -7,6 +7,7 @@
         :columns="columns"
         :datasource="datasource"
         :customRow="customRow"
+        :selection="selection"
         tool-class="ele-toolbar-form"
         class="sys-org-table"
       >
@@ -16,16 +17,17 @@
             :selection="selection"
             @add="openEdit"
             @remove="removeBatch"
-            @batchMove="openMove"
           />
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'image'">
+          <template v-if="column.key === 'type'">
-            <a-image :src="record.image" :width="50" />
+            <a-tag v-if="record.type === '0'" color="blue">按件</a-tag>
+            <a-tag v-else-if="record.type === '1'" 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-if="record.status === 0" color="green">启用</a-tag>
-            <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            <a-tag v-else color="red">禁用</a-tag>
           </template>
           <template v-if="column.key === 'action'">
             <a-space>
@@ -84,10 +86,6 @@
   const current = ref<ShopExpressTemplateDetail | null>(null);
   // 是否显示编辑弹窗
   const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 加载状态
-  const loading = ref(true);
 
   // 表格数据源
   const datasource: DatasourceFunction = ({
@@ -111,97 +109,90 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '',
+      title: '所属模板ID',
-      dataIndex: 'id',
+      dataIndex: 'templateId',
-      key: 'id',
+      key: 'templateId',
+      align: 'center',
+      width: 110
+    },
+    {
+      title: '计费方式',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '省份ID',
+      dataIndex: 'provinceId',
+      key: 'provinceId',
       align: 'center',
       width: 90
     },
     {
-      title: '',
+      title: '城市ID',
-      dataIndex: 'templateId',
-      key: 'templateId',
-      align: 'center'
-    },
-    {
-      title: '0按件',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center'
-    },
-    {
-      title: '',
-      dataIndex: 'provinceId',
-      key: 'provinceId',
-      align: 'center'
-    },
-    {
-      title: '',
       dataIndex: 'cityId',
       key: 'cityId',
-      align: 'center'
+      align: 'center',
+      width: 90
     },
     {
       title: '首件数量/重量',
       dataIndex: 'firstNum',
       key: 'firstNum',
-      align: 'center'
+      align: 'center',
+      width: 120
     },
     {
-      title: '收件价格',
+      title: '首件价格',
       dataIndex: 'firstAmount',
       key: 'firstAmount',
-      align: 'center'
+      align: 'center',
-    },
+      width: 100
-    {
-      title: '续件价格',
-      dataIndex: 'extraAmount',
-      key: 'extraAmount',
-      align: 'center'
     },
     {
       title: '续件数量/重量',
       dataIndex: 'extraNum',
       key: 'extraNum',
-      align: 'center'
+      align: 'center',
+      width: 120
     },
     {
-      title: '状态, 0已发布, 1待审核 2已驳回 3违规内容',
+      title: '续件价格',
+      dataIndex: 'extraAmount',
+      key: 'extraAmount',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '状态',
       dataIndex: 'status',
       key: 'status',
-      align: 'center'
+      align: 'center',
+      width: 80
     },
     {
-      title: '是否删除, 0否, 1是',
+      title: '排序',
-      dataIndex: 'deleted',
+      dataIndex: 'sortNumber',
-      key: 'deleted',
+      key: 'sortNumber',
-      align: 'center'
+      align: 'center',
+      width: 80,
+      sorter: true
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
       align: 'center',
+      width: 120,
       sorter: true,
       ellipsis: true,
       customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
-    {
-      title: '修改时间',
-      dataIndex: 'updateTime',
-      key: 'updateTime',
-      align: 'center'
-    },
-    {
-      title: '',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      align: 'center'
-    },
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 140,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -220,11 +211,6 @@
     showEdit.value = true;
   };
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
-    showMove.value = true;
-  };
-
   /* 删除单个 */
   const remove = (row: ShopExpressTemplateDetail) => {
     const hide = message.loading('请求中..', 0);
@@ -269,25 +255,14 @@
     });
   };
 
-  /* 查询 */
-  const query = () => {
-    loading.value = true;
-  };
-
   /* 自定义行属性 */
   const customRow = (record: ShopExpressTemplateDetail) => {
     return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
       onDblclick: () => {
         openEdit(record);
       }
     };
   };
-  query();
 </script>
 
 <script lang="ts">