文章管理
This commit is contained in:
		
							parent
							
								
									2f76fa6f4b
								
							
						
					
					
						commit
						a31a2ff1e7
					
				| @ -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 | ||||
|           v-model="queryParams.title" | ||||
|           placeholder="请输入文章标题" | ||||
|           clearable | ||||
|           @keyup.enter.native="handleQuery" | ||||
|         /> | ||||
|         <el-input 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 | ||||
|             v-for="dict in dict.type.article_cat" | ||||
|             :key="dict.value" | ||||
|             :label="dict.label" | ||||
|             :value="dict.value" | ||||
|           /> | ||||
|           <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" /> | ||||
|         </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 | ||||
|           type="primary" | ||||
|           plain | ||||
|           icon="el-icon-plus" | ||||
|           size="mini" | ||||
|           @click="handleAdd" | ||||
|           v-hasPermi="['system:article:add']" | ||||
|         >新增</el-button> | ||||
|         <el-button type="primary" 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 | ||||
|           type="success" | ||||
|           plain | ||||
|           icon="el-icon-edit" | ||||
|           size="mini" | ||||
|           :disabled="single" | ||||
|           @click="handleUpdate" | ||||
|           v-hasPermi="['system:article:edit']" | ||||
|         >修改</el-button> | ||||
|         <el-button type="success" 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 | ||||
|           type="danger" | ||||
|           plain | ||||
|           icon="el-icon-delete" | ||||
|           size="mini" | ||||
|           :disabled="multiple" | ||||
|           @click="handleDelete" | ||||
|           v-hasPermi="['system:article:remove']" | ||||
|         >删除</el-button> | ||||
|         <el-button type="danger" 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 | ||||
|           type="warning" | ||||
|           plain | ||||
|           icon="el-icon-download" | ||||
|           size="mini" | ||||
|           @click="handleExport" | ||||
|           v-hasPermi="['system:article:export']" | ||||
|         >导出</el-button> | ||||
|         <el-button type="warning" 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 | ||||
|             size="mini" | ||||
|             type="text" | ||||
|             icon="el-icon-edit" | ||||
|             @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> | ||||
|           <el-button size="mini" type="text" icon="el-icon-edit" @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 | ||||
|       v-show="total>0" | ||||
|       :total="total" | ||||
|       :page.sync="queryParams.pageNum" | ||||
|       :limit.sync="queryParams.pageSize" | ||||
|       @pagination="getList" | ||||
|     /> | ||||
|     <pagination v-show="total > 0" :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,23 +71,18 @@ | ||||
|           <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-option | ||||
|               v-for="dict in dict.type.article_cat" | ||||
|               :key="dict.value" | ||||
|               :label="dict.label" | ||||
|               :value="parseInt(dict.value)" | ||||
|             ></el-option> | ||||
|           </el-select> | ||||
|           <el-select v-model="form.articleCat" placeholder="请选择文章所属分类" clearable> | ||||
|           <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" /> | ||||
|         </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="备注" prop="remark"> | ||||
|           <el-input v-model="form.remark" placeholder="请输入备注" /> | ||||
| @ -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 | ||||
|     }, | ||||
|     /** 新增按钮操作 */ | ||||
|  | ||||
| @ -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 | ||||
|           v-model="queryParams.parentId" | ||||
|           placeholder="请输入上级分类" | ||||
|           clearable | ||||
|           @keyup.enter.native="handleQuery" | ||||
|         /> | ||||
|         <el-select v-model="queryParams.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="queryParams.title" | ||||
|           placeholder="请输入分类名称" | ||||
|           clearable | ||||
|           @keyup.enter.native="handleQuery" | ||||
|         /> | ||||
|         <el-input 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 | ||||
|           type="primary" | ||||
|           plain | ||||
|           icon="el-icon-plus" | ||||
|           size="mini" | ||||
|           @click="handleAdd" | ||||
|           v-hasPermi="['system:category:add']" | ||||
|         >新增</el-button> | ||||
|         <el-button type="primary" 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 | ||||
|           type="success" | ||||
|           plain | ||||
|           icon="el-icon-edit" | ||||
|           size="mini" | ||||
|           :disabled="single" | ||||
|           @click="handleUpdate" | ||||
|           v-hasPermi="['system:category:edit']" | ||||
|         >修改</el-button> | ||||
|         <el-button type="success" 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 | ||||
|           type="danger" | ||||
|           plain | ||||
|           icon="el-icon-delete" | ||||
|           size="mini" | ||||
|           :disabled="multiple" | ||||
|           @click="handleDelete" | ||||
|           v-hasPermi="['system:category:remove']" | ||||
|         >删除</el-button> | ||||
|         <el-button type="danger" 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 | ||||
|           type="warning" | ||||
|           plain | ||||
|           icon="el-icon-download" | ||||
|           size="mini" | ||||
|           @click="handleExport" | ||||
|           v-hasPermi="['system:category:export']" | ||||
|         >导出</el-button> | ||||
|         <el-button type="warning" 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 | ||||
|             size="mini" | ||||
|             type="text" | ||||
|             icon="el-icon-edit" | ||||
|             @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> | ||||
|           <el-button size="mini" type="text" icon="el-icon-edit" @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 | ||||
|       v-show="total>0" | ||||
|       :total="total" | ||||
|       :page.sync="queryParams.pageNum" | ||||
|       :limit.sync="queryParams.pageSize" | ||||
|       @pagination="getList" | ||||
|     /> | ||||
|     <pagination v-show="total > 0" :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, | ||||
|         title: null, | ||||
|         coverImg: null, | ||||
|         description: null, | ||||
|         parentId: '' | ||||
|       }, | ||||
|       // 表单参数 | ||||
|       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() { | ||||
|  | ||||
| @ -35,7 +35,7 @@ module.exports = { | ||||
|     proxy: { | ||||
|       // detail: https://cli.vuejs.org/config/#devserver-proxy
 | ||||
|       [process.env.VUE_APP_BASE_API]: { | ||||
|         target: `http://localhost:192.168.3.114:8090`, | ||||
|         target: `http://192.168.3.114:8090`, | ||||
|         changeOrigin: true, | ||||
|         pathRewrite: { | ||||
|           ['^' + process.env.VUE_APP_BASE_API]: '' | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user