| 提交 | 用户 | 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 | <!-- 上传图片组件(单图) --> | |
| 16 | <el-upload | |
| 17 | ref="refUploadShareImg" | |
| 18 | :auto-upload="false" | |
| 19 | list-type="picture-card" | |
| 20 | :class="{disabled:uploadDisabled}" | |
| 21 | action="#" | |
| 22 | :limit="1" | |
| 23 | :file-list="basicData.uploadShareImgs" | |
| 24 | :on-change="addUploadFiles" | |
| 25 | :on-remove="delUploadFiles" | |
| 26 | :http-request="uploadFileHandle" | |
| 27 | :on-preview="uploadPreview" | |
| 28 | :before-upload="beforeUploadImg" | |
| 29 | > | |
| 30 | <i class="el-icon-plus" /> | |
| 31 | </el-upload> | |
| 32 | </el-form-item> | |
| 33 | </el-form> | |
| 34 | ||
| 35 | <div v-if="getAuthValueFN('system_set')" class="com-edit-bottom-btns flex flex-align-center"> | |
| 36 | <el-button size="mini" @click="jumpBack">取消</el-button> | |
| 37 | <el-button size="mini" type="primary" @click="submit">提交</el-button> | |
| 38 | </div> | |
| 39 | ||
| 40 | <!-- upload放大图片 --> | |
| 41 | <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center"> | |
| 42 | <img style="max-width:100%" :src="uploadPreviewUrl" alt=""> | |
| 43 | </el-dialog> | |
| 44 | </div> | |
| 45 | </template> | |
| 46 | ||
| 47 | <script> | |
| 48 | import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览 | |
| 49 | export default { | |
| 50 | components: {}, | |
| 51 | mixins: [mixin_upload], | |
| 52 | data() { | |
| 53 | return { | |
| 54 | basicData: { | |
| 55 | shareTitle: '', | |
| 56 | uploadShareImgs: [] // 上传分享图 | |
| 57 | }, | |
| 58 | ||
| 59 | // 表单校验 | |
| 60 | rules: { | |
| 61 | shareTitle: [{ | |
| 62 | required: true, message: '请填写分享标题', trigger: 'change' | |
| 63 | }], | |
| 64 | uploadShareImgs: [{ | |
| 65 | required: true, message: '请选择图片' | |
| 66 | }] | |
| 67 | } | |
| 68 | } | |
| 69 | }, | |
| 70 | computed: { | |
| 71 | uploadDisabled() { | |
| 72 | return this.basicData.uploadShareImgs.length > 0 | |
| 73 | } | |
| 74 | }, | |
| 75 | mounted() { | |
| 76 | this.init() | |
| 77 | }, | |
| 78 | methods: { | |
| 79 | init() { | |
| 80 | this.getBasicData() | |
| 81 | }, | |
| 82 | ||
| 83 | // 获取基础配置数据 | |
| 84 | getBasicData() { | |
| 85 | this.postFN({ | |
| 86 | url: 'admin/systemParameter/info', | |
| 87 | params: {}, | |
| 88 | mockData: { | |
| 89 | code: 100, | |
| 90 | msg: '', | |
| 91 | data: { | |
| 92 | 'shareImg': 'q1rYm', | |
| 93 | 'shareTitle': 'yaD(jiP' | |
| 94 | } | |
| 95 | } | |
| 96 | }, (inf) => { | |
| 97 | this.basicData.shareTitle = inf.shareTitle | |
| 98 | if (inf.shareImg) this.basicData.uploadShareImgs = [{ url: inf.shareImg, status: 'success' }] | |
| 99 | }) | |
| 100 | }, | |
| 101 | ||
| 102 | jumpBack() { | |
| 103 | this.$router.go(-1) | |
| 104 | }, | |
| 105 | ||
| 106 | // 上传支付文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ | |
| 107 | // 上传前确认格式 | |
| 108 | beforeUploadImg(file) { | |
| 109 | const isImg = file.type.indexOf('image/') > -1 | |
| 110 | if (!isImg) { | |
| 111 | this.$message.error('必须是选择图片文件') | |
| 112 | } | |
| 113 | return isImg | |
| 114 | }, | |
| 115 | // 增加文件 | |
| 116 | addUploadFiles(file) { | |
| 117 | this.basicData.uploadShareImgs = [file] | |
| 118 | }, | |
| 119 | // 删除文件 | |
| 120 | delUploadFiles(file, fileList) { | |
| 121 | this.basicData.uploadShareImgs = fileList | |
| 122 | }, | |
| 123 | // 执行上传单文件 | |
| 124 | runUploadFiles(cb) { | |
| 125 | if (this.checkNeedUpload(this.basicData.uploadShareImgs)) { | |
| 126 | this.$refs.refUploadShareImg.submit() | |
| 127 | } else { | |
| 128 | cb && cb() | |
| 129 | } | |
| 130 | }, | |
| 131 | // 上传分享图 | |
| 132 | uploadFileHandle(res) { | |
| 133 | const file = res.file | |
| 134 | const formData = new FormData() | |
| 135 | formData.append('file', file) | |
| 136 | console.log(formData) | |
| 137 | this.postFN({ | |
| 138 | url: 'admin/image/upload', | |
| 139 | header: { 'Content-Type': 'multipart/form-data' }, | |
| 140 | params: formData, | |
| 141 | mockData: { | |
| 142 | code: 100, | |
| 143 | msg: '', | |
| 144 | data: { | |
| 145 | imgUrl: 'xxx' | |
| 146 | } | |
| 147 | } | |
| 148 | }, (inf) => { | |
| 149 | this.basicData.shareImg = inf.imgUrl | |
| 150 | // this.$refs.refUploadShareImg.clearFiles(); | |
| 151 | this.submitReq() | |
| 152 | }) | |
| 153 | }, | |
| 154 | // 上传支付文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ | |
| 155 | ||
| 156 | // 提交编辑 | |
| 157 | submit() { | |
| 158 | this.$refs['basicForm'].validate(valid => { | |
| 159 | if (valid) { | |
| 160 | this.runUploadFiles(() => { | |
| 161 | this.submitReq() | |
| 162 | }) | |
| 163 | } | |
| 164 | }) | |
| 165 | }, | |
| 166 | ||
| 167 | submitReq() { | |
| 168 | var { basicData } = this | |
| 169 | var { | |
| 170 | shareTitle, | |
| 171 | shareImg | |
| 172 | } = basicData | |
| 173 | ||
| 174 | const params = { | |
| 175 | shareTitle: shareTitle, | |
| 176 | shareImg: shareImg | |
| 177 | } | |
| 178 | ||
| 179 | this.postFN({ | |
| 180 | url: 'admin/systemParameter/edit', | |
| 181 | params: params, | |
| 182 | mockData: { | |
| 183 | code: 100, | |
| 184 | msg: '', | |
| 185 | data: {} | |
| 186 | } | |
| 187 | }, () => { | |
| 188 | this.getBasicData() | |
| 189 | this.$messageSuc('保存成功') | |
| 190 | }) | |
| 191 | } | |
| 192 | } | |
| 193 | } | |
| 194 | </script> | |
| 195 | ||
| 196 | <style lang="scss" scoped> | |
| 197 | ||
| 198 | </style> | |
