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 1/2] =?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

From ca77a8dcce84d6b91878592f594b7f68ad3f2b91 Mon Sep 17 00:00:00 2001
From: sa_10_0 <2492740167@qq.com>
Date: Fri, 20 Dec 2024 15:58:31 +0800
Subject: [PATCH 2/2] =?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/views/Commodity/MerchandiseCenter.vue |  57 +++++-----
 src/views/Orders/OrderList.vue            | 126 ++++++++++++++--------
 2 files changed, 113 insertions(+), 70 deletions(-)

diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index 38c5a30..bc665cc 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -94,7 +94,7 @@
   <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-input v-model="editForm.id" disabled style="width: 60px;"></el-input>
       </el-form-item>
       <el-form-item label="商品图片">
         <el-upload 
@@ -114,35 +114,40 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="商品名称">
-        <el-input v-model="editForm.name"></el-input>
+        <el-input v-model="editForm.name" style="width: 200px;"></el-input>
       </el-form-item>
       <el-form-item label="产品价格" prop="price">
         <el-input-number v-model="editForm.price" min="0.01" :precision="2" :step="0.5" />
-        <p>元</p>
-      </el-form-item>
-      <el-form-item label="产品类别" prop="type">
-        <el-select v-model="editForm.type" @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>
-      <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>
+        <p style="margin-left: 5px">元</p>
       </el-form-item>
+      <div style="display: flex;">
+        <el-form-item label="产品类别" prop="type">
+          <el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)" style="width: 120px;">
+            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1"  />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品数量">
+          <el-input v-model="editForm.inventory" style="width: 50px;"></el-input>
+        </el-form-item>
+        <el-form-item label="商品状态">
+          <el-select v-model="editForm.isShelves" style="width: 50px;">
+            <el-option label="上架" value="上架" />
+            <el-option label="下架" value="下架" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+      <div style="display: flex;">
+        <el-form-item label="是否为限定类产品" prop="festivalOrder">
+          <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)" style="width: 70px;">
+            <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" style="width: auto;"></el-input>
+        </el-form-item>
+      </div>
       <el-form-item label="商品图文">
         <div v-if="editForm.detailImg">
           <img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
diff --git a/src/views/Orders/OrderList.vue b/src/views/Orders/OrderList.vue
index 060bf46..ccba4e9 100644
--- a/src/views/Orders/OrderList.vue
+++ b/src/views/Orders/OrderList.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入订单编号"
-      v-model="name"></el-input>
+              v-model="name"></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>
   </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' }">
+            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+            :header-cell-style="{ 'text-align': 'center' }">
     <el-table-column type="selection" width="55" fixed="left"></el-table-column>
     <el-table-column prop="id" label="订单序号" width="80">
       <template #default="{ $index }">
@@ -57,10 +57,10 @@
         <el-button size="small" @click="showDetail(scope.$index, scope.row)">
           详情
         </el-button>
-        <el-button size="small" @click="deliverGoods(scope.row)">
+     <el-button size="small" @click="openShipmentDialog(scope.row.id)"  > <!--   @click="deliverGoods(scope.row)"-->
           发货
         </el-button>
-        <el-button size="small" @click="deleteOrder(scope.row)" type="warning" plain>
+        <el-button      :disabled="!['待支付', '待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="warning" plain>
           取消订单
         </el-button>
       </template>
@@ -68,51 +68,75 @@
   </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" />
+                   :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 title="订单详情信息" v-model="DialogVisible" width="60%">
-      <el-form label-width="100px" size="default" :model="editForm">
-        <el-form-item label="订单编号">
+    <el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
+      <div style="display: flex">
+        <el-form-item label="订单编号" style="width: 200px">
           <el-input v-model="editForm.addressSnapshot" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="用户名称">
+        <el-form-item label="用户名称" style="width: 300px">
           <el-input v-model="editForm.addressSnapshot.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="收货手机">
+      </div>
+      <div style="display: flex">
+        <el-form-item label="收货手机" style="width: 200px">
           <el-input v-model="editForm.addressSnapshot.phone" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="收货地址">
+        <el-form-item label="收货地址" style="width: 400px">
           <el-input v-model="editForm.addressSnapshot.region" autocomplete="off"></el-input>
         </el-form-item>
-        <!-- 这里的商品明细就不放图片了 -->
+      </div>
+      <!-- 这里的商品明细就不放图片了 -->
+      <div style="display: flex">
         <el-form-item label="商品明细">
           <el-input v-model="editForm.addressSnapshot.detailAddress" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="订单总金额">
+        <el-form-item label="订单总金额" style="width: 250px">
           <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="订单状态">
+        <el-form-item label="订单状态" style="width: 250px">
           <el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="快递单号">
-          <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
-        </el-form-item>
-        <el-form-item label="创建时间">
+      </div>
+      <el-form-item label="快递单号" style="width: 300px">
+        <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
+      </el-form-item>
+      <div style="display: flex">
+        <el-form-item label="创建时间"  style="width: 300px;">
           <el-input v-model="editForm.createTime" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="更新时间">
+        <el-form-item label="更新时间" style="width: 300px;">
           <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>
         </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
-          <el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
-        </div>
-      </template>
-     </el-dialog>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
+        <el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+<!--  发货弹窗-->
+  <el-dialog title="发货" v-model="shipments" width="60%">
+    <el-form label-width="100px" size="default"  >
+      <el-form-item label="快递单号" style="width: 300px;">
+        <el-input v-model="shipment.trackingNumber" autocomplete="off"></el-input>
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="height: 30px;" @click=" shipments = false">取消</el-button>
+        <el-button style="height: 30px" type="primary" @click="deliverGoods ">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -121,9 +145,14 @@ import myAxios from "@/api/myAxios";
 import { ElMessage } from "element-plus";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
-const title = ref('') 
-const editForm: any = ref({});  //编辑表单
+const title = ref('')
+const disabled = ref(true)
+const editForm: any = ref({});//编辑表单
+const shipment:any = ref({
+  trackingNumber:''
+})//物流单号
 const DialogVisible = ref(false); //详情展示
+const shipments = ref(false)
 const name = ref('')
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
@@ -148,7 +177,7 @@ const handleCurrentChange = (Current: any) => {
   getOrderList()
 }
 const handleSelectionChange = (row: any) => {
-  // id.value = JSON.parse(JSON.stringify(row)); 
+  // id.value = JSON.parse(JSON.stringify(row));
 }
 //获取订单列表
 const getOrderList = async () => {
@@ -178,20 +207,29 @@ const showDetail = (index: number, row: any) => {
   console.log('editForm--->',editForm.value);
 };
 //发货方法
-const deliverGoods = async (row : any)=>{
-  // console.log('status--->',row.id);
-  const res = await myAxios.post('/order/update',{
-    id: row.id,
-    orderStatus: "已发货"
-  })
-  //发货要改的，要有弹窗填写快递单号
-  if(res.data.code === 1) {
-    ElMessage({
-      type: 'success',
-      message: '发货成功'
+const currentId = ref<number | null>(null);
+const openShipmentDialog = (id: number) => {
+  shipments.value = true;
+  currentId.value = id;
+}
+
+const deliverGoods = async () => {
+  if (currentId.value) {
+    const res = await myAxios.post('/order/update', {
+      id: currentId.value,
+      trackingNumber: shipment.trackingNumber
     })
-    getOrderList()
+    if (res.data.code === 1) {
+      ElMessage({
+        type: 'success',
+        message: '发货成功'
+      })
+      getOrderList();
+    }
+  } else {
+    ElMessage.error('更新失败，请检查字段')
   }
+  shipments.value = false;
 }
 const deleteOrder = async (row : any) => {  //取消订单+微信退款
   console.log('row-->',row.id)