Kaynağa Gözat

feat: 解决,设备管理,设备文章详情,翻页面,回到之前界面数据不刷新

332777428@qq.com 2 ay önce
ebeveyn
işleme
feb5ad5432
2 değiştirilmiş dosya ile 144 ekleme ve 88 silme
  1. 31 27
      src/router/index.js
  2. 113 61
      src/views/device/article/detail.vue

+ 31 - 27
src/router/index.js

@@ -95,16 +95,16 @@ export const dynamicRoutes = [
 
   // 视频管理
   {
-    path: '/content',
     name: "videoIndex",
+    path: '/content',
     component: Layout,
     hidden: true,
     permissions: ['content:video:list'],
     name: 'videoList',
     children: [{
+      name: 'videoDetail',
       path: 'video/detail',
       component: () => import('@/views/content/video/detail'),
-      name: 'videoDetail',
       meta: {
         title: '视频详情',
         activeMenu: '/content/video'
@@ -114,15 +114,15 @@ export const dynamicRoutes = [
 
   // 文章管理
   {
-    path: '/content',
     name: 'articleIndex',
+    path: '/content',
     component: Layout,
     hidden: true,
     permissions: ['content:articleList:list'],
     children: [{
+      name: 'articleDetail',
       path: 'articleList/detail',
       component: () => import('@/views/content/article/detail'),
-      name: 'articleDetail',
       meta: {
         title: '文章详情',
         activeMenu: '/content/articleList'
@@ -133,15 +133,16 @@ export const dynamicRoutes = [
   //****************** 设备管理 *******************//
   // 设备列表
   {
-    path: '/device',
     name: "deviceList",
+    path: '/device',
     component: Layout,
     hidden: true,
     permissions: ['device:list:list'],
     children: [{
+      name: 'deviceListDetail',
       path: 'deviceList/detail',
       component: () => import('@/views/device/list/detail'),
-      name: 'deviceListDetail',
+
       meta: {
         title: '设备详情',
         activeMenu: '/device/deviceList'
@@ -152,15 +153,15 @@ export const dynamicRoutes = [
 
   ///设备大类
   {
-    path: '/device',
     name: "deviceClass",
+    path: '/device',
     component: Layout,
     hidden: true,
     permissions: ['device:class:list'],
     name: 'class',
     children: [{
-      path: 'class/detail',
       name: 'deviceClassDetail',
+      path: 'class/detail',
       component: () => import('@/views/device/class/detail'),
       meta: {
         title: '大类详情',
@@ -171,14 +172,14 @@ export const dynamicRoutes = [
 
   // 设备升级
   {
-    path: '/device',
     name: 'deviceVersion',
+    path: '/device',
     component: Layout,
     hidden: true,
     permissions: ['device:version:list'],
     children: [{
-      path: 'version/detail',
       name: 'deviceVersionDetail',
+      path: 'version/detail',
       component: () => import('@/views/device/version/detail'),
       meta: {
         title: '设备升级详情',
@@ -187,6 +188,26 @@ export const dynamicRoutes = [
     }]
   },
 
+  // 设备文章
+  {
+    name: 'deviceArticle',
+    path: '/device',
+    component: Layout,
+    hidden: true,
+    permissions: ['device:article:list'],
+    name: 'article',
+    children: [{
+      name: 'deviceArticleDetail',
+      path: 'article/detail',
+      component: () => import('@/views/device/article/detail'),
+      meta: {
+        title: '文章详情',
+        activeMenu: '/device/article'
+      }
+    }]
+  },
+
+
 
 
 
@@ -296,23 +317,6 @@ export const dynamicRoutes = [
 
 
 
-  // 设备文章
-  {
-    path: '/device',
-    component: Layout,
-    hidden: true,
-    permissions: ['device:article:list'],
-    name: 'article',
-    children: [{
-      path: 'article/detail',
-      component: () => import('@/views/device/article/detail'),
-      name: 'devArticleDetail',
-      meta: {
-        title: '文章详情',
-        activeMenu: '/device/article'
-      }
-    }]
-  },
   // 音频管理
   // 歌手
   {

+ 113 - 61
src/views/device/article/detail.vue

@@ -2,8 +2,18 @@
   <div class="app-container">
     <el-form label-width="100px" :model="form" :rules="rules" ref="form">
       <el-form-item label="关联设备:" prop="linkDevice">
-        <el-select v-model="form.linkDevice" filterable multiple placeholder="请选择关联设备">
-          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value.toString()" />
+        <el-select
+          v-model="form.linkDevice"
+          filterable
+          multiple
+          placeholder="请选择关联设备"
+        >
+          <el-option
+            v-for="item in devOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value.toString()"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="文章标题:" prop="title">
@@ -13,14 +23,27 @@
         <Editor v-model="form.content" :min-height="250" />
       </el-form-item>
       <el-form-item label="背景图:" prop="pic">
-        <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" />
+        <Upload
+          listType="picture-card"
+          :url="form.pic"
+          @upload="upload($event, 'pic')"
+        />
       </el-form-item>
       <el-form-item label="分享图:" prop="shareIcon">
-        <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')" />
+        <Upload
+          listType="picture-card"
+          :url="form.shareIcon"
+          @upload="upload($event, 'shareIcon')"
+        />
       </el-form-item>
       <el-form-item label="文章状态:" prop="status" v-if="this.form.id">
         <el-select v-model="form.status" placeholder="请选择文章状态">
-          <el-option v-for="item in disabledOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option
+            v-for="item in disabledOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
     </el-form>
@@ -32,103 +55,132 @@
 </template>
 
 <script>
-import { create, detail, edit } from '@/api/device/article'
-import { devMixin, disabledMixin } from '@/mixin/index'
-import Editor from '@/components/Editor/index'
+import { create, detail, edit } from "@/api/device/article";
+import Editor from "@/components/Editor/index";
+import { devMixin, disabledMixin } from "@/mixin/index";
 export default {
+  name: "deviceArticleDetail",
   mixins: [devMixin, disabledMixin],
   components: {
-    Editor
+    Editor,
   },
   data() {
     return {
       // 表单
       form: {
-        linkDevice: []
+        linkDevice: [],
       },
       // 校验
       rules: {
-        linkDevice: [{
-          required: true, message: '请选择关联设备', trigger: 'change'
-        }],
-        title: [{
-          required: true, message: '请输入文章标题', trigger: 'blur'
-        }],
-        pic: [{
-          required: true, message: '请上传文章背景图', trigger: 'change'
-        }],
-        content: [{
-          required: true, message: '请输入文章内容', trigger: 'blur'
-        }],
-        shareIcon: [{
-          required: true, message: '请上传文章分享图', trigger: 'change'
-        }],
-        status: [{
-          required: true, message: '请选择文章状态', trigger: 'change'
-        }]
-      }
-    }
+        linkDevice: [
+          {
+            required: true,
+            message: "请选择关联设备",
+            trigger: "change",
+          },
+        ],
+        title: [
+          {
+            required: true,
+            message: "请输入文章标题",
+            trigger: "blur",
+          },
+        ],
+        pic: [
+          {
+            required: true,
+            message: "请上传文章背景图",
+            trigger: "change",
+          },
+        ],
+        content: [
+          {
+            required: true,
+            message: "请输入文章内容",
+            trigger: "blur",
+          },
+        ],
+        shareIcon: [
+          {
+            required: true,
+            message: "请上传文章分享图",
+            trigger: "change",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择文章状态",
+            trigger: "change",
+          },
+        ],
+      },
+    };
   },
   mounted() {
-    this.getDevList()
+    this.getDevList();
     if (this.$route.query.id) {
-      this.form.id = this.$route.query.id
-      this.getList()
+      this.form.id = this.$route.query.id;
+      this.getList();
     }
   },
   methods: {
     // 详情
     getList() {
       detail({
-        id: this.form.id
-      }).then(res => {
+        id: this.form.id,
+      }).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
-          this.form.linkDevice = res.data.linkDevice.split(',')
+          this.form = res.data;
+          this.form.linkDevice = res.data.linkDevice.split(",");
         }
-      })
+      });
     },
 
     // 上传
     upload(e, key) {
-      this.form[key] = e.file
+      this.form[key] = e.file;
     },
 
     // 提交
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.form.linkDevice = this.form.linkDevice.join(',')
+          this.form.linkDevice = this.form.linkDevice.join(",");
           if (this.form.id) {
-            edit(this.form).then(res => {
-              if (res.code === 0) {
-                this.$message.success('修改成功!')
-                this.cancel()
-              }
-            }).catch(err => {
-              this.form.linkDevice = this.form.linkDevice.split(',')
-            })
+            edit(this.form)
+              .then((res) => {
+                if (res.code === 0) {
+                  this.$message.success("修改成功!");
+                  this.cancel();
+                }
+              })
+              .catch((err) => {
+                this.form.linkDevice = this.form.linkDevice.split(",");
+              });
           } else {
-            create(this.form).then(res => {
-              if (res.code === 0) {
-                this.$message.success('新增成功!')
-                this.cancel()
-              }
-            }).catch(err => {
-              this.form.linkDevice = this.form.linkDevice.split(',')
-            })
+            create(this.form)
+              .then((res) => {
+                if (res.code === 0) {
+                  this.$message.success("新增成功!");
+                  this.cancel();
+                }
+              })
+              .catch((err) => {
+                this.form.linkDevice = this.form.linkDevice.split(",");
+              });
           }
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     // 取消
     cancel() {
       this.$tab.closeOpenPage("/device/article");
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>