完成导出功能

package-lock.json

@@ -4563,6 +4563,11 @@
       "integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz",
@@ -11799,6 +11804,14 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.8.tgz?cache=0&sync_timestamp=1628666727543&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.8.tgz",

package.json

@@ -14,6 +14,7 @@
     "element-ui": "^2.15.6",
     "moment": "^2.29.1",
     "vue": "^2.6.11",
+    "vue-json-excel": "^0.3.0",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

src/main.js

@@ -5,6 +5,9 @@ import './assets/style/initial.css'
 import App from './App.vue'
 import router from './router'
 import 'default-passive-events'
+// 表格导出
+import JsonExcel from 'vue-json-excel'
+Vue.component('downloadExcel', JsonExcel)
 Vue.config.productionTip = false
 
 // mixin的封装

src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 // export const baseURL = '666初始地址'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8006',
-  baseURL: '',
+  baseURL: 'http://192.168.0.135:8006',
+  // baseURL: '',
   timeout: 5000
 })
 

src/views/collect/collect0.vue

@@ -39,8 +39,16 @@
               placeholder="请输入"
               style="width: 217px"
             ></el-input>
-            <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
-            <el-button v-if="0">导出</el-button>
+            <el-button style="margin: 0 20px 0" @click="inquire">查询</el-button>
+<!-- 导出 -->
+<download-excel
+      class = "export-excel-wrapper"
+      :data = "json_data"
+      :fields = "json_fields"
+      name = "征集品信息.xls">
+      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+      <el-button>导出</el-button>
+</download-excel>
             <div class="pattern">
               <div :class="{ active: change === 0 }" @click="pattern(0)">
                 <i class="el-icon-menu"></i>
@@ -122,6 +130,35 @@ export default {
   components: { TabList },
   data () {
     return {
+      // 导出表格的数据
+      json_fields: {
+        藏品名称: 'name', // 常规字段
+        总登记号: 'registerNum', // 支持嵌套属性
+        编号类型: 'numTypeId',
+        藏品编号: 'num',
+        原名: 'primitiveName',
+        年代: 'age',
+        文物类别: 'goodsTypeName',
+        文物质地: 'texture',
+        数量类型: 'amountType',
+        具体数量: 'amount',
+        通长: 'length',
+        通宽: 'width',
+        通高: 'height',
+        具体质量: 'quality',
+        完残程度: 'integrity',
+        保存状态: 'repair',
+        入藏时间范围: 'checkInScope'
+      },
+      json_data: [],
+      json_meta: [
+        [
+          {
+            ' key ': ' charset ',
+            ' value ': ' utf- 8 '
+          }
+        ]
+      ],
       // 分页器数据总条数
       total: 0,
       // 服务器前缀地址
@@ -206,11 +243,21 @@ export default {
     this.baseURL = axios.defaults.baseURL
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
     // 调用获取藏品总账列表
     this.getHolding3List(this.mydata)
     // 显示图还是表格
     this.tabInd = this.INtabInd
+    // 进页面拿到所有数据，给导出
+    const res = await getHolding3List({ pageNum: 1, pageSize: 99999 })
+    this.json_data = res.data.list
+    this.json_data.forEach(v => {
+      v.numTypeId = this.mycategory(v.numTypeId)
+      if (v.amountType === 0) v.amountType = '单件'
+      else v.amountType = '一套多件'
+      v.integrity = this.spoil(v.integrity)
+      v.repair = this.mySave(v.repair)
+    })
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前

src/views/collect/collect0_look.vue

@@ -40,7 +40,7 @@
               <div><span>文物质地：</span>{{ myObj.texture }}</div>
             </div>
             <div class="row">
-              <div><span>数量类型：</span>{{ myObj.amountType === 0 ? "单件" : "一套多件" }}</div>
+              <div><span>数量类型：</span>{{ myObj.amountType === '0' ? "单件" : "一套多件" }}</div>
               <div><span>具体数量：</span>{{ myObj.amount }}</div>
             </div>
             <div class="row">

src/views/holding/holding3.vue

@@ -39,8 +39,16 @@
               placeholder="请输入"
               style="width: 217px"
             ></el-input>
-            <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
-            <el-button v-if="0">导出</el-button>
+            <el-button style="margin: 0 20px 0" @click="inquire">查询</el-button>
+<!-- 导出 -->
+<download-excel
+      class = "export-excel-wrapper"
+      :data = "json_data"
+      :fields = "json_fields"
+      name = "藏品信息.xls">
+      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+      <el-button>导出</el-button>
+</download-excel>
             <div class="pattern">
               <div :class="{ active: change === 0 }" @click="pattern(0)">
                 <i class="el-icon-menu"></i>
@@ -122,6 +130,36 @@ export default {
   components: { TabList },
   data () {
     return {
+      // 导出表格的数据
+      json_fields: {
+        藏品名称: 'name', // 常规字段
+        总登记号: 'registerNum', // 支持嵌套属性
+        编号类型: 'numTypeId',
+        藏品编号: 'num',
+        原名: 'primitiveName',
+        年代: 'age',
+        文物类别: 'goodsTypeName',
+        文物质地: 'texture',
+        数量类型: 'amountType',
+        具体数量: 'amount',
+        通长: 'length',
+        通宽: 'width',
+        通高: 'height',
+        具体质量: 'quality',
+        完残程度: 'integrity',
+        保存状态: 'repair',
+        入藏时间范围: 'checkInScope'
+      },
+      json_data: [],
+      json_meta: [
+        [
+          {
+            ' key ': ' charset ',
+            ' value ': ' utf- 8 '
+          }
+        ]
+      ],
+
       // 分页器数据总条数
       total: 0,
       // 服务器前缀地址
@@ -206,11 +244,21 @@ export default {
     this.baseURL = axios.defaults.baseURL
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
     // 调用获取藏品总账列表
     this.getHolding3List(this.mydata)
     // 显示图还是表格
     this.tabInd = this.INtabInd
+    // 进页面拿到所有数据，给导出
+    const res = await getHolding3List({ pageNum: 1, pageSize: 99999 })
+    this.json_data = res.data.list
+    this.json_data.forEach(v => {
+      v.numTypeId = this.mycategory(v.numTypeId)
+      if (v.amountType === 0) v.amountType = '单件'
+      else v.amountType = '一套多件'
+      v.integrity = this.spoil(v.integrity)
+      v.repair = this.mySave(v.repair)
+    })
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前