Merge branch 'master' of http://49.4.49.126:3000/GYEE_R.D/SIS_Web

src/main.js

@@ -11,6 +11,10 @@ Vue.prototype.$http = http
 
 Vue.config.productionTip = false
 
+
+import JsonExcel from 'vue-json-excel'
+Vue.component('downloadExcel', JsonExcel)
+
 new Vue({
   router,
   store,

src/views/point.vue

@@ -3,7 +3,8 @@
     <div class="top">
       <el-upload
         class="upload-demo"
-        action="https://jsonplaceholder.typicode.com/posts/"
+        action="#"
+        :show-file-list="false"
         :on-change="handleChange"
       >
         <el-button size="small" type="primary">点击上传</el-button>
@@ -25,15 +26,29 @@
       </el-select>
       <el-cascader
         v-model="value1"
-        placeholder="试试搜索：指南"
+        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="tableData1" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%">
       <el-table-column
         v-for="i in arr"
         :key="i"
@@ -43,6 +58,19 @@
       >
       </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>
@@ -50,14 +78,27 @@ import XLSX from "xlsx";
 export default {
   data() {
     return {
+      Formdialog: false,
+      disabled: true,
+      excelTitle: "" || "excel",
       props: { multiple: true },
       tableData: [{}],
-      tableData1:[],  
+      excelData: [],
       arr: [],
       value: "",
       value1: "",
+      value2: "",
       tableList: [],
-      options: []
+      options: [],
+      json_fields: {},
+      json_meta: [
+        [
+          {
+            " key ": " charset ",
+            " value ": " utf- 8 ",
+          },
+        ],
+      ],
     };
   },
   created() {
@@ -81,6 +122,7 @@ export default {
         });
     },
     byTableName() {
+      this.options = [];
       this.$http
         .post("UnionTable/columns", this.value)
         .then((res) => {
@@ -100,20 +142,45 @@ export default {
     },
     search() {
       this.$http
-        .post("UnionTable/tableData",
-        {
-          tableName:this.value,
-          columnsName:this.value1,
-          excelData:this.tableData
+        .post("UnionTable/tableData", {
+          tableName: this.value,
+          columnsName: this.value1.flat(2),
+          excelData: this.excelData,
         })
         .then((res) => {
-          console.log(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 {
@@ -121,24 +188,11 @@ export default {
           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;
+            console.log(json);
+            this.excelData = json;
           });
         } catch (e) {
           console.log(e);
@@ -146,6 +200,26 @@ export default {
       };
       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>