zy-pda/pages/appointmentInspect/appointmentInspect.vue

<template>
  <view class="appointmentInspect">
    <view class="qco_msg" v-html="patientMsg"></view>
    <view class="select_block_wrap">
      <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">
              <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
  } from "vuex";
  import {
    ASSOCIATION_TYPES
  } from "../../utils/enum.association_types.js";
  export default {
    data() {
      return {
        ASSOCIATION_TYPES,
        // 检查列表
        inspects: [],
        // 是否加急
        isUrgent: false,
        // 设备
        goods: [],
        //患者建单信息展示
        patientMsg: '',
        // 传递过来的参数
        queryParams: {},
        //底部按钮
        btns: [{
          name: "上一步",
          type: "primary",
          click: () => {
            uni.navigateBack();
          },
        }, {
          name: "下一步",
          type: "primary",
          click: () => {
            uni.navigateTo({
              url: '/pages/patientBuild/patientBuild'
            })
          },
        }, ],
      };
    },
    computed: {
      ...mapState('login', ['loginInfo']),
      ...mapState('other', [
        "deptDisplay",
        'patientBuildTrip',
        'selectedPatient'
      ]),
    },
    methods: {
      // 切换是否加急
      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)
          }
        }
      },
      // 立即建单
      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.patientMsg = `以下是患者<b class="green">${this.selectedPatient.patientName}</b>当天预约的检查，请选择本次服务的检查项`;
      let inspects = this.patientBuildTrip.data || [];
      inspects.map(v => {
        v.label = v.inspectName;
        v.value = v.id.toString();
      });
      this.inspects = 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;
      height: 144rpx;
      padding: 32rpx;
      color: #999;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
    }

    .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);

        .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;
            @include flex(space-between, center);

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