文章管理

src/router/index.js

@@ -126,63 +126,27 @@ export const constantRoutes = [
         name: 'Article-management',
         meta: { title: '文章管理', icon: 'component' }
       },
+      // 文章编辑路由
       {
         path: 'article-edit',
         props: true,
         component: () => import('@/views/article-management/article-edit'),
         name: 'Article-edit',
         meta: { title: '文章编辑', icon: 'component' }
-      }
-    ]
-  },
-  // 文章编辑路由
-  {
-    path: '/',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:article:edit'],
-    children: [
-      {
-        path: 'article-management/article-management/article-edit/:id',
-        component: () => import('@/views/article-management/article-edit'),
-        name: 'ArticleEdit',
-        props: true,
-        meta: {
-          title: '文章编辑',
-          activeMenu: '/article-management'
-        }
-      }
-    ]
-  },
-  // 文章详情路由
-  {
-    path: '/',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:article:query'],
-    children: [
-
+      },
+      // 文章详情路由
       {
-        path: 'article-management/article-management/article-detail/:id',
+        path: 'article-detail/:id',
         component: () => import('@/views/article-management/article-detail'),
         name: 'ArticleDetail',
         props: true,
         meta: {
-          title: '文章详情',
-          activeMenu: '/article-management'
+          title: '文章详情',icon: 'component'
         }
-      }
-    ]
-  },
-  // 文章添加路由
-  {
-    path: '/',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:article:insert'],
-    children: [
+      },
+        // 文章添加路由
       {
-        path: 'article-management/article-management/article-insert',
+        path: 'article-insert',
         component: () => import('@/views/article-management/article-insert'),
         name: 'ArticleInsert',
         props: true,
@@ -193,6 +157,7 @@ export const constantRoutes = [
       }
     ]
   },
+
   //行政详情路由
   {
     path:'/administrative-management',

src/views/article-management/article-detail.vue

@@ -9,62 +9,73 @@ font-family: Microsoft YaHei-Bold, Microsoft YaHei;
 font-weight: bold;
 color: #333333;">查看</span>
       </div>
-      <!--整个框架边距是20px-->
       <div style="padding: 20px;">
-        <!--   0-- 文章信息--标签头 -->
         <div style="display: flex">
+          <!--  文章信息 -->
           <div class="tip-green"/>
-          <div style="padding-top: 3px;padding-left: 18px; color: #666666; font-weight: 600; font-size: 17px;">文章封面
+          <div
+            style="padding-left: 13px;font-size: 16px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;"
+          >文章信息
           </div>
         </div>
-        <!--   0-- 文章信息的页面--文章封面 -->
+        <!--   0-- 文章信息的页面--修改文章信息 -->
         <div class="base-msg">
-          <div class="petPicture" style="padding-bottom: 40px;">
-            <el-card shadow="hover" style="width: 150px;height: 150px;position: center">
-              <el-image :src="baseURL+form.articleCover" fit="cover"/>
-            </el-card>
+          <div style="display:flex;">
+            <el-form  ref="form" :model="form" :rules="rules" label-width="80px">
+              <el-form-item style="padding-top: 32px;" label="文章标题"  prop="articleTitle">
+                <el-input disabled v-model="form.articleTitle" placeholder="请输入文章标题"/>
+              </el-form-item>
+              <el-form-item label="权重" prop="articleWeight">
+                <el-input-number disabled v-model="form.articleWeight" :max="9999" :min="1" controls-position="right"
+                ></el-input-number>
+              </el-form-item>
+              <el-form-item label="文章封面" prop="articleCover">
+                <!--   0-- 文章信息的页面--文章封面 -->
+                <div class="base-msg">
+                  <div class="petPicture" style="padding-bottom: 20px;">
+                    <el-card shadow="hover" style="width: 150px;height: 150px;position: center">
+                      <el-image :src="baseURL+form.articleCover" fit="cover"/>
+                    </el-card>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item  label="状态" prop="articleStatus">
+                <div style="display: flex; ">
+                  <div style="padding-right: 15px;">
+                    <el-switch
+                      disabled
+                      v-model="form.articleStatus"
+                               active-color="#13ce66"
+                               active-value="0"
+                               inactive-color="#ff4949"
+                               inactive-value="1"
+                    >
+                    </el-switch>
+                  </div>
+                  <div v-if="form.articleStatus==='0'" style="padding-top: 1px;">已上架</div>
+                  <div v-else-if="form.articleStatus==='1'" style="padding-top: 1px;">已下架</div>
+                </div>
+              </el-form-item>
+              <!--   2-- 文章信息--文章内容 -->
+              <div style="display: flex">
+                <!--  文章内容-->
+                <div class="tip-green"/>
+                <div
+                  style="padding-left: 13px;font-size: 16px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;"
+                >文章内容
+                </div>
+              </div>
+              <!--   2-- 文章信息的页面--文章内容 -->
+              <div class="base-msg" style="padding-top: 32px; padding-bottom: 20px; padding-left: 1%;">
+                <el-row>
+                  <div v-html="form.articleContent"></div>
+                </el-row>
+              </div>
+            </el-form>
           </div>
         </div>
-        <!--   1-- 文章信息--文章信息 -->
-        <div style="display: flex">
-          <div class="tip-green"/>
-          <div style="padding-top: 3px;padding-left: 18px; color: #666666; font-weight: 600; font-size: 17px;">基础信息
-          </div>
-        </div>
-        <!--   1-- 文章信息的页面--文章信息 -->
-        <div class="base-msg">
-          <el-row>
-            <el-col :span="8">
-              <div>文章标题:{{ form.articleTitle }}</div>
-            </el-col>
-            <el-col :span="8">
-              <div>权重:{{ form.articleWeight }}</div>
-            </el-col>
-            <el-col :span="8">
-              <div style="display: flex;">
-              <div>状态:</div><div><dict-tag :options="dict.type.article_status" :value="form.articleStatus"/></div></div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8" style="padding-top: 15px;">
-              <div>创建时间:{{ form.articleCreateTime }}</div>
-            </el-col>
-          </el-row>
-        </div>
-        <!--   2-- 文章信息--文章内容 -->
-        <div style="display: flex">
-          <div class="tip-green"/>
-          <div style="padding-top: 3px;padding-left: 18px; color: #666666; font-weight: 600; font-size: 17px;">文章内容
-          </div>
-        </div>
-        <!--   2-- 文章信息的页面--文章内容 -->
-        <div class="base-msg">
-          <el-row>
-              <div v-html="form.articleContent"></div>
-          </el-row>
-        </div>
         <div slot="footer" class="dialog-footer">
-          <el-button size="mini" type="success" @click="goBack">返回</el-button>
+          <el-button class="queryBtn" @click="goBack">返回</el-button>
         </div>
       </div>
     </el-card>
@@ -76,12 +87,10 @@ color: #333333;">查看</span>
 //导入获取文章信息的接口
 import { checkRole } from '@/utils/permission'
 import { selectDictLabel } from '@/utils/ruoyi'
-import { getArticle } from '@/api/business/article'
-import ExceptionLogManagement from '@/views/log-management/exception-log-management/exception-log-management.vue'
+import { addArticle, getArticle, listArticle, updateArticle } from '@/api/business/article'
 
 export default {
-  name: 'article-detail',
-  components: { ExceptionLogManagement },
+  name: 'article-edit',
   // 数据字典
   dicts: ['article_status'],
 
@@ -94,16 +103,9 @@ export default {
   },
   data() {
     return {
-      // 状态下拉框
-      articleStatusList: [{
-        label: '已上架',
-        value: '0'
-      }, {
-        label: '已下架',
-        value: '1'
-      }],
       // 图片访问
       baseURL: process.env.VUE_APP_BASE_API,
+
       // 弹出层标题
       title: '',
       // 是否显示弹出层
@@ -111,7 +113,18 @@ export default {
       // 状态位
       value: true,
 // 表单参数
-      form: {}
+      form: {},
+      // 表单校验
+      rules: {
+        // 文章状态不能为空
+        articleStatus: [
+          { required: true, message: '状态不能为空', trigger: 'change' }
+        ],
+        // 权重不能为空
+        articleWeight: [
+          { required: true, message: '权重不能为空', trigger: 'change' }
+        ]
+      }
     }
   },
   created() {
@@ -127,6 +140,26 @@ export default {
         this.form = row.data
       })
     },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateArticle(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addArticle(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
     selectDictLabel,
     checkRole,
     // 应用于表格 如果是admin, 则返回-
@@ -140,7 +173,7 @@ export default {
     /** 返回跳转列表页 */
     goBack() {
       this.$router.push({
-        path: '/article-management'
+        path: '/article-management/index'
       })
     }
   }
@@ -152,7 +185,6 @@ export default {
 .pet-owner-detail {
   //最外层嵌套卡片的样式
   .box-card {
-    margin: 20px 20px 20px 20px;
   }
 
 
@@ -182,12 +214,12 @@ export default {
 
   //1--基本信息--模块内信息整体样式
   .base-msg {
-    color: #666666;
+    //color: #666666;
     //display: grid !important;
     //grid-template-columns: repeat(3, auto);
-    margin-top: 20px;
-    margin-bottom: 20px;
-    margin-left: 5%;
+    //margin-top: 20px;
+    //margin-bottom: 20px;
+    //margin-left: 5%;
   }
 
 
@@ -196,4 +228,7 @@ export default {
     background-color: #F6FCF5 !important;
   }
 }
+::v-deep .el-card__body{
+  padding :unset !important;
+}
 </style>

src/views/article-management/article-edit.vue

@@ -52,8 +52,8 @@ color: #333333;">编辑</span>
           </div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">提交</el-button>
-          <el-button @click="goBack">返回</el-button>
+          <el-button class="queryBtn" @click="submitForm">提交</el-button>
+          <el-button class="resetBtn" @click="goBack">返回</el-button>
         </div>
       </div>
     </el-card>

src/views/article-management/article-insert.vue

@@ -51,8 +51,8 @@ color: #333333;">新增</span>
           </div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">提交</el-button>
-          <el-button @click="goBack">返回</el-button>
+          <el-button class="queryBtn" @click="submitForm">提交</el-button>
+          <el-button class="resetBtn" @click="goBack">返回</el-button>
         </div>
       </div>
     </el-card>
@@ -134,7 +134,7 @@ export default {
     /** 返回跳转列表页 */
     goBack() {
       this.$router.push({
-        path: '/article-management'
+        path: '/article-management/index'
       })
     }
   }