vue2-client 1.16.6 → 1.16.8

package/src/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue

@@ -64,7 +64,11 @@ export default {
           wrapperCol: { span: this.config.formItemLayout.wrapperCol }
         }
       }
-      return {}
+      // 如果是 horizontal 布局但未提供 formItemLayout，则提供一个默认值
+      return {
+        labelCol: { span: 6 }, // 默认标签宽度
+        wrapperCol: { span: 18 } // 默认控件宽度，确保输入框足够宽
+      }
     },
     ...mapState('account', { currUser: 'user' })
   },
@@ -111,7 +115,8 @@ export default {
           if (Array.isArray(result)) {
             fetchedOptions = result.map(opt => ({
               label: opt.label || opt.name || opt.text,
-              value: (opt.value || opt.id) + ''
+              value: (opt.value || opt.id) + '',
+              ...opt // 将所有原始属性也添加到选项中
             }))
           } else {
             console.warn(`Logic '${logicName}' did not return an array for options. Result:`, result)
@@ -122,7 +127,8 @@ export default {
           if (res && res.value && Array.isArray(res.value)) {
             fetchedOptions = res.value.map(opt => ({
               label: opt.label || opt.name || opt.text,
-              value: (opt.value || opt.id) + ''
+              value: (opt.value || opt.id) + '',
+              ...opt // 将所有原始属性也添加到选项中
             }))
           } else {
             console.warn(`Config '${configName}' did not return a valid 'value' array for options. Result:`, res)
@@ -134,7 +140,8 @@ export default {
             if (Array.isArray(dictionaryList)) {
               fetchedOptions = dictionaryList.map(opt => ({
                 label: opt.text,
-                value: opt.value + ''
+                value: opt.value + '',
+                ...opt // 将所有原始属性也添加到选项中
               }))
             } else {
               console.warn(`Global dictionary '${item.keyName}' did not return an array. Result:`, dictionaryList)
@@ -166,6 +173,15 @@ export default {
       if (!item.searchKeyword || item.searchKeyword === '') {
         this.getOptions(item, formDataContext)
       }
+    },
+      // 批量设置所有表单值
+    setAllFormsData (dataList) {
+      dataList.forEach((data, index) => {
+        if (this.formInstances[index]) {
+          Object.assign(this.formInstances[index].formData, data)
+        }
+      })
+      this.$forceUpdate()
     },
     addFormInstance () {
       const newId = uuidv4()
@@ -233,49 +249,24 @@ export default {
       }
     },
     getAllFormsData () {
-      return new Promise((resolve, reject) => {
-        let allFormsValid = true
-        const allFormsData = []
-        let validatedCount = 0
-
-        if (this.formInstances.length === 0) {
-          resolve([])
-          return
-        }
-
-        this.formInstances.forEach((instance, index) => {
-          const formRef = this.$refs['formModel_' + instance.id][0]
-          if (formRef) {
-            formRef.validate(valid => {
-              validatedCount++
-              if (valid) {
-                allFormsData.push(instance.formData)
-              } else {
-                allFormsValid = false
-              }
-
-              if (validatedCount === this.formInstances.length) {
-                if (allFormsValid) {
-                  resolve(allFormsData)
-                } else {
-                  reject(new Error('部分表单校验失败。'))
-                }
-              }
-            })
-          } else {
-            console.warn(`无法获取表单实例 ${instance.id} 的引用进行校验。`)
-            allFormsValid = false
-            validatedCount++
-            if (validatedCount === this.formInstances.length) {
-              if (allFormsValid) {
-                resolve(allFormsData)
-              } else {
-                reject(new Error('部分表单校验失败。'))
-              }
+      return this.formInstances.map(instance => {
+        return instance.formData
+      })
+    },
+    handleSelectChange (value, option, selectItem, formData, allFormItems) {
+      // 直接获取option.data.props中的完整数据
+      const selectedOptionData = option?.data?.props
+      if (selectedOptionData) {
+        for (const key in selectedOptionData) {
+          if (Object.prototype.hasOwnProperty.call(selectedOptionData, key) && !['label', 'value'].includes(key)) {
+            const targetItem = allFormItems.find(item => item.key === key)
+            if (targetItem) {
+              formData[key] = selectedOptionData[key]
+              this.$forceUpdate()
             }
           }
-        })
-      })
+        }
+      }
     }
   }
 }
@@ -286,7 +277,7 @@ export default {
     <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
     <div v-if="!loading">
       <div v-for="(formInstance, formIndex) in formInstances" :key="formInstance.id" class="form-instance-wrapper">
-        <div v-if="config.manyForm" class="form-instance-title">药品 {{ formIndex + 1 }}</div>
+        <!-- <div v-if="config.manyForm" class="form-instance-title">药品 {{ formIndex + 1 }}</div> -->
         <a-form-model
           :ref="'formModel_' + formInstance.id"
           :model="formInstance.formData"
@@ -294,7 +285,15 @@ export default {
           :layout="config.xAddFormLayout || 'horizontal'"
         >
           <a-row :gutter="16">
-            <a-col :span="8" v-for="(item, itemIndex) in formInstance.formItems" :key="itemIndex">
+            <a-col
+              v-for="(item, itemIndex) in formInstance.formItems"
+              :key="itemIndex"
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="6"
+            >
               <a-form-item
                 :label="item.title"
                 :prop="item.key"
@@ -304,11 +303,12 @@ export default {
                   v-if="item.formType === 'input'"
                   v-model="formInstance.formData[item.key]"
                   :placeholder="'请输入' + item.title"
+                  style="width: 100%"
                 />
                 <a-select
                   v-else-if="item.formType === 'select'"
                   v-model="formInstance.formData[item.key]"
-                  :placeholder="item.loadingOptions ? '加载中...' : '请选择' + item.title"
+                  :placeholder=" '请选择' + item.title"
                   :options="item.options"
                   :loading="item.loadingOptions"
                   show-search
@@ -316,8 +316,10 @@ export default {
                   :filter-option="false"
                   @search="(value) => handleSelectSearch(value, item, formInstance.formData)"
                   @focus="() => handleSelectFocus(item, formInstance.formData)"
+                  @change="(value, option) => handleSelectChange(value, option, item, formInstance.formData, formInstance.formItems)"
                   :dropdownMatchSelectWidth="false"
                   :dropdownStyle="{ minWidth: '200px' }"
+                  style="width: 100%"
                 >
                   <a-spin v-if="item.loadingOptions" slot="notFoundContent" size="small" />
                 </a-select>
@@ -387,25 +389,73 @@ export default {
   }
 }
 
+// 修复表单控件宽度问题
+:deep(.ant-form-item-control-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-form-item-control) {
+  width: 100%;
+}
+
+:deep(.ant-input),
+:deep(.ant-select) {
+  width: 100% !important;
+}
+
 :deep(.ant-card-extra) {
   padding: 0;
 }
 
 :deep(.ant-form-item) {
-  margin-bottom: 5px;
+  margin-bottom: 16px; // 增加表单项间距
+  display: flex;
+  flex-direction: column;
+  margin-left: 120px;
+}
+
+:deep(.ant-form-item-label) {
+  text-align: left;
+  white-space: normal;
+}
+
+:deep(.ant-form-item-control-wrapper) {
+  flex: 1;
 }
 
+// 针对 inline 布局的样式调整
 :deep(.ant-form-inline .ant-form-item) {
   margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
 
-  .ant-form-item-control-wrapper {
-    min-width: 0;
-  }
+:deep(.ant-form-inline .ant-form-item-label) {
+  padding-right: 8px;
+  flex: none;
+}
+
+:deep(.ant-form-inline .ant-form-item-control-wrapper) {
+  flex: 1;
+  min-width: 0;
+}
+
+:deep(.ant-form-inline .ant-input),
+:deep(.ant-form-inline .ant-select) {
+  width: 100% !important;
+  min-width: 120px; // 确保有最小宽度
 }
 
-// :deep(.ant-form-inline .ant-form-item-label) {
-//   padding-right: 8px; /* 调整标签的右内边距，增加标签和控件的间距 */
-// }
+// 响应式布局调整
+@media (max-width: 768px) {
+  :deep(.ant-col-xs-24) {
+    width: 100%;
+  }
+
+  :deep(.ant-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>

package/src/base-client/components/common/HIS/demo.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="h-tab-demo">
-    <!-- XTab -->
-    <a-card title="XTab">
-      <h-tab
-        configName="openPrescriptionTab"
-        serverName="af-his"
-      />
-    </a-card>
+<!--    &lt;!&ndash; XTab &ndash;&gt;-->
+<!--    <a-card title="XTab">-->
+<!--      <h-tab-->
+<!--        configName="openPrescriptionTab"-->
+<!--        serverName="af-his"-->
+<!--      />-->
+<!--    </a-card>-->
 
     <!-- HFormTable -->
     <a-card title="HFormTable" style="margin-top: 20px;">
@@ -16,21 +16,29 @@
       />
     </a-card>
 
-    <!-- HButtons -->
-    <a-card title="HButtons" style="margin-top: 20px;">
-      <h-buttons
-        queryParamsName="outpatientAdviceGroup"
+    <!-- HForm -->
+    <a-card title="HAddNativeForm" style="margin-top: 20px;">
+      <h-add-native-form
+        queryParamsName="TCMAdviceFormConfig"
         serviceName="af-his"
       />
     </a-card>
+
+<!--    &lt;!&ndash; HButtons &ndash;&gt;-->
+<!--    <a-card title="HButtons" style="margin-top: 20px;">-->
+<!--      <h-buttons-->
+<!--        queryParamsName="outpatientAdviceGroup"-->
+<!--        serviceName="af-his"-->
+<!--      />-->
+<!--    </a-card>-->
   </div>
 </template>
 
 <script setup>
-import HTab from './HTab/HTab.vue'
+// import HTab from './HTab/HTab.vue'
 import HFormTable from './HFormTable/HFormTable.vue'
-import HButtons from './HButtons/HButtons.vue'
-
+// import HButtons from './HButtons/HButtons.vue'
+import HAddNativeForm from '@vue2-client/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue'
 </script>
 
 <style scoped lang="less">