vue2-client 1.16.24 → 1.16.26

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+import { ref, computed, useAttrs } from 'vue'
+
+const xAddNativeFormRef = ref()
+
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const a = attrs
+  const classes = {}
+
+  // 1) 多个布尔型样式开关（存在且为真则生效）
+  const booleanStyleKeys = [
+    'query-conditions',
+    'padding-50',
+    'label-text-horizontal',
+  ]
+  for (const key of booleanStyleKeys) {
+    const val = a[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`h-form-${key}`] = true
+  }
+
+  const size = a['size']
+  if (size && typeof size === 'string') {
+    classes[`h-form-size-${size}`] = true
+  }
+
+  return classes
+})
+
+defineExpose({
+  getXAddNativeFormInstance: () => xAddNativeFormRef.value,
+  init: (params) => xAddNativeFormRef.value && xAddNativeFormRef.value.init && xAddNativeFormRef.value.init(params),
+  asyncSubmit: () => xAddNativeFormRef.value && xAddNativeFormRef.value.asyncSubmit && xAddNativeFormRef.value.asyncSubmit(),
+  validateForm: () => xAddNativeFormRef.value && xAddNativeFormRef.value.validateForm && xAddNativeFormRef.value.validateForm()
+})
+
+</script>
+
+<template>
+  <div
+    class="h-form-wrapper"
+    :class="[
+      wrapperClassObject
+    ]"
+  >
+
+    <x-add-native-form
+      ref="xAddNativeFormRef"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </x-add-native-form>
+  </div>
+</template>
+
+<style scoped lang="less">
+.h-form-wrapper {
+  // 基础样式
+  :deep(.ant-form-item) {
+    margin-bottom: 4px;
+  }
+
+  // query-conditions 样式
+  &.h-form-query-conditions {
+    // ant-card-body 样式
+    :deep(.ant-card-body) {
+      padding: 0px;
+    }
+
+    // ant-row-flex 样式
+    :deep(.ant-row-flex) {
+      // x-form-col-wrapper 样式
+      .x-form-col-wrapper {
+        .ant-form-item {
+          display: flex;
+          width: 100%;
+          margin-bottom: 4px;
+          justify-content: space-between;
+
+          .ant-form-item-label {
+            padding-left: 4px;
+            width: 100%;
+          }
+
+          .ant-form-item-control-wrapper {
+            padding-left: -6px;
+          }
+        }
+      }
+
+      // ant-col-24 样式
+      .ant-col-24 {
+        padding: 0px 4px !important;
+      }
+    }
+  }
+
+  &.h-form-padding-50 {
+    // ant-row-flex 样式
+    :deep(.ant-row-flex) {
+      padding-left: 50px;
+      padding-right: 50px
+    }
+  }
+
+  // label-text-horizontal 样式 - 只控制label文字从左到右排列
+  &.h-form-label-text-horizontal {
+    :deep(.ant-form-item-label) {
+      text-align: left;
+      direction: ltr;
+
+      // 标签文字水平排列
+      .ant-form-item-label-text {
+        display: inline-block;
+        text-align: left;
+        direction: ltr;
+        unicode-bidi: normal;
+      }
+
+      // 必填标识水平排列
+      .ant-form-item-required::before {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+</style>

package/src/base-client/components/common/HIS/HForm/index.js

@@ -0,0 +1,3 @@
+import HForm from './HForm.vue'
+
+export default HForm

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

@@ -1,219 +1,219 @@
-<script setup lang="ts">
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-  // HFormTable特有的属性
-  tableStyle: {
-    type: String,
-    default: 'formtable-col1'
-  },
-  // 顶部
-  topStyle: {
-    type: String,
-    default: ''
-  },
-  // 分页
-  paginationStyle: {
-    type: String,
-    default: ''
-  }
-})
-
-// 创建对XFormTable组件的引用
-const xFormTableRef = ref()
-
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXFormTableInstance方法
-  getXFormTableInstance: () => xFormTableRef.value
-})
-
-// 计算是否使用自定义分页
-const isCustomPagination = computed(() => props.tableStyle === 'custom-pagination' || props.paginationStyle === 'custom-pagination')
-</script>
-
-<template>
-  <div
-    class="h-form-table-wrapper"
-    :class="[
-      `h-form-table-${tableStyle}`,
-      {
-        [`h-form-table-${topStyle}`]: ['top-hidden'].includes(topStyle),
-        [`h-form-table-${paginationStyle}`]: ['pagination-center','custom-pagination'].includes(paginationStyle)
-      }
-    ]"
-  >
-    <x-form-table
-      ref="xFormTableRef"
-      v-bind="$attrs"
-      :customPagination="isCustomPagination"
-      v-on="$listeners"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </x-form-table>
-  </div>
-</template>
-
-<style scoped lang="less">
-.h-form-table-wrapper {
-  // 基础样式
-  :deep(.table-wrapper) {
-    .ant-table {
-      .ant-table-row {
-        margin: 0px;
-
-        .ant-form-item {
-          margin: 0px;
-
-          .ant-form-item-control-wrapper {
-            .ant-form-item-control {
-              line-height: 0px;
-
-              .ant-select-selection--multiple {
-                padding-bottom: 2px;
-              }
-            }
-            width: 100%;
-          }
-        }
-      }
-      font-size: 16px;
-    }
-
-    .ant-alert-info {
-      display: none;
-    }
-  }
-
-  :deep(.ant-card) {
-    margin: -10px 0px 29px 0px;
-  }
-
-  :deep(.ant-btn) {
-    border: 0px;
-    box-shadow: none;
-    padding: 0px;
-    color: #5D5C5C;
-    font-weight: bold;
-    letter-spacing: 0em;
-    font-size: 18px;
-    line-height: normal;
-    font-family: "Source Han Sans";
-  }
-
-  :deep(.ant-card-body) {
-    padding: 0 6px;
-  }
-
-  :deep(.ant-table-small) {
-    border-width: 0;
-
-    .ant-table-fixed {
-      border-radius: 0;
-      border-bottom: 1px solid #f0f0f0;
-    }
-  }
-
-  // 表格高度样式
-  &.h-form-table-height {
-    :deep(.table-wrapper) {
-      .ant-select-open ~ .ant-table-content {
-        height: 500px !important;
-      }
-    }
-  }
-
-  // 表格样式
-  &.h-form-table-table {
-    :deep(.ant-table-small .ant-table-fixed-header) {
-      .ant-table-content {
-        .ant-table-content {
-          .ant-table-body {
-            border-radius: 0 0 4px 4px;
-            overflow: visible !important;
-          }
-        }
-      }
-    }
-  }
-
-  // 隐藏按钮区域
-  &.h-form-table-button-area-hide {
-    :deep(.ant-btn) {
-      display: none;
-    }
-
-    :deep(.table-wrapper) {
-      margin-top: -39px;
-    }
-  }
-
-  // 顶部区域隐藏（与按钮隐藏一致的视觉需求）
-  &.h-form-table-top-hidden {
-    :deep(.ant-btn) {
-      display: none;
-    }
-
-    :deep(.table-wrapper) {
-      margin-top: -39px;
-    }
-  }
-
-  // 列样式1
-  &.h-form-table-formtable-col1 {
-    :deep(.table-wrapper) {
-      .ant-row {
-        .ant-col span {
-          border: none;
-          width: auto;
-          margin-bottom: auto;
-        }
-      }
-
-      .ant-table {
-        .ant-table-body {
-          .ant-table-fixed colgroup col:nth-child(2) {
-            width: 50px;
-            min-width: 50px;
-          }
-        }
-
-        .ant-table-header {
-          .ant-table-fixed colgroup col:nth-child(2) {
-            width: 50px;
-            min-width: 50px;
-          }
-        }
-      }
-    }
-  }
-
-  // 底部分页居中 & 自定义分页样式（共用样式）
-  &.h-form-table-bottom-center,
-  &.h-form-table-custom-pagination {
-    :deep(.table-wrapper) {
-      .ant-row-flex-start {
-        position: relative;
-        display: flex;
-        align-items: center;
-        margin-top: 24px !important;
-
-        // 防止第一个子元素无限拉伸，影响分页居中
-        > :first-child {
-          flex: 0 0 auto;
-        }
-
-        // 将第二个子元素（分页）绝对居中
-        > :nth-child(2) {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  // HFormTable特有的属性
+  tableStyle: {
+    type: String,
+    default: 'formtable-col1'
+  },
+  // 顶部
+  topStyle: {
+    type: String,
+    default: ''
+  },
+  // 分页
+  paginationStyle: {
+    type: String,
+    default: ''
+  }
+})
+
+// 创建对XFormTable组件的引用
+const xFormTableRef = ref()
+
+// 暴露方法给父组件使用
+defineExpose({
+  // 为了兼容性，保留getXFormTableInstance方法
+  getXFormTableInstance: () => xFormTableRef.value
+})
+
+// 计算是否使用自定义分页
+const isCustomPagination = computed(() => props.tableStyle === 'custom-pagination' || props.paginationStyle === 'custom-pagination')
+</script>
+
+<template>
+  <div
+    class="h-form-table-wrapper"
+    :class="[
+      `h-form-table-${tableStyle}`,
+      {
+        [`h-form-table-${topStyle}`]: ['top-hidden'].includes(topStyle),
+        [`h-form-table-${paginationStyle}`]: ['pagination-center','custom-pagination'].includes(paginationStyle)
+      }
+    ]"
+  >
+    <x-form-table
+      ref="xFormTableRef"
+      v-bind="$attrs"
+      :customPagination="isCustomPagination"
+      v-on="$listeners"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </x-form-table>
+  </div>
+</template>
+
+<style scoped lang="less">
+.h-form-table-wrapper {
+  // 基础样式
+  :deep(.table-wrapper) {
+    .ant-table {
+      .ant-table-row {
+        margin: 0px;
+
+        .ant-form-item {
+          margin: 0px;
+
+          .ant-form-item-control-wrapper {
+            .ant-form-item-control {
+              line-height: 0px;
+
+              .ant-select-selection--multiple {
+                padding-bottom: 2px;
+              }
+            }
+            width: 100%;
+          }
+        }
+      }
+      font-size: 16px;
+    }
+
+    .ant-alert-info {
+      display: none;
+    }
+  }
+
+  :deep(.ant-card) {
+    margin: -10px 0px 29px 0px;
+  }
+
+  :deep(.ant-btn) {
+    border: 0px;
+    box-shadow: none;
+    padding: 0px;
+    color: #5D5C5C;
+    font-weight: bold;
+    letter-spacing: 0em;
+    font-size: 18px;
+    line-height: normal;
+    font-family: "Source Han Sans";
+  }
+
+  :deep(.ant-card-body) {
+    padding: 0 6px;
+  }
+
+  :deep(.ant-table-small) {
+    border-width: 0;
+
+    .ant-table-fixed {
+      border-radius: 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+  }
+
+  // 表格高度样式
+  &.h-form-table-height {
+    :deep(.table-wrapper) {
+      .ant-select-open ~ .ant-table-content {
+        height: 500px !important;
+      }
+    }
+  }
+
+  // 表格样式
+  &.h-form-table-table {
+    :deep(.ant-table-small .ant-table-fixed-header) {
+      .ant-table-content {
+        .ant-table-content {
+          .ant-table-body {
+            border-radius: 0 0 4px 4px;
+            overflow: visible !important;
+          }
+        }
+      }
+    }
+  }
+
+  // 隐藏按钮区域
+  &.h-form-table-button-area-hide {
+    :deep(.ant-btn) {
+      display: none;
+    }
+
+    :deep(.table-wrapper) {
+      margin-top: -39px;
+    }
+  }
+
+  // 顶部区域隐藏（与按钮隐藏一致的视觉需求）
+  &.h-form-table-top-hidden {
+    :deep(.ant-btn) {
+      display: none;
+    }
+
+    :deep(.table-wrapper) {
+      margin-top: -39px;
+    }
+  }
+
+  // 列样式1
+  &.h-form-table-formtable-col1 {
+    :deep(.table-wrapper) {
+      .ant-row {
+        .ant-col span {
+          border: none;
+          width: auto;
+          margin-bottom: auto;
+        }
+      }
+
+      .ant-table {
+        .ant-table-body {
+          .ant-table-fixed colgroup col:nth-child(2) {
+            width: 50px;
+            min-width: 50px;
+          }
+        }
+
+        .ant-table-header {
+          .ant-table-fixed colgroup col:nth-child(2) {
+            width: 50px;
+            min-width: 50px;
+          }
+        }
+      }
+    }
+  }
+
+  // 底部分页居中 & 自定义分页样式（共用样式）
+  &.h-form-table-bottom-center,
+  &.h-form-table-custom-pagination {
+    :deep(.table-wrapper) {
+      .ant-row-flex-start {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-top: 24px !important;
+
+        // 防止第一个子元素无限拉伸，影响分页居中
+        > :first-child {
+          flex: 0 0 auto;
+        }
+
+        // 将第二个子元素（分页）绝对居中
+        > :nth-child(2) {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+</style>