<template>
|
<a-modal
|
:title="title"
|
:width="850"
|
:visible="visible"
|
:maskClosable="false"
|
:confirmLoading="confirmLoading"
|
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
cancelText="关闭"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
|
<!-- <a-row :gutter="24">
|
<a-col :lg="12">
|
<a-form-item
|
label="文件类型"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
>
|
<j-dict-select-tag
|
placeholder="请选择单位类型"
|
:triggerChange="true"
|
dictCode="common_upload_type"
|
v-decorator="['type', validatorRules.type]"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
|
</a-col>
|
</a-row> -->
|
|
<a-row :gutter="24">
|
<a-col :span="24">
|
<a-form-item
|
:labelCol="{span:3}"
|
:wrapperCol="{span:21}"
|
label="文件类型"
|
>
|
<a-radio-group
|
v-for="(item,index) in fileTypes"
|
:key="index"
|
button-style="solid"
|
v-decorator="['type', validatorRules.type ]"
|
:disabled="disableSubmit"
|
>
|
|
<a-radio-button :value="item.value">
|
{{item.text}}
|
</a-radio-button>
|
</a-radio-group>
|
|
</a-form-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :lg="24">
|
<a-form-item
|
label="文件上传"
|
:labelCol="{span:3}"
|
:wrapperCol="{span:21}"
|
>
|
<!-- <a-upload
|
name="file"
|
@change="handleChange"
|
:file-list="fileList"
|
:remove="handleRemove"
|
:before-upload="beforeUpload"
|
:multiple="false"
|
>
|
<a-button>
|
<a-icon type="upload" /> 选择文件 </a-button>
|
</a-upload> -->
|
<a-upload-dragger
|
name="file"
|
@change="handleChange"
|
:file-list="fileList"
|
:remove="handleRemove"
|
:before-upload="beforeUpload"
|
:multiple="false"
|
>
|
<p class="ant-upload-drag-icon">
|
<a-icon type="inbox" />
|
</p>
|
<p class="ant-upload-text">
|
点击上传或拖拽文件至该区域进行上传
|
</p>
|
<p class="ant-upload-hint">
|
支持单次或批量上传
|
</p>
|
</a-upload-dragger>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="24">
|
<a-form-item
|
:labelCol="{span:3}"
|
:wrapperCol="{span:21}"
|
label="描述"
|
>
|
<a-textarea
|
placeholder="请输入描述"
|
allow-clear
|
v-decorator="['description', validatorRules.description]"
|
/>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</a-spin>
|
|
<template slot="footer">
|
<a-button
|
:style="{marginRight: '8px'}"
|
@click="handleCancel"
|
>
|
关闭
|
</a-button>
|
<a-button
|
:disabled="confirmLoading"
|
:loading="confirmLoading"
|
@click="handleOk"
|
type="primary"
|
>确定</a-button>
|
<!-- icon="save" -->
|
</template>
|
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { postAction } from '@/api/manage'
|
import { duplicateCheck } from '@/api/api'
|
import { ajaxGetDictItems } from '@/api/api'
|
|
|
let validatorCodeTimer = null
|
|
export default {
|
name: 'UploadModel',
|
data() {
|
return {
|
title: '',
|
visible: false,
|
model: {},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 },
|
},
|
confirmLoading: false,
|
form: this.$form.createForm(this),
|
validatorRules: {
|
|
type: {
|
rules: [{ required: true, message: '请选择文件类型' }],
|
},
|
description: {
|
rules: [
|
{ min: 0, max: 100, message: '最长 100 个字符', trigger: 'blur' },
|
]
|
},
|
},
|
url: {
|
|
add: '/sys/upload/uploadFile',
|
// add: '/sys/upload/batchUploadFile',
|
},
|
disableSubmit: false,
|
fileList: [],
|
fileTypes: [],
|
}
|
},
|
|
methods: {
|
handleRemove(file) {
|
const index = this.fileList.indexOf(file)
|
const newFileList = this.fileList.slice()
|
newFileList.splice(index, 1)
|
this.fileList = newFileList
|
},
|
beforeUpload(file) {
|
this.fileList = [...this.fileList, file];
|
return false;
|
},
|
add() {
|
this.visible = true;
|
this.form.resetFields();
|
this.model = {};
|
this.fileList = [];
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
},
|
handleCancel() {
|
this.close();
|
},
|
handleOk() {
|
const that = this;
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true;
|
// let formData = Object.assign(this.model, values);
|
var description = '';
|
if (values.description) {
|
description = values.description;
|
}
|
that.handleUpload(values.type, description);
|
|
}
|
})
|
},
|
handleUpload(type, description) {
|
|
const { fileList } = this;
|
const formData = new FormData();
|
if (fileList.length == 0) {
|
this.$message.error('请上传文件！');
|
} else {
|
fileList.forEach((file) => {
|
formData.append('files[]', file);
|
})
|
formData.append('type', type);
|
formData.append('description', description);
|
postAction(this.url.add, formData)
|
.then((res) => {
|
if (res.success) {
|
this.$message.success(res.message);
|
this.$emit('ok')
|
} else {
|
this.$message.warning(res.message);
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false;
|
this.close();
|
})
|
}
|
|
},
|
|
handleChange(info) {
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
this.$message.success(`${info.file.name} file uploaded successfully`);
|
} else if (info.file.status === 'error') {
|
this.$message.error(`${info.file.name} file upload failed.`);
|
}
|
},
|
|
initFileTypes() {
|
ajaxGetDictItems("standard_type", null).then((res) => {
|
if (res.success) {
|
this.fileTypes = res.result;
|
}
|
})
|
},
|
},
|
created() {
|
this.initFileTypes();
|
|
},
|
}
|
</script>
|
|
<style scoped>
|
.ant-btn {
|
padding: 0 10px;
|
margin-left: 3px;
|
}
|
|
.ant-form-item-control {
|
line-height: 0px;
|
}
|
|
/** 主表单行间距 */
|
.ant-form .ant-form-item {
|
margin-bottom: 10px;
|
}
|
|
/** Tab页面行间距 */
|
.ant-tabs-content .ant-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
