@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/BatchAddFieldDialog.vue

@@ -0,0 +1,590 @@
+<template>
+  <div>
+    <div class="batch-add-field-dialog__body">
+      <!-- 参数类型 -->
+      <div class="batch-add-field-dialog__section">
+        <div class="batch-add-field-dialog__label">参数类型</div>
+        <el-radio-group v-model="paramType">
+          <el-radio label="search" value="search">查询字段 (search.字段)</el-radio>
+          <el-radio label="bean" value="bean">新增字段 (bean.字段)</el-radio>
+        </el-radio-group>
+      </div>
+
+      <!-- 选择字段 -->
+      <div class="batch-add-field-dialog__section">
+        <div class="batch-add-field-dialog__field-header">
+          <span class="batch-add-field-dialog__label">选择字段</span>
+          <span class="batch-add-field-dialog__count">已选 {{ checkedCount }} / {{ flatLeafNodes.length }} 个字段</span>
+        </div>
+        <!-- 搜索 -->
+        <el-input
+          v-model="searchText"
+          placeholder="搜索字段名称或描述"
+          prefix-icon="el-icon-search"
+          clearable
+          class="batch-add-field-dialog__search"
+        />
+        <!-- 字段列表 -->
+        <div class="batch-add-field-dialog__list">
+          <!-- 全选 -->
+          <div class="batch-add-field-dialog__select-all">
+            <el-checkbox
+              v-model="isAllChecked"
+              :indeterminate="isIndeterminate"
+              @change="handleSelectAll"
+            >全选</el-checkbox>
+          </div>
+          <!-- 树形节点 -->
+          <div v-if="loading" class="batch-add-field-dialog__loading">
+            <i class="el-icon-loading"></i> 加载中...
+          </div>
+          <div v-else-if="filteredTree.length === 0" class="batch-add-field-dialog__empty">
+            <i class="el-icon-folder-opened"></i>
+            <span>暂无字段</span>
+          </div>
+          <template v-else>
+            <field-tree-node
+              v-for="node in filteredTree"
+              :key="node[nodeKey]"
+              :node="node"
+              :node-key="nodeKey"
+              :checked-keys="checkedKeys"
+              :param-type="paramType"
+              :search-text="searchText"
+              @check-change="handleCheckChange"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="batch-add-field-dialog__footer">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleConfirm" :disabled="checkedCount === 0">
+        确认添加 {{ checkedCount }} 个参数
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// @jsx-vue3（T30 JSX 批②：Vue3 JSX 语法）
+// 递归树节点子组件
+import { component } from '@epxing/core/src/mixins'
+const FieldTreeNode = {
+  name: 'FieldTreeNode',
+  props: {
+    node: Object,
+    nodeKey: String,
+    checkedKeys: Array,
+    paramType: String,
+    searchText: String,
+    depth: { type: Number, default: 0 }
+  },
+  data () {
+    return {
+      expanded: true
+    }
+  },
+  computed: {
+    isGroup () {
+      return this.node.disabled || this.node.type === 'meta'
+    },
+    hasChildren () {
+      return this.node.children && this.node.children.length > 0
+    },
+    paramKey () {
+      return `${this.paramType}.${this.node[this.nodeKey]}`
+    },
+    isChecked () {
+      return this.checkedKeys.includes(this.node[this.nodeKey])
+    },
+    // 叶子节点列表（当前分组下）
+    groupLeaves () {
+      return this.flatLeaves(this.node.children || [])
+    },
+    groupAllChecked () {
+      return this.groupLeaves.length > 0 && this.groupLeaves.every(n => this.checkedKeys.includes(n[this.nodeKey]))
+    },
+    groupIndeterminate () {
+      const checked = this.groupLeaves.filter(n => this.checkedKeys.includes(n[this.nodeKey]))
+      return checked.length > 0 && checked.length < this.groupLeaves.length
+    },
+    matchSearch () {
+      if (!this.searchText) return true
+      const kw = this.searchText.toLowerCase()
+      return (this.node.name || '').toLowerCase().includes(kw) ||
+        (this.node.text || '').toLowerCase().includes(kw) ||
+        (this.node[this.nodeKey] || '').toLowerCase().includes(kw)
+    },
+    hasMatchChild () {
+      if (!this.hasChildren) return false
+      return this.node.children.some(child => this.childMatch(child))
+    },
+    visible () {
+      return this.matchSearch || this.hasMatchChild
+    }
+  },
+  methods: {
+    flatLeaves (nodes) {
+      const result = []
+      nodes.forEach(node => {
+        if (node.disabled || node.type === 'meta') {
+          if (node.children) result.push(...this.flatLeaves(node.children))
+        } else if (!node.children || node.children.length === 0) {
+          result.push(node)
+        } else {
+          result.push(...this.flatLeaves(node.children))
+        }
+      })
+      return result
+    },
+    childMatch (node) {
+      const kw = (this.searchText || '').toLowerCase()
+      if (!kw) return true
+      const selfMatch = (node.name || '').toLowerCase().includes(kw) ||
+        (node.text || '').toLowerCase().includes(kw) ||
+        (node[this.nodeKey] || '').toLowerCase().includes(kw)
+      if (selfMatch) return true
+      if (node.children) return node.children.some(c => this.childMatch(c))
+      return false
+    },
+    onGroupCheckChange (val) {
+      this.groupLeaves.forEach(n => {
+        this.$emit('check-change', n[this.nodeKey], val)
+      })
+    },
+    onChange (val) {
+      this.$emit('check-change', this.node[this.nodeKey], val)
+    }
+  },
+  render (h) {
+    if (!this.visible) return null
+    const indent = this.depth * 16
+
+    // 分组行（对象节点）
+    if (this.isGroup) {
+      const groupRow = h('div', {
+        class: 'field-tree-node__group',
+        style: { paddingLeft: (indent + 14) + 'px' }
+      }, [
+        h('el-checkbox', {
+          props: { value: this.groupAllChecked, indeterminate: this.groupIndeterminate },
+          on: { change: this.onGroupCheckChange },
+          nativeOn: { click: e => e.stopPropagation() }
+        }),
+        h('i', {
+          class: ['field-tree-node__arrow', this.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'],
+          on: { click: () => { this.expanded = !this.expanded } }
+        }),
+        h('span', {
+          class: 'field-tree-node__group-name',
+          on: { click: () => { this.expanded = !this.expanded } }
+        }, this.node.name || this.node.text)
+      ])
+
+      const children = this.expanded && this.hasChildren
+        ? this.node.children.map(child =>
+          h('FieldTreeNode', {
+            props: {
+              node: child,
+              nodeKey: this.nodeKey,
+              checkedKeys: this.checkedKeys,
+              paramType: this.paramType,
+              searchText: this.searchText,
+              depth: this.depth + 1
+            },
+            on: { 'check-change': (key, val) => this.$emit('check-change', key, val) }
+          })
+        )
+        : []
+
+      return h('div', { class: 'field-tree-node' }, [groupRow, ...children])
+    }
+
+    // 叶子字段行
+    return h('div', { class: 'field-tree-node' }, [
+      h('div', {
+        class: ['field-tree-node__item', { 'field-tree-node__item--checked': this.isChecked }],
+        style: { paddingLeft: (indent + 14) + 'px' }
+      }, [
+        h('el-checkbox', {
+          props: { value: this.isChecked },
+          on: { change: this.onChange }
+        }),
+        h('div', { class: 'field-tree-node__info' }, [
+          h('div', { class: 'field-tree-node__title-row' }, [
+            h('span', { class: 'field-tree-node__name' }, this.node.name || this.node.text)
+          ]),
+          (this.node.label || this.node.attriLabel) && h('span', { class: 'field-tree-node__desc' },
+            this.node.label || this.node.attriLabel
+          )
+        ]),
+        h('span', { class: 'field-tree-node__param-key' }, this.paramKey)
+      ]),
+      this.hasChildren && this.node.children.map(child =>
+        h('FieldTreeNode', {
+          props: {
+            node: child,
+            nodeKey: this.nodeKey,
+            checkedKeys: this.checkedKeys,
+            paramType: this.paramType,
+            searchText: this.searchText,
+            depth: this.depth + 1
+          },
+          on: { 'check-change': (key, val) => this.$emit('check-change', key, val) }
+        })
+      )
+    ])
+  }
+}
+export default {
+  name: 'epx-batch-add-ai-tool-param',
+  mixins: [component],
+  components: { FieldTreeNode },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 字段配置，参考 FieldTreeFind
+    fieldConfig: {
+      type: Object,
+      default () { return {} }
+    },
+    // 确认回调
+    onConfirm: Function
+  },
+  data () {
+    return {
+      paramType: 'search',
+      searchText: '',
+      treeData: [],
+      checkedKeys: [],
+      loading: false
+    }
+  },
+  computed: {
+    nodeKey () {
+      return this.fieldConfig.dataKey || 'linkCode'
+    },
+    // 展开后的所有叶子节点（可选的）
+    flatLeafNodes () {
+      return this.flatLeaves(this.treeData)
+    },
+    filteredTree () {
+      return this.treeData
+    },
+    checkedCount () {
+      return this.checkedKeys.length
+    },
+    isAllChecked () {
+      return this.flatLeafNodes.length > 0 && this.checkedKeys.length === this.flatLeafNodes.length
+    },
+    isIndeterminate () {
+      return this.checkedKeys.length > 0 && this.checkedKeys.length < this.flatLeafNodes.length
+    }
+  },
+  methods: {
+    flatLeaves (nodes) {
+      const result = []
+      nodes.forEach(node => {
+        if (node.disabled || node.type === 'meta') {
+          if (node.children) result.push(...this.flatLeaves(node.children))
+        } else if (!node.children || node.children.length === 0) {
+          result.push(node)
+        } else {
+          result.push(...this.flatLeaves(node.children))
+        }
+      })
+      return result
+    },
+    formatData (data) {
+      data.forEach(item => {
+        item.name = item.text
+        if (item.type === 'meta') {
+          item.disabled = true
+        }
+        if (item.children) {
+          this.formatData(item.children)
+        }
+      })
+    },
+    async getData () {
+      this.loading = true
+      if (!this.$query.entityId) {
+        this.loading = false
+        return
+      }
+      this.$http.$post({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.$query.entityId,
+        relationSort: '2,3'
+      })
+        .then(data => {
+          this.formatData(data)
+          this.treeData = data
+        })
+        .catch(err => {
+          this.$message.error(err.message || '获取字段失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleCheckChange (key, checked) {
+      if (checked) {
+        if (!this.checkedKeys.includes(key)) {
+          this.checkedKeys = [...this.checkedKeys, key]
+        }
+      } else {
+        this.checkedKeys = this.checkedKeys.filter(k => k !== key)
+      }
+    },
+    handleSelectAll (val) {
+      if (val) {
+        this.checkedKeys = this.flatLeafNodes.map(n => n[this.nodeKey])
+      } else {
+        this.checkedKeys = []
+      }
+    },
+    handleConfirm () {
+      const { callback } = this.$query
+      const selectedNodes = this.flatLeafNodes.filter(n => this.checkedKeys.includes(n[this.nodeKey]))
+      selectedNodes.forEach(item => {
+        // eslint-disable-next-line standard/no-callback-literal
+        callback && callback({
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          CATEGORY: 'field',
+          FIELD: item.id,
+          FIELD_CODE: item.linkCode,
+          NAME: `${this.paramType}.${item.linkCode}`,
+          DESC: item.name || item.text
+        })
+      })
+      this.handleCancel()
+    },
+    handleCancel () {
+      this.backPage()
+    }
+  },
+  mounted () {
+    this.getData()
+  }
+}
+</script>
+
+<style lang="scss">
+.batch-add-field-dialog {
+  .el-dialog__header {
+    border-bottom: 2px dashed #4a90e2;
+    padding-bottom: 16px;
+  }
+  .el-dialog__footer {
+    border-top: 2px dashed #4a90e2;
+    padding-top: 16px;
+  }
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__label {
+    font-size: var(--epx-font-size-base);
+    color: var(--epx-text);
+    font-weight: 500;
+  }
+
+  &__field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__count {
+    font-size: 13px;
+    color: var(--epx-text);
+  }
+
+  &__search {
+    .el-input__inner {
+      border-radius: 20px;
+    }
+  }
+
+  &__list {
+    border: 1px solid var(--epx-border);
+    border-radius: var(--epx-radius-base);
+    max-height: 392px;
+    overflow-y: auto;
+    background: #f7f9fc;
+  }
+
+  &__select-all {
+    padding: 8px 14px;
+    background: var(--epx-bg);
+    border-bottom: 2px solid var(--epx-border);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    font-weight: 500;
+  }
+
+  &__loading {
+    padding: 20px;
+    text-align: center;
+    color: var(--epx-text-secondary);
+  }
+
+  &__empty {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--epx-text-secondary);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+
+    i {
+      font-size: 40px;
+    }
+
+    span {
+      font-size: 13px;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+}
+
+.field-tree-node {
+  &__group {
+    display: flex;
+    align-items: center;
+    padding: 10px 14px;
+    margin-top: 4px;
+    background: var(--epx-bg-card);
+    border-bottom: 1px solid var(--epx-border);
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+    border-left: 3px solid #4a90e2;
+
+    &:hover {
+      background: #f0f5ff;
+    }
+  }
+
+  &__arrow {
+    font-size: 11px;
+    color: var(--epx-text-secondary);
+    flex-shrink: 0;
+    transition: color 0.15s;
+  }
+
+  &__group-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #4a90e2;
+    flex: 1;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 9px 14px 9px 28px;
+    border-bottom: 1px solid #f5f5f5;
+    gap: 12px;
+    transition: background 0.15s;
+
+    &:hover {
+      background: #f9fafc;
+    }
+
+    &--checked {
+      background: #f0f5ff;
+
+      .field-tree-node__name {
+        color: #4a90e2;
+      }
+
+      .field-tree-node__param-key {
+        color: #4a90e2;
+        background: #ddeaff;
+        border-color: #b3ceff;
+      }
+    }
+  }
+
+  &__info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--epx-text);
+    letter-spacing: 0.3px;
+  }
+
+  &__type-tag {
+    font-size: 11px;
+    color: var(--epx-text);
+    background: #f0f0f0;
+    border: 1px solid #e0e0e0;
+    padding: 0 5px;
+    border-radius: 3px;
+    line-height: 18px;
+  }
+
+  &__desc {
+    font-size: var(--epx-font-size-s);
+    color: var(--epx-text-secondary);
+  }
+
+  &__param-key {
+    font-size: var(--epx-font-size-s);
+    color: var(--epx-text-secondary);
+    background: #f0f4ff;
+    border: 1px solid #e0e8ff;
+    padding: 3px 8px;
+    border-radius: var(--epx-radius-base);
+    white-space: nowrap;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: monospace;
+    flex-shrink: 0;
+    text-align: center;
+    line-height: 1.4;
+  }
+}
+</style>

package/src/components/CardO.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-card shadow="never" class="card">
+    <template v-slot:header><div class="card-header" v-if="showTitle">
+      <i :class="icon"></i>
+      <span>{{title}}</span>
+      <slot name="tabs">
+
+      </slot>
+    </div></template>
+    <div class="card-content">
+      <slot></slot>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'epx-card-o',
+  props: {
+    title: String,
+    icon: String,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px; // 默认间隔
+.card{
+  // margin-bottom: 20px;
+  margin-bottom: $paddingSize;
+  border-radius: var(--epx-radius-base);
+  box-shadow: 0px 0px 8px 0px rgba(117, 117, 117, 0.1);
+  // &::v-deep{
+  //   // >.el-card__body {
+  //   //   // padding-bottom: 0;
+  //   // }
+  // }
+  // &::v-deep{
+  //   >.el-card__body {
+  //     padding: $paddingSize;
+  //   }
+  // }
+}
+@media only screen and (max-width: 992px) {
+  .card{
+    margin-bottom: 20px;
+
+      :deep(>.el-card__body) {
+        padding: 0px;
+        // padding-bottom: 20px;
+      }
+
+  }
+}
+// .cardPadding{
+//   // &::v-deep{
+//   //   >.el-card__body {
+//   //     // padding: 0;
+//   //     text-align: center;
+//   //   }
+//   // }
+//   ::v-deep .icon-card {
+//     margin-bottom: 0px;
+//   }
+// }
+// .cardPadding::v-deep .el-card__body{
+//   padding: 0;
+//   text-align: center;
+// }
+.card-header {
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  // font-weight: 600;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  i {
+    font-size: var(--epx-font-size-xl);
+    margin-right: 8px;
+    position: relative;
+    top: 1px;
+    color: var(--epx-text);
+  }
+
+    :deep(>.tabs) {
+      // font-size: var(--epx-font-size-l);
+      font-size: var(--epx-font-size-base);
+      color: var(--epx-text);
+      margin-left: 20px;
+      font-weight: normal;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 88%;
+      font {
+        cursor: pointer;
+        &:hover, &.active {
+          @include font_color_primary;
+        }
+      }
+      .el-input{
+        width: 22%;
+      }
+    }
+
+}
+
+</style>