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

src/api/myAxios.ts

@@ -4,8 +4,8 @@ import router from '../router'
 
 const myAxios = axios.create({
     withCredentials:true,
-    baseURL: 'http://localhost:9092/api'//测试服务器
+    baseURL: 'http://localhost:9092/api'
-    // baseURL: 'http://123.249.108.160:8888/api'
+    // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

src/layout/components/DateDrawer.vue

@@ -0,0 +1,80 @@
+<template>
+    <div style="margin-bottom: 20px;">选择当天时间段和人数</div>
+    <div v-for="(item,index) in timeArr">
+      <span>选择时间段</span>
+      <!-- <el-time-picker
+      v-model="timePickArr[index]"
+      format='HH:mm'
+      is-range="true"
+      range-separator="到"
+      start-placeholder="开始"
+      end-placeholder="结束"
+      value-format="HH:mm"
+      :style="{ width: '236px' }"
+      @change="saveTime(index)"
+    /> -->
+      <div>
+        <span>最小人数:</span>
+        <el-select v-model="timeArr.minNumber" style="width: 100px" @change="minNum(index)">
+          
+        </el-select>
+        <span>最大人数:</span>
+        <el-select v-model="timeArr.maxNumber" style="width: 100px" @change="maxNum(index)">
+          
+        </el-select>
+        <el-button circle @click="addList(index)"><el-icon>
+            <Plus />
+          </el-icon></el-button>
+        <el-button circle @click="subList(index)" v-if="index > 0"><el-icon>
+            <Minus />
+          </el-icon></el-button>
+      </div>
+    </div>
+    <el-button size="small" @click="printInfo()">
+              打印
+            </el-button>
+</template>
+
+<script setup lang="ts">
+import { ref,onMounted,defineEmits } from 'vue';
+import { ElMessage } from 'element-plus';
+const fatherCom : any = defineProps(['timeObject'])  //接收父组件传过来的值
+const timeArr : any = ref(fatherCom.timeObject)  //把外层去掉，只留时间段数组
+
+onMounted(()=>{
+})
+const saveTime =(index:number)=>{
+}
+const addList =(index:number)=>{}
+const subList =(index:number)=>{}
+const minNum =(index : number)=>{  //最小人数不能大于最大人数
+  if(false) {
+    ElMessage({
+      type: 'warning',
+      message: '最小人数不能大于最大人数'
+    })
+    return;
+  }
+}
+const maxNum =(index : number)=>{
+  if(false) {
+    ElMessage({
+      type: 'warning',
+      message: '最大人数不能小于最小人数'
+    })
+    return;
+  }
+}
+const printInfo =()=>{
+    // console.log('timePickArr-->',timePickArr.value);
+    console.log('timeArr-->',timeArr.value);
+    // console.log(fatherCom);
+    // let tempArr = timeArr.value[0].timeSlot.split("-")
+    // timePickArr.value.push(tempArr)
+    // console.log(timePickArr.value);
+}
+</script>
+
+<style scoped>
+
+</style>

src/layout/components/calendarUtil.vue

@@ -157,6 +157,7 @@ const drawerOpen =()=>{  //抽屉打开时
   if(isTrue.value) {
     periodObj.value = periodMap.get(periodObj.value.specificDate)
     timePickArr.value= timePickMap.get(periodObj.value.specificDate)
+    console.log('timePickArr--->',timePickArr.value);
   }
 }
 const resetForm =()=>{  //重置表格

src/utils/messageInfo.ts

@@ -0,0 +1,29 @@
+import { ElMessage } from 'element-plus';
+
+export const SuccessInfo = (message: any)=>{  //成功的提示
+    ElMessage({
+        type: 'success',
+        message: message
+    })
+}
+
+export const ErrorInfo = (message: any)=>{  //错误的提示
+    ElMessage({
+        type: 'error',
+        message: message
+    })
+}
+
+export const WarnInfo = (message: any) =>{  //警告的提示
+    ElMessage({
+        type: 'warning',
+        message: message
+    })
+}
+
+export const CommInfo =(message: any)=>{   //普通提示
+    ElMessage({
+        type: 'info',
+        message: message
+    })
+}

src/views/Commodity/AddProduct.vue

@@ -1,99 +1,102 @@
 <template>
-  <div>
+  <div class="totalBox">
     <!-- 表单 ref 和 prop绑定  用于重置表单 -->
-    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
+    <div class="fromBox">
+      <el-form ref="resetFormData" :model="form" label-width="auto"  size="large" :rules="rules">
+        <div>
           <el-form-item label="添加商品图片">
             <!-- 下面的event的作用,传入当前事件对象 -->
-        <el-upload 
+            <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
-          ref="uploadProductImg"
+              :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)" :on-exceed="Exceed_ProductImg"
-          action="#" 
+              limit="7">
-          list-type="picture-card" 
-          :auto-upload="false" 
-          multiple="true"
-          :on-remove="handleRemove"
-          @change="(event: any) => handleChange(event, 0)" 
-          :on-exceed="Exceed_ProductImg"
-          limit="1" >
               <el-icon>
                 <Plus />
               </el-icon>
             </el-upload>
           </el-form-item>
+          </div>
           <!--  添加图文描述-->
+          <div>
           <el-form-item label="添加图文描述">
-        <el-upload 
+            <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
-          ref="uploadProductDetail"
+              multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
-          action="#" 
+              limit="1" :on-remove="handleRemove">
-          list-type="picture-card" 
-          :auto-upload="false" 
-          multiple="true"
-          :on-change="(event: any) => handleChange(event, 1)" 
-          :on-exceed="Exceed_ProductDetail"
-          limit="1"
-          :on-remove="handleRemove"
-          >
               <el-icon>
                 <Plus />
               </el-icon>
             </el-upload>
           </el-form-item>
+        </div>
+        <div class="NamePrice">
         <el-form-item label="产品名称" prop="name">
-        <el-input v-model="form.name" />
+          <el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
         </el-form-item>
-
         <el-form-item label="产品价格" prop="price">
-        <el-input v-model="form.price" />
+          <el-input-number v-model="form.price" min="0.01" :precision="2" :step="0.5" />
+          <p>元</p>
         </el-form-item>
+        </div>
+        <div class="IntroInven">
         <el-form-item label="产品简介" prop="intro">
-        <el-input v-model="form.intro" />
+          <el-input v-model="form.intro" type="textarea" placeholder="产品尺寸，服务等" maxlength="30" show-word-limit
+            style="width: 300px;" />
         </el-form-item>
-      <el-form-item label="当前库存" prop="inventory">
+        <div>
-        <el-input v-model="form.inventory" />
+        <el-form-item label="库存" prop="inventory">
+          <el-input-number v-model="form.inventory" min="0" :precision="0" :step="1" />
         </el-form-item>
-      <el-form-item label="是否为限定类产品" prop="festivalOrder">
+        </div>
-        <el-select v-model="form.festivalOrder" placeholder="请选择" @change="(event: any) => loadForm(event, 0)">
+        </div>
-          <el-option label="是" value="1" />
+        <div class="festivalBox">
-          <el-option label="否" value="0" />
+        <el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
-        </el-select>
-      </el-form-item>
-      <!-- <el-form-item v-if="form.region=='ture' " label="节日名称">
           <el-input v-model="form.festivalName" />
-      </el-form-item> -->
+        </el-form-item>
-      <el-form-item label="产品类别" prop="type">
+        <el-form-item label="产品类别" prop="type" style="width: 240px;">
           <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadForm(event, 1)">
             <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
           </el-select>
         </el-form-item>
+        </div>
         <el-form-item label="商品标签" prop="label">
-        <el-input v-model="form.label" type="textarea" placeholder="" />
+          <div v-for="(item, index) in labelList" :key="index">
+            <el-input v-model="labelList[index]" type="text" style="width: 150px;" maxlength="5" show-word-limit
+              @blur="addLabelList" />
+          </div>
+          <el-button type="primary" @click="addLabel">添加</el-button>
         </el-form-item>
         <el-form-item label="商品详细描述" prop="introDetail">
-        <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" />
+          <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" maxlength="100" show-word-limit/>
         </el-form-item>
+        <div class="btnBox">
         <el-form-item>
-        <el-button type="primary" @click="onSubmit">上架</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="resetForm">重置</el-button>
         </el-form-item>
+      </div>
       </el-form>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted , inject} from 'vue';
+import { ref, onMounted, inject, reactive } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
-import { ElMessage, type UploadFile , type UploadProps , genFileId , type UploadRawFile} from 'element-plus';
+import { type UploadFile, type UploadProps, genFileId, type UploadRawFile, type FormInstance, type FormRules } from 'element-plus';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
 import myAxios from "@/api/myAxios";
 const fileSimple = ref() //单个文件
-const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
+const productImgMap = new Map() //商品图片数组  
-const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
+// const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
+// const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
+const productImgArr : any = ref([])
 const resetFormData = ref()
 const form = ref({
-  name: '',
+  name: '',   //商品名称
   price: '',  //商品价格
   intro: '',//产品简介
-  festivalOrder: '',//是否为限定
+  festivalName: '', //节日名称
   type: '',//类别
   label: '',//商品标签
   introDetail: '',//详情描述
@@ -111,6 +114,8 @@ const typeList: any = ref([
 ])
 const uploadProductImg: any = ref()  //图片上传的ref绑定
 const uploadProductDetail: any = ref()  //图片上传的ref绑定
+const saveBtn = ref(false) //按钮状态
+const labelList = ref([''])
 onMounted(() => {
   getTypeList() //加载类别列表，渲染在产品列表的select选项里面
 })
@@ -123,29 +128,26 @@ const getTypeList = async () => {  //获取类别列表作为可选项
     }
   }
 }
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {    //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息
-  console.log(uploadFile, uploadFiles)
+  productImgMap.delete(uploadFile.uid)
+  productImgArr.value.splice(0,productImgArr.value.length)  //一并删除数组中存放的图片Url地址
 }
 //提交表单
 const onSubmit = async () => {
   const values = Object.values(form.value);
   // 使用some()方法来检查是否有任何值为空
-  if (values.some(value => value === null || value === undefined || value === '')) {
+  console.log('表单--->',values);
-    ElMessage({
+  if (values.some((value: any)=> value === null || value === undefined || value === '' || value === 0)) {
-      type:'warning',
+    WarnInfo('请检查表单数据是否完整填写')
-      message:'请检查表单数据是否完整填写'
-    })
     return;  //空返回结束函数
   }
   const res = await myAxios.post('/goods/add', { ...form.value })
+  console.log(res.data);
   if (res.data.code === 1) {
-    ElMessage({
+    SuccessInfo('提交成功')
-      type: 'success',
-      message: "提交成功"
-    })
     reload() //上传完后重置表单
   } else {
-    ElMessage.error("服务错误")
+    WarnInfo('服务错误')
     return;
   }
 }
@@ -168,27 +170,115 @@ const handleChange = async (file: any, flag: number) => {
   })
   if (res.data.code === 1) {
     //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
-    flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
+    // flag ? form.value.detailImg = res.data.data : 0
+    if(flag === 0) {
+      productImgMap.set(fileSimple.value.uid,res.data.data)
+      productImgMap.forEach(loopMap)   //将图片url插入到数组中
+      form.value.goodImg = formatString()
+    } else {
+      form.value.detailImg = res.data.data
+    }
+    // console.log('str--->',formatString());
   }
 }
 //将 商品类别 赋值到表格里
 const loadForm = (value: any, flag: number) => {
-  flag ? form.value.type = value : form.value.festivalOrder = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
+  flag ? form.value.type = value : form.value.festivalName = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
 }
 //清除表单
 const resetForm = () => {
   resetFormData.value.resetFields()
 }
-const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片
+const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片   'onExceed'当文件个数超过限制时，做出的判断
-  uploadProductImg.value!.clearFiles()
+  uploadProductImg.value!.clearFiles()   //清空已上传的文件列表
   const file = files[0] as UploadRawFile
   file.uid = genFileId()
-  uploadProductImg.value!.handleStart(file)
+  uploadProductImg.value!.handleStart(file)   //手动选择文件
 }
 const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
-  uploadProductDetail.value!.clearFiles()
+  uploadProductDetail.value!.clearFiles()   //清空已上传的文件列表
   const file = files[0] as UploadRawFile
   file.uid = genFileId()
-  uploadProductDetail.value!.handleStart(file)
+  uploadProductDetail.value!.handleStart(file)  //手动选择文件
+}
+const validateName = (rule: any, value: any, callback: any) => {  //商品名称的校验规则
+  if (value === '') {
+    callback(new Error('请输入商品名称'))
+  } else if (value.length < 2) {
+    callback(new Error('商品名称不能小于两位'))
+    saveBtn.value = true
+  } else { saveBtn.value = false }
+}
+const validateIntro = (rule: any, value: any, callback: any) => { //商品简介的校验规则
+  if (value === '') {
+    callback(new Error('请输入商品简介'))
+  } else if (value.length < 20) {
+    callback(new Error('商品简介不能少于20字'))
+    saveBtn.value = true
+  } else { saveBtn.value = false }
+}
+const validateDetail = (rule: any, value: any, callback: any) => { 
+  if(value === '') {
+    callback(new Error('请输入商品详情'))
+  } else if(value.length < 80) {
+    callback(new Error('商品详情不能少于80字'))
+    saveBtn.value = true
+  } else { saveBtn.value = false }
+}
+const rules = reactive<FormRules<typeof form>>({  //表单校验规则
+  name: [{ validator: validateName, trigger: 'blur' }],
+  intro: [{ validator: validateIntro, trigger: 'blur' }],
+  introDetail: [{ validator: validateDetail, trigger: 'blur' }]
+})
+const addLabel = () => {   //添加商品标签按钮的方法
+  if (labelList.value[labelList.value.length - 1] === '') {
+    WarnInfo('请填写完')
+    return;
+  }
+  if (labelList.value.length < 4) {
+    labelList.value.push('')
+  }
+}
+const addLabelList = () => {   //格式化商品标签
+  var string = ''
+  if (!labelList.value.some((item: any) => item === '')) {
+    string = labelList.value.join(';')
+  } else return;
+  form.value.label = string
+}
+const loopMap = (value :any , key :any ,map :any) => {  //循环商品图片Map集合函数,用于给请求的字段赋值
+  productImgArr.value.push(value)
+}
+const formatString =()=>{
+  var str = ''
+  str = productImgArr.value.join(';')
+  // console.log(str);
+  return str
 }
 </script>
+
+<style scoped>
+.totalBox {
+  display: flex;
+
+  margin: 0 auto;
+}
+.fromBox {
+  width: 700px;
+  height: 750px;
+  margin: 0 auto;
+}
+.NamePrice {
+  display: flex;
+}
+.IntroInven {
+  display: flex;
+}
+.festivalBox {
+  display: flex;
+}
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/views/Orders/OrderList.vue

@@ -193,22 +193,20 @@ const deliverGoods = async (row : any)=>{
     getOrderList()
   }
 }
-//取消订单
+const deleteOrder = async (row : any) => {  //取消订单+微信退款
-const deleteOrder = async (row : any) => {
+  console.log('row-->',row.id)
-  // console.log(typeof index)
+  const res = await myAxios.post('/wechat/refund/create', { id: row.id })   //传入订单号取消订单并退款
-  const res = await myAxios.post('/goods/delete', { id: row.id })
   console.log(res)
   if (res.data.code === 1) {
     ElMessage({
       type: 'success',
-      message: '删除成功',
+      message: '退款成功',
     })
     getOrderList()
   }
 }
 const reset = () => {
   name.value = '';
-
 };
 const load = () => { }
 //保存订单状态

src/views/ServiceType/AddServiceProduct.vue

@@ -17,7 +17,7 @@
             </el-form-item>
           </div>
           <!--  添加图文描述-->
-          <div class="boxPicture2">
+          <div>
             <el-form-item label="添加课程展示图">
               <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
                 multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
@@ -60,7 +60,7 @@
         </div>
       </el-form>
     </div>
-    <div class="timeTable">
+    <div>
       <!-- <appointTime @time-Info="getInfo"></appointTime> -->
       <calendarUtil @calendar-info="getInfo"></calendarUtil>
     </div>

src/views/ServiceType/ProductCenter.vue

@@ -26,7 +26,7 @@
   <!-- 数据展示 -->
   <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
     :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
-    :header-cell-style="{ 'text-align': 'center' }">
+    :header-cell-style="{ 'text-align': 'center' }" default-expand-all>
     <el-table-column type="selection" width="55"></el-table-column>
     <el-table-column prop="id" label="课程编号" width="80">
       <template #default="{ $index }">
@@ -43,20 +43,31 @@
     <el-table-column prop="name" label="课程名称"></el-table-column>
     <el-table-column prop="price" label="单次价格" width="100"></el-table-column>
     <el-table-column label="展开时间段" type="expand" width="80">
-      <template #default="{ $index,row }">
+      <template #default="{ $index }">
         <!-- 放后端传来的预约时间 -->
         <el-table :data="appointmentDateArr[$index]" :header-cell-style="{ 'text-align': 'center' }"
           :cell-style="{ 'text-align': 'center' }">
           <el-table-column label="是否可预约" prop="isAvailable" />
           <el-table-column label="日期" prop="specificDate" />
           <el-table-column label="操作">
-            <el-button size="small" @click="">
+            <template v-slot="scope">
-              详情
+            <el-button size="small" @click="updateDay(scope.row)">
+              <div v-if="scope.row.isAvailable == 1">取消预约</div>
+              <div v-if="scope.row.isAvailable == 0">启用预约</div>
             </el-button>
-            <el-button size="small" @click="openDrawer">
+            <el-button size="small" type="primary" @click="">
+              添加日期
+            </el-button>
+            <el-button size="small" @click="openDrawer($index,scope.row)">
               编辑
             </el-button>
-            <el-button class="ml-5" type="danger">删除</el-button>
+            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                           title="是否确认删除" @confirm="deleteDate(scope.row.id)" width=180>
+              <template #reference>
+                <el-button class="ml-5" type="danger" v-if="tableData[$index].appointmentDateVOList.length>1">删除</el-button>
+              </template>
+            </el-popconfirm>
+            </template>
           </el-table-column>
         </el-table>
       </template>
@@ -77,7 +88,7 @@
         <el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
           编辑
         </el-button>
-        <el-button size="small" @click="handleOff(scope.$index, scope.row)">
+        <el-button size="small" @click="handleOff(scope.row)">
           <div v-if="scope.row.isShelves == 1">下架 </div>
           <div v-if="scope.row.isShelves == 0">上架 </div>
         </el-button>
@@ -87,9 +98,6 @@
             <el-button class="ml-5" type="danger">删除</el-button>
           </template>
         </el-popconfirm>
-        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
-          title="您确定删除吗？">
-        </el-popconfirm>
       </template>
     </el-table-column>
   </el-table>
@@ -124,21 +132,6 @@
       <el-form-item label="商品价格">
         <el-input v-model="editForm.price"></el-input>
       </el-form-item>
-      <el-form-item label="商品数量">
-        <el-input v-model="editForm.inventory"></el-input>
-      </el-form-item>
-      <el-form-item label="商品状态">
-        <el-select v-model="editForm.isShelves">
-          <el-option label="上架" value="上架" />
-          <el-option label="下架" value="下架" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否为限定类产品" prop="festivalOrder">
-        <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)">
-          <el-option label="是" value="1" />
-          <el-option label="否" value="0" />
-        </el-select>
-      </el-form-item>
       <el-form-item label="商品标签">
         <el-input v-model="editForm.label"></el-input>
       </el-form-item>
@@ -168,10 +161,38 @@
   <!-- 时间段抽屉 -->
   <el-drawer
     v-model="drawer"
-    title="I am the title"
+    :title="'当前日期：'+drawerDate.specificDate + '&emsp;课程名称：' + className"
     direction="ltr"
-  >
+    @closed="closedDrawer">
-    <span>Hi, there!</span>
+  <div style="margin-bottom: 20px;">选择当天时间段和人数</div>
+    <div v-for="(item,index) in drawerDate.timePeriodVOList">
+      <span>选择时间段</span>
+      <el-time-picker
+      v-model="timePickArr[index]"
+      format='HH:mm'
+      is-range="true"
+      range-separator="到"
+      start-placeholder="开始"
+      end-placeholder="结束"
+      value-format="HH:mm"
+      :style="{ width: '236px' }"
+      @change="saveTime(index)"
+      :disabled="timeAbleArr[index]"
+    />
+      <div>
+        <span>最小人数:</span>
+        <el-select v-model="InfoArr[index].minNumber" style="width: 50px" @change="minNum(index)" :disabled="numAbleArr[index]">
+          <el-option v-for="item in minArr" :label="item" :value="item" />
+        </el-select>
+        <span>最大人数:</span>
+        <el-select v-model="InfoArr[index].maxNumber" style="width: 50px" @change="maxNum(index)" :disabled="numAbleArr[index]">
+          <el-option v-for="item in maxArr" :label="item" :value="item" />
+        </el-select>
+        <el-button type="primary" @click="UpdateNum(item,index)" v-if="timeAbleArr[index]">{{ btnText[index] }}</el-button>
+        <el-button type="danger" @click="subList(index)" v-if="index > 0">删除</el-button>
+      </div>
+    </div>
+    <el-button type="success" @click="addList">{{ addbtnText }}</el-button>
   </el-drawer>
 </template>
 
@@ -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) => { 
+const handleOff = async (row: any) => { 
-  row.isShelves ? row.isShelves = 0 : row.isShelves = 1  //三元运算符  改变那一行的上架值
+  console.log(row.isShelves);
-  editForm.value = row;
+  const res = await myAxios.post('/goods/service/shelves',{id: row.id}) 
-  const res = await myAxios.post('/goods/update',{...editForm.value}) 
   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: '请求失败'
+    })
+  }
+}
 </script>
 
 <style scoped>

src/views/test.vue

@@ -1,47 +1,104 @@
 <template>
-  <div class="demo-range">
+  <el-form
-    <el-time-picker
+    ref="ruleFormRef"
-      v-model="value1"
+    style="max-width: 600px"
-      is-range
+    :model="ruleForm"
-      range-separator="To"
+    status-icon
-      start-placeholder="Start time"
+    :rules="rules"
-      end-placeholder="End time"
+    label-width="auto"
-      @change="abc"
+    class="demo-ruleForm"
+  >
+    <el-form-item label="Password" prop="pass">
+      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
+    </el-form-item>
+    <el-form-item label="Confirm" prop="checkPass">
+      <el-input
+        v-model="ruleForm.checkPass"
+        type="password"
+        autocomplete="off"
       />
-    <el-time-picker
+    </el-form-item>
-      v-model="value2"
+    <el-form-item label="Age" prop="age">
-      is-range
+      <el-input v-model.number="ruleForm.age" />
-      arrow-control
+    </el-form-item>
-      range-separator="To"
+    <el-form-item>
-      start-placeholder="Start time"
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
-      end-placeholder="End time"
+        Submit
-    />
+      </el-button>
-  </div>
+      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
 
-const value1 = ref<[Date, Date]>([
+const ruleFormRef = ref<FormInstance>()  //表单实例
-  new Date(2016, 9, 10, 8, 40),
-  new Date(2016, 9, 10, 9, 40),
-])
-const value2 = ref<[Date, Date]>([
-  new Date(2016, 9, 10, 8, 40),
-  new Date(2016, 9, 10, 9, 40),
-])
-const abc=()=>{
-  console.log(value1.value);
 
+const checkAge = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback(new Error('Please input the age'))
+  }
+  setTimeout(() => {
+    if (!Number.isInteger(value)) {
+      callback(new Error('Please input digits'))
+    } else {
+      if (value < 18) {
+        callback(new Error('Age must be greater than 18'))
+      } else {
+        callback()
+      }
+    }
+  }, 1000)
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入密码'))
+  } else {
+    if (ruleForm.checkPass !== '') {   //ruleForm就是当前这个表单
+      if (!ruleFormRef.value) return
+      ruleFormRef.value.validateField('checkPass')   //具体检验的某个字段,再检验一次
+    }
+    callback()
+  }
+}
+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<FormRules<typeof ruleForm>>({ //表单校验规则,需要检验的就放进来
+  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()
 }
 </script>
-
-<style>
-.demo-range .el-date-editor {
-  margin: 8px;
-}
-
-.demo-range .el-range-separator {
-  box-sizing: content-box;
-}
-</style>