@idooel/components 0.0.2-beta.25 → 0.0.2-beta.27

package/dist/@idooel/components.esm.js

@@ -2187,7 +2187,7 @@ var script$D = {
   },
   computed: {
     wrapperStyle() {
-      // 外层容器样式：确保分页始终可见，表格充满剩余空间
+      // 外层容器样式
       if (!this.height) return {};
       return {
         height: `${this.height}px`
@@ -2221,20 +2221,11 @@ var script$D = {
       if (this.scroll) {
         return this.scroll;
       } else {
-        const baseX = this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x;
-        if (this.height) {
-          // 计算表体可用高度
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100; // 预估值，给表头和分页留空间
-
+        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
+        const baseX = this.x || 1200;
+        if (this.height && this.needScrollY) {
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
           if (availableHeight > 50) {
-            // 确保有足够的最小高度
-            console.log('Table scroll config:', {
-              x: baseX,
-              y: availableHeight,
-              height: this.height,
-              headerHeight: this.tableHeaderHeight,
-              paginationHeight: this.paginationHeight
-            });
             return {
               x: baseX,
               y: availableHeight
@@ -2257,23 +2248,24 @@ var script$D = {
   },
   methods: {
     onShowSizeChange(current, pageSize) {
-      console.log('onShowSizeChangecurrent', current);
-      console.log(' onShowSizeChangepageSize', pageSize);
       this.innerCurrentPage = current;
       this.innerPageSize = pageSize;
       this.$emit('change-page', current, pageSize);
     },
     setPaginationHeight() {
       this.$nextTick(() => {
-        const {
-          height
-        } = document.querySelector('.g-table__pagination').getBoundingClientRect();
-        this.paginationHeight = height;
+        const el = this.$el.querySelector('.g-table__pagination');
+        if (el) {
+          const {
+            height
+          } = el.getBoundingClientRect();
+          this.paginationHeight = height;
+        }
       });
     },
     setTableHeaderHeight() {
       this.$nextTick(() => {
-        const el = document.querySelector('.ant-table-header');
+        const el = this.$el.querySelector('.ant-table-header');
         if (!el) return;
         const {
           height
@@ -2282,7 +2274,6 @@ var script$D = {
       });
     },
     setTableTbodyHeight() {
-      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
       this.$nextTick(() => {
         this.setTableHeaderHeight();
       });
@@ -2291,7 +2282,6 @@ var script$D = {
       return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
     },
     onChangePagination(page, pageSize) {
-      console.log('page', page);
       this.innerCurrentPage = page;
       this.innerPageSize = pageSize;
       this.$emit('change-page', page, pageSize);
@@ -2302,7 +2292,6 @@ var script$D = {
       this.setPaginationHeight();
       setTimeout(() => {
         this.setTableTbodyHeight();
-        // 再测一次分页高度，确保初次渲染完成后数值准确
         this.setPaginationHeight();
       }, 200);
     });
@@ -2322,11 +2311,7 @@ var __vue_render__$D = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    {
-      staticClass: "g-table__wrapper",
-      class: { "g-table--no-scroll-y": !_vm.needScrollY },
-      style: _vm.wrapperStyle,
-    },
+    { staticClass: "g-table__wrapper", style: _vm.wrapperStyle },
     [
       _c("a-table", {
         class: [_vm.isNoData && "g-table__no-data"],
@@ -2406,11 +2391,11 @@ __vue_render__$D._withStripped = true;
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    inject("data-v-5681c4f1_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination[data-v-5681c4f1] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC6OhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;AD5OA;AC6OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD3OA;AC8OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD5OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD7OA;ACgPA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD9OA;AC8MA;EAmCA,iBAAA;AD9OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD7OA;ACgPA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD9OA;ACiPA;EACA,cAAA;EACA,gBAAA;AD/OA;ACqPA;EACA,+CAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACsPA;EACA,6CAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACwPA;EACA,0CAAA;ADtPA;AC0PA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADxPA;ACkKA;EAyFA,qBAAA;ADxPA;ACyPA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvPA;ACoJA;EAsGA,cAAA;ADvPA;ACwPA;EACA,kBAAA;ADtPA;ACuPA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADrPA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper {\n  /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\r\n    <a-table\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"innerColumns\"\r\n      :row-selection=\"rowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"getScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      type: Number,\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: []\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\r\n        if (this.height) {\r\n          // 计算表体可用高度\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100 // 预估值，给表头和分页留空间\r\n          \r\n          if (availableHeight > 50) { // 确保有足够的最小高度\r\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      console.log('onShowSizeChangecurrent', current)\r\n      console.log(' onShowSizeChangepageSize', pageSize)\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n        this.paginationHeight = height\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = document.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      console.log('page', page)\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        // 再测一次分页高度，确保初次渲染完成后数值准确\r\n        this.setPaginationHeight()\r\n      }, 200)\r\n    })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n\r\n  /* 表格区域占满剩余空间，启用纵向滚动 */\r\n  ::v-deep .ant-table-wrapper {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-spin-nested-loading {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-spin-container {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-table {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  /* 确保表体能够正常纵向滚动 */\r\n  ::v-deep .ant-table-content {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    overflow: hidden;\r\n  }\r\n\r\n  ::v-deep .ant-table-scroll {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-table-header {\r\n    flex: 0 0 auto;\r\n    overflow: hidden;\r\n  }\r\n  ::v-deep .ant-table-fixed {\r\n    .ant-table-tbody {\r\n      .g-table__row--odd {\r\n        &.ant-table-row-hover {\r\n          td {\r\n            background-color: var(--idooel-row-hover-color);\r\n          }\r\n          .ant-table-selection-column {\r\n            background-color: var(--idooel-row-hover-color) !important;\r\n          }\r\n          .ant-table-row-cell-break-word {\r\n            background-color: var(--idooel-row-hover-color) !important;\r\n          }\r\n        }\r\n        td {\r\n          background-color: var(--idooel-row-odd-color);\r\n        }\r\n        .ant-table-selection-column {\r\n          background-color: var(--idooel-row-odd-color) !important;\r\n        }\r\n        .ant-table-row-cell-break-word {\r\n          background-color: var(--idooel-row-odd-color) !important;\r\n        }\r\n      }\r\n    }\r\n    .ant-table-thead {\r\n      background: rgba(0, 0, 0, 0.03) !important;\r\n    }\r\n  }\r\n\r\n  ::v-deep .ant-table-body {\r\n    flex: 1 1 auto;\r\n    overflow: auto !important;\r\n    /* 确保滚动条稳定，避免列宽抖动 */\r\n    scrollbar-gutter: stable;\r\n  }\r\n\r\n  /* 分页区域固定在底部，不被挤出视口 */\r\n  .g-table__pagination {\r\n    flex: 0 0 auto;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n    z-index: 999;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
+    inject("data-v-9fb141ac_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-9fb141ac] {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC2OhB;EACA,sBAAA;ADzOA;AC0OA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADxOA;ACkOA;EASA,eAAA;ADxOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;ACyNA;EAiBA,YAAA;ADvOA;ACwOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADtOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;AC0MA;EAgCA,cAAA;ADvOA;ACwOA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADtOA;AC8LA;EA2CA,cAAA;ADtOA;ACuOA;EACA,kBAAA;ADrOA;ACsOA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADpOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\">\r\n    <a-table\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"innerColumns\"\r\n      :row-selection=\"rowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"getScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      type: Number,\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: []\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n        const baseX = this.x || 1200\r\n        \r\n        if (this.height && this.needScrollY) {\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100\r\n          \r\n          if (availableHeight > 50) {\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.g-table__pagination')\r\n        if (el) {\r\n          const { height } = el.getBoundingClientRect()\r\n          this.paginationHeight = height\r\n        }\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        this.setPaginationHeight()\r\n      }, 200)\r\n    })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /* 强制统一行高，确保主表和固定列对齐 */\r\n  ::v-deep .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 固定列使用相同的行高 */\r\n  ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 表头也统一高度 */\r\n  ::v-deep .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 分页区域固定在底部 */\r\n  .g-table__pagination {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$D = "data-v-5681c4f1";
+  const __vue_scope_id__$D = "data-v-9fb141ac";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -3956,11 +3941,9 @@ var script$A = {
         form.evalDisabledExpression(data[idx]);
       });
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
-      const status = this.getFormRefs.map(form => {
-        const status = form.validateFields();
-        return status;
-      }).every(item => item);
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()));
+      const status = statusResults.every(item => item);
       if (status) {
         return this.submitRequestTrigger(props);
       } else {
@@ -4115,11 +4098,11 @@ __vue_render__$A._withStripped = true;
   /* style */
   const __vue_inject_styles__$A = function (inject) {
     if (!inject) return
-    inject("data-v-b64cef74_0", { source: ".ele.form-group-model__wrapper[data-v-b64cef74] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-b64cef74] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-b64cef74] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-b64cef74] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const status = this.getFormRefs.map(form => {\r\n        const status = form.validateFields()\r\n        return status\r\n      }).every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-e28e6ea2_0", { source: ".ele.form-group-model__wrapper[data-v-e28e6ea2] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-e28e6ea2] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-e28e6ea2] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-e28e6ea2] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0OA;EACA,iBAAA;EACA,oBAAA;ACzOA;AD0OA;EACA,gBAAA;EACA,gBAAA;ACxOA;ADyOA;EACA,iBAAA;ACvOA;ADyOA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACvOA;ADyOA;EACA,aAAA;ACvOA;AD0OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))\r\n      const status = statusResults.every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$A = "data-v-b64cef74";
+  const __vue_scope_id__$A = "data-v-e28e6ea2";
   /* module identifier */
   const __vue_module_identifier__$A = undefined;
   /* functional template */
@@ -4313,6 +4296,7 @@ var script$z = {
       }).then(resp => {
         this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
           ...props,
+          response: resp,
           formModel: {
             ...this.formModels(),
             ...(resp.data || {})
@@ -4386,9 +4370,9 @@ var script$z = {
     validateFields() {
       return this.$refs[this.formRef].validateFields();
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
       if (this.globalDisabled) return;
-      const status = this.$refs[this.formRef].validateFields();
+      const status = await this.$refs[this.formRef].validateFields();
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props);
@@ -4480,11 +4464,11 @@ __vue_render__$z._withStripped = true;
   /* style */
   const __vue_inject_styles__$z = function (inject) {
     if (!inject) return
-    inject("data-v-1aa83856_0", { source: ".form__model--wrapper[data-v-1aa83856] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-1aa83856] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-1aa83856] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-1aa83856] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-0377ec6e_0", { source: ".form__model--wrapper[data-v-0377ec6e] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0377ec6e] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-0377ec6e] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0377ec6e] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = await this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$z = "data-v-1aa83856";
+  const __vue_scope_id__$z = "data-v-0377ec6e";
   /* module identifier */
   const __vue_module_identifier__$z = undefined;
   /* functional template */
@@ -5090,11 +5074,11 @@ var script$w = {
       this.setFieldsValue(defaultValues);
     },
     validateFields() {
-      let ret = false;
-      this.form.validateFields((error, values) => {
-        ret = !error;
+      return new Promise(resolve => {
+        this.form.validateFields((error, values) => {
+          resolve(!error);
+        });
       });
-      return ret;
     },
     setFieldsValue(props = {}) {
       this.$nextTick(() => {
@@ -5702,11 +5686,11 @@ __vue_render__$w._withStripped = true;
   /* style */
   const __vue_inject_styles__$w = function (inject) {
     if (!inject) return
-    inject("data-v-6c735b44_0", { source: ".ele__form--wrapper[data-v-6c735b44] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      let ret = false\r\n      this.form.validateFields((error, values) => {\r\n        ret = !error\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-750019c0_0", { source: ".ele__form--wrapper[data-v-750019c0] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      return new Promise((resolve) => {\r\n        this.form.validateFields((error, values) => {\r\n          resolve(!error)\r\n        })\r\n      })\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$w = "data-v-6c735b44";
+  const __vue_scope_id__$w = "data-v-750019c0";
   /* module identifier */
   const __vue_module_identifier__$w = undefined;
   /* functional template */
@@ -14248,9 +14232,9 @@ var script$9 = {
     validateFields() {
       return this.$refs[this.formRef].validateFields();
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
       if (this.globalDisabled) return;
-      const status = this.$refs[this.formRef].validateFields();
+      const status = await this.$refs[this.formRef].validateFields();
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props);

package/dist/@idooel/components.umd.js

@@ -2192,7 +2192,7 @@
     },
     computed: {
       wrapperStyle() {
-        // 外层容器样式：确保分页始终可见，表格充满剩余空间
+        // 外层容器样式
         if (!this.height) return {};
         return {
           height: `${this.height}px`
@@ -2226,20 +2226,11 @@
         if (this.scroll) {
           return this.scroll;
         } else {
-          const baseX = this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x;
-          if (this.height) {
-            // 计算表体可用高度
-            const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100; // 预估值，给表头和分页留空间
-
+          // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
+          const baseX = this.x || 1200;
+          if (this.height && this.needScrollY) {
+            const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
             if (availableHeight > 50) {
-              // 确保有足够的最小高度
-              console.log('Table scroll config:', {
-                x: baseX,
-                y: availableHeight,
-                height: this.height,
-                headerHeight: this.tableHeaderHeight,
-                paginationHeight: this.paginationHeight
-              });
               return {
                 x: baseX,
                 y: availableHeight
@@ -2262,23 +2253,24 @@
     },
     methods: {
       onShowSizeChange(current, pageSize) {
-        console.log('onShowSizeChangecurrent', current);
-        console.log(' onShowSizeChangepageSize', pageSize);
         this.innerCurrentPage = current;
         this.innerPageSize = pageSize;
         this.$emit('change-page', current, pageSize);
       },
       setPaginationHeight() {
         this.$nextTick(() => {
-          const {
-            height
-          } = document.querySelector('.g-table__pagination').getBoundingClientRect();
-          this.paginationHeight = height;
+          const el = this.$el.querySelector('.g-table__pagination');
+          if (el) {
+            const {
+              height
+            } = el.getBoundingClientRect();
+            this.paginationHeight = height;
+          }
         });
       },
       setTableHeaderHeight() {
         this.$nextTick(() => {
-          const el = document.querySelector('.ant-table-header');
+          const el = this.$el.querySelector('.ant-table-header');
           if (!el) return;
           const {
             height
@@ -2287,7 +2279,6 @@
         });
       },
       setTableTbodyHeight() {
-        // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
         this.$nextTick(() => {
           this.setTableHeaderHeight();
         });
@@ -2296,7 +2287,6 @@
         return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
       },
       onChangePagination(page, pageSize) {
-        console.log('page', page);
         this.innerCurrentPage = page;
         this.innerPageSize = pageSize;
         this.$emit('change-page', page, pageSize);
@@ -2307,7 +2297,6 @@
         this.setPaginationHeight();
         setTimeout(() => {
           this.setTableTbodyHeight();
-          // 再测一次分页高度，确保初次渲染完成后数值准确
           this.setPaginationHeight();
         }, 200);
       });
@@ -2327,11 +2316,7 @@
     var _c = _vm._self._c || _h;
     return _c(
       "div",
-      {
-        staticClass: "g-table__wrapper",
-        class: { "g-table--no-scroll-y": !_vm.needScrollY },
-        style: _vm.wrapperStyle,
-      },
+      { staticClass: "g-table__wrapper", style: _vm.wrapperStyle },
       [
         _c("a-table", {
           class: [_vm.isNoData && "g-table__no-data"],
@@ -2411,11 +2396,11 @@
     /* style */
     const __vue_inject_styles__$D = function (inject) {
       if (!inject) return
-      inject("data-v-5681c4f1_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-5681c4f1]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination[data-v-5681c4f1] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC6OhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;AD5OA;AC6OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD3OA;AC8OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD5OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD7OA;ACgPA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD9OA;AC8MA;EAmCA,iBAAA;AD9OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD7OA;ACgPA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD9OA;ACiPA;EACA,cAAA;EACA,gBAAA;AD/OA;ACqPA;EACA,+CAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACsPA;EACA,6CAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACwPA;EACA,0CAAA;ADtPA;AC0PA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADxPA;ACkKA;EAyFA,qBAAA;ADxPA;ACyPA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvPA;ACoJA;EAsGA,cAAA;ADvPA;ACwPA;EACA,kBAAA;ADtPA;ACuPA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADrPA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper {\n  /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\r\n    <a-table\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"innerColumns\"\r\n      :row-selection=\"rowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"getScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      type: Number,\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: []\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\r\n        if (this.height) {\r\n          // 计算表体可用高度\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100 // 预估值，给表头和分页留空间\r\n          \r\n          if (availableHeight > 50) { // 确保有足够的最小高度\r\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      console.log('onShowSizeChangecurrent', current)\r\n      console.log(' onShowSizeChangepageSize', pageSize)\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n        this.paginationHeight = height\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = document.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      console.log('page', page)\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        // 再测一次分页高度，确保初次渲染完成后数值准确\r\n        this.setPaginationHeight()\r\n      }, 200)\r\n    })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n\r\n  /* 表格区域占满剩余空间，启用纵向滚动 */\r\n  ::v-deep .ant-table-wrapper {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-spin-nested-loading {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-spin-container {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-table {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  /* 确保表体能够正常纵向滚动 */\r\n  ::v-deep .ant-table-content {\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n    overflow: hidden;\r\n  }\r\n\r\n  ::v-deep .ant-table-scroll {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::v-deep .ant-table-header {\r\n    flex: 0 0 auto;\r\n    overflow: hidden;\r\n  }\r\n  ::v-deep .ant-table-fixed {\r\n    .ant-table-tbody {\r\n      .g-table__row--odd {\r\n        &.ant-table-row-hover {\r\n          td {\r\n            background-color: var(--idooel-row-hover-color);\r\n          }\r\n          .ant-table-selection-column {\r\n            background-color: var(--idooel-row-hover-color) !important;\r\n          }\r\n          .ant-table-row-cell-break-word {\r\n            background-color: var(--idooel-row-hover-color) !important;\r\n          }\r\n        }\r\n        td {\r\n          background-color: var(--idooel-row-odd-color);\r\n        }\r\n        .ant-table-selection-column {\r\n          background-color: var(--idooel-row-odd-color) !important;\r\n        }\r\n        .ant-table-row-cell-break-word {\r\n          background-color: var(--idooel-row-odd-color) !important;\r\n        }\r\n      }\r\n    }\r\n    .ant-table-thead {\r\n      background: rgba(0, 0, 0, 0.03) !important;\r\n    }\r\n  }\r\n\r\n  ::v-deep .ant-table-body {\r\n    flex: 1 1 auto;\r\n    overflow: auto !important;\r\n    /* 确保滚动条稳定，避免列宽抖动 */\r\n    scrollbar-gutter: stable;\r\n  }\r\n\r\n  /* 分页区域固定在底部，不被挤出视口 */\r\n  .g-table__pagination {\r\n    flex: 0 0 auto;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n    z-index: 999;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
+      inject("data-v-9fb141ac_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-9fb141ac] {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC2OhB;EACA,sBAAA;ADzOA;AC0OA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADxOA;ACkOA;EASA,eAAA;ADxOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;ACyNA;EAiBA,YAAA;ADvOA;ACwOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADtOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;AC0MA;EAgCA,cAAA;ADvOA;ACwOA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADtOA;AC8LA;EA2CA,cAAA;ADtOA;ACuOA;EACA,kBAAA;ADrOA;ACsOA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADpOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\">\r\n    <a-table\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"innerColumns\"\r\n      :row-selection=\"rowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"getScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      type: Number,\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: []\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n        const baseX = this.x || 1200\r\n        \r\n        if (this.height && this.needScrollY) {\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100\r\n          \r\n          if (availableHeight > 50) {\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.g-table__pagination')\r\n        if (el) {\r\n          const { height } = el.getBoundingClientRect()\r\n          this.paginationHeight = height\r\n        }\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        this.setPaginationHeight()\r\n      }, 200)\r\n    })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /* 强制统一行高，确保主表和固定列对齐 */\r\n  ::v-deep .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 固定列使用相同的行高 */\r\n  ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 表头也统一高度 */\r\n  ::v-deep .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 分页区域固定在底部 */\r\n  .g-table__pagination {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$D = "data-v-5681c4f1";
+    const __vue_scope_id__$D = "data-v-9fb141ac";
     /* module identifier */
     const __vue_module_identifier__$D = undefined;
     /* functional template */
@@ -3961,11 +3946,9 @@
           form.evalDisabledExpression(data[idx]);
         });
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
-        const status = this.getFormRefs.map(form => {
-          const status = form.validateFields();
-          return status;
-        }).every(item => item);
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+        const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()));
+        const status = statusResults.every(item => item);
         if (status) {
           return this.submitRequestTrigger(props);
         } else {
@@ -4120,11 +4103,11 @@
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      inject("data-v-b64cef74_0", { source: ".ele.form-group-model__wrapper[data-v-b64cef74] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-b64cef74] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-b64cef74] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-b64cef74] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const status = this.getFormRefs.map(form => {\r\n        const status = form.validateFields()\r\n        return status\r\n      }).every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-e28e6ea2_0", { source: ".ele.form-group-model__wrapper[data-v-e28e6ea2] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-e28e6ea2] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-e28e6ea2] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-e28e6ea2] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0OA;EACA,iBAAA;EACA,oBAAA;ACzOA;AD0OA;EACA,gBAAA;EACA,gBAAA;ACxOA;ADyOA;EACA,iBAAA;ACvOA;ADyOA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACvOA;ADyOA;EACA,aAAA;ACvOA;AD0OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))\r\n      const status = statusResults.every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$A = "data-v-b64cef74";
+    const __vue_scope_id__$A = "data-v-e28e6ea2";
     /* module identifier */
     const __vue_module_identifier__$A = undefined;
     /* functional template */
@@ -4318,6 +4301,7 @@
         }).then(resp => {
           this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
             ...props,
+            response: resp,
             formModel: {
               ...this.formModels(),
               ...(resp.data || {})
@@ -4391,9 +4375,9 @@
       validateFields() {
         return this.$refs[this.formRef].validateFields();
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
         if (this.globalDisabled) return;
-        const status = this.$refs[this.formRef].validateFields();
+        const status = await this.$refs[this.formRef].validateFields();
         if (status) {
           //TODO fieldMap
           return this.submitRequestTrigger(props);
@@ -4485,11 +4469,11 @@
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-1aa83856_0", { source: ".form__model--wrapper[data-v-1aa83856] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-1aa83856] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-1aa83856] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-1aa83856] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-0377ec6e_0", { source: ".form__model--wrapper[data-v-0377ec6e] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0377ec6e] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-0377ec6e] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0377ec6e] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = await this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$z = "data-v-1aa83856";
+    const __vue_scope_id__$z = "data-v-0377ec6e";
     /* module identifier */
     const __vue_module_identifier__$z = undefined;
     /* functional template */
@@ -5095,11 +5079,11 @@
         this.setFieldsValue(defaultValues);
       },
       validateFields() {
-        let ret = false;
-        this.form.validateFields((error, values) => {
-          ret = !error;
+        return new Promise(resolve => {
+          this.form.validateFields((error, values) => {
+            resolve(!error);
+          });
         });
-        return ret;
       },
       setFieldsValue(props = {}) {
         this.$nextTick(() => {
@@ -5707,11 +5691,11 @@
     /* style */
     const __vue_inject_styles__$w = function (inject) {
       if (!inject) return
-      inject("data-v-6c735b44_0", { source: ".ele__form--wrapper[data-v-6c735b44] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      let ret = false\r\n      this.form.validateFields((error, values) => {\r\n        ret = !error\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-750019c0_0", { source: ".ele__form--wrapper[data-v-750019c0] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      return new Promise((resolve) => {\r\n        this.form.validateFields((error, values) => {\r\n          resolve(!error)\r\n        })\r\n      })\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$w = "data-v-6c735b44";
+    const __vue_scope_id__$w = "data-v-750019c0";
     /* module identifier */
     const __vue_module_identifier__$w = undefined;
     /* functional template */
@@ -14253,9 +14237,9 @@
       validateFields() {
         return this.$refs[this.formRef].validateFields();
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
         if (this.globalDisabled) return;
-        const status = this.$refs[this.formRef].validateFields();
+        const status = await this.$refs[this.formRef].validateFields();
         if (status) {
           //TODO fieldMap
           return this.submitRequestTrigger(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.25",
+  "version": "0.0.2-beta.27",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/composite-components/modal-form/src/index.vue

@@ -211,9 +211,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)

package/packages/form/src/index.vue

@@ -312,11 +312,11 @@ export default {
       this.setFieldsValue(defaultValues)
     },
     validateFields () {
-      let ret = false
-      this.form.validateFields((error, values) => {
-        ret = !error
+      return new Promise((resolve) => {
+        this.form.validateFields((error, values) => {
+          resolve(!error)
+        })
       })
-      return ret
     },
     setFieldsValue (props = {}) {
       this.$nextTick(() => {

package/packages/models/form-group-model/src/index.vue

@@ -192,11 +192,9 @@ export default {
         form.evalDisabledExpression(data[idx])
       })
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      const status = this.getFormRefs.map(form => {
-        const status = form.validateFields()
-        return status
-      }).every(item => item)
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))
+      const status = statusResults.every(item => item)
       if (status) {
         return this.submitRequestTrigger(props)
       } else {

package/packages/models/form-model/src/index.vue

@@ -143,7 +143,7 @@ export default {
       const currentUrl = this.executeExpressionForUrl(url)
       if (!currentUrl) return
       const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })
         return resp.data
       })
       return ret
@@ -182,9 +182,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)

package/packages/table/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="g-table__wrapper" :style="wrapperStyle" :class="{ 'g-table--no-scroll-y': !needScrollY }">
+  <div class="g-table__wrapper" :style="wrapperStyle">
     <a-table
       :bordered="bordered"
       :class="[isNoData && 'g-table__no-data']"
@@ -122,7 +122,7 @@ export default {
   },
   computed: {
     wrapperStyle () {
-      // 外层容器样式：确保分页始终可见，表格充满剩余空间
+      // 外层容器样式
       if (!this.height) return {}
       return { height: `${this.height}px` }
     },
@@ -156,15 +156,15 @@ export default {
       if (this.scroll) {
         return this.scroll
       } else {
-        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)
-        if (this.height) {
-          // 计算表体可用高度
+        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
+        const baseX = this.x || 1200
+        
+        if (this.height && this.needScrollY) {
           const availableHeight = this.tableHeaderHeight && this.paginationHeight 
             ? this.getScrollHeightByHeight 
-            : this.height - 100 // 预估值，给表头和分页留空间
+            : this.height - 100
           
-          if (availableHeight > 50) { // 确保有足够的最小高度
-            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })
+          if (availableHeight > 50) {
             return { x: baseX, y: availableHeight }
           }
         }
@@ -182,28 +182,28 @@ export default {
   },
   methods: {
     onShowSizeChange (current, pageSize) {
-      console.log('onShowSizeChangecurrent', current)
-      console.log(' onShowSizeChangepageSize', pageSize)
       this.innerCurrentPage = current
       this.innerPageSize = pageSize
       this.$emit('change-page', current, pageSize)
     },
     setPaginationHeight () {
       this.$nextTick(() => {
-        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
-        this.paginationHeight = height
+        const el = this.$el.querySelector('.g-table__pagination')
+        if (el) {
+          const { height } = el.getBoundingClientRect()
+          this.paginationHeight = height
+        }
       })
     },
     setTableHeaderHeight () {
       this.$nextTick(() => {
-        const el = document.querySelector('.ant-table-header')
+        const el = this.$el.querySelector('.ant-table-header')
         if (!el) return
         const { height } = el.getBoundingClientRect()
         this.tableHeaderHeight = height
       })
     },
     setTableTbodyHeight () {
-      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
       this.$nextTick(() => {
         this.setTableHeaderHeight()
       })
@@ -212,7 +212,6 @@ export default {
       return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
     },
     onChangePagination (page, pageSize) {
-      console.log('page', page)
       this.innerCurrentPage = page
       this.innerPageSize = pageSize
       this.$emit('change-page', page, pageSize)
@@ -223,7 +222,6 @@ export default {
       this.setPaginationHeight()
       setTimeout(() => {
         this.setTableTbodyHeight()
-        // 再测一次分页高度，确保初次渲染完成后数值准确
         this.setPaginationHeight()
       }, 200)
     })
@@ -236,97 +234,39 @@ export default {
 
 <style lang="scss" scoped>
 .g-table__wrapper {
-  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  /* 表格区域占满剩余空间，启用纵向滚动 */
-  ::v-deep .ant-table-wrapper {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-spin-nested-loading {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-spin-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::v-deep .ant-table {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* 确保表体能够正常纵向滚动 */
-  ::v-deep .ant-table-content {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
+  /* 强制统一行高，确保主表和固定列对齐 */
+  ::v-deep .ant-table-tbody > tr > td {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
   }
 
-  ::v-deep .ant-table-scroll {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  /* 固定列使用相同的行高 */
+  ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
   }
 
-  ::v-deep .ant-table-header {
-    flex: 0 0 auto;
-    overflow: hidden;
-  }
-  ::v-deep .ant-table-fixed {
-    .ant-table-tbody {
-      .g-table__row--odd {
-        &.ant-table-row-hover {
-          td {
-            background-color: var(--idooel-row-hover-color);
-          }
-          .ant-table-selection-column {
-            background-color: var(--idooel-row-hover-color) !important;
-          }
-          .ant-table-row-cell-break-word {
-            background-color: var(--idooel-row-hover-color) !important;
-          }
-        }
-        td {
-          background-color: var(--idooel-row-odd-color);
-        }
-        .ant-table-selection-column {
-          background-color: var(--idooel-row-odd-color) !important;
-        }
-        .ant-table-row-cell-break-word {
-          background-color: var(--idooel-row-odd-color) !important;
-        }
-      }
-    }
-    .ant-table-thead {
-      background: rgba(0, 0, 0, 0.03) !important;
-    }
+  /* 表头也统一高度 */
+  ::v-deep .ant-table-thead > tr > th {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
   }
 
-  ::v-deep .ant-table-body {
-    flex: 1 1 auto;
-    overflow: auto !important;
-    /* 确保滚动条稳定，避免列宽抖动 */
-    scrollbar-gutter: stable;
+  ::v-deep .ant-table-fixed .ant-table-thead > tr > th {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
   }
 
-  /* 分页区域固定在底部，不被挤出视口 */
+  /* 分页区域固定在底部 */
   .g-table__pagination {
-    flex: 0 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: end;
@@ -334,7 +274,6 @@ export default {
     padding-top: 8px;
     padding-bottom: 8px;
     background: #fff;
-    z-index: 999;
   }
 
   /* 空数据状态顶部显示 */