From 29d4228b4b8538daa96c99d034ea3703b7f244c6 Mon Sep 17 00:00:00 2001 From: yuanteng <1876787513@qq.com> Date: Thu, 19 Dec 2024 18:55:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=BA=86=E5=AE=9E=E4=BD=93=E7=B1=BB?= =?UTF-8?q?=E5=95=86=E5=93=81=E7=9A=84=E9=83=A8=E5=88=86=E7=BA=A6=E6=9D=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 16 +- src/utils/dealStringArray.js | 92 --------- src/utils/entityProduct/FormRules.ts | 26 +++ src/utils/entityProduct/globalVar.ts | 5 + src/utils/entityProduct/picUpload.ts | 70 +++++++ src/views/Commodity/AddProduct.vue | 223 ++++++++-------------- src/views/Commodity/MerchandiseCenter.vue | 92 ++++----- src/views/Commodity/TypeManagement.vue | 2 +- src/views/test.vue | 151 ++++++--------- 9 files changed, 283 insertions(+), 394 deletions(-) delete mode 100644 src/utils/dealStringArray.js create mode 100644 src/utils/entityProduct/FormRules.ts create mode 100644 src/utils/entityProduct/globalVar.ts create mode 100644 src/utils/entityProduct/picUpload.ts diff --git a/src/App.vue b/src/App.vue index edd88ac..4c73522 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,17 +6,27 @@ diff --git a/src/utils/dealStringArray.js b/src/utils/dealStringArray.js deleted file mode 100644 index 970dfac..0000000 --- a/src/utils/dealStringArray.js +++ /dev/null @@ -1,92 +0,0 @@ -import { ElMessage } from 'element-plus'; - -const isNotValid = (val) => { - const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])-(?:[0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/; - const rangeRegex = /^\(\d+,\d+\)$/ - return timeRegex.test(val.timeSlot) && rangeRegex.test(val.numberRange) -} - -const isValidPlus = (val) => { - const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])-(?:[0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/; - const rangeRegex = /^\(\d+,\d+\)$/ - if(val.timeSlot === '' && val.numberRange === '') return false - if(timeRegex.test(val.timeSlot) && rangeRegex.test(val.numberRange)) return false - return true -} - -export const transfer = (val, arr, isAvailableArr) => { - console.log('这是val:', val) - for (var i = 0; i < val.length; i ++ ) { - for (var j = 0; j < val[i].length; j ++ ) { - arr[i][j].timeSlot = val[i][j].startTime + "-" + val[i][j].endTime - arr[i][j].numberRange = "(" + val[i][j].minNumValue + "," + val[i][j].maxNumValue + ")" - } - } - console.log('这是arr:', arr) - for (var i = 0; i < 4; i ++ ) { - for (var j = 0; j < 6; j ++ ) { - if(isValidPlus(arr[i][j])) { - ElMessage({ - type: 'error', - message: '请检查表单数据是否完整填写' - }) - return ; - } - } - } - let newArr = new Array(4) - for (var i = 0; i < 4; i ++ ) { - newArr[i] = { - timeSlot:'', - numberRange: '', - isAvailable: false - } - } - - let timeSlotArr = [] - let numberRangeArr = [] - let cnt = 0 - let k = 0 - for (var i = 0; i < val.length; i ++ ) { - for (var j = 0; j < val[i].length; j ++ ) { - if(isNotValid(arr[i][j])) { - timeSlotArr.push(arr[i][j].timeSlot) - numberRangeArr.push(arr[i][j].numberRange) - } - } - if(val[i].length == 0){ - newArr[i].timeSlot = "00:00-00:00" - newArr[i].numberRange = "(0,0)" - newArr[i].isAvailable = 0 - k ++ - cnt ++ - }else{ - newArr[i].timeSlot = timeSlotArr.join(';') - newArr[i].numberRange = numberRangeArr.join(';') - newArr[i].isAvailable = isAvailableArr[i] ? 1 : 0 - if(!isAvailableArr[i]) k ++ - } - if(cnt == 4) { - ElMessage({ - type: 'error', - message: '至少得有一个预约时间段' - }) - return ; - } - if(k == 4) { - ElMessage({ - type: 'error', - message: '至少有一天可以预约' - }) - return ; - } - timeSlotArr = [] - numberRangeArr = [] - } - ElMessage({ - type: 'success', - message: '时间段保存成功' - }) - // console.log(newArr) - return newArr -} \ No newline at end of file diff --git a/src/utils/entityProduct/FormRules.ts b/src/utils/entityProduct/FormRules.ts new file mode 100644 index 0000000..b903ab4 --- /dev/null +++ b/src/utils/entityProduct/FormRules.ts @@ -0,0 +1,26 @@ +import { saveBtn, invInput } from './globalVar'; + +export const validateName = (rule: any, value: any, callback: any) => { //商品名称的校验规则 + if (value === '') { + callback(new Error('请输入商品名称')) + } else if (value.length < 2) { + callback(new Error('商品名称不能小于两位')) + saveBtn.value = true + } else { saveBtn.value = false } +} +export const validateIntro = (rule: any, value: any, callback: any) => { //商品简介的校验规则 + if (value === '') { + callback(new Error('请输入商品简介')) + } else if (value.length < 20) { + callback(new Error('商品简介不能少于20字')) + saveBtn.value = true + } else { saveBtn.value = false } +} +export const validateDetail = (rule: any, value: any, callback: any) => { + if (value === '') { + callback(new Error('请输入商品详情')) + } else if (value.length < 80) { + callback(new Error('商品详情不能少于80字')) + saveBtn.value = true + } else { saveBtn.value = false } +} \ No newline at end of file diff --git a/src/utils/entityProduct/globalVar.ts b/src/utils/entityProduct/globalVar.ts new file mode 100644 index 0000000..70adfb2 --- /dev/null +++ b/src/utils/entityProduct/globalVar.ts @@ -0,0 +1,5 @@ +import { ref } from "vue"; + +export const saveBtn = ref(false) //提交按钮状态 +export const invInput = ref(false) //库存按钮 + diff --git a/src/utils/entityProduct/picUpload.ts b/src/utils/entityProduct/picUpload.ts new file mode 100644 index 0000000..c25cb61 --- /dev/null +++ b/src/utils/entityProduct/picUpload.ts @@ -0,0 +1,70 @@ +import { ref } from 'vue'; +import myAxios from '@/api/myAxios'; +import { type UploadFile, type UploadProps, genFileId, type UploadRawFile, type FormInstance, type FormRules } from 'element-plus'; +import { WarnInfo } from '../messageInfo'; + +export const productImgMap = new Map() //商品图片数组 +export const productImgArr: any = ref([]) +export const fileSimple = ref() //单个文件 +export const form : any = ref({ //添加实体类商品的表单 + name: '', //商品名称 + price: '', //商品价格 + intro: '',//产品简介 + festivalName: '', //节日名称 + type: '',//类别 + label: '',//商品标签 + introDetail: '',//详情描述 + goodImg: '', //商品图片url + detailImg: '', //图文详情url + inventory: '' //库存 +}) + +//图片上传请求 此请求只要选择了图片，就会默认上传 +export const handleChange = async (file: any, flag: number) => { //12.18改 + fileSimple.value = file + let formData = new FormData() //这一步很重要 创建一个FormData对象 + formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData + const res = await myAxios({ //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型 + url: '/file/upload/server/not_login', + method: 'post', + headers: { + 'content-Type': 'multipart/form-data' + }, + data: { + biz: "test", + // 取出formData对象中的file + file: formData.get("file") + } + }) + if (res.data.code === 1) { + if (flag === 0) { + productImgArr.value.splice(0, productImgArr.value.length) //一并删除数组中存放的图片Url地址 + productImgMap.set(fileSimple.value.uid, res.data.data) + productImgMap.forEach(loopMap) //将图片url插入到数组中 + form.value.goodImg = formatString() + } else { + form.value.detailImg = res.data.data + } + } +} + +const formatString = () => { //拼接图片URL,方便传给后端 + var str = '' + str = productImgArr.value.join(';') + return str +} + +const loopMap = (value: any, key: any, map: any) => { //循环商品图片Map集合函数,用于给请求的字段赋值 + productImgArr.value.push(value) +} + +export const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息 + productImgMap.delete(uploadFile.uid) + productImgArr.value.splice(0, productImgArr.value.length) //一并删除数组中存放的图片Url地址 + productImgMap.forEach(loopMap) + form.value.goodImg = formatString() +} + +export const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片 'onExceed'当文件个数超过限制时，做出的判断 + WarnInfo('最多只能上传七张图片!') +} \ No newline at end of file diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue index ce22def..c20dff5 100644 --- a/src/views/Commodity/AddProduct.vue +++ b/src/views/Commodity/AddProduct.vue @@ -2,7 +2,7 @@
- +
@@ -14,9 +14,9 @@ -
- -
+
+ +
- - - - - -

元

- + + + + + +

元

+
- - - -
- - - -
+ + + +
+ + + +
- - - - - - - - + + + + + + + + +
+ +
@@ -65,16 +68,16 @@ 添加 - +
- - 保存 - - - 重置 - -
+ + 保存 + + + 重置 + +
@@ -83,148 +86,63 @@ @@ -263,20 +185,25 @@ const formatString =()=>{ margin: 0 auto; } + .fromBox { width: 700px; height: 750px; margin: 0 auto; } + .NamePrice { display: flex; } + .IntroInven { display: flex; } + .festivalBox { display: flex; } + .btnBox { display: flex; justify-content: space-around; diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue index 8ed2a3b..38c5a30 100644 --- a/src/views/Commodity/MerchandiseCenter.vue +++ b/src/views/Commodity/MerchandiseCenter.vue @@ -2,20 +2,16 @@
- - - - - - - - + 搜索 + + + + - - 搜索 重置
@@ -41,12 +37,18 @@ - + + + @@ -95,10 +97,8 @@ -
- 商品图标 -
+ limit="7" > @@ -116,8 +116,9 @@ - - + + +

元

 @@ -175,9 +176,11 @@ \ No newline at end of file