sz-kjsxy-web/src/views/book/components/addBook.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="60" @reset="resetForm" :is-show.sync="isShow" :type="'form'" :title="typeName"
      :form="form" @submit="submit" :rules='rules' :okText="'预约并通过'">

      <template v-slot:course_id v-if="type==='more'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>班级(课程)：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_id" @change="changeCourse" style="width:100%" placeholder="可选择课程获取学员">
              <el-option v-for="item in course_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:user_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>预约人：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.user_id" style="width:100%" :multiple="type==='more'?true:false" filterable remote
              reserve-keyword placeholder="请输入姓名查找学员" :remote-method="remoteMethod" :loading="loading">
              <el-option v-for="item in user_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>预约日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.date" type="date" style="width:100%" placeholder="预约日期"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:timeRange>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>时间段：
          </div>
          <div class="xy-table-item-content">
            <el-time-picker is-range v-model="form.timeRange" style="width:100%" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm:ss"
              format="HH:mm:ss">
            </el-time-picker>
          </div>
        </div>
      </template>
      <template v-slot:site>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>预约场地：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.site" placeholder="请选择预约场地" clearable style="width:100%">
              <el-option v-for="item in site_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:content v-if="type==='add'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>预约事项：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.content" placeholder="请输入预约事项" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:plate>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>车牌：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.plate" placeholder="请输入车牌,多个车牌中间以英文,分隔" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:accompany_total v-if="type==='add'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>同行人数：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.accompany_total" type="number" placeholder="请输入同行人数" clearable
              style="width: 100%;"></el-input>
          </div>
        </div>
      </template>

      <!-- <template v-slot:footerContent>
        <Button type="primary" @click="submit">预约并通过</Button>
        <Button type="primary" @click="isShow = false">取消</Button>
      </template> -->
    </xy-dialog>

  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    show,
    save
  } from "@/api/book/index.js"
  import {
    indexStudy
  } from '@/api/student/index.js'
  import {
    index as courseIndex
  } from "@/api/course/index.js"
  export default {
    mixins: [myMixins],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        typeName: '手动预约',
        id: '',
        form: {
          course_id: '',
          user_id: '',
          date: '',
          timeRange: '',
          start_time: '',
          end_time: '',
          content: '',
          site: '',
          plate: '',
          accompany_total: 0,
          status: 1,
          reason: ''
        },
        loading: false,
        user_options: [],
        site_options: [],
        course_options: [],
        rules: {
          user_id: [{
            required: true,
            message: '请选择预约人'
          }],
          date: [{
            required: true,
            message: '请选择预约日期'
          }],
          timeRange: [{
            required: true,
            message: '请选择时间段'
          }],
          site: [{
            required: true,
            message: '请选择预约场地'
          }],
        }
      }
    },
    created() {
      this.getCourseList()
      this.getUserList('')
    },
    methods: {
      submit(status) {
        this.form.status = 1
        this.form.start_time = this.form.date + " " + this.form.timeRange[0]
        this.form.end_time = this.form.date + " " + this.form.timeRange[1]
        console.log(this.form)
        if(this.type==='more'){
          let _arr = this.base.deepCopy(this.form.user_id)
          this.form.user_id = _arr.join(",")
        }
        save(this.form).then(res => {
          if(res.success<res.total){
            this.$Message.warning(res.err.join("。"))
          }else{
            this.$message({
              type: 'success',
              message: '预约成功'
            })
          }

          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          show_relation: ['user', 'appointmentConfig']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.status = res.status ? res.status : 0
        })
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.getUserList(query)
        } else {
          this.user_options = [];
        }
      },
      async getUserList(query) {
        const res = await indexStudy({
          page: 1,
          page_size: 99999,
          name: query,
          course_id: this.form.course_id,
        })
        this.user_options = res.list.data
        this.loading = false
      },
      changeCourse(e) {
        if (e) {
          this.form.course_id = e
          this.getUserList('')
        } else {
          this.form.course_id = ''
          this.getUserList('')
        }
      },
      async getCourseList() {
        const res = await courseIndex({
          page: 1,
          page_size: 9999
        })
        this.course_options = res.data
      },
      resetForm() {
        this.form.timeRange = ""
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
            this.typeName = '编辑'
          } else if (this.type === 'more') {
            this.typeName = '批量预约'
          } else {
            this.typeName = '手动预约'
          }
        } else {
          this.id = ''
          this.type = "add"
          this.typeName = '手动预约'
          this.course_id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name {
    flex-basis: 100%;
  }

  .bookInfo {
    &>div {
      span {
        display: inline-block;
      }

      span:first-child {
        width: 20%;
        text-align: right;
      }

      span:last-child {
        width: 80%;
        text-align: left;
      }
    }
  }
</style>