<template>
|
<zt-dialog ref="dialog" @confirm="formSubmit">
|
<el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
|
|
<zt-form-item label="图片名称" prop="name" rules="required">
|
<el-input v-model="dataForm.name"></el-input>
|
</zt-form-item>
|
<zt-form-item label="产品类型" prop="productType" rules="required">
|
<zt-dict v-model="dataForm.productType" dict="product"></zt-dict>
|
</zt-form-item>
|
<zt-form-item label="是否默认" prop="isDefault" rules="required">
|
<zt-dict v-model="dataForm.isDefault" dict="is_or_not"></zt-dict>
|
</zt-form-item>
|
<zt-form-item label="检索关键字" prop="contentType">
|
<el-input v-model="dataForm.contentType"></el-input>
|
</zt-form-item>
|
<div class="el-flex img-src" style="height: 20px">
|
<el-form-item class="marginTopAndMarginBottom" style="width: 100%">
|
<!--<config-uploader :lineHeight="true" busi-type="sys_picture" model-name="dataForm" :dataForm="dataForm"
|
v-model="dataForm.files"/>-->
|
<el-upload :limit="1" :http-request="httpRequest" :before-upload="beforeUpload" :on-exceed="handleExceed">
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
</el-upload>
|
<el-image v-if="dataForm.id" :src="url+dataForm.id" style="height: 50px;width: 50px"></el-image>
|
</el-form-item>
|
</div>
|
</el-form>
|
</zt-dialog>
|
</template>
|
|
<script>
|
import Cookies from "js-cookie";
|
|
export default {
|
data() {
|
return {
|
url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`,
|
fileList: [],
|
dataForm: {
|
id: '',
|
isDefault: '',
|
name: '',
|
contentType: '',
|
productType: '',
|
remark: ''
|
},
|
readonly: {
|
type: Boolean,
|
default: false
|
},
|
}
|
},
|
methods: {
|
httpRequest(option) {
|
this.fileList.length = 0
|
this.fileList.push(option)
|
},
|
// 上传前处理
|
beforeUpload(file) {
|
let fileSize = file.size
|
const FIVE_M = 5 * 1024 * 1024;
|
//大于5M，不允许上传
|
if (fileSize > FIVE_M) {
|
this.$message.error("最大上传5M")
|
return false
|
}
|
if (fileSize = 0) {
|
this.$message.error("未上传图片")
|
return false
|
}
|
},
|
// 文件数量过多时提醒
|
handleExceed() {
|
this.$message({type: 'error', message: '最多支持1个附件上传'})
|
},
|
// 获取信息
|
async getInfo() {
|
let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
|
this.dataForm = {
|
...this.dataForm,
|
...res.data
|
}
|
console.log(this.dataForm, 'async getInfo()')
|
},
|
// 表单提交
|
async formSubmit() {
|
console.log(this.dataForm, 'async formSubmit()')
|
// 使用form表单的数据格式
|
const params = new FormData()
|
// 将上传文件数组依次添加到参数paramsData中
|
this.fileList.forEach((x) => {
|
params.append('file', x.file)
|
});
|
// 将输入表单数据添加到params表单中
|
if (!this.dataForm.id){
|
this.dataForm.id = 0
|
}
|
params.append('id', this.dataForm.id)
|
params.append('isDefault', this.dataForm.isDefault)
|
params.append('name', this.dataForm.name)
|
params.append('contentType', this.dataForm.contentType)
|
params.append('productType', this.dataForm.productType)
|
params.append('remark', this.dataForm.remark)
|
console.log(params, 'async formSubmit()')
|
let res = await this.$http.post('/sysPictureBase/save', params)
|
if (res.success) {
|
await this.$tip.success()
|
this.$refs.dialog.close()
|
this.$emit('refreshDataList')
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.img-sc > .el-form-item > .el-form-item__content {
|
width: 100%;
|
}
|
|
.marginTopAndMarginBottom {
|
margin-top: 10px !important;
|
margin-bottom: 0 !important;
|
}
|
</style>
|
