SPU: 新增优惠卷选择
This commit is contained in:
puhui999
parent
5b3bcecef2
commit
3464bb9c74
@ -28,14 +28,14 @@ export interface Sku {
|
||||
export interface Spu {
|
||||
id?: number
|
||||
name?: string // 商品名称
|
||||
categoryId?: number | null // 商品分类
|
||||
categoryId?: number | undefined // 商品分类
|
||||
keyword?: string // 关键字
|
||||
unit?: number | null // 单位
|
||||
unit?: number | undefined // 单位
|
||||
picUrl?: string // 商品封面图
|
||||
sliderPicUrls?: string[] // 商品轮播图
|
||||
introduction?: string // 商品简介
|
||||
deliveryTemplateId?: number | null // 运费模版
|
||||
brandId?: number | null // 商品品牌编号
|
||||
deliveryTemplateId?: number | undefined // 运费模版
|
||||
brandId?: number | undefined // 商品品牌编号
|
||||
specType?: boolean // 商品规格
|
||||
subCommissionType?: boolean // 分销类型
|
||||
skus?: Sku[] // sku数组
|
||||
|
||||
@ -155,6 +155,7 @@ export enum DICT_TYPE {
|
||||
// ========== MALL - 商品模块 ==========
|
||||
PRODUCT_UNIT = 'product_unit', // 商品单位
|
||||
PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
|
||||
PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举
|
||||
|
||||
// ========== MALL - 交易模块 ==========
|
||||
EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
|
||||
|
||||
217
src/views/mall/product/spu/form/CouponSelect.vue
Normal file
217
src/views/mall/product/spu/form/CouponSelect.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="优惠券名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入优惠劵名"
|
||||
@keyup="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠类型" prop="discountType">
|
||||
<el-select
|
||||
v-model="queryParams.discountType"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择优惠券类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠券状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择优惠券状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="优惠券名称" min-width="140" prop="name" />
|
||||
<el-table-column label="类型" min-width="80" prop="productScope">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠" min-width="100" prop="discount">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
|
||||
{{ discountFormat(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领取方式" min-width="100" prop="takeType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="validityTypeFormat"
|
||||
align="center"
|
||||
label="使用时间"
|
||||
prop="validityType"
|
||||
width="185"
|
||||
/>
|
||||
<el-table-column align="center" label="发放数量" prop="totalCount" />
|
||||
<el-table-column
|
||||
:formatter="remainedCountFormat"
|
||||
align="center"
|
||||
label="剩余数量"
|
||||
prop="totalCount"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="takeLimitCountFormat"
|
||||
align="center"
|
||||
label="领取上限"
|
||||
prop="takeLimitCount"
|
||||
/>
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import {
|
||||
discountFormat,
|
||||
remainedCountFormat,
|
||||
takeLimitCountFormat,
|
||||
validityTypeFormat
|
||||
} from '@/views/mall/promotion/coupon/formatter'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||||
|
||||
defineOptions({ name: 'CouponSelect' })
|
||||
|
||||
defineProps<{
|
||||
multipleSelection: { id: number; name: string }[]
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:multipleSelection', v: { id: number; name: string }[])
|
||||
}>()
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('选择优惠卷') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 字典表格数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null,
|
||||
discountType: null,
|
||||
type: null,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 执行查询
|
||||
const data = await CouponTemplateApi.getCouponTemplatePage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef?.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
/** 打开弹窗 */
|
||||
const open = async () => {
|
||||
dialogVisible.value = true
|
||||
resetQuery()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
|
||||
emit(
|
||||
'update:multipleSelection',
|
||||
val.map((item) => ({ id: item.id, name: item.name }))
|
||||
)
|
||||
}
|
||||
const submitForm = async () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -43,16 +43,22 @@
|
||||
<el-col :span="24">
|
||||
<!-- TODO @puhui999：tag展示暂时不考虑排序；支持拖动排序 -->
|
||||
<el-form-item label="活动优先级">
|
||||
<el-tag>默认</el-tag>
|
||||
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
<el-tag
|
||||
v-for="type in getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM)"
|
||||
:key="type.value as number"
|
||||
:type="type.colorType"
|
||||
class="mr-[10px]"
|
||||
>
|
||||
{{ type.label }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：等优惠劵 ok 在搞 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="赠送优惠劵">
|
||||
<el-button>选择优惠券</el-button>
|
||||
<el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
|
||||
{{ coupon.name }}
|
||||
</el-tag>
|
||||
<el-button @click="openCouponSelect">选择优惠券</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -82,6 +88,7 @@
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<CouponSelect ref="couponSelectRef" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { Spu } from '@/api/mall/product/spu'
|
||||
@ -89,6 +96,8 @@ import { PropType } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { copyValueToTarget } from '@/utils'
|
||||
import { otherSettingsSchema } from './spu.data'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import CouponSelect from './CouponSelect.vue'
|
||||
|
||||
defineOptions({ name: 'OtherSettingsForm' })
|
||||
|
||||
@ -104,6 +113,11 @@ const props = defineProps({
|
||||
activeName: propTypes.string.def(''),
|
||||
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||
})
|
||||
const couponSelectRef = ref() // 优惠卷模版选择
|
||||
const couponTemplateList = ref<{ id: number; name: string }[]>([]) // 选择的优惠卷
|
||||
const openCouponSelect = () => {
|
||||
couponSelectRef.value?.open()
|
||||
}
|
||||
|
||||
const otherSettingsFormRef = ref() // 表单Ref
|
||||
// 表单数据
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
:props="defaultProps"
|
||||
class="w-1/1"
|
||||
clearable
|
||||
placeholder="请选择商品分类"
|
||||
filterable
|
||||
placeholder="请选择商品分类"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
@ -48,7 +48,12 @@
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-hasPermi="['product:spu:create']" plain type="primary" @click="openForm">
|
||||
<el-button
|
||||
v-hasPermi="['product:spu:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm(undefined)"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
@ -278,8 +283,8 @@ const queryParams = ref({
|
||||
pageSize: 10,
|
||||
tabType: 0,
|
||||
name: '',
|
||||
categoryId: null,
|
||||
createTime: []
|
||||
categoryId: undefined,
|
||||
createTime: undefined
|
||||
}) // 查询参数
|
||||
const queryFormRef = ref() // 搜索的表单Ref
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user