zy-wechat/pages/outpatient/outpatientEndTaskType/outpatientEndTaskType.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">
        <image mode="widthFix" class="icon_service" src="../../../static/img/icon_service.png"></image>
        <view class="text1"> 追加服务 </view>
      </view>
      <view class="Scanning_top_text">
        您已完成<strong class="red">{{taskNames}}</strong>，请继续完成以下追加服务 
      </view>
    </view>

    <view class="Scanning_cont">
      <view class="Scanning_cont_list">
        <scroll-view scroll-y="true" class="Scanning_cont_list_scroll">
          <checkbox-group @change="checkboxChange">
            <label class="Scanning_cont_list_item" v-for="item in addServiceTasks" :key="item.id">
              <view class="name">
                {{item.taskName}}
              </view>
              <view class="value">
                <checkbox :value="item.id" :checked="item.checked" />
              </view>
            </label>
          </checkbox-group>
        </scroll-view>
      </view>
    </view>

    <view class="foot_btn">
      <view class="btn" @click="ok()" v-if="addServiceTasksComputed.length"> 确认追加 </view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../../http/http.js";
  export default {
    data() {
      return {
        taskNames: '',
        infoData: {},
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        queryObj: {}, //路由传递过来的数据
        orderList: [],
        taskTypeConfig: {},
        addServiceTasks: [],
      };
    },
    computed: {
      addServiceTasksComputed(){
        return this.addServiceTasks.filter(v => v.checked);
      }
    },
    methods: {
      // 追加服务
      ok(){
        console.log(this.addServiceTasks);
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        let postData = {workOrders: []};
        this.addServiceTasks.filter(v => v.checked).forEach(v => {
          postData.workOrders.push({
              "sourceId": 4,
              "taskType": {
                  "id": v.id
              },
              "patient": {
                  "patientCode": this.infoData.patientCode
              },
              "isRemand": 0,
              "isAccompany": 0
          });
        })
        post("/api/startOrder", postData).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            uni.navigateTo({
              url: `/pages/outpatient/outpatientEndTaskTypeSuccess/outpatientEndTaskTypeSuccess?model=${encodeURIComponent(JSON.stringify(result))}`,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      checkboxChange: function (e) {
        let items = this.addServiceTasks,
          values = e.detail.value;
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
          const item = items[i]
          if(values.includes(item.id)){
            this.$set(item,'checked',true)
          }else{
            this.$set(item,'checked',false)
          }
        }
        console.log(e, this.addServiceTasks);
      },
      // 获取检查页面控制
      getTaskTypeConfig(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/simple/data/fetchDataList/taskTypeConfig", {
            "idx": 0,
            "sum": 10,
            "taskTypeConfig": {
                "taskTypeDTO": {
                    "hosId": {
                        "id": this.hosId
                    },
                    "associationType": {
                        "key": "association_types",
                        "value": "inspect"
                    }
                }
            }
        }).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            let configs = result.list || [];
            if(configs.length){
              this.taskTypeConfig = configs[0];
              this.addServiceTasks = this.taskTypeConfig.addServiceTasks || [];
            }else{
              this.taskTypeConfig = {};
              this.addServiceTasks = [];
            }
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      if(options.model){
        this.infoData = JSON.parse(options.model);
        this.orderList = this.infoData.orderList || [];
        this.taskNames = this.infoData.taskNames;
        console.log(this.infoData);
      }
      this.getTaskTypeConfig();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /deep/ uni-checkbox .uni-checkbox-input{
      color: #35b34a!important;
      width: 30rpx!important;
      height: 30rpx!important;
    }
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .icon_service{
          width: 115rpx;
        }

        .cubeic-ok {
          font-size: 140rpx;
          color: #35b34a;
        }

        .text1 {
          margin-top: 30rpx;
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .Scanning_top_text{
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        padding: 8rpx 0 23rpx 0;
      }
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      margin: 0 45rpx;

      .Scanning_cont_head{
        flex-shrink: 0;
        height: 78rpx;
        display: flex;
        border-top: 1rpx solid #EEEEEE;
        border-bottom: 1rpx solid #EEEEEE;
        .Scanning_cont_head_item{
          flex: 1;
          font-size: 32rpx;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &.active{
            color: #49B856;
            &::before{
              content: '';
              width: 70rpx;
              height: 10rpx;
              background-color: #49B856;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translateX(-50%);
              border-radius: 6rpx;
            }
          }
          &::after{
            content: '';
            width: 2rpx;
            height: 44rpx;
            background-color: #D1D1D1;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:last-of-type::after{
            opacity: 0;
          }
        }
      }

      .Scanning_cont_list{
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        .Scanning_cont_list_scroll{
          flex: 1;
          min-height: 0;
          border: 1rpx solid #E9E9E9;
        }
        .Scanning_cont_list_item{
          height: 63rpx;
          display: flex;
          align-items: center;
          font-size: 30rpx;
          border-bottom: 2rpx dashed #D3D3D3;
          border-top: none;
          margin: 0 18rpx;
          &:last-of-type{
            border-bottom: 1rpx dashed #E9E9E9;
          }
          &.Scanning_cont_list_head{
            font-weight: bold;
            font-size: 28rpx;
            border-top: 1rpx solid #272727;
            flex-shrink: 0;
          }
          .name,
          .value{
            display: flex;
            align-items: center;
            height: 100%;
            font-weight: bold;
            line-height: 1;
          }
          .name{
            flex: 1;
          }
          .value {
            justify-content: flex-end;
          }
        }
      }
    }

    .foot_btn {
      margin: 30rpx;
      flex-shrink: 0;
      line-height: 88rpx;
      display: flex;
      justify-content: center;

      .btn {
        height: 88rpx;
        flex: 1;
        margin-right: 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        &:last-of-type{
          margin-right: 0;
        }
      }
    }
  }
</style>