feat(promotion)-添加DIY模板类型功能支持

- 在字典类型中新增 PROMOTION_DIY_TEMPLATE_TYPE 类型
- 为装修模板表单添加模板类型选择下拉框
- 在装修模板列表页面添加模板类型筛选条件
- 在装修模板列表中显示模板类型列
- 为模板类型字段添加必填验证规则

src/utils/dict.ts

@@ -198,6 +198,7 @@ export enum DICT_TYPE {
   PROMOTION_BARGAIN_RECORD_STATUS = 'promotion_bargain_record_status', // 砍价记录的状态
   PROMOTION_COMBINATION_RECORD_STATUS = 'promotion_combination_record_status', // 拼团记录的状态
   PROMOTION_BANNER_POSITION = 'promotion_banner_position', // banner 定位
+  PROMOTION_DIY_TEMPLATE_TYPE = 'promotion_diy_template_type', // 装修模板类型
 
   // ========== CRM - 客户管理模块 ==========
   CRM_AUDIT_STATUS = 'crm_audit_status', // CRM 审批状态

src/views/mall/promotion/diy/template/DiyTemplateForm.vue

@@ -10,6 +10,16 @@
       <el-form-item label="模板名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入模板名称" />
       </el-form-item>
+      <el-form-item label="模板类型" prop="type">
+        <el-select v-model="formData.type" clearable placeholder="请选择模板类型" class="w-46!">
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PROMOTION_DIY_TEMPLATE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
       </el-form-item>
@@ -25,6 +35,7 @@
 </template>
 <script lang="ts" setup>
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateForm' })
@@ -39,11 +50,13 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   name: undefined,
+  type: undefined,
   remark: undefined,
   previewPicUrls: []
 })
 const formRules = reactive({
-  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '模板类型不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -96,9 +109,10 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: undefined,
+    type: undefined,
     remark: undefined,
     previewPicUrls: []
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>

src/views/mall/promotion/diy/template/index.vue

@@ -30,6 +30,16 @@
           class="!w-240px"
         />
       </el-form-item>
+      <el-form-item label="模板类型" prop="type">
+        <el-select v-model="queryParams.type" clearable placeholder="请选择模板类型" class="!w-240px">
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PROMOTION_DIY_TEMPLATE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -63,6 +73,11 @@
         </template>
       </el-table-column>
       <el-table-column label="模板名称" align="center" prop="name" min-width="180" />
+      <el-table-column label="模板类型" align="center" prop="type" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_DIY_TEMPLATE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
       <el-table-column label="是否使用" align="center" prop="used">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.used" />
@@ -132,7 +147,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
 import DiyTemplateForm from './DiyTemplateForm.vue'
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
 /** 装修模板 */
 defineOptions({ name: 'DiyTemplate' })