@gct-paas/core-web 0.1.4-dev.11 → 0.1.4-dev.13

package/es/modules/gct-table/widgets/gct-table/gct-table.mjs

@@ -1,414 +1,315 @@
-import { defineComponent, createVNode, resolveComponent, mergeProps, h, ref, watch, onMounted, onUnmounted, computed, isVNode } from 'vue';
-import { isBoolean, cloneDeep, isNil, clone, defaults } from 'lodash-es';
-import { isPromise, isAsync } from 'qx-util';
-import { useNamespace, t } from '@gct-paas/core';
-import { useTableController, GctTableController } from '../../controller/gct-table/gct-table.controller.mjs';
-import { useAntTableScrollHeight } from '../../hooks/use-ant-table/use-ant-table.mjs';
+import { GctTableController, useTableController } from "../../controller/gct-table/gct-table.controller.mjs";
+import "../../controller/index.mjs";
+import { useAntTableScrollHeight } from "../../hooks/use-ant-table/use-ant-table.mjs";
+import "../../hooks/index.mjs";
 import './gct-table.css';/* empty css                */
-
+import { computed, createVNode, defineComponent, h, isVNode, mergeProps, onMounted, onUnmounted, ref, resolveComponent, watch } from "vue";
+import { isAsync, isPromise } from "qx-util";
+import { clone, cloneDeep, defaults, isBoolean, isNil } from "lodash-es";
+import { t, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-table/widgets/gct-table/gct-table.tsx
 function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const GctTable = /* @__PURE__ */ defineComponent({
-  name: 'GctTable',
-  props: {
-    // local 必给，避免vue的双向数据绑定不生效
-    count: {
-      type: Number,
-      default: 0
-    },
-    model: {
-      type: Object,
-      required: true
-    },
-    data: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['rowChange'],
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace('gct-table');
-    const loadingState = ref({});
-    const elRef = ref();
-    const formRef = ref();
-    const tableRef = ref();
-    let hoverRow = null;
-    let activeRow = null;
-    const c = useTableController(() => new GctTableController(props.model));
-    c.evt.on('change', async (data, name, val, oldVal) => {
-      emit('rowChange', cloneDeep(data), name, val, oldVal);
-    });
-    if (c.model.local === true) {
-      watch(() => props.count, () => {
-        c.setData(cloneDeep(props.data));
-      });
-    }
-
-    // 要放在 return 之前，避免初始化顺序问题导致加载参数异常
-    if (c.model.local !== true && c.model.autoLoad !== false) {
-      c.load();
-    }
-    const findRowId = el => {
-      if (!el || el === elRef.value) {
-        return null;
-      }
-      const id = el.getAttribute('data-row-key');
-      if (id) {
-        return id;
-      }
-      return findRowId(el.parentElement);
-    };
-    const mouseOver = e => {
-      const rowId = findRowId(e.target);
-      if (rowId) {
-        const row = c.row[rowId];
-        if (hoverRow) {
-          hoverRow.state.hover = false;
-        }
-        row.state.hover = true;
-        hoverRow = row;
-      }
-    };
-    const mouseOut = e => {
-      const rowId = findRowId(e.target);
-      if (!rowId && hoverRow) {
-        hoverRow.state.hover = false;
-        hoverRow = null;
-      }
-    };
-    const mouseLeave = e => {
-      const rowId = findRowId(e.target);
-      if (!rowId && hoverRow) {
-        hoverRow.state.hover = false;
-        hoverRow = null;
-      }
-    };
-    const click = e => {
-      const rowId = findRowId(e.target);
-      if (rowId) {
-        const row = c.row[rowId];
-        if (activeRow) {
-          activeRow.unActive();
-        }
-        row.active();
-        activeRow = row;
-      } else {
-        if (activeRow) {
-          activeRow.unActive();
-          activeRow = null;
-        }
-      }
-    };
-    const winClick = () => {
-      if (activeRow) {
-        activeRow.unActive();
-        activeRow = null;
-      }
-    };
-    onMounted(() => {
-      if (elRef.value) {
-        elRef.value.addEventListener('mouseover', mouseOver, {
-          capture: true
-        });
-        elRef.value.addEventListener('mouseout', mouseOver, {
-          capture: true
-        });
-        elRef.value.addEventListener('mouseleave', mouseLeave, {
-          capture: true
-        });
-        elRef.value.addEventListener('click', click, {
-          capture: true
-        });
-      }
-      window.addEventListener('click', winClick, {
-        capture: true
-      });
-    });
-    onUnmounted(() => {
-      if (elRef.value) {
-        elRef.value.removeEventListener('mouseover', mouseOver, {
-          capture: true
-        });
-        elRef.value.removeEventListener('mouseout', mouseOver, {
-          capture: true
-        });
-        elRef.value.removeEventListener('mouseleave', mouseLeave, {
-          capture: true
-        });
-        elRef.value.removeEventListener('click', click, {
-          capture: true
-        });
-      }
-      window.removeEventListener('click', winClick, {
-        capture: true
-      });
-    });
-    const onValidate = (name, status, errorMsgs) => {
-      const keys = name.split('___');
-      if (keys.length === 2) {
-        const [name, id] = keys;
-        const row = c.row[id];
-        if (row) {
-          const item = row.item[name];
-          if (item) {
-            item.state.error = !status;
-            if (errorMsgs && errorMsgs.length > 0) {
-              item.state.errMessage = errorMsgs[0];
-            } else {
-              item.state.errMessage = '';
-            }
-          }
-        }
-      }
-    };
-    const validate = () => {
-      return formRef.value.validate();
-    };
-    const reload = params => {
-      return c.load(params);
-    };
-    const pagination = computed(() => {
-      if (isNil(props.model.pagination)) {
-        return false;
-      }
-      const pagination = clone(props.model.pagination);
-      defaults(pagination, {
-        pageSizeOptions: [10, 20, 30, 40, 50],
-        showSizeChanger: true,
-        showTotal: true
-      });
-      const showTotal = pagination.showTotal === true ? total => t('sys.component.table.total', {
-        total
-      }) : pagination.showTotal || undefined;
-      const sizeOptions = pagination.pageSizeOptions?.map(item => `${item}`); //ant组件识别纯数字数组的时候不会显示中文
-
-      return {
-        class: 'pagination-total-left',
-        total: c.state.total,
-        current: c.state.page,
-        pageSize: c.state.size,
-        pageSizeOptions: sizeOptions,
-        showSizeChanger: pagination.showSizeChanger,
-        showTotal: showTotal
-      };
-    });
-    const handleTableChange = (pagination, filters, sorter) => {
-      console.log('[ pagination ] >', pagination, filters, sorter);
-      c.updatePagination({
-        page: pagination.current,
-        size: pagination.pageSize
-      });
-      c.reload();
-    };
-    const {
-      scrollHeight
-    } = useAntTableScrollHeight(elRef, {
-      pagination: !!pagination.value
-    });
-
-    // 是否有编辑项
-    const isEdit = computed(() => {
-      return c.model.columns.some(col => col.type === 'edit');
-    });
-    return {
-      ns,
-      c,
-      loadingState,
-      elRef,
-      formRef,
-      tableRef,
-      scrollHeight,
-      pagination,
-      isEdit,
-      handleTableChange,
-      mouseOver,
-      mouseOut,
-      onValidate,
-      validate,
-      reload
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "ref": "elRef",
-      "class": this.ns.b(),
-      "onMouseover": this.mouseOver,
-      "onMouseout": this.mouseOut
-    }, [createVNode(resolveComponent("a-form"), {
-      "ref": "formRef",
-      "model": this.c.state.formData,
-      "onValidate": this.onValidate
-    }, {
-      default: () => [createVNode(resolveComponent("a-table"), mergeProps({
-        "ref": "tableRef",
-        "class": ['flex-1', this.ns.is('pagination', !!this.pagination), this.ns.is('not-edit', !this.isEdit)],
-        "scroll": {
-          y: this.scrollHeight
-        },
-        "columns": this.model.columns,
-        "data-source": this.c.state.items,
-        "row-key": record => record[this.c.model.key],
-        "pagination": this.pagination,
-        "onChange": this.handleTableChange
-      }, this.$attrs), {
-        headerCell: ({
-          title,
-          column
-        }) => {
-          const _column = column;
-          if (_column.type === 'edit' && _column.rules && _column.rules.length > 0) {
-            const isRequired = _column.rules.some(rule => rule.required === true);
-            return createVNode("span", {
-              "title": title,
-              "class": [this.ns.e('table-header'), this.ns.is('required', isRequired)]
-            }, [createVNode("span", {
-              "class": this.ns.e('table-item')
-            }, [title])]);
-          }
-          return title;
-        },
-        bodyCell: ({
-          column,
-          text,
-          record
-        }) => {
-          if (text == null && this.model.isEmptyText == true) {
-            text = _gct.store.getEmptyDisplay;
-          } else {
-            text = isBoolean(text) ? text.toString() : text;
-          }
-          const _column = column;
-          if (_column.customRender) {
-            return _column.customRender({
-              record
-            });
-          }
-          if (column.type === 'edit') {
-            const key = record[this.c.model.key];
-            const row = this.c.row[key];
-            if (row) {
-              let _slot;
-              const provider = this.c.editorProviders[column.name];
-              const com = resolveComponent(provider.component);
-              const item = row.item[column.name];
-              const isEdit = row.state.hover === true || item.state.error === true || row.state.active === true || this.c.model.rowEditMode === 'all';
-              return createVNode(resolveComponent("a-form-item"), {
-                "name": `${column.name}___${key}`,
-                "class": [this.ns.b('table-item'), this.ns.bm('table-item', 'edit')],
-                "rules": item.model.rules || []
-              }, _isSlot(_slot = h(com, {
-                key: item.model.name,
-                c: item,
-                model: item.model.editor,
-                readonly: item.state.readonly,
-                disabled: item.state.disabled,
-                value: item.value,
-                itemModel: item.model,
-                data: row.data,
-                keepalive: item.state.keepalive,
-                visible: item.state.visible,
-                isEdit,
-                'onUpdate:value': value => {
-                  item.value = value;
-                }
-              })) ? _slot : {
-                default: () => [_slot]
-              });
-            }
-          }
-          if (column.type === 'actions') {
-            const item = column;
-            return createVNode("div", {
-              "class": this.ns.b('table-actions')
-            }, [item.actions.filter(_ => {
-              if (_.hidden) {
-                return !_.hidden(record);
-              }
-              return true;
-            }).map(_ => {
-              if (_.mode === 'divider') {
-                return createVNode(resolveComponent("a-divider"), {
-                  "type": "vertical"
-                }, null);
-              }
-              const loadingKey = `${_.type}___${_.tag}___${record[this.c.model.key]}`;
-              const button = createVNode(resolveComponent("a-button"), mergeProps({
-                "class": this.ns.b('table-action-item'),
-                "type": _.type,
-                "size": "small",
-                "loading": this.loadingState[loadingKey] === true,
-                "onClick": async e => {
-                  if (_.confirm) {
-                    return;
-                  }
-                  e.stopPropagation();
-                  if (_.action) {
-                    if (isPromise(_.action) || isAsync(_.action)) {
-                      this.loadingState[loadingKey] = true;
-                      try {
-                        await _.action(record);
-                      } catch (error) {
-                        console.log(error);
-                      } finally {
-                        this.loadingState[loadingKey] = false;
-                      }
-                    } else {
-                      _.action(record);
-                    }
-                  } else {
-                    item.action(_.tag, record);
-                  }
-                }
-              }, _.props), {
-                default: () => [_.text]
-              });
-              if (_.confirm) {
-                return createVNode(resolveComponent("a-popconfirm"), mergeProps({
-                  "onConfirm": async () => {
-                    if (_.action) {
-                      if (isPromise(_.action) || isAsync(_.action)) {
-                        this.loadingState[loadingKey] = true;
-                        try {
-                          await _.action(record);
-                        } catch (error) {
-                          console.log(error);
-                        } finally {
-                          this.loadingState[loadingKey] = false;
-                        }
-                      } else {
-                        _.action(record);
-                      }
-                    } else {
-                      item.action(_.tag, record);
-                    }
-                  }
-                }, _.confirm), _isSlot(button) ? button : {
-                  default: () => [button]
-                });
-              } else {
-                return button;
-              }
-            })]);
-          }
-          if (column.type === 'link') {
-            return createVNode("a", {
-              "class": this.ns.e('table-link'),
-              "onClick": e => {
-                e.stopPropagation();
-                if (_column.click) {
-                  _column.click(record);
-                }
-              }
-            }, [text]);
-          }
-          return text;
-        }
-      })]
-    })]);
-  }
+var GctTable = /* @__PURE__ */ defineComponent({
+	name: "GctTable",
+	props: {
+		count: {
+			type: Number,
+			default: 0
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Array,
+			default: () => []
+		}
+	},
+	emits: ["rowChange"],
+	setup(props, { emit }) {
+		const ns = useNamespace("gct-table");
+		const loadingState = ref({});
+		const elRef = ref();
+		const formRef = ref();
+		const tableRef = ref();
+		let hoverRow = null;
+		let activeRow = null;
+		const c = useTableController(() => new GctTableController(props.model));
+		c.evt.on("change", async (data, name, val, oldVal) => {
+			emit("rowChange", cloneDeep(data), name, val, oldVal);
+		});
+		if (c.model.local === true) watch(() => props.count, () => {
+			c.setData(cloneDeep(props.data));
+		});
+		if (c.model.local !== true && c.model.autoLoad !== false) c.load();
+		const findRowId = (el) => {
+			if (!el || el === elRef.value) return null;
+			const id = el.getAttribute("data-row-key");
+			if (id) return id;
+			return findRowId(el.parentElement);
+		};
+		const mouseOver = (e) => {
+			const rowId = findRowId(e.target);
+			if (rowId) {
+				const row = c.row[rowId];
+				if (hoverRow) hoverRow.state.hover = false;
+				row.state.hover = true;
+				hoverRow = row;
+			}
+		};
+		const mouseOut = (e) => {
+			if (!findRowId(e.target) && hoverRow) {
+				hoverRow.state.hover = false;
+				hoverRow = null;
+			}
+		};
+		const mouseLeave = (e) => {
+			if (!findRowId(e.target) && hoverRow) {
+				hoverRow.state.hover = false;
+				hoverRow = null;
+			}
+		};
+		const click = (e) => {
+			const rowId = findRowId(e.target);
+			if (rowId) {
+				const row = c.row[rowId];
+				if (activeRow) activeRow.unActive();
+				row.active();
+				activeRow = row;
+			} else if (activeRow) {
+				activeRow.unActive();
+				activeRow = null;
+			}
+		};
+		const winClick = () => {
+			if (activeRow) {
+				activeRow.unActive();
+				activeRow = null;
+			}
+		};
+		onMounted(() => {
+			if (elRef.value) {
+				elRef.value.addEventListener("mouseover", mouseOver, { capture: true });
+				elRef.value.addEventListener("mouseout", mouseOver, { capture: true });
+				elRef.value.addEventListener("mouseleave", mouseLeave, { capture: true });
+				elRef.value.addEventListener("click", click, { capture: true });
+			}
+			window.addEventListener("click", winClick, { capture: true });
+		});
+		onUnmounted(() => {
+			if (elRef.value) {
+				elRef.value.removeEventListener("mouseover", mouseOver, { capture: true });
+				elRef.value.removeEventListener("mouseout", mouseOver, { capture: true });
+				elRef.value.removeEventListener("mouseleave", mouseLeave, { capture: true });
+				elRef.value.removeEventListener("click", click, { capture: true });
+			}
+			window.removeEventListener("click", winClick, { capture: true });
+		});
+		const onValidate = (name, status, errorMsgs) => {
+			const keys = name.split("___");
+			if (keys.length === 2) {
+				const [name, id] = keys;
+				const row = c.row[id];
+				if (row) {
+					const item = row.item[name];
+					if (item) {
+						item.state.error = !status;
+						if (errorMsgs && errorMsgs.length > 0) item.state.errMessage = errorMsgs[0];
+						else item.state.errMessage = "";
+					}
+				}
+			}
+		};
+		const validate = () => {
+			return formRef.value.validate();
+		};
+		const reload = (params) => {
+			return c.load(params);
+		};
+		const pagination = computed(() => {
+			if (isNil(props.model.pagination)) return false;
+			const pagination = clone(props.model.pagination);
+			defaults(pagination, {
+				pageSizeOptions: [
+					10,
+					20,
+					30,
+					40,
+					50
+				],
+				showSizeChanger: true,
+				showTotal: true
+			});
+			const showTotal = pagination.showTotal === true ? (total) => t("sys.component.table.total", { total }) : pagination.showTotal || void 0;
+			const sizeOptions = pagination.pageSizeOptions?.map((item) => `${item}`);
+			return {
+				class: "pagination-total-left",
+				total: c.state.total,
+				current: c.state.page,
+				pageSize: c.state.size,
+				pageSizeOptions: sizeOptions,
+				showSizeChanger: pagination.showSizeChanger,
+				showTotal
+			};
+		});
+		const handleTableChange = (pagination, filters, sorter) => {
+			console.log("[ pagination ] >", pagination, filters, sorter);
+			c.updatePagination({
+				page: pagination.current,
+				size: pagination.pageSize
+			});
+			c.reload();
+		};
+		const { scrollHeight } = useAntTableScrollHeight(elRef, { pagination: !!pagination.value });
+		return {
+			ns,
+			c,
+			loadingState,
+			elRef,
+			formRef,
+			tableRef,
+			scrollHeight,
+			pagination,
+			isEdit: computed(() => {
+				return c.model.columns.some((col) => col.type === "edit");
+			}),
+			handleTableChange,
+			mouseOver,
+			mouseOut,
+			onValidate,
+			validate,
+			reload
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "elRef",
+			"class": this.ns.b(),
+			"onMouseover": this.mouseOver,
+			"onMouseout": this.mouseOut
+		}, [createVNode(resolveComponent("a-form"), {
+			"ref": "formRef",
+			"model": this.c.state.formData,
+			"onValidate": this.onValidate
+		}, { default: () => [createVNode(resolveComponent("a-table"), mergeProps({
+			"ref": "tableRef",
+			"class": [
+				"flex-1",
+				this.ns.is("pagination", !!this.pagination),
+				this.ns.is("not-edit", !this.isEdit)
+			],
+			"scroll": { y: this.scrollHeight },
+			"columns": this.model.columns,
+			"data-source": this.c.state.items,
+			"row-key": (record) => record[this.c.model.key],
+			"pagination": this.pagination,
+			"onChange": this.handleTableChange
+		}, this.$attrs), {
+			headerCell: ({ title, column }) => {
+				const _column = column;
+				if (_column.type === "edit" && _column.rules && _column.rules.length > 0) {
+					const isRequired = _column.rules.some((rule) => rule.required === true);
+					return createVNode("span", {
+						"title": title,
+						"class": [this.ns.e("table-header"), this.ns.is("required", isRequired)]
+					}, [createVNode("span", { "class": this.ns.e("table-item") }, [title])]);
+				}
+				return title;
+			},
+			bodyCell: ({ column, text, record }) => {
+				if (text == null && this.model.isEmptyText == true) text = _gct.store.getEmptyDisplay;
+				else text = isBoolean(text) ? text.toString() : text;
+				const _column = column;
+				if (_column.customRender) return _column.customRender({ record });
+				if (column.type === "edit") {
+					const key = record[this.c.model.key];
+					const row = this.c.row[key];
+					if (row) {
+						let _slot;
+						const provider = this.c.editorProviders[column.name];
+						const com = resolveComponent(provider.component);
+						const item = row.item[column.name];
+						const isEdit = row.state.hover === true || item.state.error === true || row.state.active === true || this.c.model.rowEditMode === "all";
+						return createVNode(resolveComponent("a-form-item"), {
+							"name": `${column.name}___${key}`,
+							"class": [this.ns.b("table-item"), this.ns.bm("table-item", "edit")],
+							"rules": item.model.rules || []
+						}, _isSlot(_slot = h(com, {
+							key: item.model.name,
+							c: item,
+							model: item.model.editor,
+							readonly: item.state.readonly,
+							disabled: item.state.disabled,
+							value: item.value,
+							itemModel: item.model,
+							data: row.data,
+							keepalive: item.state.keepalive,
+							visible: item.state.visible,
+							isEdit,
+							"onUpdate:value": (value) => {
+								item.value = value;
+							}
+						})) ? _slot : { default: () => [_slot] });
+					}
+				}
+				if (column.type === "actions") {
+					const item = column;
+					return createVNode("div", { "class": this.ns.b("table-actions") }, [item.actions.filter((_) => {
+						if (_.hidden) return !_.hidden(record);
+						return true;
+					}).map((_) => {
+						if (_.mode === "divider") return createVNode(resolveComponent("a-divider"), { "type": "vertical" }, null);
+						const loadingKey = `${_.type}___${_.tag}___${record[this.c.model.key]}`;
+						const button = createVNode(resolveComponent("a-button"), mergeProps({
+							"class": this.ns.b("table-action-item"),
+							"type": _.type,
+							"size": "small",
+							"loading": this.loadingState[loadingKey] === true,
+							"onClick": async (e) => {
+								if (_.confirm) return;
+								e.stopPropagation();
+								if (_.action) if (isPromise(_.action) || isAsync(_.action)) {
+									this.loadingState[loadingKey] = true;
+									try {
+										await _.action(record);
+									} catch (error) {
+										console.log(error);
+									} finally {
+										this.loadingState[loadingKey] = false;
+									}
+								} else _.action(record);
+								else item.action(_.tag, record);
+							}
+						}, _.props), { default: () => [_.text] });
+						if (_.confirm) return createVNode(resolveComponent("a-popconfirm"), mergeProps({ "onConfirm": async () => {
+							if (_.action) if (isPromise(_.action) || isAsync(_.action)) {
+								this.loadingState[loadingKey] = true;
+								try {
+									await _.action(record);
+								} catch (error) {
+									console.log(error);
+								} finally {
+									this.loadingState[loadingKey] = false;
+								}
+							} else _.action(record);
+							else item.action(_.tag, record);
+						} }, _.confirm), _isSlot(button) ? button : { default: () => [button] });
+						else return button;
+					})]);
+				}
+				if (column.type === "link") return createVNode("a", {
+					"class": this.ns.e("table-link"),
+					"onClick": (e) => {
+						e.stopPropagation();
+						if (_column.click) _column.click(record);
+					}
+				}, [text]);
+				return text;
+			}
+		})] })]);
+	}
 });
-
+//#endregion
 export { GctTable };