jiangchengfeiyi-Web/src/views/Home.vue

<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>