yuang-framework-ui-pc/es/ele-pro-table/components/tool-export.js

yuang-framework-ui-pc Library

import { defineComponent, ref, reactive, watch, resolveComponent, createBlock, openBlock, mergeProps, withCtx, createVNode, withModifiers, createCommentVNode, createElementVNode, toDisplayString, createTextVNode } from "vue";
import { ElButton, ElCheckbox, ElOption, ElSelect, ElInput, ElFormItem, ElForm } from "element-plus";
import { findTree, eachTree } from "../../utils/core";
import EleDialog from "../../ele-dialog/index";
import { getCacheColsWidth, getColItems, columnsExportFilter, getCheckedColumns, getExportData, exportCSV } from "../util";
import ToolColumnList from "./tool-column-list";
const _sfc_main = defineComponent({
  name: "ToolExport",
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElCheckbox,
    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 = ref(false);
    const loading = ref(false);
    const formRef = ref(null);
    const form = reactive({
      /** 文件名 */
      fileName: props.defaultFileName
    });
    const fileNameRules = reactive({
      required: true,
      message: props.locale.exportFileNamePlaceholder,
      type: "string",
      trigger: "blur"
    });
    const dataType = ref(props.defaultDataType);
    const colItems = ref([]);
    const isCheckAll = ref(false);
    const isIndeterminate = ref(false);
    const showHeader = ref(true);
    const showFooter = ref(false);
    const showTreeIndex = ref(false);
    const treeIndexDisabled = 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) || getCheckedColumns(
        props.columns,
        colItems.value,
        true,
        void 0,
        columnsExportFilter,
        false,
        colItems.value
      );
      const tableColumns = (params == null ? void 0 : params.columns) || getCheckedColumns(
        props.columns,
        colItems.value,
        true,
        void 0,
        columnsExportFilter,
        true,
        colItems.value
      );
      const { headerData, bodyData, footerData, bodyCols } = 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;
        }
      }
      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 = getCacheColsWidth(props.cacheKey);
      const { cols, checkAll, indeterminate } = getColItems(
        props.columns,
        props.locale,
        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;
      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;
      eachTree(colItems.value, (d) => {
        if (d.checked !== checked) {
          d.checked = checked;
        }
      });
    };
    const handleSortChange = (items, parent) => {
      if (!parent) {
        colItems.value = items;
      } else {
        eachTree(colItems.value, (d) => {
          if (d.uid === parent.uid) {
            d.children = items;
            return false;
          }
        });
      }
    };
    const handleColWidthChange = (item, width) => {
      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");
      }
    };
    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"];
          }
        )) && 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);
    });
    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 = resolveComponent("ElInput");
  const _component_ElFormItem = resolveComponent("ElFormItem");
  const _component_ElOption = resolveComponent("ElOption");
  const _component_ElSelect = resolveComponent("ElSelect");
  const _component_ElCheckbox = resolveComponent("ElCheckbox");
  const _component_ToolColumnList = resolveComponent("ToolColumnList");
  const _component_ElForm = resolveComponent("ElForm");
  const _component_ElButton = resolveComponent("ElButton");
  const _component_EleDialog = resolveComponent("EleDialog");
  return openBlock(), createBlock(_component_EleDialog, 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: withCtx(() => [
      createVNode(_component_ElButton, { onClick: _ctx.closeModal }, {
        default: withCtx(() => [
          createTextVNode(toDisplayString(_ctx.locale.exportCancel), 1)
        ]),
        _: 1
      }, 8, ["onClick"]),
      createVNode(_component_ElButton, {
        loading: _ctx.loading,
        type: "primary",
        onClick: _ctx.handleExport
      }, {
        default: withCtx(() => [
          createTextVNode(toDisplayString(_ctx.locale.exportOk), 1)
        ]),
        _: 1
      }, 8, ["loading", "onClick"])
    ]),
    default: withCtx(() => [
      createVNode(_component_ElForm, {
        ref: "formRef",
        model: _ctx.form,
        labelWidth: "80px",
        onSubmit: _cache[6] || (_cache[6] = withModifiers(() => {
        }, ["prevent"])),
        class: "ele-tool-export-form"
      }, {
        default: withCtx(() => [
          createVNode(_component_ElFormItem, {
            label: _ctx.locale.exportFileName,
            prop: "fileName",
            rules: _ctx.fileNameRules
          }, {
            default: withCtx(() => [
              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"]),
          createVNode(_component_ElFormItem, {
            label: _ctx.locale.exportSelectData
          }, {
            default: withCtx(() => [
              createVNode(_component_ElSelect, {
                modelValue: _ctx.dataType,
                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.dataType = $event),
                placeholder: _ctx.locale.exportSelectData
              }, {
                default: withCtx(() => [
                  _ctx.pageData != null ? (openBlock(), createBlock(_component_ElOption, {
                    key: 0,
                    value: "pageData",
                    label: _ctx.locale.exportDataTypePage
                  }, null, 8, ["label"])) : createCommentVNode("", true),
                  _ctx.selections != null ? (openBlock(), createBlock(_component_ElOption, {
                    key: 1,
                    value: "selections",
                    label: _ctx.locale.exportDataTypeSelected
                  }, null, 8, ["label"])) : createCommentVNode("", true),
                  _ctx.datasource != null ? (openBlock(), createBlock(_component_ElOption, {
                    key: 2,
                    value: "data",
                    label: _ctx.locale.exportDataTypeAll
                  }, null, 8, ["label"])) : createCommentVNode("", true)
                ]),
                _: 1
              }, 8, ["modelValue", "placeholder"])
            ]),
            _: 1
          }, 8, ["label"]),
          createVNode(_component_ElFormItem, {
            label: _ctx.locale.exportSelectColumn
          }, {
            default: withCtx(() => [
              createElementVNode("div", _hoisted_1, [
                createElementVNode("div", _hoisted_2, [
                  createElementVNode("div", _hoisted_3, [
                    createVNode(_component_ElCheckbox, {
                      label: _ctx.locale.columnTitle,
                      modelValue: _ctx.isCheckAll,
                      indeterminate: _ctx.isIndeterminate,
                      "onUpdate:modelValue": _ctx.handleCheckAllChange
                    }, null, 8, ["label", "modelValue", "indeterminate", "onUpdate:modelValue"])
                  ]),
                  createElementVNode("div", {
                    class: "ele-tool-column-link",
                    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
                  }, toDisplayString(_ctx.locale.columnReset), 1)
                ]),
                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"]),
          createVNode(_component_ElFormItem, {
            label: _ctx.locale.exportOther
          }, {
            default: withCtx(() => [
              createElementVNode("div", _hoisted_4, [
                createVNode(_component_ElCheckbox, {
                  label: _ctx.locale.exportOtherHeader,
                  modelValue: _ctx.showHeader,
                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.showHeader = $event)
                }, null, 8, ["label", "modelValue"]),
                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"]),
                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]]);
export {
  toolExport as default
};