src/layout/components/appointTime.vue

@@ -22,7 +22,7 @@
                         <el-select v-model="timeList[index][row].minNumValue" 
                                    placeholder="最小人数" 
                                    style="width: 100px"
-                                   @change="minNumFun(timeList[index][row].minNumValue,index,row)">
+                                   @change="minNumFun">
                             <el-option v-for="item in minOptions[index][row]" 
                                        :key="item" 
                                        :value="item" />
@@ -34,31 +34,23 @@
                                        :key="item" 
                                        :value="item" />
                         </el-select>
+                        
                         <el-button circle @click="addList(index, row)"><el-icon>
                                 <Plus />
                             </el-icon></el-button>
                         <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>
             </div>
         </div>
-        <div class="totalButton">
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">保存</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="resetForm">重置</el-button>
-          </el-form-item>
-        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref , defineEmits } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue';
 const dayList = ref([0, 1, 2, 3])  //今天和未来三天
 const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
@@ -67,8 +59,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNunValue: ''
         }
     ],
     [
@@ -76,8 +67,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNunValue: ''
         }
     ],
     [
@@ -85,8 +75,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNunValue: ''
         }
     ],
     [
@@ -94,8 +83,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNunValue: ''
         }
     ]
 ])
@@ -115,22 +103,12 @@ const maxOptions = ref(
     ))
 )
 const flag = ref(0)  //第一个人数下标
-const appointmentDateAddRequestList = ref(
-    Array.from({length: 4},()=>(
-        {
-            timeSlot: '',
-            isAvailable: 0,
-            numberRange: ''
-        }
-    )),
-)
-const emit = defineEmits(['time-Info'])  //组件绑定
 onMounted(()=>{
     for(let i=0; i<4; i++) {  //开始时初始化人数的数组
         for(let j=0; j<6; j++) {
             for(let k=0;k<50;k++) {
-                minOptions.value[i][j][k] = k+5;
-                maxOptions.value[i][j][k] = k+6;
+                minOptions.value[i][j][k] = k+1;
+                maxOptions.value[i][j][k] = k+1;
             }
         }
     }
@@ -141,40 +119,27 @@ const addList = (index: any, row: any) => {
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNunValue: ''
         })
         flag.value += 1 
     }
 }
 const subList = (index: number, row: number) => {
+    console.log(index, row);
     timeList.value[index].splice(row, 1)
 }
-const minNumFun = (number : any,index : number,row : number)=> {
-    maxOptions.value[index][row].splice(0,number-5)
-}
-//组件传值
-const onSubmit =()=>{
-    //将数组处理成后端格式
-    emit('time-Info',timeList)
-}
-const resetForm=()=>{
-    for(let i=0;i<4;i++) {
-        timeList.value[i] = [{
-            startTime: '',
-            endTime: '',
-            minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
-        }]
+const minNumFun = (number : any)=> {
+    for(let i = 0;i<number;i++) {
+        if(maxOptions.value[i] < number) {
+            maxOptions.value.splice(i,1)
+            console.log(maxOptions.value);
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-.date-picker {
-    height: 750px;
-}
+
 div {
     font-size: 12px;
     color: rgb(96, 98, 102);
@@ -186,12 +151,9 @@ div {
 .box {
     width: 380px;
     height: 50pxpx;
+    border: 1px solid red;
 }
 .numRange {
     margin-left: 26px;
 }
-.totalButton {
-  display: flex;
-  justify-content: space-evenly;
-}
 </style>

src/views/ServiceType/AddServiceProduct.vue

@@ -65,7 +65,7 @@
       </el-form>
     </div>
     <div class="timeTable">
-      <appointTime @time-Info="getInfo"></appointTime>
+      <appointTime></appointTime>
     </div>
   </div>
   
@@ -82,6 +82,8 @@ const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
 const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const resetFormData = ref()
 const selectValue = '服务类'
+const dialogVisible = ref(false)
+const count = ref(1)
 const form = ref({
   name: '',
   price: '',  //商品价格
@@ -99,9 +101,36 @@ const form = ref({
 const reload: any = inject("reload")
 const uploadProductImg: any = ref()  //图片上传的ref绑定
 const uploadProductDetail: any = ref()  //图片上传的ref绑定
-const timeInfo = ref([])  //组件传过来的信息
+// const startTime = ref('')
+// const endTime = ref('')
+// const timeList = ref(
+//   {
+//     days: [0,1,2,3],  //表示第几天，0是当日
+//     slot: Array.from({ length:8 },()=>({
+//       startTime: '',
+//       endTime: ''
+//     }))
+//   }
+// )
+const timeList = ref([
+  {
+    slot: Array.from({ length: 8 }, () => ({
+      startTime: '',
+      endTime: ''
+    }))
+  }
+])
+//时间段数组对象
+const arr = ref([
+  {
+    timeSlot: '',
+    isAvailable: 1,
+    numberRange: ''
+  }
+]);
+const myDate = new Date();
 onMounted(() => {
-  // console.log(myDate.getHours());   //打印当前小时数
+  console.log(myDate.getHours());   //打印当前小时数
 })
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
@@ -167,9 +196,23 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商
   file.uid = genFileId()
   uploadProductDetail.value!.handleStart(file)
 }
-const getInfo =(info:any)=>{
-  timeInfo.value = info
-  console.log('--->',info.value);
+const showDatePop = () => {
+  dialogVisible.value = true
+}
+const handleClose = () => {
+  dialogVisible.value = false;
+}
+const addList = (index: number, row: number) => {
+  console.log(index, row);
+  // if (count.value <= 6) {
+  //   timeList.value[row+1] = {
+  //     startTime: '',
+  //     endTime: ''
+  //   }
+  // }
+}
+const subList = (index: number, row: number) => {
+  // arr.value[index].splice(index, 1)
 }
 </script>
 
@@ -179,6 +222,7 @@ const getInfo =(info:any)=>{
 }
 
 .fromBox {
+  border: 1px solid red;
   width: 750px;
   height: 750px;
 }