文章管理

ruoyi-ui/src/views/system/article/index.vue

@@ -1,22 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
       <el-form-item label="文章标题" prop="title">
-        <el-input
+        <el-input v-model="queryParams.title" placeholder="请输入文章标题" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.title"
-          placeholder="请输入文章标题"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="文章所属分类" prop="articleCat">
         <el-select v-model="queryParams.articleCat" placeholder="请选择文章所属分类" clearable>
-          <el-option
+          <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
-            v-for="dict in dict.type.article_cat"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -27,46 +17,20 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['system:article:add']">新增</el-button>
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:article:add']"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-          type="success"
+          v-hasPermi="['system:article:edit']">修改</el-button>
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:article:edit']"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-          type="danger"
+          v-hasPermi="['system:article:remove']">删除</el-button>
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:article:remove']"
-        >删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-          type="warning"
+          v-hasPermi="['system:article:export']">导出</el-button>
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:article:export']"
-        >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -78,42 +42,27 @@
       <el-table-column label="简介" align="center" prop="description" />
       <el-table-column label="封面图" align="center" prop="coverImg" width="100">
         <template slot-scope="scope">
-          <image-preview :src="scope.row.coverImg" :width="50" :height="50"/>
+          <image-preview :src="scope.row.coverImg" :width="50" :height="50" />
         </template>
       </el-table-column>
       <el-table-column label="内容" align="center" prop="content" />
       <el-table-column label="文章所属分类" align="center" prop="articleCat">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.article_cat" :value="scope.row.articleCat"/>
+          <dict-tag :options="dict.type.article_cat" :value="scope.row.articleCat" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            size="mini"
+            v-hasPermi="['system:article:edit']">修改</el-button>
-            type="text"
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            icon="el-icon-edit"
+            v-hasPermi="['system:article:remove']">删除</el-button>
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:article:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:article:remove']"
-          >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      v-show="total>0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改文章管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
@@ -122,22 +71,17 @@
           <el-input v-model="form.title" placeholder="请输入文章标题" />
         </el-form-item>
         <el-form-item label="封面图" prop="coverImg">
-          <image-upload v-model="form.coverImg"/>
+          <image-upload v-model="form.coverImg" />
         </el-form-item>
         <el-form-item label="简介" prop="description">
           <el-input v-model="form.description" placeholder="请输入文章简介" />
         </el-form-item>
         <el-form-item label="内容">
-          <editor v-model="form.content" :min-height="192"/>
+          <editor v-model="form.content" :min-height="192" />
         </el-form-item>
         <el-form-item label="文章所属分类" prop="articleCat">
-          <el-select v-model="form.articleCat" placeholder="请选择文章所属分类">
+          <el-select v-model="form.articleCat" placeholder="请选择文章所属分类" clearable>
-            <el-option
+          <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
-              v-for="dict in dict.type.article_cat"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
         </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -154,7 +98,7 @@
 
 <script>
 import { listArticle, getArticle, delArticle, addArticle, updateArticle } from "@/api/system/article";
-
+import { listCategory } from "@/api/system/category";
 export default {
   name: "Article",
   dicts: ['article_cat'],
@@ -174,6 +118,7 @@ export default {
       total: 0,
       // 文章管理表格数据
       articleList: [],
+      categoryList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -183,7 +128,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         title: null,
-        articleCat: null,
+        articleCat: "",
       },
       // 表单参数
       form: {},
@@ -194,8 +139,15 @@ export default {
   },
   created() {
     this.getList();
+
   },
   methods: {
+    //获取文章分类列表
+    getfenlei() {
+      listCategory().then(response => {
+        this.categoryList = response.rows;
+      });
+    },
     /** 查询文章管理列表 */
     getList() {
       this.loading = true;
@@ -203,7 +155,9 @@ export default {
         this.articleList = response.rows;
         this.total = response.total;
         this.loading = false;
+        this.getfenlei();
       });
+
     },
     // 取消按钮
     cancel() {
@@ -241,7 +195,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */

ruoyi-ui/src/views/system/category/index.vue

@@ -2,20 +2,12 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="上级分类" prop="parentId">
-        <el-input
+        <el-select v-model="queryParams.parentId" placeholder="请选择文章所属分类" clearable>
-          v-model="queryParams.parentId"
+          <el-option v-for="(item, index) in options" :key="index" :label="item.title" :value="item.id" />
-          placeholder="请输入上级分类"
+        </el-select>
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="分类名称" prop="title">
-        <el-input
+        <el-input v-model="queryParams.title" placeholder="请输入分类名称" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.title"
-          placeholder="请输入分类名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -25,46 +17,20 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['system:category:add']">新增</el-button>
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:category:add']"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-          type="success"
+          v-hasPermi="['system:category:edit']">修改</el-button>
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:category:edit']"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-          type="danger"
+          v-hasPermi="['system:category:remove']">删除</el-button>
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:category:remove']"
-        >删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-          type="warning"
+          v-hasPermi="['system:category:export']">导出</el-button>
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:category:export']"
-        >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -72,54 +38,41 @@
     <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="文章分类" align="center" prop="id" />
-      <el-table-column label="上级分类" align="center" prop="parentId" />
+      <el-table-column label="上级分类" align="center" prop="parentName" />
       <el-table-column label="分类名称" align="center" prop="title" />
       <el-table-column label="封面图" align="center" prop="coverImg" width="100">
         <template slot-scope="scope">
-          <image-preview :src="scope.row.coverImg" :width="50" :height="50"/>
+          <image-preview :src="scope.row.coverImg" :width="50" :height="50" />
         </template>
       </el-table-column>
       <el-table-column label="简介" align="center" prop="description" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            size="mini"
+            v-hasPermi="['system:category:edit']">修改</el-button>
-            type="text"
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            icon="el-icon-edit"
+            v-hasPermi="['system:category:remove']">删除</el-button>
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:category:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:category:remove']"
-          >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      v-show="total>0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改文章分类对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="上级分类" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入上级分类" />
+          <el-select v-model="form.parentId" placeholder="请选择文章所属分类" clearable>
+          <el-option v-for="(item, index) in options" :key="index" :label="item.title" :value="item.id" />
+        </el-select>
         </el-form-item>
         <el-form-item label="分类名称" prop="title">
           <el-input v-model="form.title" placeholder="请输入分类名称" />
         </el-form-item>
         <el-form-item label="封面图" prop="coverImg">
-          <image-upload v-model="form.coverImg"/>
+          <image-upload v-model="form.coverImg" />
         </el-form-item>
         <el-form-item label="简介" prop="description">
           <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
@@ -127,9 +80,7 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
-        <el-form-item label="" prop="delFlag">
+
-          <el-input v-model="form.delFlag" placeholder="请输入" />
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -146,6 +97,9 @@ export default {
   name: "Category",
   data() {
     return {
+      options: [],
+      toplist: [],
+      optionslist:[],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -168,22 +122,30 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        parentId: null,
+        parentId: ''
-        title: null,
-        coverImg: null,
-        description: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        parentId:''
+      },
       // 表单校验
       rules: {
       }
     };
   },
+
+
   created() {
     this.getList();
+   
   },
   methods: {
+    //获取上级分类
+    gettop(){
+      listCategory().then(response => {
+        this.options=response.rows
+      });
+    },
     /** 查询文章分类列表 */
     getList() {
       this.loading = true;
@@ -191,6 +153,7 @@ export default {
         this.categoryList = response.rows;
         this.total = response.total;
         this.loading = false;
+        this.gettop()
       });
     },
     // 取消按钮
@@ -228,7 +191,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -270,12 +233,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除文章分类编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除文章分类编号为"' + ids + '"的数据项？').then(function () {
         return delCategory(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {

ruoyi-ui/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8090`,
+        target: `http://192.168.3.114:8090`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''