yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/ele-pro-table/components/tool-export.cjs

@@ -0,0 +1,505 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../../utils/core");
+const EleDialog = require("../../ele-dialog/index");
+const util = require("../util");
+const ToolColumnList = require("./tool-column-list");
+const _sfc_main = vue.defineComponent({
+  name: "ToolExport",
+  components: {
+    ElForm: elementPlus.ElForm,
+    ElFormItem: elementPlus.ElFormItem,
+    ElInput: elementPlus.ElInput,
+    ElSelect: elementPlus.ElSelect,
+    ElOption: elementPlus.ElOption,
+    ElCheckbox: elementPlus.ElCheckbox,
+    ElButton: elementPlus.ElButton,
+    EleDialog,
+    ToolColumnList
+  },
+  props: {
+    /** 表格国际化 */
+    locale: {
+      type: Object,
+      required: true
+    },
+    /** 缓存本地的名称 */
+    cacheKey: String,
+    /** 弹窗参数 */
+    modalProps: Object,
+    /** 列数据 */
+    columns: Array,
+    /** 表格选中数据 */
+    selections: Array,
+    /** 表格当前页数据 */
+    pageData: Array,
+    /** 表格全部数据 */
+    datasource: [Array, Function],
+    /** 单元格合并行列方法 */
+    spanMethod: Function,
+    /** 表格是否有表头 */
+    tableHeader: Boolean,
+    /** 是否显示合计行 */
+    showSummary: Boolean,
+    /** 合计行文本 */
+    sumText: String,
+    /** 合计行自定义方法 */
+    summaryMethod: Function,
+    /** 序号列起始索引 */
+    pageIndex: Number,
+    /** 树表字段名 */
+    treeProps: Object,
+    /** 表格请求数据方法 */
+    fetch: Function,
+    /** 默认文件名 */
+    defaultFileName: {
+      type: String,
+      default: "list"
+    },
+    /** 默认数据类型 */
+    defaultDataType: {
+      type: String,
+      default: "pageData"
+    },
+    /** 默认是否勾选表尾 */
+    defaultShowFooter: {
+      type: Boolean,
+      default: true
+    },
+    /** 默认是否勾选层级序号 */
+    defaultShowTreeIndex: Boolean,
+    /** 导出前的钩子函数 */
+    beforeExport: Function
+  },
+  setup(props) {
+    const visible = vue.ref(false);
+    const loading = vue.ref(false);
+    const formRef = vue.ref(null);
+    const form = vue.reactive({
+      /** 文件名 */
+      fileName: props.defaultFileName
+    });
+    const fileNameRules = vue.reactive({
+      required: true,
+      message: props.locale.exportFileNamePlaceholder,
+      type: "string",
+      trigger: "blur"
+    });
+    const dataType = vue.ref(props.defaultDataType);
+    const colItems = vue.ref([]);
+    const isCheckAll = vue.ref(false);
+    const isIndeterminate = vue.ref(false);
+    const showHeader = vue.ref(true);
+    const showFooter = vue.ref(false);
+    const showTreeIndex = vue.ref(false);
+    const treeIndexDisabled = vue.ref(true);
+    const showLoading = () => {
+      loading.value = true;
+    };
+    const hideLoading = () => {
+      loading.value = false;
+    };
+    const openModal = () => {
+      visible.value = true;
+    };
+    const closeModal = () => {
+      hideLoading();
+      visible.value = false;
+    };
+    const exportData = (params) => {
+      var _a;
+      showLoading();
+      const exportFileName = (params == null ? void 0 : params.fileName) ?? form.fileName;
+      const exportDataValue = (params == null ? void 0 : params.data) || [];
+      const isShowHeader = (params == null ? void 0 : params.showHeader) ?? showHeader.value;
+      const isShowFooter = (params == null ? void 0 : params.showFooter) ?? showFooter.value;
+      const isShowTreeIndex = (params == null ? void 0 : params.showTreeIndex) ?? showTreeIndex.value;
+      const exportDataType = (params == null ? void 0 : params.dataType) ?? dataType.value;
+      const exportColumns = (params == null ? void 0 : params.columns) || util.getCheckedColumns(
+        props.columns,
+        colItems.value,
+        true,
+        void 0,
+        util.columnsExportFilter,
+        false,
+        colItems.value
+      );
+      const tableColumns = (params == null ? void 0 : params.columns) || util.getCheckedColumns(
+        props.columns,
+        colItems.value,
+        true,
+        void 0,
+        util.columnsExportFilter,
+        true,
+        colItems.value
+      );
+      const { headerData, bodyData, footerData, bodyCols } = util.getExportData(
+        exportDataValue,
+        exportColumns,
+        props.spanMethod,
+        props.pageIndex,
+        isShowFooter,
+        props.sumText,
+        props.summaryMethod,
+        (_a = props.treeProps) == null ? void 0 : _a.children,
+        isShowTreeIndex,
+        isShowHeader
+      );
+      if (typeof props.beforeExport === "function") {
+        const flag = props.beforeExport({
+          data: exportDataValue,
+          columns: exportColumns,
+          headerData,
+          bodyData,
+          footerData,
+          bodyCols,
+          fileName: exportFileName,
+          dataType: exportDataType,
+          hideLoading,
+          closeModal,
+          showHeader: isShowHeader,
+          showFooter: isShowFooter,
+          showTreeIndex: isShowTreeIndex,
+          tableColumns
+        });
+        if (flag === false) {
+          return;
+        }
+      }
+      util.exportCSV(exportFileName, headerData, bodyData, footerData);
+      hideLoading();
+      closeModal();
+    };
+    const handleExport = () => {
+      var _a, _b;
+      (_b = (_a = formRef.value) == null ? void 0 : _a.validate) == null ? void 0 : _b.call(_a, (valid) => {
+        if (!valid) {
+          return;
+        }
+        if (dataType.value === "selections") {
+          exportData({ data: [...props.selections || []] });
+          return;
+        }
+        if (dataType.value !== "data") {
+          exportData({ data: [...props.pageData || []] });
+          return;
+        }
+        if (props.datasource == null || typeof props.datasource !== "function" || typeof props.fetch !== "function") {
+          return;
+        }
+        showLoading();
+        props.fetch((params) => {
+          props.datasource(params).then((result) => {
+            if (result == null) {
+              hideLoading();
+              closeModal();
+              return;
+            }
+            exportData({ data: result });
+          }).catch((e) => {
+            console.error(e);
+            hideLoading();
+          });
+        });
+      });
+    };
+    const initColItems = () => {
+      const colsWidth = util.getCacheColsWidth(props.cacheKey);
+      const { cols, checkAll, indeterminate } = util.getColItems(
+        props.columns,
+        props.locale,
+        util.columnsExportFilter,
+        void 0,
+        true,
+        true,
+        colsWidth
+      );
+      colItems.value = cols;
+      isCheckAll.value = checkAll;
+      isIndeterminate.value = indeterminate;
+    };
+    const handleCheckedChange = (item, checked, type) => {
+      let checkAll = true;
+      let indeterminate = false;
+      core.eachTree(colItems.value, (d) => {
+        const flag = item == null ? type === d.type : d.uid === item.uid;
+        if (flag) {
+          d.checked = checked;
+        }
+        if (!d.checked && checkAll) {
+          checkAll = false;
+        }
+        if (d.checked && !indeterminate) {
+          indeterminate = true;
+        }
+        if (flag && !checkAll && indeterminate) {
+          return false;
+        }
+      });
+      isCheckAll.value = colItems.value.length > 0 && checkAll;
+      isIndeterminate.value = !checkAll && indeterminate;
+    };
+    const handleCheckAllChange = (checked) => {
+      isCheckAll.value = checked;
+      isIndeterminate.value = false;
+      core.eachTree(colItems.value, (d) => {
+        if (d.checked !== checked) {
+          d.checked = checked;
+        }
+      });
+    };
+    const handleSortChange = (items, parent) => {
+      if (!parent) {
+        colItems.value = items;
+      } else {
+        core.eachTree(colItems.value, (d) => {
+          if (d.uid === parent.uid) {
+            d.children = items;
+            return false;
+          }
+        });
+      }
+    };
+    const handleColWidthChange = (item, width) => {
+      core.eachTree(colItems.value, (d) => {
+        if (d.uid === item.uid) {
+          d.width = width;
+          return false;
+        }
+      });
+    };
+    const handleReset = () => {
+      initColItems();
+    };
+    const handleTreeIndexChange = (checked) => {
+      if (checked) {
+        handleCheckedChange(void 0, false, "index");
+      }
+    };
+    vue.watch(visible, (visible2) => {
+      var _a, _b;
+      if (visible2) {
+        form.fileName = props.defaultFileName;
+        dataType.value = props.defaultDataType;
+        initColItems();
+        showHeader.value = !!props.tableHeader;
+        showFooter.value = props.showSummary ? !!props.defaultShowFooter : false;
+        treeIndexDisabled.value = !(props.pageData && props.pageData.some(
+          (d) => {
+            var _a2, _b2, _c;
+            return ((_b2 = d[((_a2 = props.treeProps) == null ? void 0 : _a2.children) || "children"]) == null ? void 0 : _b2.length) || d[((_c = props.treeProps) == null ? void 0 : _c.hasChildren) || "hasChildren"];
+          }
+        )) && core.findTree(colItems.value, (c) => c.type === "expand") == null;
+        showTreeIndex.value = treeIndexDisabled.value ? false : !!props.defaultShowTreeIndex;
+        return;
+      }
+      hideLoading();
+      (_b = (_a = formRef.value) == null ? void 0 : _a.clearValidate) == null ? void 0 : _b.call(_a);
+    });
+    vue.watch(
+      () => props.locale.exportFileNamePlaceholder,
+      (placeholder) => {
+        fileNameRules.message = placeholder;
+      }
+    );
+    return {
+      visible,
+      loading,
+      formRef,
+      form,
+      fileNameRules,
+      dataType,
+      colItems,
+      isCheckAll,
+      isIndeterminate,
+      showHeader,
+      showFooter,
+      showTreeIndex,
+      treeIndexDisabled,
+      openModal,
+      closeModal,
+      handleExport,
+      handleCheckedChange,
+      handleSortChange,
+      handleColWidthChange,
+      handleCheckAllChange,
+      handleReset,
+      handleTreeIndexChange,
+      exportData
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-tool-column is-sortable" };
+const _hoisted_2 = { class: "ele-tool-column-header" };
+const _hoisted_3 = { class: "ele-tool-column-label" };
+const _hoisted_4 = { class: "ele-tool-form-options" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_ElFormItem = vue.resolveComponent("ElFormItem");
+  const _component_ElOption = vue.resolveComponent("ElOption");
+  const _component_ElSelect = vue.resolveComponent("ElSelect");
+  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+  const _component_ToolColumnList = vue.resolveComponent("ToolColumnList");
+  const _component_ElForm = vue.resolveComponent("ElForm");
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_EleDialog = vue.resolveComponent("EleDialog");
+  return vue.openBlock(), vue.createBlock(_component_EleDialog, vue.mergeProps({
+    form: true,
+    width: "460px",
+    title: _ctx.locale.export,
+    position: "center"
+  }, _ctx.modalProps || {}, {
+    modelValue: _ctx.visible,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => _ctx.visible = $event)
+  }), {
+    footer: vue.withCtx(() => [
+      vue.createVNode(_component_ElButton, { onClick: _ctx.closeModal }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.locale.exportCancel), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"]),
+      vue.createVNode(_component_ElButton, {
+        loading: _ctx.loading,
+        type: "primary",
+        onClick: _ctx.handleExport
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.locale.exportOk), 1)
+        ]),
+        _: 1
+      }, 8, ["loading", "onClick"])
+    ]),
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_ElForm, {
+        ref: "formRef",
+        model: _ctx.form,
+        labelWidth: "80px",
+        onSubmit: _cache[6] || (_cache[6] = vue.withModifiers(() => {
+        }, ["prevent"])),
+        class: "ele-tool-export-form"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_ElFormItem, {
+            label: _ctx.locale.exportFileName,
+            prop: "fileName",
+            rules: _ctx.fileNameRules
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ElInput, {
+                maxlength: 200,
+                clearable: true,
+                modelValue: _ctx.form.fileName,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.form.fileName = $event),
+                placeholder: _ctx.locale.exportFileNamePlaceholder
+              }, null, 8, ["modelValue", "placeholder"])
+            ]),
+            _: 1
+          }, 8, ["label", "rules"]),
+          vue.createVNode(_component_ElFormItem, {
+            label: _ctx.locale.exportSelectData
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ElSelect, {
+                modelValue: _ctx.dataType,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.dataType = $event),
+                placeholder: _ctx.locale.exportSelectData
+              }, {
+                default: vue.withCtx(() => [
+                  _ctx.pageData != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
+                    key: 0,
+                    value: "pageData",
+                    label: _ctx.locale.exportDataTypePage
+                  }, null, 8, ["label"])) : vue.createCommentVNode("", true),
+                  _ctx.selections != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
+                    key: 1,
+                    value: "selections",
+                    label: _ctx.locale.exportDataTypeSelected
+                  }, null, 8, ["label"])) : vue.createCommentVNode("", true),
+                  _ctx.datasource != null ? (vue.openBlock(), vue.createBlock(_component_ElOption, {
+                    key: 2,
+                    value: "data",
+                    label: _ctx.locale.exportDataTypeAll
+                  }, null, 8, ["label"])) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["modelValue", "placeholder"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          vue.createVNode(_component_ElFormItem, {
+            label: _ctx.locale.exportSelectColumn
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1, [
+                vue.createElementVNode("div", _hoisted_2, [
+                  vue.createElementVNode("div", _hoisted_3, [
+                    vue.createVNode(_component_ElCheckbox, {
+                      label: _ctx.locale.columnTitle,
+                      modelValue: _ctx.isCheckAll,
+                      indeterminate: _ctx.isIndeterminate,
+                      "onUpdate:modelValue": _ctx.handleCheckAllChange
+                    }, null, 8, ["label", "modelValue", "indeterminate", "onUpdate:modelValue"])
+                  ]),
+                  vue.createElementVNode("div", {
+                    class: "ele-tool-column-link",
+                    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
+                  }, vue.toDisplayString(_ctx.locale.columnReset), 1)
+                ]),
+                vue.createVNode(_component_ToolColumnList, {
+                  data: _ctx.colItems,
+                  sortable: true,
+                  allowWidth: true,
+                  columnWidthPlaceholder: _ctx.locale.columnWidth,
+                  onSortChange: _ctx.handleSortChange,
+                  onCheckedChange: _ctx.handleCheckedChange,
+                  onColWidthChange: _ctx.handleColWidthChange
+                }, null, 8, ["data", "columnWidthPlaceholder", "onSortChange", "onCheckedChange", "onColWidthChange"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          vue.createVNode(_component_ElFormItem, {
+            label: _ctx.locale.exportOther
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_4, [
+                vue.createVNode(_component_ElCheckbox, {
+                  label: _ctx.locale.exportOtherHeader,
+                  modelValue: _ctx.showHeader,
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.showHeader = $event)
+                }, null, 8, ["label", "modelValue"]),
+                vue.createVNode(_component_ElCheckbox, {
+                  label: _ctx.locale.exportOtherFooter,
+                  modelValue: _ctx.showFooter,
+                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.showFooter = $event),
+                  disabled: !_ctx.showSummary
+                }, null, 8, ["label", "modelValue", "disabled"]),
+                vue.createVNode(_component_ElCheckbox, {
+                  label: _ctx.locale.exportOtherTreeIndex,
+                  modelValue: _ctx.showTreeIndex,
+                  "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.showTreeIndex = $event),
+                  disabled: _ctx.treeIndexDisabled,
+                  onChange: _ctx.handleTreeIndexChange
+                }, null, 8, ["label", "modelValue", "disabled", "onChange"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["model"])
+    ]),
+    _: 1
+  }, 16, ["title", "modelValue"]);
+}
+const toolExport = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = toolExport;