下面代码修改页面的
数据不能返回到提货地址的下拉框里面：<template>
<div class="container">
<el-tabs type="border-card">
<el-tab-pane :label="title">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="介绍图片:" prop="cover">
<div style="display: flex;">
<div class="flex-row">
<el-upload class="avatar-uploader" action :http-request="selectPicUpload"
:show-file-list="false" :before-upload="beforeAvatarUpload"
:on-change="handleAvatarChange">
<img v-if="form.cover" :src="form.cover" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="团购名称:" prop="name">
<el-input class="input" v-model="form.name" placeholder="请输入团购名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自动截止:" prop="isAutoEnd">
<el-switch v-model="form.isAutoEnd" :active-value="true" :inactive-value="false" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="团购内容:" prop="detailInfo">
<el-input class="input" v-model="form.detailInfo" placeholder="请输入团购内容" />
<!-- <Tinymce v-model="form.detailInfo" :disabled="allDisabled"></Tinymce> -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间:" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="datetime"
default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择活动开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="截止时间:" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="datetime" default-time="12:00:00"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择活动截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大接龙人数" prop="maxJoinNum">
<el-input class="input" v-model="form.maxJoinNum" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最小成交金额" >
<el-input class="input" v-model="form.minAmount" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提货地址:" prop="addressIds">
<el-select v-model="form.addressIds" filterable placeholder="请选择" multiple>
<el-option v-for="item in addressoptions" :key="item.id" :label="item.addressName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="其它信息:">
<el-checkbox-group v-model="form.selectedItemsOther">
<el-checkbox label="isGetRealName">真实姓名</el-checkbox>
<el-checkbox label="isGetPhone">手机号码</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="功能选择:">
<el-checkbox-group v-model="form.selectedItemsFunction">
<el-checkbox label="isHideList">发布最新接龙列表</el-checkbox>
<el-checkbox label="isHideOrderAmount">接龙金额仅创建人可见</el-checkbox>
<el-checkbox label="canCancel">禁止用户取消订单</el-checkbox>
</el-checkbox-group>
</el-form-item>
<div>
<el-form-item label="商品信息:" prop="products">
<el-table :data="form.products" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="商品名称" align="center" prop="product.name">
<template slot-scope="{row,$index}">
<el-input v-model="row.name" placeholder="请输入名称"></el-input>
</template>"
</el-table-column>
<el-table-column label="商品价格" align="center" prop="products.price">
<template slot-scope="{row,$index}">
<el-input v-model="row.price" placeholder="请输入名称"></el-input>
</template>"
</el-table-column>
<el-table-column label="商品数量" align="center" prop="products.soldNum">
<template slot-scope="{row,$index}">
<el-input v-model="row.soldNum" placeholder="请输入名称"><el-button
icon="el-icon-remove-outline"
@click="addmount()"></el-button></el-input>
</template>
</el-table-column>
<el-table-column label="每单限制购买量" align="center" prop="products.limitNum" width="180">
<template slot-scope="{row,$index}">
<el-input v-model="row.limitNum" placeholder="请输入名称"></el-input>
</template>
</el-table-column>
<el-table-column label="商品图片" align="center" prop="image" width="100">
<template slot-scope="{row,$index}">
<el-upload class="avatar-uploader" action
:http-request="(fileObj) => selectProductUpload(fileObj, $index)"
:show-file-list="false" :before-upload="beforeAvatarUpload">
<img v-if="row.image" :src="row.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- <el-button size="mini" type="text" v-if="scope.row.status != '4'"
icon="el-icon-edit" @click="openApproval(scope.row)"
v-hasPermi="['solitaire:list:order']">添加
</el-button > -->
<el-button @click="addproduct()"> 添加</el-button>
<el-button type="danger" icon="el-icon-delete"
:disabled="form.products.length <= 1"
@click="removeRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
</div>
</el-form>
<!-- 修改/新增 -->
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="handleBack">取 消</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { imgUrl } from '@/utils/request'
import { getISOTime, checkLongitudeValidator, checkPointIsNumber } from '@/utils/parsing'
import { checkPhone } from '@/utils/validate'
import mapView from '@/components/MapContainer/index.vue'
import { addGroupShop, editGroupBuy, getGroupBuyAddressPage, getGroupBuyDetail } from '@/api/solitaire/solitaire'
import { uploadPic } from '@/api/activity/activity'
import { onMounted, beforeDestroy } from 'vue'
import { reset } from 'echarts/lib/visual/seriesColor'
export default {
components: {
mapView
},
onMounted() {
},
watch: {
'$route.query'(newVal) {
if (!newVal.id) {
this.title = "新增接龙";
this.resetForm(); // 重置表单方法
}
}
},
data() {
return {
addressoptions: [],
addressList: [],
currentTime: new Date().toLocaleTimeString(),
timer: null,
// 第一个复选框组绑定值
// 第二个复选框组绑定值
selectedItemsFunction: [],
checkList: ['选中且禁用', '复选框 A'],
checked: true, // 单个复选框的绑定
dataList: [],
title: "新增接龙",
// 封面图片
selectImgUrl: '',
queryParams: {},
currentImgIndex: 0,
// 封面图片类型选择
imgDialogVisible: false,
// 表单
数据
form: {
selectedItemsOther: [],
selectedItemsFunction: [],
ids: null,
// addressIds: ['1'],
addressIds: [],
canCancel: 0,
cover: '',
detailInfo: null,
endTime: null,
id: 0,
isAutoEnd: 0,
isHideList: false,
isHideOrderAmount: false,
isJoin: 0,
maxJoinNum: 0,
minAmount:null,
name: "",
products: [
{
id: 0,
image: imgUrl,
limitNum: 0,
name: "",
parentId: 0,
price: 0,
soldNum: 0,
totalNum: 0
}
],
realEndTime: "",
startTime: "",
status: 0,
},
// 表单校验
rules: {
products: [
{
validator: (rule, value, callback) => {
// 自定义校验逻辑
if (!value || value.length === 0) {
callback(new Error('至少需要添加一个商品'));
return;
}
const isValid = value.every(item =>
item.name &&
item.price !== undefined &&
item.price !== null &&
item.image &&
item.image !== imgUrl // 确保不是默认图片
);
if (!isValid) {
callback(new Error('请完善所有商品信息（名称、价格和图片必填）'));
} else {
callback();
}
},
trigger: 'change' // 可以根据需要改为'blur'或保持'change'
}
],
addressIds: [
{ required: true, message: '请选择提货地址', trigger: ['change', 'blur'] }
],
cover: [
{ required: true, message: '请选择活动图片', trigger: ['change', 'blur'] }
],
name: [
{ required: true, message: '请输入团购名称', trigger: 'change' }
],
othermessage: [
{ type: 'array', required: true, message: '请选择其它信息', trigger: 'change' }
],
selectability: [
{ type: 'array', required: true, message: '请选择功能', trigger: 'change' },
],
shopmessage: [
{ required: true, message: '请输入商品信息', trigger: 'change' },
],
detailInfo: [
{ required: true, message: '请输入团购内容', trigger: 'change' }
],
maxJoinNum: [
{ required: true, message: '最大人数不能为空', trigger: 'change' }
],
minAmount: [
{ required: true, message: '最小成交金额不能为空', trigger: 'change' }
],
endTime: [
{ required: true, message: '结束时间必须选择', trigger: 'change' }
],
startTime: [
{ required: true, message: '开始时间不能为空', trigger: 'change' }
],
description: [
{ required: true, message: '活动开始内容不能为空', trigger: 'change' }
],
address: [
{ required: true, message: '地点不能为空', trigger: 'change' }
],
conditionRequire: [
{ required: true, message: '请输入条件说明', trigger: 'change' }
],
// signStartDatetime: [
// { required: true, message: '报名开始时间必须选择', trigger: 'change' }
// ],
signEndDatetime: [
{ required: true, message: '活动截止时间必须选择', trigger: 'change' }
],
jobUserVOLists: [
{ type: 'array', required: true, message: '请添加岗位需求', trigger: 'change' }
],
},
// 图片前缀
cover: imgUrl,
// //分页
column: {
pageSize: null,
pageNum: null
},
// 队伍列表
// 岗位表单校验
jobRules: {
jobName: [
{ required: true, message: '请输入岗位名称', trigger: 'change' }
],
jobCount: [
{ required: true, message: '请输入岗位人数', trigger: 'change' }
],
workHour: [
{ required: true, message: '请输入工时', trigger: 'change' }
],
pointPercent: [
{ required: true, message: '请输入积分(每人每小时)', trigger: 'change' },
{ validator: checkPointIsNumber, message: '积分必须为数字' }
],
checkInTime: [
{ required: true, message: '请输入签到时间', trigger: 'change' }
],
checkOutTime: [
{ required: true, message: '请输入签退时间', trigger: 'change' }
],
checkLocation: [
{ required: true, message: '请选择签到地点', trigger: 'change' }
]
},
}
},
created() {
this.getAddressList()
if (!this.$route.query.id) {
this.$router.replace({ ...this.$route, query: {} });
} else { this.queryParams = this.$route.query;
console.log(this.queryParams.id, '888')
if (this.queryParams.id) {
// 编辑
this.title = '修改接龙'
getGroupBuyDetail(this.queryParams.id).then(res => {
const boolConvert = val => val === 1;
console.log(res, '---')
const { cover, id } = res;
console.log(res.isGetRealName)
this.form = {
...res,
isAutoEnd: res.isAutoEnd = 1 ? true : false,
id,
cover,
addressIds:res.addressIds || [],
selectedItemsOther: [],
selectedItemsFunction: [],
products:res.products || [{
image:imgUrl
}]
}
if (res.isGetRealName === 1) {
this.form.selectedItemsOther.push('isGetRealName')
}
if (res.isGetPhone === 1) {
this.form.selectedItemsOther.push('isGetPhone')
}
if (res.isHideList === 1) {
this.form.selectedItemsFunction.push('isHideList')
}
if (res.isHideOrderAmount === 1) {
this.form.selectedItemsFunction.push('isHideOrderAmount')
}
if (res.canCancel === 1) {
this.form.selectedItemsFunction.push('canCancel')
}
})
}}
},
methods: {
onMounted() {
},
getAddressList() {
getGroupBuyAddressPage().then(res => {
this.addressoptions = res.pageData
})
},
beforeDestroy() {
clearInterval(this.timer);
},
addproduct() {
this.form.products.push({ /* 初始化新商品 */ });
this.$nextTick(() => {
this.$refs.form.validateField('products'); // 触发products字段校验
});
},
removeRow(index) {
// 添加长度检查
if (this.form.products.length <= 1) {
this.$message.warning('至少需要保留一个商品');
return;
}
this.form.products.splice(index, 1);
this.$nextTick(() => {
this.$refs.form.validateField('products');
});
},
// 在图片上传成功后的回调中也触发校验
selectProductUpload(obj, index) {
uploadPic().then(res => {
this.$set(this.form.products, index, {
...this.form.products[index],
image: res})
this.$nextTick(() => {
this.$refs.form.validateField('products');
});
});
},
handleProductAvatarChange(file) {
if (!file || !file.raw) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
// 限制最大尺寸（合理值：800×600）
const MAX_SIZE = 800;
let width = img.width;
let height = img.height;
// 按比例缩
放到最大尺寸
if (width > MAX_SIZE || height > MAX_SIZE) {
const scale = Math.min(MAX_SIZE / width, MAX_SIZE / height);
width *= scale;
height *= scale;
}
// 画布压缩处理
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// 关键优化：降低质量并生成更短Data URL
this.form.products.image = canvas.toDataURL(file.type, 0.01); // 压缩质量65%
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
handleAvatarChange(file) {
if (!file || !file.raw) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
// 限制最大尺寸（合理值：800×600）
const MAX_SIZE = 800;
let width = img.width;
let height = img.height;
// 按比例缩
放到最大尺寸
if (width > MAX_SIZE || height > MAX_SIZE) {
const scale = Math.min(MAX_SIZE / width, MAX_SIZE / height);
width *= scale;
height *= scale;
}
// 画布压缩处理
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// 关键优化：降低质量并生成更短Data URL
this.form.cover = canvas.toDataURL(file.type, 0.01); // 压缩质量65%
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
beforeAvatarUpload(file) {
const validTypes = ['image/jpeg', 'image/png', 'image/webp']; // 移除GIF减小潜在
数据量
const MAX_SIZE_MB = 1.2; // 更严格的大小限制
const isImage = validTypes.includes(file.type);
const isSizeValid = file.size / 1024 / 1024 < MAX_SIZE_MB;
if (!isImage) {
this.$message.error('仅支持 JPG/PNG/WEBP 格式');
return false;
}
if (!isSizeValid) {
this.$message.error(`图片大小不能超过 ${MAX_SIZE_MB}MB`);
return false;
}
return true;
},
// updateOtherInfo() {
// this.form.isGetRealName = this.selectedItemsOther.includes('真实姓名');
// this.form.isGetPhone = this.selectedItemsOther.includes('手机号码');
// },
// 更新"功能选择"表单值
updateFunctionSelection() {
this.form.isHideList = this.selectedItemsFunction.includes('发布最新接龙列表');
this.form.isHideOrderAmount = this.selectedItemsFunction.includes('接龙金额仅创建人可见');
// "禁止用户取消订单"需要特殊处理：选中时canCancel=false
this.form.canCancel = !this.selectedItemsFunction.includes('禁止用户取消订单');
},
// 获取活动详情
// getDetail(status) {
// getGroupBuyDetail(this.queryParams.id, status).then(response => {
// this.queryParams.id, status
// this.form = response
// console.log(response, '789')
// })
// },
// 表单重置
reset() {
this.form = {
addressIds: [],
cover: null,
canCancel: 0,
ids: null,
detailInfo: null,
endTime: null,
id: 0,
isAutoEnd: 0,
isGetPhone: 0,
isGetRealName: 0,
isHideList: 0,
isHideOrderAmount: 0,
isJoin: 0,
maxJoinNum: 0,
minAmount: 0,
name: "",
products: [
{
id: 0,
image: imgUrl,
limitNum: 0,
name: "",
parentId: 0,
price: 0,
soldNum: 0,
totalNum: 0
}
],
realEndTime: "",
startTime: "",
status: 0,
}
},
selectPicUpload(obj) {
let fd = new FormData() //参数的格式是formData格式的
fd.append('file', obj.file) //参数
uploadPic(fd, { modularName: 'ACTIVITY' }).then(res => {
this.form.cover = res
})
},
selectProductUpload(obj, index) {
let fd = new FormData();
fd.append('file', obj.file);
uploadPic(fd, { modularName: 'ACTIVITY' }).then(res => {
// 直接更新对应索引位置的图片URL
this.$set(this.form.products, index, {
...this.form.products[index],
image: res
});
}).catch(error => {
console.error('商品图片上传失败:', error);
this.$message.error('商品图片上传失败');
});
},
// // 取消关闭弹窗
// closeDialog() {
// this.currentImgIndex = 0
// this.selectImgUrl = ''
// this.imgDialogVisible = false
// },
// // 确认默认图片关闭弹窗
// submitPic() {
// this.form.cover = this.selectImgUrl
// this.imgDialogVisible = false
// },
hasCommonValue(arr) {
let seen = new Set(); // 用于存储已经遇到的值
for (let obj of arr) {
for (let value of obj.jobUsers) {
// 如果值已经存在于 set 中，返回 true
if (seen.has(value.userId)) {
return true;
}
// 将当前值加入 set
seen.add(value.userId);
}
}
return false; // 如果没有重复的值，返回 false
},
/** 提交按钮 */
submitForm() {
console.log(this.form.products.image, '000')
let newForm = {
ids: this.form.ids,
addressIds: this.form.addressIds,
canCancel: this.form.selectedItemsFunction.includes('canCancel') ? 1 : 0,
cover: this.form.cover,
detailInfo: this.form.detailInfo,
endTime: this.form.endTime,
id: this.form.id,
isAutoEnd: this.form.isAutoEnd == true ? 1 : 0,
isGetPhone: this.form.selectedItemsOther.includes('isGetPhone') ? 1 : 0,
isGetRealName: this.form.selectedItemsOther.includes('isGetRealName') ? 1 : 0,
isHideList: this.form.selectedItemsFunction.includes('isHideList') ? 0 : 1,
isHideOrderAmount: this.selectedItemsFunction.includes('isHideOrderAmount') ? 1 : 0,
isJoin: this.form.isJoin,
maxJoinNum: this.form.maxJoinNum,
minAmount: this.form.minAmount,
name: this.form.name,
// 遍历数组中的每个对象
products: this.form.products.map(item => ({
id: item.id,
image: item.image,
limitNum: item.limitNum,
name: item.name,
parentId: item.parentId,
price: item.price,
soldNum: item.soldNum,
totalNum: item.totalNum
})),
realEndTime: this.form.realEndTime,
startTime: this.form.startTime,
status: this.form.status, // 修正为this.form.status
};
console.log(newForm, this.form.id)
//判断每个时间段是否有岗位
// let isJobEmpty = this.form.jobUserVOLists.some(item => item.jobList.length == 0)
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id) {
editGroupBuy(newForm).then(response => {
console.log(response, '00')
this.$modal.msgSuccess('修改成功')
this.$router.back(-1)
})
} else {
if (this.form.name != '' && this.form.cover != '') {
addGroupShop(newForm).then(response => {
console.log(response)
this.$modal.msgSuccess('新增成功')
this.$router.back(-1)
})
} else {
console.log(this.form.ids, '09')
this.$modal.msgError('请完善信息')
}
}
}
})
},
handleBack() {
this.$router.back(-1)
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.pkId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
// 新增时间段
changeStatus() {
if (this.currentTime) {
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleTimeString();
console.log(this.currentTime, '90')
}, 1000);
}
},
// 改变时间段的初始时间
changeStartTime(value, timeIndex) {
console.log(this.form.jobUserVOLists[timeIndex].jobList)
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkInTime = value
if (item.checkOutTime && item.checkInTime) {
item.workHour = getISOTime(item.checkInTime, item.checkOutTime)
if (item.jobUsers) {
item.jobUsers.forEach(itemson => {
itemson.workHour = item.workHour
itemson.point = parseInt(item.pointPercent) * item.workHour
})
}
}
})
}
},
// 改变时间段的初始时间
changeEndTime(value, timeIndex) {
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkOutTime = value
if (item.checkOutTime && item.checkInTime) {
item.workHour = getISOTime(item.checkInTime, item.checkOutTime)
if (item.jobUsers) {
item.jobUsers.forEach(itemson => {
itemson.workHour = item.workHour
itemson.point = parseInt(item.pointPercent) * item.workHour
})
}
}
})
}
},
// 改变时间段的签到纬度
changeLatitude(value, timeIndex) {
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkLatitude = value
})
}
},
// 改变时间段的签到经度
changeLongitude(value, timeIndex) {
if (this.form.jobUserVOLists[timeIndex].jobList) {
this.form.jobUserVOLists[timeIndex].jobList.forEach(item => {
item.checkLongitude = value
})
}
},
// 跳转
toPrck() {
window.open('https://lbs.amap.com/tools/picker')
},
// 删除时间段
deleteTime(timeIndex) {
this.$modal.confirm('是否确认该时间段?').then(function () {
}).then(() => {
this.form.jobUserVOLists.splice(timeIndex, 1)
this.changeNumber()
}).catch(() => {
})
},
// 删除岗位按钮
// 活动最大人数改变
changeNumber() {
this.form.maxCount = 0
this.form.jobUserVOLists.forEach(item => {
item.jobList.forEach(itemson => {
this.form.maxCount += itemson.jobUsers.length
})
})
},
// 岗位人数改变
//岗位志愿者选择
}
}
</script>
<style scoped>
.container {
background-color: #f5f5f5;
padding: 1%;
}
.title_type {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.dialog-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 30px;
}
.avatar-uploader .el-upload {
border: 1px solid #f8f3f3;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.coverImage {
width: 214px;
height: 129px;
border-radius: 6px;
cursor: pointer;
}
.select_mask {
position: absolute;
z-index: 2;
background-color: rgba(127, 125, 121, 0.5);
text-align: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 214px;
height: 129px;
display: flex;
justify-content: center;
align-items: center;
}
.avatar {
width: 50px;
height: 50px;
display: block;
}
.margin-right-10 {
margin-right: 10px;
}
.job_box {
/* border: 1px solid #ccc; */
background-color: #F8F8F8;
padding: 46px 10px 10px;
margin-bottom: 10px;
margin-left: 50px;
border-radius: 10px;
}
</style>
本文讨论了不当使用数据库可能导致的问题，如降低读写速度、增大备份难度及增加访问层级。文章建议图片、短生命周期数据和日志文件应采用更适合的存储方式。
扫一扫
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
