xjc vor 4 Jahren
Ursprung
Commit
49daa50f89
1 geänderte Dateien mit 112 neuen und 68 gelöschten Zeilen
  1. 112 68
      src/views/article/Article.vue

+ 112 - 68
src/views/article/Article.vue

@@ -74,18 +74,18 @@ a {
     font-weight: 600;
   }
 }
-.syncitem{
-  height:72px;
-  line-height:72px;
-  display:flex;
-  justify-content:space-between;
-  border-bottom:1px solid #ccc;
+.syncitem {
+  height: 72px;
+  line-height: 72px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ccc;
 }
-.syncitem img{
-  margin:10px;
+.syncitem img {
+  margin: 10px;
 }
-.syncbtn{
-  margin-top:20px;
+.syncbtn {
+  margin-top: 20px;
   text-align: center;
 }
 </style>
@@ -110,15 +110,31 @@ a {
           <el-form-item>
             <el-button type="primary" @click="search">搜索</el-button>
           </el-form-item>
-          <el-form-item style="float: right">
-            <el-button @click="syncToMP" type="primary"
-              >同步到公众号</el-button
+          <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-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-item> -->
         </el-form>
       </div>
       <el-table
@@ -134,9 +150,9 @@ a {
       >
         <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column prop="name" label="文章名称"> </el-table-column>
-        <el-table-column prop="img" label="封面图"> 
+        <el-table-column prop="img" label="封面图">
           <template slot-scope="scope">
-            <img :src="scope.row.img" alt="" width="120" height="80">
+            <img :src="scope.row.img" alt="" width="120" height="80" />
           </template>
         </el-table-column>
         <el-table-column prop="author" label="作者"></el-table-column>
@@ -165,28 +181,52 @@ a {
       <!-- 同步到微信公众号 -->
       <el-dialog
         class="fu-dialog"
-        title="同步到微信公众号" width="375px"
+        title="同步到微信公众号"
+        width="375px"
         :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="310px" height="157px">
-            <p style="position:absolute;bottom:20px;left:20px;font-weight:bold;color:#ffffff;">{{multipleSelection[0].name}}</p>
+          <div v-if="multipleSelection.length" style="position: relative">
+            <img
+              :src="multipleSelection[0].img"
+              alt=""
+              width="310px"
+              height="157px"
+            />
+            <p
+              style="
+                position: absolute;
+                bottom: 20px;
+                left: 20px;
+                font-weight: bold;
+                color: #ffffff;
+              "
+            >
+              {{ multipleSelection[0].name }}
+            </p>
           </div>
-          <div  v-if="multipleSelection.length">
-            <div class="syncitem" v-for="(item,index) in multipleSelection" :key="index">
-              <p>{{item.name.substring(0,20)}}</p>
-              <img :src="item.img" alt="" width="48px" height="48px">
+          <div v-if="multipleSelection.length">
+            <div
+              class="syncitem"
+              v-for="(item, index) in multipleSelection"
+              :key="index"
+            >
+              <p>{{ item.name.substring(0, 20) }}</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>
+          <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>
@@ -211,54 +251,55 @@ export default {
       rules: {
         name: [{ required: true, message: "请输入标题", trigger: "blur" }],
       },
-      dialogVisible:false,
-      journalLogo:"",
-      multipleSelection:[]
+      dialogVisible: false,
+      journalLogo: "",
+      multipleSelection: [],
+      journalSearch:[]
     };
   },
   methods: {
-    syncToMP(){
-      if(!this.multipleSelection){
-        this.$message.error("请勾选需要同步到公众号的文章!")
-        return 
+    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()
+    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.$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{
+        if (res.data.code == 0) {
           this.$confirm(
-            "同步失败!"+res.data.message,
+            "同步成功,已发送到微信公众号图文消息,即可可前往微信公众号预览!",
             "提示",
             {
               confirmButtonText: "确定",
               showCancelButton: false,
-              type: "error",
+              type: "success",
             }
-          );
+          ).then(() => {
+            this.dialogVisible = false;
+          });
+        } else {
+          this.$confirm("同步失败!" + res.data.message, "提示", {
+            confirmButtonText: "确定",
+            showCancelButton: false,
+            type: "error",
+          });
         }
-      })
+      });
     },
     handleSelectionChange(val) {
-      console.log(val)
+      console.log(val);
       this.multipleSelection = val;
     },
     search() {
@@ -283,10 +324,13 @@ export default {
     getData() {
       var parm = this.form;
       this.loading = true;
+      this.$api.searchJournalList().then((res)=>{
+        this.journalSearch = res.data.data
+      })
       this.$api.getArticleList(parm).then((res) => {
         console.log(res);
         this.list = res.data.data.list;
-        this.total=res.data.data.total
+        this.total = res.data.data.total;
         this.loading = false;
       });
     },
@@ -347,17 +391,17 @@ export default {
     },
   },
   created() {
-     if(this.$route.query.id){
-      this.form.journal_id=this.$route.query.id
+    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()
-            }
-        })
-  }
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (from.path.indexOf("add") >= 0) {
+        vm.getData();
+      }
+    });
+  },
 };
 </script>