| 提交 | 用户 | age | ||
| 2a61f6 | 1 | <!-- 基础配置 --> |
| L | 2 | <template> |
| 3 | <div class="app-container"> | |
| 4 | ||
| 5 | <el-form ref="basicForm" label-position="left" :model="basicData" label-width="150px" :rules="rules"> | |
| 6 | ||
| 7 | <el-form-item label="分享标题：" prop="shareTitle"> | |
| 36b711 | 8 | <el-input v-model="basicData.shareTitle" placeholder="请输入分享标题" maxlength="100" class="com-edit-input" /> |
| 2a61f6 | 9 | </el-form-item> |
| L | 10 | |
| 11 | <el-form-item prop="uploadShareImgs"> | |
| 12 | <span slot="label"> | |
| 13 | 分享图片：<br><span>(500*400像素)</span> | |
| 14 | </span> | |
| 15 | <!-- 上传图片组件(单图) --> | |
| 133cfa | 16 | <UploadSingleImg |
| L | 17 | ref="refUploadImg" |
| 9c6d51 | 18 | v-model="basicData.uploadShareImgs" |
| 133cfa | 19 | @change.capture="$refs['basicForm'].clearValidate()" |
| L | 20 | /> |
| 2a61f6 | 21 | </el-form-item> |
| L | 22 | </el-form> |
| 23 | ||
| 24 | <div v-if="getAuthValueFN('system_set')" class="com-edit-bottom-btns flex flex-align-center"> | |
| 25 | <el-button size="mini" @click="jumpBack">取消</el-button> | |
| 26 | <el-button size="mini" type="primary" @click="submit">提交</el-button> | |
| 27 | </div> | |
| 28 | ||
| 29 | <!-- upload放大图片 --> | |
| 30 | <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center"> | |
| 31 | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> | |
| 32 | </el-dialog> | |
| 33 | </div> | |
| 34 | </template> | |
| 35 | ||
| 36 | <script> | |
| 37 | import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览 | |
| 133cfa | 38 | import UploadSingleImg from '@/components_simple/UploadSingleImg' |
| 2a61f6 | 39 | export default { |
| 9c6d51 | 40 | components: { UploadSingleImg }, |
| L | 41 | mixins: [mixin_upload], |
| 2a61f6 | 42 | data() { |
| L | 43 | return { |
| 44 | basicData: { | |
| 45 | shareTitle: '', | |
| 46 | uploadShareImgs: [] // 上传分享图 | |
| 47 | }, | |
| 48 | ||
| 49 | // 表单校验 | |
| 50 | rules: { | |
| 51 | shareTitle: [{ | |
| 52 | required: true, message: '请填写分享标题', trigger: 'change' | |
| 53 | }], | |
| 54 | uploadShareImgs: [{ | |
| 55 | required: true, message: '请选择图片' | |
| 56 | }] | |
| 57 | } | |
| 58 | } | |
| 59 | }, | |
| 60 | mounted() { | |
| 61 | this.init() | |
| 62 | }, | |
| 63 | methods: { | |
| 64 | init() { | |
| 65 | this.getBasicData() | |
| 66 | }, | |
| 67 | ||
| 68 | // 获取基础配置数据 | |
| 69 | getBasicData() { | |
| 70 | this.postFN({ | |
| 71 | url: 'admin/systemParameter/info', | |
| 72 | params: {}, | |
| 73 | mockData: { | |
| 74 | code: 100, | |
| 75 | msg: '', | |
| 76 | data: { | |
| 77 | 'shareImg': 'q1rYm', | |
| 78 | 'shareTitle': 'yaD(jiP' | |
| 79 | } | |
| 80 | } | |
| 81 | }, (inf) => { | |
| 82 | this.basicData.shareTitle = inf.shareTitle | |
| 83 | if (inf.shareImg) this.basicData.uploadShareImgs = [{ url: inf.shareImg, status: 'success' }] | |
| 84 | }) | |
| 85 | }, | |
| 86 | ||
| 87 | jumpBack() { | |
| 88 | this.$router.go(-1) | |
| 89 | }, | |
| 90 | ||
| 91 | // 提交编辑 | |
| 92 | submit() { | |
| 93 | this.$refs['basicForm'].validate(valid => { | |
| 94 | if (valid) { | |
| 133cfa | 95 | // 上传图片 |
| L | 96 | this.$refs.refUploadImg.runUploadImg((imgUrl) => { |
| 9c6d51 | 97 | imgUrl && this.$set(this.basicData, 'shareImg', imgUrl) |
| 2a61f6 | 98 | this.submitReq() |
| L | 99 | }) |
| 100 | } | |
| 101 | }) | |
| 102 | }, | |
| 103 | ||
| 104 | submitReq() { | |
| 105 | var { basicData } = this | |
| 106 | var { | |
| 107 | shareTitle, | |
| 108 | shareImg | |
| 109 | } = basicData | |
| 110 | ||
| 111 | const params = { | |
| 112 | shareTitle: shareTitle, | |
| 113 | shareImg: shareImg | |
| 114 | } | |
| 115 | ||
| 116 | this.postFN({ | |
| 117 | url: 'admin/systemParameter/edit', | |
| 118 | params: params, | |
| 119 | mockData: { | |
| 120 | code: 100, | |
| 121 | msg: '', | |
| 122 | data: {} | |
| 123 | } | |
| 124 | }, () => { | |
| 125 | this.getBasicData() | |
| 126 | this.$messageSuc('保存成功') | |
| 127 | }) | |
| 128 | } | |
| 129 | } | |
| 130 | } | |
| 131 | </script> | |
| 132 | ||
| 133 | <style lang="scss" scoped> | |
| 134 | ||
| 135 | </style> | |
