Typhoneye/src/components/PatientList/PatientList.vue

<template>
  <div class="flex flex-1 flex-col patient-list">
    <view class="role-box">
      <view class="role flex items-center justify-between">
        <view class="flex items-center">
          <img src="@/static/news/role.png" style="width: 44rpx; height: 44rpx" alt="" />
          <view class="ml-2 role-name">医生</view>
        </view>
        <u-icon name="arrow-down" color="#4F8BFF" size="34"></u-icon>
      </view>
      <div class="title flex justify-between items-center">
        <u-search
          class="w-full"
          v-model="name"
          shape="round"
          action-text=" "
          placeholder="搜索患者"
          @search="getData(true)"
          @blur="searchBlur"
          :show-action="false"
        ></u-search>
        <!-- <select-lay
          :zindex="99"
          :showplaceholder="false"
          :value="tval"
          name="name"
          placeholder="请选择类型"
          :options="provinces"
          @selectitem="changeSelect"
        >
        </select-lay> -->
      </div>
    </view>
    <div class="patients flex items-center">
      <view class="shu"></view>
      <div>病例列表</div>
      <!-- <div class="ml-2 card-total flex items-center justify-center">{{ total }}</div> -->
    </div>
    <div class="patient-tabs flex justify-evenly">
      <div class="flex items-center" style="position: relative" @click="changeSelect(0)">
        <div class="tab-text">急救患者</div>
        <div class="ml-1 card-total flex items-center justify-center" v-if="tval === 0">{{ total }}</div>
        <div class="bor-bottom" v-if="tval === 0"></div>
      </div>
      <div class="flex items-center" style="position: relative" @click="changeSelect(1)">
        <div class="tab-text">出院患者</div>
        <div class="ml-1 card-total flex items-center justify-center" v-if="tval === 1">{{ total }}</div>
        <div class="bor-bottom" v-if="tval === 1"></div>
      </div>
    </div>
    <scroll-view scroll-y="true" :style="{ height: height }" :lower-threshold="50" scroll-with-animation @scrolltolower="scrolltolower">
      <div v-if="patientList.length" class="white list-box w-full flex-1 flex-col">
        <!-- <div class="patients flex items-center">
          <view class="shu"></view>
          <div>{{ tval === 0 ? '急救患者' : '出院患者' }}</div>
          <div class="ml-2 card-total flex items-center justify-center">{{ total }}</div>
        </div> -->
        <div
          v-for="(card, cardIndex) in patientList"
          :key="cardIndex"
          class="mb-4 w-full card-box flex flex-row flex-nowrap"
          style="position: relative"
          @mousedown="start"
          @touchstart="start"
          @mousemove="move($event, cardIndex)"
          @touchmove="move($event, cardIndex)"
          @mouseup="end"
          @touchend="end"
        >
          <div
            @longpress="longpress(card.firstAidId)"
            @click="changeTimeLine(card.recordUserId, card.firstAidId, globalData.createAuth - 0 === 0 ? 1 : 0, card.demonstrate)"
            style="height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10"
          ></div>
          <div :style="{ 'margin-left': outIndex === cardIndex && card.recordUserId - 0 ? '-68px' : '' }" class="w-full anima">
            <div class="crad-content">
              <!-- <div class="status-wait" v-if="!(card.recordUserId - 0)"></div> -->
              <div class="flex items-center justify-between">
                <view class="flex flex-col">
                  <view class="flex">
                    <!-- <view class="huanzhe-tip">患者</view> -->
                    <div class="pr-2 fw-bold">
                      <span v-if="card.name">
                        {{ card.name }}
                      </span>
                      <span v-else> 无名氏 </span>
                    </div>
                    <div class="pr-2 fw-bold">
                      <span v-if="card.gender === 0">女</span>
                      <span v-else-if="card.gender === 1">男</span>
                      <span v-else>-</span>
                    </div>
                    <div class="pr-2 fw-bold">
                      <span v-if="card.age || card.age === 0">{{ card.age }}</span>
                      <span v-else>-</span>
                    </div>
                    <div class="pr-2 fw-bold yanshi-text" v-if="card.demonstrate === 1">
                      <span>（演示中）</span>
                    </div>
                  </view>
                  <view class="flex flex-nowrap items-center justify-left mt-2">
                    <view class="status-con mr-1" :class="card.demonstrate === 1 ? 'color-2' : 'color-3'">到院</view>
                    <view v-if="card.record2" style="color: #a3acbf; font-size: 24rpx">
                      {{ $moment(+card.record2).format('YYYY-MM-DD HH:mm') }}
                    </view>
                  </view>
                </view>
                <!-- <u-tag style="z-index: 99; margin-right: 0" plain shape="circle" v-if="card.isJmrs - 0 === 1" text="静脉溶栓"> </u-tag>
                <u-tag
                  class="ml-2 flex items-center justify-center"
                  type="success"
                  plain
                  shape="circle"
                  v-if="card.isXgzl - 0 === 1"
                  text="血管内治疗"
                >
                </u-tag> -->
                <u-icon name="arrow-right" size="28" color="#A3ACBF" />
                <!-- <div v-if="card.record2" style="color: rgba(79, 139, 255, 1)">
                  {{ $moment(+card.record2).format('YYYY-MM-DD HH:mm') }}
                </div> -->
              </div>
              <!-- <div class="flex">
                <div>{{ tval === 0 ? '到院时间：' : '出院时间：' }}</div>
                <div v-if="card.record2" style="color: rgba(0, 0, 0, 0.85)">
                  {{ $moment(+card.record2).format('YYYY-MM-DD HH:mm') }}
                </div>
              </div> -->
            </div>
            <!-- <img src="./icon/yanshi.png" class="img-box" v-if="card.demonstrate === 1" /> -->
          </div>
          <div
            :style="{
              width: outIndex === cardIndex && card.recordUserId - 0 ? '68px' : 0,
              color: outIndex === cardIndex && card.recordUserId - 0 ? 'rgba(255,255,255,1)' : 'rgba(255,0,0,0)',
            }"
            class="sign-out flex items-center justify-center anima"
            @click="quitTips(card.firstAidId)"
          >
            退出
          </div>
        </div>
      </div>
    </scroll-view>
    <u-modal
      v-model="show"
      :closeOnClickOverlay="true"
      title="提示"
      content="是否确定删除当前患者信息？"
      show-cancel-button
      confirm-text="删除"
      @confirm="confirmDel"
    ></u-modal>
    <u-modal
      v-model="show1"
      :closeOnClickOverlay="true"
      title="提示"
      content="退出当前病例后，其他医生可接诊。确定要退出吗？"
      show-cancel-button
      confirm-text="退出"
      @confirm="confirmBack"
    ></u-modal>
    <u-toast ref="uToast" />
    <div class="add-patient" @click="jump">
      <u-icon color="#fff" size="40" name="plus"></u-icon>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
  props: {},
  data: () => ({
    height: '',
    name: '', // 搜索框患者名称
    provinces: [
      {
        label: '急救患者',
        value: 0,
      },
      {
        label: '出院患者',
        value: 1,
      },
    ],
    tval: 0, // 默认选择的患者类型: 急救患者
    pageNum: 1, // 默认查询第一页的数据
    patientList: [], // 患者列表
    total: '', // 列表共有多少条数据
    role: '',
    show: false, // 是否显示删除modal框
    show1: false, // 是否显示退出急救的modal框
    delFirstAidId: '', // 即将要删除的患者的急救id
    firstAidId: '',
    quitId: '', // 将要退出急救的患者的急救id
    startX: 0, // 当前滑动的距离
    outIndex: -1, // 当前哪个card处于左滑选择可以单击退出的位置
    isMove: false, // 当前是否处于滑动状态
  }),
  computed: {
    ...mapState('carbasics', ['globalData', 'refreshList']),
    ...mapGetters('project', ['projectId']),
  },
  mounted() {
    const system = uni.getSystemInfoSync();
    this.height = system.windowHeight - 138 - 40 - 45 + 'px';
    console.log('this.height: ', this.height);
  },

  created() {
    this.getData(true);
  },
  methods: {
    ...mapMutations('carbasics', ['setFirstAidId', 'setDetailValueType']),
    jump() {
      uni.navigateTo({ url: `/pages/establish/establish?role=${this.role}` });
    },
    // 鼠标按下事件
    start(event) {
      if (event.touches) {
        this.startX = event.touches[0].clientX;
        // console.log(event.touches[0].clientX);
      }
      this.isMove = true;
    },
    // 鼠标松开事件
    end() {
      this.isMove = false;
    },
    // 拖动box事件
    move(event, index) {
      if (this.isMove) {
        if (this.outIndex === index) {
          this.outIndex = -1;
        } else {
          if (event.touches && (event.touches[0].clientX - this.startX > 10 || event.touches[0].clientX - this.startX < -10)) {
            this.outIndex = index;
          }
        }
      }
      this.isMove = false;
    },
    // 退出急救
    quitTips(id) {
      this.quitId = id;
      this.show1 = true;
    },
    // 退出急救二次确认
    async confirmBack() {
      try {
        const param = { firstAidId: this.quitId, projectId: this.projectId };
        const res = await uni.$u.api.quitAid(param);
        this.getData(true);
        this.visible1 = false;
      } catch (error) {
        this.$refs.uToast.show({
          title: '退出失败',
          type: 'error',
        });
      }
      this.outIndex = -1;
    },
    // 用户点击患者card时,判断是否已经被接诊
    // 如果没有被接诊,这自动选择接诊该患者
    // 如果已经接诊,则直接跳转到患者的信息录入目录中
    changeTimeLine(recordUserId, firstAidId, caseType, demonstrate) {
      try {
        if (!(recordUserId - 0)) {
          this.changeShow(firstAidId, caseType, demonstrate);
        } else {
          this.setFirstAidId(firstAidId);
          this.setDetailValueType(demonstrate);
          // this.$router.push(`/patient-line`);
          uni.navigateTo({ url: `/pages/patientLine/patientLine?caseType=${caseType}` });
        }
      } catch (error) {
        this.$refs.uToast.show({
          title: '切换失败',
          type: 'error',
        });
        0;
      }
    },
    // 判断当前用户是否为医生,如果是医生,则将该患者加入急救
    changeShow(id, caseType, demonstrate) {
      if (this.role === 'YiSheng') {
        // 只有加入急救的时候用到了这个急救id,但还是存了起来
        // 这里存起来的原因,是因为目前只有神内路线,当神外路线打开后,需要选择神内/神外才能加入,所以需要存储
        this.firstAidId = id;
        this.handleOk(this.globalData.createAuth - 0 === 0 ? 1 : 0, caseType, demonstrate);
        // this.visible = true; // 神内/神外选择加入
      }
    },
    // 将患者加入急救
    async handleOk(type, caseType, demonstrate) {
      try {
        const { projectId, firstAidId } = this;
        const param = {
          projectId,
          firstAidId,
          type,
        };
        const res = await uni.$u.api.joinAid(param);
        if (res) {
          this.$refs.uToast.show({
            title: '加入成功',
            type: 'success',
          });
          const codeAndAnswerList = [
            {
              questionCode: 'JKJY-SFXJ',
              answer: ['是'],
            },
            {
              questionCode: 'JKJY-XJFS',
              answer: ['集体病区教育'],
            },
            {
              questionCode: 'YJJL-CTendTime-outSide',
              answer: ['否'],
            },
          ];
          const setParam = {
            codeAndAnswerList,
            firstAidId,
          };
          uni.$u.api.setRecord(setParam);
          this.getData(true);
          this.setFirstAidId(firstAidId);
          this.setDetailValueType(demonstrate);
          // this.$router.push(`/patient-line`);
          uni.navigateTo({ url: `/pages/patientLine/patientLine?caseType=${caseType}` });
        } else {
          this.$refs.uToast.show({
            title: '加入失败',
            type: 'error',
          });
        }
      } catch (error) {
        this.$refs.uToast.show({
          title: error,
          type: 'error',
        });
      }
    },
    // 长按事件
    longpress(delFirstAidId) {
      this.delFirstAidId = delFirstAidId;
      this.show = true;
    },
    async confirmDel() {
      try {
        const param = { firstAidId: this.delFirstAidId };
        const res = await this.$u.api.delDemo(param);
        this.getData(true);
      } catch (error) {
        console.log('error: ', error);
      }
    },
    // 获取列表数据
    async getData(status) {
      try {
        // status 是否是重新请求数据,如果是重新请求数据,则清空页码和已查询的数据
        if (status) {
          this.pageNum = 1;
          this.patientList = [];
        }
        const params = {
          param: {
            firstAidType: this.tval,
            name: this.name,
            type: this.globalData.powerType,
            projectId: this.projectId,
            caseType: this.globalData.createAuth - 0 === 0 ? 1 : 0,
            pageNum: this.pageNum,
            pageSize: 10,
          },
        };
        const data = await this.$u.api.querySelf(params);
        this.role = data.role;
        if (data.page.list.length) {
          if (status) {
            this.patientList = data.page.list;
          } else {
            this.patientList = this.patientList.concat(data.page.list);
          }
          this.total = data.page.total;
        } else {
          this.$t.ui.showToast('没有更多数据');
          this.total = data.page.total;
        }
      } catch (error) {
        console.log('error: ', error);
      }
    },
    // 改变急救类型时,重新查询数据
    changeSelect(e) {
      this.tval = e;
      this.getData(true);
    },
    searchBlur() {
      setTimeout(() => this.getData(true), 10);
    },
    // scroll-view滚动到底部时,触发查询下一页数据
    scrolltolower() {
      this.pageNum++;
      this.getData(false);
    },
  },
  watch: {
    refreshList() {
      setTimeout(() => {
        this.getData(true);
      }, 150);
    },
  },
  onShow() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {
    // this.getData(true);
  },
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.bor-bottom {
  width: 64rpx;
  height: 12rpx;
  background: #4f8bff;
  border-radius: 6rpx;
  position: absolute;
  left: 50%;
  margin-left: -32rpx;
  bottom: -18rpx;
}
.tab-text {
  font-size: 32rpx;
  font-family: OPPOSans-Bold, OPPOSans;
  font-weight: bold;
  color: #3e3d4d;
}
.patient-tabs {
  padding: 16rpx 32rpx;
  margin-bottom: 16rpx;
}
.yanshi-text {
  font-size: 28rpx;
  font-family: OPPOSans-Bold, OPPOSans;
  font-weight: bold;
  color: #ffae35;
}
.color-2 {
  background: #ffece4;
  color: #ff8833;
}
.color-3 {
  background: #e4edff;
  color: #5990ff;
}
.status-con {
  padding: 2rpx 6rpx;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  font-size: 20rpx;
  font-family: OPPOSans-Medium, OPPOSans;
  font-weight: 500;
}
.huanzhe-tip {
  padding: 2rpx 12rpx;
  background: #e4edff;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  font-size: 24rpx;
  font-family: OPPOSans-Medium, OPPOSans;
  font-weight: 500;
  color: #5990ff;
  margin-right: 20rpx;
}
.role-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #5991ff;
}
.role {
  height: 92rpx;
  background: #e4edff;
  box-shadow: 0px 0px 6rpx 0 #eeeeee;
  border-radius: 24r 24r 0px 0px;
  padding: 24rpx;
  opacity: 1;
}
.role-box {
  width: 686rpx;
  margin: 16px 32rpx 8px 32rpx;
  height: 118px;
  background: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(39, 59, 97, 0.08);
  border-radius: 24r;
  opacity: 1;
}
.add-patient {
  z-index: 10;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0284c7;
  position: fixed;
  bottom: 100px;
  right: 16px;
}
.patient-list {
  background-color: #fff;
}
.title {
  width: 100%;
  padding: 32rpx 20rpx;
  // position: fixed;
  // top: 32px;
  background: #fff;
}
.card-box {
  /* box-shadow: 0 0 5px #ccc; */
  // border: 2px solid #ccc;
  background: #f6f6f9;
  // margin: 16px 0;
  margin-bottom: 32rpx;
  border-radius: 24rpx;
  overflow: hidden;
}
.anima {
  transition: all 0.5s;
  position: relative;
}
.crad-content {
  font-size: 14px;
  color: #414141;
  padding: 24rpx;
}
.status-wait {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #ff8f00;
  box-shadow: 0 0 5px #ff8f00;
}
.fw-bold {
  font-size: 16px;
  font-weight: bold;
}
.sign-out {
  background-color: red;
  font-size: 14px;
  color: #fff;
  z-index: 10;
}
.list-box {
  padding: 16rpx 32rpx 32rpx 32rpx;
}
.patients {
  padding: 16rpx 32rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #3e3d4d;
  font-family: OPPOSans-Bold, OPPOSans;
}
.shu {
  width: 16rpx;
  height: 40rpx;
  margin-right: 16rpx;
  background: linear-gradient(136deg, #7bc0ff 0%, #4d88ff 100%);
  border-radius: 40rpx;
  opacity: 1;
}
.card-total {
  padding: 0 8px;
  border-radius: 10px;
  background-color: #4f8bff;
  color: white;
}
.img-box {
  position: absolute;
  bottom: -20rpx;
  width: 44px;
  height: 44px;
  right: -20rpx;
}
</style>