<template>
|
<a-modal :title="title" :width="1600" :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 :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-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>
|
</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-row :gutter="24">
|
<a-col :span="24">
|
<a-form-item :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }" label="判定结果">
|
<a-switch checked-children="正常" un-checked-children="异常" :checked="checked" @click="changeStatus" />
|
</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>
|
</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'
|
|
export default {
|
name: 'UnitModel',
|
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/batchUploadFile',
|
},
|
disableSubmit: false,
|
fileList: [],
|
fileTypes: [],
|
checked:true
|
}
|
},
|
|
methods: {
|
changeStatus(status) {
|
this.checked = status
|
},
|
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', res)
|
} 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("common_upload_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>
|
