vue2-client 1.15.87 → 1.15.89

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

@@ -1,162 +1,162 @@
-<template>
-  <div class="x-time-select">
-    <div class="time-select-container">
-      <span v-if="label" class="time-select-label">{{ label }}</span>
-
-      <div v-if="type === 'range'" class="picker-wrapper">
-        <a-range-picker
-          :value="dateRange"
-          :placeholder="['开始日期', '结束日期']"
-          separator="至"
-          :disabled="disabled"
-          :allowClear="allowClear"
-          :format="format"
-          @change="handleDateChange"
-        />
-      </div>
-      <div v-if="type === 'date'" class="picker-wrapper">
-        <a-date-picker
-          :value="dateRange"
-          :format="format"
-          :disabled="disabled"
-          :allowClear="allowClear"
-          @change="handleDateChange"
-        />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XTimeSelect',
-  inject: ['getComponentByName'],
-  props: {
-    queryParamsName: {
-      type: String,
-      default: null
-    },
-    value: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    allowClear: {
-      type: Boolean,
-      default: true
-    },
-    format: {
-      type: String,
-      default: 'YYYY/MM/DD'
-    }
-  },
-  data () {
-    return {
-      dateRange: [],
-      label: '',
-      type: 'range'
-    }
-  },
-  watch: {
-    value: {
-      handler (newVal) {
-        this.convertValueToMoment(newVal)
-      },
-      immediate: true,
-      deep: true
-    },
-    type () {
-      this.convertValueToMoment(this.value)
-    }
-
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    convertValueToMoment (value) {
-      if (this.type === 'range' && value?.length === 2) {
-        this.dateRange = [
-          value[0] ? moment(value[0]) : null,
-          value[1] ? moment(value[1]) : null
-        ]
-      } else if (this.type === 'date' && value?.length === 1) {
-        this.dateRange = [value[0] ? moment(value[0]) : null]
-      } else {
-        this.dateRange = []
-      }
-    },
-    handleDateChange (dates, dateStrings) {
-      this.dateRange = dates
-      console.warn(dateStrings)
-      this.$emit('change', dateStrings)
-    },
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        if (['date', 'range'].includes(res.type)) {
-          this.type = res.type
-        }
-        if (res.label !== undefined) {
-          this.label = res.label
-        }
-        this.convertValueToMoment(this.value)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.x-time-select {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  display: block;
-}
-
-.time-select-container {
-  display: flex;
-  align-items: center;
-}
-
-.time-select-label {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.85);
-  padding-right: 8px;
-}
-
-.picker-wrapper {
-  flex: 1;
-}
-
-.x-time-select :deep(.ant-picker-range),
-.x-time-select :deep(.ant-picker) {
-  width: 100%;
-  height: 30px;
-  border-radius: 7px;
-  background: #FFFFFF;
-  border: 1px solid #E5E9F0;
-}
-.x-time-select :deep(.ant-calendar-picker) {
-  width: 100%;
-  display: block;
-}
-.x-time-select :deep(.ant-calendar-picker-input) {
-  width: 100%;
-  height: 30px;
-  border-radius: 7px;
-  background: #FFFFFF;
-  border: 1px solid #E5E9F0;
-}
-
-.x-time-select :deep(.ant-input) {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="x-time-select">
+    <div class="time-select-container">
+      <span v-if="label" class="time-select-label">{{ label }}</span>
+
+      <div v-if="type === 'range'" class="picker-wrapper">
+        <a-range-picker
+          :value="dateRange"
+          :placeholder="['开始日期', '结束日期']"
+          separator="至"
+          :disabled="disabled"
+          :allowClear="allowClear"
+          :format="format"
+          @change="handleDateChange"
+        />
+      </div>
+      <div v-if="type === 'date'" class="picker-wrapper">
+        <a-date-picker
+          :value="dateRange"
+          :format="format"
+          :disabled="disabled"
+          :allowClear="allowClear"
+          @change="handleDateChange"
+        />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTimeSelect',
+  inject: ['getComponentByName'],
+  props: {
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    allowClear: {
+      type: Boolean,
+      default: true
+    },
+    format: {
+      type: String,
+      default: 'YYYY/MM/DD'
+    }
+  },
+  data () {
+    return {
+      dateRange: [],
+      label: '',
+      type: 'range'
+    }
+  },
+  watch: {
+    value: {
+      handler (newVal) {
+        this.convertValueToMoment(newVal)
+      },
+      immediate: true,
+      deep: true
+    },
+    type () {
+      this.convertValueToMoment(this.value)
+    }
+
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    convertValueToMoment (value) {
+      if (this.type === 'range' && value?.length === 2) {
+        this.dateRange = [
+          value[0] ? moment(value[0]) : null,
+          value[1] ? moment(value[1]) : null
+        ]
+      } else if (this.type === 'date' && value?.length === 1) {
+        this.dateRange = [value[0] ? moment(value[0]) : null]
+      } else {
+        this.dateRange = []
+      }
+    },
+    handleDateChange (dates, dateStrings) {
+      this.dateRange = dates
+      console.warn(dateStrings)
+      this.$emit('change', dateStrings)
+    },
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        if (['date', 'range'].includes(res.type)) {
+          this.type = res.type
+        }
+        if (res.label !== undefined) {
+          this.label = res.label
+        }
+        this.convertValueToMoment(this.value)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.x-time-select {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.time-select-container {
+  display: flex;
+  align-items: center;
+}
+
+.time-select-label {
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  padding-right: 8px;
+}
+
+.picker-wrapper {
+  flex: 1;
+}
+
+.x-time-select :deep(.ant-picker-range),
+.x-time-select :deep(.ant-picker) {
+  width: 100%;
+  height: 30px;
+  border-radius: 7px;
+  background: #FFFFFF;
+  border: 1px solid #E5E9F0;
+}
+.x-time-select :deep(.ant-calendar-picker) {
+  width: 100%;
+  display: block;
+}
+.x-time-select :deep(.ant-calendar-picker-input) {
+  width: 100%;
+  height: 30px;
+  border-radius: 7px;
+  background: #FFFFFF;
+  border: 1px solid #E5E9F0;
+}
+
+.x-time-select :deep(.ant-input) {
+  width: 100%;
+}
+</style>

package/src/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue

@@ -1,23 +1,23 @@
-<script>
-  import XTimeSelect from './XTimeSelect.vue'
-  export default {
-    name: 'XTimeSelectDemo',
-    components: {
-      XTimeSelect,
-    },
-    data () {
-      return {
-        queryParamsName: 'expenseManagementDatePicker'
-      }
-    }
-  }
-</script>
-
-<template>
-  <x-time-select :queryParamsName="queryParamsName">
-  </x-time-select>
-</template>
-
-<style scoped>
-
-</style>
+<script>
+  import XTimeSelect from './XTimeSelect.vue'
+  export default {
+    name: 'XTimeSelectDemo',
+    components: {
+      XTimeSelect,
+    },
+    data () {
+      return {
+        queryParamsName: 'expenseManagementDatePicker'
+      }
+    }
+  }
+</script>
+
+<template>
+  <x-time-select :queryParamsName="queryParamsName">
+  </x-time-select>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -1,113 +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%，设置自定义宽度时会覆盖此值
+# 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%，设置自定义宽度时会覆盖此值