|
|
|
@ -1,8 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div class="container"> |
|
|
|
<div class="title">修改轮播图</div> |
|
|
|
<el-form :model="formLabelAlign" ref="formLabelAlign" label-width="80px" class="demo-ruleForm"> |
|
|
|
<el-form-item label="图片："> |
|
|
|
<el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"> |
|
|
|
<el-form-item label="图片：" prop="url"> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader" |
|
|
|
:action="`${BASE_API}/file/upload`" |
|
|
|
@ -14,23 +14,22 @@ |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="位置："> |
|
|
|
{{ formLabelAlign.showPage }} |
|
|
|
<el-form-item label="位置：" prop="showPage"> |
|
|
|
<el-cascader |
|
|
|
v-modal="formLabelAlign.showPage" |
|
|
|
v-model="formLabelAlign.showPage" |
|
|
|
:props="props" |
|
|
|
:options="tabList" |
|
|
|
@change="handleChange"> |
|
|
|
</el-cascader> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="状态："> |
|
|
|
<el-form-item label="状态：" prop="recStatus"> |
|
|
|
<el-radio-group v-model="formLabelAlign.recStatus" @change="changeStatus"> |
|
|
|
<el-radio :label="0">正常</el-radio> |
|
|
|
<el-radio :label="1">禁用</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" @click="updateCarousel(formLabelAlign)">确定</el-button> |
|
|
|
<el-button type="primary" @click="submit(formLabelAlign)">确定</el-button> |
|
|
|
<el-button @click="$emit('close')">取消</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -41,20 +40,21 @@ |
|
|
|
import {BASE_API} from '../../config'; |
|
|
|
import {tabList} from '../../filters/code'; |
|
|
|
import { |
|
|
|
ADD_CAROUSEL, |
|
|
|
UPDATE_CAROUSEL, |
|
|
|
} from '@/api/carousel'; |
|
|
|
import Alert from "@/utils/alert"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "detailsOfDistribution", |
|
|
|
props: ['currList'], |
|
|
|
props: ['currList', 'showAdd'], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
labelPosition: 'right', |
|
|
|
formLabelAlign: { |
|
|
|
url: '', |
|
|
|
showPage: [], |
|
|
|
recStatus: '' |
|
|
|
showPage: ['00', '0000'], |
|
|
|
recStatus: 0 |
|
|
|
}, |
|
|
|
BASE_API, |
|
|
|
tabList, |
|
|
|
@ -63,20 +63,34 @@ |
|
|
|
label: 'title', |
|
|
|
children: 'children' |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
url: [ |
|
|
|
{ required: true, message: '请上传图片', trigger: 'change' } |
|
|
|
], |
|
|
|
showPage: [ |
|
|
|
{ type: 'array', required: true, message: '请选择位置', trigger: 'change' } |
|
|
|
], |
|
|
|
recStatus: [ |
|
|
|
{ required: true, message: '请选择状态', trigger: 'change' } |
|
|
|
], |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
console.log('this.currList: ', this.currList); |
|
|
|
if(!this.currList) return |
|
|
|
const { url, showPage, recStatus } = this.currList |
|
|
|
let item = this.formLabelAlign |
|
|
|
item.url = url; |
|
|
|
item.showPage[0] = showPage.slice(0, 2); |
|
|
|
item.showPage[1] = showPage; |
|
|
|
item.recStatus = recStatus; |
|
|
|
this.formLabelAlign = {...item} |
|
|
|
console.log('this.formLabelAlign: ', this.formLabelAlign); |
|
|
|
if(this.currList && this.currList && !this.showAdd){ |
|
|
|
const { id, url, showPage, recStatus } = this.currList |
|
|
|
this.formLabelAlign.id = id; |
|
|
|
this.formLabelAlign.url = url; |
|
|
|
this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2)) |
|
|
|
this.formLabelAlign.showPage.splice(1, 1, showPage) |
|
|
|
this.formLabelAlign.recStatus = recStatus; |
|
|
|
}else{ |
|
|
|
const code = localStorage.getItem('code') |
|
|
|
if(!code) return |
|
|
|
this.formLabelAlign.showPage.splice(0, 1, code.slice(0, 2)) |
|
|
|
this.formLabelAlign.showPage.splice(1, 1, code) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
@ -104,23 +118,54 @@ |
|
|
|
|
|
|
|
// 位置选择 |
|
|
|
handleChange(value) { |
|
|
|
console.log(value); |
|
|
|
this.formLabelAlign.showPage = value |
|
|
|
}, |
|
|
|
|
|
|
|
// 修改状态 |
|
|
|
changeStatus(value){ |
|
|
|
console.log('value: ', value); |
|
|
|
this.formLabelAlign.recStatus = value; |
|
|
|
}, |
|
|
|
|
|
|
|
submit(formName) { |
|
|
|
this.$refs.ruleForm.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
if(this.showAdd){ |
|
|
|
this.addCarousel(formName) |
|
|
|
}else{ |
|
|
|
this.updateCarousel(formName) |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 添加轮播图 |
|
|
|
*/ |
|
|
|
async addCarousel(formName){ |
|
|
|
const { url, showPage, recStatus } = formName; |
|
|
|
const params = { |
|
|
|
url, |
|
|
|
showPage: showPage[1], |
|
|
|
recStatus |
|
|
|
}; |
|
|
|
await ADD_CAROUSEL(params).then((res) => { |
|
|
|
if(res.code === 200){ |
|
|
|
Alert.success('添加成功'); |
|
|
|
this.$emit('close', true) |
|
|
|
}else{ |
|
|
|
Alert.fail(res.msg || '添加失败'); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 修改轮播图 |
|
|
|
*/ |
|
|
|
async updateCarousel(formName){ |
|
|
|
console.log('formName: ', formName); |
|
|
|
const { url, showPage, recStatus } = formName; |
|
|
|
const { id } = this.currList; |
|
|
|
const { id, url, showPage, recStatus } = formName; |
|
|
|
const params = { |
|
|
|
id, |
|
|
|
url, |
|
|
|
@ -148,4 +193,15 @@ |
|
|
|
font-weight: bold; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-uploader-icon { |
|
|
|
display: inline-block; |
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
font-size: 28px; |
|
|
|
color: #8c939d; |
|
|
|
width: 178px; |
|
|
|
height: 178px; |
|
|
|
line-height: 178px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
