|
|
@@ -1,234 +0,0 @@
|
|
|
-<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>
|
|
|
- <el-button type="primary" @click="Formdialog = true"
|
|
|
- >保存到数据库</el-button
|
|
|
- >
|
|
|
- </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>
|
|
|
- <el-dialog title="选择数据库表" :visible.sync="Formdialog" width="45%">
|
|
|
- <el-select v-model="value2" placeholder="请选择" filterable>
|
|
|
- <el-option
|
|
|
- v-for="item in tableList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-button type="primary" @click="saveUnionTable">确认保存</el-button>
|
|
|
- <el-button @click="Formdialog = false">取消</el-button>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import XLSX from "xlsx";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- Formdialog: false,
|
|
|
- disabled: true,
|
|
|
- excelTitle: "" || "excel",
|
|
|
- props: { multiple: true },
|
|
|
- tableData: [{}],
|
|
|
- excelData: [],
|
|
|
- arr: [],
|
|
|
- value: "",
|
|
|
- value1: "",
|
|
|
- value2: "",
|
|
|
- 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);
|
|
|
- },
|
|
|
- saveUnionTable() {
|
|
|
- this.$http
|
|
|
- .post("UnionTable/saveData", this.value2 )
|
|
|
- .then((res) => {
|
|
|
- console.log(res.data);
|
|
|
- if (res.data == "保存成功") {
|
|
|
- this.$message({
|
|
|
- type: "success",
|
|
|
- message: "保存成功!",
|
|
|
- });
|
|
|
- this.Formdialog = false;
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- type: "fail",
|
|
|
- message: "保存失败!",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.Formdialog = false;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.top {
|
|
|
- width: 60%;
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-</style>
|
