long
2021-01-18 a12059eb143cdd84f87848591b3a5bce30ea3620
提交 | 用户 | 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">
8         <el-input v-model="basicData.shareTitle" placeholder="请输入分享标题" class="com-edit-input" />
9       </el-form-item>
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>