添加技术圈标签管理

pages/main/index/jishuquan.vue

@@ -36,12 +36,22 @@
 
     </template>
     <template v-if="tab==='topic'">
+
+      <el-radio-group v-model="labelTab" size="small" @change="getList" style="margin-top: 20px;">
+        <el-radio-button label="">全部</el-radio-button>
+        <el-radio-button label="is_top">置顶</el-radio-button>
+        <el-radio-button label="is_must_see">进站必看</el-radio-button>
+        <el-radio-button label="is_hot">热门</el-radio-button>
+        <el-radio-button label="is_good">优质</el-radio-button>
+        <el-radio-button label="is_new">最新</el-radio-button>
+        <el-radio-button label="is_ad">广告</el-radio-button>
+      </el-radio-group>
       <div class="content" v-if="topics">
         <el-table :data="topics" height="100%" border style="width: 100%">
           <el-table-column prop="title" label="文章标题"></el-table-column>
           <el-table-column prop="nickname" label="作者"></el-table-column>
           <el-table-column prop="created_at" label="发布时间"></el-table-column>
-          <el-table-column label="基本数据" width="290px">
+          <el-table-column label="基本数据" width="280px">
             <template slot-scope="topic" v-if="tab==='topic'">
               <el-tag type="success">浏览{{topic.row.view_count}}</el-tag>
               <el-tag type="info">点赞{{topic.row.like_count}}</el-tag>
@@ -49,26 +59,25 @@
               <el-tag type="danger">评论{{topic.row.reply_count}}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="380px" v-if="tab==='topic'">
+          <el-table-column label="当前标签" width="280px">
+            <template slot-scope="label" v-if="tab==='topic'">
+              <el-tag type="info" v-if="label.row.is_top==1" class="custom-label">置顶</el-tag>
+              <el-tag type="info" v-if="label.row.is_must_see==1" class="custom-label">进站必看</el-tag>
+              <el-tag type="info" v-if="label.row.is_hot==1" class="custom-label">热门</el-tag>
+              <el-tag type="info" v-if="label.row.is_good==1" class="custom-label">优质</el-tag>
+              <el-tag type="info" v-if="label.row.is_new==1" class="custom-label">最新</el-tag>
+              <el-tag type="info" v-if="label.row.is_ad==1" class="custom-label">广告</el-tag>
+
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="260px" v-if="tab==='topic'">
             <template slot-scope="topic" v-if="tab==='topic'">
-              <template v-if="Number(topic.row.order) > 0">
-                <el-button type="primary" @click="topTopic(topic.row.id,topic.row.order)">取消置顶<i
-                  class="el-icon-top el-icon--right"></i>
+              <template>
+                <el-button type="primary" @click="editLabel(topic.row)">标签管理<i
+                  class="el-icon-setting el-icon--right"></i>
                 </el-button>
               </template>
-              <template v-if="Number(topic.row.order) === 0">
-                <el-button type="primary" @click="topTopic(topic.row.id,topic.row.order)">置顶<i
-                  class="el-icon-top el-icon--right"></i>
-                </el-button>
-              </template>
-              <template v-if="topic.row.is_excellent==='yes'">
-                <el-button type="success" @click="recTopic(topic.row.id,topic.row.is_excellent)">取消推荐<i
-                  class="el-icon-collection-tag el-icon--right"></i></el-button>
-              </template>
-              <template v-if="topic.row.is_excellent==='no'">
-                <el-button type="success" @click="recTopic(topic.row.id,topic.row.is_excellent)">推荐<i
-                  class="el-icon-collection-tag el-icon--right"></i></el-button>
-              </template>
               <el-button type="danger" @click="delTopic(topic.row.id)">删除<i
                 class="el-icon-delete el-icon--right"></i></el-button>
             </template>
@@ -149,6 +158,52 @@
         <el-button type="primary" @click="editAd">确 定</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="标签管理" :visible.sync="labelEditFormVisible">
+      <el-form :model="form">
+        <el-form-item label="当前标签" :label-width="formLabelWidth">
+          <el-tag type="info" v-if="this.currentLabel.is_top===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_top')">置顶
+          </el-tag>
+          <el-tag type="info" v-if="this.currentLabel.is_must_see===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_must_see')">进站必看
+          </el-tag>
+          <el-tag type="info" v-if="this.currentLabel.is_hot===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_hot')">热门
+          </el-tag>
+          <el-tag type="info" v-if="this.currentLabel.is_good===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_good')">优质
+          </el-tag>
+          <el-tag type="info" v-if="this.currentLabel.is_new===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_new')">最新
+          </el-tag>
+          <el-tag type="info" v-if="this.currentLabel.is_ad===1" class="custom-label" closable
+                  :disable-transitions="false"
+                  @close="handleClose('is_ad')">广告
+          </el-tag>
+        </el-form-item>
+        <el-form-item label="添加标签" :label-width="formLabelWidth">
+          <el-select v-model="addCurrentLabel" placeholder="请选择位置">
+            <el-option label="暂不添加" value=""></el-option>
+            <el-option label="置顶" value="is_top"></el-option>
+            <el-option label="进站必看" value="is_must_see"></el-option>
+            <el-option label="热门" value="is_hot"></el-option>
+            <el-option label="优质" value="is_good"></el-option>
+            <el-option label="最新" value="is_new"></el-option>
+            <el-option label="广告" value="is_ad"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addLabel">添 加</el-button>
+        <el-button @click="labelEditFormVisible = false;getList()">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -156,6 +211,7 @@
   export default {
     data() {
       return {
+        labelTab: "",
         page: 1,
         size: 20,
         tab: 'ad',
@@ -163,6 +219,7 @@
         ads: [],
         topics: [],
         videos: [],
+        addCurrentLabel: '',
         form: {
           title: '',
           url: '',
@@ -171,66 +228,80 @@
           status: '1',
           position: '1'
         },
+        currentLabel: {
+          is_ad: 0,
+          is_new: 0,
+          is_good: 0,
+          is_hot: 0,
+          is_must_see: 0,
+          is_top: 0
+        },
+        currentId: 0,
         dialogFormVisible: false,
         formLabelWidth: '120px',
+        labelEditFormVisible: false
       };
     },
     mounted() {
       this.getList();
     },
     methods: {
-      topTopic(id, order) {
-        let hint = '是否置顶文章?';
-        if (order > 0) {
-          hint = '是否取消推荐文章?';
-        }
-        this.$confirm(hint, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let res = this.$post('/api/admin/jishuquan/top_topic', {id: id}).then(res => {
+      addLabel() {
+        if (this.addCurrentLabel) {
+          let res = this.$post('/api/admin/jishuquan/add_label', {
+            id: this.currentId,
+            type: this.addCurrentLabel
+          }).then(res => {
             if (res.status === 1) {
+              this.currentLabel[this.addCurrentLabel] = 1;
               this.$message({
                 type: 'success',
-                message: '操作成功!'
+                message: '添加成功!'
               });
-              this.getList();
             }
           });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消'
-          });
-        });
-      },
-      recTopic(id, status) {
-        let hint = '是否推荐文章?';
-        if (status === 'yes') {
-          hint = '是否取消推荐文章?';
         }
-        this.$confirm(hint, '提示', {
+      },
+      handleClose(type) {
+        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          let res = this.$post('/api/admin/jishuquan/rec_topic', {id: id}).then(res => {
+          let res = this.$post('/api/admin/jishuquan/remove_label', {id: this.currentId, type: type}).then(res => {
             if (res.status === 1) {
+              this.currentLabel[type] = 0;
               this.$message({
                 type: 'success',
-                message: '操作成功!'
+                message: '删除成功!'
               });
-              this.getList();
             }
           });
         }).catch(() => {
           this.$message({
             type: 'info',
-            message: '已取消'
+            message: '已取消删除'
           });
         });
       },
+      editLabel(topic) {
+        this.currentLabel = {
+          is_ad: 0,
+          is_new: 0,
+          is_good: 0,
+          is_hot: 0,
+          is_must_see: 0,
+          is_top: 0
+        };//复位
+        this.currentId = topic.id;
+        if (Number(topic.is_ad) === 1) this.currentLabel.is_ad = 1;
+        if (Number(topic.is_new) === 1) this.currentLabel.is_new = 1;
+        if (Number(topic.is_hot) === 1) this.currentLabel.is_hot = 1;
+        if (Number(topic.is_top) === 1) this.currentLabel.is_top = 1;
+        if (Number(topic.is_good) === 1) this.currentLabel.is_good = 1;
+        if (Number(topic.is_must_see) === 1) this.currentLabel.is_must_see = 1;
+        this.labelEditFormVisible = true;
+      },
       delTopic(id) {
         this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
           confirmButtonText: '确定',
@@ -311,7 +382,6 @@
         }
         this.dialogFormVisible = true;
       },
-
       deleteAd(id) {
         this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
           confirmButtonText: '确定',
@@ -388,6 +458,7 @@
             this.total = res.data.total;
             break;
           case 'topic':
+            if (this.labelTab) data.type = this.labelTab;
             res = await this.$post("/api/admin/jishuquan/get_topics", data);
             this.topics = res.data.topics;
             this.total = res.data.total;
@@ -438,4 +509,8 @@
   .order-footer {
     margin-top: 10px;
   }
+
+  .custom-label {
+    margin-bottom: 5px;
+  }
 </style>