qcp-pad/components/JMRS/JMRS.vue

<template>
  <view>
    <uni-forms-item v-for="key in CODE_LIST_1" :key="key" :label="CODE_DICT[key].text" :name="key">
      <CodeFormItem :code="key" :value="codeAidForm[key]" @on-change="onChange(key, $event)" @on-click="onClickCodeItem" />
    </uni-forms-item>

    <!-- 溶栓开始前 -->
    <uni-collapse ref="collapse">
      <uni-collapse-item :border="false" :open="true">
        <template v-slot:title><text class="uni-main-color">溶栓开始前</text></template>
        <view class="u-p-l-30 u-p-t-20">
          <uni-forms-item v-for="key in CODE_LIST_2" :key="key" :name="key">
            <template v-slot:label>
              <view class="full-height flex" style="width: 135px">
                <!-- @ts-ignore -->
                {{ CODE_DICT[key]?.text }} <text v-if="CODE_DICT[key].description"
                      class="uni-secondary-color">{{ CODE_DICT[key].description }}</text>
              </view>
            </template>
            <CodeFormItem :code="key" :value="codeAidForm[key]" @on-change="onChange(key, $event)" />
          </uni-forms-item>
        </view>
      </uni-collapse-item>
    </uni-collapse>

    <template v-for="key in CODE_LIST_3" :key="key" :name="key">
      <uni-forms-item v-if="computeShow(key, codeAidForm)">
        <template v-slot:label>
          <view class="full-height flex" style="width: 135px">
            <!-- @ts-ignore -->
            {{ CODE_DICT[key]?.text }} <text v-if="CODE_DICT[key].description"
                  class="uni-secondary-color">{{ CODE_DICT[key].description }}</text>
          </view>
        </template>
        <CodeFormItem :code="key" :value="codeAidForm[key]" @on-change="onChange(key, $event)" />
      </uni-forms-item>
    </template>

    <uni-popup ref="popupRef" type="center">
      <view class="modal-wrap">
        <view class="tab-wrap">
          <view class="tab-item" :class="{ active: showType === 'sign' }" @click="showType = 'sign'">家属签名</view>
          <view class="tab-item" :class="{ active: showType === 'tool' }" @click="showType = 'tool'">辅助工具</view>
        </view>

        <!-- 辅助工具 -->
        <Tool v-if="showType === 'tool'" />
        <!-- 家属签名 -->
        <Sign v-else @on-close="popupRef.close()" />
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { CODE_DICT } from '@/config/code';
import { computed, reactive, ref } from 'vue';
import { computeShow } from '@/utils/common'
import { useServiceStore } from '@/store/modules/service';

const emits = defineEmits(['on-change'])

const serviceStore = useServiceStore()

const popupRef = ref()
const showType = ref('tool') // tool 辅助工具 sign -> 签名
const currentPatient = computed(() => serviceStore.currentPatient)


const CODE_LIST_1 = ['JMRS-TOOL', 'JMRS-TH-TIME', 'JMRS-SIGN']
// 溶栓前form item list
const CODE_LIST_2 = ['JMRS-Q-NIHSS', 'JMRS-Q-SYSTOLIC-PRESSURE', 'JMRS-Q-DIASTOLIC-PRESSURE']

const CODE_LIST_3 = ['JMRS-RSCS', 'JMRS-TIME', 'JMRS-RSYW-ZL', 'JMRS-RSYW-ZL-ELSE', 'JMRS-TZJL', 'JMRS-JDJL', 'JMRS-GYSD', 'JMRS-15-NIHSS', 'JMRS-30-NIHSS', 'JMRS-45-NIHSS', 'JMRS-60-NIHSS', 'JMRS-H-NIHSS', 'JMRS-BFZ']

const codeAidForm = reactive({
  'JMRS-TOOL': '去查看',
  'JMRS-TH-TIME': '',
  'JMRS-SIGN': '去签署',
  'JMRS-Q-NIHSS': '',
  'JMRS-Q-SYSTOLIC-PRESSURE': '',
  'JMRS-Q-DIASTOLIC-PRESSURE': '',
  'JMRS-RSCS': '', 'JMRS-TIME': '', 'JMRS-RSYW-ZL': '', 'JMRS-RSYW-ZL-ELSE': '', 'JMRS-TZJL': '', 'JMRS-JDJL': '', 'JMRS-GYSD': '', 'JMRS-15-NIHSS': '', 'JMRS-30-NIHSS': '', 'JMRS-45-NIHSS': '', 'JMRS-60-NIHSS': '', 'JMRS-H-NIHSS': '', 'JMRS-BFZ': ['']
})

function onChange(key, event) {
  codeAidForm[key] = event
  emits('on-change', key, event)
}

// 点击辅助工具
function onClickCodeItem(code: string) {
  console.log(code);
  if (code === 'JMRS-TOOL') {
    showType.value = 'tool'
    popupRef.value.open()
  } else if (code === 'JMRS-SIGN') {
    showType.value = 'sign'
    popupRef.value.open()
  }

}

function init() {

  // 同步store里的急救信息
  if (!currentPatient.value) return
  // 同步code信息
  const { recordValDict } = currentPatient.value
  if (!recordValDict) return

  for (const key in codeAidForm) {
    if (!recordValDict[key]) continue
    if (CODE_DICT[key].type === 'checkbox') {
      codeAidForm[key] = recordValDict[key][0]?.answer || ['']
    } else {
      codeAidForm[key] = recordValDict[key][0]?.answer[0] || ['']
    }
  }
}


init()
</script>

<style lang="scss" scoped>
.modal-wrap {
  width: 800px;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;

  .tab-wrap {
    display: flex;
    align-items: center;
    height: 5vw;
    justify-content: stretch;

    .tab-item {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ccc;

      &.active {
        background-color: #fff;
      }

    }
  }
}
</style>