<template>
|
<div class="status_add">
|
<v-header :title="isAdd ? '新增' : '编辑'"></v-header>
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="标题:" prop="title">
|
<el-input v-model="ruleForm.title" maxlength="30" placeholder="请输入标题" show-word-limit></el-input>
|
</el-form-item>
|
<el-form-item label="参与学习人数:">
|
<el-input v-model="ruleForm.scholars" placeholder="请输入数字，默认0"></el-input>
|
</el-form-item>
|
<el-form-item label="封面：" required="">
|
<article>
|
<div class="image-box" v-if="ruleForm.cover != null && ruleForm.cover != ''">
|
<img class="image" :src="ruleForm.cover" alt />
|
<img @click="imgclear" class="clear-icon" src="static/image/clear.png" alt />
|
</div>
|
<div class="avatar" v-else>
|
<v-u :boxWidth="800" :boxHeight="400" :width="650" :height="285" @path="onPath"></v-u>
|
</div>
|
</article>
|
</el-form-item>
|
<el-form-item label="内容编辑" prop="content">
|
<div class="edit">
|
<editor-bar v-model="ruleForm.content" @change="change"></editor-bar>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div class="btn">
|
<el-button size="small" @click="onOk('ruleForm')">确定</el-button>
|
<el-button size="small" @click="back()">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import vU from "com/upload/upload"; //上传组件
|
export default {
|
components: { EditorBar, vU },
|
data() {
|
return {
|
ruleForm:{
|
content: "",
|
cover: "",
|
scholars: 0,
|
title: ""
|
},
|
isAdd:true,
|
rules: {
|
title: [
|
{ required: true, message: '请输入标题', trigger: 'blur' }
|
],
|
content:[
|
{ required: true, message: '请输入内容', trigger: 'blur' }
|
]
|
},
|
content: "",
|
id:''
|
};
|
},
|
|
|
mounted() {
|
this.id = this.$route.query.id;
|
if(this.id) {
|
this.getDetail();
|
this.isAdd = false;
|
} else {
|
this.isAdd = true
|
}
|
},
|
|
methods: {
|
imgclear() {
|
//删除图片
|
this.ruleForm.cover = "";
|
},
|
onPath(v) {
|
this.ruleForm.cover = v;
|
},
|
|
|
//编辑富文本
|
change(val) {
|
this.ruleForm.content = val;
|
},
|
|
getDetail() {
|
this.$api.get("fms/classroom/detail",{ id: this.id },e => {
|
this.ruleForm =e;
|
}
|
);
|
},
|
|
/** 确认 */
|
onOk(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
if(this.ruleForm.cover == '') {
|
return this.$message('请上传封面');
|
}
|
if (this.ruleForm.id) {
|
this.edit()
|
} else {
|
this.save()
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
|
back() {
|
this.$confirm('确定要放弃当前编辑内容吗？温馨提示：确定后将不会保存', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$router.go(-1)
|
})
|
},
|
|
save() {
|
this.$api.post("fms/classroom/add", this.ruleForm, e => {
|
this.$message('保存成功');
|
this.$router.go(-1)
|
});
|
},
|
edit() {
|
this.$api.post("fms/classroom/edit", this.ruleForm, e => {
|
this.$message('编辑成功');
|
this.$router.go(-1)
|
});
|
}
|
},
|
|
};
|
</script>
|
|
<style lang='less' scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.status_add {
|
overflow-y: auto;
|
/deep/.el-input__inner ,/deep/.el-input{
|
width: 300px;
|
}
|
.edit,
|
.zd,
|
.btn {
|
margin-bottom: 10px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
article {
|
max-width: 300px;
|
}
|
.article-maxwidth {
|
.el-radio {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
