From c32f203498dde42d1087a19deefbe208cb9efe2b Mon Sep 17 00:00:00 2001
From: sa_10_0 <2492740167@qq.com>
Date: Tue, 10 Dec 2024 19:27:49 +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               |   4 +-
 src/views/CostumeAppointments/AddCostumes.vue |  87 ++++--
 .../CostumeAppointments/AppointmentOrder.vue  |  37 ++-
 .../CostumeAppointments/ClothingGrade.vue     |  12 +-
 .../CostumeAppointments/CostumeDetails.vue    |  50 +++-
 src/views/test.vue                            | 255 ++++++++++++------
 6 files changed, 305 insertions(+), 140 deletions(-)

diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue
index b9e550c..cf0d9f8 100644
--- a/src/layout/components/Aside.vue
+++ b/src/layout/components/Aside.vue
@@ -12,7 +12,7 @@
           <div style="height: 80px; color: white; font-weight: bold;
            display: flex; align-items: center; justify-content: center">
             <img src="../../assets/logo.png" alt="" style="height: 30px">
-            <span style="margin-left: 5px" v-show="isShow">泠珑水阁管理系统</span>
+            <span style="margin-left: 5px" v-show="isShow">匠承非遗管理系统</span>
           </div>
 
           <el-sub-menu index="1">
@@ -106,7 +106,7 @@
             </template>
             <el-menu-item index="/ClothingGrade">
               <el-icon><Menu /></el-icon>
-              <span slot="title">服装等级管理</span>
+              <span slot="title">服装类别管理</span>
             </el-menu-item>
             <el-menu-item index="/CostumeDetails">
               <el-icon><Menu /></el-icon>
diff --git a/src/views/CostumeAppointments/AddCostumes.vue b/src/views/CostumeAppointments/AddCostumes.vue
index 893ee2e..97548f6 100644
--- a/src/views/CostumeAppointments/AddCostumes.vue
+++ b/src/views/CostumeAppointments/AddCostumes.vue
@@ -35,20 +35,25 @@
             </el-upload>
           </el-form-item>
           <el-form-item label="服装名称" prop="name">
-            <el-input v-model="form.name" />
+            <el-input v-model="form.name"  maxlength="30" placeholder="30字以内"/>
           </el-form-item>
-          <el-form-item label="服装价格" prop="price">
+          <el-form-item label="服装价格（元）" prop="price">
             <el-input v-model="form.price" />
           </el-form-item>
-          <el-form-item label="服装类别" prop="intro">
-            <el-input v-model="form.clothesType" />
+          <el-form-item label="服装类别" prop="clothesType">
+            <el-select v-model="clothesType.value" placeholder="请选择"  @change="(event:any) => loadForm(event)">
+              <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" />
+            <el-input v-model="form.intro" maxlength="40" placeholder="40字以内"/>
           </el-form-item>
       <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>
     </el-form>
   </div>
 </template>
@@ -58,7 +63,7 @@
 import {Plus} from "@element-plus/icons-vue";
 import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
 import myAxios from "@/api/myAxios";
-import {inject, ref} from "vue";
+import {inject, ref ,onMounted} from "vue";
 const fileSimple = ref()
 const uploadProductImg : any = ref()
 const uploadProductDetail : any = ref()
@@ -70,6 +75,53 @@ const form = ref({
   price:'',
   clothesType:''
 })
+const clothesType: any = ref([
+  {
+    values: '',
+    label: ''
+  }
+])
+onMounted(()=>{
+  getGrade()
+})
+const getGrade = async ()=>{
+  const res = await myAxios.post('/clothesGrade/list',{})
+  for(let i in res.data.data){
+    clothesType.value[i] = {
+      values: res.data.data[i].clothesType,
+      label:res.data.data[i].clothesType,
+    }
+  }
+}
+const loadForm = (value: any) => {
+  form.value.clothesType = value
+}
+const reload : any = inject("reload")
+const onSubmit = async () => {
+  const values = Object.values(form.value);
+  if (values.some(value => value === null || value === undefined || value === '')) {
+    ElMessage({
+      type:'warning',
+      message:'请检查表单数据是否完整填写'
+    })
+    return; 
+  }
+  const res = await myAxios.post('/clothesInfo/add', { ...form.value })
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: "提交成功"
+    })
+    reload() //上传完后重置表单
+  } else {
+    ElMessage.error("服务错误")
+    return;
+  }
+}
+const resetFormData = ref()
+const resetForm = () =>{
+  resetFormData.value.resetFields()
+}
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
 }
@@ -104,29 +156,6 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商
   file.uid = genFileId()
   uploadProductDetail.value!.handleStart(file)
 }
-const reload : any = inject("reload")
-const onSubmit = async () => {
-  const values = Object.values(form.value);
-  // 使用some()方法来检查是否有任何值为空
-  if (values.some(value => value === null || value === undefined || value === '')) {
-    ElMessage({
-      type:'warning',
-      message:'请检查表单数据是否完整填写'
-    })
-    return; 
-  }
-  const res = await myAxios.post('/clothesInfo/add', { ...form.value })
-  if (res.data.code === 1) {
-    ElMessage({
-      type: 'success',
-      message: "提交成功"
-    })
-    reload() //上传完后重置表单
-  } else {
-    ElMessage.error("服务错误")
-    return;
-  }
-}
 
 </script>
 
diff --git a/src/views/CostumeAppointments/AppointmentOrder.vue b/src/views/CostumeAppointments/AppointmentOrder.vue
index 1f9fc1e..a36eef1 100644
--- a/src/views/CostumeAppointments/AppointmentOrder.vue
+++ b/src/views/CostumeAppointments/AppointmentOrder.vue
@@ -43,6 +43,13 @@
       </template>
     </el-table-column>
   </el-table>
+  <el-config-provider style="padding: 10px 0" :locale="zhCn">
+    <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" />
+
+  </el-config-provider>
 <!--  弹窗-->
   <el-dialog v-model="dialogVisible" title="" width="500">
     <el-form :model="order" label-width="auto" style="max-width: 600px" :disabled="disabled">
@@ -93,17 +100,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref,onMounted } from 'vue'
+import { ref,onMounted,inject } from 'vue'
 import myAxios from "@/api/myAxios";
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
 const orders = ref([{}])
 const name = ref('')
-const searchParams: any = ref({ //封装分页
-  current: 1, //当前页码
-  pageSize: 5, //每页显示条数
-  sortField: "id",  //根据ID分类
-  sortOrder: "descend" //降序
-})
+
 onMounted(()=>{
   getList()
 })
@@ -151,7 +154,6 @@ const editShow = (index: number, row: any,flag:number) => {
 const cancel = () => {
   dialogVisible.value = false
 }
-const editForm : any = ref({})
 const addType =async () => {
   dialogVisible.value = false
   const res = await myAxios.post('/advanceOrder/update',{
@@ -175,8 +177,25 @@ const Search = (data:any)=>{
   searchParams.value.current = 1
   getList()
 }
+//重置
+const reload : any = inject("reload")
 const reset = ()=>{
-  name.value = ''
+  reload()
+}
+//分页
+const searchParams: any = ref({
+  current: 1,
+  pageSize: 5,
+  sortField: "id",
+  sortOrder: "descend"
+})
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize
+  getList()
+}
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getList()
 }
 </script>
 
diff --git a/src/views/CostumeAppointments/ClothingGrade.vue b/src/views/CostumeAppointments/ClothingGrade.vue
index 5d062f3..69ffe6a 100644
--- a/src/views/CostumeAppointments/ClothingGrade.vue
+++ b/src/views/CostumeAppointments/ClothingGrade.vue
@@ -14,8 +14,8 @@
       </template>
     </el-table-column>
     <el-table-column prop="clothesType" label="等级" ></el-table-column>
-    <el-table-column prop="minPrice" label="最低价" ></el-table-column>
-    <el-table-column prop="maxPrice" label="最高价" ></el-table-column>
+    <el-table-column prop="minPrice" label="最低价（元）" ></el-table-column>
+    <el-table-column prop="maxPrice" label="最高价（元）" ></el-table-column>
     <el-table-column prop="brief" label="简介" ></el-table-column>
     <el-table-column label="操作">
       <template #default="scope">
@@ -48,14 +48,14 @@
             <el-form-item label="名称">
               <el-input v-model="order.clothesType"/>
             </el-form-item>
-            <el-form-item label="最低价">
-              <el-input v-model="order.minPrice"/>
+            <el-form-item label="最低价(元)">
+              <el-input v-model="order.minPrice" />
             </el-form-item>
-            <el-form-item label="最高">
+            <el-form-item label="最高价(元)">
               <el-input v-model="order.maxPrice"/>
             </el-form-item>
             <el-form-item label="简介">
-              <el-input v-model="order.brief"/>
+              <el-input v-model="order.brief" maxlength="30" placeholder="30字以内"/>
             </el-form-item>
           </el-form>
     <template #footer #default="{ row, $index }">
diff --git a/src/views/CostumeAppointments/CostumeDetails.vue b/src/views/CostumeAppointments/CostumeDetails.vue
index 42dab5b..ee42a36 100644
--- a/src/views/CostumeAppointments/CostumeDetails.vue
+++ b/src/views/CostumeAppointments/CostumeDetails.vue
@@ -22,7 +22,7 @@
         <el-table-column prop="id" label="序号" width="50"></el-table-column>
         <el-table-column prop="name" label="服装名称" ></el-table-column>
         <el-table-column prop="clothesType" label="类型"></el-table-column>
-        <el-table-column prop="price" label="价格"></el-table-column>
+        <el-table-column prop="price" label="价格（元）"></el-table-column>
     <el-table-column prop="image" label="类别图片" width="200">
       <template #default="scope"><img :src="scope.row.image" alt="" style="height: 50px;"></template>
     </el-table-column>
@@ -43,12 +43,13 @@
     </el-table-column>
   </el-table>
 <!--  分页-->
-  <div style="padding: 10px 0">
+  <el-config-provider style="padding: 10px 0" :locale="zhCn">
     <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-config-provider>
 <!--  弹窗-->
   <el-dialog v-model="dialogVisible" title="" width="500">
     <el-form :model="order" label-width="auto" style="max-width: 600px" :disabled="disabled">
@@ -89,12 +90,14 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="名称">
-        <el-input v-model="order.name"/>
+        <el-input v-model="order.name" maxlength="25" placeholder="25字以内"/>
       </el-form-item>
-      <el-form-item label="类型">
-        <el-input v-model="order.clothesType"/>
+      <el-form-item label="类型" prop="clothesType">
+        <el-select v-model="order.clothesType"  @change="(event: any) => loadForm(event)">
+          <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="价格">
+      <el-form-item label="价格(元)">
         <el-input v-model="order.price"/>
       </el-form-item>
       <el-form-item label="简介">
@@ -104,7 +107,7 @@
     <template #footer #default="{ row, $index }">
       <div class="dialog-footer">
         <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="addType">
+        <el-button type="primary" @click="saveEdit">
           确定
         </el-button>
       </div>
@@ -113,12 +116,14 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import {ref, onMounted,inject} from 'vue'
 import myAxios from "@/api/myAxios";
 import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 
 onMounted(()=>{
   getList()
+  getGrade()
 })
 const  orders = ref([{}])
 const total = ref(0)
@@ -146,6 +151,24 @@ const order=ref({
   intro:'',
   clothesType:''
 })
+const clothesType: any = ref([
+  {
+    values: '',
+    label: ''
+  }
+])
+const getGrade = async ()=>{
+  const res = await myAxios.post('/clothesGrade/list',{})
+  for(let i in res.data.data){
+    clothesType.value[i] = {
+      values: res.data.data[i].clothesType,
+      label:res.data.data[i].clothesType,
+    }
+  }
+}
+const loadForm = (value: any) => {
+  order.value.clothesType = value
+}
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
 }
@@ -190,16 +213,15 @@ const handleCurrentChange = (Current: any) => {
   searchParams.value.current = Current
   getList()
 }
-
 //搜索
 const Search = (data:String)=>{
   searchParams.value.name = data
    searchParams.value.current = 1
   getList()
 }
-// const reload : any = inject("reload")
+const reload : any = inject("reload")
 const reset =()=>{
-  name.value=''
+  reload()
 }
 const handleSelectionChange  = (val:any)=>{
   console.log(val)
@@ -243,9 +265,9 @@ const delBatch = async ()=>{
 }
 const editForm : any = ref({})
 //提交
-const addType =async ()=>{
+const saveEdit =async ()=>{
   dialogVisible.value = false
- const res = await myAxios('/clothesInfo/update',{...editForm.value})
+ const res = await myAxios.post('/clothesInfo/update',{...editForm.value})
   if(res.data.code === 1) {
     ElMessage({
       type: 'success',
diff --git a/src/views/test.vue b/src/views/test.vue
index 8952d57..159186f 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,87 +1,182 @@
+<!--<template>-->
+<!--  <div class="demo-date-picker">-->
+<!--    <div class="block">-->
+<!--      <span class="demonstration">选择日期</span>-->
+<!--      <el-date-picker-->
+<!--          v-model="valueData"-->
+<!--          type="daterange"-->
+<!--          range-separator="到"-->
+<!--          start-placeholder="起始日期"-->
+<!--          end-placeholder="截至日期"-->
+<!--          :size="size"-->
+<!--      />-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--  <div style="margin-bottom: 10px">-->
+<!--    <el-button @click="addTimePickers">添加时间段</el-button>-->
+<!--  </div>-->
+<!--  <div v-for="(timeData, index) in timeDataList" :key="index">-->
+<!--    <el-time-picker v-model="timeData.value1" placeholder="设置时间段" />-->
+<!--    //////////////////-->
+<!--    <el-time-picker-->
+<!--        v-model="timeData.value2"-->
+<!--        is-range-->
+<!--        range-separator="到"-->
+<!--        start-placeholder="起始时间"-->
+<!--        end-placeholder="截至时间"-->
+<!--    />-->
+<!--    <el-button @click="deleteTimePicker(index)">删除时间段</el-button>-->
+<!--  </div>-->
+
+
+
+<!--</template>-->
+
+<!--<script lang="ts" setup>-->
+<!--import { ref } from 'vue';-->
+<!--import { ElButton, ElDatePicker, ElTimePicker } from 'element-plus';-->
+
+
+<!--const size = ref<'default' | 'large' | 'small'>('default');-->
+<!--const valueData = ref('');-->
+
+
+<!--const timeDataList = ref<{ value1: string; value2: [Date, Date] }[]>([]);-->
+
+<!--const addTimePickers = () => {-->
+<!--  timeDataList.value.push({-->
+<!--    value1: '',-->
+<!--    value2: [new Date(), new Date()]-->
+<!--  });-->
+<!--};-->
+
+<!--const deleteTimePicker = (index: number) => {-->
+<!--  timeDataList.value.splice(index, 1);-->
+<!--};-->
+
+
+<!--</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(&#45;&#45;el-border-color);-->
+<!--  flex: 1;-->
+<!--}-->
+
+<!--.demo-date-picker .block:last-child {-->
+<!--  border-right: none;-->
+<!--}-->
+
+<!--.demo-date-picker .demonstration {-->
+<!--  display: block;-->
+<!--  color: var(&#45;&#45;el-text-color-secondary);-->
+<!--  font-size: 14px;-->
+<!--  margin-bottom: 20px;-->
+<!--}-->
+<!--.example-basic .el-date-editor {-->
+<!--  margin: 8px;-->
+<!--}-->
+<!--.is-selected {-->
+<!--  color: #1989fa;-->
+<!--  position: relative;-->
+<!--}-->
+
+<!--.is-selected::after {-->
+<!--  content: '✔️';-->
+<!--  position: absolute;-->
+<!--  right: 5px;-->
+<!--  top: 5px;-->
+<!--}-->
+
+<!--.disabled {-->
+<!--  color: #ccc;-->
+<!--  cursor: not-allowed;-->
+<!--}-->
+<!--</style>-->
+
+
 <template>
-  <div class="date-picker">
-    <div class="father">
-    <div v-for="(item, index) in dayList" :key="index">
-      <div class="inner">
-        第{{ index + 1 }}天
-      </div>
-        <!-- 时间段部分 -->
-      <div class="time-picker">
-      <div v-for="(item, row) in timeList[index]" :key="row" class="box">
-        <span>第 {{ row+1 }} 个时间段</span>
-        <el-time-select 
-          v-model="timeList[index][row].startTime" 
-          style="width: 150px"
-          :max-time="timeList[index][row].endTime" 
-          placeholder="Start time" 
-          size="default" 
-          start="08:30" 
-          step="00:15"
-          end="18:30" />
-        <el-time-select 
-          v-model="timeList[index][row].endTime" 
-          style="width: 150px"
-          :min-time="timeList[index][row].startTime" 
-          placeholder="End time" 
-          size="default" 
-          start="08:30" 
-          step="00:15"
-          end="18:30" />
-        <el-button circle @click="addList(index, row)"><el-icon><Plus /></el-icon></el-button>
-      <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon><Minus /></el-icon></el-button>
-      </div>
-    </div>
-    </div>
-    </div>
- 
-  </div>
+  <el-calendar :disabled-date="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>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Plus } from '@element-plus/icons-vue';
-const dayList = ref([0,1,2,3])  //今天和未来三天
-const timeList = ref([
-  [
-    {
-      startTime: '',
-      endTime: ''
+<script setup>
+import { ref } from 'vue';
+
+const selectedDates = ref([]); // 用于存储已选择的多个日期
+
+// 检查是否可以选择某个日期（不能选择过去的日期）
+const disabledDate = (date) => {
+  const today = new Date();
+  const dateString = date.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
+  const todayString = today.toISOString().split('T')[0];
+  return dateString < todayString; // 禁止选择过去的日期
+};
+
+// 判断是否是未来的日期
+const isFutureDate = (date) => {
+  const today = new Date().toISOString().split('T')[0]; // 获取今天的日期（格式: YYYY-MM-DD）
+  return date >= today; // 判断日期是否大于等于今天
+};
+
+// 处理点击日期事件
+const handleDateClick = (date) => {
+  if (isFutureDate(date)) {
+    // 如果日期已被选中，则取消选择
+    if (selectedDates.value.includes(date)) {
+      selectedDates.value = selectedDates.value.filter(d => d !== date);
+    } else {
+      // 否则添加到选中的日期列表中
+      selectedDates.value.push(date);
     }
-  ],
-  [
-    {
-      startTime: '',
-      endTime: ''
-    }
-  ],
-  [
-    {
-      startTime: '',
-      endTime: ''
-    }
-  ],
-  [
-    {
-      startTime: '',
-      endTime: ''
-    }
-  ]
-])
-const numberRange = ref([]) 
-const addList = (index: any, row: any) => {
-if ( timeList.value[index].length < 6) {
-  timeList.value[index].push({
-    startTime:'',
-    endTime:''
-  })
-}
-}
-const subList = (index: number, row: number) => {
-  console.log(index,row);
-  timeList.value[index].splice(row, 1)
-}
+  }
+};
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.calendar-date-cell {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 
-</style>
\ No newline at end of file
+.is-selected {
+  color: black;
+  border-radius: 50%;
+}
+
+.disabled {
+  color: #dcdfe6;
+  pointer-events: none;
+}
+.custom-calendar /deep/ .el-calendar-table .el-calendar-day{
+  height: 50px;
+}
+
+</style>