完成导入CFCT食物数据

src/views/food/index.vue

@@ -1,28 +1,40 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" v-loading="uploadLoading">
     <div class="filter-container">
-      <el-input
-        v-model="listQuery.query"
-        placeholder="请输入检索词"
-        style="width: 60%;"
-        class="filter-item"
-        @keyup.enter.native="fetchData()"
-      />
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="fetchData">
-        检索
-      </el-button>
-      <el-select v-model="listQuery.orderBy" style="width: 160px;margin-left: 10px;" class="filter-item" @change="fetchData">
-        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
-      </el-select>
-      <el-button
-        class="filter-item"
-        style="margin: 0 10px 20px 0; float: right;"
-        type="success"
-        icon="el-icon-circle-plus-outline"
-        @click="handleCreate"
-      >
-        新建
-      </el-button>
+      <el-row>
+        <el-input
+          v-model="listQuery.query"
+          placeholder="请输入检索词"
+          style="width: 60%;"
+          class="filter-item"
+          @keyup.enter.native="fetchData()"
+        />
+        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="fetchData">
+          检索
+        </el-button>
+        <el-select v-model="listQuery.orderBy" style="width: 160px;margin-left: 10px;" class="filter-item" @change="fetchData">
+          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
+        </el-select>
+      </el-row>
+      <el-row>
+        <el-button
+          class="filter-item"
+          style="margin: 0 10px 20px 0; float: right;"
+          type="success"
+          icon="el-icon-circle-plus-outline"
+          @click="handleCreate"
+        >
+          新建
+        </el-button>
+        <el-button
+          class="filter-item"
+          style="margin: 0 10px 20px 0; float: right;"
+          type="primary"
+          @click="handleImport"
+        >
+          食物导入
+        </el-button>
+      </el-row>
     </div>
 
     <el-table
@@ -80,6 +92,11 @@
           <span>{{ row.gl ? row.gl : row.glCalcd }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="数据来源" align="center" width="100px">
+        <template slot-scope="{row}">
+          <span>{{ row.dataSource }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" width="180px" align="center">
         <template slot-scope="{row}">
           <span>{{ row.createTime }}</span>
@@ -118,12 +135,38 @@
       :limit.sync="listQuery.pageSize"
       @pagination="fetchData"
     />
+
+    <el-dialog title="食物导入" width="40%" :visible.sync="dialogFormVisible">
+      <el-upload
+        ref="upload"
+        action=""
+        :auto-upload="false"
+        :multiple="false"
+        drag
+        :limit="1"
+        :show-file-list="true"
+        :on-change="fileChanged"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      </el-upload>
+      <div slot="footer" >
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="importFoods">
+          开始导入
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Pagination from '@/components/Pagination'
 import { getList, remove } from '@/api/food'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
 
 const foodTypes = { 0: '主材', 1: '辅材' }
 
@@ -149,7 +192,9 @@ export default {
         orderBy: 0,
         pageNum: 1,
         pageSize: 20
-      }
+      },
+      uploadFile: null,
+      uploadLoading: false
     }
   },
   created() {
@@ -186,6 +231,32 @@ export default {
       }).catch(res => {
         this.$message.error(res.data.message)
       })
+    },
+    handleImport() {
+      if (this.$refs.upload) {
+        this.$refs.upload.clearFiles()
+      }
+      this.uploadFile = null
+      this.dialogFormVisible = true
+    },
+    importFoods() {
+      const reqConfig = { headers: { 'Authorization': getToken(), 'Content-Type':'multipart/form-data' },
+        timeout: 1000 * 60 * 3 }
+      const importUrl = process.env.VUE_APP_BASE_API + '/api/foods/import'
+      this.uploadLoading = true
+      this.dialogFormVisible = false
+      axios.post(importUrl, this.uploadFile, reqConfig).then(res => {
+        this.$notify.success('导入成功')
+        this.uploadLoading = false
+      }).catch(res => {
+        this.$message.error(res.response.data.message)
+        this.uploadLoading = false
+      })
+    },
+    fileChanged(file, fileList) {
+      let fromData = new FormData()
+      fromData.append('file', file.raw)
+      this.uploadFile = fromData
     }
   }
 }