vue2-client 1.14.11 → 1.14.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.14.11",
+  "version": "1.14.13",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -100,6 +100,7 @@
         :dropdownStyle="{ position: 'absolute'}"
         :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
         show-search
+        :allowClear="true"
       >
         <a-select-option
           v-if="mode === '查询'"

package/src/base-client/components/his/XHisEditor/XHisEditor.vue

@@ -85,6 +85,7 @@
     </a-modal></div>
 </template>
 
+
 <script>
 
 import { runLogic } from '@vue2-client/services/api/common'

package/src/base-client/components/his/XSidebar/XSidebar.vue

@@ -132,14 +132,14 @@ export default {
               currentCol = currentCol.parentNode
             }
             if (currentCol) {
-              // 更新当前列的宽度
+              //  更新当前列的宽度
               const drawerWidth = isOpen ? 33.3 : 2
               // 强制更新样式
               currentCol.style.cssText = `
             flex: 0 0 ${drawerWidth}% !important;
             max-width: ${drawerWidth}% !important;
             transition: all 0.3s;`
-              // 触发XTab组件重新计算宽度
+              //  触发XTab组件重新计算宽度
               this.$nextTick(() => {
                 const tabComponent = this.$el.querySelector('.ant-tabs')
                 if (tabComponent) {
@@ -147,7 +147,7 @@ export default {
                   window.dispatchEvent(new Event('resize'))
                 }
               })
-              // 更新其他列宽度
+              //  更新其他列宽度
               otherCols.forEach((col, index) => {
                 if (index < this.mainWithData.length) {
                   const widthValue = isOpen ? this.mainWithData[index].min : this.mainWithData[index].max

package/src/base-client/components/his/XTitle/README.md

@@ -0,0 +1,113 @@
+# XTitle 组件
+
+## 概述
+
+XTitle 是一个多功能的标题组件，可以显示标题文本或按钮，支持自定义下划线样式、颜色和宽度。
+
+## 功能特点
+
+- 支持显示标题或按钮
+- 支持为标题添加下划线
+- 支持自定义下划线颜色
+- 支持自定义宽度
+- 支持点击事件触发
+
+## 使用方法
+
+### 基本用法
+
+```vue
+<x-title query-params-name="我的标题-title"></x-title>
+```
+
+### 配置参数格式
+
+XTitle 组件通过一个字符串参数进行配置 
+
+各部分说明：
+
+1. `标题文本`: 显示的文本内容
+2. `类型`: 可选值为 `title` 或 `button`
+3. `点击事件名`: 点击时触发的事件名称
+4. `线条`: 设置为 `line` 时显示下划线
+5. `颜色`: 下划线的颜色（如 `red`、`#FF0000`）
+6. `宽度`: 组件宽度，单位为像素（如 `800`）
+
+## 使用示例
+
+### 1. 基本标题
+
+```vue
+<x-title query-params-name="患者信息-title"></x-title>
+```
+
+### 2. 带下划线的标题
+
+```vue
+<x-title query-params-name="患者信息-title--line"></x-title>
+```
+
+### 3. 自定义下划线颜色和宽度
+
+```vue
+<x-title query-params-name="患者信息-title--line-red-800"></x-title>
+```
+
+### 4. 带点击事件的标题
+
+```vue
+<x-title query-params-name="患者信息-title-showPatient-line" @showPatient="handleShowPatient"></x-title>
+```
+
+### 5. 按钮模式
+
+```vue
+<x-title query-params-name="提交-button-submit" @submit="handleSubmit"></x-title>
+```
+
+## 事件
+
+当组件类型为 `button` 或在标题配置中设置了点击事件名时，点击组件会触发相应的事件。
+
+```vue
+<template>
+  <x-title query-params-name="提交-button-submit" @submit="handleSubmit"></x-title>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSubmit() {
+      // 处理提交逻辑
+      console.log('提交按钮被点击');
+    }
+  }
+}
+</script>
+```
+
+## 样式自定义
+
+组件内部样式已预设，但可以通过父级样式或特定类名进行覆盖：
+
+```vue
+<template>
+  <div class="custom-container">
+    <x-title query-params-name="自定义标题-title"></x-title>
+  </div>
+</template>
+
+<style scoped>
+.custom-container :deep(.x-title) {
+  font-size: 20px;
+  color: blue;
+}
+</style>
+```
+
+## 注意事项
+
+1. 当未指定类型时，默认为 `title` 类型
+2. 线条颜色需要是合法的 CSS 颜色值
+3. 宽度值必须是数字，单位为像素
+4. 组件默认宽度为 100%，设置自定义宽度时会覆盖此值

package/src/base-client/components/his/XTitle/XTitle.vue

@@ -1,62 +1,180 @@
 <template>
-    <div class="x-title" :class="{ 'with-underline': hasUnderline, 'only-line': isOnlyLine }">
-        <span v-show="!isOnlyLine">{{ processedTitle }}</span>
+  <div class="x-title-container">
+    <div
+      v-if="config.type === 'title'"
+      class="x-title"
+      :class="{ 'with-underline': config.line === 'line' }">
+      <span>{{ config.label }}</span>
+      <div
+        v-if="config.line === 'line'"
+        class="underline"
+        :style="getLineStyle()">
+      </div>
     </div>
+    <div v-else-if="config.type === 'button'" class="x-button-container">
+      <a-button type="primary" @click="handleClick">{{ config.label }}</a-button>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'XTitle',
-    props: {
-      queryParamsName: {
-        type: String,
-        default: null
-      }
-    },
-    data () {
-      return {
-        title: ''
+  name: 'XTitle',
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      config: {
+        label: '',
+        type: 'title',
+        clickName: '',
+        line: '',
+        color: '',
+        lineLength: ''
       }
-    },
-    computed: {
-        processedTitle () {
-            return this.title.replace('</br>', '')
-        },
-        hasUnderline () {
-            return this.title.includes('</br>')
-        },
-        isOnlyLine () {
-            return this.title === '</br>'
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    getData (data) {
+      if (!data) return
+
+      // 检查是否包含分隔符
+      if (data.includes('-')) {
+        const parts = data.split('-')
+
+        // 根据部分数量设置配置
+        if (parts.length >= 6) {
+          // 包含颜色和线长度
+          this.config = {
+            label: parts[0],
+            type: parts[1],
+            clickName: parts[2],
+            line: parts[3],
+            color: parts[4],
+            lineLength: parts[5]
+          }
+        } else if (parts.length === 5) {
+          // 只包含颜色
+          this.config = {
+            label: parts[0],
+            type: parts[1],
+            clickName: parts[2],
+            line: parts[3],
+            color: parts[4],
+            lineLength: ''
+          }
+        } else if (parts.length === 4) {
+          this.config = {
+            label: parts[0],
+            type: parts[1],
+            clickName: parts[2],
+            line: parts[3],
+            color: '',
+            lineLength: ''
+          }
+        } else if (parts.length === 3) {
+          this.config = {
+            label: parts[0],
+            type: parts[1],
+            clickName: parts[2],
+            line: '',
+            color: '',
+            lineLength: ''
+          }
+        } else if (parts.length === 2) {
+          this.config = {
+            label: parts[0],
+            type: parts[1],
+            clickName: '',
+            line: '',
+            color: '',
+            lineLength: ''
+          }
+        } else {
+          this.config = {
+            label: data,
+            type: 'title',
+            clickName: '',
+            line: '',
+            color: '',
+            lineLength: ''
+          }
+        }
+      } else {
+        // 没有分隔符，按原来的方式处理
+        this.config = {
+          label: data,
+          type: 'title',
+          clickName: '',
+          line: '',
+          color: '',
+          lineLength: ''
         }
+      }
     },
-    created () {
-      this.getData(this.queryParamsName)
+    handleClick () {
+      if (this.config.clickName) {
+        this.$emit(this.config.clickName)
+      }
     },
-    methods: {
-        getData (data) {
-            this.title = data
-        }
+    getLineStyle () {
+      const style = {}
+
+      // 设置线条颜色
+      if (this.config.color) {
+        style.backgroundColor = this.config.color
+      } else {
+        style.backgroundColor = '#5D5C5C'
+      }
+
+      // 设置线条宽度
+      if (this.config.lineLength) {
+        style.width = this.config.lineLength + 'px'
+      } else {
+        style.width = '800'
+      }
+
+      return style
     }
   }
+}
 </script>
+
 <style scoped>
+.x-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .x-title {
-    font-size: 18px;
-    font-weight: bold;
-    height: 26px;
-    width: 100%;
-    text-align: left;
-    font-family: "Source Han Sans", sans-serif;
-    color: #5D5C5C;
+  font-size: 18px;
+  font-weight: bold;
+  height: 26px;
+  width: 100%;
+  text-align: left;
+  font-family: "Source Han Sans", sans-serif;
+  color: #5D5C5C;
+  position: relative;
 }
 
-.with-underline {
-    border-bottom: 1px solid #5D5C5C;
+.underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background-color: #5D5C5C;
 }
 
-.only-line {
-    height: 1px;
-    background-color: #5D5C5C;
-    margin: 13px 0;
+.x-button-container {
+  text-align: right;
 }
 </style>

package/src/router/async/router.map.js

@@ -59,7 +59,7 @@ routerResource.example = {
   // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
-  component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
+  // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
@@ -74,7 +74,7 @@ routerResource.example = {
   // component: () => import('@vue2-client/components/g2Charts/demo.vue'),
   // component: () => import('@vue2-client/pages/LogicCallExample/index.vue'),
   // component: () => import('@vue2-client/components/FilePreview/FilePreviewDemo.vue'),
-  // component: () => import('@vue2-client/pages/ReportGrid/index.vue'),
+  component: () => import('@vue2-client/pages/ReportGrid/index.vue'),
 }
 // routerResource.example = () =>
 //    import('@vue2-client/pages/Example')