添加服务类商品

src/layout/components/appointTime.vue

@@ -4,6 +4,7 @@
             <div v-for="(item, index) in dayList" :key="index">
                 <div class="inner" style="font-size: medium;">
                     第{{ index + 1 }}天
+                    <el-checkbox v-model="isAvailableArray[index]" label="这天可预约"  style="margin-left: 10px;"/>
                 </div>
                 <!-- 时间段部分 -->
                 <div class="time-picker">
@@ -22,14 +23,16 @@
                         <el-select v-model="timeList[index][row].minNumValue" 
                                    placeholder="最小人数" 
                                    style="width: 100px"
-                                   @change="minNumFun(timeList[index][row].minNumValue,index,row)">
+                                   @change="minNumFun(index,row)">
                             <el-option v-for="item in minOptions[index][row]" 
                                        :key="item" 
                                        :value="item" />
                         </el-select>
-                        <el-select v-model="timeList[index][row].maxNunValue" 
+                        <el-select v-model="timeList[index][row].maxNumValue" 
                                    placeholder="最大人数" 
-                                   style="width: 100px">
+                                   style="width: 100px"
+                                   @change="maxNumFun(index,row)"
+                                   >
                             <el-option v-for="item in maxOptions[index][row]" 
                                        :key="item" 
                                        :value="item" />
@@ -40,7 +43,6 @@
                         <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon>
                                 <Minus />
                             </el-icon></el-button>
-                        <el-checkbox v-model="timeList[index][row].isAvailable" label="此时间段可预约"  style="margin-left: 10px;"/>
                         </div>
                     </div>
                 </div>
@@ -60,7 +62,8 @@
 <script setup lang="ts">
 import { onMounted, ref , defineEmits } from 'vue'
 import { Plus } from '@element-plus/icons-vue';
-
+import { transfer } from '../../utils/dealStringArray';   //导入js函数
+import { ElMessage } from 'element-plus';
 const dayList = ref([0, 1, 2, 3])  //今天和未来三天
 const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
     [
@@ -68,8 +71,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: ''
-            isAvailable: false
         }
     ],
     [
@@ -77,8 +79,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: ''
-            isAvailable: false
         }
     ],
     [
@@ -86,8 +87,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: ''
-            isAvailable: false
         }
     ],
     [
@@ -95,12 +95,13 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: ''
-            isAvailable: false
         }
     ]
 ])
-
+const isAvailableArray = ref(
+    Array.from({length:4},()=>(false))
+)
 //人数数组，初始化好四天六个时间段的人数
 const minOptions = ref(
     Array.from({length:4},()=>(
@@ -117,32 +118,7 @@ const maxOptions = ref(
     ))
 )
 const flag = ref(0)  //第一个人数下标
-const appointmentDateAddRequestList = ref(
-    Array.from({length: 4},()=>(
-        {
-            timeSlot: '',
-            isAvailable: 0,
-            numberRange: ''
-        }
-    )),
-)
-
 var arr = new Array(4)
-const init = () => {
-    for (var i = 0; i < 4; i ++ ) {
-        arr[i] = new Array(6)
-    }
-    for (var i = 0; i < 4; i ++ ) {
-        for (var j = 0; j < 6; j ++ ) {
-            arr[i][j] = {
-                timeSlot: '',
-                numberRange: '',
-                isAvailable: ''
-            }
-        }
-    }
-}
-
 const emit = defineEmits(['time-Info'])  //组件绑定
 onMounted(()=>{
     init()
@@ -161,8 +137,7 @@ const addList = (index: any, row: any) => {
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: ''
-            isAvailable: false
         })
         flag.value += 1 
     }
@@ -170,94 +145,55 @@ const addList = (index: any, row: any) => {
 const subList = (index: number, row: number) => {
     timeList.value[index].splice(row, 1)
 }
-const minNumFun = (number : any,index : number,row : number)=> {
+const minNumFun = (index : number,row : number)=> {
-    maxOptions.value[index][row].splice(0,number-5)
+    if(timeList.value[index][row].maxNumValue < timeList.value[index][row].minNumValue && timeList.value[index][row].maxNumValue != '') {
+        ElMessage({
+            type: 'error',
+            message: '最小人数不大于最大人数'
+        })
+        timeList.value[index][row].minNumValue = ''
+        return;
+    }
 }
-import { transfer } from '../../utils/dealStringArray';
 //组件传值
 const onSubmit =()=> {
-    let tempArr = transfer(timeList.value, arr)
+    let tempArr = transfer(timeList.value, arr,isAvailableArray.value)
-    console.log(tempArr)
+    // console.log(tempArr)
     //将数组处理成后端格式
     emit('time-Info',tempArr)
 }
-
-
-
-// const isNotValid = (val:any) => {
-//     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:any) => {
-//     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
-// }
-
-// const transfer = (val:any) => {
-//     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].maxNunValue + ")"
-//             arr[i][j].isAvailable = val[i][j].isAvailable
-//         }
-//     }
-//     // console.log(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:any = new Array(4)
-//     for (var i = 0; i < 4; i ++ ) {
-//         newArr[i] = {
-//             timeSlot:'',
-//             numberRange: '',
-//             isAvailable: true
-//         }
-//     }
-
-//     let timeSlotArr:any = []
-//     let numberRangeArr:any = []
-//     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)
-//             }
-//         }
-//         newArr[i].timeSlot = timeSlotArr.join(';')
-//         newArr[i].numberRange = numberRangeArr.join(';')
-//         timeSlotArr = []
-//         numberRangeArr = []
-//     }
-//     console.log(newArr)
-//     return newArr
-// }
-
-
-
-
 const resetForm=()=>{
-    console.log(3333)
     for(let i=0;i<4;i++) {
         timeList.value[i] = [{
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
+            maxNumValue: '',
-            isAvailable: false
         }]
+        isAvailableArray.value[i] = false
+    }
+}
+const init = () => {
+    for (var i = 0; i < 4; i ++ ) {
+        arr[i] = new Array(6)
+    }
+    for (var i = 0; i < 4; i ++ ) {
+        for (var j = 0; j < 6; j ++ ) {
+            arr[i][j] = {
+                timeSlot: '',
+                numberRange: '',
+                isAvailable: ''
+            }
+        }
+    }
+}
+const maxNumFun =(index: number ,row: number)=>{
+    if(timeList.value[index][row].maxNumValue < timeList.value[index][row].minNumValue) {
+        ElMessage({
+            type: 'error',
+            message: '最大人数应该大于最小人数'
+        })
+        return;
     }
 }
 </script>

src/utils/dealStringArray.js

@@ -1,4 +1,3 @@
-
 import { ElMessage } from 'element-plus';
 
 const isNotValid = (val) => {
@@ -15,12 +14,11 @@ const isValidPlus = (val) => {
     return true
 }
 
-export const transfer = (val, arr) => {
+export const transfer = (val, arr, isAvailableArr) => {
     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].maxNunValue + ")"
+            arr[i][j].numberRange = "(" + val[i][j].minNumValue + "," + val[i][j].maxNumValue + ")"
-            arr[i][j].isAvailable = val[i][j].isAvailable
         }
     }
     // console.log(arr)
@@ -40,7 +38,7 @@ export const transfer = (val, arr) => {
         newArr[i] = {
             timeSlot:'',
             numberRange: '',
-            isAvailable: true
+            isAvailable: false
         }
     }
 
@@ -55,6 +53,7 @@ export const transfer = (val, arr) => {
         }
         newArr[i].timeSlot = timeSlotArr.join(';')
         newArr[i].numberRange = numberRangeArr.join(';')
+        newArr[i].isAvailable = isAvailableArr[i] ? 1 : 0
         timeSlotArr = []
         numberRangeArr = []
     }

src/views/Commodity/MerchandiseCenter.vue

@@ -370,7 +370,7 @@ const delBatch = async ()=>{
     ElMessage.error('删除失败')
   }
 }
-const load =()=>{}
+const handleSelectionChange =()=>{}
 </script>
 
 <style scoped>

src/views/ServiceType/AddServiceProduct.vue

@@ -4,7 +4,7 @@
       <!-- 表单 ref 和 prop绑定  用于重置表单 -->
       <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px;" size="large">
         <div class="totalPicture">
-          <div class="boxPicture1">
+          <div>
             <el-form-item label="添加课程展示图片">
               <!-- 下面的event的作用,传入当前事件对象 -->
               <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
@@ -45,9 +45,21 @@
           <el-input v-model="form.intro" type="textarea" style="width: 600px;" />
         </el-form-item>
         <!-- 使用弹窗 -->
+      <div class="midBox">
         <el-form-item label="产品类别" prop="type">
-          <el-select v-model="selectValue" disabled style="width: 110px;" />
+          <el-select v-model="form.type" disabled style="width: 110px;" />
         </el-form-item>
+        <el-form-item label="节日限定" prop="type">
+          <el-select v-model="festivalValue" style="width: 110px;" placeholder="请选择" @change="setFestival">
+            <el-option
+                v-for="item in festivalList"
+                :key="item"
+                :label="item"
+                :value="item"
+                />
+          </el-select>
+        </el-form-item>
+      </div>
         <el-form-item label="商品标签" prop="label">
           <el-input v-model="form.label" type="textarea" placeholder="使用英文;分隔符分开" style="width: 600px;" />
         </el-form-item>
@@ -72,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 import { ElMessage, type UploadFile, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
 import myAxios from "@/api/myAxios";
@@ -81,25 +93,26 @@ const fileSimple = ref() //单个文件
 const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
 const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const resetFormData = ref()
-const selectValue = '服务类'
 const form = ref({
   name: '',
   price: '',  //商品价格
   intro: '',//产品简介
-  type: '',//类别
+  type: '服务类',//类别
   label: '',//商品标签
   introDetail: '',//详情描述
   goodImg: '',  //商品图片url
   detailImg: '',  //图文详情url
-  timePeriod: '',
+  festivalOrder: 0,
-  people: 0,
+  inventory: 1,
-  date: []
+  appointmentDateAddRequestList: []  //预约时间段，是否可预约，人数范围
 })
+const festivalList = ['非限定','端午节','元宵节','元旦']
 //导入组件刷新
 const reload: any = inject("reload")
 const uploadProductImg: any = ref()  //图片上传的ref绑定
 const uploadProductDetail: any = ref()  //图片上传的ref绑定
 const timeInfo = ref([])  //组件传过来的信息
+const festivalValue = ref('')
 onMounted(() => {
   // console.log(myDate.getHours());   //打印当前小时数
 })
@@ -110,14 +123,28 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 const onSubmit = async () => {  
   const values = Object.values(form.value);
   // 使用some()方法来检查是否有任何值为空
-  if (values.some(value => value === null || value === undefined || value === '')) {
+  if (values.some(value => value === null || value === undefined || value === '') || form.value.appointmentDateAddRequestList.length == 0) {
     ElMessage({
       type: 'warning',
       message: '请检查表单数据是否完整填写'
     })
     return;  //空返回结束函数
   }
-  const res = await myAxios.post('/goods/add', { ...form.value })
+  console.log(form.value);
+  const res = await myAxios.post('/goods/add/service', { 
+    name: form.value.name,
+    type: form.value.type,
+    price: form.value.price,
+    goodImg: form.value.goodImg,
+    intro: form.value.intro,
+    introDetail: form.value.introDetail,
+    detailImg: form.value.detailImg,
+    label: form.value.label,
+    inventory: form.value.inventory,
+    festivalOrder: form.value.festivalOrder,
+    appointmentDateAddRequestList: toRaw(form.value.appointmentDateAddRequestList)
+  })
+  console.log(res.data);
   if (res.data.code === 1) {
     ElMessage({
       type: 'success',
@@ -168,8 +195,14 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商
   uploadProductDetail.value!.handleStart(file)
 }
 const getInfo =(info:any)=>{
-  timeInfo.value = info
+  console.log('info-->',info);
-  console.log('--->',info.value);
+  // timeInfo.value = info
+  form.value.appointmentDateAddRequestList = info
+}
+const setFestival =(info:any)=>{
+  console.log(info);
+  form.value.festivalOrder = festivalList.findIndex(value=>value == info)
+  console.log(form.value.festivalOrder);
 }
 </script>
 
@@ -196,7 +229,9 @@ const getInfo =(info:any)=>{
   justify-content: space-evenly;
   /*  盒子里面水平分隔开 */
 }
-
+.midBox {
+  display: flex;
+}
 .date-picker {
   flex: 0.3;
   /* 日期选择区域占据左边 */
@@ -221,4 +256,5 @@ const getInfo =(info:any)=>{
   margin-bottom: 10px;
   border: 1px solid orange;
 }
+
 </style>

src/views/ServiceType/ProductCenter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>123</div>
+    
 </template>
 
 <script setup lang="ts">