update

src/api.js

@@ -251,6 +251,22 @@ export default {
 	delArticle: params => {
 		return axios.delete(`${baseURL}/api/admin/article`, { params: params });
 	},
+	// 资讯相关
+	getNewsList: params => {
+		return axios.get(`${baseURL}/api/admin/news/list`, { params: params });
+	},
+	getNews: params => {
+		return axios.get(`${baseURL}/api/admin/news`, { params: params });
+	},
+	addNews: params => {
+		return axios.post(`${baseURL}/api/admin/news`, params);
+	},
+	updateNews: params => {
+		return axios.put(`${baseURL}/api/admin/news`, params);
+	},
+	delNews: params => {
+		return axios.delete(`${baseURL}/api/admin/news`, { params: params });
+	},
 	searchJournalList: params => {
 		return axios.get(`${baseURL}/api/admin/journal/search`, { params: params });
 	},

src/router.js

@@ -207,6 +207,25 @@ export default new Router({
       }, 
     ]
     },
+    {
+      path: '/article/news',
+      name: '刊群动态',
+      icon: 'iconfont iconwenzhang',
+      component: () => import('./views/Home.vue'),
+      show: 0,
+      isLeaf: 1,
+      children: [{
+        path: '/article/news',
+        component: () => import('./views/news/News.vue'),
+        name: '刊群动态'
+      }, 
+      {
+        path: '/article/news/add',
+        component: () => import('./views/news/AddNews.vue'),
+        name: '新增刊群动态'
+      }, 
+    ]
+    },
     {
       path: '/conference/conference',
       name: '会议管理',

src/views/Index.vue

@@ -209,7 +209,8 @@ export default {
         { article_header: "中国生态效率时空演化研究", count: "132" },
       ],
       myColors: ["#1f77b4", "#629fc9", "#94bedb", "#c9e0ef"],
-      role_id:1
+      role_id:1,
+      journal_name:""
     };
   },
   components: {

src/views/article/AddArticle.vue

@@ -114,7 +114,7 @@
 </style>
 <template>
   <section>
-    <p><span>会议管理></span>新增文章</p>
+    <p><span>精品导读></span>新增文章</p>
     <div class="content" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0)">
       <!-- <div class="title">新增会议</div> -->
       <el-form

src/views/article/Article.vue

@@ -104,7 +104,7 @@ a {
 </style>
 <template>
   <section>
-    <p><span>信息管理></span>文章管理</p>
+    <p><span>精品导读></span>文章管理</p>
     <div class="content">
       <div class="filter">
         <el-form

src/views/news/AddNews.vue

@@ -0,0 +1,369 @@
+<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-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.getNews({ 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.updateNews(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.addNews(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.delNews({ 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>

src/views/news/News.vue

@@ -0,0 +1,384 @@
+<style lang="scss" scoped>
+.preview {
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+  label,
+  p {
+    line-height: 25px !important;
+  }
+}
+.el-cascader {
+  width: 100%;
+}
+a {
+  text-decoration: none;
+  color: #409eff;
+  cursor: pointer;
+}
+// 右边
+.item-main {
+  // margin:34px;
+  // height:600px;
+  // background: #FFFFFF;
+  border: 1px solid #dddddd;
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
+  border-radius: 20px;
+  .el-form.over_y {
+    max-height: calc(100vh - 340px);
+  }
+  /deep/.el-form-item__label {
+    float: none;
+  }
+}
+// label样式
+.edit_label {
+  /deep/.el-input__inner {
+    background: #f5faff;
+    border: 0px;
+    padding: 0px;
+  }
+}
+/deep/.opicon {
+  font-weight: bold;
+  padding: 5px;
+  color: #3895fe;
+}
+.tpl_title {
+  font-size: 18px;
+  margin: 20px 0;
+}
+.tpl_form {
+  margin: 20px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  /deep/.el-form-item {
+    background: none;
+  }
+  /deep/.el-form-item__content {
+    width: 100%;
+  }
+}
+.survey_logo {
+  position: relative;
+  top: 15px;
+  left: 20px;
+}
+.result_dialog .el-dialog {
+  width: 40%;
+  margin-top: 20vh !important;
+}
+.result-item {
+  height: 35px;
+  .label {
+    font-weight: 600;
+  }
+}
+.syncitem {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #f4f4f4;
+  background: #ffffff;
+
+}
+.syncitem img {
+  margin: 10px;
+}
+.syncbtn {
+  margin-top: 20px;
+  text-align: center;
+}
+/deep/.el-dialog__body {
+  padding: 10px 12px!important;
+  background: #ececec;
+  p {
+    height: 45px;
+    overflow: hidden!important;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    padding:10px 10px;
+  }
+}
+
+</style>
+<template>
+  <section>
+    <p><span>精品导读></span>刊群动态</p>
+    <div class="content">
+      <div class="filter">
+        <el-form
+          size="small"
+          :inline="true"
+          label-position="left"
+        >
+          <el-form-item label="">
+            <el-input
+              clearable
+              placeholder="请输入标题"
+              v-model="form.name"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label-width="40px">
+            <el-button type="primary" @click="search">搜索</el-button>
+          </el-form-item>
+          <el-form-item label="来源">
+            <el-select
+              v-model="form.journal_id"
+              placeholder="请选择期刊"
+              filterable
+              clearable
+              @change="getData()"
+              @clear="getData()"
+            >
+              <el-option
+                v-for="item in journalSearch"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item style="float: right">
+            <!-- <el-button @click="syncToMP" type="primary">同步到公众号</el-button> -->
+            <el-button @click="addArticle" type="primary">发布刊群动态</el-button>
+          </el-form-item>
+          <!-- <el-form-item style="float: right" v-if="form.journal_id">
+            <el-button @click="$router.go(-1)" type="info">返回</el-button>
+          </el-form-item> -->
+        </el-form>
+      </div>
+      <el-table
+        class="table"
+        :data="list"
+        height="57vh"
+        border
+        v-loading="loading"
+        default-expand-all
+        row-key="id"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column prop="name" label="标题" width="380px"> </el-table-column>
+        <el-table-column prop="img" label="封面图">
+          <template slot-scope="scope">
+            <img :src="scope.row.img" alt="" width="120" height="80" />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="author" label="作者"></el-table-column> -->
+        <el-table-column prop="journal_name" label="来源"></el-table-column>
+        <!-- <el-table-column prop="publish_time" label="出版时间"></el-table-column> -->
+        <el-table-column prop="ctime" label="发布时间"></el-table-column>
+        <el-table-column prop="read_num" label="阅读量" width="80"></el-table-column>
+        <el-table-column prop="zip" width="150" label="操作">
+          <template slot-scope="scope">
+            <el-button class="edit" type="text" @click="edit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button class="del" @click="del(scope.row.id)" type="text"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <Page
+        ref="pageButton"
+        :current="form.page"
+        :page_size="form.page_size"
+        :total="total"
+        @pageChange="gopage"
+      />
+      <!-- 同步到微信公众号 -->
+      <el-dialog
+        class="fu-dialog"
+        title="同步到微信公众号"
+        width="414px"
+        :close-on-click-modal="false"
+        :visible.sync="dialogVisible"
+      >
+        <!-- <div>
+          <img :src="journalLogo" alt="">
+        </div> -->
+        <div v-loading="loading1">
+          <div v-if="multipleSelection.length" style="position: relative">
+            <img
+              :src="multipleSelection[0].img"
+              alt=""
+              width="390px"
+              height="170px"
+            />
+            <p
+              style="
+                position: absolute;
+                bottom: 20px;
+                left: 10px;
+                font-weight: bold;
+                color: #ffffff;
+                right: 10px;
+              "
+            >
+              {{ multipleSelection[0].name }}
+            </p>
+          </div>
+          <div v-if="multipleSelection.length">
+            <div
+              class="syncitem"
+              v-for="(item, index) in multipleSelection.slice(1, 8)"
+              :key="index"
+            >
+              <p>{{ item.name.substring(0,43) }}</p>
+              <img :src="item.img" alt="" width="48px" height="48px" />
+            </div>
+          </div>
+        </div>
+        <div class="syncbtn">
+          <el-button type="normal" size="small" @click="dialogVisible = false"
+            >取消</el-button
+          >
+          <el-button type="primary" size="small" @click="saveSyncToMP()"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </section>
+</template>
+<script>
+import Page from "../../components/Page";
+import fuEditor from "../../components/fuEditor";
+export default {  
+  components: {
+    Page,
+    fuEditor,
+  },
+  data() {
+    return {
+      loading: false,
+      loading1: false,
+      form: { name: "", page: 1, page_size: 20 },
+      total: 1,
+      list: [{ name: "2333" }],
+      loading: false,
+      rules: {
+        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
+      },
+      dialogVisible: false,
+      journalLogo: "",
+      multipleSelection: [],
+      journalSearch: [],
+    };
+  },
+  methods: {
+    syncToMP() {
+      if (!this.multipleSelection) {
+        this.$message.error("请勾选需要同步到公众号的文章!");
+        return;
+      }
+      this.dialogVisible = true;
+    },
+    saveSyncToMP() {
+      let ids = "";
+      this.multipleSelection.forEach((item, index) => {
+        if (index == 0) {
+          ids += item.id.toString();
+        } else {
+          ids += "," + item.id.toString();
+        }
+      });
+      this.loading1 = true;
+      this.$api.syncToMP({ ids: ids }).then((res) => {
+        this.loading1 = false;
+        if (res.data.code == 0) {
+          this.$confirm(
+            "同步成功，已发送到微信公众号图文消息，即可可前往微信公众号预览！",
+            "提示",
+            {
+              confirmButtonText: "确定",
+              showCancelButton: false,
+              type: "success",
+            }
+          ).then(() => {
+            this.dialogVisible = false;
+          });
+        } else {
+          this.$confirm("同步失败!" + res.data.message, "提示", {
+            confirmButtonText: "确定",
+            showCancelButton: false,
+            type: "error",
+          });
+        }
+      });
+    },
+    handleSelectionChange(val) {
+      console.log(val);
+      this.multipleSelection = val;
+    },
+    search() {
+      let parm = this.form;
+      this.getData();
+    },
+    openDiag() {
+      this.form1 = {};
+      this.dialogVisible = true;
+      this.dialogTitle = "发送消息";
+    },
+    addArticle() {
+      this.$router.push({ path: "/article/news/add" });
+    },
+    gopage(size) {
+      if (size) {
+        this.form.page_size = size;
+      }
+      this.form.page = this.$refs.pageButton.page;
+      this.getData();
+    },
+    getData() {
+      var parm = this.form;
+      this.loading = true;
+      this.$api.searchJournalList().then((res) => {
+        this.journalSearch = res.data.data;
+      });
+      this.$api.getNewsList(parm).then((res) => {
+        console.log(res);
+        this.list = res.data.data.list;
+        this.total = res.data.data.total;
+        this.loading = false;
+      });
+    },
+    del(id) {
+      this.$confirm("确定删除吗", "提示", {
+        type: "warning",
+      }).then(() => {
+        this.$api.delNews({ id: id }).then((res) => {
+          this.$message({
+            message: "删除成功",
+            type: "success",
+          });
+          this.getData();
+        });
+      });
+    },
+    edit(row) {
+      this.$router.push({
+        path: "/article/news/add",
+        query: { id: row.id },
+      });
+    },
+  },
+  created() {
+    if (this.$route.query.id) {
+      this.form.journal_id = this.$route.query.id;
+    }
+    this.getData();
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (from.path.indexOf("add") >= 0) {
+        vm.getData();
+      }
+    });
+  },
+};
+</script>