axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/select/node-select-act-gift-group.vue

@@ -0,0 +1,851 @@
+<template>
+	<div>
+		<div>
+			<yt-button class="multiple-select-add" size="mini" icon="el-icon-plus" @click="handleOpen" :disabled="disabled">添加</yt-button>
+			<div>
+				<div class="giftItem" v-if="form.name">
+					<div class="single" v-if="!isPacks">
+						<el-row>
+							<el-col :span="7"><span class="label">权益名称：</span></el-col>
+							<el-col :span="17"><el-input v-model="form.name" disabled></el-input></el-col>
+						</el-row>
+						<el-row>
+							<el-col :offset="7">
+								<p class="equity-detail-item-receiveNum">可用库存：{{ form.giftStockResponseDTO ? form.giftStockResponseDTO.stockAvailable : '-' }}</p>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="7"><span class="label equity">权益数量：</span></el-col>
+							<el-col :span="17">
+								<el-input-number 
+								 controls-position="right" 
+								 v-model="form.partNum" 
+								 :disabled="disabled" :min="0"
+								 :max="form.giftStockResponseDTO ? Number(form.giftStockResponseDTO.stockAvailable) : 0"
+								 @input="() => { $emit('input', [form]) }">
+								</el-input-number>
+							</el-col>
+						</el-row>
+					</div>
+					<el-row v-else>
+						<el-col :span="24">
+							<span class="label">权益礼包名称：</span>
+							<yt-button 
+							 class="modify" 
+							 v-if="isPacks && !(this.mainForm.exsit == 0 || this.mainForm.type == 0) && form.name" 
+							 type="text" 
+							 size="mini" 
+							 @click="handleModify">
+							 修改</yt-button>
+						</el-col>
+						<el-col :span="24"><el-input v-model="form.name" disabled></el-input></el-col>
+						<el-col :span="24"><span class="label equity">权益设置：</span></el-col>
+						<el-col :span="24">
+							<div class="equipy-setting">
+								<el-row>
+									<el-col :span="10"><div class="equity table">权益名称</div></el-col>
+									<el-col :span="14"><div class="equity table">发放份数</div></el-col>
+								</el-row>
+								<el-row>
+									<div v-for="(gift, index) in form.details" :key="index">
+										<div class="equity-details-item">
+											<el-col :span="10"><el-input v-model="gift.giftName" disabled></el-input></el-col>
+											<el-col :span="14">
+												<el-input-number 
+													width="120px"
+													v-model="gift.unitNum" 
+													controls-position="right"
+													:disabled="disabled"
+													:min="1"
+													:max="gift.stockAvailable ? Number(gift.stockAvailable) : 0" 
+													@input="() => {validEquityPackNum()}">
+												</el-input-number>
+											</el-col>
+										</div>
+										<p class="equity-detail-item-receiveNum">可用库存：{{ gift.stockAvailable ? gift.stockAvailable : 0 }}</p>
+									</div>
+								</el-row>
+							</div>
+						</el-col>
+						<el-col :span="24"><span class="label equity">可领取权益设置：</span></el-col>
+						<el-col :span="24">
+							<el-radio-group v-model="form.receiveType" disabled="disabled">
+								<el-radio :label="0"> 全部领取 </el-radio>
+								<el-radio :label="1"> 自定义 </el-radio>
+							</el-radio-group>
+						</el-col>
+						<template v-if="form.receiveType === 1">
+							<el-col :span="24"><span class="label equity">任意选中权益：</span></el-col>
+							<el-col :span="24">
+								<el-input-number v-model="form.receiveNum" controls-position="right" @input="$emit('input', [form])" :disabled="true"></el-input-number>
+							</el-col>
+						</template>
+						<el-col :span="24"><span class="label equity">权益礼包发放数量：</span></el-col>
+						<el-col :span="24">
+							<el-input-number 
+							 v-model="form.partNum" 
+							 :disabled="disabled" 
+							 controls-position="right"
+							 :min="1" 
+							 @input="() => {
+								if (form.partNum) {
+									validEquityPackNum()
+								} else {
+									form.partNum = 0
+								}
+							}" />
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</div>
+		<yt-dialog :title="this.isPacks ? '添加权益包' : '添加权益'" v-model="dialog" :width="1200" height="68vh" append-to-body @confirm="handleConfirm">
+			<yt-search :fields="this.isPacks ? giftPacksSearchFields : giftSearchFields" @submit="handleSearch" />
+			<radio-table 
+				ref="table" 
+				:beforeSearch="beforeSearch" 
+				:api="api" 
+				v-model="key"
+				:fields="this.isPacks ? giftPacksFields : giftFields" 
+				valueKey="id" 
+				@load="handleLoad" />
+		</yt-dialog>
+		<yt-dialog title="添加权益" v-model="addDialog" ref="addDialog" :width="600" :height="600" append-to-body @confirm="handleAddConfirm">
+			<yt-form v-if="addDialog" ref="form" :fields="addFields" @submit="handleSubmit" contentWidth="95%" :labelWidth="130" />
+		</yt-dialog>
+	</div>
+</template>
+
+<script>
+const validGiftSettings = (rule, value, callback) => {
+    if (!value || !value.length) {
+        return callback(new Error('请选择权益设置'))
+    } else {
+        callback()
+    }
+}
+
+import RadioTable from '@/components/radio-table'
+import { mapState } from 'vuex'
+import {
+	getGiftTypeTree,
+	getGiftList,
+	getGiftPackList,
+	getGiftPackType
+} from '@/api/gift'
+import GiftSelect from '@/views/gift/manage/pack/gift-select'
+
+export default {
+	components: {
+		RadioTable,
+		GiftSelect
+	},
+	props: {
+		value: {
+			type: Array,
+			default: () => [
+				{
+					name: '',
+					// code: '',
+					details: [],
+					unitNum: 1,
+				}
+			]
+		},
+        type: {
+			type: Number,
+			default: ''
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		mainForm: {
+			type: Object,
+			default: () => ({})
+		},
+		isSideShow:{
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			key: this.value[0] ? this.value[0].id : null,
+			dialog: false,
+			addDialog: false,
+			// 单一搜索
+			giftSearchFields: [
+				{
+					title: '权益ID',
+					key: 'id',
+					type: 'input',
+					renderContent: (h, item, form) => {
+						return <el-input vModel={form.id} style="width: 100%" placeholder="请输入权益ID" maxlength={60}></el-input>
+					}
+				},
+				{
+					title: '权益名称',
+					key: 'name',
+					type: 'input'
+				},
+				{
+					title: '权益类型',
+					type: 'cascader',
+					key: 'giftType',
+					options: [],
+					props: {
+						props: {
+							multiple: true,
+							checkStrictly: false,
+							label: 'name',
+							value: 'id',
+							showAllLevels: false
+						}
+					}
+				}
+			],
+			// 礼包搜索
+			giftPacksSearchFields: [
+				// {
+				// 	title: '权益礼包ID',
+				// 	key: 'id',
+				// 	type: 'input',
+				// 	renderContent: (h, item, form) => {
+				//             return <el-input vModel={form.id} style="width: 100%" placeholder="请输入权益礼包ID" maxlength={60}></el-input>
+				//     }
+				// },
+				{
+					title: '权益礼包名称',
+					key: 'name',
+					type: 'input'
+				},
+				{
+					title: '类型',
+					type: 'cascader',
+					key: 'type',
+					options: [],
+					props: {
+						props: {
+							checkStrictly: true,
+							label: 'name',
+							value: 'id',
+							showAllLevels: false,
+							multiple: true
+						}
+					}
+				},
+				// {
+				// 	title: '开始时间起止',
+				// 	key: 'packDateStartEnd',
+				// 	type: 'daterange'
+				// }
+			],
+			// 单一
+			giftFields: [
+				{
+					title: '权益ID',
+					key: 'id',
+					type: 'input',
+				},
+				{
+					title: '权益名称',
+					key: 'name',
+					type: 'input',
+					table: {
+						width: 90
+					}
+				},
+				{
+					title: '权益类型',
+					type: 'cascader',
+					key: 'giftTypeResponseDTOList',
+					table: {
+						render: (h, { row }) => {
+							if (row.giftTypeResponseDTOList) {
+								let giftTypeArr = []
+								row.giftTypeResponseDTOList.forEach((item) => {
+									giftTypeArr.push(item.name)
+								})
+								let giftType = giftTypeArr.join('-')
+								return <div>{giftType}</div>
+							} else {
+								return <div>-</div>
+							}
+						}
+					}
+				},
+				{
+					title: '可用库存',
+					key: 'giftStockResponseDTO',
+					type: 'input',
+					table: {
+						width: 90,
+						render: (h, { row }) => {
+							if (row.giftStockResponseDTO) {
+								return (
+									<div>
+										{
+											row.giftStockResponseDTO
+												.stockAvailable
+										}
+									</div>
+								)
+							} else {
+								return <div>-</div>
+							}
+						}
+					}
+				},
+				{
+					title: '单价',
+					key: 'price',
+					type: 'input',
+					table: {
+						width: 90
+					}
+				},
+				{
+					title: '有效期',
+					key: 'endTime',
+					type: 'datetime',
+					table: {
+						// fotmat:'date'
+						render: (h, { row }) => {
+							return (
+								<div>
+									{row.indateStart}-{row.indateEnd}
+								</div>
+							)
+						}
+					}
+				},
+				{
+					title: '图片',
+					key: 'image',
+					type: 'input',
+					table: {
+						render: (h, { row }) => {
+							return (
+								<el-image
+									style="width: 100px"
+									fit={'fit'}
+									src={row.image}
+								/>
+							)
+						}
+					}
+				},
+				{
+					title: '说明',
+					key: 'remark'
+				}
+			],
+			// 礼包
+			giftPacksFields: [
+				// {
+				// 	title: '权益礼包ID',
+				// 	key: 'id',
+				// 	type: 'input',
+				// },
+				{
+					title: '权益礼包名称',
+					key: 'name',
+					type: 'input'
+				},
+				{
+					title: '类型',
+					type: 'cascader',
+					key: 'equityGrouptype',
+					table: {
+						render: (h, { row }) => {
+							if (row.giftPackageTypeResponseDTO) {
+								let type = []
+								row.giftPackageTypeResponseDTO.forEach(
+									(item) => {
+										type.push(item.name)
+									}
+								)
+								let typeCodeName = type.join('-')
+								return <div>{typeCodeName}</div>
+							} else {
+								return <div>-</div>
+							}
+						}
+					}
+				},
+				{
+					title: '开始时间',
+					key: 'startTime',
+					type: 'datetime',
+					table: {
+						format: 'datetime'
+					}
+				},
+				{
+					title: '结束时间',
+					key: 'endTime',
+					type: 'datetime',
+					table: {
+						format: 'datetime'
+					}
+				},
+				{
+					title: '说明',
+					key: 'remark'
+				},
+				{
+					title: '已关联旅程名称',
+					key: 'actNames',
+					table: {
+						render: (h, { row }) => {
+							if (row.giftPackageActRefResponseDTOS) {
+								let actNamesArr = []
+								row.giftPackageActRefResponseDTOS.forEach(
+									(item) => {
+										actNamesArr.push(item.actName)
+									}
+								)
+								let actNames = actNamesArr.join(',')
+								return <div>{actNames || '-'}</div>
+							} else {
+								return <div>-</div>
+							}
+						}
+					}
+				}
+			],
+			addFields: [
+				// {
+				// 	title: '权益礼包ID',
+				// 	key: 'id',
+				// 	type: 'input',
+				// 	isRequired: true,
+				// },
+				{
+					title: '权益礼包名称',
+					key: 'name',
+					type: 'input',
+					isRequired: true,
+				},
+				{
+					title: '类型',
+					type: 'cascader',
+					key: 'equityGrouptype',
+					isRequired: true,
+					options: [],
+					props: {
+						props: {
+							checkStrictly: false,
+							label: 'name',
+							value: 'id',
+							showAllLevels: false
+						}
+					}
+				},
+				{
+					title: '开始时间',
+					key: 'startTime',
+					type: 'datetime',
+					isRequired: true,
+					props: {
+						'value-format': 'yyyy-MM-dd HH:mm:ss'
+					}
+				},
+				{
+					title: '结束时间',
+					key: 'endTime',
+					type: 'datetime',
+					isRequired: true,
+					props: {
+						'value-format': 'yyyy-MM-dd HH:mm:ss'
+					}
+				},
+				{
+					title: '权益设置',
+					key: 'giftSettings',
+					isRequired: true,
+					rule: [
+                        { required: true, validator: validGiftSettings, trigger:'change' }
+                    ],
+					renderContent: (h, item, form) => {
+						const handleValid = () => {
+							const elementFormVm = this.$refs.form.$refs.form
+							elementFormVm.validateField('giftSettings')
+						}
+						return (
+							<GiftSelect
+								vModel={form.giftSettings}
+								mode={'add'}
+								form={form}
+								onChange={() => handleValid()}
+
+							></GiftSelect>
+						)
+					}
+				},
+				{
+					title: '可领取权益设置',
+					key: 'receiveType',
+					type: 'radio-group',
+					options: [
+						{
+							label: '自定义',
+							value: 1
+						},
+						{
+							label: '全部领取',
+							value: 0
+						}
+					],
+					defaultValue: 0,
+					isRequired: true
+				},
+				{
+					title: '任意选中权益',
+					key: 'receiveNum',
+					type: 'input-number',
+					isRequired: true,
+					renderContent: (h, item, row) => {
+						const { receiveNum = 0, disabled, giftSettings } = row
+						const maxReceiveNum = (giftSettings || []).length
+						return h('el-input-number', {
+							props: {
+								disabled: disabled,
+								value: receiveNum,
+								min: 0,
+								max: maxReceiveNum,
+								controlsPosition: 'right'
+							},
+							on: {
+								input: value => {
+									row.receiveNum = value
+								}
+							}
+						})
+					},
+					isShow: (form) => form.receiveType === 1
+				},
+				{
+					title: '说明',
+					key: 'description',
+					type: 'textarea',
+					props: {
+						maxlength: 1000
+					},
+					attrs: {
+						rows: 5
+					}
+				}
+			],
+			data: [],
+			row: [],
+			form: {},
+			params: {},
+		}
+	},
+	computed: {
+		isPacks() {
+			return this.type === 1 ? true : false
+		},
+		api() {
+			let api = this.isPacks ? getGiftPackList : getGiftList
+			return api
+		},
+	},
+	watch: {
+		isSideShow(val){
+			if(val){
+				this.queryGiftType()
+				this.queryGiftPackType()
+			}
+		},
+		value: {
+			handler(val) {
+				if (val[0]) {
+					this.form = this.$util.copy(val[0])
+					// 实时获取最新库存量
+					// 判断是单一权益还是组合
+					if (this.type == 0 && val[0].id) {
+						let params = {
+							pageNum: 1,
+							pageSize: 30,
+							search: { id: val[0].id }
+						}
+						getGiftList(params).then(res => {
+							if (res.data.list.length) {
+								this.form.giftStockResponseDTO = res.data.list[0].giftStockResponseDTO
+							} else {
+								this.form.giftStockResponseDTO = {}
+							}
+						})
+					}
+					if (this.type == 1 && val[0].details?.length) {
+						val[0].details.forEach(gift => {
+							let params = {
+								pageNum: 1,
+								pageSize: 30,
+								search: { id: gift.giftId }
+							}
+							getGiftList(params).then(res => {
+								if (res.data.list.length) {
+									gift.stockAvailable = res.data.list[0].giftStockResponseDTO?.stockAvailable
+								} else {
+									gift.stockAvailable = '-'
+								}
+							})
+						})
+					}
+				} else {
+					this.form = []
+				}
+			},
+			immediate: true,
+			deep: true
+		},
+		mainForm: {
+			handler(val) {
+				if (val.partNum) {
+					this.$set(this.form, 'partNum', val.partNum)
+				} else {
+					if (this.mainForm.type == 0) {
+						if (val.hasOwnProperty('partNum')) {
+							delete (this.form.partNum)
+						}
+					}
+				}
+			},
+			deep: true
+		},
+	},
+	methods: {
+		// 查询权益类别
+		queryGiftType() {
+			getGiftTypeTree({
+				showThird: true,
+				onFlag: 1
+			}).then(res => {
+				this.giftSearchFields[2].options = res.data
+				this.giftFields[2].options = res.data
+			})
+		},
+		// 查询权益包类别
+		queryGiftPackType() {
+			getGiftPackType({ level: 3, onFlag: 1 }).then(res => {
+				this.giftPacksFields[1].options = res.data
+				this.giftPacksSearchFields[1].options = res.data
+				this.addFields[1].options = res.data
+			})
+		},
+		handleOpen() {
+			this.key = this.value[0] ? this.value[0].id : null
+			// 选择权益礼包
+			if (this.mainForm.exsit == 0 || this.mainForm.type == 0) {
+				this.dialog = true
+			} else { //自定义
+				this.addDialog = true
+				this.$nextTick(() => {
+					this.$refs.form.reset()
+				})
+			}
+		},
+		// 新增权益包活动未被创建时支持修改功能
+		handleModify() {
+			this.addDialog = true
+			this.$nextTick(() => {
+				this.$refs.form.setForm(this.form)
+			})
+		},
+		handleLoad(data) {
+			this.data = data
+		},
+		handleConfirm() {
+			let row = this.data.find((item) => item.id === this.key)
+			if (!row) {
+				this.$info('请至少选择一条数据')
+				return
+			}
+			this.form = row
+			if (row.name) this.form.name = row.name
+			// if (row.code)  this.form.code = row.code
+			if (
+				row.giftPackageDetailResponseDTOS &&
+				row.giftPackageDetailResponseDTOS?.length
+			) {
+				this.form.details = [...row.giftPackageDetailResponseDTOS]
+			}
+			this.dialog = false
+			this.$emit('input', [this.form])
+		},
+		handleSearch(form) {
+			this.params = { ...form }
+			this.$refs.table.refresh(true)
+		},
+		beforeSearch(params) {
+			params.search.expireFlag = 1
+			// 通用search
+			if (this.params.id) {
+				params.search.id = this.params.id
+			}
+			if (this.params.name) {
+				params.search.name = this.params.name
+			}
+			// gift
+			if (this.params.giftType && this.params.giftType.length) {
+				params.search.giftType =
+					this.params.giftType[this.params.giftType.length - 1]
+			}
+
+			if (this.params.dateStartEnd && this.params.dateStartEnd.length) {
+				params.search.indateStart = this.$util.formatDate(
+					this.params.dateStartEnd[0]
+				)
+				params.search.indateEnd = this.$util.formatDate(
+					this.params.dateStartEnd[1]
+				)
+			}
+			if (
+				this.params.packDateStartEnd &&
+				this.params.packDateStartEnd.length
+			) {
+				params.search.startTimeStart = this.$util.formatDate(
+					this.params.packDateStartEnd[0]
+				)
+				params.search.startTimeEnd = this.$util.formatDate(
+					this.params.packDateStartEnd[1]
+				)
+			}
+			if (this.params.type && this.params.type.length) {
+				params.search.type = this.params.type.flat()
+			}
+
+			return params
+		},
+		handleSubmit(form, valid) {
+			if (valid) {
+				let giftCount = 0
+				if(form.giftSettings){
+					giftCount = form.giftSettings.length
+				}
+				if(giftCount < 2){
+					this.$error('礼包中至少选择两个权益')
+					return
+				}
+				form.giftSettings?.forEach(item => delete (item.image))
+				this.form = { ...form, details: form.giftSettings.map(res => { return { ...res, unitNum: 1 } }) }
+				this.$emit('input', [this.form])
+				this.addDialog = false
+			}
+		},
+		handleAddConfirm() {
+			this.$refs.form.submit()
+		},
+		// 校验权益礼包发放数量是否允许
+		// 权益礼包发放数量*权益包中的任一权益<=对应的任意权益的库存
+		validEquityPackNum() {
+			if (this.form.partNum && this.form.details?.length) {
+				let canRelease = this.form.details.every(gift => (gift.unitNum || 0) * this.form.partNum <= (gift.stockAvailable || 0))
+				if (!canRelease) {
+					this.$error('请确认权益礼包数量')
+					this.$set(this.form, 'partNum', 0)
+				}
+			}
+			this.$emit('input', [this.form])
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+::v-deep{
+	.radio-table{
+		height: calc(100% - 45px);
+	}
+}
+.giftItem {
+	// height: 220px;
+	width: 100%;
+	margin: 20px 0;
+	border-radius: (@space / 2);
+	// padding-right: (@space / 2);
+	background-color: #f5f7f9;
+	border: 1px solid #e2e3e7 100%;
+	padding: 10px;
+	position: relative;
+
+	.el-input-number--medium {
+		width: 100%;
+	}
+.el-input__inner {
+	width: 100%;
+}
+
+/deep/.el-input.is-disabled .el-input__inner {
+	color: #333333;
+}
+
+.label {
+	// font-weight: bold;
+	color: #333333;
+	font-size: 13px;
+}
+
+.equity {
+	margin-top: 5px;
+}
+
+.table {
+	text-align: center;
+	color: #666666;
+	font-size: 13px;
+}
+
+.equipy-setting {
+	border-radius: (@space / 2);
+	background-color: #f5f7f9;
+	border: 1px solid #ebeef5;
+	padding: 5px;
+}
+
+.equity-details-item {
+	border-radius: (@space / 2);
+	border: 1px solid #ebeef5;
+	text-align: center;
+	margin: 5px;
+	display: flex;
+
+	span:nth-child(1) {
+		// flex:2;
+		width: 66%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	span:nth-child(2) {
+		width: 33%;
+		// flex:1
+	}
+}
+.equity-detail-item-receiveNum {
+	font: bold 12px PingFangSC-Regular;
+	color: #24c879;
+	padding: 5px 0;
+	margin-left: 10px;
+}
+
+::v-deep .el-input__inner {
+	padding: 0 10px;
+}
+	::v-deep .el-select {
+		width: 100%;
+	}
+
+	// .icon {
+	//     position: absolute;
+	//     border: 1px solid #333;
+	//     right: -20px;
+	// }
+	// .del { top: 35%; }
+	// .add { top: 55%; }
+}
+</style>