lambo-design-bi 0.0.1

package/pub/table/paging-table/comps/export-data.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="export-data">
+    <Row type="flex" justify="center">
+      <Form v-model="form" :label-width="80">
+        <FormItem label="导出格式">
+          <Select v-model="form.fileFormat" style="width:270px">
+            <Option key="xlsx" value="xlsx">xlsx</Option>
+            <Option key="csv" value="csv">csv</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="文件名">
+          <Input v-model="form.fileName" icon="document" placeholder="自定义文件名" style="width:270px" />
+        </FormItem>
+      </Form>
+    </Row>
+    <Row type="flex" justify="center">
+      <Col>
+      <Button type="primary" :loading="exportCurrentLoading" @click="exportCurrentPage"
+        style="margin-right: 10px">导出当前页</Button>
+      <Poptip v-if="exportBatchSize > 0" trigger="hover" title="提示" :content="'单次最大导出' + exportBatchSize + '条数据'"
+        placement="top">
+        <Button type="default" :loading="exportAllLoading" @click="exportBatch" style="margin-left: 8px">
+          导出全部
+        </Button>
+      </Poptip>
+      <Button v-else :loading="exportAllLoading" type="default" @click="exportAllData">导出全部</Button>
+      </Col>
+    </Row>
+    <Row class="ivu-upload-list-file">
+      <LamboPercentProgress v-model="showProgress" :progress="progress" :status="status"></LamboPercentProgress>
+    </Row>
+    <export-drawer v-model="showFileList" :file-list="fileList" :export-mode="exportMode" :request-url="requestUrl"
+      :request-limit="exportRequestLimit" :requestMethod="reqMethod" :request-success-codes="requestSuccessCodes"
+      :searchParams="searchParams" :sortParams="sortParams" :tableColumns="tableColumns" :parsed-columns="parsedColumns"
+      :show-summary="showSummary" :summary-method="summaryMethod"></export-drawer>
+  </div>
+</template>
+<script>
+import ajax from '@lambo-design/shared/utils/ajax'
+import excel from '@lambo-design/shared/utils/excel'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+import LamboPercentProgress from '@lambo-design/percent-progress'
+import ExportDrawer from "./export-drawer.vue"
+
+export default {
+  name: 'export-data',
+  components: {
+    LamboPercentProgress,
+    ExportDrawer
+  },
+  props: {
+    tableName: {
+      type: String,
+      default: '表格数据'
+    },
+    tableColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    dataUrl: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    exportUrl: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    exportMode: {
+      type: String,
+      default() {
+        return "front";
+      }
+    },
+    exportBatchSize: {
+      type: Number,
+      default: -1
+    },
+    exportRequestLimit: {
+      type: Number,
+      default: -1
+    },
+    exportSpanColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    requestMethod: {
+      type: String,
+      default: 'GET',
+    },
+    requestSuccessCodes: {
+      type: Array,
+      default: function () {
+        return [1, "000"]
+      },
+      validator(value) {
+        if (value != null && [...value].sort().toString() !== [1, "1", "000"].sort().toString()) {
+          console.warn("不推荐单独设置请求成功返回码");
+        }
+        return value instanceof Array;
+      }
+    },
+    searchParams: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    sortParams: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    paginationParams: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    summaryMethod: {
+      type: Function,
+      default: () => {
+      }
+    },
+    parsedColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    exportName: String,
+    total: {
+      type: Number,
+      default: 100000
+    }
+  },
+  data() {
+    return {
+      showFileList: false,
+      fileList: [],
+      showProgress: false,
+      progress: 0,
+      status: 'fail',
+      timer: null,
+      exportCurrentLoading: false,
+      exportAllLoading: false,
+      form: {
+        fileFormat: "xlsx",
+        fileName: this.tableName,
+        exportType: ""
+      },
+      tableParsedColumns: []
+    }
+  },
+  computed: {
+    requestUrl: function () {
+      return this.exportUrl || this.dataUrl;
+    },
+    limitTotal: function () {
+      return this.total >= 100000 ? 100000 : this.total;
+    },
+    reqMethod: function () {
+      return this.requestMethod
+    },
+  },
+  created() {
+    this.tableParsedColumns = this.parsedColumns
+  },
+  methods: {
+    exportCurrentPage() {
+      this.exportCurrentLoading = true
+      this.form.exportType = "current"
+      let exportParams = Object.assign({}, this.paginationParams, this.sortParams, this.searchParams)
+      this.getDataFromServer(exportParams)
+    },
+    exportAllData() {
+      if (!this.tableColumns || this.tableColumns.length === 0) {
+        this.$Message.info('当前显示列为空，无法导出！');
+        return;
+      }
+      this.exportAllLoading = true
+      this.form.exportType = "all"
+      if (!this.limitTotal) {
+        this.$Message.info('暂无数据，无法导出！')
+        return;
+      }
+      let paginationParams = { offset: 0, limit: this.limitTotal }
+      let exportParams = Object.assign({}, paginationParams, this.sortParams, this.searchParams)
+      this.getDataFromServer(exportParams)
+    },
+    exportBatch: function () {
+      let self = this;
+      self.$emit("close-drop-down")
+      self.showFileList = true;
+      self.fileList = [];
+      const total = self.total;
+      const filename = self.form.fileName;
+      const fileFormat = self.form.fileFormat;
+      let limit = self.exportBatchSize;
+      for (let i = 0; i < total / limit; i++) {
+        let uid = Date.now() + i;
+        let offset = i * limit;
+        let start = i * limit + 1;
+        let end = (i + 1) * limit
+        const _file = {
+          status: 'active',
+          name: filename + '第' + start + '到' + end + '条数据',
+          filename: filename + (i + 1),
+          format: fileFormat,
+          percentage: 0,
+          uid: uid,
+          offset: offset,
+          limit: limit,
+          timer: null,
+          showProgress: true
+        };
+        self.fileList.push(_file);
+      }
+    },
+    getDataFromServer(params) {
+      let self = this;
+      if (self.exportMode == 'front') {
+        self.dealWithJson(params)
+      } else if (self.exportMode == 'back') {
+        self.dealWithStream(params)
+      }
+    },
+    dealWithStream(params) {
+      let self = this;
+      let exportParams = {
+        fileFormat: self.form.fileFormat,
+        fileName: self.form.fileName + new Date().Format('yyyyMMddHHmmss'),
+        exportType: self.form.exportType,
+        tableColumns: self.tableParsedColumns
+      }
+      ajax.request({
+        url: self.requestUrl,
+        method: self.reqMethod,
+        params: Object.assign({}, params, { exportParams: JSON.stringify(exportParams) }),
+        responseType: 'blob'
+      }).then((resp) => {
+        let blob = new Blob([resp.data], {
+          type: "application/vnd.ms-excel"
+        });
+        excel.saveAs(blob, self.form.fileName + '.' + self.form.fileFormat);
+        this.exportCurrentLoading = false
+        this.exportAllLoading = false
+      }).catch((e) => {
+        console.error(e)
+      })
+    },
+    dealWithJson(params) {
+      let self = this;
+      let options = {
+        url: self.requestUrl,
+        method: self.reqMethod
+      }
+      if (self.reqMethod === 'GET') {
+        options = Object.assign({}, options,
+          {
+            params: params
+          }
+        )
+      } else if (self.reqMethod === 'POST') {
+        options = Object.assign({}, options,
+          {
+            data: params
+          }
+        )
+      }
+      ajax.request(options).then(function (resp) {
+        if (self.requestSuccessCodes.includes(resp.data.code)) {
+          let resultData = deepCopy(resp.data.data.rows)
+          if (self.showSummary && resultData) {
+            let sum = self.summaryData(resultData)
+            resultData.push(sum)
+          }
+          self.exportExcel(resultData)
+        } else {
+          self.$Message.error(resp.data.data)
+        }
+      })
+    },
+    summaryData(data) {
+      let sums = {};
+      if (this.summaryMethod) {
+        sums = this.summaryMethod({ columns: this.tableParsedColumns, data: data });
+      } else {
+        this.cloneColumns.forEach((column, index) => {
+          const key = column.key;
+          if (index === 0) {
+            sums[key] = {
+              key: column.key,
+              value: '合计'
+            };
+            return;
+          }
+          const values = data.map(item => Number(item[column.key]));
+          const precisions = [];
+          let notNumber = true;
+          values.forEach(value => {
+            if (!isNaN(value)) {
+              notNumber = false;
+              let decimal = ('' + value).split('.')[1];
+              precisions.push(decimal ? decimal.length : 0);
+            }
+          });
+          const precision = Math.max.apply(null, precisions);
+          if (!notNumber) {
+            const currentValue = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
+              } else {
+                return prev;
+              }
+            }, 0);
+            sums[key] = {
+              key: column.key,
+              value: currentValue
+            };
+          } else {
+            sums[key] = {
+              key: column.key,
+              value: ''
+            };
+          }
+        });
+      }
+      let total = {}
+      Object.keys(sums).forEach(item => {
+        if (item) {
+          total[item] = sums[item].value
+        }
+      })
+      return total;
+    },
+    exportExcel(tableDatas) {
+      if (tableDatas.length) {
+        let titles = excel.title_transform(this.tableColumns)
+        let keys = excel.key_transform(this.tableColumns)
+        let enums = excel.enums_transform(this.tableColumns)
+        let data = excel.enums_to_value(enums, deepCopy(tableDatas))
+        const params = {
+          title: titles,
+          key: keys,
+          data: data,
+          autoWidth: true,
+          filename: this.form.fileName + new Date().Format('yyyyMMddHHmmss'),
+          format: this.form.fileFormat,
+          spanColumns: this.exportSpanColumns,
+        }
+        excel.export_array_to_excel(params)
+      } else {
+        this.$Message.info('表格数据不能为空！')
+      }
+      this.exportCurrentLoading = false
+      this.exportAllLoading = false
+    },
+  },
+  watch: {
+    exportName: {
+      handler() {
+        this.form.fileName = this.exportName;
+      },
+      immediate: true
+    },
+    parsedColumns(val) {
+      this.tableParsedColumns = val
+    }
+  }
+};
+</script>
+<style>
+.export-data .ivu-form-item .ivu-form-item-label:before {
+  margin-right: auto;
+}
+</style>