vue2-client 1.16.49 → 1.16.52

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

@@ -10,16 +10,38 @@
       :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }"
       :data-source="localData">
       <a-list-item slot="renderItem" slot-scope="item, index">
-        <div class="card-a-col" :class="{ 'selected-active': enableSelectRow && currentSelectedIndex === index }" @click="handleCardClick(index)">
+        <div class="card-a-col" :class="{ 'selected-active': enableSelectRow && currentSelectedIndex === index }" :style="getCardStyle(currentTitleValue(index))" @click="handleCardClick(index)">
           <a-row class="card-row">
             <a-col class="id-a-col" :span="4" v-for="(detail,idx) in item.filter(d => d.label == label)" :key="idx">
-              {{ detail.value }}<span style="font-size: 16px;font-weight: 400 !important;">床</span>
+              {{ detail.value }}
+              <div class="gender-icon" v-if="getHasPatient(item) && getGender(item)">
+                <img :src="getGender(item) === '男' ? maleIcon : femaleIcon" :alt="getGender(item)" class="gender-img" />
+              </div>
             </a-col>
             <a-col :span="20" class="id-a-col-2">
               <template v-for="(detail,idx) in item">
-                <span class="describe-list-a-col" :class="{name: detail.bold}" :key="idx" v-if="detail.type == 'title'">{{ detail.value }}</span>
-                <span :key="idx" class="component-a-col" v-else-if="detail.type == 'component' && detail.label != label">
-                  {{ `${detail.label}：` }}
+                <div :key="`title_${idx}`" class="title-row" v-if="detail.type == 'title'">
+                  <a-tooltip :title="detail.value" placement="topLeft">
+                    <span class="describe-list-a-col" :class="{name: detail.bold}">{{ detail.value }}</span>
+                  </a-tooltip>
+                  <div class="title-actions" v-if="getTitleOptions && getTitleOptions.length">
+                    <span class="title-select-label">{{ getDisplayTitleLabel(index) }}</span>
+                    <a-dropdown placement="bottomRight" trigger="['click']">
+                      <a class="arrow-btn" @click.prevent>
+                        <a-icon type="down" />
+                      </a>
+                      <a-menu slot="overlay" :selectedKeys="[String(currentTitleValue(index))]" @click="info => handleTitleMenuClick(info, index)">
+                        <a-menu-item v-for="opt in getTitleOptions" :key="String(opt && opt.value !== undefined ? opt.value : opt)">
+                          {{ opt && opt.label !== undefined ? opt.label : opt }}
+                        </a-menu-item>
+                      </a-menu>
+                    </a-dropdown>
+                  </div>
+                </div>
+                <span :key="idx" class="component-a-col" v-else-if="getHasPatient(item) && detail.type == 'component' && detail.label != label">
+                  <a-tooltip :title="detail.label" placement="topLeft">
+                    <span class="label-text">{{ `${detail.label}：` }}</span>
+                  </a-tooltip>
                   <component
                     :is="detail.slotType"
                     :key="idx"
@@ -30,13 +52,18 @@
                     :countVisible="false"
                   />
                 </span>
-                <span :key="idx" class="component-a-col" v-else-if="detail.type == 'date'">
-                  {{ `${detail.label}：` }}
+                <span :key="idx" class="component-a-col" v-else-if="getHasPatient(item) && detail.type == 'date'">
+                  <a-tooltip :title="detail.label" placement="topLeft">
+                    <span class="label-text">{{ `${detail.label}：` }}</span>
+                  </a-tooltip>
                   <a-date-picker @change="onChange" />
                 </span>
-                <span class="describe-list-a-col" :class="{name: detail.bold}" :key="idx" v-else-if="detail.label != label">{{ `${detail.label}：${detail.value}` }}</span>
+                <a-tooltip :key="idx" :title="`${detail.label}：${detail.value}`" placement="topLeft" v-else-if="getHasPatient(item) && detail.label != label">
+                  <span class="describe-list-a-col" :class="{name: detail.bold}">{{ `${detail.label}：${detail.value}` }}</span>
+                </a-tooltip>
               </template>
               <a-button
+                v-if="getHasPatient(item) && showCardButtons"
                 v-for="(btn, i) in buttonNames"
                 :key="i"
                 icon="search"
@@ -154,9 +181,22 @@ export default {
     selectedIndex: {
       type: Number,
       default: undefined
+    },
+    // 卡片按钮显示控制（默认隐藏，可通过属性或配置开启）
+    showCardButtons: {
+      type: Boolean,
+      default: false
+    },
+    // 标题右侧下拉选项与受控值
+    titleSelectOptions: {
+      type: Array,
+      default: () => []
+    },
+    titleSelectValue: {
+      type: [String, Number],
+      default: undefined
     }
   },
-  inject: ['getComponentByName'],
   data () {
     return {
       data: [], // 数据源
@@ -180,9 +220,18 @@ export default {
       label: 'id',
       scrollTimer: null,
       // 内部选中索引（非受控时使用）
-      localSelectedIndex: -1
+      localSelectedIndex: -1,
+      maleIcon: require('@vue2-client/assets/svg/male.svg'),
+      femaleIcon: require('@vue2-client/assets/svg/female.svg'),
+      // 下拉配置
+      internalTitleOptions: [],
+      titleValueByIndex: {},
+      // 选择请求的轻量防抖
+      selectDebounceTimer: null
     }
   },
+  inject: ['getComponentByName'],
+
   created () {
     this.getData(this.queryParamsName, this.fixedQueryForm)
   },
@@ -203,6 +252,27 @@ export default {
       })
       return classes
     },
+    // 标题下拉：优先使用外部 props，否则使用内部配置
+    getTitleOptions () {
+      if (Array.isArray(this.titleSelectOptions) && this.titleSelectOptions.length) return this.titleSelectOptions
+      return this.internalTitleOptions
+    },
+    currentTitleValue () {
+      return (index) => {
+        if (this.titleSelectValue !== undefined) return this.titleSelectValue
+        const local = this.titleValueByIndex[index]
+        if (local !== undefined) return local
+        // 二次回退：若模板标题提供了 titleRightValue，则用于首屏渲染颜色与文案
+        const row = Array.isArray(this.localData) ? this.localData[index] : null
+        if (Array.isArray(row)) {
+          const title = row.find(d => d && d.type === 'title')
+          if (title && title.titleRightValue !== undefined) return title.titleRightValue
+        }
+        // 最终回退：使用 options 的第一个
+        const def = this.internalTitleOptions && this.internalTitleOptions.length ? (this.internalTitleOptions[0].value !== undefined ? this.internalTitleOptions[0].value : this.internalTitleOptions[0]) : undefined
+        return def
+      }
+    },
     // 选择控制：受控优先
     currentSelectedIndex () {
       return typeof this.selectedIndex === 'number' ? this.selectedIndex : this.localSelectedIndex
@@ -263,6 +333,15 @@ export default {
         that.label = await res.label // 标签
         that.buttonNames = await res.buttonNames || []// 按钮文本
         that.buttonMode = await res.buttonMode || false// 按钮模式
+        that.cardButtonsVisible = await res.cardButtonsVisible || false// 卡片按钮
+        // 标题下拉：从配置拿 options: [{label,value,color}]
+        if (Array.isArray(res.titleOptions)) {
+          this.internalTitleOptions = res.titleOptions
+          if (res.titleDefaultValue !== undefined && Array.isArray(this.localData)) {
+            // 初始化每个卡片的默认值
+            this.titleValueByIndex = {}
+          }
+        }
         this.enableHoverOptions = await res.enableHoverOptions || false// 悬浮选项框
         if (this.enableHoverOptions) {
           this.select_options = await res.select_options
@@ -270,10 +349,96 @@ export default {
         if (that.listMode) { param.condition = `Limit ${that.nowPage}, ${that.pageSize}` }
         runLogic(res.data, param, 'af-his').then(result => {
           that.data = result
-          if (that.nowPage == 0) { this.localData = result }
+          if (that.nowPage === 0) { this.localData = result }
+          // 初始化每张卡片的 title 选中值：优先读取模板 titleRightValue，否则使用配置默认或第一项
+          if (Array.isArray(this.localData)) {
+            this.localData.forEach((row, idx) => {
+              if (this.titleValueByIndex[idx] !== undefined) return
+              if (Array.isArray(row)) {
+                const title = row.find(d => d && d.type === 'title')
+                if (title && title.titleRightValue !== undefined) {
+                  this.$set(this.titleValueByIndex, idx, title.titleRightValue)
+                  return
+                }
+              }
+              // fallback：配置默认或第一项
+              const def = (this.internalTitleOptions && this.internalTitleOptions.length)
+                ? (this.internalTitleOptions[0].value !== undefined ? this.internalTitleOptions[0].value : this.internalTitleOptions[0])
+                : undefined
+              if (def !== undefined) this.$set(this.titleValueByIndex, idx, def)
+            })
+          }
         })
       })
     },
+    // 提取性别：从数组数据中查找 label 含“性别”的项
+    getGender (item) {
+      if (!Array.isArray(item)) return null
+      const g = item.find(d => d && typeof d.label === 'string' && d.label.indexOf('性别') > -1)
+      const val = g && (g.value || g.text)
+      if (!val) return null
+      if (String(val).includes('男')) return '男'
+      if (String(val).includes('女')) return '女'
+      return null
+    },
+    // 读取标题项上的 hasPatient 布尔值
+    getHasPatient (item) {
+      if (!Array.isArray(item)) return true
+      const title = item.find(d => d && d.type === 'title')
+      if (!title || typeof title.hasPatient === 'undefined') return true
+      return !!title.hasPatient
+    },
+    // 标题右侧下拉选择
+    handleTitleSelectChange (val, index) {
+      // 重复值拦截：若值未变化则直接返回
+      const prev = this.normalizeValue(this.currentTitleValue(index))
+      const next = this.normalizeValue(val)
+      if (prev === next) return
+
+      this.$set(this.titleValueByIndex, index, val)
+      this.$emit('update:titleSelectValue', val)
+      this.$emit('titleSelectChange', { index, value: val })
+      // 变更后仅通知后端更新，不处理返回值；支持从标题项读取 extraParams 合并（如住院号）
+      const extra = this.getTitleExtraParams(index)
+      if (this.selectDebounceTimer) clearTimeout(this.selectDebounceTimer)
+      this.selectDebounceTimer = setTimeout(() => {
+        runLogic(this.logicName, Object.assign({ type: 'select', value: val }, extra), 'af-his').catch(() => {})
+      }, 200)
+    },
+    // 读取标题项中额外需要传递的参数（可选），例如 { inpatientNo: row.t_id }
+    getTitleExtraParams (index) {
+      const row = Array.isArray(this.localData) ? this.localData[index] : null
+      if (!Array.isArray(row)) return {}
+      const title = row.find(d => d && d.type === 'title') || {}
+      if (title && title.extraParams && typeof title.extraParams === 'object') return title.extraParams
+      return {}
+    },
+    handleTitleMenuClick ({ key }, index) {
+      const v = isNaN(Number(key)) ? key : Number(key)
+      this.handleTitleSelectChange(v, index)
+    },
+    // 根据当前选择项的 color 设置卡片背景色
+    normalizeValue (v) { return String(v) },
+    getCardStyle (val) {
+      const target = this.normalizeValue(val)
+      const opt = (this.getTitleOptions || []).find(o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target)
+      const color = opt && (opt.color || (opt.style && opt.style.background))
+      return color ? { backgroundColor: color } : {}
+    },
+    getTitleLabel (val) {
+      const target = this.normalizeValue(val)
+      const opt = (this.getTitleOptions || []).find(o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target)
+      return opt && (opt.label !== undefined ? opt.label : opt)
+    },
+    getDisplayTitleLabel (index) {
+      // 优先展示“当前选中值”的 label，未选中再回退到模板提供的 titleRightLabel
+      const current = this.getTitleLabel(this.currentTitleValue(index))
+      if (current) return current
+      const title = Array.isArray(this.localData && this.localData[index])
+        ? this.localData[index].find(d => d && d.type === 'title')
+        : null
+      return title && title.titleRightLabel ? title.titleRightLabel : ''
+    },
     // 点击列表项
     handleClick (index) {
       if (this.enableSelectRow && this.selectOnClick) this.setSelectedIndex(index)
@@ -576,22 +741,75 @@ export default {
   font-size: 22px;
   font-weight: 700;
   display: flex;
-  justify-content: space-evenly;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.id-a-col-2{
+  padding: 8px;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-.id-a-col-2{}
 .describe-list-a-col{
   display: block;
+  font-family: Source Han Sans;
   font-size: 16px;
+  font-weight: normal;
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 .name{
-  font-size: 18px;
-  font-weight: 700;
+  font-family: Source Han Sans;
+  font-size: 22px;
+  font-weight: bold;
+  line-height: normal;
 }
 .component-a-col{
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
+.label-text{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+  display: inline-block;
+}
+.gender-icon{
+  margin-top: 2px;
+}
+.gender-icon .male{ color: #2f54eb; font-size: 14px; }
+.gender-icon .female{ color: #eb2f96; font-size: 14px; }
+.gender-img{ width: 100%; height: 100%; opacity: 1; display: inline-block; }
+.title-row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+/* 标题文本占满剩余空间，确保箭头贴右 */
+.title-row .describe-list-a-col{ flex: 1; }
+.title-actions{ display: inline-flex; align-items: center; gap: 6px; }
+.title-select-label{
+  font-family: Source Han Sans;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: normal;
+  color: #595959;
+}
+.title-select{ min-width: 96px; }
+.arrow-btn{ display: inline-flex; align-items: center; color: #8C8C8C; }
+.arrow-btn .anticon{ font-size: 18px; }
+/* 放大下拉箭头的 svg 尺寸以符合 UI（scoped 深度选择） */
+::v-deep .arrow-btn .anticon svg{ width: 2em; height: 2em; }
 .button-a-col{
   position: absolute;
   top: 245px;
@@ -603,5 +821,9 @@ export default {
   width: auto;
   border-radius: 6px;
   border: 1px solid #E5E9F0;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  margin: 10px;
 }
 </style>

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

@@ -4,7 +4,10 @@
       v-if="config.type === 'title'"
       class="x-title"
       :class="{ 'with-underline': config.line === 'line' }">
-      <span>{{ config.label }}</span>
+      <div class="title-content">
+        <div class="title-dot"></div>
+        <span>{{ config.label }}</span>
+      </div>
       <div
         v-if="config.line === 'line'"
         class="underline"
@@ -55,7 +58,7 @@ const attrs = useAttrs()
 const wrapperClassObject = computed(() => {
   const classes = {}
   const booleanStyleKeys = [
-  'center', 'littlefont'
+  'center', 'littlefont', 'dot', 'nodot'
   ]
   booleanStyleKeys.forEach(key => {
     const val = attrs[key]
@@ -151,4 +154,45 @@ onMounted(() => {
     }
   }
 }
+
+// dot 和 nodot 样式的公共部分
+.x-title-dot,
+.x-title-nodot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-content) {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    :deep(.title-dot) {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// dot 样式特有部分
+.x-title-dot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-dot) {
+      border-radius: 50%;
+      background-color: #3362DA;
+    }
+  }
+}
+
+// nodot 样式特有部分
+.x-title-nodot {
+  &.x-title-container,
+  .x-title-container {
+    :deep(.title-dot) {
+      /* 透明圆点，保持占位但不显示 */
+      background-color: transparent;
+    }
+  }
+}
 </style>