npmapps 1.0.25 → 1.0.27

package/app/src/views/element/elTableJsx/simpleTable.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <PageHeader title="简单表格" description="展示基础 JSX 表格用法，支持通过 columns 配置列、data 渲染数据" usage="&lt;elTableJsx :columns=&quot;columns&quot; :tableData=&quot;tableData&quot; /&gt;" />
+    <elTableJsx
+      :columns="columns"
+      :tableData="tableData"
+      stripe
+      @cell-click="onCellClick"
+    >
+      <template #header-left>
+        <span>header-left</span>
+      </template>
+      <!-- <template #header-right>
+        <span>header-right</span>
+      </template> -->
+    </elTableJsx>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue';
+import elTableJsx from "./elTableJsx.vue";
+export default {
+  components: {
+    PageHeader,
+    elTableJsx,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: "基本信息",
+          key: "basic",
+          width: "600",
+          props: {
+            align: "center",
+          },
+          children: [
+            {
+              label: "姓名",
+              key: "name",
+              props: {
+                align: "center",
+                width: "220",
+              },
+            },
+            {
+              label: "性别",
+              key: "gender",
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+            {
+              label: "年龄",
+              key: "age",
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+          ],
+        },
+
+        {
+          label: "电话",
+          key: "phone",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "邮箱",
+          key: "email",
+          props: {
+            align: "center",
+            minWidth: "300",
+          },
+        },
+        {
+          label: "住址",
+          key: "address",
+          props: {
+            align: "center",
+            minWidth: "350",
+          },
+        },
+
+        {
+          label: "部门",
+          key: "department",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "职位",
+          key: "position",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "入职时间",
+          key: "entryDate",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+      ],
+      tableData: [
+        {
+          name: "张三",
+          gender: "男",
+          age: 28,
+          phone: "13812345678",
+          email: "zhangsan@example.com",
+          address: "北京市海淀区中关村大街1号",
+          department: "研发部",
+          position: "高级工程师",
+          entryDate: "2020-01-15",
+        },
+        {
+          name: "李四",
+          gender: "女",
+          age: 32,
+          phone: "13987654321",
+          email: "lisi@example.com",
+          address: "上海市浦东新区陆家嘴环路888号",
+          department: "产品部",
+          position: "产品经理",
+          entryDate: "2019-06-20",
+        },
+        {
+          name: "王五",
+          gender: "男",
+          age: 35,
+          phone: "13567891234",
+          email: "wangwu@example.com",
+          address: "广州市天河区珠江新城华夏路10号",
+          department: "市场部",
+          position: "市场总监",
+          entryDate: "2018-03-10",
+        },
+        {
+          name: "赵六",
+          gender: "女",
+          age: 26,
+          phone: "13789012345",
+          email: "zhaoliu@example.com",
+          address: "深圳市南山区科技园科发路8号",
+          department: "设计部",
+          position: "UI设计师",
+          entryDate: "2021-09-01",
+        },
+        {
+          name: "钱七",
+          gender: "男",
+          age: 40,
+          phone: "13456789012",
+          email: "qianqi@example.com",
+          address: "成都市武侯区天府大道1234号",
+          department: "财务部",
+          position: "财务总监",
+          entryDate: "2017-12-05",
+        },
+        {
+          name: "孙八",
+          gender: "女",
+          age: 29,
+          phone: "13234567890",
+          email: "sunba@example.com",
+          address: "武汉市江汉区解放大道456号",
+          department: "人力资源部",
+          position: "HR经理",
+          entryDate: "2020-07-15",
+        },
+      ],
+    };
+  },
+  methods: {
+    onCellClick(row, column, cell, event) {
+      console.log("onCellClick", row, column, cell, event);
+    },
+  },
+};
+</script>

package/app/src/views/element/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="BPMN">
+        <bpmn />
+      </el-tab-pane>
+      <el-tab-pane label="分屏示例">
+        <SplitterExample />
+      </el-tab-pane>
+      <el-tab-pane label="JSX表格">
+        <elTableJsx />
+      </el-tab-pane>
+      <el-tab-pane label="富文本编辑器" name="quillEditor">
+        <quillEditor />
+      </el-tab-pane>
+      <el-tab-pane label="级联懒加载" name="lazyCascader">
+        <LazyCascaderDemo />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import bpmn from "./bpmn/index.vue";
+import SplitterExample from "../../components/Splitter/example.vue";
+import elTableJsx from "./elTableJsx/index.vue";
+import quillEditor from "./quillEditor/example.vue";
+import LazyCascaderDemo from "./lazyCascader/index.vue";
+export default {
+  name: "element",
+  components: {
+    bpmn,
+    SplitterExample,
+    elTableJsx,
+    quillEditor,
+    LazyCascaderDemo,
+  },
+  data() {
+    return {
+      activeName: "lazyCascader",
+    };
+  },
+};
+</script>

package/app/src/views/element/lazyCascader/LazyCascader.vue

@@ -0,0 +1,302 @@
+<template>
+  <el-cascader
+    :key="cascaderKey"
+    ref="cascader"
+    :value="value"
+    :props="cascaderProps"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    :show-all-levels="showAllLevels"
+    :separator="separator"
+    :options="emptyOptions"
+    @change="onChange"
+  />
+</template>
+
+<script>
+/**
+ * LazyCascader
+ *
+ * 一次性拿到后端扁平数据,前端按层"懒"加载,体验上等价于 el-cascader 的
+ * lazy 模式,但实际上是同步查表 + 缓存;可选模拟接口延时让 loading 可见。
+ *
+ * v-model: String — 叶子节点的 id(单值)
+ *   - 即使 checkStrictly=true,v-model 也只是单个 id
+ *   - 输入框只显示该节点自己的 label
+ *
+ * 关键能力:
+ * - 默认值回显:mount / value 变化时,把链上每一层的兄弟全部预 resolve 进
+ *   自己的 cache,再手动调 panel.lazyLoad 把链逐层喂给 el-cascader 的 store,
+ *   最后 computePresentText 更新输入框(见 _loadPathForValue)
+ * - v-if 销毁/重建:重新 mount,重新 prime
+ * - 先有默认值后到数据:data 更新后调 reload(),组件自增 cascaderKey 强制
+ *   重渲染,然后再次跑 _loadPathForValue
+ * - lazyDelay:模拟接口延时(ms);设为 0 即同步
+ *
+ * ⚠️ 为什么需要手动 _loadPathForValue:
+ *   el-cascader 2.x 的 lazy 模式只在 checkedValue 是 Array 时,会在 lazyLoad
+ *   resolve 回调里自动递归展开下一级(看 cascader-panel.js:1424 的
+ *   `Array.isArray(_this5.checkedValue)` 分支)。当 emitPath=false 时
+ *   checkedValue 是单值,这层自动加载逻辑不触发,导致外部设置 value 后
+ *   el-cascader 找不到对应节点,输入框是空的。这里手动补齐这个行为。
+ */
+export default {
+  name: 'LazyCascader',
+
+  props: {
+    value: { type: String, default: '' },
+    data: { type: Array, default: () => [] },
+    placeholder: { type: String, default: '请选择' },
+    checkStrictly: { type: Boolean, default: false },
+    // 输入框显示控制:
+    //   showAllLevels=false(默认):只显示叶子节点的 label(例如"市北区")
+    //   showAllLevels=true:显示完整路径(例如"山东省 / 青岛市 / 市北区")
+    // 注:el-cascader 原生默认值是 true;我们默认改 false,贴合"只显示最后一级"的需求
+    showAllLevels: { type: Boolean, default: false },
+    // 路径分隔符(只在 showAllLevels=true 时生效)
+    separator: { type: String, default: ' / ' },
+    lazyDelay: { type: Number, default: 50 },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+  },
+
+  data() {
+    return {
+      // 喂给 el-cascader 的空 options(配合 lazy=true),真实节点由 lazyLoad 按需返回
+      emptyOptions: [],
+      // 缓存 parentId -> 已 resolve 的子节点列表(普通对象,避免 Vue 2 对 Map 响应式 wrap 带来的坑)
+      _resolvedCache: Object.create(null),
+      // 缓存当前的扁平数据引用
+      _flatList: [],
+      // el-cascader 强制重渲染的 key;reload() 时自增
+      cascaderKey: 0,
+    }
+  },
+
+  computed: {
+    cascaderProps() {
+      return {
+        lazy: true,
+        lazyLoad: this.lazyLoad,
+        value: 'id',
+        label: 'label',
+        children: 'children',
+        leaf: 'leaf',
+        checkStrictly: this.checkStrictly,
+        emitPath: false,
+      }
+    },
+  },
+
+  watch: {
+    data: {
+      immediate: true,
+      handler(v) {
+        this._flatList = Array.isArray(v) ? v : []
+        this._clearCache()
+        this._primeDefaultValue()
+        // data 到位后,把 value 的路径喂给 el-cascader
+        this.$nextTick(() => this._loadPathForValue())
+      },
+    },
+    value: {
+      immediate: true,
+      handler() {
+        this._primeDefaultValue()
+        this.$nextTick(() => this._loadPathForValue())
+      },
+    },
+    // showAllLevels 变化时不会自动触发 computePresentText,这里手动调
+    showAllLevels: {
+      handler() {
+        this.$nextTick(() => {
+          const cascaderRef = this.$refs.cascader
+          if (cascaderRef && typeof cascaderRef.computePresentText === 'function') {
+            cascaderRef.computePresentText()
+          }
+        })
+      },
+    },
+  },
+
+  mounted() {
+    this._primeDefaultValue()
+    this.$nextTick(() => this._loadPathForValue())
+  },
+
+  methods: {
+    /**
+     * 供外部主动调用:清空缓存 + 自增 key 强制 el-cascader 重渲染 + 重新喂路径
+     * 用于"先有默认值后到数据"场景:data 变化后调用
+     */
+    reload() {
+      this.cascaderKey += 1
+      this._clearCache()
+      this._primeDefaultValue()
+      this.$nextTick(() => this._loadPathForValue())
+    },
+
+    /**
+     * el-cascader lazy 模式回调
+     *  - node.level === 0 表示根级请求
+     *  - node.data 是上一层返回的节点对象
+     */
+    lazyLoad(node, resolve) {
+      if (typeof resolve !== 'function') return
+      const level = node && typeof node.level === 'number' ? node.level : 0
+      const parentId = level === 0 ? '' : (node.data && node.data.id) || ''
+
+      if (!this._resolvedCache || typeof this._resolvedCache !== 'object') {
+        this._resolvedCache = Object.create(null)
+      }
+
+      if (Object.prototype.hasOwnProperty.call(this._resolvedCache, parentId)) {
+        return resolve(this._resolvedCache[parentId])
+      }
+
+      const delay = Math.max(0, Number(this.lazyDelay) || 0)
+      const doResolve = () => {
+        const children = this._buildChildren(parentId)
+        this._resolvedCache[parentId] = children
+        resolve(children)
+      }
+      if (delay > 0) {
+        setTimeout(doResolve, Math.random() * delay)
+      } else {
+        doResolve()
+      }
+    },
+
+    _buildChildren(parentId) {
+      const flat = this._flatList || []
+      return flat
+        .filter(item => (item.parentId || '') === (parentId || ''))
+        .map(item => ({
+          ...item,
+          leaf: !flat.some(c => (c.parentId || '') === item.id),
+          children: [],
+        }))
+    },
+
+    _clearCache() {
+      this._resolvedCache = Object.create(null)
+    },
+
+    /**
+     * 默认值回显 step 1:在 cache 里把链上每一层的兄弟预 resolve
+     * 这样即便后面 panel.lazyLoad 调到,我们 lazyLoad 也能秒返
+     */
+    _primeDefaultValue() {
+      if (!this._resolvedCache || typeof this._resolvedCache !== 'object') {
+        this._resolvedCache = Object.create(null)
+      }
+      if (!this._flatList || this._flatList.length === 0) return
+      if (!this.value) return
+
+      const leafId = this.value
+      const chain = []
+      let cur = this._flatList.find(i => i.id === leafId)
+      while (cur) {
+        chain.unshift(cur)
+        cur = cur.parentId ? this._flatList.find(i => i.id === cur.parentId) : null
+      }
+      if (!chain.length) return
+
+      const parentIds = ['', ...chain.slice(0, -1).map(n => n.id)]
+      parentIds.forEach(pid => {
+        if (!Object.prototype.hasOwnProperty.call(this._resolvedCache, pid)) {
+          this._resolvedCache[pid] = this._buildChildren(pid)
+        }
+      })
+    },
+
+    /**
+     * 默认值回显 step 2:手动把 value 的链逐层喂给 el-cascader 的 store
+     *
+     * 触发场景:value 变化 / data 到位 / 组件挂载
+     *
+     * ⚠️ 这是绕过 el-cascader 限制的关键:
+     *   el-cascader 2.x 的 lazy 模式只在 checkedValue 是 Array(emitPath=true)
+     *   时,会在 lazyLoad 的 resolve 里自动递归加载下一级。我们 emitPath=false,
+     *   value 是单值,自动加载不触发,导致 presentText 找不到节点 → 输入框空。
+     *   这里手动调 panel.lazyLoad 把链上每一级都加载好,最后 computePresentText。
+     */
+    _loadPathForValue() {
+      if (!this.value) return
+      if (!this._flatList || this._flatList.length === 0) return
+
+      const cascaderRef = this.$refs.cascader
+      if (!cascaderRef || !cascaderRef.$refs || !cascaderRef.$refs.panel) return
+      const panel = cascaderRef.$refs.panel
+      if (typeof panel.lazyLoad !== 'function') return
+
+      // 反向追溯整条链
+      const chain = []
+      let cur = this._flatList.find(i => i.id === this.value)
+      while (cur) {
+        chain.unshift(cur)
+        cur = cur.parentId ? this._flatList.find(i => i.id === cur.parentId) : null
+      }
+      if (!chain.length) return
+
+      const self = this
+      const refresh = () => {
+        self.$nextTick(() => {
+          if (typeof cascaderRef.computePresentText === 'function') {
+            cascaderRef.computePresentText()
+          }
+        })
+      }
+
+      // 逐层喂:parentNode === null 表示从根开始
+      const cascade = (parentNode, idx) => {
+        if (idx >= chain.length) {
+          refresh()
+          return
+        }
+        const targetId = chain[idx].id
+
+        // 先看是否已经在 store 里(避免重复 appendNode)
+        const siblings = parentNode
+          ? (parentNode.children || [])
+          : ((panel.store && panel.store.nodes) || [])
+        const found = siblings.find(c => c.value === targetId)
+        if (found) {
+          cascade(found, idx + 1)
+          return
+        }
+
+        // 不在 store,调 panel.lazyLoad
+        const nodeToLoad = parentNode || { root: true, level: 0 }
+        panel.lazyLoad(nodeToLoad, () => {
+          const newSiblings = parentNode
+            ? (parentNode.children || [])
+            : ((panel.store && panel.store.nodes) || [])
+          const newFound = newSiblings.find(c => c.value === targetId)
+          if (newFound) {
+            cascade(newFound, idx + 1)
+          } else {
+            // 找不到(数据不一致),放弃
+            refresh()
+          }
+        })
+      }
+      cascade(null, 0)
+    },
+
+    onChange(val) {
+      const out = val == null ? '' : (typeof val === 'object' ? val.id : String(val))
+      this.$emit('input', out)
+      this.$emit('change', out)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.el-cascader {
+  width: 100%;
+  max-width: 360px;
+}
+</style>