+
+ :header-cell-style="{ 'text-align': 'center' }" default-expand-all>
@@ -43,20 +43,31 @@
-
+
-
- 详情
+
+
+
-
+
+ 添加日期
+
+
编辑
- 删除
+
+
+ 删除
+
+
+
@@ -77,7 +88,7 @@
编辑
-
+
@@ -87,9 +98,6 @@
删除
-
-
@@ -124,21 +132,6 @@
-
-
-
-
-
-
-
-
-
-
@@ -168,10 +161,38 @@
- Hi, there!
+ @closed="closedDrawer">
+ {{ addbtnText }}
@@ -180,7 +201,7 @@ import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'e
import { ref, onMounted, inject } from 'vue';
import myAxios from "@/api/myAxios";
const total = ref(0); //总页数
-const idList = ref([]);
+const idList = ref([]); //用于批量删除
const searchParams: any = ref({ //封装分页
current: 1, //当前页码
pageSize: 5, //每页显示条数
@@ -199,9 +220,29 @@ const reload : any = inject("reload") //页面重新刷新
const fileSimple = ref()
const uploadProductImg : any = ref() //图片上传的ref绑定
const uploadProductDetail : any = ref() //图片上传的ref绑定
-const drawer = ref(false)
+//抽屉变量
+const drawer = ref(false) //抽屉打开
+const drawerDate : any = ref({}) //当前日期、时间段人数信息
+const timePickArr : any = ref([]) //时间段选择器
+const minArr : any = ref([]) //最小人数数组
+const maxArr : any = ref([]) //最大人数数组
+const InfoArr : any = ref([]) //时间段人数信息数组
+const btnText = ref(Array.from({length:15},()=>('修改')))
+const addbtnText = ref('添加时间段')
+const timeAbleArr = ref( //禁用时间段组件
+ Array.from({ length: 15 },()=>(false))
+)
+const numAbleArr = ref( //禁用人数组件
+ Array.from({ length: 15 },()=>(true))
+)
+const className = ref('') //课程名称
+const nowBookPeo = ref(0) //当前预约人数
onMounted(() => { //页面加载时获取商品列表和分类页表
getProductList()
+ for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组
+ minArr.value[i] = 5+i
+ maxArr.value[i] = 6+i
+ }
})
const getProductList = async () => {
try {
@@ -211,7 +252,7 @@ const getProductList = async () => {
tableData.value = res.data.data.records;
total.value = parseInt(res.data.data.total) //总数据量，用于分页
appointmentDateArr.value.splice(0,total.value)
- console.log(tableData.value);
+ console.log('tableData--->',tableData.value);
tableData.value.forEach((val : any) => {
appointmentDateArr.value.push(val.appointmentDateVOList)
})
@@ -229,6 +270,20 @@ const getProductList = async () => {
}
}
const saveEdit = async () => { //编辑商品
+ const res = await myAxios.post('/goods/service/single/update',{...editForm.value})
+ if(res.data.code === 1) {
+ DialogVisible.value = false
+ ElMessage({
+ type: 'success',
+ message: '更新成功'
+ })
+ } else {
+ ElMessage({
+ type: 'error',
+ message: '请检查字段是否正确填写'
+ })
+ }
+ console.log(res.data);
}
const searchByState = (event : any) => { //通过商品是否上架/下架搜索
searchParams.value.isShelves = event
@@ -238,7 +293,7 @@ const searchByState = (event : any) => { //通过商品是否上架/下架搜
//删除商品
const deleteProduct = async (index: number) => {
console.log(typeof index)
- const res = await myAxios.post('/goods/delete', { id: index })
+ const res = await myAxios.post('/goods/delete/service', { id: index })
console.log(res)
if (res.data.code === 1) {
ElMessage({
@@ -248,7 +303,6 @@ const deleteProduct = async (index: number) => {
getProductList()
}
}
-//选中发生的方法--->将其赋值给批量删除的数组
//详情或编辑
const ReviseOrView = (index: number, row: any , flag : number) => {
//flag值不同显示不同内容 disabled开启和关闭
@@ -257,16 +311,16 @@ const ReviseOrView = (index: number, row: any , flag : number) => {
editForm.value = row;
};
//下架商品(待优化，有问题，逻辑有问题)
-const handleOff = async (index: number, row: any) => {
- row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值
- editForm.value = row;
- const res = await myAxios.post('/goods/update',{...editForm.value})
+const handleOff = async (row: any) => {
+ console.log(row.isShelves);
+ const res = await myAxios.post('/goods/service/shelves',{id: row.id})
if(res.data.code === 1) {
ElMessage({
type:'success',
message:'更新成功'
})
- }
+ }
+ getProductList()
}
//处理行数大小变化
const handleSizeChange = (newSize: any) => {
@@ -298,10 +352,6 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商
file.uid = genFileId()
uploadProductDetail.value!.handleStart(file)
}
-// //将 商品类别 赋值到表格里
-const loadForm = (value: any, flag: number) => {
- flag ? editForm.value.type = value : editForm.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
-}
// 图片上传请求 此请求只要选择了图片，就会默认上传
const handleChange = async (file: any, flag: number) => {
fileSimple.value = file
@@ -346,9 +396,147 @@ const delBatch = async ()=>{
}
}
const handleSelectionChange =()=>{}
-const openDrawer =()=>{
+const openDrawer =(index : number,dateInfo : any)=>{ //抽屉打开方法
+ // console.log('row-->',dateInfo);
+ className.value = tableData.value[index].name
+ timePickArr.value.splice(0,timePickArr.value.length) //删除之前的时间段
+ drawerDate.value = dateInfo
+ InfoArr.value = dateInfo.timePeriodVOList
+ console.log(drawerDate.value);
+ dateInfo.timePeriodVOList.forEach((item:any,index:number)=>{ //格式化时间段框，然后将时间段数组禁用，只修改人数
+ let arr = item.timeSlot.split("-")
+ timeAbleArr.value[index] = true
+ timePickArr.value.push(arr)
+ })
drawer.value = true
}
+const saveTime =(index: number)=>{
+ try{
+ drawerDate.value.timePeriodVOList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1]
+ } catch {
+ drawerDate.value.timePeriodVOList[index].timeSlot = ''
+ }
+}
+const minNum =(index: number)=>{}
+const maxNum =(index: number)=>{}
+const addList = async ()=>{
+ let newIndex = drawerDate.value.timePeriodVOList.length
+ numAbleArr.value[newIndex] = false //启用组件
+ console.log('drawerDate--->',drawerDate.value);
+ if(addbtnText.value === '添加时间段') {
+ drawerDate.value.timePeriodVOList.push({ //增加当前日期时间段
+ id: 0,
+ timeSlot: '',
+ maxNumber: 0,
+ minNumber: 0
+ })
+ timePickArr.value.push([])
+ addbtnText.value = '保存时间段'
+ }
+ // console.log('timeSlot-->',drawerDate.value.timePeriodVOList[newIndex].timeSlot);
+ if(!judgeNull(drawerDate.value.timePeriodVOList)) {
+ ElMessage({
+ type: 'warning',
+ message: '填写时间段和人数'
+ })
+ return;
+ }
+ const res = await myAxios.post('/appointmentDate/add/time',{
+ timeSlot: drawerDate.value.timePeriodVOList[newIndex-1].timeSlot,
+ minNumber: drawerDate.value.timePeriodVOList[newIndex-1].minNumber,
+ maxNumber: drawerDate.value.timePeriodVOList[newIndex-1].maxNumber,
+ appointmentDateId: drawerDate.value.id,
+ })
+ console.log(res.data.data);
+ if(res.data.code === 1) {
+ drawerDate.value.timePeriodVOList[newIndex-1].id = res.data.data
+ drawerDate.value.timePeriodVOList.forEach((item: any,index: number)=>{
+ timeAbleArr.value[index] = true
+ numAbleArr.value[index] = true
+ })
+ ElMessage({
+ type: 'success',
+ message: '添加时间段成功'
+ })
+ } else {
+ ElMessage({
+ type: 'error',
+ message: '添加失败'
+ })
+ }
+ console.log(res.data);
+ addbtnText.value = '添加时间段'
+}
+const subList =(index: number)=>{}
+const UpdateNum = async (item: any,index:number)=>{ //修改具体日期某时间段的人数
+ btnText.value[index] === '修改' ? btnText.value[index] = '保存' : btnText.value[index] = '修改'
+ btnText.value[index] === '保存' ? numAbleArr.value[index] = false : numAbleArr.value[index] = true
+ if(btnText.value[index] === '修改') {
+ const res = await myAxios.post('/appointmentDate/update/time',{
+ id: item.id,
+ minNumber: item.minNumber,
+ maxNumber: item.maxNumber
+ })
+ if(res.data.code === 1) {
+ ElMessage({
+ type: 'success',
+ message: '更新成功'
+ })
+ } else {
+ ElMessage({
+ type: 'error',
+ message: '更新失败'
+ })
+ }
+ }
+}
+const updateDay = async (row:any)=>{ //修改今天是否可以预约
+ const res = await myAxios.post('/appointmentDate/update/status',{id: row.id})
+ if(res.data.code === 1) {
+ ElMessage({
+ type:'success',
+ message: '修改成功'
+ });
+ }
+ getProductList()
+}
+const judgeNull =(List : any)=>{ //时间段和人数统一判空方法
+ console.log('List--->',List);
+ if (List.some((item:any) => item.timeSlot=== '' || item.minNumber === 0 || item.maxNumber === 0)) {
+ return false;
+ }
+ return true;
+}
+const closedDrawer =()=>{ //完全关闭抽屉触发
+ let newIndex = drawerDate.value.timePeriodVOList.length
+ timeAbleArr.value.forEach((item: any ,index: number)=>{
+ timeAbleArr.value[index] = false
+ numAbleArr.value[index] = true
+ btnText.value[index] = '修改'
+ })
+ if(!judgeNull(drawerDate.value.timePeriodVOList)) {
+ console.log('关闭抽屉的删除数组被激活');
+ drawerDate.value.timePeriodVOList.splice(newIndex-1,1)
+ }
+ addbtnText.value = '添加时间段'
+}
+const deleteDate = async (id: number)=>{ //删除当前日期方法
+ console.log(id)
+ const res = await myAxios.post('/appointmentDate/del/id',{id:id})
+ // console.log('res--->',res);
+ if(res.data.code === 1) {
+ getProductList()
+ ElMessage({
+ type: 'success',
+ message: '删除成功'
+ })
+ } else {
+ ElMessage({
+ type: 'info',
+ message: '请求失败'
+ })
+ }
+}
\ No newline at end of file
+const validatePass2 = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('Please input the password again'))
+ } else if (value !== ruleForm.pass) {
+ callback(new Error("Two inputs don't match!"))
+ } else {
+ callback()
+ }
+}
+
+const ruleForm = reactive({
+ pass: '',
+ checkPass: '',
+ age: '',
+})
+
+const rules = reactive>({ //表单校验规则,需要检验的就放进来
+ pass: [{ validator: validatePass, trigger: 'blur' }],
+ checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+ age: [{ validator: checkAge, trigger: 'blur' }],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.validate((valid) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!')
+ }
+ })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.resetFields()
+}
+
\ No newline at end of file
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 2/2] =?UTF-8?q?=E6=94=B9=E4=BA=86=E5=AE=9E=E4=BD=93?=
=?UTF-8?q?=E7=B1=BB=E5=95=86=E5=93=81=E7=9A=84=E9=83=A8=E5=88=86=E7=BA=A6?=
=?UTF-8?q?=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 @@
@@ -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 @@
取消预约
+ 启用预约
下架
上架
选择当天时间段和人数
+
+ 选择时间段
+
+
+ 最小人数:
+
+
+ 最大人数:
+
+
+ {{ btnText[index] }}
+ 删除
+
+
-
+
@@ -14,9 +14,9 @@
-
-
-
+
+
+
-
-
-
-
+
+
+
+
元
-元
+
-
-
-
+
+
-
-
-
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -65,16 +68,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
- ![]()
+ ![]()
+ {{ scope.row.price }} 元
+
+
+
- ![商品图标]()
-
元