2.19

2025-02-19 12:05:06 +08:00 · 2025-02-19 12:05:06 +08:00 · d97a51dcc7
commit d97a51dcc7
parent 79e674a12a
4 changed files with 312 additions and 13 deletions
--- a/src/api/myAxios.ts
+++ b/src/api/myAxios.ts
@ -4,8 +4,8 @@ import router from '../router'

 const myAxios = axios.create({
    withCredentials:true,
-    // baseURL: 'http://localhost:9092/api'
-    baseURL: 'http://123.249.108.160:8888/api' //测试服务器
+    baseURL: 'http://localhost:9092/api'
+    // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
--- a/src/layout/components/calendarUtil.vue
+++ b/src/layout/components/calendarUtil.vue
@ -1,8 +1,15 @@
 <template>
-  <el-calendar class="calbox">
+  <el-calendar :disabled-date="disabledDate" class="calbox">
    <template #date-cell="{ data }">
      <div @click="dateForm(data)">
-        <p :class="data.isSelected ? 'is-selected' : ''">
+        <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('-') }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
@ -53,6 +60,15 @@
 import { ref , onMounted , defineEmits} from 'vue'
 import { ElMessage } from 'element-plus';
 const Selectdate = ref('')
+//日期1.20
+const selectedDates = ref<string[]>([])  //选中的日期
+  const dateDrawerData : any = ref<{
+  visible: boolean
+  timeDataList: { value1: string; value2: [Date, Date] }[]  //数组类型
+}>({
+  visible: false,        // 设定一个初始值
+  timeDataList: []      // 设定一个初始值
+})
 const drawer = ref(false) 
 const periodObj : any = ref(
  {
@ -205,6 +221,34 @@ const maxNum =(index : number)=>{
    return;
  }
 }
+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;
+      }
+    }
+  }
+}
 </script>

 <style scoped>
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@ -55,7 +55,7 @@
              <div v-if="scope.row.isAvailable == 1">取消预约</div>
              <div v-if="scope.row.isAvailable == 0">启用预约</div>
            </el-button>
-            <el-button size="small" type="primary" @click="">
+            <el-button size="small" type="primary" @click="addDate(scope.row)">
              添加日期
            </el-button>
            <el-button size="small" @click="openDrawer($index,scope.row)">
@ -194,12 +194,29 @@
    </div>
    <el-button type="success" @click="addList">{{ addbtnText }}</el-button>
  </el-drawer>
+  <!-- 添加日期弹窗 -->
+  <el-dialog
+    v-model="addDateVisible"
+    title="添加日期" 
+    width="800"
+    >
+    <calendarUtil></calendarUtil>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="addDateVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitDate()">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>

 <script setup lang="ts">
 import { ElMessage , type UploadProps , genFileId ,type UploadRawFile  } from 'element-plus';
 import { ref, onMounted, inject } from 'vue';
 import myAxios from "@/api/myAxios";
+import calendarUtil from '@/layout/components/calendarUtil.vue';
 const total = ref(0); //总页数
 const idList = ref([]);  //用于批量删除
 const searchParams: any = ref({ //封装分页
@ -237,6 +254,7 @@ const numAbleArr = ref(  //禁用人数组件
 )
 const className = ref('') //课程名称
 const nowBookPeo = ref(0) //当前预约人数
+const addDateVisible = ref(false)  //添加日期弹窗
 onMounted(() => { //页面加载时获取商品列表和分类页表
  getProductList()
  for(let i = 0;i <=50 ; i++) {  //初始化人数选择的数组
@ -410,7 +428,7 @@ const openDrawer =(index : number,dateInfo : any)=>{  //抽屉打开方法
  })
  drawer.value = true
 }
-const saveTime =(index: number)=>{
+const saveTime =(index: number)=>{  //格式化日期
  try{
    drawerDate.value.timePeriodVOList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1]
  } catch {
@ -536,6 +554,13 @@ const deleteDate = async (id: number)=>{  //删除当前日期方法
      message: '请求失败'
    })
  }
+}
+const addDate = ( obj : any ) => { //添加日期方法
+  console.log('obj--->',obj);
+  addDateVisible.value = true
+}
+const submitDate =()=> {  //提交日期方法
+
 }
 </script>

--- a/src/views/test.vue
+++ b/src/views/test.vue
@ -1,13 +1,243 @@
 <template>
-  <button @click="test()">123213</button>
+  <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>
-  const weekDay = function(time: string)  {
-  let datelist = ['周日','周一','周二','周三','周四','周五','周六',]
-  return datelist[new Date(time).getDay()];
+import { ref, onMounted } from 'vue'
+import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
+import myAxios from "@/api/myAxios"
+
+const dateDrawerData : any = ref<{
+  visible: boolean
+  timeDataList: { value1: string; value2: [Date, Date] }[]  //数组类型
+}>({
+  visible: false,        // 设定一个初始值
+  timeDataList: []      // 设定一个初始值
+})
+
+const addTimePickers = (date: number) => {
+  if (!dateDrawerData.value[date]) {
+    dateDrawerData.value[date] = {
+      visible: false,
+      timeDataList: []
+    }
+  }
+  dateDrawerData.value[date].timeDataList.push({
+    value1: '',
+    value2: [new Date(), new Date()]
+  })
 }
-const test =()=>{
-  console.log(weekDay('2025-1-8'));
+
+const deleteTimePicker = (index: number, date: any) => {
+  if (dateDrawerData.value[date]) {
+    dateDrawerData.value[date].timeDataList.splice(index, 1)
+  }
+}
+
+const printSelectedTimePeriods = (date: any) => {
+  if (dateDrawerData.value[date]) {
+    const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData : any) => {
+      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>
+
+