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

package/src/components/PageChart.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="container">
+    <organization-chart :class="['org-chart', 'l2r']" :datasource="{name: page.title, editable: false, children: pageList}" :pan="true" :zoom="true">
+      <template v-slot="{ nodeData }">
+        <div class="org-node" title="nodeData.name">
+          <div class="org-node__title">
+            <span>{{nodeData.name}}</span>
+          </div>
+          <div class="org-node__operate">
+            <!-- <i class="el-icon-arrow-right" @click="openPageList"></i> -->
+            <i class="el-icon-edit-outline" v-if="nodeData.editable!==false" @click="openEditDrawer(nodeData)"></i>
+          </div>
+        </div>
+      </template>
+    </organization-chart>
+  </div>
+</template>
+
+<script>
+// T33：created() 里用了 registerComponent / defineAsyncComponent 却**从来没 import**
+// —— 这两行是 HEAD 就缺的（上一批 COMPONENT_ASYNC 改造漏加），一进本组件就 ReferenceError。
+import { defineAsyncComponent } from 'vue'
+import { registerComponent } from '@epxing/core/src/app'
+
+export default {
+  name: 'epx-page-chart',
+  props: {
+    page: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    selectComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      pageList: []
+    }
+  },
+  watch: {
+    selectComponentList: {
+      handler (v) {
+
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getComponentsConfigs (selectComponentList, upId) {
+      selectComponentList.forEach(item => {
+        // 获取组件所属
+        item.component = this.componentMap[item.contentType]
+        const id = upId ? upId + '-' + item.id : item.id
+        item.compId = id
+        const { itemConfigs = {} } = this.pageConfigs
+        const configs = itemConfigs[id] || {}
+        item.configs = { ...(item.configs || {}), ...configs }
+        if (item.items) this.getComponentsConfigs(item.items, id)
+      })
+    },
+    getComponentMap () {
+      if (this.componentMap) return
+      const componentMap = {}
+      this.componentList.forEach(item => {
+        componentMap[item.CODE] = item
+      })
+      this.componentMap = componentMap
+    },
+    // T29/$children：原写法是 `this.$parent.$parent.$children[1].$children[2]` ——
+    // 靠**组件树的位置索引**去摸 Config 里的 <epx-visual-config-item>。这既依赖 el-tab-pane 的
+    // 内部层级（切 EP 后必碎），又依赖兄弟顺序。Vue3 也已移除 $children。
+    // 改成：向上按**组件名**找到 <epx-visual-config>（epx-page-chart 就渲染在它的 el-tab-pane 里），
+    // 再取它模板上明确标了 ref 的 `visualComponent`（= <epx-visual-config-item>，
+    // 也就是持有 `$refs['config-item-<id>']` 的那个组件）。
+    _findVisualConfig () {
+      let p = this.$parent
+      while (p) {
+        if (p.$options.name === 'epx-visual-config') return p
+        p = p.$parent
+      }
+      return null
+    },
+    getPage () {
+      const comp = this._findVisualConfig()
+      if (comp) {
+        const configComp = comp.$refs.visualComponent
+        if (configComp) {
+          this.configComp = configComp
+          this.getPageTree(this.selectComponentList)
+          if (this.pageList.length > 0) {
+            this.$http.getLabel({
+              entityId: 'FM_PAGE_CONFIG',
+              id: this.pageList.map(item => item.id).join(',')
+            })
+              .then(data => {
+                const labels = data.label.split(',')
+                labels.forEach((label, index) => {
+                  this.pageList.splice(index, 1, { ...this.pageList[index], name: label })
+                })
+              })
+          }
+        }
+      }
+    },
+    getPageTree (componentList) {
+      componentList.forEach(item => {
+        // T29/$children：`config-item-<id>` 这个 ref 挂在 <epx-component> 上（见 ConfigItem.vue），
+        // 其内渲染的可视化配置组件带 ref="component" → `$children[0]` ≡ `$refs.component`。
+        const comp = this.configComp.$refs[`config-item-${item.compId}`]
+        const inner = comp && comp.$refs.component
+        const configOptions = (inner && inner.configOptions) || []
+        configOptions.forEach(option => {
+          if (option.type === 'object' && option.object === 'FM_PAGE_CONFIG') {
+            const pageId = item.configs[option.key]
+            if (pageId) {
+              // 获取页面信息
+              this.pageList.push({
+                id: pageId,
+                option,
+                component: item
+              })
+            }
+          } else if (option.type === 'operates') {
+            const operates = item.configs[option.key] || []
+            operates.forEach(operate => {
+              if (operate.pageId) {
+                this.pageList.push({
+                  id: operate.pageId,
+                  option,
+                  component: item
+                })
+              }
+            })
+          } else if (option.type && option.type.includes('field')) {
+            const fields = item.configs[option.key] || []
+            fields.forEach(field => {
+              if (typeof field === 'object') {
+                if (field.detailPageId) {
+                  this.pageList.push({
+                    id: field.addPageId,
+                    option,
+                    component: item
+                  })
+                }
+                if (field.addPageId) {
+                  this.pageList.push({
+                    id: field.addPageId,
+                    option,
+                    component: item
+                  })
+                }
+              }
+            })
+          }
+        })
+        if (item.items) {
+          this.getPageTree(item.items)
+        }
+      })
+    },
+    openEditDrawer (node) {
+      this.$createPage({
+        metaId: 'FM_PAGE_CONFIG',
+        flag: 'v_visual_page_config',
+        component: 'visual-config',
+        id: node.id,
+        title: node.name,
+        pageType: 'EDIT'
+      })
+    }
+  },
+  created () {
+    const that = this
+    const { config = {} } = this.page
+    this.pageConfigs = config
+    // T33：原为 **Vue2 resolve 回调式异步组件**（`Vue.component(name, resolve => …)` + webpack 的
+    // require.ensure）。Vue3 无 resolve 回调；关掉 compat 的 COMPONENT_ASYNC 后 resolve 不再注入
+    // （同 loadComponent.js 的坑）→ 改用 Vue3 原生 defineAsyncComponent + 动态 import。
+    // orgchart.css 已随 vendor/OrganizationChart.vue 内部静态 import（见该文件头注释：纯 CSS 动态导入
+    // 在 lib CJS 构建下产生悬空 chunk require），这里不再单独 import css，懒加载语义不变。
+    registerComponent('OrganizationChart', defineAsyncComponent(() =>
+      import('@epxing/components/src/org-chart/vendor/OrganizationChart.vue')
+        .then((m) => m.default || m)
+        .catch(err => {
+          that.$message.error('插件初始化失败，请重新打开页面')
+          throw err
+        })
+    ))
+    this.getComponentMap()
+    this.getComponentsConfigs(this.selectComponentList)
+    this.getPage()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+    :deep(.org-chart__drawer) {
+      .el-drawer__body {
+        height: 100%;
+        padding-bottom: 50px;
+        box-sizing: border-box;
+      }
+    }
+    :deep(.orgchart-container) {
+      box-sizing: border-box;
+      height: 100%;
+      overflow: hidden;
+      background: var(--epx-bg-card);
+      .node {
+        width: 160px;
+      }
+      .node:hover {
+        background: none;
+      }
+      .downLine {
+        width: 1px;
+         background: #ccc;
+       }
+
+       .leftLine, .topLine {
+        border-width: 1px;
+        border-color: #ccc;
+      }
+      .rightLine {
+         border-right: 1px solid transparent;
+       }
+       .orgchart {
+         background-image:linear-gradient(90deg,rgba(180,0,0,.1) 10%,transparent 0),linear-gradient(rgba(180,0,0,.1) 10%,transparent 0);
+       }
+    }
+
+}
+.org-chart.l2r {
+  position: relative;
+
+    :deep(.orgchart) {
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: rotate(-90deg) rotateY(180deg);
+      transform-origin: left top;
+    }
+    :deep(.node) {
+      width:50px;
+      height: 130px;
+    }
+
+  .org-node {
+    width: 130px;
+    transform: rotate(-90deg) translate(-20px,-40px) rotateY(180deg);
+    transform-origin: bottom center;
+  }
+}
+.org-node {
+  padding: 0 16px;
+  position: relative;
+  &:hover {
+    .org-node__title {
+       box-shadow: 2px 2px 5px 5px rgba(0,0,0,.2) ;
+    }
+    .org-node__operate {
+      display: flex;
+    }
+  }
+}
+.org-node__title {
+    cursor: pointer;
+    @include bg_color_primary;
+    color: #fff;
+    border: 1px solid;
+    @include border_color_primary;
+    font-size: 13px;
+    height: 40px;
+    line-height: 38px;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: var(--epx-radius-base);
+}
+.org-node__operate {
+  position: absolute;
+  right:  -12px;
+  top: 0;
+  top: -50%;
+  color: #bbbec4;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  i {
+    display: block;
+    font-size: var(--epx-font-size-xl);
+    padding: 2px 0;
+    cursor: pointer;
+  }
+}
+.button-group {
+    position: absolute;
+    height: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    background: var(--epx-bg-card);
+    box-shadow: 0 -2px 16px rgba(0 ,0 ,0 , .1);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  .button {
+    margin: 0 16x;
+  }
+
+}
+.drawer-body {
+  height: 100%;
+  overflow: auto;
+}
+</style>

package/src/components/PageSwipes.vue

@@ -0,0 +1,234 @@
+<template>
+  <!-- <el-tabs :style="$component.style" class="tabs" v-model="activeName" :type="type" @tab-click="handleClick">
+    <el-tab-pane v-for="component in components" :key="component.id" :label="componentLabel(component)" :name="component.id" lazy >
+      <component v-bind="$forwardAttrs($attrs)" class="component"
+        :ref="component.id"
+
+        :is="'epx-' + component.contentType"
+        :id="getComponentId(component)"
+        :title="component.title"
+        :contentType="component.contentType"
+        :comp-configs="component.configs"
+        :items="component.items"
+      />
+    </el-tab-pane>
+  </el-tabs> -->
+  <!-- ⚠️ 这段是**占位脚手架，不是真功能**：渲染的是字面量 1/2/3/4。上面被注释掉的 el-tabs
+       才是本组件的真正意图（script 里至今仍在维护 components / componentLabel / counts）。
+       P2b-2 只做「摘掉 Vant」这一件事，**不顺手改成渲染 components**——那是功能变更，不在本批范围。
+       原写法是 van-swipe（:autoplay="0" indicator-color="white"）：autoplay=0 即不自动轮播，
+       ——这里刻意不写成带尖括号的标签形式：check-vant-usage 的剥注释有个已知局限，
+       跨行 HTML 注释的**中间行不剥离**，写全了会被当成真实用量计入基线（实测 5→1 而非 5→0）。
+       所以这里也不加定时器；indicator 用下面的圆点复刻，滚动位置驱动激活态。
+       没有为它新建 mobile 原子件：全仓 swipe 只有这一处、内容还是假的，造原子件不会有第二个用户。 -->
+  <div class="my-swipe">
+    <div class="my-swipe__track" ref="swipeTrack" @scroll.passive="onSwipeScroll">
+      <div class="my-swipe__item" v-for="n in 4" :key="n">{{ n }}</div>
+    </div>
+    <div class="my-swipe__dots">
+      <i v-for="n in 4" :key="n" class="my-swipe__dot" :class="{ 'is-active': swipeIndex === n - 1 }"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { evalWith } from '@epxing/utils/src/eval-with'
+export default {
+  name: 'epx-page-swipes',
+  mixins: [component],
+  items: [],
+  style: {
+    'margin-bottom': '0'
+  },
+  data () {
+    return {
+      activeName: '',
+      counts: {},
+      // 轮播当前页下标，仅用于圆点指示器的激活态（复刻原 van-swipe 的 indicator）
+      swipeIndex: 0
+    }
+  },
+  computed: {
+    type () {
+      const { type = (this.$isMobile ? '' : 'card') } = this.$configs
+      return type === 'card' ? 'card' : ''
+    },
+    components () {
+      const { items = [] } = this.$component
+      return items
+    },
+    componentLabel () {
+      return component => {
+        const count = this.counts[component.id]
+        if (count !== undefined) {
+          return `${component.title}(${count || 0})`
+        }
+        return component.title
+      }
+    }
+  },
+  methods: {
+    handleClick () {
+
+    },
+    beforeInitComponent () {
+      if (this.$isMobile) {
+        this.$component.style = { margin: 0, ...this.$component.style }
+      }
+    },
+    // 滚动位置 → 当前页下标。scroll 事件用 .passive 修饰：这里只读不 preventDefault，
+    // 非 passive 监听会让移动端浏览器无法提前判定手势、拖动时掉帧。
+    onSwipeScroll () {
+      const el = this.$refs.swipeTrack
+      // clientWidth 为 0 说明还没布局完（或被 display:none 藏着），此时算出的下标恒为 0，
+      // 直接跳过而不是写入一个假值。
+      if (!el || !el.clientWidth) return
+      this.swipeIndex = Math.round(el.scrollLeft / el.clientWidth)
+    }
+  },
+  created () {
+    // 获取标签页内列表数量
+    const { tabIndex = 1 } = this.$query
+    if (this.components.length > 0) {
+      const firstItem = this.components[tabIndex - 1]
+      this.activeName = firstItem.id
+      // 获取标签页数量
+      // 格式化参数
+
+      this.components.forEach(component => {
+        if (component.tabCount) {
+          const scopeParams = this.$_.cloneDeep(component.countScopeParams || [])
+
+          const that = this
+          for (const scopeKey in scopeParams) {
+            const scope = scopeParams[scopeKey]
+            let values = scope.values
+            if (/\$\[(.+)\]/.test(values)) {
+              values = values.replace(/\$\[(.+)\]/, (match, key) => {
+                try {
+                  return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+                } catch (error) {
+                  return scope.values
+                }
+              })
+            }
+            scope.values = values
+          }
+          const params = component.countParams || {}
+          this.$http.getCount({
+            entityId: this.$metaId,
+            scopeParams: JSON.stringify(scopeParams),
+            ...params
+          })
+            .then(data => {
+              if (data.total || data.total === 0) {
+                this.counts[component.id] = data.total || 0
+              } else {
+                this.counts[component.id] = data
+              }
+            })
+        }
+      })
+    }
+  },
+  watch: {
+    activeName () {
+      this.$nextTick(() => {
+        // this.components.forEach(component => {
+        //   let instance = this.$refs[component.id]
+        //   if (instance && instance[0]) {
+        //     instance = instance[0]
+        //     instance.$on('listData', params => {
+        //       // 根据id获取子组件
+        //       if (!this.counts[component.id]) {
+        //         this.$set(this.counts, component.id, params.total)
+        //       }
+        //     })
+        //   }
+        // })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 复刻原 van-swipe 的观感：横向整页吸附 + 底部圆点指示器。
+// 用原生 scroll-snap 而不是 JS 轮播：手势跟手、无定时器、无第三方依赖。
+.my-swipe {
+  position: relative;
+
+  &__track {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    // 隐藏滚动条：轮播靠手势 + 圆点指示，露出滚动条会破坏观感。
+    // 两条都要写：scrollbar-width 是标准属性，::-webkit-scrollbar 覆盖 WebKit/Blink。
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__item {
+    // 每屏一项：flex-basis 100% 且不许收缩，否则四项会被挤在一屏里。
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+  }
+
+  &__dots {
+    display: flex;
+    justify-content: center;
+    gap: var(--epx-space-1);
+    padding: var(--epx-space-1) 0;
+  }
+
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--epx-border);
+
+    // 原写法是 indicator-color="white"（Vant 默认深色底上的白点）。这里改用主题色，
+    // 因为本组件并没有深色底——白点在浅色背景上等于看不见。走换肤 mixin 而不是硬编码。
+    &.is-active {
+      @include bg_color_primary;
+    }
+  }
+}
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+    :deep(.el-tabs__header) {
+      background: var(--epx-bg-card);
+      margin: 0;
+    }
+    :deep(>.el-tabs__content) {
+      flex: 1;
+      overflow: hidden;
+      >.el-tab-pane {
+        height: 100%;
+        overflow: auto;
+        margin-left: -9px;
+        // margin-top: -10px;
+      }
+    }
+    :deep(.el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2),  .el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2)) {
+      padding: 0 20px;
+    }
+
+  .component {
+
+      &:not(.layout):not(.epx-base-page) {
+        margin: 0 10px;
+      }
+
+  }
+}
+
+</style>

package/src/components/PersonFormItem.vue

@@ -0,0 +1,94 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import AddFormItemVue from '@epxing/components/src/add-form-item'
+export default {
+  name: 'epx-person-form-item',
+  extends: AddFormItemVue,
+  methods: {
+    unBind (fieldConfigs) {
+      this.$confirm('确认解绑?', this.$t('hint'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.$post({
+          action: 'unBind',
+          entityId: 'FM_USER',
+          provider: fieldConfigs.attriName === 'WECHAT_OPEN_ID' ? 'wechat' : fieldConfigs.attriName === 'QY_WECHAT_ID' ? 'wechatMP' : fieldConfigs.attriName === 'DING_TALK_ID' ? 'dingtalk' : 'qq'
+
+        })
+          .then(data => {
+            this.$message.success('解绑成功')
+            if (this.form) {
+              this.form.$refesh()
+            }
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    renderForm () {
+      if (this.fieldsConfigs.length > 0) {
+        return (
+          <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} v-model={this.data} column={this.column} labelAlign={this.$configs.labelAlign}
+            v-slots={{
+              default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                return fieldConfigs.attriName === 'WECHAT_OPEN_ID' || fieldConfigs.attriName === 'QY_WECHAT_ID' || fieldConfigs.attriName === 'DING_TALK_ID' || fieldConfigs.attriName === 'QQ_OPEN_ID' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                    <el-input
+                      v-model={this.data[fieldConfigs.attriName]}
+                      readonly={true}
+                      v-slots={{
+                        prepend: () => fieldConfigs.attriLabel,
+                        // ⚠️ EP 判断的是 $slots.append 这个插槽**存在**，不是它的返回值——
+                        // 插槽函数哪怕 return undefined，$slots.append 依然是个函数、依然为真，
+                        // el-input 照样渲染一块空的 append addon（灰底、未绑定时的常态）。
+                        // 必须条件构造 slots 对象本身（未绑定时这个 key 干脆不存在），不能在
+                        // 插槽函数里 return undefined 让它"看起来没内容"。
+                        ...(this.data[fieldConfigs.attriName] ? {
+                          append: () => <el-button size="small" type="primary" onClick={this.unBind.bind(this, fieldConfigs)}>解绑</el-button>
+                        } : {})
+                      }}
+                    />
+                  </epx-table-form-item>
+                ) : (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                  </epx-table-form-item>
+                )
+              }
+            }}
+          >
+          </epx-table-form>
+        )
+      }
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>