Merge branch 'main' of http://154.8.193.216:3030/admin1/jiangchengfeiyi-Web

src/layout/components/appointTime.vue

@@ -22,7 +22,7 @@
                         <el-select v-model="timeList[index][row].minNumValue" 
                                    placeholder="最小人数" 
                                    style="width: 100px"
-                                   @change="minNumFun">
+                                   @change="minNumFun(timeList[index][row].minNumValue,index,row)">
                             <el-option v-for="item in minOptions[index][row]" 
                                        :key="item" 
                                        :value="item" />
@@ -34,23 +34,31 @@
                                        :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 } from 'vue'
+import { onMounted, ref , defineEmits } from 'vue'
 import { Plus } from '@element-plus/icons-vue';
 const dayList = ref([0, 1, 2, 3])  //今天和未来三天
 const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
@@ -59,7 +67,8 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: ''
+            maxNunValue: '',
+            isAvailable: false
         }
     ],
     [
@@ -67,7 +76,8 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: ''
+            maxNunValue: '',
+            isAvailable: false
         }
     ],
     [
@@ -75,7 +85,8 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: ''
+            maxNunValue: '',
+            isAvailable: false
         }
     ],
     [
@@ -83,7 +94,8 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: ''
+            maxNunValue: '',
+            isAvailable: false
         }
     ]
 ])
@@ -103,12 +115,22 @@ 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+1;
-                maxOptions.value[i][j][k] = k+1;
+                minOptions.value[i][j][k] = k+5;
+                maxOptions.value[i][j][k] = k+6;
             }
         }
     }
@@ -119,27 +141,40 @@ const addList = (index: any, row: any) => {
             startTime: '',
             endTime: '',
             minNumValue: '',
-            maxNunValue: ''
+            maxNunValue: '',
+            isAvailable: false
         })
         flag.value += 1 
     }
 }
 const subList = (index: number, row: number) => {
-    console.log(index, row);
     timeList.value[index].splice(row, 1)
 }
-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);
+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
+        }]
     }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.date-picker {
+    height: 750px;
+}
 div {
     font-size: 12px;
     color: rgb(96, 98, 102);
@@ -151,9 +186,12 @@ 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></appointTime>
+      <appointTime @time-Info="getInfo"></appointTime>
     </div>
   </div>
   
@@ -82,8 +82,6 @@ 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: '',  //商品价格
@@ -101,36 +99,9 @@ const form = ref({
 const reload: any = inject("reload")
 const uploadProductImg: any = ref()  //图片上传的ref绑定
 const uploadProductDetail: any = ref()  //图片上传的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();
+const timeInfo = ref([])  //组件传过来的信息
 onMounted(() => {
-  console.log(myDate.getHours());   //打印当前小时数
+  // console.log(myDate.getHours());   //打印当前小时数
 })
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
@@ -196,23 +167,9 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商
   file.uid = genFileId()
   uploadProductDetail.value!.handleStart(file)
 }
-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)
+const getInfo =(info:any)=>{
+  timeInfo.value = info
+  console.log('--->',info.value);
 }
 </script>
 
@@ -222,7 +179,6 @@ const subList = (index: number, row: number) => {
 }
 
 .fromBox {
-  border: 1px solid red;
   width: 750px;
   height: 750px;
 }