为什么下面代码处于修改页上传图片图片后，显示SQL DML、
DQL异常：Data truncation: Data too long
for column 'image' at row 1，请修复：<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">
<upload
Form label="介绍图片:" v-model="
form.cover" name="cover" :rules="rules.cover"
:disabled="Boolean(queryParams.type)" :limit="1"></upload
Form>
<el-row>
<el-col :span="12">
<el-
form-item label="团购名称:" prop="name">
<el-input class="input" v-model="
form.name" :disabled="Boolean(queryParams.type)"
placeholder="请输入团购名称" />
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="自动截止:" prop="isAutoEnd">
<el-switch v-model="
form.isAutoEnd" :disabled="Boolean(queryParams.type)"
:active-value="true" :inactive-value="false" />
</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" :disabled="Boolean(queryParams.type)"
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" :disabled="Boolean(queryParams.type)"
placeholder="请选择活动截止时间">
</el-date-picker>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="最大接龙人数" prop="maxJoinNum">
<el-input-number :disabled="Boolean(queryParams.type)" v-model="
form.maxJoinNum"
:precision="0" :step="1" :min="0"></el-input-number>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="最小成交金额" prop="minAmount">
<el-input-number :disabled="Boolean(queryParams.type)" v-model="
form.minAmount"
:precision="2" :step="0.1" :min="0"></el-input-number>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="提货地址:" prop="addressIds">
<el-select :disabled="Boolean(queryParams.type)" 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-col :span="24">
<el-
form-item label="团购内容" prop="detailInfo">
<UEditor v-model="
form.detailInfo" ref="ueditor" :config="myConfig"
:disabled="Boolean(queryParams.type)" />
</el-
form-item>
<!-- <el-
form-item label="团购内容:" prop="detailInfo">
<el-input :disabled="Boolean(queryParams.type)" type="textarea" :rows="2" placeholder="请输入团购内容"
:autosize="{ minRows: 4, maxRows: 8 }" v-model="
form.detailInfo"></el-input>
</el-
form-item> -->
</el-col>
</el-row>
<el-
form-item label="其它信息:">
<el-checkbox-group v-model="
form.selectedItemsOther" :disabled="Boolean(queryParams.type)">
<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" :disabled="Boolean(queryParams.type)">
<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">
<el-table-column label="商品名称" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-
form-item :prop="`products.${$index}.name`"
:rules="[{ required: true, message: '请输入团购名称', trigger: ['change', 'blur'] }]">
<el-input :disabled="Boolean(queryParams.type)"
v-model="
form.products[$index].name"
placeholder="请输入团购名称"></el-input>
</el-
form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品价格" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-
form-item :prop="`products.${$index}.price`"
:rules="[{ required: true, message: '请输入商品价格', trigger: ['change', 'blur'] }]">
<el-input-number :precision="2" :step="0.1" :min="0"
:disabled="Boolean(queryParams.type)"
v-model="
form.products[$index].price"></el-input-number>
</el-
form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品数量" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-
form-item :prop="`products.${$index}.totalNum`"
:rules="[{ required: true, message: '请输入商品数量', trigger: ['change', 'blur'] }]">
<el-input-number :precision="0" :step="1" :min="1"
:disabled="Boolean(queryParams.type)"
v-model="
form.products[$index].totalNum"></el-input-number>
</el-
form-item>
</div>
</template>
</el-table-column>
<el-table-column label="每单限制购买量" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-
form-item :prop="`products.${$index}.limitNum`"
:rules="[{ required: true, message: '请输入每单限制购买量', trigger: ['change', 'blur'] }]">
<el-input-number :precision="0" :step="1" :min="1"
:disabled="Boolean(queryParams.type)"
v-model="
form.products[$index].limitNum"></el-input-number>
</el-
form-item>
</div>
</template>
</el-table-column>
<el-table-column label="商品图片" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<el-upload action class="avatar-uploader" :on-remove="(file, fileList) => handleRemoveMaterial(file, fileList, $index)"
:http-request="(obj) => selectPicUploadMaterial(obj, $index)"
list-type="picture-card" :file-list="row.image"
:disabled="Boolean(queryParams.type)"
v-model="
form.products[$index].image">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
</el-table-column>
<!-- <el-table-column label="商品图片" align="center">
<template slot-scope="{row,$index}">
<div style="padding-bottom: 15px;">
<upload
Form label="" v-model="
form.products[$index].image"
:name="`products.${$index}.image`" :rules="[
{ required: true, message: '请选择商品图片', trigger: ['change', 'blur'] }
]" :disabled="Boolean(queryParams.type)" :limit="3"></upload
Form>
</div>
</template>
</el-table-column> -->
<el-table-column v-if="!queryParams.type" label="操作" align="center"
class-name="small-padding fixed-width" width="180">
<template slot-scope="scope">
<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 v-if="!queryParams.type" type="primary" @click="submit
Form">确 定</el-button>
<el-button @click="handleBack">取 消</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { imgUrl } from '@/utils/request'
import upload
Form from "@/components/upload
Form/index2.vue";
import { getISOTime, checkLongitudeValidator, checkPointIsNumber } from '@/utils/parsing'
import { checkPhone } from '@/utils/validate'
import mapView from '@/components/MapContainer/index.vue'
import UEditor from '@/components/UEditor/ue'
import { addGroupShop, editGroupBuy, getGroupBuyAddressPage, getGroupBuyDetail } from '@/api/solitaire/solitaire'
import { uploadPic } from '@/api/activity/activity'
import { onMounted, be
foreDestroy } from 'vue'
import { re
set } from 'echarts/lib/visual/seriesColor'
export default {
components: {
UEditor,
mapView,
upload
Form,
},
onMounted() {
},
data() {
return {
fileList: [],
myConfig:{},
addressoptions: [],
addressList: [],
currentTime: new Date().toLocaleTimeString(),
timer: null,
// 第一个复选框组绑定值
// 第二个复选框组绑定值
selectedItemsFunction: [],
checkList: ['选中且禁用', '复选框 A'],
checked: true, // 单个复选框的绑定
dataList: [],
title: "新增接龙",
// 封面图片
selectImgUrl: '',
queryParams: {},
currentImgIndex: 0,
// 封面图片类型选择
imgDialogVisible: false,
// 表单数据
form: {
selectedItemsOther: [],
selectedItemsFunction: [],
addressIds: [],
canCancel: 0,
cover: [],
detailInfo: null,
endTime: null,
id: 0,
isAutoEnd: 0,
isHideList: false,
isHideOrderAmount: false,
isJoin: 0,
maxJoinNum: null,
minAmount: null,
name: "",
products: [
{
id: 0,
image: [],
limitNum: 0,
name: "",
parentId: 0,
price: 0,
soldNum: 0,
totalNum: 0,
}
],
realEndTime: "",
startTime: "",
status: 0,
},
// 表单校验
rules: {
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', 'blur'] }
],
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()
this.queryParams = this.$route.query;
if (this.queryParams.id) {
// 编辑
this.title = '修改接龙'
console.log(Boolean(this.queryParams.type),'59')
// this.isdisabled = true;
getGroupBuyDetail(this.queryParams.id).then(res => {
this.
form = {
...res,
cover: [{ url: res.cover }],
isAutoEnd: res.isAutoEnd === 1 ? true : false,
addressIds: res.addresses.map(n => (n.id)),
selectedItemsOther: [],
selectedItemsFunction: [],
products: res.products.map((n) => {
let imageArray = []
if (n.image) {
const imageUrls = n.image.split(',');
imageArray = imageUrls.map(url => ({ url }));
}
console.log(imageArray,'988')
return {
...n,
image: imageArray
}
// const imageUrls = n.image.split(',');
// return {
// ...n,
// image: imageUrls.map(url => ({ url }))
// }
})
}
console.log(this.
form.isAutoEnd,'0000')
if (res.isGetRealName === 1) {
this.
form.selectedItemsOther.push('isGetRealName')
}
if (res.isGetPhone === 1) {
this.
form.selectedItemsOther.push('isGetPhone')
}
if (res.isHideList ===0) {
this.
form.selectedItemsFunction.push('isHideList')
}
if (res.isHideOrderAmount === 1) {
this.
form.selectedItemsFunction.push('isHideOrderAmount')
}
if (res.canCancel === 1) {
this.
form.selectedItemsFunction.push('canCancel')
}
this.$nextTick(() => {
if (this.$refs.ueditor) {
this.$refs.ueditor.
setContent(res.detailInfo);
}
});
console.log(this.
form,'-----')
})
}
},
methods: {
handleRemoveMaterial(file, fileList, index) {
// 找到要删除的图片在商品图片数组中的索引
const fileIndex = this.
form.products[index].image.findIndex(item => item.url === file.url);
if (fileIndex > -1) {
// 从商品图片数组中移除该图片
this.
form.products[index].image.splice(fileIndex, 1);
}
// 更新 fileList
const newFileList = fileList.filter(item => item.url !== file.url);
this.
form.products[index].image = newFileList;
},
selectPicUploadMaterial(obj, index) {
let fd = new
FormData();
fd.append('file', obj.file);
uploadPic(fd, { modularName: 'ACTIVITY' }).then(res => {
console.log('上传图片返回的数据', res);
if (res ) {
const product = this.
form.products[index];
if (!product.image) {
product.image = [];
}
product.image.push({ url: res, uid: Date.now() });
} else {
console.error('上传图片失败，未获取到有效的 url', res);
}
}).catch(error => {
console.error('上传图片请求失败', error);
});
},
// selectPicUploadMaterial(obj, index) {
// console.log(obj);
// let fd = new
FormData(); // 参数的格式是
formData格式的
// fd.append('file', obj.file); // 参数
// uploadPic(fd, { modularName: 'ACTIVITY' }).then(res => {
// console.log(res, '=====');
// const product = this.
form.products[index];
// if (!product.image) {
// product.image = [];
// }
// product.image.push({ url: res.url, uid: Date.now() });
// });
// console.log(this.
form.products[index].image);
// },
onMounted() {
},
getAddressList() {
getGroupBuyAddressPage().then(res => {
console.log(res,'099')
this.addressoptions = res.pageData
})
},
be
foreDestroy() {
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');
});
},
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);
},
// 表单重置
re
set() {
this.
form = {
addressIds: [],
cover: null,
canCancel: 0,
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,
}
},
// // 取消关闭弹窗
// 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
},
/** 提交按钮 */
submit
Form() {
console.log(this.
form, '000')
// return
this.
form.detailInfo = this.$refs.ueditor.getContent();
let new
Form = {
addressIds: this.
form.addressIds,
canCancel: this.
form.selectedItemsFunction.includes('canCancel') ? 1 : 0,
cover: this.
form.cover[0] && this.
form.cover[0].url,
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.
form.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 => {
// const image = item.image || [];
console.log(item,'==========')
return {
id: item.id,
// image: item.image.map(img => img.url).join(','),
image: item.image.map(img => img.url).join(','),
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,
};
console.log(new
Form, this.
form.id)
this.$refs['
form'].validate(valid => {
if (valid) {
if (this.
form.id) {
editGroupBuy(new
Form).then(response => {
console.log(response, '00')
this.$modal.msgSuccess('修改成功')
this.$router.back(-1)
})
} else {
if (this.
form.name != '' && this.
form.cover != '') {
addGroupShop(new
Form).then(response => {
console.log(response)
this.$modal.msgSuccess('新增成功')
this.$router.back(-1)
})
} else {
this.$modal.msgError('请完善信息')
}
}
}
})
},
handleBack() {
this.$router.back(-1)
},
// 新增时间段
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
})
}
}
})
}
},
// 跳转
toPrck() {
window.open('https://lbs.amap.com/tools/picker')
},
}
}
</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>
本次更新针对gtc_document对象，将xm_status设置为'Final'，并将pfe_xm_p_lc_change设置为null日期。操作条件为r_object_id等于特定ID。
扫一扫
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
