From 69df42c1943f8e8490a55c3d975b01bd8e96ff1e Mon Sep 17 00:00:00 2001
From: sa_10_0 <2492740167@qq.com>
Date: Thu, 19 Dec 2024 18:57:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Aside.vue               |  16 +
 src/router/routes.ts                          |  20 +
 src/views/CostumeAppointments/AddCostumes.vue |   4 +-
 .../CostumeAppointments/CostExplanation.vue   |  37 ++
 .../CostumeAppointments/CostumeDetails.vue    |   4 +-
 .../ReservationInstructions.vue               |  36 ++
 src/views/CostumeAppointments/TimeCenter.vue  |  11 +
 .../CostumeAppointments/timeManagement.vue    | 240 ++++++++++
 src/views/Home.vue                            | 450 +++++++++---------
 src/views/test.vue                            |  47 --
 10 files changed, 583 insertions(+), 282 deletions(-)
 create mode 100644 src/views/CostumeAppointments/CostExplanation.vue
 create mode 100644 src/views/CostumeAppointments/ReservationInstructions.vue
 create mode 100644 src/views/CostumeAppointments/TimeCenter.vue
 create mode 100644 src/views/CostumeAppointments/timeManagement.vue

diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue
index da2ab76..a22fa2b 100644
--- a/src/layout/components/Aside.vue
+++ b/src/layout/components/Aside.vue
@@ -120,6 +120,22 @@
               <el-icon><Menu /></el-icon>
               <span slot="title">预约订单</span>
             </el-menu-item>
+            <el-menu-item index="/ReservationInstructions">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">预约须知</span>
+            </el-menu-item>
+            <el-menu-item index="/CostExplanation">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">费用说明</span>
+            </el-menu-item>
+            <el-menu-item index="/timeManagement">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">时间管理</span>
+            </el-menu-item>
+            <el-menu-item index="/TimeCenter">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">预约时间中心</span>
+            </el-menu-item>
           </el-sub-menu>
 
           
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 713135f..faa15f7 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -89,6 +89,26 @@ export const routes = [
                 path: '/AddCostumes',
                 name: '添加服装',
                 component: ()=> import("../views/CostumeAppointments/AddCostumes.vue")
+            },
+            {
+                path: '/ReservationInstructions',
+                name: '预约须知',
+                component: ()=> import("../views/CostumeAppointments/ReservationInstructions.vue")
+            },
+            {
+                path: '/CostExplanation',
+                name: '费用说明',
+                component: ()=> import("../views/CostumeAppointments/CostExplanation.vue")
+            },
+            {
+                path: '/timeManagement',
+                name: '时间管理',
+                component: ()=> import("../views/CostumeAppointments/timeManagement.vue")
+            },
+            {
+                path: '/TimeCenter',
+                name: '预约时间中心',
+                component: ()=> import("../views/CostumeAppointments/TimeCenter.vue")
             }
         ]
     },
diff --git a/src/views/CostumeAppointments/AddCostumes.vue b/src/views/CostumeAppointments/AddCostumes.vue
index 97548f6..171ff2a 100644
--- a/src/views/CostumeAppointments/AddCostumes.vue
+++ b/src/views/CostumeAppointments/AddCostumes.vue
@@ -45,8 +45,8 @@
               <el-option v-for="item in clothesType" :key="item.value" :label="item.label" :value="item.values" />
             </el-select>
           </el-form-item>
-          <el-form-item label="服装简介" prop="intro">
-            <el-input v-model="form.intro" maxlength="40" placeholder="40字以内"/>
+          <el-form-item label="服装详情" prop="intro">
+            <el-input v-model="form.intro" maxlength="300" placeholder="300字以内"/>
           </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">提交</el-button>
diff --git a/src/views/CostumeAppointments/CostExplanation.vue b/src/views/CostumeAppointments/CostExplanation.vue
new file mode 100644
index 0000000..08e27fd
--- /dev/null
+++ b/src/views/CostumeAppointments/CostExplanation.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <span style="float: left;">费用说明：</span>
+    <el-input
+        v-model="textarea"
+        style="width: 500px; float: left;"
+        :rows="2"
+        type="textarea"
+        autosize
+        placeholder="费用说明"
+    />
+  </div>
+  <button @click="dy" style="display: inline-block">打印</button>
+    <el-button type="primary" @click="onSubmit" style="margin-left: 10px">提交</el-button>
+    <el-button type="primary" @click="resetForm" style="margin-left: 10px">重置</el-button>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const textarea = ref('')
+const dy =()=>{
+  console.log(textarea.value)
+}
+//提交
+const onSubmit=()=>{
+
+}
+//重置
+const resetForm=()=>{
+
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/CostumeAppointments/CostumeDetails.vue b/src/views/CostumeAppointments/CostumeDetails.vue
index ee42a36..1dccdd4 100644
--- a/src/views/CostumeAppointments/CostumeDetails.vue
+++ b/src/views/CostumeAppointments/CostumeDetails.vue
@@ -29,7 +29,7 @@
     <el-table-column prop="image" label="效果图片" width="200">
       <template #default="scope"><img :src="scope.row.effectImg" alt="" style="height: 50px;"></template>
     </el-table-column>
-    <el-table-column label="操作">
+    <el-table-column label="操作" width="250px">
       <template #default="scope">
         <el-button type="success" @click="editShow(scope.$index, scope.row,0)">详情</el-button>
         <el-button type="success" @click="editShow(scope.$index, scope.row,1)">修改</el-button>
@@ -100,7 +100,7 @@
       <el-form-item label="价格(元)">
         <el-input v-model="order.price"/>
       </el-form-item>
-      <el-form-item label="简介">
+      <el-form-item label="详情">
         <el-input v-model="order.intro"/>
       </el-form-item>
     </el-form>
diff --git a/src/views/CostumeAppointments/ReservationInstructions.vue b/src/views/CostumeAppointments/ReservationInstructions.vue
new file mode 100644
index 0000000..998ca12
--- /dev/null
+++ b/src/views/CostumeAppointments/ReservationInstructions.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <span style="float: left;">预约须知：</span>
+    <el-input
+        v-model="textarea"
+        style="width: 500px; float: left;"
+        :rows="2"
+        type="textarea"
+        autosize
+        placeholder="预约须知"
+    />
+  </div>
+  <button @click="dy" style="display: inline-block">打印</button>
+  <el-button type="primary" @click="onSubmit" style="margin-left: 10px">提交</el-button>
+  <el-button type="primary" @click="resetForm" style="margin-left: 10px">重置</el-button>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const textarea = ref('')
+const dy =()=>{
+  console.log(textarea.value)
+}
+//提交
+const onSubmit=()=>{
+
+}
+//重置
+const resetForm=()=>{
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/CostumeAppointments/TimeCenter.vue b/src/views/CostumeAppointments/TimeCenter.vue
new file mode 100644
index 0000000..11c1498
--- /dev/null
+++ b/src/views/CostumeAppointments/TimeCenter.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  TimeCenter
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/CostumeAppointments/timeManagement.vue b/src/views/CostumeAppointments/timeManagement.vue
new file mode 100644
index 0000000..8b524ba
--- /dev/null
+++ b/src/views/CostumeAppointments/timeManagement.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <!--    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
+    <!--      <el-form-item label="服装类别" prop="type">-->
+    <!--        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
+    <!--          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.type" />-->
+    <!--        </el-select>-->
+    <!--      </el-form-item>-->
+    <!--      <el-form-item label="服装名称" prop="name">-->
+    <!--        <el-select v-model="nameList.value" placeholder="请选择" @change="(event: any) => loadName(event)">-->
+    <!--          <el-option v-for="item in nameList" :key="item.value" :label="item.label" :value="item.name" />-->
+    <!--        </el-select>-->
+    <!--      </el-form-item>-->
+    <!--    </el-form>-->
+
+    <el-calendar :disabled-date="disabledDate" class="disabledDate">
+      <template #date-cell="{ data }">
+        <p
+            :class="[
+            selectedDates.includes(data.day)? 'is-selected' : '',
+            isFutureDate(data.day)? '' : 'disabled'
+          ]"
+            @click="handleDateClick(data.day)"
+            class="calendar-date-cell"
+        >
+          {{ data.day.split('-').slice(1).join('-') }}
+          <span v-if="selectedDates.includes(data.day)">✔️</span>
+        </p>
+      </template>
+    </el-calendar>
+    <!--抽屉-->
+    <el-drawer
+        v-for="(drawerInfo, date) in dateDrawerData"
+        :key="date"
+        v-model="drawerInfo.visible"
+        title="{{ date.split('-').slice(1).join('-') }}的时间段设置"
+        :with-header="false"
+    >
+      <div style="margin-bottom: 10px">
+        <el-button @click="addTimePickers(date)">添加时间段</el-button>
+        <el-button @click="printSelectedTimePeriods(date)">保存</el-button>
+      </div>
+      <div v-for="(timeData, index) in drawerInfo.timeDataList" :key="index">
+        <el-time-picker v-model="timeData.value1" placeholder="设置时间段" format="HH:mm" />
+        <el-button @click="deleteTimePicker(index, date)">删除时间段</el-button>
+      </div>
+    </el-drawer>
+  </div>
+  <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>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
+import myAxios from "@/api/myAxios"
+
+const dateDrawerData = ref<{
+  visible: boolean
+  timeDataList: { value1: string; value2: [Date, Date] }[]
+}>({})
+
+const addTimePickers = (date: string) => {
+  if (!dateDrawerData.value[date]) {
+    dateDrawerData.value[date] = {
+      visible: false,
+      timeDataList: []
+    }
+  }
+  dateDrawerData.value[date].timeDataList.push({
+    value1: '',
+    value2: [new Date(), new Date()]
+  })
+}
+
+const deleteTimePicker = (index: number, date: string) => {
+  if (dateDrawerData.value[date]) {
+    dateDrawerData.value[date].timeDataList.splice(index, 1)
+  }
+}
+
+const printSelectedTimePeriods = (date: string) => {
+  if (dateDrawerData.value[date]) {
+    const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
+      return {
+        time1: timeData.value1
+      }
+    })
+    console.log(selectedTimePeriods);
+  }
+}
+
+const selectedDates = ref<string[]>([])
+const disabledDate = (date: any) => {
+  const today = new Date()
+  const dateString = date.toISOString().split('T')[0]
+  const todayString = today.toISOString().split('T')[0]
+  return dateString < todayString
+}
+
+const isFutureDate = (date: any) => {
+  const today = new Date().toISOString().split('T')[0]
+  return date >= today
+}
+
+const handleDateClick = (date: any) => {
+  const dateStr = date
+  if (isFutureDate(dateStr)) {
+    if (selectedDates.value.includes(dateStr)) {
+      selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
+    } else {
+      selectedDates.value.push(dateStr)
+      if (!dateDrawerData.value[dateStr]) {
+        dateDrawerData.value[dateStr] = {
+          visible: true,
+          timeDataList: []
+        }
+      } else {
+        dateDrawerData.value[dateStr].visible = true;
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  getType();
+})
+
+const form = ref({
+  type: '',
+  name: ''
+})
+
+
+const typeList = ref<{ type: string; label: string }[]>([])
+
+const getType = async () => {
+  const res = await myAxios.post('/clothesGrade/list', {})
+  typeList.value = res.data.data.map((item: any) => ({
+    type: item.clothesType,
+    label: item.clothesType
+  }))
+}
+
+const nameList = ref<{ name: string; label: string }[]>([])
+
+const loadType = (value: any) => {
+  form.value.type = value
+  getName()
+
+}
+const loadName = (value: any) => {
+
+  form.value.name = value;
+}
+
+const getName = async () => {
+  const selectedType = form.value.type;
+  const res = await myAxios.post('/clothesInfo/list/page', {
+    clothesType: selectedType
+  })
+  console.log(selectedType, '1111111111111');
+  nameList.value = res.data.data.records.map((item: any) => ({
+    name: item.name,
+    label: item.name
+  }))
+}
+
+//提交
+const onSubmit = () => {
+
+}
+
+//重置
+const resetForm = () => {
+
+}
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.example-basic .el-date-editor {
+  margin: 8px;
+}
+
+.calendar-date-cell {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.is-selected {
+  color: black;
+  border-radius: 50%;
+}
+.disabledDate{
+  width: 550px;
+  height: 280px;
+  font-size: 12px;
+  --el-calendar-cell-width: 30px;
+}
+.disabled {
+  color: #dcdfe6;
+  pointer-events: none;
+}
+.custom-calendar /deep/ .el-calendar-table .el-calendar-day{
+  height: 50px;
+}
+</style>
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index afef39c..f2a8e53 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,252 +1,240 @@
 <template>
- <!-- 搜索 -->
   <div>
-    <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
-              v-model="Couponsname"></el-input>
-    <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
-    <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
+<!--    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
+<!--      <el-form-item label="服装类别" prop="type">-->
+<!--        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
+<!--          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.type" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="服装名称" prop="name">-->
+<!--        <el-select v-model="nameList.value" placeholder="请选择" @change="(event: any) => loadName(event)">-->
+<!--          <el-option v-for="item in nameList" :key="item.value" :label="item.label" :value="item.name" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--    </el-form>-->
+
+    <el-calendar :disabled-date="disabledDate" class="disabledDate">
+      <template #date-cell="{ data }">
+        <p
+            :class="[
+            selectedDates.includes(data.day)? 'is-selected' : '',
+            isFutureDate(data.day)? '' : 'disabled'
+          ]"
+            @click="handleDateClick(data.day)"
+            class="calendar-date-cell"
+        >
+          {{ data.day.split('-').slice(1).join('-') }}
+          <span v-if="selectedDates.includes(data.day)">✔️</span>
+        </p>
+      </template>
+    </el-calendar>
+    <!--抽屉-->
+    <el-drawer
+        v-for="(drawerInfo, date) in dateDrawerData"
+        :key="date"
+        v-model="drawerInfo.visible"
+        title="{{ date.split('-').slice(1).join('-') }}的时间段设置"
+        :with-header="false"
+    >
+      <div style="margin-bottom: 10px">
+        <el-button @click="addTimePickers(date)">添加时间段</el-button>
+        <el-button @click="printSelectedTimePeriods(date)">保存</el-button>
+      </div>
+      <div v-for="(timeData, index) in drawerInfo.timeDataList" :key="index">
+        <el-time-picker v-model="timeData.value1" placeholder="设置时间段" format="HH:mm" />
+        <el-button @click="deleteTimePicker(index, date)">删除时间段</el-button>
+      </div>
+    </el-drawer>
   </div>
-<!--  批量删除-->
-  <!-- <div style="margin: 15px 0">
-    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-                   title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
-      <template #reference>
-        <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
-          <Remove />
-        </el-icon></el-button>
-      </template>
-    </el-popconfirm>
-  </div> -->
-<!--  数据展示-->
-  <!-- <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' }">
-    <el-table-column type="selection" width="55"></el-table-column>
-    <el-table-column prop="id" label="编号" width="80"></el-table-column>
-    <el-table-column prop="goodImg" label="优惠券图片">
-      <template #default="scope">
-        <div>
-          <img :src="scope.row.image" alt="" style="height: 50px;">
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="name" label="优惠券名称"></el-table-column>
-    <el-table-column prop="conditionAmount" label="满减金额" width="180"></el-table-column>
-    <el-table-column prop="totalNum" label="发放数量"></el-table-column>
-    <el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
-    <el-table-column prop="residueNum" label="剩余数量"></el-table-column>
-    <el-table-column prop="limitNum" label="限量领取"></el-table-column>
-    <el-table-column prop="useScope" label="使用范围"></el-table-column>
-    <el-table-column prop="startTime" label="生效时间"></el-table-column>
-    <el-table-column prop="endTime" label="截止时间"></el-table-column>
-    <el-table-column label="操作" width="250px">
-      <template #default="scope">
-        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
-          详情
-        </el-button>
-        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
-          编辑
-        </el-button>
-        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-                       title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
-          <template #reference>
-            <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> -->
-<!--  分页-->
-  <!-- <div style="padding: 10px 0">
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                   :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
-                   :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
-                   :total="total" />
-  </div> -->
-<!--  详情，编辑-->
-  <!-- <el-dialog v-model="DialogVisible" :title="title">
-    <el-form label-width="100px" :disabled="disabled">
-      <el-form-item label="优惠券编号">
-        <el-input v-model="editForm.id" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="优惠券图片">
-        <div v-if="editForm.image">
-          <img :src="editForm.image" alt="优惠券图片" class="thumbnail" style="width: 100px; height: 100px;" />
-        </div>
-        <el-upload
-            action="#"
-            list-type="picture-card"
-            :auto-upload="false"
-            multiple="true"
-            :on-remove="handleRemove"
-            @change="(event: any) => handleChange(event, 0)"
-            limit="1" >
-          <el-icon>
-            <Plus/>
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <el-form-item label="优惠券名称">
-        <el-input v-model="editForm.name"></el-input>
-      </el-form-item>
-      <el-form-item label="满减金额">
-        <el-input v-model="editForm.conditionAmount"></el-input>
-      </el-form-item>
-      <el-form-item label="兑换积分">
-        <el-input v-model="editForm.requirePoints"></el-input>
-      </el-form-item>
-      <el-form-item label="发放数量">
-        <el-input v-model="editForm.totalNum"></el-input>
-      </el-form-item>
-      <el-form-item label="限量领取">
-        <el-input v-model="editForm.limitNum"></el-input>
-      </el-form-item>
-      <el-form-item label="使用范围">
-        <el-input type="textarea" v-model="editForm.useScope"></el-input>
-      </el-form-item>
-      <el-form-item label="发放时间">
-        <el-input type="textarea" v-model="editForm.startTime"></el-input>
-      </el-form-item>
-      <el-form-item label="截止时间">
-        <el-input type="textarea" v-model="editForm.endTime"></el-input>
-      </el-form-item>
-      <el-form-item label="使用说明">
-        <el-input type="textarea" v-model="editForm.description"></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer >
-      <span class="dialog-footer">
-        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
-        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
-      </span>
-    </template>
-  </el-dialog>  -->
+  <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>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref} from "vue";
-import myAxios from "@/api/myAxios";
-import {ElMessage, type UploadProps} from "element-plus";
+import { ref, onMounted } from 'vue'
+import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
+import myAxios from "@/api/myAxios"
+
+const dateDrawerData = ref<{
+  visible: boolean
+  timeDataList: { value1: string; value2: [Date, Date] }[]
+}>({})
+
+const addTimePickers = (date: string) => {
+  if (!dateDrawerData.value[date]) {
+    dateDrawerData.value[date] = {
+      visible: false,
+      timeDataList: []
+    }
+  }
+  dateDrawerData.value[date].timeDataList.push({
+    value1: '',
+    value2: [new Date(), new Date()]
+  })
+}
+
+const deleteTimePicker = (index: number, date: string) => {
+  if (dateDrawerData.value[date]) {
+    dateDrawerData.value[date].timeDataList.splice(index, 1)
+  }
+}
+
+const printSelectedTimePeriods = (date: string) => {
+  if (dateDrawerData.value[date]) {
+    const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
+      return {
+        time1: timeData.value1
+      }
+    })
+    console.log(selectedTimePeriods);
+  }
+}
+
+const selectedDates = ref<string[]>([])
+const disabledDate = (date: any) => {
+  const today = new Date()
+  const dateString = date.toISOString().split('T')[0]
+  const todayString = today.toISOString().split('T')[0]
+  return dateString < todayString
+}
+
+const isFutureDate = (date: any) => {
+  const today = new Date().toISOString().split('T')[0]
+  return date >= today
+}
+
+const handleDateClick = (date: any) => {
+  const dateStr = date
+  if (isFutureDate(dateStr)) {
+    if (selectedDates.value.includes(dateStr)) {
+      selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
+    } else {
+      selectedDates.value.push(dateStr)
+      if (!dateDrawerData.value[dateStr]) {
+        dateDrawerData.value[dateStr] = {
+          visible: true,
+          timeDataList: []
+        }
+      } else {
+        dateDrawerData.value[dateStr].visible = true;
+      }
+    }
+  }
+}
 
 onMounted(() => {
-  getCouponsList()
+  getType();
 })
 
-// const handleSelectionChange = (row: any) => {
-//   id.value = JSON.parse(JSON.stringify(row));
-// }
-const DialogVisible = ref(false)
-const total = ref(0)
-const tableData : any= ref([])
-const Couponsname = ref('')
-const title = ref('')
-const editForm : any = ref({})
-const fileSimple = ref()
-const disabled = ref(true)
-const searchParams: any = ref({ //分页
-  current: 1,
-  pageSize: 5
+const form = ref({
+  type: '',
+  name: ''
 })
-//删除图片
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles)
+
+
+const typeList = ref<{ type: string; label: string }[]>([])
+
+const getType = async () => {
+  const res = await myAxios.post('/clothesGrade/list', {})
+  typeList.value = res.data.data.map((item: any) => ({
+    type: item.clothesType,
+    label: item.clothesType
+  }))
 }
-//处理行数大小变化
-const handleSizeChange = (newSize: any) => {
-  searchParams.value.pageSize = newSize //新的页面数
-  getCouponsList()
-}
-//处理当前表格变化
-const handleCurrentChange = (Current: any) => {
-  searchParams.value.current = Current
-  getCouponsList()
-}
-const delBatch =()=>{
-  //批量删除
-}
-//重置搜索
-const reset = () => {
-  Couponsname.value = '';
-}
-//搜索
-const load =()=>{
+
+const nameList = ref<{ name: string; label: string }[]>([])
+
+const loadType = (value: any) => {
+    form.value.type = value
+   getName()
 
 }
-const saveEdit = async () => { //编辑商品
-  const res = await myAxios.post('/coupon/update',{...editForm.value})
-  if( res.data.code === 1 ) {
-    ElMessage({
-      type: 'success',
-      message: '更新成功'
-    })
-    DialogVisible.value = false
-  } else {
-    ElMessage.error('更新失败，请检查字段')
-  }
+const loadName = (value: any) => {
+
+    form.value.name = value;
 }
-const ReviseOrView = (index: number, row: any , flag : number) => {
-  //flag值不同显示不同内容  disabled开启和关闭
-  flag ?  (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
-  DialogVisible.value = true;
-  editForm.value = row;
-};
-const getCouponsList = async ()=> {
-  try {
-    const res = await myAxios.post('/coupon/list/page', {...searchParams.value})
-    console.log(res)
-    if (res.data.code === 1) {
-      tableData.value = res.data.data.records;
-      total.value = parseInt(res.data.data.total)
-    }else {
-      ElMessage({
-        type: 'error',
-        message: '获取数据失败'
-      })
-    }
-  }catch (error){
-    ElMessage({
-      type: 'error',
-      message: '发生错误'
-    })
-  }
-}
-const handleChange = async (file: any, flag: number) => {
-  fileSimple.value = file
-  let formData = new FormData()  //这一步很重要 创建一个FormData对象
-  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
-  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
-    method: 'post',
-    headers: {
-      'content-Type': 'multipart/form-data'
-    },
-    data: {
-      biz: "test",
-      file: formData.get("file") // 取出formData对象中的file
-    }
+
+const getName = async () => {
+  const selectedType = form.value.type;
+  const res = await myAxios.post('/clothesInfo/list/page', {
+    clothesType: selectedType
   })
-  if (res.data.code === 1) {
- editForm.value.image = res.data.data
-  }
-}
-const deleteCoupons = async (index: number) => {
-  console.log(typeof index)
-  const res = await myAxios.post('/coupon/delete', { id: index })
-  console.log(res)
-  if (res.data.code === 1) {
-    ElMessage({
-      type: 'success',
-      message: '删除成功',
-    })
-    getCouponsList()
-  }
+  console.log(selectedType, '1111111111111');
+  nameList.value = res.data.data.records.map((item: any) => ({
+    name: item.name,
+    label: item.name
+  }))
 }
 
+//提交
+const onSubmit = () => {
+
+}
+
+//重置
+const resetForm = () => {
+
+}
 </script>
 
-<style>
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.example-basic .el-date-editor {
+  margin: 8px;
+}
+
+.calendar-date-cell {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.is-selected {
+  color: black;
+  border-radius: 50%;
+}
+.disabledDate{
+  width: 550px;
+  height: 280px;
+  font-size: 12px;
+  --el-calendar-cell-width: 30px;
+}
+.disabled {
+  color: #dcdfe6;
+  pointer-events: none;
+}
+.custom-calendar /deep/ .el-calendar-table .el-calendar-day{
+  height: 50px;
+}
+</style>
+
 
-</style>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
index 64f6225..e69de29 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,47 +0,0 @@
-<template>
-  <div class="demo-range">
-    <el-time-picker
-      v-model="value1"
-      is-range
-      range-separator="To"
-      start-placeholder="Start time"
-      end-placeholder="End time"
-      @change="abc"
-    />
-    <el-time-picker
-      v-model="value2"
-      is-range
-      arrow-control
-      range-separator="To"
-      start-placeholder="Start time"
-      end-placeholder="End time"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const value1 = ref<[Date, Date]>([
-  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);
-  
-}
-</script>
-
-<style>
-.demo-range .el-date-editor {
-  margin: 8px;
-}
-
-.demo-range .el-range-separator {
-  box-sizing: content-box;
-}
-</style>
\ No newline at end of file