+
diff --git a/src/views/ServiceType/ProductCenter.vue b/src/views/ServiceType/ProductCenter.vue
index cee4df2..7cbe4f9 100644
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@@ -26,7 +26,7 @@
+ :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">
+ 选择当天时间段和人数
+
+
选择时间段
+
+
+ 最小人数:
+
+
+
+ 最大人数:
+
+
+
+ {{ btnText[index] }}
+ 删除
+
+
@@ -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