hair/src/views/Queue.vue

<template>
  <div class="queue">
    <van-nav-bar
      title="预约列表"
      right-text="营业时间"
      @click-left="toAdmin"
      @click-right="toOpen"
      left-text="添加预定"
      left-arrow
    />
    <van-cell-group>
      <van-cell v-for="(item, i) in queueList" :key="i">
        <template #title>
          <van-tag size="large" v-if="item.orderType === 1" type="success"
            >APP</van-tag
          >
          <van-tag size="large" v-else type="warning ">现场</van-tag>
          {{ item.userName }}
          {{ item.userPhone }}
        </template>
        <template #label>
          {{ item.orderTime }}
        </template>
        <template #default>
          <van-button
            v-if="i === 0"
            type="default"
            size="small"
            @click="skipUser"
          >
            跳过
          </van-button>
          <van-button
            type="warning"
            size="small"
            v-if="i !== 0 && item.orderType === 1"
            @click="() => advancefun(item.id)"
          >
            已到达
          </van-button>
          <van-button type="info" size="small" @click="() => nextItem(item.id)">
            完成
          </van-button>
          <van-button
            type="warning"
            size="small"
            @click="() => removequeue(item.id, i)"
          >
            删除
          </van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <van-popup closeable v-model="open" position="right" class="open">
      <van-checkbox-group v-model="checkbox" v-if="showPopover.length">
        <van-row v-for="(item, i) in weeks" :key="i">
          <van-col span="8">
            <van-checkbox :name="i" style="height: 2em">
              {{ item }}
            </van-checkbox>
          </van-col>
          <van-col span="16">
            <van-popover
              style="width: 100%; text-align: center"
              v-model="showPopover[i]"
              trigger="click"
            >
              <div style="display: flex; padding: 10px">
                <div style="flex: 1; text-align: left">
                  <van-button
                    plain
                    hairline
                    type="default"
                    size="small"
                    @click="() => closeTime(i)"
                  >
                    取消
                  </van-button>
                </div>
                <div style="flex: 1; text-align: right">
                  <van-button
                    plain
                    hairline
                    type="info"
                    size="small"
                    @click="() => saveTime(i)"
                  >
                    确认
                  </van-button>
                </div>
              </div>
              <div
                style="
                  width: 200px;
                  display: flex;
                  margin: 0 10px 10px 10px;
                  border: 1px solid #eee;
                "
              >
                <van-datetime-picker
                  style="flex: 1"
                  v-model="time[i]"
                  type="time"
                  class="van-hairline--left"
                  :show-toolbar="false"
                />
                <van-datetime-picker
                  style="flex: 1; border-left: 1px solid #eee"
                  v-model="time2[i]"
                  :show-toolbar="false"
                  type="time"
                />
              </div>
              <template #reference>
                <div class="timerange">
                  {{ timerange[i] }}
                </div>
              </template>
            </van-popover>
          </van-col>
        </van-row>
        <br />
        <van-button
          :loading="load"
          @click="upRulefun"
          round
          type="info"
          loading-text="加载中..."
          block
        >
          保 存
        </van-button>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Button as vanButton,
  NavBar as vanNavBar,
  Popup as vanPopup,
  Col as vanCol,
  Row as vanRow,
  Checkbox as vanCheckbox,
  CheckboxGroup as vanCheckboxGroup,
  Popover as vanPopover,
  DatetimePicker as vanDatetimePicker,
  Tag as vanTag,
  Dialog,
  Notify,
  Toast,
} from "vant";
import "vant/lib/toast/style/index";
import "vant/lib/tag/style/index";
import "vant/lib/cell/style/index";
import "vant/lib/cell-group/style/index";
import "vant/lib/dialog/style/index";
import "vant/lib/button/style/index";
import "vant/lib/popup/style/index";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";
import "vant/lib/notify/style/index";
import "vant/lib/datetime-picker/style/index";
import "vant/lib/popover/style/index";
import "vant/lib/checkbox/style/index";
import "vant/lib/checkbox-group/style/index";
import "vant/lib/nav-bar/style/index";

import {
  orderList,
  skip,
  nextone,
  cancel,
  advance,
  getRule,
  upRule,
} from "../api/index";

export default {
  name: "Queue",
  data() {
    return {
      today: new Date(),
      queueList: [],
      showPopover: [],
      open: false,
      time: [],
      time2: [],
      timerange: [],
      checkbox: [],
      weeks: [],
      load: false,
      load1: false,
    };
  },
  mounted() {
    this.reloadOrder();
    window.setInterval(() => {
      this.reloadOrder();
    }, 60000);
  },
  computed: {},
  methods: {
    closeTime(t) {
      const showP = JSON.parse(JSON.stringify(this.showPopover));
      this.time[t] = this.timerange[t].split(" - ")[0];
      this.time2[t] = this.timerange[t].split(" - ")[1];
      showP[t] = false;
      this.showPopover = showP;
    },
    saveTime(t) {
      let s = this.time[t].split(":"),
        e = this.time2[t].split(":");
      let sMin = Number(s[0] * 60 || 0) + Number(s[1] || 0);
      let eMin = Number(e[0] * 60 || 0) + Number(e[1] || 0);
      if (eMin < sMin) return Notify("结束时间应在开始时间之后");
      this.timerange[t] = this.time[t] + " - " + this.time2[t];
      this.closeTime(t);
    },
    upRulefun() {
      this.load = true;
      upRule({
        week: this.formatRule(),
      })
        .then(() => {
          this.load = false;
          Toast("保存成功");
        })
        .catch(() => {
          this.load = false;
        });
    },
    formatRule() {
      let li = [],
        week = {
          周一: 1,
          周二: 2,
          周三: 3,
          周四: 4,
          周五: 5,
          周六: 6,
          周日: 7,
        },
        check = this.checkbox.join(",");
      for (let i = 0; i < this.showPopover.length; i++) {
        const time = this.time[i],
          time2 = this.time2[i],
          rex = new RegExp(i);
        li.push({
          week: week[this.weeks[i]],
          start: time,
          end: time2,
          status: rex.test(check) ? "OPEN" : "STOP",
        });
      }
      return li;
    },
    toOpen() {
      getRule().then(res => {
        const li = res || [],
          week = {
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "日",
          };
        let W = [];
        let showPopover = [],
          timerange = [],
          time = [],
          time2 = [],
          checkbox = [];
        for (let i = 0; i < li.length; i++) {
          const v = li[i];
          let sT = v.start ? this.format(v.start) : "00:00";
          let eT = v.end ? this.format(v.end) : "00:00";
          W.push("周" + week[v.week]);
          showPopover.push(false);
          v.status === "OPEN" && checkbox.push(i);
          timerange.push(sT + " - " + eT);
          time.push(sT);
          time2.push(eT);
        }
        this.weeks = W;
        this.showPopover = showPopover;
        this.time = time;
        this.time2 = time2;
        this.timerange = timerange;
        this.checkbox = checkbox;
        this.open = true;
      });
    },
    format(T) {
      let o = T.split(":");
      o.splice(2, 1);
      return o.join(":");
    },
    reloadOrder() {
      if (this.load1) return;
      this.load1 = true;
      orderList({
        today: true,
      })
        .then(res => {
          this.queueList = res || [];
          this.load1 = false;
        })
        .catch(() => {
          this.load1 = false;
        });
    },
    toAdmin() {
      this.$router.push({ name: "Applyreal", params: { a: 0 } });
    },
    skipUser() {
      Dialog.confirm({
        message: "是否跳过该用户？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        skip().then(() => {
          this.reloadOrder();
        });
      });
    },
    advancefun(id) {
      Dialog.confirm({
        message: "请确认该用户已到达",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        advance({ id }).then(() => {
          this.reloadOrder();
        });
      });
    },
    nextItem(id) {
      Dialog.confirm({
        message: "该服务是否已完成？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        nextone({
          id,
        }).then(() => {
          this.reloadOrder();
        });
      });
    },
    removequeue(id, i) {
      Dialog.confirm({
        message: "确定要删除该预约？",
        confirmButtonColor: "#2a7ef4",
      }).then(() => {
        // on confirm
        cancel({
          id,
        }).then(() => {
          let queueList = JSON.parse(JSON.stringify(this.queueList));
          queueList.splice(i, 1);
          this.queueList = queueList;
        });
      });
    },
  },
  beforeUnmount: function () {},
  components: {
    vanCell,
    vanCellGroup,
    vanButton,
    vanNavBar,
    vanPopup,
    vanCol,
    vanRow,
    vanCheckbox,
    vanCheckboxGroup,
    vanPopover,
    vanDatetimePicker,
    vanTag,
  },
};
</script>

<style>
.queue {
  width: 1200px;
  height: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  background-color: #fff;
}
.queue .open {
  height: 100%;
  min-width: 500px;
  padding: 3.5em 1em 1em 2em;
  box-sizing: border-box;
}
.queue .van-col {
  height: 2.5em;
  line-height: 1.5em;
}
.queue .timerange {
  border-radius: 3px;
  padding: 3px 5px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #eee;
  cursor: pointer;
}
.queue .van-cell {
  padding: 30px 16px;
  line-height: 50px;
}
.queue .van-cell__title {
  font-size: 50px;
}
.queue .van-cell__title {
  flex: 2;
}
.queue .van-button {
  font-size: 35px;
  height: 45px;
}
.queue .van-tag {
  vertical-align: middle;
}
.queue .van-hairline--bottom {
  height: 130px;
  line-height: 130px;
}

.queue .van-nav-bar__content {
  height: 130px;
}
.queue .van-nav-bar__title,
.queue .van-nav-bar__text,
.queue .van-nav-bar__left {
  line-height: 130px;
  font-size: 50px;
}
.queue .van-nav-bar__arrow {
  line-height: 130px;
  font-size: 50px;
}
.queue .van-cell__label {
  font-size: 35px;
  padding-top: 15px;
  padding-left: 60px;
}
</style>