<template>
|
<j-modal
|
ref='modal'
|
:width='600'
|
:visible='visible'
|
@ok='handleOk'
|
@cancel='handleCancel'
|
:footer='null'
|
:maskClosable='false'
|
:closable='false'
|
cancelText='关闭'>
|
<div class='container'>
|
<div class='panel-tool'>
|
<a class='panel-tool-close' @click='handleCancel'></a>
|
</div>
|
<div class='content'>
|
<a-spin :spinning='confirmLoading'>
|
<a-form-model ref='form' :label-col='labelCol' :wrapper-col='wrapperCol' :model='model'
|
:rules='validatorRules'>
|
<a-row class='form-row' :gutter='16'>
|
<!-- <a-col :lg='24'>
|
<a-form-model-item label='文件夹名称' prop='pid'>
|
<a-input v-model='model.pid' placeholder='请输入项目名称' />
|
</a-form-model-item>
|
</a-col>-->
|
<a-col :lg='24'>
|
<a-form-model-item label='上传路径' prop='pid'>
|
<a-tree-select
|
show-search
|
@select='treeSelect'
|
tree-node-filter-prop='title'
|
v-model='model.pid'
|
style='width: 100%'
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
:tree-data='treeData'
|
placeholder='请选择上传路径'
|
>
|
</a-tree-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :lg='24'>
|
<a-form-model-item label='上传路径' prop='pid'>
|
<j-upload :biz-path='getPath' list-type='picture' v-model='model.fileList'></j-upload>
|
</a-form-model-item>
|
</a-col>
|
|
</a-row>
|
</a-form-model>
|
</a-spin>
|
<div class='confirm-box'>
|
<a-button style='width: 100px' type='primary' :loading='loading' @click='handleOk'>
|
保存
|
</a-button>
|
</div>
|
|
</div>
|
|
</div>
|
|
</j-modal>
|
</template>
|
|
<script>
|
import { getAction, postAction } from '@api/manage'
|
|
export default {
|
name: 'UploadModal',
|
data() {
|
return {
|
title: '新建文件夹',
|
model: {
|
pid: undefined,
|
fileList: undefined
|
},
|
visible: false,
|
loading: false,
|
value: '',
|
treeData: [],
|
uploadPath: undefined,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
confirmLoading: false,
|
validatorRules: {
|
pid: [{ message: '上传路径不能为空', trigger: 'blur' }]
|
},
|
url: {
|
add: 'desk/file/add',
|
queryTreeList: 'desk/file/queryTreeList',
|
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload'
|
}
|
}
|
},
|
methods: {
|
add() {
|
this.treeData = []
|
this.loading = false
|
this.uploadPath = undefined
|
this.edit({
|
pid: undefined,
|
fileList: undefined
|
})
|
this.onLoadData()
|
},
|
edit(record) {
|
this.visible = true
|
//默认类型为市场型
|
this.model = Object.assign({}, record)
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
previewFile(file) {
|
|
}
|
,
|
handleOk() {
|
if (!this.model.pid) {
|
this.$message.error('请先选择上传路径！')
|
return false
|
}
|
if (!this.model.fileList) {
|
this.$message.error('最少上传一个文件')
|
return false
|
}
|
this.model.type = 1
|
console.info(this.model)
|
this.handleAdd(this.model)
|
|
},
|
handleAdd(param){
|
console.info(param)
|
this.loading = true
|
postAction(this.url.add, param)
|
.then((res) => {
|
this.confirmLoading = false
|
this.loading = false
|
if (res.success) {
|
this.close()
|
this.$message.success(res.message)
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
this.loading = false
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
|
|
onLoadData() {
|
getAction(this.url.queryTreeList).then((res) => {
|
if (res.success) {
|
this.treeData = res.result.filter(c => c.id != '1') // 去除常用文件夹
|
console.info(this.treeData)
|
}
|
})
|
|
},
|
treeSelect(value, node, extra) {
|
console.info(node)
|
this.uploadPath = node.$options.propsData.dataRef.path
|
}
|
|
},
|
computed: {
|
getPath() {
|
if (this.uploadPath) {
|
//选择了路径传到路径下
|
return 'desk/' + this.uploadPath
|
} else {
|
return 'desk/temp'
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
|
/deep/ .ant-modal .ant-modal-content .ant-modal-body {
|
padding: 0px;
|
}
|
|
.container {
|
width: 100%;
|
height: 600px;
|
position: relative;
|
background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 20%);
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
border-radius: 5px;
|
display: flex;
|
|
.panel-tool {
|
width: 100%;
|
height: 25px;
|
padding: 0px 10px;
|
position: absolute;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
|
a {
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
opacity: .6;
|
margin: 0 0 0 2px;
|
vertical-align: top;
|
}
|
|
a:hover {
|
opacity: 1;
|
}
|
|
.panel-tool-close {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat -16px 0px;
|
}
|
|
.panel-tool-max {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px -16px;
|
}
|
|
.panel-tool-min {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px 0px;
|
}
|
}
|
|
.content {
|
width: 100%;
|
flex-grow: 1;
|
margin: 25px 5px 5px 5px;
|
padding-top: 20px;
|
background: white;
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
overflow: auto;
|
|
.confirm-box {
|
width: 100%;
|
height: 40px;
|
margin-top: 20px;
|
text-align: center;
|
}
|
}
|
|
|
}
|
|
</style>
|
