Skip to content

F
filemanage
Commit 9dccdeeb by wangyalan-git
Options

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

parent 8699b5ea
Showing with 223 additions and 78 deletions
src/api/doc.js 0 → 100644
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) //返回的是上传之后后台返回的结果
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment