|
|
@@ -0,0 +1,300 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+.preview {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ label,
|
|
|
+ p {
|
|
|
+ line-height: 25px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content .title {
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 1px solid #d8d8d8;
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+.el-form {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ .el-select,
|
|
|
+ .el-range-editor--small.el-input__inner {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ .el-tabs__item {
|
|
|
+ width: 160px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ color: #333333;
|
|
|
+ background: #ececec;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ background: #3895fe;
|
|
|
+
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 36px;
|
|
|
+}
|
|
|
+// 上传
|
|
|
+
|
|
|
+/deep/.avatar-uploader .el-upload {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ line-height: 148px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .avatar {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ line-height: 68px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+/deep/.speaker_avatar .el-upload {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+}
|
|
|
+.hotel_imgs {
|
|
|
+ /deep/.el-upload--picture-card {
|
|
|
+ width: 79px;
|
|
|
+ height: 79px;
|
|
|
+ line-height: 79px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <section>
|
|
|
+ <p><span>会议管理></span>新增文章</p>
|
|
|
+ <div class="content">
|
|
|
+ <!-- <div class="title">新增会议</div> -->
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ size="small"
|
|
|
+ label-width="140px"
|
|
|
+ class="over_y"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-form-item label="文章名称：" prop="name">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入文章名称"
|
|
|
+ v-model="form.name"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item label="文章来源：" prop="journal_id">
|
|
|
+ <el-select
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="form.journal_id"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in journalList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item label="作者：" prop="author">
|
|
|
+ <el-input v-model="form.author" placeholder=""> </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" :offset="2">
|
|
|
+ <el-form-item label="出版时间：" prop="publish_time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.publish_time"
|
|
|
+ type="date"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="文章简介：">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="form.desc"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入文章简介"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="封面图：" prop="img">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="/api/admin/uploadfile"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ >
|
|
|
+ <img v-if="form.img" :src="form.img" class="avatar" />
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <span style="font-size: 12px; color: #999999"
|
|
|
+ >建议图片尺寸为：210*160</span
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文章详情：">
|
|
|
+ <fuEditor :value="form.content"></fuEditor>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="position: fixed; bottom: 20px; right: 60px">
|
|
|
+ <el-button type="primary">预览</el-button>
|
|
|
+ <el-button type="success">发布</el-button>
|
|
|
+ <el-button type="default" @click="save">保存</el-button>
|
|
|
+ <!-- <el-button type="danger" plain>删除</el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import fuEditor from "../../components/fuEditor";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ fuEditor,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ journalList: [],
|
|
|
+ imageUrl: "",
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
|
|
+ journal_id: [
|
|
|
+ { required: true, message: "请选择来源", trigger: "change" },
|
|
|
+ ],
|
|
|
+ author: [{ required: true, message: "请选择模板", trigger: "blur" }],
|
|
|
+ publish_time: [
|
|
|
+ { required: true, message: "发布时间", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ img: [{ required: true, message: "封面图", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //封面
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.form.img = file.response.data;
|
|
|
+ console.log(this.form.img);
|
|
|
+ },
|
|
|
+ //主讲人
|
|
|
+ handleAvatarSuccess1(index, res, file) {
|
|
|
+ var speaker = this.form.speaker[index];
|
|
|
+ speaker.img = file.response.data;
|
|
|
+ this.$set(this.form.speaker, index, speaker);
|
|
|
+ // console.log(this.form.img)
|
|
|
+ },
|
|
|
+ beforeAvatarUpload() {},
|
|
|
+ handleClick() {},
|
|
|
+ addSpeaker() {
|
|
|
+ this.form.speaker.push({ name: "", intruduce: "" });
|
|
|
+ },
|
|
|
+ gopage(size) {
|
|
|
+ if (size) {
|
|
|
+ this.form.page_size = size;
|
|
|
+ }
|
|
|
+ this.form.page = this.$refs.pageButton.page;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.searchJournalList().then((res) => {
|
|
|
+ this.journalList = res.data.data;
|
|
|
+ });
|
|
|
+ let id = this.$route.query.id;
|
|
|
+ if (id) {
|
|
|
+ this.$api.getArticle({ id: id }).then((res) => {
|
|
|
+ this.form = res.data.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ let id = this.$route.query.id;
|
|
|
+ let parm = this.form;
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (id) {
|
|
|
+ parm.id = id;
|
|
|
+ this.$api.updateArticle(parm).then((res) => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "保存成功!",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error("保存失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$api.addArticle(parm).then((res) => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "保存成功!",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error("保存失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error("有必填项没有填!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ del(id) {
|
|
|
+ this.$confirm("确定删除吗", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.$api.deleteEnterprise({ id: id }).then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
xjc