添加服务类商品

2024-12-03 19:51:45 +08:00 · 2024-12-03 19:51:45 +08:00 · 848d29f81e
commit 848d29f81e
parent 6e902244c9
5 changed files with 108 additions and 137 deletions
--- a/src/layout/components/appointTime.vue
+++ b/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: '',
-            isAvailable: false
+            maxNumValue: ''
        }
    ],
    [
@ -77,8 +79,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
            startTime: '',
            endTime: '',
            minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNumValue: ''
        }
    ],
    [
@ -86,8 +87,7 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
            startTime: '',
            endTime: '',
            minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNumValue: ''
        }
    ],
    [
@ -95,12 +95,13 @@ const timeList = ref([    //时间段数组，可以直接通过timeList[index][
            startTime: '',
            endTime: '',
            minNumValue: '',
-            maxNunValue: '',
-            isAvailable: false
+            maxNumValue: ''
        }
    ]
 ])
-
+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: '',
-            isAvailable: false
+            maxNumValue: ''
        })
        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)=> {
-    maxOptions.value[index][row].splice(0,number-5)
+const minNumFun = (index : number,row : number)=> {
+    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)
-    console.log(tempArr)
+    let tempArr = transfer(timeList.value, arr,isAvailableArray.value)
+    // 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: '',
-            isAvailable: false
+            maxNumValue: '',
        }]
+        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>
--- a/src/utils/dealStringArray.js
+++ b/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].isAvailable = val[i][j].isAvailable
+            arr[i][j].numberRange = "(" + val[i][j].minNumValue + "," + val[i][j].maxNumValue + ")"
        }
    }
    // 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 = []
    }
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@ -370,7 +370,7 @@ const delBatch = async ()=>{
    ElMessage.error('删除失败')
  }
 }
-const load =()=>{}
+const handleSelectionChange =()=>{}
 </script>

 <style scoped>
--- a/src/views/ServiceType/AddServiceProduct.vue
+++ b/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: '',
-  people: 0,
-  date: []
+  festivalOrder: 0,
+  inventory: 1,
+  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.value);
+  console.log('info-->',info);
+  // 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>
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@ -1,5 +1,5 @@
 <template>
-    <div>123</div>
+    
 </template>

 <script setup lang="ts">