文档列表，文档类型，文件上传，文件下载

src/api/doc.js

+import request from '@/utils/request'
+
+// 万科后台_文件分页操作
+export function getFileList(params) {
+  return request({
+    url: '/vankeFile/list',
+    method: 'get',
+    params
+  })
+}
+
+// 万科后台_文件新增操作
+export function addFile(data) {
+  return request({
+    url: '/vankeFile/insertFile',
+    method: 'post',
+    data
+  })
+}
+
+// 万科后台_根据id修改文件
+export function updateFile(data) {
+  return request({
+    url: '/vankeFile/updateFile',
+    method: 'post',
+    data
+  })
+}
+
+// 万科后台_文件类型分页操作
+export function getTypeList(params) {
+  return request({
+    url: '/vankeFileType/list',
+    method: 'get',
+    params
+  })
+}
+
+// 万科后台_文件类型新增操作
+export function addFileType(data) {
+  return request({
+    url: '/vankeFileType/insertFileType',
+    method: 'post',
+    data
+  })
+}
+
+// 万科后台_根据id修改文件类型对象
+export function updateFileType(data) {
+  return request({
+    url: '/vankeFileType/updateById',
+    method: 'post',
+    data
+  })
+}
+
+// 文件下载
+export function downloadFile(params) {
+  return request({
+    url: '/file/download',
+    method: 'post',
+    params,
+    responseType: 'blob'
+  })
+}
+
+// 文件删除
+export function deleteFile(params) {
+  return request({
+    url: '/file/deleteFile',
+    method: 'post',
+    params
+  })
+}
+
+// 文件上传
+
+export function uploadFile(formData) {
+  return request({
+    url: '/file/upload',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data' //值得注意的是，这个地方一定要把请求头更改一下
+    }
+  })
+}

src/store/modules/permission.js

@@ -81,21 +81,21 @@ const permission = {
         const { username } = data
         const accessedRouters = asyncRouterMap.filter(v => {
           // admin帐号直接返回所有菜单
-          if (username === 'admin') return true
-          // if (hasPermission(menus, v)) {
-          //   if (v.children && v.children.length > 0) {
-          //     v.children = v.children.filter(child => {
-          //       if (hasPermission(menus, child)) {
-          //         return child
-          //       }
-          //       return false
-          //     })
-          //     return v
-          //   } else {
-          //     return v
-          //   }
-          // }
-          // return false
+          // if (username === 'admin') return true
+          if (hasPermission(menus, v)) {
+            if (v.children && v.children.length > 0) {
+              v.children = v.children.filter(child => {
+                if (hasPermission(menus, child)) {
+                  return child
+                }
+                return false
+              })
+              return v
+            } else {
+              return v
+            }
+          }
+          return false
         })
         //对菜单进行排序
         sortRouters(accessedRouters)

src/utils/request.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   // baseURL: process.env.BASE_API,
   withCredentials: true,
-  baseURL: 'http://192.168.31.127:8201/mall-admin',
+  baseURL: 'http://192.168.31.127:8401/mall-admin',
   // baseURL: 'http://hhg.api.jsonpro.cn:8201/mall-admin',
   timeout: 60000 // 请求超时时间
 })
@@ -31,6 +31,11 @@ service.interceptors.response.use(
     /**
     * code为非200是抛错 可结合自己业务进行修改
     */
+      // 下载文件另外处理
+    const headers = response.headers
+    if (headers['content-type'] == 'application/octet-stream') {
+      return response.data
+    }
     const res = response.data
     if (res.code !== 200) {
       Message({

src/views/doc/DocList.vue

@@ -44,22 +44,22 @@
           </el-table-column>
           <el-table-column label="文档类型"
                            align="center">
-            <template slot-scope="scope">{{scope.row.goodsNo}}</template>
+            <template slot-scope="scope">{{scope.row.fileTypeName}}</template>
           </el-table-column>
           <el-table-column label="创建者"
                            align="center">
-            <template slot-scope="scope">{{scope.row.goodsCategoryName}}</template>
+            <template slot-scope="scope">{{scope.row.adminName}}</template>
           </el-table-column>
           <el-table-column label="发布时间"
                            align="center">
-            <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
+            <template slot-scope="scope">{{scope.row.createtime | formatTime}}</template>
           </el-table-column>
           <el-table-column label="操作"
                            align="center">
             <template slot-scope="scope">
               <el-button size="mini"
                          type="primary"
-                         @click="handleDown(scope.row.id)">下载
+                         @click="handleDown(scope.row.fileName)">下载
               </el-button>
               <el-button size="mini"
                          type="danger"
@@ -83,28 +83,24 @@
       </div>
     </el-card>
     <!--    弹窗-->
-    <import-goods-modal ref="importGoods" @ok="getList"></import-goods-modal>
+    <import-file-modal ref="importFile" @ok="getList"></import-file-modal>
   </div>
 </template>
 <script>
 import moment from 'moment/moment'
-import { getGoodsList, getGoodsCategoryList, getStockRooms, editGoods } from '@/api/inventory'
-import { getSuppliersList } from '@/api/supplier'
-import ImportGoodsModal from './modules/importGoodsModal'
+import { getFileList, downloadFile, updateFile } from '@/api/doc'
+import ImportFileModal from './modules/importFileModal'
 // 列表查询参数默认值
 const defaultListQuery = {
   pageNum: 1,
   pageSize: 10,
-  name: '',
-  goodsCategoryId: '',
-  supplierId: '',
-  stockRoomId: ''
+  name: ''
 }
 
 export default {
   name: 'DocList',
   components: {
-    ImportGoodsModal
+    ImportFileModal
   },
   data() {
     return {
@@ -152,7 +148,7 @@ export default {
       this.listLoading = true
       //请求数据
       console.log('listQuery', this.listQuery)
-      getGoodsList(this.listQuery).then(res => {
+      getFileList(this.listQuery).then(res => {
         this.listLoading = false
         this.list = res.data.list
         this.total = res.data.total
@@ -160,25 +156,50 @@ export default {
         this.listLoading = false
       })
     },
-    // 新增
-    handleAdd() {
-      this.$refs.addGoods.add()
-    },
-    // 导入
+    // 上传
     handleImport() {
-      this.$refs.importGoods.add()
+      this.$refs.importFile.add()
     },
-    handleDown(){
-
+    handleDown(fileName){
+      downloadFile({fileName:fileName }).then(res=>{
+        console.log('res',res)
+        var blob = new Blob([res],{type: "application/octet-stream"});
+        if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlob方法返回bool值
+          navigator.msSaveBlob(blob, fileName);//本地保存
+        } else {
+          var link = document.createElement('a');//a标签下载
+          link.href = window.URL.createObjectURL(blob);
+          link.download = fileName;
+          link.click();
+          window.URL.revokeObjectURL(link.href);
+        }
+        // const content = res
+        // console.log('res')
+        // const blob = new Blob([content])
+        // const fileName = '导出信息.xlsx'
+        // if ('download' in document.createElement('a')) { // 非IE下载
+        //   const elink = document.createElement('a')
+        //   elink.download = fileName
+        //   elink.style.display = 'none'
+        //   elink.href = URL.createObjectURL(blob)
+        //   document.body.appendChild(elink)
+        //   elink.click()
+        //   URL.revokeObjectURL(elink.href) // 释放URL 对象
+        //   document.body.removeChild(elink)
+        // } else { // IE10+下载
+        //   navigator.msSaveBlob(blob, fileName)
+        // }
+      })
     },
+
     // 删除
     handleDelete(id){
-      this.$confirm('是否删除该物品?', '提示', {
+      this.$confirm('是否删除该文档?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        editGoods({id: id,deleteStatus: 0 }).then(res=>{
+        updateFile({id: id,deleteStatus: 0 }).then(res=>{
           this.getList()
         })
       }).catch(() => {

src/views/doc/DocType.vue

@@ -46,12 +46,12 @@
       </div>
     </el-card>
     <!--    弹窗-->
-    <add-type ref="addCategory" @ok="getList"></add-type>
+    <add-type ref="addType" @ok="getList"></add-type>
   </div>
 </template>
 <script>
 import moment from 'moment'
-import { getGoodsCategoryList, editGoodsCategory } from '@/api/inventory'
+import { getTypeList, updateFileType } from '@/api/doc'
 import AddType from './modules/addType'
 // 列表查询参数默认值
 const defaultListQuery = {
@@ -108,7 +108,7 @@ export default {
       this.listLoading = true
       //请求数据
       console.log('listQuery', this.listQuery)
-      getGoodsCategoryList(this.listQuery).then(res => {
+      getTypeList(this.listQuery).then(res => {
         this.listLoading = false
         this.list = res.data.list
         this.total = res.data.total
@@ -118,7 +118,7 @@ export default {
     },
     // 添加
     handleAdd(){
-      this.$refs.addCategory.add()
+      this.$refs.addType.add()
     },
     // 删除
     handleDelete(id){
@@ -127,7 +127,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        editGoodsCategory({id: id,deleteStatus: 0 }).then(res=>{
+        updateFileType({id: id,deleteStatus: 0 }).then(res=>{
           this.getList()
         })
       }).catch(() => {

src/views/doc/modules/addType.vue

@@ -26,7 +26,7 @@
   </el-dialog>
 </template>
 <script>
-import { addGoodsCategory } from '@/api/inventory'
+import { addFileType } from '@/api/doc'
 // 移动属性
 export default {
   name: 'addType',
@@ -73,7 +73,7 @@ export default {
       this.$refs.attributeForm.validate((valid) => {
         if (valid) {
           // 验证通过
-          addGoodsCategory(this.model).then(res => {
+          addFileType(this.model).then(res => {
             this.loading = false
             this.visible = false
             this.$emit('ok')

src/views/doc/modules/importGoodsModal.vue → src/views/doc/modules/importFileModal.vue

@@ -2,7 +2,7 @@
   <el-dialog :visible.sync="visible"
              :title="title"
              center
-             width="500px"
+             width="600px"
              :close-on-click-modal="false">
     <div class="scroll-container no-bottom"
          ref="scrollContainer">
@@ -13,26 +13,27 @@
           <el-input v-model="modal.name" class="input-width"
                     placeholder="请输入文档名称"></el-input>
         </el-form-item>
-        <el-form-item  prop="type"
+        <el-form-item prop="typeId"
                       label="文档类型"
-                      :rules="[{required: true,trigger: 'blur',message: '请选择文档类型'}]">
-          <el-select v-model="modal.type" class="input-width"
+                      :rules="[{required: true,trigger: 'change',message: '请选择文档类型'}]">
+          <el-select v-model="modal.typeId" class="input-width"
                      placeholder="请选择文档类型">
-          <el-option v-for="item in categoryOptions"
+            <el-option v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item  prop="doc"
+        <el-form-item prop="fileName"
                       label="文档"
-                      :rules="[{required: true,trigger: 'blur',message: '请选择文档类型'}]">
+                      :rules="[{required: true,trigger: 'blur',message: '请选择文档'}]">
           <el-upload
-            class="upload-demo"
-            :action="actionURL"
-            :limit="1"
-            :on-success="afterSuccess"
-            name='file'>
+            ref="upload"
+            action="string"
+            :on-change="handleChange"
+            :on-remove="handleRemove"
+            :http-request="UploadImage"
+            :file-list="fileList">
             <el-button size="small" type="primary">选择文档</el-button>
             <div slot="tip" class="el-upload__tip">只能上传不超过20MB的文件</div>
           </el-upload>
@@ -51,42 +52,45 @@
   </el-dialog>
 </template>
 <script>
-import { getGoodsCategoryList, addGoodList, getStockRooms, getGoodsList } from '@/api/inventory'
-import XLSX from 'xlsx'
-
+import { addFile, getTypeList, uploadFile, deleteFile } from '@/api/doc'
 
 // 添加编辑属性
 export default {
-  name: 'importGoodsModal',
+  name: 'importFileModal',
   data() {
     return {
-      actionURL:'',
+      actionURL: '',
       files: null, //文件列表
       visible: false,
       title: null,
       loading: false,
       modal: {},
-      categoryOptions:[]
+      typeOptions: [],
+      fileList: [],
+      fileName: null,
+      filePath: null
     }
   },
   methods: {
-    // 物品类别
-    getGoodsCategoryList() {
-      getGoodsCategoryList().then(res => {
-        this.categoryOptions = res.data.list
+    getTypeList() {
+      getTypeList().then(res => {
+        this.typeOptions = res.data.list
       })
     },
     init() {
-     this.modal={
+      this.modal = {
         name: '',
-          type: '',
-          doc: ''
+        typeId: '',
+        fileName: '',
+        filePath: ''
       }
-      this.getGoodsCategoryList()
+      this.fileList = []
+      this.getTypeList()
       this.$nextTick(() => {
+        this.$refs.modal.clearValidate()
         this.$refs.scrollContainer.scrollTop = 0
-      })
 
+      })
     },
     add() {
       this.init()
@@ -96,11 +100,42 @@ export default {
     close() {
       this.visible = false
     },
+    handleRemove(file, fileList) {
+      console.log('删除', file, fileList)
+
+    },
+    handleChange(file, fileList) {
+      if (fileList.length > 0) {
+        this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
+      }
+    },
+    // 文件提交
+    UploadImage(param) {
+      console.log('文件上传', param)
+      var file = param.file
+      // const isLt2M = file.size / 1024 / 1024 < 20;
+      // if (!isLt2M) {
+      //   this.$message.error('上传文件大小不能超过 20MB!');
+      //   return
+      // }
+      let fd = new FormData()
+      fd.append('file', file) // 要提交给后台的文件
+      uploadFile(fd).then(res => {  // uploadFile 是封装的接口
+        if (this.modal.fileName) {
+          deleteFile({ fileName: this.modal.fileName }).then(res => {
+            console.log('删除')
+          })
+        }
+        this.modal.fileName = res.data.fileName
+        this.modal.filePath = res.data.filePath
+        console.log('this.modal', this.modal)
 
+      })
+    },
     submit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          addGoodList({ vankeGoodsList: this.modal.tableData }).then(res => {
+          addFile(this.modal).then(res => {
             this.$emit('ok')
             this.visible = false
           })
@@ -108,9 +143,6 @@ export default {
           this.$message.warning('请检查必填项是否输入')
         }
       })
-    },
-    afterSuccess(response,file,fileList) {
-      console.log(response) //返回的是上传之后后台返回的结果
     }
 
   }