element+xlsx+file-saver配置导出

package.json

@@ -46,24 +46,25 @@
     "core-js": "3.6.5",
     "echarts": "4.2.1",
     "element-ui": "2.13.2",
-    "file-saver": "2.0.1",
+    "file-saver": "^2.0.1",
-    "js-beautify": "1.10.2",
     "fuse.js": "3.4.4",
+    "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "quill": "1.3.7",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
-    "quill": "1.3.7",
     "vue-cropper": "0.4.9",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "^0.16.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/views/workOrderManage/orderApproval/detail.vue

@@ -19,21 +19,41 @@
           <el-table-column type="expand">
             <template slot-scope="props">
               <el-form label-position="left" inline class="demo-table-expand">
+                <el-row>
                   <el-form-item label="处理结果：">
                   <span>{{ props.row.writeForm.resultNote }}</span>
                 </el-form-item>
+                  </el-row>
+                <el-row>
+              <el-col :span="6">
                 <el-form-item label="是否修复：">
-                  <span>{{ props.row.writeForm.isOk==1?'是':'否' }}</span>
+                  <span>{{ props.row.writeForm.isOk == 1 ? '是' : '否' }}</span>
                 </el-form-item>
+              </el-col>
+              <el-col :span="6">
                 <el-form-item label="是否返厂：">
-                  <span>{{ props.row.writeForm.isReturn==1?'是':'否' }}</span>
+                  <span>{{
+                    props.row.writeForm.isReturn == 1 ? '是' : '否'
+                  }}</span>
                 </el-form-item>
-                <el-form-item label="返厂数量：" v-if="props.row.writeForm.isReturn==1">
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="返厂数量："
+                  v-if="props.row.writeForm.isReturn == 1"
+                >
                   <span>{{ props.row.writeForm.returnNum }}</span>
                 </el-form-item>
-                <el-form-item label="返厂单号：" v-if="props.row.writeForm.isReturn==1">
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  label="返厂单号："
+                  v-if="props.row.writeForm.isReturn == 1"
+                >
                   <span>{{ props.row.writeForm.returnOrder }}</span>
                 </el-form-item>
+              </el-col>
+            </el-row>
               </el-form>
             </template>
           </el-table-column>

src/views/workOrderManage/orderHistory/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="app-container">
-    <el-form
+    <!-- <el-form
       ref="tableData"
       :inline="true"
       :model="tableHeader"
@@ -9,68 +9,111 @@
       <el-row :gutter="20">
         <el-col :span="4" class="grid-content">
           <el-form-item label="派单编号：">
-            {{tableHeader.id}}
+            {{ tableHeader.id }}
           </el-form-item>
         </el-col>
         <el-col :span="4" class="grid-content">
           <el-form-item label="派单时间：">
-            {{tableHeader.createTime | formatDate}}
+            {{ tableHeader.createTime | formatDate }}
           </el-form-item>
         </el-col>
         <el-col :span="4" class="grid-content">
           <el-form-item label="处理人：">
-            {{tableHeader.nick_name}}
+            {{ tableHeader.nick_name }}
           </el-form-item>
         </el-col>
         <el-col :span="4" class="grid-content">
           <el-form-item label="提交时间：">
-            {{tableHeader.updateTime | formatDate}}
+            {{ tableHeader.updateTime | formatDate }}
           </el-form-item>
         </el-col>
         <el-col :span="4" class="grid-content">
           <el-form-item label="通过时间：">
-            {{tableHeader.finishTime | formatDate}}
+            {{ tableHeader.finishTime | formatDate }}
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="20">
           <el-form-item label="派单备注：">
-            {{tableHeader.note}}
+            {{ tableHeader.note }}
           </el-form-item>
         </el-col>
         <el-col :span="4">
           <el-form-item>
-            <el-button type="primary">报表导出</el-button>
+            <el-button type="primary" @click="exportExcel">报表导出</el-button>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-form-item label="驳回备注：">
-          {{tableHeader.rejectNote}}
+          {{ tableHeader.rejectNote }}
         </el-form-item>
       </el-row>
-    </el-form>
+    </el-form> -->
     <!-- 表格区域 -->
-    <el-table v-loading="loading" :data="tableData" style="width: 100%" default-expand-all>
+    <el-row style="margin-bottom:20px;text-align: right;">
+      <el-button type="primary" @click="exportExcel">报表导出</el-button>
+    </el-row>
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      style="width: 100%"
+      default-expand-all
+      id="out-table"
+    >
+      <el-table-column align="center" label="派单信息">
+        <el-table-column
+          label="工单信息"
+          width="55"
+          :render-header="renderHeaderDate"
+        >
+          <template>
+            {{ tableHeader.id }}
+          </template>
+          <el-table-column align="center" label="工单信息" width="55">
             <el-table-column type="expand">
               <template slot-scope="props">
                 <el-form label-position="left" inline class="demo-table-expand">
+                  <!-- <el-row> -->
                   <el-form-item label="处理结果：">
-              <span>{{ props.row.writeForm.resultNote }}</span>
+                    <span>{{
-            </el-form-item>
+                      props.row.writeForm.resultNote
+                    }}</span> </el-form-item
+                  ><br />
+                  <!-- </el-row> -->
+                  <el-row>
+                    <el-col :span="3">
                       <el-form-item label="是否修复：">
-              <span>{{ props.row.writeForm.isOk==1?'是':'否' }}</span>
+                        <span>{{
+                          props.row.writeForm.isOk == 1 ? '是' : '否'
+                        }}</span>
                       </el-form-item>
+                    </el-col>
+                    <el-col :span="3">
                       <el-form-item label="是否返厂：">
-              <span>{{ props.row.writeForm.isReturn==1?'是':'否' }}</span>
+                        <span>{{
+                          props.row.writeForm.isReturn == 1 ? '是' : '否'
+                        }}</span>
                       </el-form-item>
-            <el-form-item label="返厂数量：" v-if="props.row.writeForm.isReturn==1">
+                    </el-col>
+                    <el-col :span="3">
+                      <el-form-item
+                        label="返厂数量："
+                        v-if="props.row.writeForm.isReturn == 1"
+                      >
                         <span>{{ props.row.writeForm.returnNum }}</span>
                       </el-form-item>
-            <el-form-item label="返厂单号：" v-if="props.row.writeForm.isReturn==1">
+                    </el-col>
+                    <el-col :span="3">
+                      <el-form-item
+                        label="返厂单号："
+                        v-if="props.row.writeForm.isReturn == 1"
+                      >
                         <span>{{ props.row.writeForm.returnOrder }}</span>
                       </el-form-item>
+                    </el-col>
+                  </el-row>
                 </el-form>
               </template>
             </el-table-column>
@@ -82,7 +125,11 @@
             ></el-table-column>
             <el-table-column align="center" label="地区" min-width="150">
               <template slot-scope="scope">
-          {{ scope.row.workInfo.proName + scope.row.workInfo.cityName + scope.row.workInfo.disName }}
+                {{
+                  scope.row.workInfo.proName +
+                    scope.row.workInfo.cityName +
+                    scope.row.workInfo.disName
+                }}
               </template>
             </el-table-column>
             <el-table-column
@@ -135,35 +182,89 @@
                 {{ scope.row.workInfo.createTime | formatDate }}
               </template>
             </el-table-column>
+          </el-table-column>
+        </el-table-column>
+      </el-table-column>
     </el-table>
   </section>
 </template>
 
 <script>
+import FileSaver from 'file-saver';
+import XLSX from 'xlsx';
 import { getOkInfo } from '@/api/work/orderHistory';
 export default {
   name: 'detail',
   data() {
     return {
-      id:null,
+      id: null,
       loading: true,
       tableHeader: {},
       tableData: []
     };
   },
   methods: {
-    getCompleteOrder(){
+    renderHeaderDate() {
-      this.loading = true
+      return (
-      getOkInfo({id:this.id}).then(({code,data,message})=>{
+        <section>
+          <div class="table_content">
+            <span>派单编号：{this.tableHeader.id}</span>
+            <span>派单时间：{this.tableHeader.createTime}</span>
+            <span>处理人：{this.tableHeader.nick_name}</span>
+            <span>提交时间：{this.tableHeader.finishTime}</span>
+            <span>通过时间：{this.tableHeader.updateTime}</span>
+          </div>
+          <div>派单备注：{this.tableHeader.note}</div>
+          <div>驳回备注：{this.tableHeader.rejectNote}</div>
+        </section>
+      );
+    },
+    getCompleteOrder() {
+      this.loading = true;
+      getOkInfo({ id: this.id }).then(({ code, data, message }) => {
         if (code !== 200) return this.$message.error(message);
-        this.tableHeader = data.find((item,index)=>{
+        this.tableHeader = data.find((item, index) => {
-          return index == 0
+          return index == 0;
-        })
+        });
-        this.tableData = data.filter((item,index)=>{
+        this.tableData = data.filter((item, index) => {
-          return index != 0
+          return index != 0;
-        })
+        });
-        this.loading = false
+        this.loading = false;
-      })
+      });
+    },
+    //   exportExcel () {
+    //        /* out-table关联导出的dom节点  */
+    //        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
+    //        /* get binary string as output */
+    //        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
+    //        try {
+    //            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '工单详情.xlsx')
+    //        } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
+    //        return wbout
+    //    },
+    // },
+    exportExcel() {
+      let time = new Date();
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1;
+      let day = time.getDate();
+      let name = year + '' + month + '' + day;
+      let xlsxParam = { raw: true }; 
+      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam);
+      var wbout = XLSX.write(wb, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+      });
+      try {
+        FileSaver.saveAs(
+          new Blob([wbout], { type: 'application/octet-stream' }),
+          name + '.xlsx'
+        );
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, wbout);
+      }
+      return wbout;
     }
   },
   created() {
@@ -174,7 +275,7 @@ export default {
       return;
     }
     this.id = id;
-    this.getCompleteOrder()
+    this.getCompleteOrder();
   }
 };
 </script>
@@ -196,4 +297,11 @@ export default {
   margin-right: 0;
   margin-bottom: 0;
 }
+.table_content {
+  display: flex;
+  justify-content: space-around;
+  span {
+    flex: 1;
+  }
+}
 </style>