agilebuilder-ui 1.1.13-tmp3 → 1.1.13-tmp5

package/lib/tab-content-iframe-index-e32d4b3f.js

@@ -0,0 +1,12 @@
+import { openBlock as r, createElementBlock as t, createCommentVNode as o } from "vue";
+import { _ as s } from "./index-e8b65d1a.js";
+const u = ["src"], f = s({ data: () => ({ src: null }), watch: { $route(n, c) {
+  this.src = this.$route.query.src;
+} }, mounted() {
+  this.src = this.$route.query.src;
+} }, [["render", function(n, c, a, l, e, m) {
+  return r(), t("div", null, [e.src && e.src !== null ? (r(), t("iframe", { key: 0, ref: "menuContent", src: e.src, name: "menu-content", title: "Main content", frameborder: "0" }, null, 8, u)) : o("", !0)]);
+}], ["__scopeId", "data-v-20dccb82"]]);
+export {
+  f as default
+};

package/lib/tab-content-index-5f743a94.js

@@ -0,0 +1,115 @@
+import { _ as v, c as $, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-e8b65d1a.js";
+import { resolveComponent as m, openBlock as l, createBlock as b, withCtx as g, createVNode as w, TransitionGroup as L, createElementBlock as p, Fragment as T, renderList as C, createElementVNode as u, toDisplayString as y, createCommentVNode as f, normalizeClass as S } from "vue";
+const A = { class: "no-redirect" }, k = v({ name: "Breadcrumb", data: () => ({ levelList: null }), computed: { levelListWithTitle() {
+  return this.levelList.filter((e) => e.meta.title !== void 0 && e.meta.title !== null);
+} }, watch: { $route() {
+  this.getBreadcrumb();
+} }, created() {
+  this.getBreadcrumb();
+}, methods: { getBreadcrumb() {
+  const { params: e } = this.$route;
+  let t = this.$route.matched.filter((a) => {
+    if (a.name) {
+      var r = $(a.path);
+      return a.path = r(e), !0;
+    }
+  });
+  if (t) {
+    let a;
+    const r = x(), o = window.$vueApp.config.globalProperties.systemNameObj;
+    o && (a = o[r]), t = [{ path: "/", redirect: "noredirect", meta: { title: a } }].concat(t);
+    const s = P.get("selectMenu"), d = window.$vueApp.config.globalProperties._selectMenu;
+    let n;
+    if (d ? n = d : s && (n = s), n) {
+      const i = n.substring(0, n.indexOf("~~")), c = n.substring(n.indexOf("~~") + 2);
+      if (t && t.length > 0) {
+        const _ = t[t.length - 1];
+        this.isShouldConcatLastMenu(c, i, _) && t.push({ path: i, meta: { title: c } });
+      } else
+        t.push({ path: i, meta: { title: c } });
+    }
+  }
+  this.levelList = t;
+}, isShouldConcatLastMenu(e, t, a) {
+  return !(!this.isTitleNotEqual(e, a) || !this.isPathNotEqual(t, a));
+}, isTitleNotEqual(e, t) {
+  return !(!e || !t.meta || e === t.meta.title || e === this.$t(t.meta.title));
+}, isPathNotEqual: (e, t) => !(!e || !t.path || e === t.path) } }, [["render", function(e, t, a, r, o, s) {
+  const d = m("el-breadcrumb-item"), n = m("el-breadcrumb");
+  return l(), b(n, { class: "app-breadcrumb", separator: ">" }, { default: g(() => [w(L, { name: "breadcrumb", tag: "span" }, { default: g(() => [(l(!0), p(T, null, C(s.levelListWithTitle, (i, c) => (l(), b(d, { key: i.path + "-" + c }, { default: g(() => [u("span", A, y(e.$t(i.meta.title)), 1)]), _: 2 }, 1024))), 128))]), _: 1 })]), _: 1 });
+}], ["__scopeId", "data-v-768a430c"]]), { body: B } = document, E = { watch: { $route(e) {
+  this.device === "mobile" && this.sidebar.opened && h.dispatch("closeSidebar", { withoutAnimation: !1 });
+} }, beforeMount() {
+  window.addEventListener("resize", this.resizeHandler);
+}, mounted() {
+  this.isMobile() && (h.dispatch("toggelDevice", "mobile"), h.dispatch("closeSidebar", { withoutAnimation: !0 }));
+}, methods: { isMobile: () => B.getBoundingClientRect().width - 3 < 1024, resizeHandler() {
+  if (!document.hidden) {
+    const e = this.isMobile();
+    h.dispatch("toggelDevice", e ? "mobile" : "desktop"), e && h.dispatch("closeSidebar", { withoutAnimation: !0 });
+  }
+} } }, N = { name: "TabContent", data() {
+  let e = window.$vueApp.config.globalProperties.defaultPageTip;
+  e || (e = "欢迎访问Agile Builder/Welcome to Agile Builder");
+  let t, a = e;
+  return e && e.indexOf("/") > 0 && (a = e.substring(0, e.lastIndexOf("/")), t = e.substring(e.lastIndexOf("/") + 1)), { defaultPageTipCn: a, defaultPageTipEn: t };
+}, computed: { ...M(["openTab"]), activeIndex: { get() {
+  return this.$store.state.tabContent.activeIndex;
+}, set(e) {
+  this.$store.commit("set_active_index", e);
+} } }, created() {
+  window.addEventListener("message", this.recieveMessage);
+}, mounted() {
+}, unmounted() {
+  window.removeEventListener("message", this.recieveMessage);
+}, methods: { closeSelectedTag(e) {
+  const t = this.$store.state.tabContent.openTab.findIndex((r) => r.code === e), a = this.$store.state.tabContent.openTab[t];
+  this.$store.commit("delete_tabs", a), e === this.activeIndex && this.toLastView(this.$store.state.tabContent.openTab, t > 0 ? t - 1 : 0);
+}, toLastView(e, t) {
+  if (e && e.length > 0 && e.length > t) {
+    const a = e[t];
+    a && this.$store.commit("set_active_index", a.code);
+  }
+}, getFullPath(e) {
+  let t = "";
+  if (e.routePath === "/iframe-page/page") {
+    let a, r = "";
+    if (e.routeQuery)
+      for (const o in e.routeQuery)
+        o === "src" ? a = e.routeQuery[o] : r += o + "=" + e.routeQuery[o] + "&";
+    a && (t = a), r && (t += "?" + r);
+  } else if (e.routePath.indexOf("http:") < 0 && e.routePath.indexOf("https:") < 0 && (t = "#"), t = e.routePath.indexOf("?") >= 0 ? t + e.routePath + "&" : t + e.routePath + "?", e.routeQuery)
+    for (const a in e.routeQuery)
+      t += a + "=" + e.routeQuery[a] + "&";
+  return t && t.length > 0 && t.lastIndexOf("&") === t.length - 1 && (t = t.substring(0, t.lastIndexOf("&"))), t;
+}, recieveMessage(e) {
+  if (e && typeof e.data == "string" && e.data === "refreshTabContent")
+    window.location.reload();
+  else if (e && typeof e.data == "string" && e.data.indexOf("loginTimeout") >= 0)
+    window.parent.postMessage(e.data, "*");
+  else if (e && typeof e.data == "string" && e.data === "return-to-system-list") {
+    this.$store.commit("clear_tabs");
+    let t = "_IS_APP_LIST";
+    const a = window.sessionStorage.getItem(t);
+    a !== void 0 && a === "true" ? this.$router.push({ path: "/mms/apps/list" }) : this.$router.push({ path: "/mms/systems/list" });
+  }
+} } }, V = ["src"], Q = { class: "default-page-tip" }, R = { class: "default-page-tip-msg" }, q = { class: "default-page-tip-item" }, z = { class: "default-page-tip-item" }, j = { class: "main-container" }, W = v({ name: "Layout", components: { Menubar: O, Breadcrumb: k, TabContent: v(N, [["render", function(e, t, a, r, o, s) {
+  const d = m("el-tab-pane"), n = m("el-tabs");
+  return l(), p("div", null, [e.openTab && e.openTab.length > 0 ? (l(), b(n, { key: 0, modelValue: s.activeIndex, "onUpdate:modelValue": t[0] || (t[0] = (i) => s.activeIndex = i), class: "nav-tab menu-tab-container", closable: "", onTabRemove: s.closeSelectedTag }, { default: g(() => [(l(!0), p(T, null, C(e.openTab, (i) => (l(), b(d, { key: i.code, label: i.name, name: i.code }, { default: g(() => [u("iframe", { ref_for: !0, ref: "tabMainContent", src: s.getFullPath(i), class: "tab-main-content", name: "tab-main-content", frameborder: "0" }, null, 8, V)]), _: 2 }, 1032, ["label", "name"]))), 128))]), _: 1 }, 8, ["modelValue", "onTabRemove"])) : f("", !0), u("div", Q, [u("div", R, [u("div", q, y(o.defaultPageTipCn), 1), u("div", z, y(o.defaultPageTipEn), 1)])])]);
+}], ["__scopeId", "data-v-acb71e42"]]) }, mixins: [E], data: () => ({ showMenuRoute: I(), systemCode: null }), computed: { sidebar() {
+  return this.$store.state.app.sidebar;
+}, device() {
+  return this.$store.state.app.device;
+}, classObj() {
+  return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === "mobile" };
+} }, created() {
+  this.systemCode = window.$vueApp.config.globalProperties.customSystem;
+}, methods: { handleClickOutside() {
+  this.$store.dispatch("closeSidebar", { withoutAnimation: !1 });
+} } }, [["render", function(e, t, a, r, o, s) {
+  const d = m("menubar"), n = m("breadcrumb"), i = m("tab-content");
+  return l(), p("div", { class: S([s.classObj, "app-wrapper"]) }, [s.device === "mobile" && s.sidebar.opened ? (l(), p("div", { key: 0, class: "drawer-bg", onClick: t[0] || (t[0] = (...c) => s.handleClickOutside && s.handleClickOutside(...c)) })) : f("", !0), w(d, { "system-code": o.systemCode, collapse: !0, class: "sidebar-container" }, null, 8, ["system-code"]), u("div", j, [o.showMenuRoute ? (l(), b(n, { key: 0 })) : f("", !0), w(i)])], 2);
+}], ["__scopeId", "data-v-5c0a6bf6"]]);
+export {
+  W as default
+};

package/lib/tache-subprocess-history-344d409e.js

@@ -0,0 +1,12 @@
+import { resolveComponent as t, openBlock as a, createElementBlock as s, createElementVNode as y, createVNode as l, withCtx as r, createTextVNode as n, toDisplayString as p, createCommentVNode as c, createBlock as h } from "vue";
+import { _ as I } from "./index-e8b65d1a.js";
+const g = { style: { "padding-bottom": "10px" } }, k = { key: 0, class: "graphDiv" }, N = I({ name: "TacheSubprocessHistory", data: () => ({ type: "graph", workflowId: null }), created() {
+  const o = this.$route.query.workflowId;
+  o && (this.workflowId = parseInt(o));
+} }, [["render", function(o, d, V, b, e, v) {
+  const i = t("el-radio-button"), w = t("el-radio-group"), u = t("workflow-history"), m = t("workflow-history-list");
+  return a(), s("div", null, [y("div", g, [l(w, { modelValue: e.type, "onUpdate:modelValue": d[0] || (d[0] = (f) => e.type = f) }, { default: r(() => [l(i, { label: "graph" }, { default: r(() => [n(p(o.$t("imatrixUIPublicModel.graphView")), 1)]), _: 1 }), l(i, { label: "list" }, { default: r(() => [n(p(o.$t("imatrixUIPublicModel.listView")), 1)]), _: 1 })]), _: 1 }, 8, ["modelValue"])]), e.type === "graph" ? (a(), s("div", k, [l(u, { id: e.workflowId }, null, 8, ["id"])])) : c("", !0), e.type === "list" ? (a(), h(m, { key: 1, "workflow-id": e.workflowId }, null, 8, ["workflow-id"])) : c("", !0)]);
+}], ["__scopeId", "data-v-a936569d"]]);
+export {
+  N as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.1.13-tmp3",
+  "version": "1.1.13-tmp5",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",

package/packages/super-grid/src/apis.js

@@ -21,6 +21,8 @@ import {
 import eventBus from './eventBus'
 import { isPromise } from '../../../src/utils/common-util'
 import { updateWithPageValue } from '../../../src/utils/jump-page-utils'
+import { getGuId } from '../../../src/utils/guid.js';
+
 const apis = {
   // 列表工具栏控件刷新列表数据。添加该方法解决工具栏值清空后，列表内容没有还原问题
   toolbarRefresh(parentRowIds, isLineEdit, toolbarFieldParam, isDeleteSubTableData) {
@@ -133,12 +135,13 @@ const apis = {
   // 新建行
   createRow(listCode, row, options) {
     return new Promise((resolve, reject) => {
+      debugger;
       if (!listCode) {
         listCode = store.get('_list_code')
       }
       const gridParams = store.get(listCode)
       const gridData = gridParams.gridData
-      gridParams.superGrid.clearSort()
+      gridParams.superGrid?.clearSort?.()
       // console.log('创建行记录的条件1', gridParams.lineEdit)
       // console.log('创建行记录的条件2', gridParams.lineEdit.editable)
       // console.log('创建行记录的条件3', gridParams.loaded)
@@ -364,7 +367,10 @@ const apis = {
         }
       }
     }
-    return row
+    return {
+      $rowDataGuId: getGuId(),
+      ...row,
+    }
   },
   // 设置默认值null
   setColumnsDefaultValue(allColumns, row, gridParams, getDefaultValueFunc) {
@@ -1005,7 +1011,7 @@ const apis = {
           }
         }
         if (gridParams.isMulitiSelect) {
-          gridParams.superGrid.clearSelection()
+          gridParams.superGrid?.clearSelection?.()
         }
         gridParams.isCreateRow = false
         if (isRestore === undefined || !isRestore) {
@@ -1382,3 +1388,40 @@ const apis = {
   }
 }
 export default apis
+
+export const apisMixin = {
+  data() {
+    return {
+      toolbarFieldParam: null,
+      showSearch: false,
+      isMobile: false,
+      baseURL: '',
+      currentPage: 1,
+      pageSize: 10,
+      code: '',
+      pageCode: '',
+      jumpPageSetting: null,
+      isShowPageDialog: false,
+      gridData: [],
+      subTableData: [],
+      searchForm: [],
+      options: {},
+      lineEdit: null,
+      loaded: false,
+      configureObj: {},
+      additionalParamMap: {},
+      basicInfo: {},
+      dynamicColumnInfo: {},
+      $dataTypeMap: {},
+      mainDefaultValueColumns: [],
+      dynamicServiceName: '',
+      isHasDynamic: false,
+      isMulitiSelect: false,
+      sql: false,
+      restoreCurrentRowTimer: null
+    };
+  },
+  methods: {
+    ...apis
+  }
+}

package/packages/super-grid/src/components/mobile-table-card.jsx

@@ -2,18 +2,22 @@
 import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
 import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
 import NormalColumnContent from '../normal-column-content.vue';
-import CardView from './card-view.jsx';
+import CardView from '../../../../src/components/Card';
+import Scrollbar from '../../../../src/components/Scrollbar';
 import store from '../store';
+import { apisMixin } from '../apis'
 
-import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
+import { ArrowLeft, Bottom, CirclePlus, Loading, Tickets } from '@element-plus/icons-vue';
 // import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
 
 export default defineComponent({
     name: 'MobileTableCard',
     components: {
         NormalColumnContent,
-        CardView
+        CardView,
+        Scrollbar
     },
+    mixins: [apisMixin],
     props: {
         // 展示字段限制
         showFieldCount: {
@@ -59,8 +63,9 @@ export default defineComponent({
     setup(props, setupData) {
         const $emits = defineEmits(['currentChange', 'update:current-page', 'select']);
 
-        const { attrs, emit } = setupData
-        console.log('*mobile-table-card.JSX**********************************************=>', props, attrs, setupData)
+        const { attrs, emit, expose } = setupData
+
+        console.log('*mobile-table-card.JSX**********************************************=>', props, attrs, setupData, expose)
 
         // 分页加载状态
         const isPaginationLoading = ref(false)
@@ -68,10 +73,10 @@ export default defineComponent({
         const paginationList = ref([])
         // 选中数据
         const checkedList = ref([]);
+        // 当前勾选ID
+        const checkedClickId = ref(undefined);
         // 当前选中数据
         const isCheckedIndex = ref(undefined);
-        // 展开更多字段
-        const isColumnExpandMore = ref(undefined);
 
         // 是否打开子表弹窗
         const isChildrenDrawer = ref(false);
@@ -90,6 +95,15 @@ export default defineComponent({
 
         setPaginationList(props.data)
 
+        const addColumnBtn = computed(() => {
+            const gridParams = store.get(attrs.listCode)
+            const showOperationButton = gridParams?.options?.showOperationButton ?? false
+            const isFormSubTable = gridParams?.options?.isFormSubTable ?? false
+            const subTableCanAdd = gridParams?.options?.subTableCanAdd ?? false
+            const isOperation = componentDatas.value?.some(({ prop }) => ['operation'].includes(prop))
+            return showOperationButton && isFormSubTable && subTableCanAdd && isOperation
+        })
+
         // 列表数据
         const dataList = computed(() => {
             if (props.isStackingPaginatedData) {
@@ -99,6 +113,14 @@ export default defineComponent({
             }
         });
 
+        const isLoadPaginationData = computed(() => {
+            if (props.isStackingPaginatedData) {
+                return (paginationList.value[props.currentPage - 1]?.length ?? 0) > 0
+            } else {
+                return dataList.value.length < props.pageSize * props.currentPage && pagesNumber.value >= props.currentPage
+            }
+        })
+
         // 面包屑数据
         const childrenList = computed(() => {
             return childrenBreadcrumbData.value[childrenBreadcrumbData.value.length - 1]?.children ?? []
@@ -179,6 +201,7 @@ export default defineComponent({
             } else {
                 checkedList.value = [...new Set([...checkedList.value, value])]
             }
+            checkedClickId.value = value
         }
 
         /**
@@ -205,9 +228,8 @@ export default defineComponent({
             const onAttrs = {
                 ...Object.fromEntries(Object.keys($on).map(key => [`on${key.charAt(0).toUpperCase()}${key.slice(1).replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())}`, $on[key]]))
             }
-            return <div overflow-wrap>
-                <NormalColumnContent isContentViewText={isViewText} {...attrs} {...onAttrs} /> 
-            </div>
+
+            return <NormalColumnContent isContentViewText={isViewText} {...attrs} {...onAttrs} /> 
         }
 
         /**
@@ -219,6 +241,7 @@ export default defineComponent({
          * @returns .filter((_, index) => !props.showFieldCount || props.showFieldCount > index + 1)
          */
         const getElDescriptions = (layoutDatas, columnFormData = detailsFormData.value, columnIndex = isCheckedIndex.value, showFieldCount = undefined) => {
+            // const propertyData = columnData?.find(({ property }) => property)
             return <ElDescriptions column={1} label-width={maxLabelWidth.value} align="right" direction="horizontal" layout='form'>
                 {(showFieldCount ? layoutDatas?.slice?.(0, showFieldCount) : layoutDatas)?.map((columnCol, index) => (
                     <ElDescriptionsItem
@@ -228,6 +251,12 @@ export default defineComponent({
                                 label: () => <div v-html={columnCol.label ? `${columnCol.label}：` : ''} />
                             }
                         }
+                        // onRowDblclick={(event) => {
+                        //     console.log('我双击了', columnCol?.property )
+                        //     // if (isViewText) return
+                        //     event.stopPropagation()
+                        //     // emit('rowDblclick', columnFormData, columnData, event)
+                        // }}
                     >
                         {columnViewDom(columnCol, columnFormData, columnIndex) || '-'}
                     </ElDescriptionsItem>
@@ -241,13 +270,23 @@ export default defineComponent({
         }, { deep: true });
 
         // 勾选监听
-        watch(checkedList, (newValue) => {
+        watch(checkedList, (newValue , oldValue) => {
+            console.log(newValue , oldValue)
             if (attrs.selection.length === newValue.length) {
                 if (attrs.selection.every(({ $rowDataGuId }) => newValue.includes($rowDataGuId ) )) return
             }
             const selectData = dataList.value.filter(({ $rowDataGuId }) => newValue?.includes($rowDataGuId))
-            console.log('选中数据+++mobile-table-card+++++++++++++++++++++++++++++>', newValue, selectData)
+            const findData = checkedClickId.value ? dataList.value.find(({ $rowDataGuId }) => checkedClickId.value === $rowDataGuId) : undefined
+            // 新增选中
+            if (newValue.length > oldValue?.length && findData) {
+                emit('select', selectData, findData)
+            }
+            // 移除选中
+            if (newValue.length < oldValue?.length && findData) {
+                emit('select', selectData, findData)
+            }
             emit('selectionChange', selectData)
+            checkedClickId.value = undefined
         }, { deep: true });
 
         // 滚动数据加载监听
@@ -276,119 +315,135 @@ export default defineComponent({
             }
         }
 
-        const load = () => {
-            // 这里可以实现加载更多的逻辑
-        };
-
-        return () => (
-            <div v-infinite-scroll={scrollLoad} style={{ overflow: 'auto', maxHeight: 'calc(100vh - 132px)', marginBottom: '15px' }}>
-                {(<ElDrawer v-model={isChildrenDrawer.value} with-header={true} direction="btt" append-to-body size='90vh' v-slots={{
-                    header: () => (<div class="yx-flex-wrap" style={{gap: '10px'}}>
-                        {layoutData.value.header[0] && `${layoutData.value.header[0].label}: `}
-                        <ElBreadcrumb separator-icon={<ArrowRight></ArrowRight>}>
-                            {childrenBreadcrumbData.value.map((columnFormData, i) => {
-                                const label = columnViewDom(layoutData.value.header[0], columnFormData, undefined, true)
-                                return (
-                                    <ElBreadcrumbItem>
-                                        {
-                                            childrenBreadcrumbData.value.length - 1 === i ? label : <ElLink onClick={() =>  childrenBreadcrumbData.value = childrenBreadcrumbData.value.slice(0, i + 1)}>{ label }</ElLink>
-                                        }
-                                    </ElBreadcrumbItem>
-                                )
-                                
-                            })}
-                        </ElBreadcrumb>
-                    </div>)
-                    }}
-                    onClosed={() => childrenBreadcrumbData.value = []}
-                    >
-                    
-                    <div class="yx-flex-wrap" vertical style={{ 'height': '100%', gap: '10px'}}>
-                        <ElScrollbar scrollable-main max-height='100%' style={{ 'flex': '1 1 auto'}}>
-                            <div class="yx-flex-wrap" vertical style={{ gap: '15px'}}>
-                                { childrenList.value.map((columnFormData, columnIndex) => {
-                                    // 开启编辑后禁止选中
-                                    const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
-        
-                                    // 是否选中
-                                    const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
-        
-                                    // 是否有子表
-                                    const isSubTable = !!((columnFormData?.children?.length ?? 0) > 0)
-
-                                    return (<CardView 
-                                        form={columnFormData}
-                                        no={ isIndex ? columnIndex + 1 : undefined}
-                                        isChecked={isChecked}
-                                        isSubTable={isSubTable}
-                                        isCheck={isCheck.value}
-                                        isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
-                                        onChecked={onChecked}
-                                        onShowSubTable={() => {
-                                            childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
-                                        }}
-                                        v-slots={{
-                                            titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
-                                            children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
-                                            footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
-                                                {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
-                                            </div>)
-                                        }}
-                                    />)
-                                }) }
-                            </div>
-                        </ElScrollbar>
-                    </div>
-                </ElDrawer>)}
-                    <div
-                        class="yx-flex-wrap"
-                        vertical
-                        style="overflow: auto; gap: 15px;"
-                        onInfiniteScroll={load}
-                    >
-                        {dataList.value.length === 0 && <ElEmpty />}
+        const getAddBtn = (Fun) => addColumnBtn.value && <ElButton type="primary" plain icon={<CirclePlus />} onClick={() => Fun?.(attrs.listCode)}>Add</ElButton>
+
+        return {
+            getAddBtn,
+            renderDom: (AddBtn) => (
+                <Scrollbar onScrollToBottom={scrollLoad} set-max-height={data => {
+                    if (data?.windowHeight) {
+                        const height = data?.windowHeight - 160
+                        return height > 400 ? height : 400
+                    }
+                }}>
+                    {(<ElDrawer v-model={isChildrenDrawer.value} modal-class='yx-drawer yx-scrollbar-body' with-header={true} direction="btt" append-to-body size='90vh' v-slots={{
+                            header: () => (<div class="yx-flex-wrap" style={{gap: '10px'}}>
+                                {layoutData.value.header[0] && `${layoutData.value.header[0].label}: `}
+                                <ElBreadcrumb separator-icon={<ArrowRight></ArrowRight>}>
+                                    {childrenBreadcrumbData.value.map((columnFormData, i) => {
+                                        const label = columnViewDom(layoutData.value.header[0], columnFormData, undefined, true)
+                                        return (
+                                            <ElBreadcrumbItem>
+                                                {
+                                                    childrenBreadcrumbData.value.length - 1 === i ? label : <ElLink onClick={() =>  childrenBreadcrumbData.value = childrenBreadcrumbData.value.slice(0, i + 1)}>{ label }</ElLink>
+                                                }
+                                            </ElBreadcrumbItem>
+                                        )
+                                        
+                                    })}
+                                </ElBreadcrumb>
+                            </div>)
+                            }}
+                            onClosed={() => childrenBreadcrumbData.value = []}
+                        >
                         
-                        {dataList.value.map((columnFormData, columnIndex) => {
-                            const isColumnExpand = columnIndex === isColumnExpandMore.value
-
-                            // 开启编辑后禁止选中
-                            const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
-
-                            // 是否选中
-                            const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
-
-                            // 是否有子表
-                            const isSubTable = !!(columnFormData?.children?.length ?? false)
-                            return (<CardView 
-                                form={columnFormData}
-                                no={ isIndex ? columnIndex + 1 : undefined}
-                                isChecked={isChecked}
-                                isSubTable={isSubTable}
-                                isCheck={isCheck.value}
-                                isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
-                                onChecked={onChecked}
-                                onShowSubTable={() => {
-                                    childrenBreadcrumbData.value =[columnFormData];
-                                    isChildrenDrawer.value = true
-                                }}
-                                v-slots={{
-                                    titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
-                                    children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
-                                    footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
-                                        {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
-                                    </div>)
-                                }}
-                            />)
-                        })}
-
-                        {
-                            dataList.value.length > 0 && pagesNumber.value > 1 && (<ElDivider>
-                                { (pagesNumber.value > props.currentPage || isPaginationLoading.value) && (<ElIcon loading-rotate size={25} color="#409eff" style={{ margin: '15px auto' }}><Loading></Loading></ElIcon>) }
-                                { (pagesNumber.value <= props.currentPage) && 'END' }
-                            </ElDivider>)
-                        }
-                    </div>
-            </div>
-        );
+                            <Scrollbar scrollable-main max-height='100%' style={{ 'flex': '1 1 auto'}}>
+                                <div class="yx-flex-wrap" vertical style={{ gap: '15px'}}>
+                                    { childrenList.value.map((columnFormData, columnIndex) => {
+                                        // 开启编辑后禁止选中
+                                        const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
+            
+                                        // 是否选中
+                                        const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
+            
+                                        // 是否有子表
+                                        const isSubTable = !!((columnFormData?.children?.length ?? 0) > 0)
+    
+                                        const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
+    
+                                        return (<CardView 
+                                            form={columnFormData}
+                                            no={ isIndex ? columnIndex + 1 : undefined}
+                                            isChecked={isChecked}
+                                            isSubTable={isSubTable}
+                                            isCheck={isCheck.value}
+                                            isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
+                                            onChecked={onChecked}
+                                            onShowSubTable={() => {
+                                                childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
+                                            }}
+                                            onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
+                                            onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
+                                            v-slots={{
+                                                titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
+                                                children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
+                                                footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                                                    {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
+                                                </div>)
+                                            }}
+                                        />)
+                                    }) }
+                                </div>
+                            </Scrollbar>
+                        </ElDrawer>)}
+                        <div
+                            class="yx-flex-wrap"
+                            vertical
+                            style="overflow: auto; gap: 15px;"
+                        >
+                            {dataList.value.length === 0 && <ElEmpty>{AddBtn}</ElEmpty>}
+                            
+                            {dataList.value.map((columnFormData, columnIndex) => {
+    
+                                // 开启编辑后禁止选中
+                                const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
+    
+                                // 是否选中
+                                const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
+    
+                                // 是否有子表
+                                const isSubTable = !!(columnFormData?.children?.length ?? false)
+    
+                                const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
+    
+                                return (<CardView 
+                                    form={columnFormData}
+                                    no={ isIndex ? columnIndex + 1 : undefined}
+                                    isChecked={isChecked}
+                                    isSubTable={isSubTable}
+                                    isCheck={isCheck.value}
+                                    isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
+                                    onChecked={onChecked}
+                                    onShowSubTable={() => {
+                                        childrenBreadcrumbData.value =[columnFormData];
+                                        isChildrenDrawer.value = true
+                                    }}
+                                    onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
+                                    onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
+                                    v-slots={{
+                                        titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
+                                        children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
+                                        footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                                            {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
+                                        </div>)
+                                    }}
+                                />)
+                            })}
+    
+                            {dataList.value.length > 0 && AddBtn}
+    
+                            {
+                                dataList.value.length > 0 && pagesNumber.value > 1 && (<ElDivider>
+                                    { (pagesNumber.value > props.currentPage || isPaginationLoading.value) ? (<ElIcon loading-rotate size={25} color="#409eff" style={{ margin: '15px auto' }}><Loading></Loading></ElIcon>) : (pagesNumber.value <= props.currentPage && isLoadPaginationData.value) && 'END' }
+                                </ElDivider>)
+                            }
+                        </div>
+                </Scrollbar>
+            )
+        };
+    },
+    render() {
+        // 为了 能兼容 使用 mixins 参数
+        return this.renderDom(this.getAddBtn(this.createRow))
     }
 });