zy-pda/pages/quickCreateOrder/quickCreateOrder.vue

<template>
  <view class="quickCreateOrder">
    <view class="qco_msg" v-html="dataObj.msg"></view>
    <!-- 起点科室,终点科室 -->
    <block v-if="qucikCreateOrderType === 'other'">
      <view class="select_block">
        <text class="select_label">起点科室</text>
        <view class="select_placeholder">请选择起点科室<text class="pda pda-xiangyou"></text></view>
      </view>
      <view class="select_block">
        <text class="select_label">终点科室</text>
        <view class="select_placeholder">请选择终点科室<text class="pda pda-xiangyou"></text></view>
      </view>
    </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">
      <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']),
      ...mapState('user', ['loginInfoUserDeptId']),
    },
    methods: {
      // 添加备注
      addRemarks(customRemark) {
        this.remarksFocus = false;
        this.$nextTick(() => {
          this.remarksFocus = true;
        });
        this.workOrderRemark += customRemark;
      },
      //获取所有数据
      getData(qucikCreateOrderType, qucikCreateOrderTypeId) {
        uni.showLoading({
          title: '加载中'
        });
        let postData = {
          "taskTypeId": qucikCreateOrderTypeId,
          "deptId": this.loginInfoUserDeptId,
        };
        if (qucikCreateOrderType === 'specimen') {
          Promise.all([
            reqBuildTrip(postData),
            reqRecentRemarks(postData)
          ]).then(values => {
            uni.hideLoading();
            this.getBuildTrip(values[0]);
            this.getRecentRemarks(values[1]);
          })
        }
      },
      // 获取其他数据
      getBuildTrip(res) {
        if (res.status == 200) {
          // 处理返回的数据
          if (res.customRemarks) {
            res.customRemarks = res.customRemarks.split('$');
          } else {
            res.customRemarks = []
          }
          this.dataObj = res;
        }
      },
      // 获取历史输入
      getRecentRemarks(res) {
        if (res.state == 200) {
          this.historyCustomRemarks = res.data || [];
        }
      },
      // 提交数据,建单
      submitData() {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        let postData = {
          urgent: 0,
          workOrder: {
            sourceId: SOURCEID['护士端'],
            workOrderRemark: this.workOrderRemark,
            taskType: {
              id: this.qucikCreateOrderTypeId
            },
            createDept: this.loginInfoUserDeptId,
            startDept: {
              id: this.loginInfoUserDeptId
            },
          },
        };
        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() {
      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;

      b {
        color: $defaultColor;
        font-weight: normal;
      }
    }

    // 起点科室,终点科室
    .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;
      }

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