src/views/point.vue

@@ -0,0 +1,196 @@
+<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>