zy-pda/pages/quickCreateOrder/quickCreateOrder.vue

<template>
  <view class="quickCreateOrder">
    <view class="qco_msg" v-html="dataObj.msg"></view>
    <!-- 起点科室,终点科室 -->
    <block v-if="qucikCreateOrderType === 'other' && (dataObj.start || dataObj.end)">
      <!-- 返回值的departmentStrategy是201 则是默认发起科室 -->
      <!-- 返回值的departmentStrategy是202 则是固定科室范围 -->
      <!-- 返回值的departmentStrategy是203 则是固定科室 -->
      <!-- 返回值的departmentStrategy是204 则是自主填写 -->
      <!-- 返回值的departmentStrategy是205 则是固定科室类型 -->
      <!-- 100013 （护士端一键建单展示策略）取起点科室，和msg值展示 -->
      <!-- <block v-if="dataObj.status == 100013"> -->
      <view class="select_block">
        <text class="select_label"
          :class="{disableColor:(dataObj.start.start.departmentStrategy == 201 ||dataObj.start.start.departmentStrategy == 203)}">起点科室</text>
        <view class="select_placeholder"
          v-if="dataObj.start.start.departmentStrategy == 201||dataObj.start.start.departmentStrategy == 203">
          {{deptDisplay == 1?dataObj.start.start.list[0].dept:dataObj.start.start.list[0].deptalias}}
        </view>
        <view class="select_placeholder" v-else>请选择起点科室<text class="pda pda-xiangyou"></text></view>
      </view>
      <view class="select_block">
        <text class="select_label"
          :class="{disableColor:(dataObj.end.end.departmentStrategy == 201||dataObj.end.end.departmentStrategy == 203)}">终点科室</text>
        <view class="select_placeholder"
          v-if="(dataObj.end.end.departmentStrategy == 201||dataObj.end.end.departmentStrategy == 203)">
          {{deptDisplay == 1?dataObj.end.end.list[0].dept:dataObj.end.end.list[0].deptalias}}
        </view>
        <view class="select_placeholder" v-else>请选择终点科室<text class="pda pda-xiangyou"></text></view>
      </view>
      <!-- </block> -->
    </block>
    <!-- 备注 -->
    <view class="remarks" v-if="dataObj.remarksSwitch == 1">
      <textarea :focus="remarksFocus" class="remarks_textarea" auto-height :maxlength="100"
        placeholder-style="color:#999" :placeholder="dataObj.remarksPrompts|| '请填写工单备注,不超过100个字符'"
        v-model="workOrderRemark" />
    </view>
    <!-- 快捷输入,历史输入 -->
    <view class="quickAndHistory" v-if="dataObj.remarksSwitch == 1 && dataObj.customRemarks.length">
      <view class="quickAndHistory_header">
        快捷输入
      </view>
      <view class="quickAndHistory_container">
        <view class="quickAndHistory_item" @click="addRemarks(customRemark)"
          v-for="(customRemark,i) in dataObj.customRemarks" :key="i">
          {{customRemark}}
        </view>
      </view>
    </view>
    <view class="quickAndHistory" v-if="dataObj.remarksSwitch == 1 && historyCustomRemarks.length">
      <view class="quickAndHistory_header">
        历史输入
      </view>
      <view class="quickAndHistory_container">
        <view class="quickAndHistory_item" @click="addRemarks(historyCustomRemark)"
          v-for="(historyCustomRemark,i) in historyCustomRemarks" :key="i">
          {{historyCustomRemark}}
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    reqBuildTrip,
    reqRecentRemarks,
    reqBuildOrder
  } from '../../request/api.js';
  import {
    SOURCEID
  } from '../../utils/enum.sourceid.js';
  export default {
    data() {
      return {
        // 工单备注是否获取焦点
        remarksFocus: true,
        // 工单备注
        workOrderRemark: '',
        // 获取到的数据集合对象(历史输入除外)
        dataObj: {},
        // 历史输入
        historyCustomRemarks: [],
        //底部按钮
        btns: [{
            name: '回到首页',
            type: 'default',
            click: () => {
              uni.navigateTo({
                url: '/pages/index/index'
              })
            }
          },
          {
            name: '确认',
            type: 'primary',
            click: () => {
              this.submitData();
            }
          }
        ]
      };
    },
    computed: {
      ...mapState(['qucikCreateOrderType', 'qucikCreateOrderTypeId', 'deptDisplay']),
      ...mapState('user', ['loginInfoUserDeptId']),
    },
    methods: {
      // 添加备注
      addRemarks(customRemark) {
        this.remarksFocus = false;
        this.$nextTick(() => {
          this.remarksFocus = true;
        });
        this.workOrderRemark += customRemark;
      },
      //获取所有数据
      getData(qucikCreateOrderType, qucikCreateOrderTypeId) {
        uni.showLoading({
          title: '加载中'
        });
        let postData1 = {};
        let postData2 = {
          "taskTypeId": qucikCreateOrderTypeId,
          "deptId": this.loginInfoUserDeptId,
        };
        if (qucikCreateOrderType === 'specimen') {
          //标本快捷建单
          postData1 = {
            "taskTypeId": qucikCreateOrderTypeId,
            "deptId": this.loginInfoUserDeptId,
          };
        } else if (qucikCreateOrderType === 'other') {
          //其他临床服务快捷建单
          postData1 = {
            "taskTypeId": qucikCreateOrderTypeId,
          };
        }
        Promise.all([
          reqBuildTrip(postData1),
          reqRecentRemarks(postData2)
        ]).then(values => {
          uni.hideLoading();
          this.getBuildTrip(values[0]);
          this.getRecentRemarks(values[1]);
        })
      },
      // 获取数据(除历史输入)
      getBuildTrip(res) {
        if (res.status == 200 || res.status == 100012 || res.status == 100013 || res.status == 100014 || res.status ==
          100015) {
          // 处理返回的数据
          if (res.customRemarks) {
            res.customRemarks = res.customRemarks.split('$');
          } else {
            res.customRemarks = []
          }
          // 处理msg
          if (res.msg.includes('<b>')) {
            res.msg = res.msg.replace(/<b>/g, '<text class="green">');
            res.msg = res.msg.replace(/<\/b>/g, '</text>');
          }
          this.dataObj = res;
        }
      },
      // 获取历史输入
      getRecentRemarks(res) {
        if (res.state == 200) {
          this.historyCustomRemarks = res.data || [];
        }
      },
      // 提交数据,建单
      submitData() {
        let postData = {};
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        if (this.qucikCreateOrderType === 'specimen') {
          //标本建单
          postData = {
            urgent: 0,
            workOrder: {
              sourceId: SOURCEID['护士端'],
              workOrderRemark: this.workOrderRemark,
              taskType: {
                id: this.qucikCreateOrderTypeId
              },
              createDept: this.loginInfoUserDeptId,
              startDept: {
                id: this.loginInfoUserDeptId
              },
            },
          };
        } else if (this.qucikCreateOrderType === 'other') {
          let startDept = {}; //起点科室
          let endDepts = []; //终点科室
          // 其他服务建单
          // 起点科室---- start
          if (this.dataObj.start.start.departmentStrategy == 201) {
            startDept = {
              id: this.dataObj.start.start.list[0].id
            };
          }
          // 起点科室---- end
          // 终点科室---- start
          if (this.dataObj.start.start.departmentStrategy == 201) {
            endDepts = [{
              id: this.dataObj.end.end.list[0].id
            }];
          }
          // 终点科室---- end
          //请求参数
          postData = {
            workOrder: {
              sourceId: SOURCEID['护士端'],
              workOrderRemark: this.workOrderRemark,
              taskType: {
                id: this.qucikCreateOrderTypeId
              },
              createDept: this.loginInfoUserDeptId,
              startDept,
              endDepts,
            },
          };
        }

        reqBuildOrder(postData).then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            this.$refs.seiminModel.showChangeDept({
              skin: "toast",
              content: '创建成功',
              btns: [{
                name: "知道了",
                textColor: "#49B856",
                flex: 1,
                click() {
                  uni.navigateTo({
                    url: '/pages/index/index'
                  })
                }
              }]
            });
          } else {
            this.$refs.seiminModel.showChangeDept({
              skin: "toast",
              icon: 'error',
              content: res.msg || '操作失败'
            });
          }
        })
      }
    },
    onLoad() {
      console.log(this.qucikCreateOrderType, this.qucikCreateOrderTypeId);
      this.getData(this.qucikCreateOrderType, this.qucikCreateOrderTypeId);
    }
  }
</script>

<style lang="scss" scoped>
  .quickCreateOrder {
    margin-bottom: 100rpx;

    .qco_msg {
      min-height: 144rpx;
      padding: 32rpx 160rpx;
      color: #999;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
    }

    // 起点科室,终点科室
    .select_block {
      padding: 0 30rpx;
      height: 88rpx;
      font-size: 34rpx;
      border-top: 1px solid #E5E5E5;
      background-color: #fff;
      @include flex(space-between, center);

      .select_label {
        color: #000;

        &.disableColor {
          color: #999;
        }
      }

      .select_placeholder {
        color: #888;
        @include flex(flex-start, center);

        .pda-xiangyou {
          font-size: 24rpx;
          margin-left: 30rpx;
        }
      }
    }

    // 备注
    .remarks {
      min-height: 150rpx;
      background-color: #fff;
      border-top: 1px solid #E5E5E5;
      border-bottom: 1px solid #E5E5E5;
      padding: 22rpx 25rpx;

      .remarks_textarea {
        width: 100%;
        min-height: 100rpx;
      }
    }

    // 快捷输入,历史输入
    .quickAndHistory {
      padding: 43rpx 25rpx 0;

      .quickAndHistory_header {
        font-weight: bold;
        font-size: 34rpx;
        padding-bottom: 24rpx;
        color: #333;
      }

      .quickAndHistory_container {
        @include flex;
        flex-wrap: wrap;

        .quickAndHistory_item {
          height: 66rpx;
          font-size: 28rpx;
          border-radius: 33rpx;
          background-color: #fff;
          line-height: 66rpx;
          padding: 0 24rpx;
          color: #666;
          margin-bottom: 11rpx;
          margin-right: 24rpx;
          @include clamp;
        }
      }
    }
  }
</style>