zy-wechat/pages/transferWorkOrder/transferWorkOrderPatient.vue

<template>
  <view class="transferWorkOrder">
    <mSearch class="search" :mode="2" button="inside" placeholder="请搜索患者名称、住院号" @search="doSearch()" v-model="keyword" searchButtonType="icon" searchButtonName="newicon-saoma"></mSearch>
    <scroll-view scroll-y class="list">
      <view class="item tac"><text class="green">接收人：</text>{{userDTO.name}}（{{userDTO.account}}）</view>
      <view class="item" v-for="item in listComputed" :key="item.id" @click="selectItem(item)">
        <view>{{item.patientName}}（{{item.residenceNo}}）</view>
        <view><checkbox color="#49B856" value="item.id" :checked="item.checked" /></view>
      </view>
    </scroll-view >
    <view class="footer">
      <view class="btn gray" hover-class="seimin-btn-hover" @click="toTransferWorkOrderUser()">切换人员</view>
      <view class="btn" hover-class="seimin-btn-hover" @click="submit()">提交</view>
    </view>
    
    <!-- 弹窗 -->
    <!-- 弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content" :operate="models1.operate" @ok="ok1" @cancel="cancel1"></showModel>
  </view>
</template>

<script>
  import { get, post, SM, webHandle } from "../../http/http.js";
  import mSearch from "@/components/mehaotian-search-revision/mehaotian-search-revision.vue";
  export default {
    onShow() {
      this.SMFlag = true;
    },
    onLoad(options) {
      console.log('options', options);
      this.options = options || {};
      this.userDTO = { id: +this.options.userId, name: this.options.userName, account: this.options.userAccount };
      this.getList(undefined, true);
    },
    components: {
      //引用mSearch组件，如不需要删除即可
      mSearch,
    },
    data() {
      return {
        SMFlag: true,
        keyword: '',
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        list: [],
        options: {},
        userDTO: {},
        // 弹窗model1
        models1: {
          disjunctor: false,
        },
      };
    },
    computed: {
      listComputed() {
        if(this.keyword){
          return this.list.filter( v => v.patientName.includes(this.keyword) || v.residenceNo.includes(this.keyword))
        }else{
          return this.list;
        }
      }
    },
    methods:{
      doSearch(){
        // 扫码
        if (!this.SMFlag) {
          return;
        }
        this.SMFlag = false;
        SM().then((content) => {
          this.keyword = content;
        }).catch(err => {
          this.SMFlag = true;
        });
      },
      submit(){
        let patientList = this.listComputed.filter(v => v.checked);
        if(!patientList.length){
          uni.showToast({
            icon: "none",
            title: "请选择患者！",
          });
          return;
        }
        this.models1 = {
          disjunctor: true,
          content: `您确认将<b style='color:red'>${patientList.map(v => v.patientName).join('、')}</b>相关陪检任务转交给<b style='color:red'>${this.userDTO.name}</b>吗`,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      // 确定
      ok1() {
        this.models1.disjunctor = false;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/patient/patientHandover", {
          id: this.userDTO.id,
          patientCodes: this.listComputed.filter(v => v.checked).map(v => v.patientCode).toString(),
        }).then((result) => {
          uni.hideLoading();
          if (result.state == 200) {
            uni.showToast({
              icon: "none",
              mask: true,
              title: "交接成功！",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/receiptpage/receiptpage`,
              });
            },300)
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      // 取消
      cancel1() {
        this.models1.disjunctor = false;
      },
      toTransferWorkOrderUser() {
        uni.redirectTo({
          url: `/pages/transferWorkOrder/transferWorkOrderUser`,
        });
      },
      selectItem(patient){
        this.list.forEach(v => {
          if(v.id === patient.id){
            v.checked ? this.$set(v, 'checked', false) : this.$set(v, 'checked', true)
          }
        })
      },
      getList(keyword, isInit = false){
        uni.showLoading({
          title: "加载中",
        });
        post("/nurse/patientInspect/getUserOrderPatient", {}).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            let list = result.list || [];
            if(isInit && this.options.selectPatientId){
              list.forEach(v => {
                if(v.id == this.options.selectPatientId){
                  v.checked = true;
                }
              })
            }
            this.list = list;
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>
.transferWorkOrder{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
    border-color: #49B856!important;
  }
  .green{
    color: #49B856;
    font-size: 24rpx;
  }
  .search{
    padding: 10rpx 24rpx;
  }
  .list{
    flex: 1;
    min-height: 0;
    background-color: #fff;
    .item{
      height: 100rpx;
      line-height: 100rpx;
      font-size: 26rpx;
      border-bottom: 1rpx solid #D5D5D5;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.tac{
        justify-content: center;
      }
    }
  }
  .footer{
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    line-height: 80rpx;
    height: 80rpx;
    background: #fff;
    display: flex;
    align-items: center;
    .btn {
      height: 80rpx;
      flex: 1;
      margin: 0 24rpx 0 0;
      background-color: #49B856;
      color: #fff;
      border-radius: 8rpx;
      font-size: 34rpx;
      text-align: center;
      &:first-of-type{
        margin-left: 24rpx;
      }
      &.gray{
        background-color: #8F939C;
      }
    }
  }
}

</style>