|
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-button size="small" type="primary" icon="el-icon-s-order" @click="$refs['formList'].show()">表单中心选择</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
<el-button size="small" type="primary" icon="el-icon-plus">表单新增</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
<el-upload
|
|
|
|
|
|
class="upload"
|
|
|
|
|
|
ref="upload"
|
|
|
|
|
|
:action="action"
|
|
|
|
|
|
:file-list="fileList"
|
|
|
|
|
|
:auto-upload="false"
|
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
|
:on-success="onSuccess"
|
|
|
|
|
|
:on-remove="onRemove"
|
|
|
|
|
|
:on-error="onError">
|
|
|
|
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
|
|
|
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="$refs['upload'].submit()">上传到服务器</el-button>
|
|
|
|
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
|
|
|
|
|
|
<formList ref="formList" @selected="selectedHandler"></formList>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import formList from './formList.vue';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
formList
|
|
|
|
|
|
},
|
|
|
|
|
|
props: {
|
|
|
|
|
|
form: Object,
|
|
|
|
|
|
fieldInfo: Object,
|
|
|
|
|
|
file: Object,
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
|
|
|
fileList: []
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
selectedHandler (selections) {
|
|
|
|
|
|
this.fileList.push(...selections)
|
|
|
|
|
|
this.$emit('update', this.fileList)
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
beforeUpload (file) {
|
|
|
|
|
|
if (file.size / 1000 > 500) {
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
message: "上传图片大小超过500kb！",
|
|
|
|
|
|
});
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onSuccess (response, file, fileList) {
|
|
|
|
|
|
this.fileList = fileList;
|
|
|
|
|
|
this.$emit('update', this.fileList)
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onRemove (file, fileList) {
|
|
|
|
|
|
this.fileList = fileList;
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onError (err, file, fileList) {
|
|
|
|
|
|
this.fileList = fileList;
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
message: err,
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
'form.id_material_fujian_uploads_material_id_relation': {
|
|
|
|
|
|
handler (newVal) {
|
|
|
|
|
|
this.fileList = newVal
|
|
|
|
|
|
},
|
|
|
|
|
|
deep: true
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.upload {
|
|
|
|
|
|
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
