mall:优惠券 商品选择组件

This commit is contained in:
owen 2023-08-30 11:50:21 +08:00
parent beef6a0a94
commit 60d2e3114b
2 changed files with 253 additions and 119 deletions

View File

@ -1,81 +1,103 @@
<template>
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择商品" width="70%">
<el-row :gutter="20" class="mb-10px">
<el-col :span="6">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
/>
</el-col>
<el-col :span="6">
<el-tree-select
v-model="queryParams.categoryId"
:data="categoryTreeList"
:props="defaultProps"
check-strictly
class="w-1/1"
node-key="id"
placeholder="请选择商品分类"
/>
</el-col>
<el-col :span="6">
<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-col>
<el-col :span="6">
<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-col>
</el-row>
<el-table ref="spuListRef" v-loading="loading" :data="list" show-overflow-tooltip>
<el-table-column label="#" width="55">
<template #default="{ row }">
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSelected(row)"
>&nbsp;</el-radio
>
</template>
</el-table-column>
<el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
<el-table-column label="商品图" min-width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
class="w-30px h-30px"
:preview-src-list="[row.picUrl]"
preview-teleported
<ContentWrap>
<el-row :gutter="20" class="mb-10px">
<el-col :span="6">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
/>
</template>
</el-table-column>
<el-table-column label="商品名称" min-width="200" prop="name" />
<el-table-column label="商品分类" min-width="100" prop="categoryId">
<template #default="{ row }">
<span>{{ categoryList.find((c) => c.id === row.categoryId)?.name }}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</el-col>
<el-col :span="6">
<el-tree-select
v-model="queryParams.categoryId"
:data="categoryTreeList"
:props="defaultProps"
check-strictly
class="w-1/1"
node-key="id"
placeholder="请选择商品分类"
/>
</el-col>
<el-col :span="6">
<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-col>
<el-col :span="6">
<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-col>
</el-row>
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
<!-- 多选模式 -->
<el-table-column key="2" type="selection" width="55" v-if="multiple">
<template #header>
<el-checkbox
:value="allChecked && checkedPageNos.indexOf(queryParams.pageNo) > -1"
@change="handleCheckAll"
/>
</template>
<template #default="{ row }">
<el-checkbox
:value="checkedSpuIds.indexOf(row.id) > -1"
@change="(checked: boolean) => handleCheckOne(checked, row)"
/>
</template>
</el-table-column>
<!-- 单选模式 -->
<el-table-column label="#" width="55" v-else>
<template #default="{ row }">
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)"
>&nbsp;</el-radio
>
</template>
</el-table-column>
<el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
<el-table-column label="商品图" min-width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
class="w-30px h-30px"
:preview-src-list="[row.picUrl]"
preview-teleported
/>
</template>
</el-table-column>
<el-table-column label="商品名称" min-width="200" prop="name" />
<el-table-column label="商品分类" min-width="100" prop="categoryId">
<template #default="{ row }">
<span>{{ categoryList?.find((c) => c.id === row.categoryId)?.name }}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<template #footer v-if="multiple">
<el-button type="primary" @click="handleEmitChange"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
@ -85,12 +107,19 @@ import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
type Spu = Required<ProductSpuApi.Spu>
defineOptions({ name: 'SpuTableSelect' })
const message = useMessage() //
const props = defineProps({
//
multiple: propTypes.bool.def(false)
})
const total = ref(0) //
const list = ref<any[]>([]) //
const list = ref<Spu[]>([]) //
const loading = ref(false) //
const dialogVisible = ref(false) //
const queryParams = ref({
@ -101,26 +130,24 @@ const queryParams = ref({
categoryId: null,
createTime: []
}) //
const spuListRef = ref<InstanceType<typeof ElTable>>()
const selectedSpuId = ref() // spuId
/** 选中时触发 */
const handleSelected = (row: ProductSpuApi.Spu) => {
emits('change', row)
//
dialogVisible.value = false
selectedSpuId.value = undefined
}
//
const emits = defineEmits<{
(e: 'change', spu: ProductSpuApi.Spu): void
}>()
/** 打开弹窗 */
const open = () => {
const open = (spus?: Spu[]) => {
if (spus && spus.length > 0) {
// todo check-box
checkedSpus.value = [...spus]
checkedSpuIds.value = spus.map((spu) => spu.id)
} else {
checkedSpus.value = []
checkedSpuIds.value = []
}
allChecked.value = false
checkedPageNos.value = []
dialogVisible.value = true
resetQuery()
}
defineExpose({ open }) // open
@ -138,6 +165,7 @@ const getList = async () => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNo = 1
getList()
}
@ -154,9 +182,65 @@ const resetQuery = () => {
getList()
}
const allChecked = ref(false) //
const checkedPageNos = ref<number[]>([]) //
const checkedSpuIds = ref<number[]>([]) //ID
const checkedSpus = ref<Spu[]>([]) //
/** 单选中时触发 */
const handleSingleSelected = (row: Spu) => {
emits('change', row)
//
dialogVisible.value = false
// ID
selectedSpuId.value = row.id
}
/** 多选完成 */
const handleEmitChange = () => {
//
dialogVisible.value = false
emits('change', [...checkedSpus.value])
}
/** 确认选择时的触发事件 */
const emits = defineEmits<{
(e: 'change', spu: Spu | Spu[] | any): void
}>()
/** 全选 */
const handleCheckAll = (checked: boolean) => {
//todo
console.log('checkAll', checked)
allChecked.value = checked
const index = checkedPageNos.value.indexOf(queryParams.value.pageNo)
checkedPageNos.value.push(queryParams.value.pageNo)
if (index > -1) {
checkedPageNos.value.splice(index, 1)
}
list.value.forEach((item) => handleCheckOne(checked, item))
}
/** 选中一行 */
const handleCheckOne = (checked: boolean, spu: Spu) => {
if (checked) {
const index = checkedSpuIds.value.indexOf(spu.id)
if (index === -1) {
checkedSpuIds.value.push(spu.id)
checkedSpus.value.push(spu)
}
} else {
const index = checkedSpuIds.value.indexOf(spu.id)
if (index > -1) {
checkedSpuIds.value.splice(index, 1)
checkedSpus.value.splice(index, 1)
}
}
}
const categoryList = ref() //
const categoryTreeList = ref() //
/** 初始化 **/
onMounted(async () => {
await getList()

View File

@ -29,7 +29,7 @@
<el-input-number
v-model="formData.discountPrice"
placeholder="请输入优惠金额,单位:元"
style="width: 400px"
class="!w-400px mr-2"
:precision="2"
:min="0"
/>
@ -43,7 +43,7 @@
<el-input-number
v-model="formData.discountPercent"
placeholder="优惠券折扣不能小于 1 折,且不可大于 9.9 折"
style="width: 400px"
class="!w-400px mr-2"
:precision="1"
:min="1"
:max="9.9"
@ -58,7 +58,7 @@
<el-input-number
v-model="formData.discountLimitPrice"
placeholder="请输入最多优惠"
style="width: 400px"
class="!w-400px mr-2"
:precision="2"
:min="0"
/>
@ -68,7 +68,7 @@
<el-input-number
v-model="formData.usePrice"
placeholder="无门槛请设为 0"
style="width: 400px"
class="!w-400px mr-2"
:precision="2"
:min="0"
/>
@ -84,7 +84,7 @@
<el-input-number
v-model="formData.totalCount"
placeholder="发放数量,没有之后不能领取或发放,-1 为不限制"
style="width: 400px"
class="!w-400px mr-2"
:precision="0"
:min="-1"
/>
@ -94,7 +94,7 @@
<el-input-number
v-model="formData.takeLimitCount"
placeholder="设置为 -1 时,可无限领取"
style="width: 400px"
class="!w-400px mr-2"
:precision="0"
:min="-1"
/>
@ -133,7 +133,7 @@
<el-input-number
v-model="formData.fixedStartTerm"
placeholder="0 为今天生效"
style="width: 165px"
class="mx-2"
:precision="0"
:min="0"
/>
@ -141,7 +141,7 @@
<el-input-number
v-model="formData.fixedEndTerm"
placeholder="请输入结束天数"
style="width: 165px"
class="mx-2"
:precision="0"
:min="0"
/>
@ -162,21 +162,15 @@
v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
prop="productSpuIds"
>
<el-select
v-model="formData.productSpuIds"
placeholder="请选择活动商品"
clearable
multiple
filterable
style="width: 400px"
>
<el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; font-size: 13px; color: #8492a6">
{{ (item.minPrice / 100.0).toFixed(2) }}
</span>
</el-option>
</el-select>
<div class="flex items-center gap-1 flex-wrap">
<div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
<el-image :src="spu.picUrl" />
<Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
</div>
<div class="select-box" @click="openSpuTableSelect">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
@ -184,6 +178,7 @@
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@ -194,6 +189,7 @@ import {
PromotionDiscountTypeEnum,
PromotionProductScopeEnum
} from '@/utils/constants'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
defineOptions({ name: 'CouponTemplateForm' })
@ -242,7 +238,7 @@ const formRules = reactive({
productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
const productSpus = ref([]) //
const productSpus = ref<ProductSpuApi.Spu[]>([]) //
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
@ -265,12 +261,12 @@ const open = async (type: string, id?: number) => {
usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
validTimes: [data.validStartTime, data.validEndTime]
}
//
await getProductScope()
} finally {
formLoading.value = false
}
}
//
productSpus.value = await ProductSpuApi.getSpuSimpleList()
}
defineExpose({ open }) // open
@ -344,5 +340,59 @@ const resetForm = () => {
productSpuIds: []
}
formRef.value?.resetFields()
productSpus.value = []
}
/** 获得商品范围 */
const getProductScope = async () => {
switch (formData.value.productScope) {
case PromotionProductScopeEnum.SPU.scope:
//
productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productSpuIds)
break
default:
break
}
}
/** 活动商品 按钮 */
const spuTableSelectRef = ref()
const openSpuTableSelect = () => {
spuTableSelectRef.value.open(productSpus.value)
}
/** 选择商品后触发 */
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
productSpus.value = spus
formData.value.productSpuIds = spus.map((spu) => spu.id) as []
}
/** 选择商品后触发 */
const handleRemoveSpu = (index: number) => {
productSpus.value.splice(index, 1)
formData.value.productSpuIds.splice(index, 1)
}
</script>
<style scoped lang="scss">
.select-box {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
width: 60px;
height: 60px;
}
.spu-pic {
position: relative;
}
.del-icon {
position: absolute;
z-index: 1;
width: 20px !important;
height: 20px !important;
right: -10px;
top: -10px;
}
</style>