vue2-client 1.16.79 → 1.16.81

package/src/base-client/components/common/XInput/XInput.vue

@@ -1,170 +1,194 @@
-<template>
-  <div class="x-input-wrapper" :class="wrapperClassObject">
-    <div class="input-container">
-      <span v-if="config?.label" class="input-label">{{ config.label }}</span>
-      <div class="input-wrapper">
-        <a-input
-          v-model="innerValue"
-          v-bind="$attrs"
-          :placeholder="config?.placeholder"
-          :size="config?.size"
-          :maxLength="config?.maxLength"
-          :disabled="config?.disabled"
-          :allowClear="config?.allowClear"
-          @change="handleInput"
-          @pressEnter="handleSearch"
-        >
-          <template v-if="config?.prefix" #prefix>
-            <a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
-          </template>
-          <template v-if="config?.suffix" #suffix>
-            <a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
-          </template>
-        </a-input>
-      </div>
-      <span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XInput',
-  inheritAttrs: false,
-  props: {
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    queryParamsName: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      innerValue: this.value || '',
-      config: null
-    }
-  },
-  computed: {
-    // 动态样式开关：布尔开关 + size 派生类
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = [
-        'medical-history'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`xinput-${key}`] = true
-      })
-      const size = attrs.size
-      if (size && typeof size === 'string') classes[`xinput-size-${size}`] = true
-      return classes
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  emits: ['search'],
-  methods: {
-    runLogic,
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        this.config = res
-        if (res.defaultValue !== undefined) {
-          this.innerValue = res.defaultValue
-        }
-      })
-    },
-    handleInput (e) {
-      const value = e.target.value
-      this.innerValue = value
-      this.$emit('search', value)
-    },
-    handleSearch () {
-      // 统一的搜索事件：将当前输入值发送给父组件
-      this.$emit('search', this.innerValue)
-    }
-  },
-  watch: {
-    value: {
-      handler (newValue) {
-        this.innerValue = newValue
-      },
-      immediate: true
-    },
-    queryParamsName: {
-      handler (newValue) {
-        this.getData(newValue)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-input-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.input-container {
-  display: flex;
-  align-items: center;
-}
-
-.input-label {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.85);
-  padding-right: 8px; /* 标签右侧固定间距 */
-}
-
-.input-label {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.85);
-  padding-left: 4px; /* 标签左侧固定间距 */
-}
-
-.input-wrapper {
-  flex: 1; /* 输入框占据剩余空间 */
-}
-
-:deep(.clickable-icon) {
-  cursor: pointer;
-}
-
-:deep(.clickable-icon:hover) {
-  color: #1890ff;
-}
-
-.x-input-wrapper{
-  &.xinput-medical-history {
-    width: 192px;
-    height: 32px;
-    border-radius: 6px;
-    opacity: 1;
-    background: #FFFFFF;
-    box-sizing: border-box;
-    border: 1px solid #D8D8D8;
-
-    :deep(.ant-input::placeholder) {
-      font-family: Source Han Sans;
-      font-size: 16px;
-      font-weight: normal;
-      line-height: normal;
-      letter-spacing: 0em;
-      font-variation-settings: "opsz" auto;
-      font-feature-settings: "kern" on;
-      color: #A7A7A7;
-    }
-  }
-}
-
-</style>
+<template>
+  <div class="x-input-wrapper" :class="wrapperClassObject">
+    <div class="input-container">
+      <span v-if="config?.label" class="input-label">{{ config.label }}</span>
+      <div class="input-wrapper">
+        <a-input
+          v-model="innerValue"
+          v-bind="$attrs"
+          :placeholder="config?.placeholder"
+          :size="config?.size"
+          :maxLength="config?.maxLength"
+          :disabled="config?.disabled"
+          :allowClear="config?.allowClear"
+          @change="handleInput"
+          @pressEnter="handleSearch"
+        >
+          <template v-if="config?.prefix" #prefix>
+            <a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
+          </template>
+          <template v-if="config?.suffix" #suffix>
+            <a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
+          </template>
+        </a-input>
+      </div>
+      <span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XInput',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    queryParamsName: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      innerValue: this.value || '',
+      config: null
+    }
+  },
+  computed: {
+    // 动态样式开关：布尔开关 + size 派生类
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+        'medical-history',
+        'yizhu-input'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`xinput-${key}`] = true
+      })
+      const size = attrs.size
+      if (size && typeof size === 'string') classes[`xinput-size-${size}`] = true
+      return classes
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  emits: ['search'],
+  methods: {
+    runLogic,
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        if (res.defaultValue !== undefined) {
+          this.innerValue = res.defaultValue
+        }
+      })
+    },
+    handleInput (e) {
+      const value = e.target.value
+      this.innerValue = value
+      this.$emit('search', value)
+    },
+    handleSearch () {
+      // 统一的搜索事件：将当前输入值发送给父组件
+      this.$emit('search', this.innerValue)
+    }
+  },
+  watch: {
+    value: {
+      handler (newValue) {
+        this.innerValue = newValue
+      },
+      immediate: true
+    },
+    queryParamsName: {
+      handler (newValue) {
+        this.getData(newValue)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.x-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+}
+
+.input-label {
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  padding-right: 8px; /* 标签右侧固定间距 */
+}
+
+.input-label {
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  padding-left: 4px; /* 标签左侧固定间距 */
+}
+
+.input-wrapper {
+  flex: 1; /* 输入框占据剩余空间 */
+}
+
+:deep(.clickable-icon) {
+  cursor: pointer;
+}
+
+:deep(.clickable-icon:hover) {
+  color: #1890ff;
+}
+
+.x-input-wrapper{
+  &.xinput-medical-history {
+    width: 192px;
+    height: 32px;
+    border-radius: 6px;
+    opacity: 1;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    border: 1px solid #D8D8D8;
+
+    :deep(.ant-input::placeholder) {
+      font-family: Source Han Sans;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      font-variation-settings: "opsz" auto;
+      font-feature-settings: "kern" on;
+      color: #A7A7A7;
+    }
+  }
+  &.xinput-yizhu-input {
+    border-radius: 6px;
+    opacity: 1;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    border: 1px solid #E5E9F0;
+
+    margin: 2px 0px;
+    :deep(.ant-input) {
+      border-radius: 6px;
+      opacity: 1;
+      background: #FFFFFF;
+      box-sizing: border-box;
+      border: 1px solid #E5E9F0;
+      font-family: Source Han Sans;
+      font-size: 14px;
+      padding: 5px 76px 3px 8px;
+      font-weight: normal;
+      line-height: 24px;
+      letter-spacing: 0em;
+      color: #A7A7A7;
+    }
+  }
+}
+
+</style>

package/src/base-client/components/common/XLabelSelect/XLabelSelect.vue

@@ -1,110 +1,110 @@
-<template>
-  <div class="tag-container">
-    <div class="tags-wrapper">
-      <a-tag
-        v-for="type in types"
-        :key="type.value"
-        @click="selectType(type.value)"
-        class="label-tag"
-        :class="{ 'active-tag': selectedType === type.value }"
-      >
-        {{ type.label }}
-      </a-tag>
-    </div>
-    <div class="underline" :style="underlineStyle"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-  },
-  data () {
-    return {
-      selectedType: this.value,
-      types: null,
-      underlineStyle: {
-        width: '0',
-        left: '0',
-      },
-    }
-  },
-  watch: {
-    selectedType (newValue) {
-      this.$emit('input', newValue)
-      this.updateUnderline()
-    },
-  },
-  mounted () {
-    this.updateUnderline()
-  },
-  methods: {
-    init (params) {
-      const {
-        // 配置内容
-        options
-      } = params
-      this.types = options
-    },
-    selectType (value) {
-      this.selectedType = value
-      if (this.selectedType) { // 检查选中内容是否不为空
-        this.$emit('selected', this.selectedType) // 发送选中事件
-      }
-    },
-    updateUnderline () {
-      // 动态更新下划线位置和宽度
-      this.$nextTick(() => {
-        const activeTag = this.$el.querySelector('.active-tag')
-        if (activeTag) {
-          const { offsetWidth, offsetLeft } = activeTag
-          this.underlineStyle.width = `${offsetWidth}px`
-          this.underlineStyle.left = `${offsetLeft}px`
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* 容器样式 */
-.tag-container {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.tags-wrapper {
-  display: inline-flex; /* 标签紧邻排列 */
-  gap: 0; /* 去掉选项之间的空隙 */
-}
-
-.label-tag {
-  padding: 5px 15px;
-  font-size: 16px;
-  color: #333;
-  background: none;
-  cursor: pointer;
-  border: none;
-  display: inline-block;
-}
-
-.label-tag.active-tag {
-  color: #333; /* 不变色 */
-  font-weight: bold;
-}
-
-.underline {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  background-color: #1890ff;
-  transition: all 0.3s ease; /* 平滑过渡效果 */
-}
-</style>
+<template>
+  <div class="tag-container">
+    <div class="tags-wrapper">
+      <a-tag
+        v-for="type in types"
+        :key="type.value"
+        @click="selectType(type.value)"
+        class="label-tag"
+        :class="{ 'active-tag': selectedType === type.value }"
+      >
+        {{ type.label }}
+      </a-tag>
+    </div>
+    <div class="underline" :style="underlineStyle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  data () {
+    return {
+      selectedType: this.value,
+      types: null,
+      underlineStyle: {
+        width: '0',
+        left: '0',
+      },
+    }
+  },
+  watch: {
+    selectedType (newValue) {
+      this.$emit('input', newValue)
+      this.updateUnderline()
+    },
+  },
+  mounted () {
+    this.updateUnderline()
+  },
+  methods: {
+    init (params) {
+      const {
+        // 配置内容
+        options
+      } = params
+      this.types = options
+    },
+    selectType (value) {
+      this.selectedType = value
+      if (this.selectedType) { // 检查选中内容是否不为空
+        this.$emit('selected', this.selectedType) // 发送选中事件
+      }
+    },
+    updateUnderline () {
+      // 动态更新下划线位置和宽度
+      this.$nextTick(() => {
+        const activeTag = this.$el.querySelector('.active-tag')
+        if (activeTag) {
+          const { offsetWidth, offsetLeft } = activeTag
+          this.underlineStyle.width = `${offsetWidth}px`
+          this.underlineStyle.left = `${offsetLeft}px`
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 容器样式 */
+.tag-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.tags-wrapper {
+  display: inline-flex; /* 标签紧邻排列 */
+  gap: 0; /* 去掉选项之间的空隙 */
+}
+
+.label-tag {
+  padding: 5px 15px;
+  font-size: 16px;
+  color: #333;
+  background: none;
+  cursor: pointer;
+  border: none;
+  display: inline-block;
+}
+
+.label-tag.active-tag {
+  color: #333; /* 不变色 */
+  font-weight: bold;
+}
+
+.underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: #1890ff;
+  transition: all 0.3s ease; /* 平滑过渡效果 */
+}
+</style>

package/src/base-client/components/common/XLabelSelect/XLabelSelectDemo.vue

@@ -1,35 +1,35 @@
-<template>
-  <div>
-    <h1>选择标签示例</h1>
-    <XLabelSelect
-      :options="options"
-      v-model="selectedOption"
-      label="请选择一个选项"
-    />
-    <p>选中的选项: {{ selectedOption }}</p>
-  </div>
-</template>
-
-<script>
-import XLabelSelect from '@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'
-
-export default {
-  components: {
-    XLabelSelect,
-  },
-  data () {
-    return {
-      selectedOption: null,
-      options: [
-        { value: 'option1', label: '选项 1' },
-        { value: 'option2', label: '选项 2' },
-        { value: 'option3', label: '选项 3' },
-      ],
-    }
-  },
-}
-</script>
-
-<style scoped>
-/* 添加样式 */
-</style>
+<template>
+  <div>
+    <h1>选择标签示例</h1>
+    <XLabelSelect
+      :options="options"
+      v-model="selectedOption"
+      label="请选择一个选项"
+    />
+    <p>选中的选项: {{ selectedOption }}</p>
+  </div>
+</template>
+
+<script>
+import XLabelSelect from '@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'
+
+export default {
+  components: {
+    XLabelSelect,
+  },
+  data () {
+    return {
+      selectedOption: null,
+      options: [
+        { value: 'option1', label: '选项 1' },
+        { value: 'option2', label: '选项 2' },
+        { value: 'option3', label: '选项 3' },
+      ],
+    }
+  },
+}
+</script>
+
+<style scoped>
+/* 添加样式 */
+</style>