@kp-ui/lowcode 1.0.72 → 1.0.73

package/src/components/form-designer/setting-panel/property-editor/container-data-table/data-table-tableColumns-editor.vue2.js

@@ -0,0 +1,361 @@
+import { defineComponent, ref, resolveComponent, createElementBlock, openBlock, Fragment, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createBlock, createCommentVNode, normalizeClass } from "vue";
+import { useI18n } from "../../../../../utils/i18n.js";
+import _sfc_main$1 from "../../../../code-editor/code-modal-editor.vue.js";
+import { cloneDeep } from "lodash-es";
+import { TpfModal } from "tmgc2-share";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "tableColumns-editor"
+  },
+  __name: "data-table-tableColumns-editor",
+  props: {
+    designer: {},
+    selectedWidget: {},
+    optionModel: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const { i18nt } = useI18n();
+    const props = __props;
+    const CodeModalEditorRef = ref(null);
+    const dialogVisible = ref(false);
+    const tableColumns = ref([]);
+    const currentRecordIndexs = ref(null);
+    const alignOptions = [
+      { value: "left", label: "left" },
+      { value: "center", label: "center" },
+      { value: "right", label: "right" }
+    ];
+    const columns = [
+      {
+        title: "序号",
+        dataIndex: "index",
+        width: 100,
+        fixed: "left",
+        rowDrag: true,
+        resizable: true,
+        customRender: ({ index }) => index + 1
+      },
+      {
+        title: i18nt("designer.setting.columnName"),
+        dataIndex: "dataIndex",
+        resizable: true,
+        width: 150
+      },
+      {
+        title: i18nt("designer.setting.columnLabel"),
+        dataIndex: "title",
+        align: "center",
+        resizable: true,
+        width: 100
+      },
+      {
+        title: i18nt("designer.setting.columnWidth"),
+        dataIndex: "width",
+        resizable: true,
+        width: 120
+      },
+      {
+        title: i18nt("designer.setting.visibleColumn"),
+        dataIndex: "show",
+        resizable: true,
+        width: 90
+      },
+      {
+        title: i18nt("designer.setting.sortableColumn"),
+        dataIndex: "sorter",
+        resizable: true,
+        width: 90
+      },
+      {
+        title: "可拖动调整宽度",
+        dataIndex: "resizable",
+        width: 120
+      },
+      {
+        title: "超过宽度将自动省略",
+        dataIndex: "ellipsis",
+        resizable: true,
+        width: 150
+      },
+      {
+        title: i18nt("designer.setting.fixedColumn"),
+        dataIndex: "fixed",
+        resizable: true,
+        width: 100
+      },
+      {
+        title: i18nt("designer.setting.alignTypeOfColumn"),
+        dataIndex: "align",
+        resizable: true,
+        width: 100
+      },
+      {
+        title: "自定义渲染函数",
+        dataIndex: "customRender",
+        width: 120,
+        resizable: true,
+        fixed: "right"
+      },
+      {
+        title: i18nt("designer.setting.actionColumn"),
+        dataIndex: "action",
+        width: 80,
+        fixed: "right"
+      }
+    ];
+    const showRenderDialog = (recordIndexs, record) => {
+      var _a;
+      currentRecordIndexs.value = recordIndexs;
+      (_a = CodeModalEditorRef.value) == null ? void 0 : _a.open(record.customRender || "");
+    };
+    const saveColumnRender = (value) => {
+      if (currentRecordIndexs.value !== null) {
+        tableColumns.value[currentRecordIndexs.value].customRender = value;
+      }
+    };
+    const addCol = () => {
+      const newRow = {
+        isAutoWidth: false,
+        columnId: (/* @__PURE__ */ new Date()).getTime(),
+        show: true,
+        width: 150,
+        sorter: false,
+        customRender: "",
+        fixed: "",
+        align: "left",
+        title: "标题名",
+        dataIndex: "",
+        resizable: true,
+        showSorterTooltip: false
+      };
+      tableColumns.value.push(newRow);
+      props.designer.emitHistoryChange();
+    };
+    const handleDelete = (index) => {
+      if (tableColumns.value.length === 1) {
+        window.$message.warning(i18nt("designer.setting.onlyOneColumnCannotBeDeleted"));
+        return false;
+      }
+      tableColumns.value.splice(index, 1);
+    };
+    const colSubmit = () => {
+      props.optionModel.tableColumns = cloneDeep(tableColumns.value);
+      dialogVisible.value = false;
+    };
+    const openSetting = () => {
+      dialogVisible.value = true;
+      tableColumns.value = cloneDeep(props.optionModel.tableColumns);
+    };
+    __expose({
+      openSetting
+    });
+    return (_ctx, _cache) => {
+      const _component_a_button = resolveComponent("a-button");
+      const _component_a_form_item = resolveComponent("a-form-item");
+      const _component_a_input = resolveComponent("a-input");
+      const _component_a_switch = resolveComponent("a-switch");
+      const _component_a_select_option = resolveComponent("a-select-option");
+      const _component_a_select = resolveComponent("a-select");
+      const _component_a_space = resolveComponent("a-space");
+      const _component_s_table = resolveComponent("s-table");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_a_form_item, {
+          label: unref(i18nt)("designer.setting.tableColEdit")
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_a_button, {
+              type: "primary",
+              shape: "round",
+              onClick: openSetting
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.setting.editAction")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        createVNode(unref(TpfModal), {
+          title: unref(i18nt)("designer.setting.tableColEdit"),
+          visible: dialogVisible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => dialogVisible.value = $event),
+          width: "1200px"
+        }, {
+          footerRight: withCtx(() => [
+            createVNode(_component_a_button, {
+              size: "default",
+              onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              size: "default",
+              type: "primary",
+              onClick: colSubmit
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.confirm")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", { class: "table-wrap" }, [
+              createVNode(_component_s_table, {
+                class: "tpf-surely-table",
+                "aria-hidden": "false",
+                dataSource: tableColumns.value,
+                style: { "width": "100%" },
+                deepWatchDataSource: "",
+                "cell-style": { padding: "0" },
+                height: "600",
+                id: "singleTable",
+                size: "medium",
+                scroll: { y: 300, x: 300 },
+                pagination: false,
+                resizable: "",
+                "row-key": (record) => record.columnId,
+                columns
+              }, {
+                bodyCell: withCtx(({ column, record, index, recordIndexs }) => [
+                  column.dataIndex === "dataIndex" ? (openBlock(), createBlock(_component_a_input, {
+                    key: 0,
+                    value: tableColumns.value[recordIndexs[0]].dataIndex,
+                    "onUpdate:value": ($event) => tableColumns.value[recordIndexs[0]].dataIndex = $event
+                  }, null, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
+                  column.dataIndex === "title" ? (openBlock(), createBlock(_component_a_input, {
+                    key: 1,
+                    value: tableColumns.value[recordIndexs[0]].title,
+                    "onUpdate:value": ($event) => tableColumns.value[recordIndexs[0]].title = $event
+                  }, null, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
+                  column.dataIndex === "width" ? (openBlock(), createElementBlock("div", {
+                    key: 2,
+                    style: { "text-align": "center" }
+                  }, [
+                    createVNode(_component_a_switch, {
+                      "checked-children": "自动宽度",
+                      checked: tableColumns.value[recordIndexs[0]].isAutoWidth,
+                      "onUpdate:checked": ($event) => tableColumns.value[recordIndexs[0]].isAutoWidth = $event
+                    }, null, 8, ["checked", "onUpdate:checked"]),
+                    !record.isAutoWidth ? (openBlock(), createBlock(_component_a_input, {
+                      key: 0,
+                      value: tableColumns.value[recordIndexs[0]].width,
+                      "onUpdate:value": ($event) => tableColumns.value[recordIndexs[0]].width = $event
+                    }, null, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  column.dataIndex === "show" ? (openBlock(), createBlock(_component_a_switch, {
+                    key: 3,
+                    checked: tableColumns.value[recordIndexs[0]].show,
+                    "onUpdate:checked": ($event) => tableColumns.value[recordIndexs[0]].show = $event
+                  }, null, 8, ["checked", "onUpdate:checked"])) : createCommentVNode("", true),
+                  column.dataIndex === "sorter" ? (openBlock(), createBlock(_component_a_switch, {
+                    key: 4,
+                    checked: tableColumns.value[recordIndexs[0]].sorter,
+                    "onUpdate:checked": ($event) => tableColumns.value[recordIndexs[0]].sorter = $event
+                  }, null, 8, ["checked", "onUpdate:checked"])) : createCommentVNode("", true),
+                  column.dataIndex === "resizable" ? (openBlock(), createBlock(_component_a_switch, {
+                    key: 5,
+                    checked: tableColumns.value[recordIndexs[0]].resizable,
+                    "onUpdate:checked": ($event) => tableColumns.value[recordIndexs[0]].resizable = $event
+                  }, null, 8, ["checked", "onUpdate:checked"])) : createCommentVNode("", true),
+                  column.dataIndex === "ellipsis" ? (openBlock(), createBlock(_component_a_switch, {
+                    key: 6,
+                    checked: tableColumns.value[recordIndexs[0]].ellipsis,
+                    "onUpdate:checked": ($event) => tableColumns.value[recordIndexs[0]].ellipsis = $event
+                  }, null, 8, ["checked", "onUpdate:checked"])) : createCommentVNode("", true),
+                  column.dataIndex === "fixed" ? (openBlock(), createBlock(_component_a_select, {
+                    key: 7,
+                    value: tableColumns.value[recordIndexs[0]].fixed,
+                    "onUpdate:value": ($event) => tableColumns.value[recordIndexs[0]].fixed = $event,
+                    allowClear: "",
+                    style: {}
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_a_select_option, { value: "left" }, {
+                        default: withCtx(() => [
+                          createTextVNode("左固定")
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_a_select_option, { value: "right" }, {
+                        default: withCtx(() => [
+                          createTextVNode("右固定")
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "onUpdate:value"])) : createCommentVNode("", true),
+                  column.dataIndex === "align" ? (openBlock(), createBlock(_component_a_select, {
+                    key: 8,
+                    style: {},
+                    value: tableColumns.value[recordIndexs[0]].align,
+                    "onUpdate:value": ($event) => tableColumns.value[recordIndexs[0]].align = $event,
+                    options: alignOptions
+                  }, null, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
+                  column.dataIndex === "customRender" ? (openBlock(), createBlock(_component_a_button, {
+                    key: 9,
+                    onClick: ($event) => showRenderDialog(recordIndexs[0], record, _ctx.dataIndex),
+                    class: normalizeClass([{ "button-text-highlight": !!record.customRender }]),
+                    size: "small",
+                    shape: "round"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(" edit ")
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick", "class"])) : createCommentVNode("", true),
+                  column.dataIndex === "action" ? (openBlock(), createBlock(_component_a_space, { key: 10 }, {
+                    default: withCtx(() => [
+                      createVNode(_component_a_button, {
+                        title: unref(i18nt)("designer.setting.deleteTableColumn"),
+                        size: "small",
+                        onClick: ($event) => handleDelete(index),
+                        type: "text"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(" 删除 ")
+                        ]),
+                        _: 2
+                      }, 1032, ["title", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["dataSource", "row-key"]),
+              createElementVNode("div", { class: "add-btn" }, [
+                createVNode(_component_a_button, {
+                  title: unref(i18nt)("designer.setting.addTableColumn"),
+                  type: "primary",
+                  size: "medium",
+                  onClick: _cache[0] || (_cache[0] = ($event) => addCol())
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18nt)("designer.setting.addTableColumn")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["title"])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["title", "visible"]),
+        createVNode(_sfc_main$1, {
+          onSave: saveColumnRender,
+          ref_key: "CodeModalEditorRef",
+          ref: CodeModalEditorRef,
+          title: unref(i18nt)("designer.setting.renderFunction"),
+          "fn-params": "scope"
+        }, null, 8, ["title"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};