Pad_New/src/pages/configureCenter/components/Bed.vue

<template>
  <div class="Bed">
    <van-list
      v-model="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check='show'
    >
      <div class="BedOne" v-for="(item,index) in BedNumber" :key="index">
        <div class="BedLeft">
          <p>床位号：{{item.number}}</p>
          <p>分区类型：{{getZone(item.zone_id)}}</p>
          <p>所属分组：{{getGroup(item.group_id)}}</p>
        </div>
        <van-icon class="ellipsis" name="ellipsis" @click="Delete(item.id,index)" />
      </div>
    </van-list>
    <div class="add">
      <div style="display: flex;align-items: center;">
        <van-icon class="addIcon" name="add" @click="addBed" />新增
      </div>
    </div>
    <van-action-sheet
      v-model="newShow"
      :actions="actions"
      cancel-text="取消"
      @cancel="onCancel"
      @select="toDeleteBed"
    />
  </div>
</template>

<script>
import { GetAllNumber, DeleteBed } from "@/api/patient/patient";
import { Dialog } from "vant";
export default {
  props: {
    active: Number
  },
  data() {
    return {
      loading: false,
      finished: false,
      newShow: false,
      show: false,
      actions: [{ name: "编辑" }, { name: "删除" }],
      page: 1,
      limit: 10,
      total: 0,
      BedNumber: [],
      Zone: [],
      Group: [],
      id: 0,
      index: 0
    };
  },
  methods: {
    onCancel() {},
    addBed() {
      this.$router.push("/addbed?active=" + this.active);
    },
    GetAllNumber() {
      GetAllNumber(this.page, this.limit).then(response => {
        if (response.data.state === 1) {
          var number = response.data.data.number;
          console.log("number", number);
          let arr = this.BedNumber;
          arr.push(...number);
          this.BedNumber = arr;
          var total = response.data.data.total;
          console.log("total", total);
          this.total = total;
          var zone = response.data.data.zone;
          this.Zone = zone;
          var group = response.data.data.group;
          this.Group = group;
          this.loading = false;
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        this.page++;
        if (this.page <= Math.ceil(this.total / 10)) {
          this.GetAllNumber(this.page, this.limit);
        } else {
          this.loading = false;
          this.finished = true;
        }
      }, 1000);
    },
    getZone(id) {
      for (let i = 0; i < this.Zone.length; i++) {
        if (id === this.Zone[i].id) {
          return this.Zone[i].name;
        }
      }
    },
    getGroup(id) {
      for (let i = 0; i < this.Group.length; i++) {
        if (id === this.Group[i].id) {
          return this.Group[i].name;
        }
      }
    },

    Delete(id, index) {
      this.newShow = true;
      this.id = id;
      this.index = index;
    },
    toDeleteBed(val) {
      if (val.name === "删除") {
        this.DeleteBed(this.id, this.index);
      }
      if (val.name === "编辑") {
        this.$router.push("/editbed?id=" + this.id + "&active=" + this.active);
      }
    },
    onCancel() {
      this.newShow = false;
    },
    DeleteBed(id, index) {
      Dialog.confirm({
        title: "删除提示!",
        message: "确认删除该条信息吗?,删除后将无法恢复!"
      }).then(() => {
        DeleteBed(id).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg;
            console.log("msg", msg);
            this.BedNumber.splice(index, 1);
            this.newShow = false;
          } else {
            this.$toast("该床位尚有排班安排，不能删除");
            this.newShow = false;
          }
        });
      });
    }
  },
  created() {
    console.log("active", this.active);
    this.GetAllNumber();
  }
};
</script>

<style lang="scss" scoped>
.Bed {
  margin-bottom: 3.125rem;
  .BedOne {
    padding: 1.375rem 1.125rem 0 1.5rem;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    p {
      font-size: 0.9375rem;
      margin-bottom: 1.125rem;
    }
    .ellipsis {
      font-size: 1.5rem;
      color: #cccccc;
    }
  }
  .add {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.9375rem;
    color: #979798;
    .addIcon {
      color: #5b98ff;
      font-size: 1.25rem;
      margin-right: 0.25rem;
    }
  }
}
</style>