捕梦者CMS系统前端框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

202 lines
5.1 KiB

<!-- 用户编辑弹窗 -->
<template>
<el-dialog
:title="isUpdate?'修改广告':'添加广告'"
:visible="visible"
width="600px"
:destroy-on-close="true"
:lock-scroll="false"
custom-class="ele-dialog-form"
@update:visible="updateVisible">
<el-form
:model="form"
ref="form"
:rules="rules"
label-width="82px">
<el-row :gutter="15">
<el-col>
<el-form-item
label="名称:"
prop="name">
<el-input
v-model="form.name"
placeholder="请输入广告名称"
clearable/>
</el-form-item>
<el-form-item
label="排序号:"
prop="sortNumber">
<el-input-number
v-model="form.sort"
controls-position="right"
:min="0"
placeholder="请输入排序号"
class="ele-fluid ele-text-left"/>
</el-form-item>
<el-form-item
label="跳转链接:"
prop="url">
<el-input
v-model="form.url"
placeholder="请输入跳转链接"
clearable/>
</el-form-item>
<el-form-item label="起止日期:" prop="datetime">
<el-date-picker
v-model="form.datetime"
type="daterange"
unlink-panels range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
class="ele-fluid"/>
</el-form-item>
<el-form-item label="图片">
<el-row>
<el-col>
<el-input
v-model="form.image"
placeholder="请上传图片"
clearable/>
<el-upload
class="upload-demo"
:show-file-list="false"
:action="this.uploadImage+'?upload_type=img'"
:on-success="afterUploadImage">
<img v-if="form.image" :src="form.image" width="150" height="150" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="描述:">
<el-input
v-model="form.desc"
placeholder="请输入描述"
clearable/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer">
<el-button
@click="updateVisible(false)">取消
</el-button>
<el-button
type="primary"
@click="save"
:loading="loading">保存
</el-button>
</div>
</el-dialog>
</template>
<script>
import setting from "@/config/setting";
export default {
name: 'AdDataEdit',
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object,
},
data() {
return {
// 表单数据
form: Object.assign({
ad_id:this.$route.query.ad_id
}, this.data),
// 表单验证规则
rules: {
name: [
{required: true, message: '请输入广告名称', trigger: 'blur'}
],
sort: [
{required: true, message: '请输入广告排序', trigger: 'blur'}
],
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false,
// 角色列表
tagLists: [],
uploadImage: setting.uploadImageUrl,
}
},
watch: {
data() {
if (this.data) {
this.form = Object.assign({}, this.data);
this.isUpdate = true;
console.log(222)
} else {
this.form = {};
this.$set(this.form,'ad_id',this.$route.query.ad_id)
this.isUpdate = false;
console.log(1111)
}
}
},
mounted() {
},
methods: {
afterUploadImage(response) {
if (response.code != 0 || response.url == '') {
this.$message.error(response.msg)
} else {
this.$set(this.form,'image',response.url)
}
},
/* 保存编辑 */
save() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true;
this.$http.post('/AdData/' + (this.isUpdate ? 'edit' : 'add'), this.form).then(res => {
this.loading = false;
if (res.data.code === 0) {
this.$message({type: 'success', message: res.data.msg});
if (!this.isUpdate) {
this.$set(this.form,'ad_id',this.$route.query.ad_id)
this.form = {};
}
this.updateVisible(false);
this.$emit('done');
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.loading = false;
this.$message.error(e.message);
});
} else {
return false;
}
});
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
},
}
}
</script>
<style scoped>
</style>