提交 | 用户 | 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> |