<template>
<el-dialog title="文章编辑" :visible.sync="visiable" width="70%">
<el-form ref="form" label-width="100px" label-position="right">
<el-form-item label="文章分类:" prop="typeId">
<TreePicker
v-width="300"
class="tree-picker-demo"
:option="typeParam"
type="object"
ref="type"
chooseMode="some"
filterable
@select="chooseType"
></TreePicker>
</el-form-item>
<el-form-item label="文章标题:" prop="articlesTitle">
<el-input placeholder="文章标题" v-model="form.articlesTitle"></el-input>
</el-form-item>
<el-form-item label="媒体类型:" prop="mediaType">
<el-select v-model="form.mediaType" placeholder="请选择">
<el-option
v-for="(item,index) in mediaTypeList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="媒体附件" prop="uploadFile">
<el-upload
action="/api/upload/"
name="file"
:limit="1"
:before-upload="beforeAvatarUpload"
:on-success="handleSuccess"
:before-remove="beforeRemove"
>
<el-button size="small" type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
</el-upload>
</el-form-item>
<el-form-item label="文章内容:" prop="articlesContent">
<tiny-mce ref="tinyMce" :value="''"></tiny-mce>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button round @click="visiable=false">取消</el-button>
<el-button round type="primary" @click="save()">保存</el-button>
</span>
<attachment-view ref="attachmentView"></attachment-view>
</el-dialog>
</template>
<script>
import fetch from "@/utils/fetch.js";
import { Message } from "element-ui";
import tinyMce from "@/template/richText/tinymce";
import attachmentView from "@/template/attachmentView/index";
export default {
//引用components
components: {
tinyMce,
attachmentView
},
data() {
return {
visiable: false,
mediaTypeList: [],
form: {
modifyUserName: null,
createUserId: null,
typeName: null,
createUserName: null,
createTime: null,
typeId: null,
modifyTime: null,
articlesOrder: null,
articlesSource: null,
mediaMore: null,
sourceLink: null,
articlesTitle: null,
articlesState: "1",
mediaAddress: null,
articlesContent: null,
mediaType: null,
id: null,
articlesKeyWord: null,
modifyUserId: null,
publishDate: null,
articlesAuthor: null,
articlesAbstract: null
},
typeParam: {
keyName: "id",
parentName: "pid",
titleName: "typeName",
dataMode: "list",
// datas: treeData
getTotalDatas: resolve => {
//param中的dataMode同样对这里的数据有效
fetch.get("/api/asarticlestype").then(res => {
resolve(res.data);
});
}
}
};
},
created: function() {},
methods: {
init(id) {
this.visiable = true;
fetch.get("/api/asarticlesinfo/"+id).then(res => {
this.form = res.data;
});
this.mediaTypeList = [];
fetch
.get("/api/dictionary/group/xmzt")
.then(res => {
if (res.code == "0") {
for (var items in res.data) {
this.mediaTypeList.push({
name: res.data[items].dicName,
id: res.data[items].dicId
});
}
}
})
.catch(error => {
console.log(error);
});
},
// 上传前对文件的大小的判断
beforeAvatarUpload(file) {
},
// 上传成功后
handleSuccess(res) {
if (res.code == "0") {
this.form.mediaAddress = res.data.dir;
}
},
//附件删除前
beforeRemove(file, fileList) {
this.form.mediaAddress = null;
},
//分类选择
chooseType(nodes){
this.form.typeId = nodes.id;
},
save() {
if (true) {
this.form.articlesContent = this.$refs.tinyMce.getContent();
/*提交表单*/
fetch
.post("/api/asarticlesinfo/save", this.form)
.then(res => {
if (res.code == "0") {
Message({
message: "文章发布成功",
type: "success",
duration: 3 * 1000
});
//关闭窗口
this.$refs["form"].resetFields();
//清空富文本
this.$refs.tinyMce.setContent("");
//隐藏窗口
this.visiable = false;
//重新刷新列表
this.$emit("loadData");
} else {
Message({
message: res.msg,
type: "error",
duration: 3 * 1000
});
}
})
.catch(error => {
console.log(error);
});
}
}
}
};
</script>
<style scoped>
</style>
