zy-pda/pages/appointmentInspect/appointmentInspect.vue

<template>
  <view class="appointmentInspect">
    <view class="qco_msg" id="qco_msg">
      <view class="qco_msg1" v-html="patientMsg"></view>
      <view class="qco_msg2 red" v-if="isMoreDept">您选择的检查包含了多个科室，请您只包含一个科室</view>
    </view>
    <view class="select_block_wrap" :style="{mariginTop:qcoHeight+'px'}">
      <view class="uni-list">
        <checkbox-group @change="checkboxChange">
          <scroll-view scroll-y class="scrollHeight">
            <label class="inspect_listItem" v-for="inspect in inspects" :key="inspect.value">
              <image class="ji" src="../../static/imgs/icon_ji.png" mode="widthFix" v-if="inspect.priority == 1">
              </image>
              <view class="inspect_listItem_header">
                <view class="inspect_listItem_header_title">
                  <checkbox color="#09BB07" :value="inspect.value" :checked="inspect.checked" />
                  <view class="inspectInfo">
                    <text class="info">
                      <text v-if="inspect.yyTime">{{inspect.yyTime|formatDate('MM-dd HH:mm')}}</text>
                      <text class="dept" v-if="inspect.execDept">
                        {{deptDisplay == 2?inspect.execDept.deptalias:inspect.execDept.dept}}
                      </text>
                    </text>
                  </view>
                </view>
              </view>
              <view class="inspect_listItem_item">
                <view class="inspect_listItem_item_content">
                  <text class="inspect_listItem_item_name">进行 {{inspect.inspectName || "检查"}}</text>
                </view>
              </view>
            </label>
          </scroll-view>
        </checkbox-group>
      </view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import cloneDeep from 'lodash/cloneDeep';
  import {
    mapState,
    mapMutations
  } from "vuex";
  import {
    ASSOCIATION_TYPES
  } from "../../utils/enum.association_types.js";
  export default {
    data() {
      return {
        ASSOCIATION_TYPES,
        qcoHeight: 0,
        // 关联检查有多个科室，但是开关设置是不允许，是否展示提示文字
        isMoreDept: false,
        // 检查列表
        inspects: [],
        // 是否加急
        isUrgent: false,
        // 设备
        goods: [],
        //患者建单信息展示
        patientMsg: '',
        // 传递过来的参数
        queryParams: {},
        //底部按钮
        btns: [{
          name: "上一步",
          type: "primary",
          click: () => {
            uni.navigateBack();
          },
        }, ],
      };
    },
    computed: {
      ...mapState('login', ['loginInfo']),
      ...mapState('other', [
        "deptDisplay",
        'patientBuildTrip',
        'selectedPatient',
        'patientTaskType',
      ]),
    },
    methods: {
      ...mapMutations('other', ['changePatientBuildData']),
      // qco高度变化
      resizeQcoHeight() {
        // 选中的检查
        let data = this.inspects.filter(v => v.checked);
        // 关联检查有多个科室，但是开关设置是不允许，是否展示提示文字
        if (data.length && this.patientTaskType.isMoreDept === 0) {
          let arr = data.filter((item) => item.execDept).map((item) => item.execDept.id);
          arr = Array.from(new Set(arr));
          this.isMoreDept = arr.length > 1;
        } else {
          this.isMoreDept = false;
        }
        // qoc高度设置
        this.$nextTick(() => {
          uni.createSelectorQuery().in(this).select('#qco_msg').boundingClientRect(data => {
            this.qcoHeight = data.height;
            console.log(data)
          }).exec();
        })
        // 底部按钮展示
        if (data.length && !this.isMoreDept) {
          this.btns = [{
            name: "上一步",
            type: "primary",
            click: () => {
              uni.navigateBack();
            },
          }, {
            name: "下一步",
            type: "primary",
            click: () => {
              // 存储选中的检查
              this.changePatientBuildData({
                key: 'checks',
                value: this.inspects.filter(v => v.checked)
              });
              uni.navigateTo({
                url: '/pages/patientBuild/patientBuild'
              })
            },
          }, ]
        } else {
          this.btns = [{
            name: "上一步",
            type: "primary",
            click: () => {
              uni.navigateBack();
            },
          }, ]
        }
      },
      // 切换是否加急
      switchChange(e) {
        this.isUrgent = e.detail.value;
        this.urgentRemark = '';
      },
      // 选择检查
      checkboxChange: function(e) {
        console.log(e, this.inspects);
        var inspects = this.inspects,
          values = e.detail.value;
        for (var i = 0, lenI = inspects.length; i < lenI; ++i) {
          const item = inspects[i]
          if (values.includes(item.value)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
        this.resizeQcoHeight();
      },
      // 立即建单
      buildOrder() {
        console.log(this.urgentRemark)
        console.log(this.isUrgent)
        console.log(this.goods)
        // 加急原因非空
        if (this.isUrgent && !this.urgentRemark) {
          this.$refs.seiminModel.show({
            skin: 'toast',
            icon: 'warn',
            content: '请填写加急原因',
          })
          return;
        }
      }
    },
    onLoad(queryParams) {
      this.resizeQcoHeight();
      this.patientMsg = `以下是患者<b class="green">${this.selectedPatient.patientName}</b>当天预约的检查，请选择本次服务的检查项`;
      let inspects = this.patientBuildTrip.data ? cloneDeep(this.patientBuildTrip.data) : [];
      inspects.forEach(v => {
        v.label = v.inspectName;
        v.value = v.id.toString();
      });
      this.inspects = inspects
      console.log(this.inspects)
      this.queryParams = queryParams;
    },
  };
</script>

<style lang="scss" scoped>
  .appointmentInspect {
    padding-bottom: 108rpx;

    ::v-deep uni-checkbox .uni-checkbox-input {
      width: 40rpx;
      height: 40rpx;
    }

    ::v-deep .uni-checkbox-input-checked {
      background-color: #09BB07;

      &:before {
        color: #fff;
      }
    }

    ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
      border-color: #09BB07;
    }

    .qco_msg {
      background-color: #f9fafb;
      position: fixed;
      width: 100%;
      z-index: 99;
      padding: 32rpx 32rpx 0;
      color: #999;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
    }

    .qco_msg1 {
      padding-bottom: 16rpx;
    }

    .qco_msg2 {
      padding: 16rpx 0;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      @include border(top);
    }

    .select_block_wrap {
      padding: 144rpx 24rpx 0;

      .scrollHeight {
        height: 100%;
      }

      .inspect_listItem {
        width: 702rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        position: relative;
        padding: 0 24rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .ji {
          width: 60rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .inspect_listItem_header {
          height: 86rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .inspect_listItem_header_title {
            color: #333;
            flex: 1;
            @include flex(flex-start, center);

            .inspectInfo {
              flex: 1;
              @include flex;

              .info {
                color: #333;
                font-size: 36rpx;
                font-weight: bold;
                @include clamp;

                .dept {
                  margin-left: 8rpx;
                }
              }

              .workerName {
                flex: 1;
                @include clamp;
              }
            }
          }
        }

        .inspect_listItem_item {
          height: 88rpx;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include border(bottom);
          @include flex(flex-start, stretch, column);

          &:last-of-type {
            border-bottom: none;
          }

          .inspect_listItem_item_content {
            flex: 1;
            padding: 14rpx 0;
            @include flex(space-between, center);

            .inspect_listItem_item_name {
              color: #333;
              font-size: 36rpx;
              text-indent: 1.5em;
              @include clamp;
            }
          }
        }
      }
    }
  }
</style>