文章上下线功能

src/utils/get-img-width.js

@@ -1,5 +1,29 @@
 import { Message } from 'element-ui'
-export default function (file, width, height) {
+export default function (file, id) {
+    let width = 0;
+    let height = 0;
+    switch (id) {
+        case 23: //深度解说
+            width = 650;
+            height = 350;
+            break;
+        case 25: //行情分析
+            width = 130;
+            height = 130;
+            break;
+        case 24: //热点追踪
+            width = 130;
+            height = 130;
+            break;
+        case 7: //基础教程
+            width = 380;
+            height = 220;
+            break;
+        case 6: //图文教程
+            width = 380;
+            height = 220;
+            break;
+    };
     return new Promise(resolve => {
         let reader = new FileReader();
         reader.readAsDataURL(file);
@@ -8,15 +32,20 @@ export default function (file, width, height) {
             let img = document.createElement("img");
             img.src = txt;
             img.onload = function () {
-                if (img.width === width && img.height === height) {
-                    resolve(true)
+                console.log(id, width, height);
+                if (width && height) {
+                    if (img.width === width && img.height === height) {
+                        resolve(true)
+                    } else {
+                        Message({
+                            message: `图片上传失败,宽高错误`,
+                            type: "warning",
+                            duration: 5000
+                        });
+                        resolve(false);
+                    }
                 } else {
-                    Message({
-                        message: `图片上传失败,宽高错误`,
-                        type: "warning",
-                        duration: 5000
-                    });
-                    resolve(false);
+                    resolve(true)
                 }
             };
         };

src/views/article/index.vue

@@ -3,7 +3,7 @@
     <el-card class="box-card">
       <el-row :gutter="20">
         <!--部门数据-->
-        <el-col :span="4" :xs="24">
+        <el-col :span="3" :xs="24">
           <div class="head-container">
             <el-input
               v-model="deptName"
@@ -125,6 +125,22 @@
                 <span>{{ row.url }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="文章状态" align="center">
+              <template slot-scope="{ row }">
+                <div>
+                  <el-switch
+                    style="display: block"
+                    v-model="row.is_offline"
+                    active-color="#409EFF"
+                    inactive-color="#ff4949"
+                    :active-value="2"
+                    :inactive-value="1"
+                    @change="changeSwitch($event, row)"
+                  >
+                  </el-switch>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column label="标签详情">
               <template slot-scope="{ row }">
                 <span>{{ row.label_name | getTagDetail }}</span>
@@ -233,6 +249,12 @@
           <el-form-item label="描述" prop="description">
             <el-input type="textarea" v-model="temp.description" />
           </el-form-item>
+          <el-form-item label="状态">
+            <el-radio-group v-model="temp.is_offline" @change="changeRadio">
+              <el-radio :label="2">上线</el-radio>
+              <el-radio :label="1">下线</el-radio>
+            </el-radio-group>
+          </el-form-item>
           <el-form-item label="封面" prop="img" required>
             <img
               v-if="temp.img"
@@ -308,6 +330,7 @@ import VueUeditorWrap from "vue-ueditor-wrap";
 import { listCategory } from "@/api/category";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { log } from "console";
 
 export default {
   name: "articleIndex",
@@ -321,6 +344,7 @@ export default {
       },
       // 状态数据字典
       statusOptions: [
+        { value: "", label: "全部" },
         { value: 2, label: "上线" },
         { value: 1, label: "下线" },
       ],
@@ -332,7 +356,7 @@ export default {
       listQuery: {
         page: 1,
         limit: 20,
-        is_offline: 2,
+        is_offline: "",
         title: "",
         label_name: "",
         category_id: undefined,
@@ -358,6 +382,7 @@ export default {
         content: "",
         description: "",
         video_time: "",
+        is_offline: 2,
       },
       dialogFullscreen: true,
       dialogFormVisible: false,
@@ -439,34 +464,22 @@ export default {
     },
   },
   methods: {
+    changeRadio(e) {
+      this.temp.is_offline = Number(e);
+    },
+    // 文章开关发生变化
+    changeSwitch(e, item) {
+      item.is_offline = Number(e);
+      updateArticle(item).then((r) => {
+        this.$message({
+          type: "success",
+          message: `${e == 2 ? "通知：文章上线成功" : "通知：文章下线成功"}`,
+        });
+      });
+    },
     // 验证图片宽高
     async validationImages(file) {
-      let width = 0;
-      let height = 0;
-      console.log(this.temp);
-      switch (this.temp.category_id) {
-        case 23: //深度解说
-          width = 650;
-          height = 350;
-          break;
-        case 25: //行情分析
-          width = 130;
-          height = 130;
-          break;
-        case 24: //热点追踪
-          width = 130;
-          height = 130;
-          break;
-        case 7: //基础教程
-          width = 380;
-          height = 220;
-          break;
-        case 6: //图文教程
-          width = 380;
-          height = 220;
-          break;
-      }
-      let res = await this.$getImgWidth(file, width, height);
+      let res = await this.$getImgWidth(file, this.temp.category_id);
       this.validation = res;
       return res;
     },
@@ -497,7 +510,11 @@ export default {
     getList() {
       this.listLoading = true;
       fetchList(this.listQuery).then((response) => {
-        console.log(response);
+        response.data.list.forEach((item) => {
+          // if (!item.is_offline) {
+          //   item.is_offline = 2;
+          // }
+        });
         this.list = response.data.list;
         this.total = response.data.count;
         // Just to simulate the time of the request
@@ -524,6 +541,7 @@ export default {
         title: "",
         time: "",
         img: "",
+        is_offline: 2,
         script_url: "",
         content: "",
         description: "",
@@ -572,6 +590,9 @@ export default {
       this.resetTemp();
       this.dialogFormVisible = true;
       fetchArticleDetails({ article_id }).then((res) => {
+        if (!res.data.is_offline) {
+          res.data.is_offline = 2;
+        }
         this.temp = res.data;
         if (this.temp.label_name) {
           let data = JSON.parse(this.temp.label_name);
@@ -631,7 +652,6 @@ export default {
         .catch(function () {});
     },
     uploadSuccess(response, file) {
-      console.log(response);
       if (response.state == "SUCCESS" && this.validation) {
         this.temp.img = response.url;
       }