|  |  |  | 
|---|
|  |  |  | <zt-form-item label="图片名称" prop="name" rules="required"> | 
|---|
|  |  |  | <el-input v-model="dataForm.name"></el-input> | 
|---|
|  |  |  | </zt-form-item> | 
|---|
|  |  |  | <zt-form-item label="检索关键字" prop="contentType" > | 
|---|
|  |  |  | <zt-form-item label="检索关键字" prop="contentType"> | 
|---|
|  |  |  | <el-input v-model="dataForm.contentType"></el-input> | 
|---|
|  |  |  | </zt-form-item> | 
|---|
|  |  |  | <zt-form-item label="系统标识" prop="systemMark" rules="required"> | 
|---|
|  |  |  | <zt-form-item label="系统标识" prop="systemMark"> | 
|---|
|  |  |  | <zt-dict v-model="dataForm.systemMark" dict="product"></zt-dict> | 
|---|
|  |  |  | </zt-form-item> | 
|---|
|  |  |  | <zt-form-item label="排序" prop="sortNo"> | 
|---|
|  |  |  | <el-input v-model="dataForm.sortNo"  :readonly="readonly" @input=""></el-input> | 
|---|
|  |  |  | <el-input v-model="dataForm.sortNo" :readonly="readonly" @input=""></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"/> | 
|---|
|  |  |  | <!--<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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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: '', | 
|---|
|  |  |  | type: '', | 
|---|
|  |  |  | 
|---|
|  |  |  | sortNo: '', | 
|---|
|  |  |  | remark: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | readonly:{ | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 文件数量过多时提醒 | 
|---|
|  |  |  | handleExceed() { | 
|---|
|  |  |  | this.$message({type: 'error', message: '最多支持1个附件上传'}) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 获取信息 | 
|---|
|  |  |  | async getInfo() { | 
|---|
|  |  |  | let res = await this.$http.get(`/sysPictureBase/SysPictureBase/${this.dataForm.id}`) | 
|---|
|  |  |  | let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`) | 
|---|
|  |  |  | this.dataForm = { | 
|---|
|  |  |  | ...this.dataForm, | 
|---|
|  |  |  | ...res.data | 
|---|
|  |  |  | } | 
|---|
|  |  |  | console.log(this.dataForm, 'async getInfo()') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 表单提交 | 
|---|
|  |  |  | async formSubmit() { | 
|---|
|  |  |  | let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/sysPictureBase/SysPictureBase/', this.dataForm) | 
|---|
|  |  |  | console.log(this.dataForm, 'async formSubmit()') | 
|---|
|  |  |  | // 使用form表单的数据格式 | 
|---|
|  |  |  | const params = new FormData() | 
|---|
|  |  |  | // 将上传文件数组依次添加到参数paramsData中 | 
|---|
|  |  |  | this.fileList.forEach((x) => { | 
|---|
|  |  |  | params.append('file', x.file) | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | // 将输入表单数据添加到params表单中 | 
|---|
|  |  |  | params.append('id', this.dataForm.id) | 
|---|
|  |  |  | params.append('type', this.dataForm.type) | 
|---|
|  |  |  | params.append('subType', this.dataForm.subType) | 
|---|
|  |  |  | params.append('name', this.dataForm.name) | 
|---|
|  |  |  | params.append('contentType', this.dataForm.contentType) | 
|---|
|  |  |  | params.append('systemMark', this.dataForm.systemMark) | 
|---|
|  |  |  | params.append('sortNo', this.dataForm.sortNo) | 
|---|
|  |  |  | 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() | 
|---|
|  |  |  | 
|---|
|  |  |  | .img-sc > .el-form-item > .el-form-item__content { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .marginTopAndMarginBottom { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .marginTopAndMarginBottom { | 
|---|
|  |  |  | margin-top: 10px !important; | 
|---|
|  |  |  | margin-bottom: 0 !important; | 
|---|
|  |  |  | } | 
|---|