SIS_Web/src/views/point.vue

<template>
  <div>
    <div class="top">
      <el-upload
        class="upload-demo"
        action="#"
        :show-file-list="false"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>

      <el-select
        v-model="value"
        placeholder="请选择"
        filterable
        @change="byTableName"
      >
        <el-option
          v-for="item in tableList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-cascader
        v-model="value1"
        placeholder="字段"
        :options="options"
        :props="{ multiple: true }"
        collapse-tags
        filterable
      ></el-cascader>
      <el-button type="primary" @click="search" >查询</el-button>

      <download-excel
        class="export-excel-wrapper"
        :data="tableData"
        :fields="json_fields"
        :name="excelTitle"
         :disabled='disabled'
      >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="primary">导出EXCEL</el-button>
      </download-excel>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="i in arr"
        :key="i"
        :prop="i"
        :label="i"
        width="180"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import XLSX from "xlsx";
export default {
  data() {
    return {
      disabled:true,
      excelTitle:'' || 'excel',
      props: { multiple: true },
      tableData: [{}],
      excelData: [],
      arr: [],
      value: "",
      value1: "",
      tableList: [],
      options: [],
      json_fields: {},
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 ",
          },
        ],
      ],
    };
  },
  created() {
    this.fetch();
  },
  mounted() {},
  methods: {
    fetch() {
      this.$http
        .get("UnionTable/tableNames")
        .then((res) => {
          var res = res.data;
          for (let i in res) {
            var obj = {};
            obj.lable = obj.value = res[i];
            this.tableList.push(obj);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    byTableName() {
      this.options = [];
      this.$http
        .post("UnionTable/columns", this.value)
        .then((res) => {
          console.log(res);
          var res = res.data;
          for (let i in res) {
            var obj = {};
            obj.label = obj.value = res[i];
            console.log(obj);

            this.options.push(obj);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    search() {
      this.$http
        .post("UnionTable/tableData", {
          tableName: this.value,
          columnsName: this.value1.flat(2),
          excelData: this.excelData,
        })
        .then((res) => {
          console.log(res.data);
          var json = res.data;
          var arr = [];
          for (let v in json) {
            if (v > 100) {
              break;
            }
            for (let k in Object.keys(json[v])) {
              if (arr.indexOf(Object.keys(json[v])[k]) == -1) {
                arr.push(Object.keys(json[v])[k]);
              }
            }
          }
          this.arr = arr;
          console.log(arr)
          var cluHead = {};
          for(let i in arr){
            cluHead[arr[i]] = arr[i]
          }
          console.log(cluHead)
          this.json_fields = cluHead
          this.$nextTick(() => {
            this.tableData = json;
            this.disabled = false
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    handleChange(file, fileList) {
      this.excelTitle = file.name
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          let sheet = Object.keys(workbook.Sheets)[0];
          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //获得以第一列为键名的sheet数组对象
          this.$nextTick(() => {
            console.log(json);
            this.excelData = json;
          });
        } catch (e) {
          console.log(e);
        }
      };
      fileReader.readAsBinaryString(file.raw);
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  width: 60%;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
</style>