travel/admin/src/views/proManagement/scheduling.vue

<template>
  <div class="pro_scheduling">
    <el-calendar v-model="value">
      <template #dateCell="{ date }">
        <div>
          <div>{{ date.getDate() }}</div>
          <div v-if="isDateAvailable(date)">
            <el-button
              type="primary"
              @click="bookDate(date)"
              :disabled="!isDateAvailable(date)"
            >
              可预约
            </el-button>
            <div class="yy">已约 {{ bookedCount(date) }}</div>
            <div class="yy">剩余 {{ availableCount(date) }}</div>
          </div>
          <div v-else>
            <el-button disabled>不可预约</el-button>
            <div class="test">已约 {{ bookedCount(date) }}</div>
            <div class="test">剩余 0</div>
          </div>
        </div>
      </template>
    </el-calendar>
    <el-dialog
      :visible.sync="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="预约行程"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="出行日期" prop="date">
          <el-input
            v-model="formData.date"
            placeholder="请输入单行文本单行文本"
            :disabled="true"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="可预约数量" prop="num">
          <el-input
            v-model="formData.num"
            type="number"
            placeholder="请输入可预约数量"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProductSchedules, addProductSchedulesApi } from "@/api/admin";

export default {
  data() {
    return {
      dialogVisible: false,
      value: new Date(),
      appointments: {},
      formData: {
        date: "",
        num: "",
        id: "",
      },
      rules: {
        num: [
          {
            required: true,
            message: "请输入可预约数量",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.formData.id = this.$route.query.id;
    this.getList();
  },
  methods: {
    async getList() {
      const res = await getProductSchedules(this.formData.id);
      if (res && res.error === 0) {
        res.data.forEach((item) => {
          this.$set(this.appointments, item.date, {
            books_num: item.books_num,
            left_num: item.left_num,
          });
        });
      }
    },
    isDateAvailable(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      return date >= today;
    },
    bookDate(date) {
      console.log(`预约日期: ${date.toLocaleDateString()}`);
      this.dialogVisible = true;
      this.formData.date = date.toLocaleDateString();
    },
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.dialogVisible = false;
    },
    handelConfirm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return;
        const res = await addProductSchedulesApi(this.formData);
        if (res.error === 0) {
          this.$message.success("预约成功");
          this.getList();
        }
        this.close();
      });
    },
  },
  computed: {
    availableCount() {
      return (date) => {
        const dateString = date.toISOString().split("T")[0];
        return this.appointments[dateString]?.left_num || 0;
      };
    },
    bookedCount() {
      return (date) => {
        const dateString = date.toISOString().split("T")[0];
        return this.appointments[dateString]?.books_num || 0;
      };
    },
  },
};
</script>

<style scoped lang="scss">
.pro_scheduling {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-calendar {
    margin: 20px 0;
  }
}

.pro_scheduling ::v-deep .el-calendar-table .el-calendar-day {
  height: 130px;
}

.test {
  color: #c6ccd2;
  font-size: 14px;
  margin-top: 10px;
}

.yy {
  color: #8a8c90;
  font-size: 14px;
  margin-top: 10px;
}
</style>