zky-admin/src/views/journalQun/AddJournal.vue

<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>