<template>
|
<el-dialog
|
:title="type === 'add' ? '新增资料' : type === 'edit' ? '编辑资料' : '资料详情'"
|
:visible.sync="dialogVisible"
|
width="40%"
|
@close="handleClose"
|
>
|
<el-form ref="uploadForm" :model="form" :rules="rules" label-width="120px">
|
<el-form-item label="镇(街道)" prop="street">
|
<el-select :disabled="type === 'detail'" v-model="form.street" placeholder="请选择" @change="handleStreetChange">
|
<el-option v-for="item in streetOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="资料名称" prop="name">
|
<el-input v-model="form.name" :disabled="type === 'detail'" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="资料文件" prop="file">
|
<el-upload
|
:disabled="type === 'detail'"
|
ref="upload"
|
class="upload-demo"
|
drag
|
:action="baseUrl + '/common/upload'"
|
:headers="{
|
'Authorization': 'Bearer ' + token
|
}"
|
:file-list="fileList"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:on-change="handleFileChange"
|
:limit="1"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">
|
支持扩展名：.doc .docx .pdf .jpg .png .xlsx .xls
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button v-if="type !== 'detail'" type="primary" @click="submitUpload">确 定</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import { add, update } from "@/api/storing-data";
|
|
export default {
|
name: 'UploadDialog',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
type: {
|
type: String,
|
default: 'add',
|
},
|
streetOptions: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
token: getToken(),
|
dialogVisible: false,
|
fileList: [],
|
form: {
|
street: '',
|
name: '',
|
file: null,
|
attachName: '',
|
attachUrl: ''
|
},
|
baseUrl: process.env.VUE_APP_BASE_API,
|
rules: {
|
street: [
|
{ required: true, message: '请选择镇(街道)', trigger: 'change' }
|
],
|
name: [
|
{ required: true, message: '请输入资料名称', trigger: 'blur' }
|
],
|
file: [
|
{ required: true, message: '请选择上传文件', trigger: 'change' }
|
]
|
}
|
}
|
},
|
watch: {
|
visible(val) {
|
this.dialogVisible = val;
|
},
|
dialogVisible(val) {
|
this.$emit('update:visible', val);
|
}
|
},
|
methods: {
|
handleClose() {
|
this.form = {
|
street: '',
|
name: '',
|
file: null,
|
attachName: '',
|
attachUrl: ''
|
};
|
this.$refs.uploadForm && this.$refs.uploadForm.resetFields();
|
// 清空文件列表
|
this.$refs.upload && this.$refs.upload.clearFiles();
|
},
|
handleFileChange(file) {
|
this.form.file = file.raw;
|
this.form.attachName = file.name;
|
// 手动触发文件字段验证
|
this.$refs.uploadForm.validateField('file');
|
},
|
// 处理上传成功
|
handleUploadSuccess(response, file) {
|
if (response.code === 200) {
|
this.form.attachUrl = response.url;
|
this.$message.success('文件上传成功');
|
} else {
|
this.$message.error(response.msg || '文件上传失败');
|
}
|
},
|
// 处理上传失败
|
handleUploadError(err) {
|
this.$message.error('文件上传失败');
|
},
|
submitUpload() {
|
this.$refs.uploadForm.validate(valid => {
|
if (!valid) {
|
return;
|
}
|
if (!this.form.attachUrl) {
|
this.$message.error('请先上传文件');
|
return;
|
}
|
// 构建提交数据
|
const submitData = {
|
street: this.form.street,
|
name: this.form.name,
|
attachName: this.form.attachName,
|
attachUrl: this.form.attachUrl
|
};
|
|
if (this.type === 'add') {
|
add(submitData).then(res => {
|
this.$emit('success', res.data);
|
this.handleClose();
|
});
|
} else {
|
update(submitData).then(res => {
|
this.$emit('success', res.data);
|
this.handleClose();
|
});
|
}
|
});
|
},
|
handleStreetChange(value) {
|
// 处理镇(街道)选择变化后的逻辑
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.el-upload {
|
width: 100%;
|
}
|
.el-upload-dragger {
|
width: 100%;
|
}
|
</style>
|
