ll

liukangdong

2024-10-18 e6acb39a2475e211f2c1decc45a95c868239c25f

 admin/src/components/operation/OperCarUseBookParamWindow.vue

@@ -107,7 +107,7 @@
      title="选择用车时间"
      :visible.sync="isShowTime"
      append-to-body
      width="600px"
      width="640px"
    >
      <el-form :model="form" ref="modalRef" class="el_form" :rules="rules">
        <el-form-item label="用车日期" prop="dateDay">
@@ -139,7 +139,7 @@
                v-for="(item, i) in timeList"
                :key="i"
              >
                {{ item.startHours }}-{{ item.endHours }}
                {{ item.startHours }} - {{ item.endHours }}
              </div>
            </div>
          </div>
@@ -168,20 +168,22 @@
        <el-form-item label="用车开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :picker-options="pickerOptions"
            @change="seletedShiwaiDate"
            :default-time="defaultTime"
            :picker-options="pickerOptionsNow"
            @change="seletedShiwaiDate(1)"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用车结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :default-time="defaultTime"
            :picker-options="pickerOptions"
            @change="seletedShiwaiDate"
          >
@@ -283,6 +285,7 @@

      memberList: [],
      timeList: [],
      defaultTime: dayjs().format('HH:mm:ss'),
      selDatetime: '',
      colorOptions: [
        { color: this.$store.state.primaryColor, name: '已选择' },
@@ -329,6 +332,11 @@
        },
        selectableRange: '00:00:00 - 23:59:59'
      },
      pickerOptionsNow: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      // 验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
@@ -350,16 +358,6 @@
      handler (newValue, oldValue) {
        if (newValue) {
          this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + this.form.endTime.slice(11, 19))
          // this.startPickerOptions = this.startPickerOptions
        }
      },
      deep: true,
      immediate: true
    },
    'form.startTime': {
      handler (newValue, oldValue) {
        if (newValue) {
          this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + '23:59:59')
          // this.startPickerOptions = this.startPickerOptions
        }
      },
@@ -417,6 +415,7 @@
        this.isShowTime = true
      } else {
        this.clearTime()
        this.selDatetime = ''
        this.isShowShiwai = true
      }
    },
@@ -505,10 +504,13 @@
    seletedDate (e) {
      this.gettimes()
    },
    seletedShiwaiDate () {
    seletedShiwaiDate (str) {
      const { form } = this
      if(str && str == 1){
        this.$set(this.form, 'endTime', '')
      }
      if (form.startTime && form.endTime) {
        this.selDatetime = form.startTime + '-' + form.endTime
        this.selDatetime = form.startTime + ' - ' + form.endTime
        carUseBookList({
          carId: form.carId,
          startTime: form.startTime,
@@ -533,7 +535,7 @@
    },
    initData () {
      getCarList({
        type: 1
        type: 0
      }).then(res => {
        this.carsList = res
      })
@@ -585,32 +587,41 @@
    div {
      line-height: 28px;
    }
  }
  } 
}
.time_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 154px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    width: 124px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #111;
    border: #cccccc solid 1px;
    cursor: pointer;
  }
  .active {
    background-color: $primary-color;
    color: #fff;
    border-color: $primary-color;
    background-color: #f6f9fe;
    color: $primary-color;
  }
  .disable {
    color: #fff;
    border-color: #cccccc;
    background-color: #cccccc;
    color: #999999;
  }
  .hasSub {
      color: #fff;
      background: #cccccc;
    border-color: #bed6f9;
    background-color: #bed6f9;
    color: #fff;
    }
}
.color_op {