wms / wms-cloud-ui · Files

<template>

  <div class="app-container">
    <el-form ref="form" :model="form" v-if="flag == true">

      <el-row :gutter="15">
        <el-col :span="4">
          <el-form-item>
            <span class="pull-right">仓库：</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="warehouse">
            <el-select
              v-model="form.warehouse"
              placeholder="仓库"
              style="width: 100%"
            >
              <el-option
                v-for="item in warehouseOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="save">确 定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-tabs v-model="activeName" type="card" v-if="flag == false">

      <el-tab-pane
        :label="item.date"
        :name="item.name.toString()"
        v-for="item in reservationList"
        :key="item.name"
      >

        <el-row :gutter="30">

          <el-col
            :xs="8"
            :sm="8"
            :lg="4"
            class="card-panel-col"
            v-for="value in item.data"
            :key="value.index"
          >
            <div
              @click="
                value.flag == true &&
                  handleUpdate(item.date, value.beginTime, value.endTime)
              "

            >

              <el-card
                :body-style="{
                  padding: '15px 20px 20px',
                  background: '#5CB87A',
                  color: '#fff',
                }"
                :class="[
                  'my-card-size',
                  { 'custom-my-card': value.flag == false },
                ]"
              >
                <div class="time">
                  {{ value.beginTime }}-{{ value.endTime }}
                </div>
                <div>预约到达时间</div>
                <div>
                  <span>当前已预约人数:{{ value.number }}</span>
                  <span class="pull-right"
                    >{{ value.number }}/{{ value.reservationsNumber }}</span
                  >
                </div>
              </el-card>

            </div>

          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- 修改预约对话框 -->
    <el-dialog title="预约" :visible.sync="open" width="500px" append-to-body>
      <el-form
        ref="reservationForm"
        :model="reservationForm"
        :rules="rules"
        label-width="80px"
      >

        <el-form-item label="姓名" prop="name">
          <el-input v-model="reservationForm.name" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="reservationForm.phone" />
        </el-form-item>

        <el-form-item label="车型" prop="modal">

          <el-input v-model="reservationForm.modal" />
        </el-form-item>
        <el-form-item label="车牌号" prop="carPlate">
          <el-input v-model="reservationForm.carPlate" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script>

import { listWarehouse } from "@/api/system/warehouse";

import { reservation, addReservation } from "@/api/reservation";

export default {
  data() {
    return {

      activeName: "0",

      form: {

        warehouse: undefined,

      },

      queryParams: {},

      warehouseOptions: [],
      flag: true,

      reservationList: [],

      // 是否显示弹出层

      open: false,

      // 表单参数

      reservationForm: {},

      // 表单校验

      rules: {

        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: ["blur", "change"],
          },
        ],

        phone: [

          {
            required: true,
            message: "联系方式不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "号码格式有误",
            trigger: ["blur", "change"],
          },
        ],
        modal: [
          {
            required: true,
            message: "车型不能为空",
            trigger: ["blur", "change"],
          },

        ],
        carPlate: [

          {
            required: true,
            message: "车牌号不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
            message: "车牌号格式有误",
            trigger: ["blur", "change"],
          },

        ],
      },

    };
  },
  created() {

    this.getWarehouseList();

  },
  methods: {

    getWarehouseList() {

      listWarehouse().then((response) => {
        this.warehouseOptions = response.rows;
        this.form.warehouse = response.rows[0].code;
      });

    },

    save() {

      this.flag = false;

      this.queryParams = {
        warehouseCode: this.form.warehouse,

      };

      reservation(this.queryParams).then((response) => {
        this.reservationList = response.data;
      });

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.reservationForm = {
        name: undefined,
        phone: undefined,
        carPlate: undefined,
        beginTime: undefined,
        endTime: undefined,
        modal: undefined,
        warehouseCode: undefined,
      };
      this.resetForm("reservationForm");
    },

    handleUpdate(date, val1, val2) {
      this.reservationForm.beginTime = date + " " + val1;
      this.reservationForm.endTime = date + " " + val2;
      this.reservationForm.warehouseCode = this.form.warehouse;
      this.open = true;

    },

    /** 提交按钮 */

    submitForm: function () {
      this.$refs["reservationForm"].validate((valid) => {
        if (valid) {
          addReservation(this.reservationForm).then((response) => {
            this.msgSuccess("预约成功");
            this.cancel();
            this.save();
          });
        }
      });

    },

  },
};
</script>

<style lang="scss">
.my-card-size {
  font-size: 14px;
  cursor: pointer;
}

.custom-my-card {
  .el-card__body {
    background: #f58383 !important;
    cursor: not-allowed;

  }

}

</style>

<style lang="scss" scoped>
.card-panel-col {
  margin-bottom: 25px;

  .time {
    margin-bottom: 10px;
  }
}
</style>