| | |
| | | <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; |
| | | } |