SIS_Web/src/views/point.vue

<template>
  <div>
    <div class="top">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :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>
    </div>
    <el-table :data="tableData1" 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 {
      props: { multiple: true },
      tableData: [{}],
      tableData1:[],  
      arr: [],
      value: "",
      value1: "",
      tableList: [],
      options: []
    };
  },
  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.$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,
          excelData:this.tableData
        })
        .then((res) => {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleChange(file, fileList) {
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          console.log(workbook);
          let sheet = Object.keys(workbook.Sheets)[0];
          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //获得以第一列为键名的sheet数组对象
          console.log(json);
          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;
          this.$nextTick(() => {
            this.tableData = 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>