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

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

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 type { GradeParam } from '@/api/user/grade/model';
-  import { watch } from 'vue';
+  import { ref } from 'vue';
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-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-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-form-item label="模板名称" name="title">
         <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
-          allow-clear
+        <a-input-number
+          :min="0"
+          :precision="2"
+          class="ele-fluid"
           placeholder="请输入续件价格"
           v-model:value="form.extraAmount"
         />
       </a-form-item>
-      <a-form-item
-        label="状态, 0已发布, 1待审核 2已驳回 3违规内容"
-        name="status"
-      >
+      <a-form-item label="状态" name="status">
         <a-radio-group v-model:value="form.status">
-          <a-radio :value="0">显示</a-radio>
-          <a-radio :value="1">隐藏</a-radio>
+          <a-radio :value="0">启用</a-radio>
+          <a-radio :value="1">禁用</a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
-        <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-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-input
+      <a-form-item label="备注" name="comments">
+        <a-textarea
           allow-clear
-          placeholder="请输入首件数量/重量"
-          v-model:value="form.firstNum"
-        />
-      </a-form-item>
-      <a-form-item label="续件数量/重量" name="extraNum">
-        <a-input
-          allow-clear
-          placeholder="请输入续件数量/重量"
-          v-model:value="form.extraNum"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+          :rows="2"
+          :maxlength="200"
         />
       </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 = {
-          ...form
-        };
+        const formData = { ...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;