zky-admin/src/views/article/AddArticle.vue

<style lang="scss" scoped>
.preview {
  .aname{
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 16px;
  }
  .ainfo{
    display: flex;
    margin-bottom: 10px;
    p{
      width: 60%;
      margin-left: 15px;
      line-height: 26px;
    }
  }
  b{
    color: #333;
  }
  div{
    line-height: 26px;
    margin-bottom: 10px;
    overflow: auto;
  }

}
.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: 100%;
  }
}
.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" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0)">
      <!-- <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="10">
            <el-form-item label="文章来源：" prop="journal_id">
              <el-select :disabled='disabled'
                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="6">
            <el-form-item label="作者：" prop="author">
              <el-input v-model="form.author" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="出版时间：" prop="publish_time">
              <el-date-picker
                v-model="form.publish_time"
                type="date"
                value-format="yyyy-MM-dd"
                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-progress='handleAvatarProgress'
            :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: red"
            >建议图片尺寸为：210*160, 图片大小请控制在2M以内!</span
          >
        </el-form-item>
        <el-form-item label="文章详情：">
          <!-- <fuEditor :value="form.content" ref="editor"></fuEditor> -->
          <vue-ueditor-wrap ref="editor" v-model="form.content" :config="myConfig"></vue-ueditor-wrap>
          
        </el-form-item>
        <el-form-item style="position: fixed; bottom: 20px; right: 60px">
          <el-button type="primary" @click="view">预览</el-button>
          <el-button type="success" @click="save(2)">发布</el-button>
          <!-- <el-button type="default" @click="save(1)">保存</el-button> -->
          <el-button type='info' plain @click="$router.go(-1)">返回</el-button>
          <!-- <el-button type="danger" plain>删除</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title=""
      :visible.sync="open"
      width="414px">
      <div class="preview">
        <p class="aname">{{form.name}}</p>
        <div class="ainfo">
          <img width="100" :src="form.img" alt="">
          <p>
            发布单位：{{journal_name}} <br>
            作者：{{form.author}} <br>
            发表时间：{{form.publish_time}} 
          </p>
        </div>
        <b>文章简介</b>
        <div class="adesc">{{form.desc}}</div>
        <b>文章内容</b>
        <div v-html="form.content"></div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </section>
</template>
<script>

export default {
  components: {
  },
  data() {
    return {
      // msg: '<h2>Vue + UEditor + v-model双向绑定</h2>',
       myConfig: {
	      // 编辑器自动被内容撑高
	      autoHeightEnabled: true,
	      // 初始容器高度
	      initialFrameHeight: 500,
	      // 初始容器宽度
	      initialFrameWidth: '100%',
	      // 上传文件接口，实现上传图片功能必须的配置，这个地址会在后端配置的时候产生，此处先放上结果
	      serverUrl: '/api/admin/ueditor/upload',
	    },
      form: {},
      journalList: [],
      journal_name:'',
      imageUrl: "",
      open:false,
      loading:false,
      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" }],
      },
      disabled:false
    };
  },
  methods: {
    //封面
    handleAvatarProgress(){
      this.loading=true
    },
    handleAvatarSuccess(res, file) {
      // this.form.img = file.response.data;
      this.$set(this.form,'img',file.response.data)
      this.loading=false
    },
    //主讲人
    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.$api.searchJournalList().then((res) => {
        this.journalList = res.data.data;
      });
      let id = this.$route.query.id;
      if (id) {
        this.loading = true;
        this.$api.getArticle({ id: id }).then((res) => {
          this.form = res.data.data;
          this.loading = false;
        });
      }
    },
    /**预览 */
    view(){
      // console.log(this.$refs.editor)
      var content=this.$refs.editor.innerValue
      
      this.form.content=content;
      let journal=this.journalList.filter(item=>item.id == this.form.journal_id)
      if(journal.length>0){
        this.journal_name=journal[0].name
      }
      this.open=true;
    },
    save(status) {
      let id = this.$route.query.id;
      let parm = this.form;
      parm.status=status
      var content=this.$refs.editor.innerValue
      parm.content=content;
      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: status==1?"保存成功!":"发布成功!",
                });
                this.$router.go(-1)
                
              } else {
                this.$message.error(status==1?"保存失败!":"发布失败!");
              }
            });
          } else {
            this.$api.addArticle(parm).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: "success",
                  message: status==1?"保存成功!":"发布成功!",
                });
                this.$router.go(-1)
              } else {
                this.$message.error(status==1?"保存失败!":"发布失败!");
              }
            });
          }
        } 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() {
    if(this.$route.query.jid){
            this.form.journal_id=Number(this.$route.query.jid)
            this.disabled=true
    }
    this.getData();
  },
};
</script>