@epxing/business 5.3.0-beta.2 → 5.3.0-beta.4

package/src/components/custom-bpmn/PropertiesView.vue

@@ -125,6 +125,17 @@
                     </epx-table-form-item>
                   </div>
                 </li>
+                <li class="attribute-item">
+                  <div class="bpmn-node-properties__attribute-input">
+                    <label class="bpmn-node-properties__attribute-input__label">申请查看页面参数</label>
+                    <epx-visual-config-params
+                      :value="elementValues['camunda:applyViewPageParams']"
+                      :treeFieldStore="treeFieldStore"
+                      :showParamsType="['str', 'field']"
+                      @change-configs="v=> (elementValues['camunda:applyViewPageParams'] = v)"
+                    ></epx-visual-config-params>
+                  </div>
+                </li>
                 <li class="attribute-item">
                   <div class="bpmn-node-properties__attribute-input">
                     <label class="bpmn-node-properties__attribute-input__label">办理页面</label>
@@ -2960,13 +2971,13 @@
                       <div class="bpmn-node-properties__attribute-input-type">
                             <el-select v-model="revertScopeType" placeholder="请选择" @change="v=> {
                   elementValues['camunda:revertScopeType']=v
-                  if(v==='1'){
                   this.revertScope =''
+                  this.revertScopeList =[]
                   elementValues['camunda:revertScope']=''
-                  }
                   }" >
                               <el-option label="上个节点" value="1"></el-option>
                               <el-option label="指定节点" value="2"></el-option>
+                              <el-option label="办理人自选" value="3"></el-option>
                             </el-select>
                       </div>
                       <div v-if="revertScopeType==='2'" class="bpmn-node-properties__attribute-input-type">
@@ -2989,6 +3000,21 @@
                           </el-option>
                         </el-select>
                       </div>
+                      <div v-if="revertScopeType==='3'" class="bpmn-node-properties__attribute-input-type">
+                        <el-select style="width:220px" multiple collapse-tags v-model="revertScopeList" placeholder="不限（所有已审节点）" @change="v=> {
+                            elementValues['camunda:revertScope']=(v || []).join(',')
+                          }"
+                          clearable
+                        >
+                          <el-option
+                            v-for="item in revertNodeParamList"
+                            :key="item.code"
+                            :label="item.name"
+                            :value="item.code"
+                            >
+                          </el-option>
+                        </el-select>
+                      </div>
                     </div>
                   </li>
                   <li class="attribute-item">
@@ -3947,6 +3973,8 @@ export default {
       selectOperate: {},
       revertScopeType: '',
       revertScope: '',
+      // 办理人自选退回时的候选节点白名单，与 revertScope 逗号串互转
+      revertScopeList: [],
       revertNodeParamList: [],
       linkEntityList: [],
       editFieldScopeDialog: false,
@@ -4418,6 +4446,7 @@ export default {
             'camunda:repealStatus': $attrs['camunda:repealStatus'],
             'camunda:repealDeleteProcessData': $attrs['camunda:repealDeleteProcessData'] || '0',
             'camunda:applyViewPage': $attrs['camunda:applyViewPage'],
+            'camunda:applyViewPageParams': $attrs['camunda:applyViewPageParams'] ? JSON.parse($attrs['camunda:applyViewPageParams']) : {},
             'camunda:assigneeFinishShowStyle': $attrs['camunda:assigneeFinishShowStyle'] || 'default',
             'camunda:repealStatus#': $attrs['camunda:repealStatus#'],
             'camunda:applyViewPage-name': $attrs['camunda:applyViewPage-name'],
@@ -4467,7 +4496,7 @@ export default {
           }
           if (key.includes('.i18n') && v[key]) {
             params[key] = JSON.stringify(v[key])
-          } else if (key === 'camunda:assigneePageParams' && v[key]) {
+          } else if ((key === 'camunda:assigneePageParams' || key === 'camunda:applyViewPageParams') && v[key]) {
             params[key] = JSON.stringify(v[key])
           }
           if (this.element.type === 'bpmn:SequenceFlow' && key === 'camunda:conditionRule') {
@@ -6465,6 +6494,8 @@ export default {
         this.revertScopeType = revertScopeType
         const { 'camunda:revertScope': revertScope = '' } = this.elementValues
         this.revertScope = revertScope
+        // 自选退回的候选白名单以逗号串存储，回显时拆成数组供多选控件使用
+        this.revertScopeList = revertScope ? revertScope.split(',') : []
       } else if (this.element.type.includes('Flow')) {
         const { 'camunda:flowOperate': flowOperate = '' } = this.elementValues
         this.flowOperate = flowOperate
@@ -7039,7 +7070,7 @@ export default {
 <style lang="scss">
 .bpmn-node-properties__attribute-list{
   padding: 0 16px;
-  // &::v-deep{
+  // &::v-deep {
     // EP 的输入框盒子是 .el-input__wrapper，.el-input__inner 只是里面的裸 <input>
     // （element-ui 时代反过来）。高度打在 __inner 上 → 实际框高 = 值 + wrapper 上下各 1px，
     // 且 --el-input-height 仍停在默认 32px，__prefix/__suffix/清除按钮的行高都按它算。

package/src/components/custom-bpmn/index.js

@@ -1 +1 @@
-export { default } from '@epxing/components/src/progress-chart/vendor/custom-bpmn/index'
+export { default } from '@epxing/components/src/progress-chart/vendor/custom-bpmn/index'

package/src/components/icon-gallery/IconGallery.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="epx-remix-gallery">
+    <aside class="epx-remix-gallery__nav" aria-label="图标分类">
+      <h3>图标分类</h3>
+      <el-input v-model="categoryKeyword" placeholder="搜索分类" clearable aria-label="搜索分类" />
+      <button type="button" :class="{ active: !category }" @click="category = ''">全部分类</button>
+      <button v-for="item in navigation" :key="item.code" type="button" :class="{ active: category === item.code }" @click="category = item.code">{{ item.name }}</button>
+    </aside>
+    <main class="epx-remix-gallery__main">
+      <header class="epx-remix-gallery__header">
+        <div><h2>Remix Icon</h2><span>{{ loading ? '正在加载图标…' : `${filteredIcons.length} 个图标 · ${actionLabel}` }}</span></div>
+        <el-input v-model="keyword" placeholder="搜索名称、编号或关键词" clearable aria-label="搜索图标" />
+      </header>
+      <div v-if="error" class="epx-remix-gallery__state" role="alert"><p>{{ error }}</p><el-button @click="$emit('reload')">重新加载</el-button></div>
+      <div v-else-if="loading" class="epx-remix-gallery__state" role="status">正在加载完整图标库…</div>
+      <div v-else ref="content" class="epx-remix-gallery__content">
+        <div v-if="!groups.length" class="epx-remix-gallery__state">未找到匹配的图标，请更换分类或关键词</div>
+        <section v-for="group in groups" :key="group.code" class="epx-remix-gallery__section" :aria-label="group.name">
+          <h3>{{ group.name }} <span>{{ group.icons.length }}</span></h3>
+          <div class="epx-remix-gallery__grid">
+            <button v-for="icon in group.icons" :key="icon.CODE" type="button" class="epx-remix-gallery__icon" :class="{ selected: selectedCodes.includes(icon.CODE) }" :title="icon.CODE" :aria-label="`${actionLabel} ${icon.CODE}`" :aria-pressed="selectedCodes.includes(icon.CODE)" @click="$emit('select', icon)">
+              <i :class="icon.CODE" aria-hidden="true"></i><span>{{ icon.NAME || icon.CODE }}</span>
+            </button>
+          </div>
+        </section>
+      </div>
+      <footer v-if="$slots.footer" class="epx-remix-gallery__footer"><slot name="footer"></slot></footer>
+    </main>
+  </div>
+</template>
+
+<script>
+import { ensureIcons } from '@epxing/icons/src/runtime.mjs'
+
+export default {
+  name: 'epx-remix-gallery',
+  props: {
+    icons: { type: Array, default: () => [] },
+    categories: { type: Array, default: () => [] },
+    selectedCodes: { type: Array, default: () => [] },
+    loading: Boolean,
+    error: { type: String, default: '' },
+    actionLabel: { type: String, default: '点击复制编号' }
+  },
+  emits: ['select', 'reload'],
+  data () {
+    return { keyword: '', category: '', categoryKeyword: '' }
+  },
+  computed: {
+    remixIcons () {
+      return this.icons.filter(icon => icon.CODE && icon.CODE.startsWith('ri-'))
+    },
+    categoryNames () {
+      return Object.fromEntries(this.categories.map(item => [item.code, item.name.replace(/^Remix\s*·\s*/, '')]))
+    },
+    navigation () {
+      const keyword = this.categoryKeyword.trim().toLowerCase()
+      return this.categories.map(item => ({ code: item.code, name: this.categoryNames[item.code] }))
+        .filter(item => `${item.code} ${item.name}`.toLowerCase().includes(keyword))
+    },
+    filteredIcons () {
+      const words = this.keyword.trim().toLowerCase().split(/\s+/).filter(Boolean)
+      return this.remixIcons.filter(icon => {
+        if (this.category && icon.TYPE !== this.category) return false
+        const text = `${icon.CODE} ${icon.NAME || ''} ${icon.KEY_WORDS || ''} ${this.categoryNames[icon.TYPE] || ''}`.toLowerCase()
+        return words.every(word => text.includes(word))
+      })
+    },
+    groups () {
+      const groups = new Map(this.categories.map(item => [item.code, { code: item.code, name: this.categoryNames[item.code], icons: [] }]))
+      this.filteredIcons.forEach(icon => {
+        const code = icon.TYPE || 'ri_others'
+        if (!groups.has(code)) groups.set(code, { code, name: '其他', icons: [] })
+        groups.get(code).icons.push(icon)
+      })
+      return [...groups.values()].filter(group => group.icons.length)
+    }
+  },
+  watch: {
+    icons: {
+      immediate: true,
+      handler (icons) {
+        // 批量补齐动态图标，避免为数千个卡片各建一个加载组件。
+        ensureIcons(icons.filter(icon => icon.CODE && icon.CODE.startsWith('ri-')).map(icon => icon.CODE))
+      }
+    },
+    keyword: 'resetScroll',
+    category: 'resetScroll'
+  },
+  methods: {
+    resetScroll () {
+      if (this.$refs.content) this.$refs.content.scrollTop = 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+.epx-remix-gallery { display: flex; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; max-height: calc(100vh - 120px); overflow: hidden; color: var(--el-text-color-primary, #202124); background: var(--el-bg-color, #fff); border: 1px solid var(--el-border-color-light, #e5e7eb); border-radius: 6px; }
+/* 选择弹窗默认距顶部 15vh，预留上下留白及标题、页面容器的空间。 */
+.epx-remix-gallery--selectable { height: min(600px, calc(70vh - 140px)); }
+.epx-remix-gallery__nav { flex: 0 0 180px; min-height: 0; padding: 20px 12px; overflow-y: auto; background: var(--el-fill-color-light, #f7f8fa); border-right: 1px solid var(--el-border-color-light, #e5e7eb); }
+.epx-remix-gallery h3 { margin: 0 0 16px; font-size: 15px; }
+.epx-remix-gallery__nav .el-input { margin-bottom: 12px; }
+.epx-remix-gallery__nav button { display: block; width: 100%; padding: 10px 12px; margin-bottom: 3px; border: 0; border-radius: 6px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
+.epx-remix-gallery__nav button:hover, .epx-remix-gallery__nav button.active { color: var(--el-color-primary, #4080ff); background: var(--el-color-primary-light-9, #eef4ff); }
+.epx-remix-gallery__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.epx-remix-gallery__header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--el-border-color-light, #e5e7eb); }
+.epx-remix-gallery__header h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
+.epx-remix-gallery__header span, .epx-remix-gallery__section h3 span { color: var(--el-text-color-secondary, #8b8f98); font-size: 12px; font-weight: normal; }
+.epx-remix-gallery__header .el-input { width: 320px; max-width: 50%; }
+.epx-remix-gallery__content { flex: 1; min-height: 0; padding: 24px; overflow-y: auto; }
+.epx-remix-gallery__section { margin-bottom: 32px; content-visibility: auto; contain-intrinsic-size: auto 500px; }
+.epx-remix-gallery__section h3 span { margin-left: 8px; }
+.epx-remix-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
+.epx-remix-gallery__icon { display: flex; min-width: 0; height: 104px; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 12px 6px; border: 1px solid transparent; border-radius: 6px; color: inherit; background: transparent; cursor: pointer; }
+.epx-remix-gallery__icon i { font-size: 28px; line-height: 1; }
+.epx-remix-gallery__icon span { width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.epx-remix-gallery__icon:hover, .epx-remix-gallery__icon.selected { color: var(--el-color-primary, #4080ff); background: var(--el-fill-color-light, #f7f8fa); border-color: var(--el-color-primary-light-7, #c9dcff); }
+.epx-remix-gallery button:focus-visible { outline: 2px solid var(--el-color-primary, #4080ff); outline-offset: -2px; }
+.epx-remix-gallery__state { flex: 1; padding: 60px 24px; text-align: center; color: var(--el-text-color-secondary, #8b8f98); }
+.epx-remix-gallery__footer { flex-shrink: 0; padding: 12px 20px; text-align: right; border-top: 1px solid var(--el-border-color-light, #e5e7eb); }
+@media (max-width: 640px) {
+  .epx-remix-gallery__nav { flex-basis: 112px; padding: 12px 6px; }
+  .epx-remix-gallery__header { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
+  .epx-remix-gallery__header .el-input { width: 100%; max-width: none; }
+  .epx-remix-gallery__content { padding: 16px; }
+  .epx-remix-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
+}
+</style>

package/src/components/icon-gallery/mixin.jsx

@@ -0,0 +1,109 @@
+import IconGallery from './IconGallery.vue'
+
+// 分页读完当前范围；校验完整性，不能把固定条数上限当作完整图标库。
+export async function loadAllIcons (http, params, isCurrent = () => true) {
+  const icons = []
+  const codes = new Set()
+  let total = 0
+  for (let page = 1; page === 1 || icons.length < total; page++) {
+    const result = await http.list({ ...params, page, limit: 500, order_field: 'CODE', order_mode: 'asc' })
+    if (!isCurrent()) return null
+    total = Number(result.total)
+    const batch = result.entitys || []
+    if (!Number.isFinite(total) || total < 0 || (!batch.length && icons.length < total)) throw new Error('图标数据未加载完整，请重新加载')
+    for (const icon of batch) {
+      if (!icon.CODE || codes.has(icon.CODE)) throw new Error('图标分页数据重复，请重新加载')
+      codes.add(icon.CODE)
+      icons.push(icon)
+    }
+    if (icons.length > total) throw new Error('图标数据发生变化，请重新加载')
+  }
+  return icons.filter(icon => icon.CODE.startsWith('ri-'))
+}
+
+export default {
+  components: { IconGallery },
+  data () {
+    return {
+      galleryCategories: [],
+      galleryError: '',
+      // 请求代次阻止已取消或已卸载组件的旧结果覆盖当前数据。
+      galleryRequest: 0
+    }
+  },
+  beforeUnmount () {
+    this.galleryRequest++
+  },
+  methods: {
+    initComponent () {
+      if (!this.showFlag) return
+      // 图标墙使用同一套字段权限与取数流程，不走父类的移动端列表分流。
+      this.listType = this.$configs.type
+      this.getDefaultOperates()
+      this.getFields()
+    },
+    // 分类与搜索由图标墙统一呈现，不再加载父类的分类树。
+    getCategoryMeta () {},
+    getCategoryTreeData () {},
+    async getData (current, cb) {
+      if (!this.$metaId) return
+      const request = ++this.galleryRequest
+      const isCurrent = () => request === this.galleryRequest
+      this.cancelGetData = () => { this.galleryRequest++ }
+      this.loading = true
+      this.galleryError = ''
+      try {
+        const scope = JSON.parse(this.params.scopeParams || '[]').map(item => ({ ...item }))
+        if (scope.length) {
+          scope[0].lb = '(' + (scope[0].lb || '')
+          scope[scope.length - 1].rb = (scope[scope.length - 1].rb || '') + ')'
+          scope[scope.length - 1].link = 'and'
+        }
+        scope.push({ field: 'CODE', mode: 'like', values: 'ri-%', link: 'and' })
+        const field = this.$meta.getAllFieldConfigs().find(item => item.attriName === 'TYPE')
+        const [categories, icons] = await Promise.all([
+          this.$http.getCodes({ key: (field && field.codeKey) || 'ICON_TYPE' }),
+          loadAllIcons(this.$http, {
+            ...this.params,
+            entityId: this.$metaId,
+            scopeParams: JSON.stringify(scope),
+            columnFields: ['CODE', 'NAME', 'TYPE', 'KEY_WORDS'].map(attriName => ({ attriName }))
+          }, isCurrent)
+        ])
+        if (!isCurrent()) return
+        this.galleryCategories = (categories || []).filter(item => item.code && item.code.startsWith('ri_'))
+        this.data = icons
+        this.total = icons.length
+        this.initData = true
+        this.getAllDataMap(icons)
+        if (this.afterData) this.afterData(icons)
+        if (cb) cb(icons)
+        if (this.$component) {
+          const result = { id: this.$component.id, total: this.total, entitys: icons }
+          this.$dispatchPage('listData', [result])
+          this.$emit('listData', result)
+        }
+      } catch (err) {
+        if (!isCurrent()) return
+        this.galleryError = (err && (err.msg || err.message)) || '图标库加载失败，请重新加载'
+        this.$message.error(this.galleryError)
+      } finally {
+        if (isCurrent()) this.loading = false
+      }
+    },
+    renderGallery (selectable = false) {
+      return (
+        <IconGallery class={{ 'epx-remix-gallery--selectable': selectable }} icons={this.data} categories={this.galleryCategories} selectedCodes={selectable ? this.selectionIds : []} style={this.showFlag === false ? { display: 'none' } : {}}
+          loading={!this.initData || this.loading} error={this.galleryError} actionLabel={selectable ? '点击选择图标' : '点击复制编号'}
+          onSelect={this.chooseIcon} onReload={() => this.getData()} v-slots={selectable && this.mode === 'confirm' ? {
+            footer: () => (
+              <div>
+                <el-button onClick={this.cancel}>取消</el-button>
+                <el-button type="primary" onClick={this.confirm}>确定</el-button>
+              </div>
+            )
+          } : {}} />
+      )
+    }
+  }
+}