feat: code form item封装

.vscode/settings.json

@@ -1,16 +1,26 @@
 {
   "cSpell.words": [
+    "CZYSDC",
+    "datetime",
     "dcloudio",
+    "DDJZ",
     "easyinput",
+    "FBSJ",
     "FILESYSTEMS",
     "idcard",
+    "JBXX",
     "localdata",
+    "LYFS",
     "NIHSS",
     "nvue",
     "plusempty",
+    "SFXHCZ",
+    "SFYNCZ",
     "splashscreen",
+    "TZCZYS",
     "uniui",
     "uview",
-    "vueuse"
+    "vueuse",
+    "ZHZC"
   ]
 }

components/CodeFormItem/CodeFormItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <view>
+    <uni-easyinput :value="value" type="text" placeholder="请输入" @input="$emit('on-change', $event)" v-if="config.type === 'input'" />
+
+    <uni-datetime-picker type="datetime" :value="value" @change="$emit('on-change', $event)" v-else-if="config.type === 'datetime'" />
+
+    <uni-data-checkbox :value="value" :localdata="config.range" @change="$emit('on-change', $event.detail.value)" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { CODE_DICT } from '@/config/code'
+import { computed } from 'vue'
+
+interface IConfig {
+  text: string
+  type: string
+  default: string
+  range?: { value: string, text: string }[]
+  showType?: {
+    type: string
+    code: string
+    value: string
+  }
+}
+interface IProps {
+  code: string
+  value: string
+}
+
+const props = defineProps<IProps>()
+defineEmits(['on-change'])
+
+const config = computed<IConfig>(() => CODE_DICT[props.code])
+</script>
+
+<style lang="scss" scoped>
+</style>

components/DetailBase/DetailBase.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="">
     <uni-section type="line" title="患者基本信息" titleFontSize="16px"> </uni-section>
-    <uni-forms :modelValue="baseInfo" :label-width="100" class="white uni-radius-lg uni-pa-10">
+    <uni-forms :modelValue="baseInfo" :label-width="160" class="white uni-radius-lg uni-pa-10">
       <uni-forms-item label="扫描身份证" name="" @click="onScan">
         <view class="flex full-height justify-end">
           <uni-icons type="scan" color="#70798C" size="24" />
@@ -20,42 +20,16 @@
         <uni-easyinput type="idcard" v-model="baseInfo.patientIdCardNo" placeholder="请输入身份证号" />
       </uni-forms-item>
 
-      <uni-forms-item name="patientGender" label="发病时间">
-        <uni-data-checkbox v-model="baseInfo.patientGender" :localdata="GENDER_LIST" />
-      </uni-forms-item>
-      <!-- 发病时间已知显示 -->
-      <uni-forms-item name="patientGender" label="发病时间">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
-      <!-- 发病时间 => 醒后卒中 显示 -->
-      <uni-forms-item name="patientGender" label="最后正常时间">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
-
-      <uni-forms-item name="patientGender" label="是否院内卒中">
-        <uni-data-checkbox v-model="baseInfo.patientGender" :localdata="GENDER_LIST" />
-      </uni-forms-item>
-      <uni-forms-item name="patientGender" label="到达急诊时间">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
-      <uni-forms-item name="patientGender" label="通知卒中医生时间">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
-      <uni-forms-item name="patientGender" label="卒中到场时间">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
-      <uni-forms-item name="patientGender" label="来院方式">
-        <uni-datetime-picker type="datetime" :value="single" @change="change" />
-      </uni-forms-item>
+      <template v-for="(item, key) in codeForm" :key="key">
+        <uni-forms-item :name="key" :label="CODE_DICT[key].text" v-if="computeShow(key)">
+          <CodeFormItem :code="key" :value="item" :show="computeShow(key)" @on-change="onChange(key, $event)" />
+        </uni-forms-item>
+      </template>
     </uni-forms>
 
     <uni-section type="line" title="疑似诊断" titleFontSize="16px"> </uni-section>
     <uni-data-checkbox mode="list" v-model="baseInfo.firstAidZlType" :localdata="FIRST_AID_ZL_TYPE" class="white uni-radius-lg uni-pa-6">
     </uni-data-checkbox>
-
-    <view class="flex uni-px-6 uni-py-10">
-      <u-button @click="onSubmit" shape="circle" type="primary" class="bg-main" size="medium">完成创建患者</u-button>
-    </view>
   </view>
 </template>
 
@@ -64,6 +38,7 @@ import { reactive, ref } from 'vue';
 import { useUserStore } from '@/store/modules/user'
 import { GENDER_LIST, FIRST_AID_ZL_TYPE } from '@/config/service'
 import { computed } from 'vue';
+import { CODE_DICT } from '@/config/code';
 
 const baseInfo = reactive({
   patientName: '张三',
@@ -72,6 +47,18 @@ const baseInfo = reactive({
   patientIdCardNo: '142222188901120112',
   firstAidZlType: 0
 })
+
+const codeForm = reactive({
+  'JBXX-SFXHCZ': '已知',
+  'JBXX-FBSJ': '',
+  'JBXX-ZHZC-TIME': '',
+  'JBXX-SFYNCZ': '是',
+  'JBXX-DDJZ-TIME': '',
+  'JBXX-TZCZYS-TIME': '',
+  'JBXX-CZYSDC-TIME': '',
+  'JBXX-LYFS': ''
+})
+
 const nationList = ref([])
 
 const userStore = useUserStore()
@@ -137,6 +124,18 @@ function upload(tempPath: string) {
   });
 }
 
+// code form item change
+function onChange(code: string, value: string) {
+  codeForm[code] = value
+}
+
+// 计算code form 前置条件的显示
+function computeShow(code: string) {
+  const { showType } = CODE_DICT[code]
+  if (!showType) return true
+  return (showType.type === 'value' && codeForm[showType.code] === showType.value)
+}
+
 // 查民族列表
 async function getNationList() {
   try {

config/code.ts

@@ -0,0 +1,74 @@
+export const CODE_DICT = {
+  'JBXX-SFXHCZ': {
+    // 是否醒后卒中
+    text: '发病时间',
+    type: 'radio',
+    default: '已知',
+    range: [
+      { value: '已知', text: '已知' },
+      { value: '未知', text: '未知' },
+      { value: '醒后卒中', text: '醒后卒中' },
+    ],
+  },
+  'JBXX-FBSJ': {
+    text: '发病时间',
+    type: 'datetime',
+    default: '',
+    valueType: 'string',
+    showType: {
+      type: 'value',
+      code: 'JBXX-SFXHCZ',
+      value: '已知',
+    },
+  },
+  'JBXX-ZHZC-TIME': {
+    text: '最后正常时间',
+    type: 'datetime',
+    default: '',
+    valueType: 'string',
+    showType: {
+      type: 'value',
+      code: 'JBXX-SFXHCZ',
+      value: '醒后卒中',
+    },
+  },
+  'JBXX-SFYNCZ': {
+    text: '是否院内卒中',
+    type: 'radio',
+    range: [
+      { value: '是', text: '是' },
+      { value: '否', text: '否' },
+    ],
+    default: '是',
+  },
+  'JBXX-DDJZ-TIME': {
+    text: '到达急诊时间',
+    type: 'datetime',
+    default: '',
+    valueType: 'string',
+  },
+  'JBXX-TZCZYS-TIME': {
+    text: '通知卒中医生时间',
+    type: 'datetime',
+    default: '',
+    valueType: 'string',
+  },
+  'JBXX-CZYSDC-TIME': {
+    text: '卒中到场时间',
+    type: 'datetime',
+    default: '',
+    valueType: 'string',
+  },
+  'JBXX-LYFS': {
+    text: '来院方式',
+    type: 'select',
+    range: [
+      { value: '120', text: '120' },
+      { value: '自行住院', text: '自行住院' },
+      { value: '院内住院患者', text: '院内住院患者' },
+      { value: '院内公共区域患者', text: '院内公共区域患者' },
+      { value: '医疗机构转入', text: '医疗机构转入' },
+    ],
+    default: '',
+  },
+}