vue2-client 1.15.45 → 1.15.46

package/package.json

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

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

@@ -2,14 +2,23 @@
   <div>
     <a-collapse
       :activeKey="activeKey"
-      @change="handleChange">
+      @change="handleChange"
+      :bordered="config.bordered || true"
+      :expand-icon-position="config.expandIconPosition || 'right'"
+      :style="config.style || ''"
+    >
       <a-collapse-panel
         v-for="(panel, panelIndex) in config.showData"
         :key="panelIndex.toString()"
-        :show-arrow="false"
+        :show-arrow="config.showArrow || false"
         :disabled="config.collapsible">
         <template #header>
           <div class="header-content">
+            <!-- 新增蓝色圆点图标，根据配置显示 -->
+            <div
+              v-if="config.showCircleIcon"
+              class="blue-circle-icon"
+              :style="config.circleIconStyle || {}"></div>
             <span
               class="header-text"
               :style="config.titleStyle">
@@ -44,19 +53,30 @@
               @click.stop/>
           </div>
         </template>
+
+        <!-- 新增设置图标，根据配置显示 -->
+        <template #extra v-if="config.showSettingIcon">
+          <a-icon
+            v-if="activeKey.includes(panelIndex.toString())"
+            :type="config.settingIconType || 'setting'"
+            class="setting-icon"
+            @click.stop="handleSettingClick(panel, panelIndex)"/>
+        </template>
+
         <!-- 根据类型显示不同内容 -->
         <template v-if="panel.type === 'picture'">
           <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
         </template>
-        <template v-else-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card'].includes(panel.type)">
+        <template v-else-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card','x-tree-rows'].includes(panel.type)">
           <component
             :is="getComponentName(panel.type)"
             :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
-            serverName="af-his"
+            :serverName="panel.serverName || 'af-his'"
             :queryParamsName="panel.configName"
             :parameter="panel.parameter"
             :countVisible="false"
             :env="env"
+            :style="config.componentStyle || ''"
             @deleteData="deleteData"
             @add="add"
             @listClick="listClick"
@@ -92,7 +112,8 @@ export default {
     XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
     XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
     XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
-    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue')
+    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue'),
+    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue')
   },
   data () {
     return {
@@ -146,6 +167,7 @@ export default {
     },
     async getData (config, parameter) {
       this.configName = config
+      config = 'collapseTestConfig'
       getConfigByName(config, 'af-his', res => {
         this.config = res
         console.warn(this.config)
@@ -160,7 +182,12 @@ export default {
             })
             this.$forceUpdate()
           }
-          this.activeKey = this.config.showData.map((_, panelIndex) => panelIndex.toString())
+          const shouldCollapseAll = this.config.collapseAllByDefault || false
+          console.log('11', this.config.collapseAllByDefault)
+          // 初始化展开状态
+          this.activeKey = shouldCollapseAll
+            ? []
+            : this.config.showData.map((_, i) => i.toString())
         })
       })
     },
@@ -179,10 +206,14 @@ export default {
     },
     handleChange (keys) {
       this.activeKey = keys
+      // console.log(this.activeKey)
     },
     onSearch (value, panelIndex) {
       this.$emit('searchChange', { value: value, panelIndex: panelIndex })
     },
+    handleSettingClick (panel, panelIndex) {
+      this.$emit('settingClick', { panel, panelIndex })
+    }
   },
   watch: {
     queryParamsName: {
@@ -230,6 +261,7 @@ export default {
   position: relative;
   border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
   align-items: center !important;
+  background-color: #ffffff;
 }
 
 :deep(.ant-collapse-header-text) {
@@ -250,4 +282,45 @@ export default {
 :deep(.ant-collapse-item-disabled > .ant-collapse-header) {
   cursor: default !important;
 }
+
+/* 新增样式 */
+.blue-circle-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #3362da;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.setting-icon {
+  font-size: 16px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  line-height: 1;
+  vertical-align: middle;
+  margin-top: -20px; /* 微调偏移量（根据实际情况调整） */
+}
+
+:deep(.ant-collapse-extra) {
+  display: flex !important;
+  align-items: center;
+}
+
+.configurable-area {
+  padding: 16px;
+  min-height: 100px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+
+.empty-hint {
+  color: #999;
+  text-align: center;
+  margin: 20px 0;
+}
 </style>

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

@@ -1,197 +1,237 @@
-<template>
-  <div class="tree-container">
-    <div class="tree-header">
-      <span class="tree-title">{{ title }}</span>
-      <span class="tree-expand-all" @click="isToOpenAll" v-if="isShowOpen">
-        {{ isExpanded ? '收起' : '全部展开' }}
-      </span>
-    </div>
-    <div class="tree-list">
-      <tree-node
-        v-for="node in showData"
-        :key="node.id"
-        :node="node"
-        @toggle="toggleNode"/>
-    </div>
-  </div>
-</template>
-
-<script>
-import TreeNode from '@vue2-client/base-client/components/his/XTreeRows/TreeNode.vue'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XTreeRows',
-  components: {
-    TreeNode
-  },
-  props: {
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    isOpenAll: {
-      type: Boolean,
-      default: false
-    },
-    parameter: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data () {
-    return {
-      treeData: [
-        {
-          id: '1',
-          title: '体征',
-          expanded: false,
-          children: [
-            {
-              id: '1-1',
-              title: '一般情况'
-            },
-            {
-              id: '1-2',
-              title: '皮肤粘膜'
-            },
-            {
-              id: '1-3',
-              title: '头颈',
-              expanded: false,
-              children: [
-                {
-                  id: '1-3-1',
-                  title: '头部头部头部头部头部头部头部头部头部头部头部头部头部头部',
-                  expanded: false,
-                  children: [
-                    {
-                      id: '1-3-1-1',
-                      title: '123456'
-                    }
-                  ]
-                },
-                {
-                  id: '1-2-2',
-                  title: '颈部'
-                }
-              ]
-            },
-            {
-              id: '1-4',
-              title: '胸部'
-            },
-          ]
-        }
-      ],
-      isExpanded: false,
-      showData: [],
-      isShowOpen: true,
-      title: '标题'
-    }
-  },
-  methods: {
-    toggleNode (node) {
-      node.expanded = !node.expanded
-      this.$emit('node-toggle', node)
-    },
-    isToOpenAll () {
-      this.isExpanded = !this.isExpanded
-      this.expandAllNodes(this.showData, this.isExpanded)
-      this.$emit('isOpenAll', this.isExpanded)
-    },
-    expandAllNodes (nodes, expand) {
-      nodes.forEach(node => {
-        if (node.children && node.children.length > 0) {
-          node.expanded = expand
-          this.expandAllNodes(node.children, expand)
-        }
-      })
-    },
-    init (config, parameterData) {
-      getConfigByName(config, 'af-his', res => {
-        this.isShowOpen = res.isShowOpen
-        this.title = res.title
-        console.log(res)
-        if (!res.isCheck) {
-          this.showData = res.showData
-          return
-        }
-        const parameter = { ...parameterData, ...this.parameter }
-        runLogic(res.logicName, parameter, 'af-his').then(result => {
-          this.showData = result
-        })
-      })
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (newValue) {
-        console.log(newValue)
-        this.init(newValue, {})
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tree-container {
-  width: 100%;
-  height: 320px;
-  overflow-y: auto;
-  overflow-x: auto;
-  padding: 6px;
-  box-sizing: border-box;
-}
-/* 自定义滚动条样式 */
-.tree-container::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-.tree-container::-webkit-scrollbar-thumb {
-  background-color: #ccc;
-  border-radius: 2px;
-}
-.tree-container::-webkit-scrollbar-track {
-  background-color: #f5f5f5;
-}
-.tree-list {
-  font-size: 14px;
-  min-width: 100%;
-}
-
-.tree-header {
-  padding: 8px 4px;
-  border-bottom: 1px solid #e8e8e8;
-  margin-bottom: 8px;
-  position: sticky;
-  top: 0;
-  background-color: #fff;
-  z-index: 1;
-}
-
-.tree-title {
-  font-size: 16px;
-  font-weight: 700;
-  color:#5D5C5C;
-}
-
-.tree-expand-all {
-  float: right;
-  margin-right: 15px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #5D5C5C;
-  cursor: pointer;
-  user-select: none;
-}
-
-.tree-expand-all:hover {
-  color: #989a9a;
-}
-</style>
+<template>
+  <div class="tree-container">
+    <div class="tree-header">
+      <span class="tree-title" :style="config.style">{{ title }}</span>
+      <span class="tree-expand-all" @click="isToOpenAll" v-if="isShowOpen">
+        {{ isExpanded ? '收起' : '全部展开' }}
+      </span>
+    </div>
+    <div class="tree-list">
+      <tree-node
+        v-for="node in showData"
+        :key="node.id"
+        :node="node"
+        @toggle="toggleNode"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import TreeNode from '@vue2-client/base-client/components/his/XTreeRows/TreeNode.vue'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTreeRows',
+  components: {
+    TreeNode
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    isOpenAll: {
+      type: Boolean,
+      default: false
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      treeData: [
+        // {
+        //   id: '1',
+        //   title: '体征',
+        //   expanded: false,
+        //   children: [
+        //     {
+        //       id: '1-1',
+        //       title: '一般情况'
+        //     },
+        //     {
+        //       id: '1-2',
+        //       title: '皮肤粘膜'
+        //     },
+        //     {
+        //       id: '1-3',
+        //       title: '头颈',
+        //       expanded: false,
+        //       children: [
+        //         {
+        //           id: '1-3-1',
+        //           title: '头部头部头部头部头部头部头部头部头部头部头部头部头部头部',
+        //           expanded: false,
+        //           children: [
+        //             {
+        //               id: '1-3-1-1',
+        //               title: '123456'
+        //             }
+        //           ]
+        //         },
+        //         {
+        //           id: '1-2-2',
+        //           title: '颈部'
+        //         }
+        //       ]
+        //     },
+        //     {
+        //       id: '1-4',
+        //       title: '胸部'
+        //     },
+        //   ]
+        // }
+      ],
+      isExpanded: false,
+      showData: [],
+      isShowOpen: true,
+      title: '标题',
+      config: {}
+    }
+  },
+  methods: {
+    toggleNode (node) {
+      console.log('触发')
+      node.expanded = !node.expanded
+      this.$emit('node-toggle', node)
+    },
+    isToOpenAll () {
+      console.log('展开事件触发')
+      this.isExpanded = !this.isExpanded
+      this.expandAllNodes(this.showData, this.isExpanded)
+      this.$emit('isOpenAll', this.isExpanded)
+    },
+    expandAllNodes (nodes, expand) {
+      nodes.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          node.expanded = expand
+          this.expandAllNodes(node.children, expand)
+        }
+      })
+    },
+    /**
+     * 构建树数据
+     * @param allData 子节点所有数据
+     * @param gid 根节点id
+     * @returns {*|*[]}
+     */
+    buildTreeByRootId (allData, gid) {
+      console.log(allData, gid)
+      // 1. 找到所有直接子节点
+      const directChildren = allData.filter(item => item.pid === gid)
+      if (directChildren.length === 0) return [] // 如果没有子节点，返回空数组
+      // 2. 递归构建子树
+      const buildTree = (parentId) => {
+        const children = allData.filter(item => item.pid === parentId)
+        return children.map(child => ({
+          title: child.label,
+          id: child.value,
+          children: buildTree(child.value), // 递归处理子节点
+        }))
+      }
+      console.log('child', directChildren)
+      // 3. 返回直接子节点的完整子树
+      return directChildren.map(child => ({
+        title: child.label,
+        id: child.value,
+        children: buildTree(child.value),
+        expanded: false
+      }))
+    },
+    init (config, parameterData) {
+      getConfigByName(config, 'af-his', res => {
+        console.log('config', config)
+        this.isShowOpen = res.isShowOpen
+        this.title = res.title
+        this.config = res
+        console.log(res)
+        if (!res.isCheck) {
+          this.showData = res.showData
+          return
+        }
+        const parameter = { ...parameterData, ...this.parameter }
+        runLogic(res.logicName, parameter, 'af-his').then(result => {
+          console.log('构造前数据', result)
+          if (result.isConstruction) { // 对数据重新构造
+            this.showData = this.buildTreeByRootId(result.allData, result.gId)
+            console.log('构造后数据', this.showData)
+          } else {
+            this.showData = result
+          }
+        })
+      })
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newValue) {
+        console.log(newValue)
+        this.init(newValue, {})
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-container {
+  width: 100%;
+  height: 320px;
+  overflow-y: auto;
+  overflow-x: auto;
+  padding: 6px;
+  box-sizing: border-box;
+}
+/* 自定义滚动条样式 */
+.tree-container::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tree-container::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 2px;
+}
+.tree-container::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+.tree-list {
+  font-size: 14px;
+  min-width: 100%;
+}
+
+.tree-header {
+  padding: 8px 4px;
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 8px;
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 1;
+}
+
+.tree-title {
+  font-size: 16px;
+  font-weight: 700;
+  color:#5D5C5C;
+}
+
+.tree-expand-all {
+  float: right;
+  margin-right: 15px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #5D5C5C;
+  cursor: pointer;
+  user-select: none;
+}
+
+.tree-expand-all:hover {
+  color: #989a9a;
+}
+</style>