<!-- 基础配置 -->
|
<template>
|
<div class="app-container">
|
|
<el-form ref="basicForm" label-position="left" :model="basicData" label-width="150px" :rules="rules">
|
|
<el-form-item label="分享标题：" prop="shareTitle">
|
<el-input v-model="basicData.shareTitle" placeholder="请输入分享标题" maxlength="100" class="com-edit-input" />
|
</el-form-item>
|
|
<el-form-item prop="uploadShareImgs">
|
<span slot="label">
|
分享图片：<br><span>(500*400像素)</span>
|
</span>
|
<!-- 上传图片组件(单图) -->
|
<el-upload
|
ref="refUploadShareImg"
|
:auto-upload="false"
|
list-type="picture-card"
|
:class="{disabled:uploadDisabled}"
|
action="#"
|
:limit="1"
|
:file-list="basicData.uploadShareImgs"
|
:on-change="addUploadFiles"
|
:on-remove="delUploadFiles"
|
:http-request="uploadFileHandle"
|
:on-preview="uploadPreview"
|
:before-upload="beforeUploadImg"
|
>
|
<i class="el-icon-plus" />
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
|
<div v-if="getAuthValueFN('system_set')" class="com-edit-bottom-btns flex flex-align-center">
|
<el-button size="mini" @click="jumpBack">取消</el-button>
|
<el-button size="mini" type="primary" @click="submit">提交</el-button>
|
</div>
|
|
<!-- upload放大图片 -->
|
<el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
|
<img style="max-width:100%" :src="uploadPreviewUrl" alt="">
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
|
export default {
|
components: {},
|
mixins: [mixin_upload],
|
data() {
|
return {
|
basicData: {
|
shareTitle: '',
|
uploadShareImgs: [] // 上传分享图
|
},
|
|
// 表单校验
|
rules: {
|
shareTitle: [{
|
required: true, message: '请填写分享标题', trigger: 'change'
|
}],
|
uploadShareImgs: [{
|
required: true, message: '请选择图片'
|
}]
|
}
|
}
|
},
|
computed: {
|
uploadDisabled() {
|
return this.basicData.uploadShareImgs.length > 0
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.getBasicData()
|
},
|
|
// 获取基础配置数据
|
getBasicData() {
|
this.postFN({
|
url: 'admin/systemParameter/info',
|
params: {},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
'shareImg': 'q1rYm',
|
'shareTitle': 'yaD(jiP'
|
}
|
}
|
}, (inf) => {
|
this.basicData.shareTitle = inf.shareTitle
|
if (inf.shareImg) this.basicData.uploadShareImgs = [{ url: inf.shareImg, status: 'success' }]
|
})
|
},
|
|
jumpBack() {
|
this.$router.go(-1)
|
},
|
|
// 上传支付文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前确认格式
|
beforeUploadImg(file) {
|
const isImg = file.type.indexOf('image/') > -1
|
if (!isImg) {
|
this.$message.error('必须是选择图片文件')
|
}
|
return isImg
|
},
|
// 增加文件
|
addUploadFiles(file) {
|
this.basicData.uploadShareImgs = [file]
|
},
|
// 删除文件
|
delUploadFiles(file, fileList) {
|
this.basicData.uploadShareImgs = fileList
|
},
|
// 执行上传单文件
|
runUploadFiles(cb) {
|
if (this.checkNeedUpload(this.basicData.uploadShareImgs)) {
|
this.$refs.refUploadShareImg.submit()
|
} else {
|
cb && cb()
|
}
|
},
|
// 上传分享图
|
uploadFileHandle(res) {
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
console.log(formData)
|
this.postFN({
|
url: 'admin/image/upload',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'xxx'
|
}
|
}
|
}, (inf) => {
|
this.basicData.shareImg = inf.imgUrl
|
// this.$refs.refUploadShareImg.clearFiles();
|
this.submitReq()
|
})
|
},
|
// 上传支付文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
|
// 提交编辑
|
submit() {
|
this.$refs['basicForm'].validate(valid => {
|
if (valid) {
|
this.runUploadFiles(() => {
|
this.submitReq()
|
})
|
}
|
})
|
},
|
|
submitReq() {
|
var { basicData } = this
|
var {
|
shareTitle,
|
shareImg
|
} = basicData
|
|
const params = {
|
shareTitle: shareTitle,
|
shareImg: shareImg
|
}
|
|
this.postFN({
|
url: 'admin/systemParameter/edit',
|
params: params,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}, () => {
|
this.getBasicData()
|
this.$messageSuc('保存成功')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
