@idooel/components 0.0.2-beta.32 → 0.0.2-beta.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@idooel/components.esm.js +81 -42
- package/dist/@idooel/components.umd.js +81 -42
- package/package.json +1 -1
- package/packages/form/src/index.vue +11 -0
- package/packages/table/src/index.vue +611 -610
|
@@ -2208,6 +2208,9 @@ var script$D = {
|
|
|
2208
2208
|
const availableHeight = this.getScrollHeightByHeight;
|
|
2209
2209
|
if (availableHeight <= 0) return false;
|
|
2210
2210
|
|
|
2211
|
+
// 无数据时也需设置 scroll.y，使表格体有高度，否则“暂无数据”占位区域会塌陷无法正常显示
|
|
2212
|
+
if (!this.dataSource.length) return true;
|
|
2213
|
+
|
|
2211
2214
|
// 预估每行高度（包含边框），antd 默认约 54px
|
|
2212
2215
|
const estimatedRowHeight = 54;
|
|
2213
2216
|
const estimatedTableHeight = this.dataSource.length * estimatedRowHeight;
|
|
@@ -2226,8 +2229,8 @@ var script$D = {
|
|
|
2226
2229
|
isFlexColumn() {
|
|
2227
2230
|
return this.columns.every(col => !col.width);
|
|
2228
2231
|
},
|
|
2229
|
-
/**
|
|
2230
|
-
* 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）
|
|
2232
|
+
/**
|
|
2233
|
+
* 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）
|
|
2231
2234
|
*/
|
|
2232
2235
|
totalColumnsWidth() {
|
|
2233
2236
|
const cols = this.innerColumns || [];
|
|
@@ -2243,8 +2246,8 @@ var script$D = {
|
|
|
2243
2246
|
}
|
|
2244
2247
|
return total;
|
|
2245
2248
|
},
|
|
2246
|
-
/**
|
|
2247
|
-
* 是否需要横向滚动：容器宽度 < 列总宽度
|
|
2249
|
+
/**
|
|
2250
|
+
* 是否需要横向滚动：容器宽度 < 列总宽度
|
|
2248
2251
|
*/
|
|
2249
2252
|
needHorizontalScroll() {
|
|
2250
2253
|
// 未获取容器宽度前，先假定需要滚动（保守策略）
|
|
@@ -2252,10 +2255,10 @@ var script$D = {
|
|
|
2252
2255
|
// 加一点容差
|
|
2253
2256
|
return this.containerWidth < this.totalColumnsWidth - 5;
|
|
2254
2257
|
},
|
|
2255
|
-
/**
|
|
2256
|
-
* 智能列配置：
|
|
2257
|
-
* - 当需要横向滚动时，保留原始 fixed 属性
|
|
2258
|
-
* - 当容器足够宽时，移除 fixed 属性，让表格自动铺满
|
|
2258
|
+
/**
|
|
2259
|
+
* 智能列配置：
|
|
2260
|
+
* - 当需要横向滚动时，保留原始 fixed 属性
|
|
2261
|
+
* - 当容器足够宽时，移除 fixed 属性，让表格自动铺满
|
|
2259
2262
|
*/
|
|
2260
2263
|
smartColumns() {
|
|
2261
2264
|
if (this.needHorizontalScroll) {
|
|
@@ -2274,10 +2277,10 @@ var script$D = {
|
|
|
2274
2277
|
return col;
|
|
2275
2278
|
});
|
|
2276
2279
|
},
|
|
2277
|
-
/**
|
|
2278
|
-
* 智能 scroll 配置：
|
|
2279
|
-
* - 当需要横向滚动时，设置 scroll.x
|
|
2280
|
-
* - 当容器足够宽时，不设置 scroll.x，避免产生空白区域
|
|
2280
|
+
/**
|
|
2281
|
+
* 智能 scroll 配置：
|
|
2282
|
+
* - 当需要横向滚动时，设置 scroll.x
|
|
2283
|
+
* - 当容器足够宽时，不设置 scroll.x，避免产生空白区域
|
|
2281
2284
|
*/
|
|
2282
2285
|
smartScroll() {
|
|
2283
2286
|
if (!this.needHorizontalScroll) {
|
|
@@ -2295,10 +2298,10 @@ var script$D = {
|
|
|
2295
2298
|
// 需要横向滚动，使用原有逻辑
|
|
2296
2299
|
return this.getScroll;
|
|
2297
2300
|
},
|
|
2298
|
-
/**
|
|
2299
|
-
* 智能 rowSelection 配置：
|
|
2300
|
-
* - 当需要横向滚动时，保留原始 fixed 属性
|
|
2301
|
-
* - 当容器足够宽时，移除 fixed 属性
|
|
2301
|
+
/**
|
|
2302
|
+
* 智能 rowSelection 配置：
|
|
2303
|
+
* - 当需要横向滚动时，保留原始 fixed 属性
|
|
2304
|
+
* - 当容器足够宽时，移除 fixed 属性
|
|
2302
2305
|
*/
|
|
2303
2306
|
smartRowSelection() {
|
|
2304
2307
|
if (!this.rowSelection) return null;
|
|
@@ -2362,9 +2365,9 @@ var script$D = {
|
|
|
2362
2365
|
},
|
|
2363
2366
|
immediate: true
|
|
2364
2367
|
},
|
|
2365
|
-
/**
|
|
2366
|
-
* 监听 needHorizontalScroll 变化，强制重新渲染表格
|
|
2367
|
-
* 当从"需要固定列"切换到"不需要固定列"或反之时，antd 的 a-table 需要完全重新渲染
|
|
2368
|
+
/**
|
|
2369
|
+
* 监听 needHorizontalScroll 变化，强制重新渲染表格
|
|
2370
|
+
* 当从"需要固定列"切换到"不需要固定列"或反之时，antd 的 a-table 需要完全重新渲染
|
|
2368
2371
|
*/
|
|
2369
2372
|
needHorizontalScroll(newVal, oldVal) {
|
|
2370
2373
|
if (newVal !== oldVal) {
|
|
@@ -2427,12 +2430,12 @@ var script$D = {
|
|
|
2427
2430
|
}
|
|
2428
2431
|
});
|
|
2429
2432
|
},
|
|
2430
|
-
/**
|
|
2431
|
-
* 带重试的固定列同步机制
|
|
2432
|
-
* antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，
|
|
2433
|
-
* 这里通过重试确保固定列渲染完成后再同步。
|
|
2434
|
-
* @param {boolean} needFixed - 是否需要固定列
|
|
2435
|
-
* @param {number} retries - 当前重试次数
|
|
2433
|
+
/**
|
|
2434
|
+
* 带重试的固定列同步机制
|
|
2435
|
+
* antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，
|
|
2436
|
+
* 这里通过重试确保固定列渲染完成后再同步。
|
|
2437
|
+
* @param {boolean} needFixed - 是否需要固定列
|
|
2438
|
+
* @param {number} retries - 当前重试次数
|
|
2436
2439
|
*/
|
|
2437
2440
|
retrySyncFixedColumns(needFixed, retries = 0) {
|
|
2438
2441
|
const MAX_RETRIES = 5;
|
|
@@ -2456,11 +2459,11 @@ var script$D = {
|
|
|
2456
2459
|
}
|
|
2457
2460
|
}, DELAY);
|
|
2458
2461
|
},
|
|
2459
|
-
/**
|
|
2460
|
-
* 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。
|
|
2461
|
-
* 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，
|
|
2462
|
-
* header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就"滚不动"。
|
|
2463
|
-
* 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。
|
|
2462
|
+
/**
|
|
2463
|
+
* 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。
|
|
2464
|
+
* 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，
|
|
2465
|
+
* header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就"滚不动"。
|
|
2466
|
+
* 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。
|
|
2464
2467
|
*/
|
|
2465
2468
|
syncHeaderTableWidth() {
|
|
2466
2469
|
this.$nextTick(() => {
|
|
@@ -2478,8 +2481,8 @@ var script$D = {
|
|
|
2478
2481
|
}
|
|
2479
2482
|
});
|
|
2480
2483
|
},
|
|
2481
|
-
/**
|
|
2482
|
-
* 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）
|
|
2484
|
+
/**
|
|
2485
|
+
* 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）
|
|
2483
2486
|
*/
|
|
2484
2487
|
bindScrollSync() {
|
|
2485
2488
|
const body = this.$el.querySelector('.ant-table-scroll .ant-table-body');
|
|
@@ -2500,8 +2503,8 @@ var script$D = {
|
|
|
2500
2503
|
this._scrollHandler = null;
|
|
2501
2504
|
}
|
|
2502
2505
|
},
|
|
2503
|
-
/**
|
|
2504
|
-
* 测量容器宽度
|
|
2506
|
+
/**
|
|
2507
|
+
* 测量容器宽度
|
|
2505
2508
|
*/
|
|
2506
2509
|
measureContainerWidth() {
|
|
2507
2510
|
const wrapper = this.$refs.tableWrapper;
|
|
@@ -2509,8 +2512,8 @@ var script$D = {
|
|
|
2509
2512
|
this.containerWidth = wrapper.clientWidth;
|
|
2510
2513
|
}
|
|
2511
2514
|
},
|
|
2512
|
-
/**
|
|
2513
|
-
* 使用 ResizeObserver 监听容器宽度变化
|
|
2515
|
+
/**
|
|
2516
|
+
* 使用 ResizeObserver 监听容器宽度变化
|
|
2514
2517
|
*/
|
|
2515
2518
|
observeContainerWidth() {
|
|
2516
2519
|
const wrapper = this.$refs.tableWrapper;
|
|
@@ -2555,8 +2558,8 @@ var script$D = {
|
|
|
2555
2558
|
});
|
|
2556
2559
|
this._containerResizeObserver.observe(wrapper);
|
|
2557
2560
|
},
|
|
2558
|
-
/**
|
|
2559
|
-
* 断开容器宽度监听
|
|
2561
|
+
/**
|
|
2562
|
+
* 断开容器宽度监听
|
|
2560
2563
|
*/
|
|
2561
2564
|
unobserveContainerWidth() {
|
|
2562
2565
|
if (this._containerResizeObserver) {
|
|
@@ -2637,6 +2640,7 @@ var __vue_render__$D = function () {
|
|
|
2637
2640
|
"row-class-name": _vm.setRowClassName,
|
|
2638
2641
|
"data-source": _vm.dataSource,
|
|
2639
2642
|
scroll: _vm.smartScroll,
|
|
2643
|
+
locale: { emptyText: "暂无数据" },
|
|
2640
2644
|
},
|
|
2641
2645
|
scopedSlots: _vm._u([
|
|
2642
2646
|
{
|
|
@@ -2705,11 +2709,11 @@ __vue_render__$D._withStripped = true;
|
|
|
2705
2709
|
/* style */
|
|
2706
2710
|
const __vue_inject_styles__$D = function (inject) {
|
|
2707
2711
|
if (!inject) return
|
|
2708
|
-
inject("data-v-483eea17_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-483eea17] {\n /**\n * 修复\"宽屏下表格两侧出现空白\"问题：\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n */\n}\n.g-table__wrapper[data-v-483eea17] .ant-table-scroll .ant-table-header table,\n.g-table__wrapper[data-v-483eea17] .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n}\n.g-table__wrapper[data-v-483eea17] {\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n}\n.g-table__wrapper[data-v-483eea17] .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper[data-v-483eea17] .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n visibility: hidden;\n}\n.g-table__wrapper[data-v-483eea17] {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-483eea17] .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n}\n.g-table__wrapper[data-v-483eea17] {\n /* 表头也统一高度和样式 */\n}\n.g-table__wrapper[data-v-483eea17] .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n}\n.g-table__wrapper[data-v-483eea17] {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-483eea17] {\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-483eea17] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-483eea17] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-483eea17] .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;AC2hBhB;EACA;;;;;IAAA;ADphBA;AC0hBA;;EAEA,eAAA;ADxhBA;AC+gBA;EAYA;;;;IAAA;ADphBA;ACyhBA;;EAEA,kBAAA;ADvhBA;ACogBA;EAsBA,sBAAA;ADvhBA;ACwhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADthBA;AC0fA;EA+BA,eAAA;ADthBA;ACuhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADrhBA;ACgfA;EAwCA,cAAA;ADrhBA;ACshBA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADphBA;ACoeA;EAmDA,cAAA;ADphBA;ACqhBA;EACA,kBAAA;ADnhBA;ACohBA;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;ADlhBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n /**\n * 修复\"宽屏下表格两侧出现空白\"问题：\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header table,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n}\n.g-table__wrapper {\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n visibility: hidden;\n}\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 line-height: 38px;\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 line-height: 38px;\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\" ref=\"tableWrapper\" :style=\"wrapperStyle\">\r\n <a-table\r\n :key=\"tableRenderKey\"\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=\"smartColumns\"\r\n :row-selection=\"smartRowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"smartScroll\">\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 :data=\"dataSource\"\r\n :loading=\"countLoading\"\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 // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）\r\n type: [Number, String],\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 countLoading: {\r\n type: Boolean,\r\n default: false\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 // 容器宽度，用于智能判断是否需要 fixed 列\r\n containerWidth: 0,\r\n // 用于强制重新渲染表格（当 fixed 列状态切换时）\r\n tableRenderKey: 0\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 /**\r\n * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）\r\n */\r\n totalColumnsWidth () {\r\n const cols = this.innerColumns || []\r\n let total = cols.reduce((sum, col) => {\r\n const w = col && col.width\r\n return sum + (typeof w === 'number' ? w : 0)\r\n }, 0)\r\n // rowSelection 的 checkbox/radio 列，antd 默认约 60px\r\n if (this.rowSelection) total += 60\r\n // 操作列（operations）的宽度\r\n if (this.operations && this.operations.width && typeof this.operations.width === 'number') {\r\n total += this.operations.width\r\n }\r\n return total\r\n },\r\n /**\r\n * 是否需要横向滚动：容器宽度 < 列总宽度\r\n */\r\n needHorizontalScroll () {\r\n // 未获取容器宽度前，先假定需要滚动（保守策略）\r\n if (!this.containerWidth) return true\r\n // 加一点容差\r\n return this.containerWidth < this.totalColumnsWidth - 5\r\n },\r\n /**\r\n * 智能列配置：\r\n * - 当需要横向滚动时，保留原始 fixed 属性\r\n * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满\r\n */\r\n smartColumns () {\r\n if (this.needHorizontalScroll) {\r\n // 需要滚动，保留原始配置\r\n return this.innerColumns\r\n }\r\n // 不需要滚动，移除所有 fixed 属性\r\n return this.innerColumns.map(col => {\r\n if (col.fixed) {\r\n const { fixed, ...rest } = col\r\n return rest\r\n }\r\n return col\r\n })\r\n },\r\n /**\r\n * 智能 scroll 配置：\r\n * - 当需要横向滚动时，设置 scroll.x\r\n * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域\r\n */\r\n smartScroll () {\r\n if (!this.needHorizontalScroll) {\r\n // 不需要横向滚动，只保留 y 方向（如果需要）\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 if (availableHeight > 50) {\r\n return { y: availableHeight }\r\n }\r\n }\r\n return {}\r\n }\r\n // 需要横向滚动，使用原有逻辑\r\n return this.getScroll\r\n },\r\n /**\r\n * 智能 rowSelection 配置：\r\n * - 当需要横向滚动时，保留原始 fixed 属性\r\n * - 当容器足够宽时，移除 fixed 属性\r\n */\r\n smartRowSelection () {\r\n if (!this.rowSelection) return null\r\n if (this.needHorizontalScroll) {\r\n return this.rowSelection\r\n }\r\n // 不需要滚动，移除 fixed 属性\r\n if (this.rowSelection.fixed) {\r\n const { fixed, ...rest } = this.rowSelection\r\n return rest\r\n }\r\n return this.rowSelection\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n let baseX = (this.x === '' || this.x === null || this.x === undefined) ? 1200 : this.x\r\n\r\n // 解决“x 给太大导致操作列前出现大块空白”的问题：\r\n // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。\r\n if (typeof baseX === 'number') {\r\n const cols = this.innerColumns || []\r\n const total = cols.reduce((sum, col) => {\r\n const w = col && col.width\r\n return sum + (typeof w === 'number' ? w : 0)\r\n }, 0)\r\n\r\n // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差\r\n const selectionWidth = this.rowSelection ? 60 : 0\r\n\r\n // 只有当所有列都明确给了宽度（total > 0）时才 clamp\r\n if (total > 0) {\r\n const minX = total + selectionWidth\r\n if (baseX > minX) baseX = minX\r\n }\r\n }\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 * 监听 needHorizontalScroll 变化，强制重新渲染表格\r\n * 当从\"需要固定列\"切换到\"不需要固定列\"或反之时，antd 的 a-table 需要完全重新渲染\r\n */\r\n needHorizontalScroll (newVal, oldVal) {\r\n if (newVal !== oldVal) {\r\n // 更新 key 强制 Vue 销毁并重建 a-table 组件\r\n this.tableRenderKey++\r\n // 使用重试机制确保固定列完全渲染\r\n this.$nextTick(() => {\r\n this.retrySyncFixedColumns(newVal)\r\n })\r\n }\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 syncFixedColumns () {\r\n // 强制 ant-design-vue 重新计算固定列的宽度\r\n this.$nextTick(() => {\r\n const tableEl = this.$el.querySelector('.ant-table')\r\n if (tableEl) {\r\n // 触发窗口 resize 事件，让 ant-design-vue 重新计算\r\n window.dispatchEvent(new Event('resize'))\r\n }\r\n })\r\n },\r\n /**\r\n * 带重试的固定列同步机制\r\n * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，\r\n * 这里通过重试确保固定列渲染完成后再同步。\r\n * @param {boolean} needFixed - 是否需要固定列\r\n * @param {number} retries - 当前重试次数\r\n */\r\n retrySyncFixedColumns (needFixed, retries = 0) {\r\n const MAX_RETRIES = 5\r\n const DELAY = 100 // 每次延迟 100ms\r\n\r\n setTimeout(() => {\r\n this.syncFixedColumns()\r\n this.syncHeaderTableWidth()\r\n this.bindScrollSync()\r\n\r\n // 如果需要固定列，检查是否已渲染\r\n if (needFixed && retries < MAX_RETRIES) {\r\n const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr')\r\n const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr')\r\n \r\n // 如果有固定列配置但还没渲染出来，继续重试\r\n const hasFixedConfig = this.innerColumns.some(c => c.fixed) || (this.rowSelection && this.rowSelection.fixed)\r\n if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {\r\n this.retrySyncFixedColumns(needFixed, retries + 1)\r\n }\r\n }\r\n }, DELAY)\r\n },\r\n /**\r\n * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。\r\n * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，\r\n * header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就\"滚不动\"。\r\n * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。\r\n */\r\n syncHeaderTableWidth () {\r\n this.$nextTick(() => {\r\n const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table')\r\n const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table')\r\n if (!headerTable || !bodyTable) return\r\n\r\n const bodyW = bodyTable.getBoundingClientRect().width\r\n const headerW = headerTable.getBoundingClientRect().width\r\n\r\n // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应\r\n // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式\r\n if (Math.abs(bodyW - headerW) > 2) {\r\n headerTable.style.width = `${bodyW}px`\r\n headerTable.style.minWidth = `${bodyW}px`\r\n }\r\n })\r\n },\r\n /**\r\n * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）\r\n */\r\n bindScrollSync () {\r\n const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\r\n const header = this.$el.querySelector('.ant-table-scroll .ant-table-header')\r\n if (!body || !header) return\r\n\r\n if (this._scrollHandler) return // 已绑定\r\n this._scrollHandler = () => {\r\n header.scrollLeft = body.scrollLeft\r\n }\r\n body.addEventListener('scroll', this._scrollHandler, { passive: true })\r\n },\r\n unbindScrollSync () {\r\n const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\r\n if (body && this._scrollHandler) {\r\n body.removeEventListener('scroll', this._scrollHandler)\r\n this._scrollHandler = null\r\n }\r\n },\r\n /**\r\n * 测量容器宽度\r\n */\r\n measureContainerWidth () {\r\n const wrapper = this.$refs.tableWrapper\r\n if (wrapper) {\r\n this.containerWidth = wrapper.clientWidth\r\n }\r\n },\r\n /**\r\n * 使用 ResizeObserver 监听容器宽度变化\r\n */\r\n observeContainerWidth () {\r\n const wrapper = this.$refs.tableWrapper\r\n if (!wrapper || typeof ResizeObserver === 'undefined') return\r\n\r\n if (this._containerResizeObserver) return // 已绑定\r\n\r\n this._containerResizeObserver = new ResizeObserver((entries) => {\r\n for (const entry of entries) {\r\n const newWidth = entry.contentRect.width\r\n // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染\r\n if (Math.abs(newWidth - this.containerWidth) > 10) {\r\n const oldNeedScroll = this.needHorizontalScroll\r\n this.containerWidth = newWidth\r\n // 容器宽度变化会触发 needHorizontalScroll 的重新计算\r\n // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步\r\n // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突\r\n // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度\r\n // 确保窗口变大/变小时表头都能及时响应\r\n this.$nextTick(() => {\r\n // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度\r\n // 这样能确保表体宽度已经更新完成\r\n requestAnimationFrame(() => {\r\n this.syncHeaderTableWidth()\r\n })\r\n \r\n // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步\r\n // 如果状态变化了，watcher 会处理重新渲染\r\n if (this.needHorizontalScroll === oldNeedScroll) {\r\n // 防抖：延迟同步固定列，避免频繁调用\r\n if (this._resizeDebounceTimer) {\r\n clearTimeout(this._resizeDebounceTimer)\r\n }\r\n this._resizeDebounceTimer = setTimeout(() => {\r\n this.syncFixedColumns()\r\n this.syncHeaderTableWidth()\r\n this.bindScrollSync()\r\n }, 150)\r\n }\r\n })\r\n }\r\n }\r\n })\r\n this._containerResizeObserver.observe(wrapper)\r\n },\r\n /**\r\n * 断开容器宽度监听\r\n */\r\n unobserveContainerWidth () {\r\n if (this._containerResizeObserver) {\r\n this._containerResizeObserver.disconnect()\r\n this._containerResizeObserver = null\r\n }\r\n // 清理防抖定时器\r\n if (this._resizeDebounceTimer) {\r\n clearTimeout(this._resizeDebounceTimer)\r\n this._resizeDebounceTimer = null\r\n }\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n // 先测量容器宽度，用于智能判断是否需要 fixed 列\r\n this.measureContainerWidth()\r\n this.observeContainerWidth()\r\n\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n this.setPaginationHeight()\r\n // 强制同步固定列和主表的列宽\r\n this.syncFixedColumns()\r\n // 同步表头 table 宽度（修复 max-content 场景）\r\n this.syncHeaderTableWidth()\r\n // 绑定横向滚动同步\r\n this.bindScrollSync()\r\n }, 200)\r\n })\r\n \r\n // 监听数据变化，重新同步列宽\r\n this.$watch('dataSource', () => {\r\n this.$nextTick(() => {\r\n setTimeout(() => {\r\n this.syncFixedColumns()\r\n this.syncHeaderTableWidth()\r\n this.bindScrollSync()\r\n }, 100)\r\n })\r\n }, { deep: true })\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n this.unbindScrollSync()\r\n this.unobserveContainerWidth()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n /**\r\n * 修复\"宽屏下表格两侧出现空白\"问题：\r\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\r\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\r\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\r\n */\r\n ::v-deep .ant-table-scroll .ant-table-header table,\r\n ::v-deep .ant-table-scroll .ant-table-body table {\r\n min-width: 100%;\r\n }\r\n\r\n /**\r\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\r\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\r\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\r\n */\r\n ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\r\n ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\r\n visibility: hidden;\r\n }\r\n\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 line-height: 38px;\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 line-height: 38px;\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 });
|
|
2712
|
+
inject("data-v-3fe308bc_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-3fe308bc] {\n display: flex;\n flex-direction: column;\n /* 表格区域占据剩余空间并可滚动，分页始终在底部可见 */\n}\n.g-table__wrapper > *[data-v-3fe308bc]:first-child {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-3fe308bc] {\n /**\n * 修复\"宽屏下表格两侧出现空白\"问题：\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n */\n}\n.g-table__wrapper[data-v-3fe308bc] .ant-table-scroll .ant-table-header table,\n.g-table__wrapper[data-v-3fe308bc] .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n}\n.g-table__wrapper[data-v-3fe308bc] {\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n}\n.g-table__wrapper[data-v-3fe308bc] .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper[data-v-3fe308bc] .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n visibility: hidden;\n}\n.g-table__wrapper[data-v-3fe308bc] {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-3fe308bc] .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n}\n.g-table__wrapper[data-v-3fe308bc] {\n /* 表头也统一高度和样式 */\n}\n.g-table__wrapper[data-v-3fe308bc] .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n}\n.g-table__wrapper[data-v-3fe308bc] {\n /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination[data-v-3fe308bc] {\n flex-shrink: 0;\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-3fe308bc] {\n /* 空数据状态：使用表格内置“暂无数据”，保留表头 + 占位行，不覆盖、不绝对定位 */\n}\n.g-table__wrapper .g-table__no-data[data-v-3fe308bc] .ant-table-placeholder {\n color: rgba(0, 0, 0, 0.45);\n font-size: 14px;\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;AC+hBhB;EACA,aAAA;EACA,sBAAA;EACA,6BAAA;AD7hBA;AC8hBA;EACA,OAAA;EACA,aAAA;EACA,gBAAA;AD5hBA;ACqhBA;EASA;;;;;IAAA;ADthBA;AC4hBA;;EAEA,eAAA;AD1hBA;ACygBA;EAoBA;;;;IAAA;ADthBA;AC2hBA;;EAEA,kBAAA;ADzhBA;AC8fA;EA8BA,sBAAA;ADzhBA;AC0hBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADxhBA;ACofA;EAuCA,eAAA;ADxhBA;ACyhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADvhBA;AC0eA;EAgDA,qBAAA;ADvhBA;ACwhBA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADthBA;AC6dA;EA4DA,4CAAA;ADthBA;ACwhBA;EACA,0BAAA;EACA,eAAA;ADthBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n display: flex;\n flex-direction: column;\n /* 表格区域占据剩余空间并可滚动，分页始终在底部可见 */\n}\n.g-table__wrapper > *:first-child {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper {\n /**\n * 修复\"宽屏下表格两侧出现空白\"问题：\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header table,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n}\n.g-table__wrapper {\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n visibility: hidden;\n}\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 line-height: 38px;\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 line-height: 38px;\n}\n.g-table__wrapper {\n /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination {\n flex-shrink: 0;\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 ::v-deep .ant-table-placeholder {\n color: rgba(0, 0, 0, 0.45);\n font-size: 14px;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n <div class=\"g-table__wrapper\" ref=\"tableWrapper\" :style=\"wrapperStyle\">\n <a-table\n :key=\"tableRenderKey\"\n :bordered=\"bordered\"\n :class=\"[isNoData && 'g-table__no-data']\"\n :pagination=\"false\"\n :loading=\"loading\"\n size=\"middle\"\n :columns=\"smartColumns\"\n :row-selection=\"smartRowSelection\"\n :row-class-name=\"setRowClassName\"\n :data-source=\"dataSource\"\n :scroll=\"smartScroll\"\n :locale=\"{ emptyText: '暂无数据' }\">\n <template slot=\"action\" slot-scope=\"record\">\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n </template>\n </a-table>\n <div class=\"g-table__pagination\">\n <a-pagination\n :show-total=\"all => `共 ${all} 条数据`\"\n v-if=\"mode === 'default'\"\n show-size-changer \n show-quick-jumper\n :pageSize=\"innerPageSize\"\n :current=\"innerCurrentPage\"\n :pageSizeOptions=\"pageSizeOptions\"\n @change=\"onChangePagination\"\n @showSizeChange=\"onShowSizeChange\"\n :total=\"total\">\n </a-pagination>\n <ele-pagination\n v-else\n :pageSize=\"innerPageSize\"\n :current=\"innerCurrentPage\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data=\"dataSource\"\n :loading=\"countLoading\"\n @change=\"onChangePagination\"\n @showSizeChange=\"onShowSizeChange\"\n :total=\"total\"\n ></ele-pagination>\n </div>\n </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n name: 'ele-table',\n components: {\n Actions\n },\n props: {\n mode: {\n type: String,\n default: 'default',\n validator: (value) => {\n return ['default', 'next-cursor'].includes(value)\n }\n },\n // ant table wrapper\n height: {\n type: Number\n },\n width: {\n type: Number\n },\n x: {\n // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）\n type: [Number, String],\n default: 1200\n },\n y: {\n type: Number,\n default: 200\n },\n scroll: {\n type: Object\n },\n rowSelection: {\n type: Object\n },\n actions: {\n type: Array,\n default: () => []\n },\n total: {\n type: Number,\n default: 0\n },\n loading: {\n type: Boolean,\n default: false\n },\n columns: {\n type: Array,\n default: () => []\n },\n dataSource: {\n type: Array,\n default: () => []\n },\n pageSize: {\n type: [Number, String],\n default: 10\n },\n pageSizeOptions: {\n type: Array,\n default: () => ['10', '20', '30', '40']\n },\n bordered: {\n type: Boolean,\n default: true\n },\n countLoading: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n tableHeaderHeight: 0,\n paginationHeight: 0,\n innerPageSize: 10,\n innerCurrentPage: 1,\n tableContentHeight: 0,\n obs: [],\n // 容器宽度，用于智能判断是否需要 fixed 列\n containerWidth: 0,\n // 用于强制重新渲染表格（当 fixed 列状态切换时）\n tableRenderKey: 0\n }\n },\n computed: {\n wrapperStyle () {\n // 外层容器样式\n if (!this.height) return {}\n return { height: `${this.height}px` }\n },\n needScrollY () {\n // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\n if (!this.height) return false\n \n const availableHeight = this.getScrollHeightByHeight\n if (availableHeight <= 0) return false\n \n // 无数据时也需设置 scroll.y，使表格体有高度，否则“暂无数据”占位区域会塌陷无法正常显示\n if (!this.dataSource.length) return true\n \n // 预估每行高度（包含边框），antd 默认约 54px\n const estimatedRowHeight = 54\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n \n return estimatedTableHeight > availableHeight\n },\n innerColumns () {\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n },\n isNoData () {\n return !this.dataSource.length\n },\n getScrollHeightByHeight () {\n // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\n return this.height - this.tableHeaderHeight - this.paginationHeight\n },\n isFlexColumn () {\n return this.columns.every(col => !col.width)\n },\n /**\n * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）\n */\n totalColumnsWidth () {\n const cols = this.innerColumns || []\n let total = cols.reduce((sum, col) => {\n const w = col && col.width\n return sum + (typeof w === 'number' ? w : 0)\n }, 0)\n // rowSelection 的 checkbox/radio 列，antd 默认约 60px\n if (this.rowSelection) total += 60\n // 操作列（operations）的宽度\n if (this.operations && this.operations.width && typeof this.operations.width === 'number') {\n total += this.operations.width\n }\n return total\n },\n /**\n * 是否需要横向滚动：容器宽度 < 列总宽度\n */\n needHorizontalScroll () {\n // 未获取容器宽度前，先假定需要滚动（保守策略）\n if (!this.containerWidth) return true\n // 加一点容差\n return this.containerWidth < this.totalColumnsWidth - 5\n },\n /**\n * 智能列配置：\n * - 当需要横向滚动时，保留原始 fixed 属性\n * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满\n */\n smartColumns () {\n if (this.needHorizontalScroll) {\n // 需要滚动，保留原始配置\n return this.innerColumns\n }\n // 不需要滚动，移除所有 fixed 属性\n return this.innerColumns.map(col => {\n if (col.fixed) {\n const { fixed, ...rest } = col\n return rest\n }\n return col\n })\n },\n /**\n * 智能 scroll 配置：\n * - 当需要横向滚动时，设置 scroll.x\n * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域\n */\n smartScroll () {\n if (!this.needHorizontalScroll) {\n // 不需要横向滚动，只保留 y 方向（如果需要）\n if (this.height && this.needScrollY) {\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \n ? this.getScrollHeightByHeight \n : this.height - 100\n if (availableHeight > 50) {\n return { y: availableHeight }\n }\n }\n return {}\n }\n // 需要横向滚动，使用原有逻辑\n return this.getScroll\n },\n /**\n * 智能 rowSelection 配置：\n * - 当需要横向滚动时，保留原始 fixed 属性\n * - 当容器足够宽时，移除 fixed 属性\n */\n smartRowSelection () {\n if (!this.rowSelection) return null\n if (this.needHorizontalScroll) {\n return this.rowSelection\n }\n // 不需要滚动，移除 fixed 属性\n if (this.rowSelection.fixed) {\n const { fixed, ...rest } = this.rowSelection\n return rest\n }\n return this.rowSelection\n },\n getScroll () {\n if (this.scroll) {\n return this.scroll\n } else {\n // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\n let baseX = (this.x === '' || this.x === null || this.x === undefined) ? 1200 : this.x\n\n // 解决“x 给太大导致操作列前出现大块空白”的问题：\n // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。\n if (typeof baseX === 'number') {\n const cols = this.innerColumns || []\n const total = cols.reduce((sum, col) => {\n const w = col && col.width\n return sum + (typeof w === 'number' ? w : 0)\n }, 0)\n\n // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差\n const selectionWidth = this.rowSelection ? 60 : 0\n\n // 只有当所有列都明确给了宽度（total > 0）时才 clamp\n if (total > 0) {\n const minX = total + selectionWidth\n if (baseX > minX) baseX = minX\n }\n }\n \n if (this.height && this.needScrollY) {\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \n ? this.getScrollHeightByHeight \n : this.height - 100\n \n if (availableHeight > 50) {\n return { x: baseX, y: availableHeight }\n }\n }\n return { x: baseX }\n }\n }\n },\n watch: {\n pageSize: {\n handler (pageSize) {\n this.innerPageSize = pageSize\n },\n immediate: true\n },\n /**\n * 监听 needHorizontalScroll 变化，强制重新渲染表格\n * 当从\"需要固定列\"切换到\"不需要固定列\"或反之时，antd 的 a-table 需要完全重新渲染\n */\n needHorizontalScroll (newVal, oldVal) {\n if (newVal !== oldVal) {\n // 更新 key 强制 Vue 销毁并重建 a-table 组件\n this.tableRenderKey++\n // 使用重试机制确保固定列完全渲染\n this.$nextTick(() => {\n this.retrySyncFixedColumns(newVal)\n })\n }\n }\n },\n methods: {\n onShowSizeChange (current, pageSize) {\n this.innerCurrentPage = current\n this.innerPageSize = pageSize\n this.$emit('change-page', current, pageSize)\n },\n setPaginationHeight () {\n this.$nextTick(() => {\n const el = this.$el.querySelector('.g-table__pagination')\n if (el) {\n const { height } = el.getBoundingClientRect()\n this.paginationHeight = height\n }\n })\n },\n setTableHeaderHeight () {\n this.$nextTick(() => {\n const el = this.$el.querySelector('.ant-table-header')\n if (!el) return\n const { height } = el.getBoundingClientRect()\n this.tableHeaderHeight = height\n })\n },\n setTableTbodyHeight () {\n this.$nextTick(() => {\n this.setTableHeaderHeight()\n })\n },\n setRowClassName (record, idx) {\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n },\n onChangePagination (page, pageSize) {\n this.innerCurrentPage = page\n this.innerPageSize = pageSize\n this.$emit('change-page', page, pageSize)\n },\n syncFixedColumns () {\n // 强制 ant-design-vue 重新计算固定列的宽度\n this.$nextTick(() => {\n const tableEl = this.$el.querySelector('.ant-table')\n if (tableEl) {\n // 触发窗口 resize 事件，让 ant-design-vue 重新计算\n window.dispatchEvent(new Event('resize'))\n }\n })\n },\n /**\n * 带重试的固定列同步机制\n * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，\n * 这里通过重试确保固定列渲染完成后再同步。\n * @param {boolean} needFixed - 是否需要固定列\n * @param {number} retries - 当前重试次数\n */\n retrySyncFixedColumns (needFixed, retries = 0) {\n const MAX_RETRIES = 5\n const DELAY = 100 // 每次延迟 100ms\n\n setTimeout(() => {\n this.syncFixedColumns()\n this.syncHeaderTableWidth()\n this.bindScrollSync()\n\n // 如果需要固定列，检查是否已渲染\n if (needFixed && retries < MAX_RETRIES) {\n const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr')\n const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr')\n \n // 如果有固定列配置但还没渲染出来，继续重试\n const hasFixedConfig = this.innerColumns.some(c => c.fixed) || (this.rowSelection && this.rowSelection.fixed)\n if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {\n this.retrySyncFixedColumns(needFixed, retries + 1)\n }\n }\n }, DELAY)\n },\n /**\n * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。\n * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，\n * header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就\"滚不动\"。\n * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。\n */\n syncHeaderTableWidth () {\n this.$nextTick(() => {\n const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table')\n const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table')\n if (!headerTable || !bodyTable) return\n\n const bodyW = bodyTable.getBoundingClientRect().width\n const headerW = headerTable.getBoundingClientRect().width\n\n // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应\n // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式\n if (Math.abs(bodyW - headerW) > 2) {\n headerTable.style.width = `${bodyW}px`\n headerTable.style.minWidth = `${bodyW}px`\n }\n })\n },\n /**\n * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）\n */\n bindScrollSync () {\n const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\n const header = this.$el.querySelector('.ant-table-scroll .ant-table-header')\n if (!body || !header) return\n\n if (this._scrollHandler) return // 已绑定\n this._scrollHandler = () => {\n header.scrollLeft = body.scrollLeft\n }\n body.addEventListener('scroll', this._scrollHandler, { passive: true })\n },\n unbindScrollSync () {\n const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\n if (body && this._scrollHandler) {\n body.removeEventListener('scroll', this._scrollHandler)\n this._scrollHandler = null\n }\n },\n /**\n * 测量容器宽度\n */\n measureContainerWidth () {\n const wrapper = this.$refs.tableWrapper\n if (wrapper) {\n this.containerWidth = wrapper.clientWidth\n }\n },\n /**\n * 使用 ResizeObserver 监听容器宽度变化\n */\n observeContainerWidth () {\n const wrapper = this.$refs.tableWrapper\n if (!wrapper || typeof ResizeObserver === 'undefined') return\n\n if (this._containerResizeObserver) return // 已绑定\n\n this._containerResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newWidth = entry.contentRect.width\n // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染\n if (Math.abs(newWidth - this.containerWidth) > 10) {\n const oldNeedScroll = this.needHorizontalScroll\n this.containerWidth = newWidth\n // 容器宽度变化会触发 needHorizontalScroll 的重新计算\n // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步\n // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突\n // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度\n // 确保窗口变大/变小时表头都能及时响应\n this.$nextTick(() => {\n // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度\n // 这样能确保表体宽度已经更新完成\n requestAnimationFrame(() => {\n this.syncHeaderTableWidth()\n })\n \n // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步\n // 如果状态变化了，watcher 会处理重新渲染\n if (this.needHorizontalScroll === oldNeedScroll) {\n // 防抖：延迟同步固定列，避免频繁调用\n if (this._resizeDebounceTimer) {\n clearTimeout(this._resizeDebounceTimer)\n }\n this._resizeDebounceTimer = setTimeout(() => {\n this.syncFixedColumns()\n this.syncHeaderTableWidth()\n this.bindScrollSync()\n }, 150)\n }\n })\n }\n }\n })\n this._containerResizeObserver.observe(wrapper)\n },\n /**\n * 断开容器宽度监听\n */\n unobserveContainerWidth () {\n if (this._containerResizeObserver) {\n this._containerResizeObserver.disconnect()\n this._containerResizeObserver = null\n }\n // 清理防抖定时器\n if (this._resizeDebounceTimer) {\n clearTimeout(this._resizeDebounceTimer)\n this._resizeDebounceTimer = null\n }\n }\n },\n mounted() {\n this.$nextTick(() => {\n // 先测量容器宽度，用于智能判断是否需要 fixed 列\n this.measureContainerWidth()\n this.observeContainerWidth()\n\n this.setPaginationHeight()\n setTimeout(() => {\n this.setTableTbodyHeight()\n this.setPaginationHeight()\n // 强制同步固定列和主表的列宽\n this.syncFixedColumns()\n // 同步表头 table 宽度（修复 max-content 场景）\n this.syncHeaderTableWidth()\n // 绑定横向滚动同步\n this.bindScrollSync()\n }, 200)\n })\n \n // 监听数据变化，重新同步列宽\n this.$watch('dataSource', () => {\n this.$nextTick(() => {\n setTimeout(() => {\n this.syncFixedColumns()\n this.syncHeaderTableWidth()\n this.bindScrollSync()\n }, 100)\n })\n }, { deep: true })\n },\n destroyed () {\n this.obs.forEach(ob => ob.disconnect())\n this.unbindScrollSync()\n this.unobserveContainerWidth()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n display: flex;\n flex-direction: column;\n /* 表格区域占据剩余空间并可滚动，分页始终在底部可见 */\n & > *:first-child {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n }\n /**\n * 修复\"宽屏下表格两侧出现空白\"问题：\n * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n */\n ::v-deep .ant-table-scroll .ant-table-header table,\n ::v-deep .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n }\n\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n visibility: hidden;\n }\n\n /* 强制统一行高，确保主表和固定列对齐 */\n ::v-deep .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n }\n\n /* 表头也统一高度和样式 */\n ::v-deep .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n }\n\n /* 分页区域固定在底部，不被挤出视口 */\n .g-table__pagination {\n flex-shrink: 0;\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\n /* 空数据状态：使用表格内置“暂无数据”，保留表头 + 占位行，不覆盖、不绝对定位 */\n .g-table__no-data {\n ::v-deep .ant-table-placeholder {\n color: rgba(0, 0, 0, 0.45);\n font-size: 14px;\n }\n }\n}\n</style>"]}, media: undefined });
|
|
2709
2713
|
|
|
2710
2714
|
};
|
|
2711
2715
|
/* scoped */
|
|
2712
|
-
const __vue_scope_id__$D = "data-v-
|
|
2716
|
+
const __vue_scope_id__$D = "data-v-3fe308bc";
|
|
2713
2717
|
/* module identifier */
|
|
2714
2718
|
const __vue_module_identifier__$D = undefined;
|
|
2715
2719
|
/* functional template */
|
|
@@ -5853,6 +5857,41 @@ var __vue_render__$w = function () {
|
|
|
5853
5857
|
1
|
|
5854
5858
|
),
|
|
5855
5859
|
]
|
|
5860
|
+
: ele.type == "ele-month"
|
|
5861
|
+
? [
|
|
5862
|
+
_c(
|
|
5863
|
+
"a-form-item",
|
|
5864
|
+
{
|
|
5865
|
+
attrs: {
|
|
5866
|
+
label: ele.label + "：",
|
|
5867
|
+
required: ele._required,
|
|
5868
|
+
},
|
|
5869
|
+
},
|
|
5870
|
+
[
|
|
5871
|
+
_c("a-month-picker", {
|
|
5872
|
+
directives: [
|
|
5873
|
+
{
|
|
5874
|
+
name: "decorator",
|
|
5875
|
+
rawName: "v-decorator",
|
|
5876
|
+
value: [
|
|
5877
|
+
ele.name,
|
|
5878
|
+
{ rules: _vm.rebuildRules(ele) },
|
|
5879
|
+
],
|
|
5880
|
+
expression:
|
|
5881
|
+
"[ele.name, { rules: rebuildRules(ele) }]",
|
|
5882
|
+
},
|
|
5883
|
+
],
|
|
5884
|
+
staticStyle: { width: "100%" },
|
|
5885
|
+
attrs: {
|
|
5886
|
+
format: ele.format,
|
|
5887
|
+
"value-format": ele.valueFormat,
|
|
5888
|
+
disabled: ele._disabled,
|
|
5889
|
+
},
|
|
5890
|
+
}),
|
|
5891
|
+
],
|
|
5892
|
+
1
|
|
5893
|
+
),
|
|
5894
|
+
]
|
|
5856
5895
|
: ele.type == "ele-select-entity" ||
|
|
5857
5896
|
ele.type == "SelectEntity"
|
|
5858
5897
|
? [
|
|
@@ -6167,11 +6206,11 @@ __vue_render__$w._withStripped = true;
|
|
|
6167
6206
|
/* style */
|
|
6168
6207
|
const __vue_inject_styles__$w = function (inject) {
|
|
6169
6208
|
if (!inject) return
|
|
6170
|
-
inject("data-v-7561ae99_0", { source: ".ele__form--wrapper[data-v-7561ae99] {\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":"AAoYA;EACA,gBAAA;ACnYA;;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=\"ele._show\" :span=\"ele.span\" :key=\"`${ele.name}_${ele._rulesVersion || 0}`\">\r\n <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"ele._disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\"\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}：`\" :required=\"ele._required\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"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) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-date-range \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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 this.dispatchExpression()\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 (ele) {\r\n const { rules = [] } = ele\r\n const nextRules = rules.map(rule => {\r\n const nextRule = { ...rule }\r\n const { validator, required } = nextRule\r\n // 支持 validator 函数\r\n if (validator) {\r\n nextRule.validator = (rule, value, cb) => {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n return validator(rule, value, cb)\r\n }\r\n }\r\n // 支持 rules 内部的 required 表达式\r\n if (required !== undefined && type.isStr(required)) {\r\n nextRule.required = this.executeExpression(required)\r\n }\r\n return nextRule\r\n })\r\n // 支持顶层 required 表达式（优先级高于 rules 内部）\r\n const { required } = ele\r\n if (required !== undefined) {\r\n const isRequired = this.executeExpression(required)\r\n const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'))\r\n if (!hasRequiredRule) {\r\n nextRules.unshift({ required: isRequired, message: `${ele.label}是必填项` })\r\n } else {\r\n nextRules.forEach(r => {\r\n if (Object.keys(r).includes('required')) {\r\n r.required = isRequired\r\n }\r\n })\r\n }\r\n }\r\n return nextRules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n this.evalRequiredExpression()\r\n },\r\n evalRequiredExpression () {\r\n this.elements.forEach(ele => {\r\n // 优先使用顶层 required 表达式\r\n let requiredExpr = ele.required\r\n // 如果顶层没有，则从 rules 中查找\r\n if (requiredExpr === undefined && ele.rules) {\r\n const requiredRule = ele.rules.find(r => r.required !== undefined)\r\n if (requiredRule) {\r\n requiredExpr = requiredRule.required\r\n }\r\n }\r\n if (requiredExpr !== undefined) {\r\n const ret = this.executeExpression(requiredExpr)\r\n const oldRequired = ele._required\r\n this.$set(ele, '_required', ret)\r\n // 初始化或状态变化时更新版本号，强制组件重新渲染\r\n if (oldRequired === undefined || oldRequired !== ret) {\r\n const currentVersion = ele._rulesVersion || 0\r\n this.$set(ele, '_rulesVersion', currentVersion + 1)\r\n }\r\n }\r\n })\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 const scope = { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta }\r\n return parse(expression, scope)\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 });
|
|
6209
|
+
inject("data-v-e9f46c30_0", { source: ".ele__form--wrapper[data-v-e9f46c30] {\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":"AA+YA;EACA,gBAAA;AC9YA;;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=\"ele._show\" :span=\"ele.span\" :key=\"`${ele.name}_${ele._rulesVersion || 0}`\">\r\n <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"ele._disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\"\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}：`\" :required=\"ele._required\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"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) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-date-range \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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-month'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <a-month-picker\r\n :format=\"ele.format\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \r\n style=\"width:100%;\">\r\n </a-month-picker>\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}：`\" :required=\"ele._required\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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 this.dispatchExpression()\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 (ele) {\r\n const { rules = [] } = ele\r\n const nextRules = rules.map(rule => {\r\n const nextRule = { ...rule }\r\n const { validator, required } = nextRule\r\n // 支持 validator 函数\r\n if (validator) {\r\n nextRule.validator = (rule, value, cb) => {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n return validator(rule, value, cb)\r\n }\r\n }\r\n // 支持 rules 内部的 required 表达式\r\n if (required !== undefined && type.isStr(required)) {\r\n nextRule.required = this.executeExpression(required)\r\n }\r\n return nextRule\r\n })\r\n // 支持顶层 required 表达式（优先级高于 rules 内部）\r\n const { required } = ele\r\n if (required !== undefined) {\r\n const isRequired = this.executeExpression(required)\r\n const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'))\r\n if (!hasRequiredRule) {\r\n nextRules.unshift({ required: isRequired, message: `${ele.label}是必填项` })\r\n } else {\r\n nextRules.forEach(r => {\r\n if (Object.keys(r).includes('required')) {\r\n r.required = isRequired\r\n }\r\n })\r\n }\r\n }\r\n return nextRules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n this.evalRequiredExpression()\r\n },\r\n evalRequiredExpression () {\r\n this.elements.forEach(ele => {\r\n // 优先使用顶层 required 表达式\r\n let requiredExpr = ele.required\r\n // 如果顶层没有，则从 rules 中查找\r\n if (requiredExpr === undefined && ele.rules) {\r\n const requiredRule = ele.rules.find(r => r.required !== undefined)\r\n if (requiredRule) {\r\n requiredExpr = requiredRule.required\r\n }\r\n }\r\n if (requiredExpr !== undefined) {\r\n const ret = this.executeExpression(requiredExpr)\r\n const oldRequired = ele._required\r\n this.$set(ele, '_required', ret)\r\n // 初始化或状态变化时更新版本号，强制组件重新渲染\r\n if (oldRequired === undefined || oldRequired !== ret) {\r\n const currentVersion = ele._rulesVersion || 0\r\n this.$set(ele, '_rulesVersion', currentVersion + 1)\r\n }\r\n }\r\n })\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 const scope = { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta }\r\n return parse(expression, scope)\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 });
|
|
6171
6210
|
|
|
6172
6211
|
};
|
|
6173
6212
|
/* scoped */
|
|
6174
|
-
const __vue_scope_id__$w = "data-v-
|
|
6213
|
+
const __vue_scope_id__$w = "data-v-e9f46c30";
|
|
6175
6214
|
/* module identifier */
|
|
6176
6215
|
const __vue_module_identifier__$w = undefined;
|
|
6177
6216
|
/* functional template */
|