vue2-client 1.13.2 → 1.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "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

@@ -48,10 +48,10 @@
         <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'].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'].includes(panel.type)">
           <component
             :is="getComponentName(panel.type)"
-            :ref="`dynamicComponent_${ panel.type }`"
+            :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
             serverName="af-his"
             :queryParamsName="panel.configName"
             :parameter="panel.parameter"
@@ -89,7 +89,8 @@ export default {
     XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
     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')
+    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue')
   },
   data () {
     return {

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

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="text-card">
+      <!-- 添加顶部按钮区域 -->
+      <div class="text-card-header">
+        <div class="add-button" @click="handleAddClick">
+          <span class="plus-icon">+</span>
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in displayItems"
+        :key="index"
+        class="text-item"
+        @click="handleItemClick(index)"
+        @contextmenu.prevent="handleContextMenu(index)">
+        <div class="text-content" :class="{ 'is-empty': !item.content }">
+          {{ item.content || '点击添加内容' }}
+        </div>
+      </div>
+      <!-- 编辑弹出框 -->
+      <div
+        v-if="showEdit"
+        class="edit-overlay"
+        @click.self="handleOverlayClick">
+        <div class="edit-card">
+          <a-textarea
+            v-model="editingContent"
+            :autoSize="{ minRows: 3 }"
+            @keyup.enter="handleSave"
+            ref="textarea"/>
+        </div>
+      </div>
+      <!-- 删除确认弹框 -->
+      <a-modal
+        v-model="showDeleteModal"
+        title="确认删除"
+        okText="确认"
+        cancelText="取消"
+        @ok="handleDeleteConfirm">
+        <p>确定要删除这条内容吗？</p>
+      </a-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTextCard',
+  props: {
+    // logic配置名,要求返回一个数组[]
+    queryParamsName: {
+      type: String,
+      default: 'memorandumLOGIC'
+    },
+    queryParams: {
+      type: Object,
+      default: () => { return {} }
+    },
+    // 请求参数
+    parameter: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      localItems: [], // 本地数据
+      showEdit: false, // 是否显示编辑框
+      editingIndex: -1, // 当前编辑的索引
+      editingContent: '', // 编辑框的内容
+      showDeleteModal: false, // 是否显示删除确认框
+      deleteIndex: -1, // 要删除的项目索引
+    }
+  },
+  computed: {
+    // 显示的列表，始终保持一个空行
+    displayItems () {
+      const items = [...this.localItems]
+      // 如果最后一项不是空的，添加一个空项
+      if (!items.length || items[items.length - 1].content) {
+        items.push({ content: '' })
+      }
+      return items
+    }
+  },
+  methods: {
+    // 添加新方法
+    handleAddClick () {
+      // 直接打开编辑框，索引设为数组长度（等同于点击最后一个空行）
+      this.editingIndex = this.localItems.length
+      this.editingContent = ''
+      this.showEdit = true
+      this.$nextTick(() => {
+        this.$refs.textarea?.focus()
+      })
+    },
+    // 点击项目
+    handleItemClick (index) {
+      this.editingIndex = index
+      this.editingContent = this.displayItems[index].content
+      this.showEdit = true
+      this.$nextTick(() => {
+        this.$refs.textarea?.focus()
+      })
+    },
+    // 点击遮罩层保存
+    handleOverlayClick () {
+      this.handleSave()
+    },
+    // 保存内容
+    handleSave () {
+      if (this.editingContent.trim()) {
+        if (this.editingIndex === this.localItems.length) {
+          // 如果是在最后一个空行添加，push新内容
+          this.localItems.push({ content: this.editingContent.trim() })
+        } else {
+          // 否则更新现有内容
+          this.localItems[this.editingIndex].content = this.editingContent.trim()
+        }
+        // 触发更新事件
+        this.$emit('add', this.editingContent.trim())
+      }
+      this.showEdit = false
+      this.editingIndex = -1
+      this.editingContent = ''
+    },
+    // 初始化数据
+    async initData (data, parameter) {
+      // 从配置中获取数据
+      const resData = await runLogic(data, parameter, 'af-his')
+      this.localItems = resData.map(content => ({ content: content }))
+      return resData
+    },
+    // 处理右键菜单
+    handleContextMenu (index) {
+      // 如果是最后一个空行，不显示删除框
+      if (index === this.localItems.length) {
+        return
+      }
+      this.deleteIndex = index
+      this.showDeleteModal = true
+    },
+    // 确认删除
+    handleDeleteConfirm () {
+      if (this.deleteIndex > -1) {
+        this.localItems.splice(this.deleteIndex, 1)
+        this.$emit('delete', [...this.localItems][this.deleteIndex])
+        this.deleteIndex = -1
+      }
+      this.showDeleteModal = false
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        this.initData(newVal, this.parameter)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.text-card {
+  position: relative;
+  width: 100%;
+  // 添加头部样式
+  .text-card-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    .add-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s;
+      &:hover {
+        background-color: #f5f5f5;
+      }
+      .plus-icon {
+        font-size: 20px;
+        line-height: 1;
+        color: #5D5C5C;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .text-item {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none; // 防止文本被选中
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    .text-content {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.5;
+
+      &.is-empty {
+        color: #bfbfbf;
+      }
+    }
+  }
+  .edit-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .edit-card {
+      background: white;
+      padding: 16px;
+      border-radius: 8px;
+      width: 90%;
+      max-width: 500px;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+      .ant-input {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>