index.vue 2.41 KB
<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="firstDate" name="1">
        <el-row :gutter="30">
          <el-col :xs="8" :sm="8" :lg="4" class="card-panel-col">
            <el-card
              :body-style="{
                padding: '15px 20px 20px',
                background: '#5CB87A',
                color: '#fff',
              }"
            >
              <div class="time">14:00-15:00</div>
              <div>预约到达时间:</div>
              <div>
                <span>当前已预约人数:2</span>
                <span class="pull-right">2/3</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { listWarehouse } from "@/api/reservation/selectWarehouse";
export default {
  data() {
    return {
      activeName: "1",
      firstDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
      form: {
        warehouse: undefined,
      },
      warehouseOptions: [],
      flag: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listWarehouse().then((response) => {
        this.warehouseOptions = response.rows;
        this.form.warehouse = response.rows[0].code;
      });
    },
    save() {
      this.flag = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.card-panel-col {
  margin-bottom: 25px;
  cursor: pointer;

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