lambo-design-bi 0.0.1

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

@@ -0,0 +1,429 @@
+<template>
+  <Drawer title="导出列表" width="400" v-if="value" :mask-closable="false">
+    <LamboFileList class="demo-drawer-body" v-if="value" :files="fileList" @on-file-remove="handleRemove" @on-file-preview="exportFile"></LamboFileList>
+    <div class="demo-drawer-footer">
+      <Button style="margin-right: 8px" @click="onCancel">关闭</Button>
+      <Button type="primary" :loading="exportLoading" @click="exportIndex(0)">开始导出</Button>
+    </div>
+  </Drawer>
+</template>
+
+<script>
+import ajax from '@lambo-design/shared/utils/ajax';
+import excel from '@lambo-design/shared/utils/excel'
+import { deepCopy, isJson } from "@lambo-design/shared/utils/assist";
+import LamboFileList from '@lambo-design/file-list'
+
+export default {
+  name: 'export-drawer',
+  components: {
+    LamboFileList
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    fileList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    exportMode: {
+      type: String,
+      default() {
+        return "front";
+      }
+    },
+    requestUrl: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    requestLimit: {
+      type: Number,
+      default: -1
+    },
+    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 {};
+      }
+    },
+    tableColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    parsedColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    summaryMethod: {
+      type: Function,
+      default: () => {
+      }
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      exportLoading: false,
+      tableParsedColumns: []
+    }
+  },
+  computed: {
+    showFileList: function () {
+      return this.value;
+    },
+    reqMethod: function () {
+      return this.requestMethod
+    },
+  },
+  created() {
+    this.tableParsedColumns = this.parsedColumns;
+  },
+  methods: {
+    onCancel() {
+      this.$emit("input", false);
+    },
+    getFile(index) {
+      let self = this;
+      let file = self.fileList[index];
+      if (file.status === 'finished') {
+        ++index;
+        return self.getFile(index)
+      } else {
+        return file
+      }
+    },
+    exportIndex(index) {
+      let self = this;
+      let file = self.getFile(index);
+      self.exportFile(file).then(() => {
+        if (index < self.fileList.length && self.showFileList) {
+          self.exportIndex(++index);
+        }
+      }).catch((e) => {
+        console.error(e);
+      });
+    },
+    exportFile(file) {
+      let self = this;
+      self.exportLoading = true;
+      file.percentage = 0;
+      file.showProgress = true;
+      file.status = 'active';
+      file.timer = setInterval(() => {
+        file.percentage += Math.floor(Math.random() * 2);
+        if (file.percentage > 95) {
+          if (file.timer) {
+            clearInterval(file.timer);
+          }
+        }
+      }, 300);
+
+      return new Promise((resolve, reject) => {
+        self.getData(file).then(() => {
+          if (file.timer) {
+            clearInterval(file.timer);
+            file.timer = null;
+            file.percentage = 100;
+            file.status = "finished"
+          }
+
+          self.exportLoading = false;
+          setTimeout(() => {
+            // file.percentage = 0;
+            // file.showProgress = false;
+            resolve();
+          }, 200);
+        }).catch((e) => {
+          self.exportLoading = false;
+          if (file.timer) {
+            clearInterval(file.timer);
+            file.timer = null;
+            file.percentage = 100;
+            file.status = "wrong"
+          }
+          reject(e);
+        })
+      })
+    },
+    getData(file) {
+      let self = this;
+      if (self.exportMode == 'front') {
+        return self.dealWithJson(file)
+      } else if (self.exportMode == 'back') {
+        return self.dealWithStream(file)
+      }
+    },
+    dealWithStream(file) {
+      let self = this;
+      let paginationParams = { offset: file.offset || 0, limit: file.limit }
+      let params = Object.assign({}, paginationParams, self.sortParams, self.searchParams)
+      let exportParams = {
+        fileFormat: file.format,
+        fileName: file.filename,
+        exportType: 'current',
+        tableColumns: self.tableParsedColumns
+      }
+      return new Promise((resolve, reject) => {
+        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, file.filename + '.' + file.format);
+          resolve();
+        }).catch((e) => {
+          reject(e);
+        })
+      })
+    },
+    dealWithJson(file) {
+      let self = this;
+      if (self.requestLimit === -1) {
+        return self.noLimitRequest(file);
+      } else {
+        return self.limitRequest(file);
+      }
+    },
+    limitRequest(file) {
+      let self = this;
+      return new Promise((resolve, reject) => {
+        let reqArr = [];
+        let iterations = file.limit / self.requestLimit;
+        for (let i = 0; i < iterations; i++) {
+          let remain = file.limit - i * this.requestLimit
+          let limit = remain > this.requestLimit ? this.requestLimit : remain;
+          let paginationParams = { offset: file.offset + i * self.requestLimit || 0, limit: limit }
+          let params = Object.assign({}, paginationParams, self.sortParams, self.searchParams)
+          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
+              }
+            )
+          }
+          reqArr.push(ajax.request(options))
+        }
+        // ajax.get(self.requestUrl, {params: params})
+        Promise.all(reqArr).then(function (resps) {
+          let resultData = [];
+          let success = true;
+          resps.forEach((resp) => {
+            //这里是为了做IE11兼容
+            if (!isJson(resp.data)) {
+              resp.data = JSON.parse(resp.data);
+            }
+            if (self.requestSuccessCodes.includes(resp.data.code)) {
+              let resultDataItem = deepCopy(resp.data.data.rows)
+              resultData.push(...resultDataItem);
+            } else {
+              success = false;
+            }
+          })
+          if (self.showSummary && resultData) {
+            let sum = self.summaryData(resultData)
+            resultData.push(sum)
+          }
+          // console.log(resultData)
+          if (success) {
+            self.exportData(resultData, file)
+            resolve();
+          } else {
+            reject(resps)
+          }
+        }).catch((e) => {
+          reject(e)
+        })
+      })
+    },
+    noLimitRequest(file) {
+      let self = this;
+      let paginationParams = { offset: file.offset || 0, limit: file.limit }
+      let params = Object.assign({}, paginationParams, self.sortParams, self.searchParams)
+      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
+          }
+        )
+      }
+      return new Promise((resolve, reject) => {
+        ajax.request(options).then(function (resp) {
+          //这里是为了做IE11兼容
+          if (!isJson(resp.data)) {
+            resp.data = JSON.parse(resp.data);
+          }
+          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.exportData(resultData, file)
+            resolve();
+          } else {
+            reject(resp.data.data)
+          }
+        }).catch((e) => {
+          reject(e)
+        })
+      })
+    },
+    handleRemove(file) {
+      const fileList = this.fileList;
+      fileList.splice(fileList.indexOf(file), 1);
+    },
+    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;
+    },
+    exportData(tableDatas, file) {
+      let self = this;
+      if (tableDatas.length) {
+        let titles = excel.title_transform(self.tableColumns)
+        let keys = excel.key_transform(self.tableColumns)
+        let data = deepCopy(tableDatas)
+        const params = {
+          title: titles,
+          key: keys,
+          data: data,
+          autoWidth: true,
+          filename: file.filename,
+          format: file.format,
+        }
+        excel.export_array_to_excel(params)
+      } else {
+        self.$Message.info('数据不能为空！')
+      }
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.demo-drawer-body {
+  height: calc(100% - 53px);
+  overflow: auto;
+}
+
+.demo-drawer-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+</style>

package/pub/table/paging-table/index.js

@@ -0,0 +1,3 @@
+import LamboPagingTableBi from './index.vue'
+export default LamboPagingTableBi
+export { LamboPagingTableBi }