feat: 新增营销优惠券管理模块

Former-commit-id: 4f09599f46bfa63c1c7be10b799ae72d52c30435

src/api/pms/category.ts

@@ -1,4 +1,6 @@
 import request from '@/utils/request';
+import { Option } from '@/types/common';
+import { AxiosPromise } from 'axios';
 
 /**
  * 获取商品分类列表
@@ -9,7 +11,7 @@ export function listCategories(queryParams: object) {
   return request({
     url: '/mall-pms/api/v1/categories',
     method: 'get',
-    params: queryParams,
+    params: queryParams
   });
 }
 
@@ -18,11 +20,10 @@ export function listCategories(queryParams: object) {
  *
  * @param queryParams
  */
-export function listCascadeCategories(queryParams?: object) {
+export function listCategoryOptions(): AxiosPromise<Option[]> {
   return request({
-    url: '/mall-pms/api/v1/categories/cascade',
+    url: '/mall-pms/api/v1/categories/options',
-    method: 'get',
+    method: 'get'
-    params: queryParams,
   });
 }
 
@@ -34,7 +35,7 @@ export function listCascadeCategories(queryParams?: object) {
 export function getCategoryDetail(id: number) {
   return request({
     url: '/mall-pms/api/v1/categories/' + id,
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -47,7 +48,7 @@ export function addCategory(data: object) {
   return request({
     url: '/mall-pms/api/v1/categories',
     method: 'post',
-    data: data,
+    data: data
   });
 }
 
@@ -61,7 +62,7 @@ export function updateCategory(id: number, data: object) {
   return request({
     url: '/mall-pms/api/v1/categories/' + id,
     method: 'put',
-    data: data,
+    data: data
   });
 }
 
@@ -73,7 +74,7 @@ export function updateCategory(id: number, data: object) {
 export function deleteCategories(ids: string) {
   return request({
     url: '/mall-pms/api/v1/categories/' + ids,
-    method: 'delete',
+    method: 'delete'
   });
 }
 
@@ -87,6 +88,6 @@ export function updateCategoryPart(id: number, data: object) {
   return request({
     url: '/mall-pms/api/v1/categories/' + id,
     method: 'patch',
-    data: data,
+    data: data
   });
 }

src/api/sms/coupon.ts

@@ -11,11 +11,11 @@ import { AxiosPromise } from 'axios';
  *
  * @param queryParams
  */
-export function lisCoupontPages(
+export function lisCouponPages(
   queryParams: CouponQueryParam
 ): AxiosPromise<CouponPageResult> {
   return request({
-    url: '/mall-sms/api/v1/coupons',
+    url: '/mall-sms/api/v1/coupons/pages',
     method: 'get',
     params: queryParams
   });

src/types/api/sms/coupon.ts

@@ -1,5 +1,4 @@
 import { PageQueryParam, PageResult } from '../base';
-import { Option } from '@/types/common';
 
 /**
  * 优惠券查询参数类型
@@ -51,6 +50,11 @@ export interface CouponFormData {
    * 优惠券类型(1:满减券;2:直减券;3:折扣券)
    */
   type: number;
+
+  /**
+   *  优惠券面值类型
+   */
+  faceValueType: number;
   /**
    *  优惠券面值
    */
@@ -60,9 +64,9 @@ export interface CouponFormData {
    */
   discount: number;
   /**
-   * 发放数量
+   * 发行量
    */
-  issueCount: number;
+  circulation: number;
   /**
    * 使用门槛(0:无门槛)
    */
@@ -72,7 +76,7 @@ export interface CouponFormData {
    */
   perLimit: number;
   /**
-   * 有效期类型(1:自领取之日起有效天数;2:有效起止时间)
+   * 有效期类型(1:日期范围;2:固定天数)
    */
   validityPeriodType: number;
   /**
@@ -88,34 +92,22 @@ export interface CouponFormData {
    */
   validityEndTime: string;
   /**
-   * 使用类型(0:全场通用;1:指定商品分类;2:指定商品)
+   * 应用范围(0:全场通用;1:指定商品分类;2:指定商品)
    */
-  useType: number;
+  applicationScope: number;
 
   /**
    * 使用类型：指定商品分类
    */
-  spuCategoryList: CouponSpuCategory[];
+  spuCategoryIds: number[];
 
   /**
    * 使用类型：指定商品
    */
-  spuList: CouponSpu[];
+  spuIds: number[];
 
   /**
    * 使用说明
    */
   remark: string;
 }
-
-export interface CouponSpuCategory {
-  id: number;
-  categoryId: number;
-  categoryName: string;
-}
-
-export interface CouponSpu {
-  id: number;
-  spuId: number;
-  spuName: string;
-}

src/views/pms/goods/components/GoodsCategory.vue

@@ -41,34 +41,35 @@ import { ElCascaderPanel, ElMessage } from 'element-plus';
 import { CaretRight } from '@element-plus/icons-vue';
 
 // API 引用
-import { listCascadeCategories } from '@/api/pms/category';
+import { listCategoryOptions } from '@/api/pms/category';
 import { computed } from '@vue/reactivity';
+import { Option } from '@/types/common';
 
 const emit = defineEmits(['next', 'update:modelValue']);
 const props = defineProps({
   modelValue: {
     type: Object,
-    default: () => {},
+    default: () => {}
-  },
+  }
 });
 
 const goodsInfo: any = computed({
   get: () => props.modelValue,
-  set: (value) => {
+  set: value => {
     emit('update:modelValue', value);
-  },
+  }
 });
 
 const state = reactive({
-  categoryOptions: [],
+  categoryOptions: [] as Option[],
-  pathLabels: [],
+  pathLabels: []
 });
 
 const { categoryOptions, pathLabels } = toRefs(state);
 
 function loadData() {
-  listCascadeCategories().then((response) => {
+  listCategoryOptions().then(({ data }) => {
-    state.categoryOptions = response.data;
+    state.categoryOptions = data;
     if (goodsInfo.value.id) {
       nextTick(() => {
         handleCategoryChange();

src/views/pms/goods/index.vue

@@ -1,7 +1,7 @@
 <!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
-  name: 'goods',
+  name: 'goods'
 };
 </script>
 
@@ -16,12 +16,13 @@ import {
   Edit,
   Refresh,
   Delete,
-  View,
+  View
 } from '@element-plus/icons-vue';
 import { listSpuPages, deleteSpu } from '@/api/pms/goods';
-import { listCascadeCategories } from '@/api/pms/category';
+import { listCategoryOptions } from '@/api/pms/category';
 import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
 import { moneyFormatter } from '@/utils/filter';
+import { Option } from '@/types/common';
 
 const dataTableRef = ref(ElTable);
 const router = useRouter();
@@ -38,12 +39,12 @@ const state = reactive({
   total: 0,
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 10
   } as GoodsQueryParam,
   goodsList: [] as GoodsItem[],
-  categoryOptions: [],
+  categoryOptions: [] as Option[],
   goodDetail: undefined,
-  dialogVisible: false,
+  dialogVisible: false
 });
 
 const {
@@ -54,7 +55,7 @@ const {
   categoryOptions,
   goodDetail,
   total,
-  dialogVisible,
+  dialogVisible
 } = toRefs(state);
 
 function handleQuery() {
@@ -71,7 +72,7 @@ function resetQuery() {
     pageNum: 1,
     pageSize: 10,
     name: undefined,
-    categoryId: undefined,
+    categoryId: undefined
   };
   handleQuery();
 }
@@ -88,7 +89,7 @@ function handleAdd() {
 function handleUpdate(row: any) {
   router.push({
     path: 'goods-detail',
-    query: { goodsId: row.id, categoryId: row.categoryId },
+    query: { goodsId: row.id, categoryId: row.categoryId }
   });
 }
 
@@ -97,7 +98,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning',
+    type: 'warning'
   })
     .then(function () {
       return deleteSpu(ids);
@@ -119,8 +120,8 @@ function handleSelectionChange(selection: any) {
 }
 
 onMounted(() => {
-  listCascadeCategories({}).then((response) => {
+  listCategoryOptions().then(({ data }) => {
-    state.categoryOptions = ref(response.data);
+    categoryOptions.value = data;
   });
   handleQuery();
 });

src/views/sms/coupon/index.vue

@@ -1,4 +1,4 @@
-<!--优惠券管理-->
+<!--优惠券-->
 <script lang="ts">
 export default {
   name: 'coupon'
@@ -7,24 +7,29 @@ export default {
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, toRefs } from 'vue';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
+import { ElForm, ElMessage, ElMessageBox, ElCascaderPanel } from 'element-plus';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import {
-  lisCoupontPages,
+  lisCouponPages,
   getCouponFormData,
   updateCoupon,
   addCoupon,
   deleteCoupons
 } from '@/api/sms/coupon';
-import { Dialog } from '@/types/common';
+
+import { listCategoryOptions } from '@/api/pms/category';
+import { listSpuPages } from '@/api/pms/goods';
+import { Dialog, Option } from '@/types/common';
 import {
   CouponItem,
   CouponQueryParam,
   CouponFormData
 } from '@/types/api/sms/coupon';
+import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
+const spuCategoryRef = ref(ElCascaderPanel);
 
 const state = reactive({
   loading: true,
@@ -35,7 +40,14 @@ const state = reactive({
   couponList: [] as CouponItem[],
   total: 0,
   dialog: {
-    title: '',
+    visible: false
+  } as Dialog,
+  //指定商品分类选择Dialog
+  spuCategoryChooseDialog: {
+    visible: false
+  } as Dialog,
+  // 指定商品选择ialog
+  spuChooseDialog: {
     visible: false
   } as Dialog,
   formData: {
@@ -43,17 +55,23 @@ const state = reactive({
     platform: 0,
     validityPeriodType: 1,
     perLimit: 1,
-    useType: 0 //使用类型(默认全场通用)
+    applicationScope: 0
   } as CouponFormData,
   rules: {
-    title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
+    type: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
-    beginTime: [{ required: true, message: '请填写开始时间', trigger: 'blur' }],
+    name: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }]
-    endTime: [{ required: true, message: '请填写结束时间', trigger: 'blur' }],
-    picUrl: [{ required: true, message: '请上传优惠券图片', trigger: 'blur' }]
   },
   validityPeriod: '' as any,
-  totalCountChecked: false,
+  perLimitChecked: false,
-  perLimitChecked: false
+  spuCategoryOptions: [] as Option[],
+  spuCategoryProps: {
+    multiple: true,
+    emitPath: false
+  },
+  spuList: [] as GoodsItem[],
+  spuTotal: 0,
+  spuQueryParams: { pageNum: 1, pageSize: 10 } as GoodsQueryParam,
+  checkedSpuIds: []
 });
 
 const {
@@ -66,8 +84,12 @@ const {
   formData,
   rules,
   validityPeriod,
-  totalCountChecked,
+  perLimitChecked,
-  perLimitChecked
+  spuCategoryOptions,
+  spuCategoryProps,
+  spuList,
+  spuTotal,
+  checkedSpuIds
 } = toRefs(state);
 
 /**
@@ -75,7 +97,7 @@ const {
  */
 function handleQuery() {
   state.loading = true;
-  lisCoupontPages(queryParams.value).then(({ data }) => {
+  lisCouponPages(queryParams.value).then(({ data }) => {
     couponList.value = data.list;
     total.value = data.total;
     loading.value = false;
@@ -95,44 +117,88 @@ function handleSelectionChange(selection: any) {
   state.multiple = !selection.length;
 }
 
-function handleAdd() {
+/**
-  dialog.value = {
+ * 加载商品分类
-    title: '添加优惠券',
+ */
-    visible: true
+async function loadSpuCategoryOptions() {
-  };
+  listCategoryOptions().then(({ data }) => {
+    spuCategoryOptions.value = data;
+  });
 }
 
-function handleUpdate(row: any) {
+async function loadSpuList() {
+  const queryParams = { pageNum: 1, pageSize: 10 } as GoodsQueryParam;
+  listSpuPages(queryParams).then(({ data }) => {
+    spuList.value = data.list;
+  });
+}
+
+function handleAdd() {
   dialog.value = {
-    title: '修改优惠券',
+    title: '新增优惠券',
+    visible: true
+  };
+
+  loadSpuCategoryOptions();
+  loadSpuList();
+}
+
+async function handleUpdate(row: any) {
+  dialog.value = {
+    title: '编辑优惠券',
     visible: true
   };
   const id = row.id;
+
+  await loadSpuCategoryOptions();
+  await loadSpuList();
+
   getCouponFormData(id).then(({ data }) => {
     formData.value = data;
     perLimitChecked.value = data.perLimit == -1;
-    totalCountChecked.value = data.issueCount == -1;
     // 有效期转换
-    if (data.validityPeriodType == 2) {
+    if (data.validityPeriodType == 1) {
       validityPeriod.value = [data.validityBeginTime, data.validityEndTime];
     }
+
+    // 金额转换分→元
+    if (formData.value.faceValue) {
+      formData.value.faceValue /= 100;
+    }
+    if (formData.value.minPoint) {
+      formData.value.minPoint /= 100;
+    }
   });
 }
 
 function submitForm() {
-  console.log('validityPeriod', validityPeriod.value[0]);
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      const applicationScope = formData.value.applicationScope;
+      console.log('applicationScope', applicationScope);
+      if (applicationScope == 1) {
+        // 指定商品分类
+        formData.value.spuCategoryIds =
+          spuCategoryRef.value.getCheckedNodes()[0].data.value;
+      }
+
       // 有效期转换
-      if (formData.value.validityPeriodType == 2 && validityPeriod.value) {
+      if (formData.value.validityPeriodType == 1 && validityPeriod.value) {
         formData.value.validityBeginTime = validityPeriod.value[0];
         formData.value.validityEndTime = validityPeriod.value[1];
       }
+      // 金额转换元→分
+      if (formData.value.faceValue) {
+        formData.value.faceValue *= 100;
+      }
+      if (formData.value.faceValue) {
+        formData.value.minPoint *= 100;
+      }
 
       const couponId = formData.value.id;
       if (couponId) {
         updateCoupon(couponId, formData.value).then(() => {
-          ElMessage.success('修改优惠券成功');
+          ElMessage.success('编辑优惠券成功');
           cancel();
           handleQuery();
         });
@@ -147,16 +213,8 @@ function submitForm() {
   });
 }
 
-const handleTotalCountChange = (val: any) => {
-  formData.value.issueCount = -1;
-};
-
-const hanclePerLimitChange = (val: any) => {
-  formData.value.perLimit = -1;
-};
-
 /**
- * 表单取消
+ * 取消
  */
 function cancel() {
   state.formData.id = undefined;
@@ -183,6 +241,13 @@ function handleDelete(row: any) {
     .catch(() => ElMessage.info('已取消删除'));
 }
 
+function handleSpuQuery() {
+  listSpuPages(queryParams.value).then(({ data }) => {
+    spuList.value = data.list;
+    spuTotal.value = data.total;
+  });
+}
+
 onMounted(() => {
   handleQuery();
 });
@@ -231,24 +296,14 @@ onMounted(() => {
       <el-table-column type="index" label="序号" width="80" align="center" />
       <el-table-column prop="name" min-width="100" label="优惠券名称" />
       <el-table-column prop="code" min-width="100" label="优惠券码" />
-      <el-table-column prop="platformLabel" min-width="100" label="使用平台" />
+      <el-table-column prop="typeLabel" min-width="100" label="优惠券类型" />
-      <el-table-column prop="typeLabel" min-width="100" label="类型" />
+      <el-table-column prop="faceValueLabel" min-width="100" label="面值" />
-      <el-table-column
+      <el-table-column prop="minPointLabel" min-width="100" label="使用门槛" />
-        prop="faceValueLabel"
-        min-width="100"
-        label="面值/折扣"
-      />
-      <el-table-column
-        prop="minPointLabel"
-        min-width="100"
-        label="使用门槛(元)"
-      />
       <el-table-column
         prop="validityPeriodLabel"
         min-width="200"
         label="有效期"
       />
-      <el-table-column prop="remark" label="使用说明" />
 
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
@@ -270,7 +325,7 @@ onMounted(() => {
       </el-table-column>
     </el-table>
 
-    <!-- 分页工具条 -->
+    <!-- 分页 -->
     <pagination
       v-if="total > 0"
       :total="total"
@@ -279,40 +334,19 @@ onMounted(() => {
       @pagination="handleQuery"
     />
 
-    <!-- 表单弹窗 -->
+    <!-- 表单Dialog -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px">
+    <el-dialog
+      :title="dialog.title"
+      v-model="dialog.visible"
+      width="1000px;"
+      top="5vh"
+    >
       <el-form
         ref="dataFormRef"
         :model="formData"
         :rules="rules"
         label-width="150px"
       >
-        <el-form-item label="优惠券名称" prop="name">
-          <el-input v-model="formData.name" />
-        </el-form-item>
-
-        <el-form-item label="适用类型" prop="useType">
-          <el-radio-group v-model="formData.useType">
-            <el-radio :label="0">全场通用</el-radio>
-            <el-radio :label="1">指定商品分类</el-radio>
-            <el-radio :label="2">指定商品</el-radio>
-          </el-radio-group>
-
-          <!--指定商品分类-->
-          <el-tag
-            v-for="item in formData.spuCategoryList"
-            :key="item.categoryId"
-            closable
-          >
-            {{ item.categoryName }}
-          </el-tag>
-
-          <!--指定商品列表-->
-          <el-tag v-for="item in formData.spuList" :key="item.spuId" closable>
-            {{ item.spuName }}
-          </el-tag>
-        </el-form-item>
-
         <el-form-item label="优惠券类型" prop="type">
           <el-radio-group v-model="formData.type">
             <el-radio :label="1">满减券</el-radio>
@@ -321,81 +355,158 @@ onMounted(() => {
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item
+        <el-form-item label="优惠券名称" prop="name">
-          label="优惠券面值(元)"
+          <el-input v-model="formData.name" />
-          v-if="formData.type == 2 || formData.type == 3"
-          prop="faceValue"
-        >
-          <el-input v-model="formData.faceValue" />
         </el-form-item>
 
-        <el-form-item
+        <el-form-item label="优惠券面值" prop="faceValueType">
-          label="优惠券折扣"
+          <el-radio-group
-          v-if="formData.type == 3"
+            v-model="formData.faceValueType"
-          prop="discount"
+            style="
-        >
+              display: flex;
-          <el-input v-model="formData.discount" />
+              flex-direction: column;
-        </el-form-item>
+              justify-content: space-between;
-
+            "
-        <el-form-item label="最低消费金额(元)" prop="minPoint">
+          >
-          <el-input v-model="formData.minPoint" />
+            <div>
-        </el-form-item>
+              <el-radio :label="1">现金</el-radio>
-
+              <el-input
-        <el-form-item label="有效期类型" prop="validType">
+                v-model="formData.faceValue"
-          <el-radio-group v-model="formData.validityPeriodType">
+                :disabled="formData.faceValueType !== 1"
-            <el-radio :label="1">自领取之日起有效天数</el-radio>
+                placeholder="0.5-1000的数字"
-            <el-radio :label="2">有效起止时间</el-radio>
+                style="width: 180px"
+              >
+                <template #append>元</template>
+              </el-input>
+            </div>
+            <div>
+              <el-radio :label="2">折扣</el-radio>
+              <el-input
+                v-model="formData.discount"
+                :disabled="formData.faceValueType !== 2"
+                placeholder="1-9.9的数字"
+                style="width: 180px"
+              >
+                <template #append>折</template>
+              </el-input>
+            </div>
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item
+        <el-form-item label="使用门槛" prop="minPoint">
-          label="有效天数"
+          <el-input
-          v-if="formData.validityPeriodType == 1"
+            v-model="formData.minPoint"
-          prop="validDays"
+            placeholder="0为无限制"
-        >
+            style="width: 300px"
-          <el-input v-model="formData.validityDays" />
+          >
-        </el-form-item>
+            <template #prepend>满</template>
-        <el-form-item label="有效期" v-if="formData.validityPeriodType == 2">
+            <template #append>元</template>
-          <el-date-picker
+          </el-input>
-            v-model="validityPeriod"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="起始时间"
-            end-placeholder="截止时间"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
         </el-form-item>
 
-        <el-form-item label="发放数量" prop="totalCount">
+        <el-form-item label="有效时间" prop="validType">
-          <el-input v-model="formData.issueCount" />
+          <el-radio-group
-          <el-checkbox
+            v-model="formData.validityPeriodType"
-            v-model="totalCountChecked"
+            style="display: flex; flex-direction: column"
-            label="无限制"
+          >
-            @change="handleTotalCountChange"
+            <div>
-          />
+              <el-radio :label="1">日期范围</el-radio>
+              <el-date-picker
+                v-model="validityPeriod"
+                type="daterange"
+                range-separator="~"
+                start-placeholder="开始日期"
+                end-placeholder="结束时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                :disabled="formData.validityPeriodType !== 1"
+              />
+            </div>
+            <div style="width: 100%">
+              <el-radio :label="2">固定天数</el-radio>
+              <el-input
+                v-model="formData.validityDays"
+                style="width: 150px"
+                :disabled="formData.validityPeriodType !== 2"
+              >
+                <template #append>天</template>
+              </el-input>
+            </div>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="发行量" prop="circulation">
+          <el-input
+            v-model="formData.circulation"
+            placeholder="-1为无限制"
+            style="width: 200px"
+          >
+            <template #prepend>共</template>
+            <template #append>张</template>
+          </el-input>
         </el-form-item>
         <el-form-item label="每人限领张数" prop="perLimit">
-          <el-checkbox
+          <el-input
-            v-model="perLimitChecked"
+            v-model="formData.perLimit"
-            @change="hanclePerLimitChange"
+            style="width: 200px"
-            label="不限次数"
+            placeholder="-1为不限制"
-          />
+          >
-          <div style="width: 100%">
+            <template #prepend>限</template>
-            <el-input
+            <template #append>张</template>
-              v-model="formData.perLimit"
+          </el-input>
-              :readonly="perLimitChecked"
-              style="width: 200px"
-            >
-              <template #prepend>限</template>
-              <template #append>次</template>
-            </el-input>
-          </div>
         </el-form-item>
 
-        <el-form-item label="使用说明" prop="remark">
+        <el-form-item label="备注信息" prop="remark">
           <el-input type="textarea" v-model="formData.remark" />
         </el-form-item>
+
+        <el-form-item label="商品范围" prop="useType">
+          <el-radio-group
+            v-model="formData.applicationScope"
+            style="width: 100%"
+          >
+            <el-radio :label="0">全场通用</el-radio>
+            <el-radio :label="1">指定商品分类</el-radio>
+            <el-radio :label="2">指定商品</el-radio>
+          </el-radio-group>
+
+          <div class="application-container">
+            <!-- 指定商品分类 -->
+            <el-cascader
+              ref="spuCategoryRef"
+              v-if="formData.applicationScope == 1"
+              v-model="formData.spuCategoryIds"
+              :options="spuCategoryOptions"
+              :props="spuCategoryProps"
+              :show-all-levels="true"
+              style="width: 450px"
+            />
+
+            <el-transfer
+              class="application-container__transfer"
+              v-model="formData.spuIds"
+              v-if="formData.applicationScope == 2"
+              filterable
+              filter-placeholder="商品名称/编码"
+              :data="spuList"
+              :titles="['商品列表', '已选择商品']"
+              :props="{
+                key: 'id',
+                label: 'name'
+              }"
+            >
+              <template #left-footer>
+                <pagination
+                  :total="spuTotal"
+                  v-model:page="queryParams.pageNum"
+                  v-model:limit="queryParams.pageSize"
+                  @pagination="handleSpuQuery"
+                  layout="prev, pager, next,"
+                />
+              </template>
+            </el-transfer>
+          </div>
+        </el-form-item>
       </el-form>
 
       <template #footer>
@@ -407,3 +518,15 @@ onMounted(() => {
     </el-dialog>
   </div>
 </template>
+
+<style lang="scss">
+.application-container {
+  margin-top: 20px;
+
+  &__transfer {
+    .pagination-container {
+      padding: 0 !important;
+    }
+  }
+}
+</style>