Merge remote-tracking branch 'origin/master'
This commit is contained in:
menxipeng
168
ruoyi-ui/CONTENT_MODULE_README.md
Normal file
168
ruoyi-ui/CONTENT_MODULE_README.md
Normal file
@@ -0,0 +1,168 @@
|
||||
# 内容管理模块
|
||||
|
||||
## 功能概述
|
||||
|
||||
内容管理模块包含以下三个子模块：
|
||||
- **分类管理**：管理内容分类，支持分类名称和分类图片
|
||||
- **标签管理**：管理内容标签，支持标签名称
|
||||
- **Banner管理**：管理轮播图，支持名称、排序、跳转链接和图片
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/content/
|
||||
│ ├── category.js # 分类管理API
|
||||
│ ├── tag.js # 标签管理API
|
||||
│ └── banner.js # Banner管理API
|
||||
└── views/content/
|
||||
├── category/
|
||||
│ └── index.vue # 分类管理页面
|
||||
├── tag/
|
||||
│ └── index.vue # 标签管理页面
|
||||
└── banner/
|
||||
└── index.vue # Banner管理页面
|
||||
```
|
||||
|
||||
## 后端接口
|
||||
|
||||
### 分类管理接口
|
||||
- 列表查询：`GET /back/category/list`
|
||||
- 新增分类：`POST /back/category` (FormData格式)
|
||||
- 修改分类：`PUT /back/category` (FormData格式)
|
||||
- 删除分类：`DELETE /back/category/{id}`
|
||||
|
||||
### 标签管理接口
|
||||
- 列表查询：`GET /back/tag/list`
|
||||
- 新增标签：`POST /back/tag`
|
||||
- 修改标签：`PUT /back/tag`
|
||||
- 删除标签：`DELETE /back/tag/{id}`
|
||||
|
||||
### Banner管理接口
|
||||
- 列表查询：`GET /back/banner/list`
|
||||
- 新增Banner：`POST /back/banner/add` (FormData格式)
|
||||
- 修改Banner：`PUT /back/banner` (FormData格式)
|
||||
- 删除Banner：`DELETE /back/banner/{id}`
|
||||
|
||||
## 图片处理说明
|
||||
|
||||
### 图片上传方式
|
||||
- **不再预先上传**：图片不会先上传到服务器
|
||||
- **直接提交**：图片作为二进制文件直接随表单提交到后端
|
||||
- **本地预览**：使用 `URL.createObjectURL()` 创建本地预览
|
||||
- **FormData格式**：使用 `multipart/form-data` 格式提交
|
||||
|
||||
### 图片显示方式
|
||||
- **字段映射**：
|
||||
- 分类管理：使用 `backImg` 字段
|
||||
- Banner管理：使用 `imageUrl` 字段
|
||||
- **URL拼接**：后端返回图片路径，前端拼接完整URL
|
||||
- **工具方法**：使用 `src/utils/image.js` 中的 `getImageUrl()` 方法
|
||||
|
||||
### 请求格式示例
|
||||
```javascript
|
||||
// 分类新增请求
|
||||
const formData = new FormData()
|
||||
formData.append('name', '分类名称')
|
||||
formData.append('file', fileObject) // 文件对象
|
||||
|
||||
// Banner新增请求
|
||||
const formData = new FormData()
|
||||
formData.append('name', 'Banner名称')
|
||||
formData.append('sort', '1')
|
||||
formData.append('jumpUrl', 'https://example.com')
|
||||
formData.append('file', fileObject) // 文件对象
|
||||
```
|
||||
|
||||
### 图片URL处理示例
|
||||
```javascript
|
||||
// 后端返回数据
|
||||
{
|
||||
"id": 1,
|
||||
"name": "分类名称",
|
||||
"backImg": "/upload/category/image.jpg" // 图片路径
|
||||
}
|
||||
|
||||
// 前端显示
|
||||
const fullUrl = getImageUrl(backImg)
|
||||
// 结果: "http://60.205.107.210:8080/upload/category/image.jpg"
|
||||
```
|
||||
|
||||
## 安装步骤
|
||||
|
||||
### 1. 执行菜单SQL
|
||||
在数据库中执行 `content_menu.sql` 文件，创建菜单和权限配置。
|
||||
|
||||
### 2. 重启前端服务
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 3. 分配权限
|
||||
登录系统后，在角色管理中为相应角色分配内容管理模块的权限。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 分类管理
|
||||
- ✅ 分类列表展示（支持分页）
|
||||
- ✅ 分类搜索（按名称）
|
||||
- ✅ 新增分类（支持图片上传）
|
||||
- ✅ 编辑分类
|
||||
- ✅ 删除分类
|
||||
- ✅ 图片预览
|
||||
|
||||
### 标签管理
|
||||
- ✅ 标签列表展示（支持分页）
|
||||
- ✅ 标签搜索（按名称）
|
||||
- ✅ 新增标签
|
||||
- ✅ 编辑标签
|
||||
- ✅ 删除标签
|
||||
|
||||
### Banner管理
|
||||
- ✅ Banner列表展示（支持分页）
|
||||
- ✅ Banner搜索（按名称）
|
||||
- ✅ 新增Banner（支持图片上传）
|
||||
- ✅ 编辑Banner
|
||||
- ✅ 删除Banner
|
||||
- ✅ 图片预览
|
||||
- ✅ 排序功能
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **图片上传**：分类和Banner模块支持图片上传，图片直接作为二进制流传给后端。
|
||||
|
||||
2. **FormData格式**：分类和Banner的新增/修改接口使用FormData格式，标签管理使用JSON格式。
|
||||
|
||||
3. **权限控制**：所有操作都有相应的权限控制，需要在角色管理中分配权限。
|
||||
|
||||
4. **分页支持**：所有列表都支持分页查询。
|
||||
|
||||
5. **文件大小限制**：图片大小限制为2MB，支持JPG/PNG/GIF格式。
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 图片上传失败怎么办？
|
||||
A: 检查以下几点：
|
||||
- 图片格式是否为JPG/PNG/GIF
|
||||
- 图片大小是否超过2MB
|
||||
- 网络连接是否正常
|
||||
- 后端接口是否正常接收FormData格式
|
||||
|
||||
### Q: 菜单不显示怎么办？
|
||||
A: 检查以下几点：
|
||||
- 是否执行了菜单SQL
|
||||
- 当前用户角色是否有相应权限
|
||||
- 是否刷新了页面
|
||||
|
||||
### Q: 接口调用失败怎么办？
|
||||
A: 检查以下几点：
|
||||
- 后端服务是否正常运行
|
||||
- 接口地址是否正确
|
||||
- 网络连接是否正常
|
||||
- 请求参数格式是否正确
|
||||
|
||||
### Q: 图片预览不显示怎么办？
|
||||
A: 检查以下几点：
|
||||
- 文件是否成功选择
|
||||
- 浏览器是否支持 `URL.createObjectURL()`
|
||||
- 图片格式是否正确
|
||||
73
ruoyi-ui/src/api/content/banner.js
Normal file
73
ruoyi-ui/src/api/content/banner.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询Banner列表
|
||||
export function listBanner(query) {
|
||||
return request({
|
||||
url: '/back/banner/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询Banner详细
|
||||
export function getBanner(id) {
|
||||
return request({
|
||||
url: '/back/banner/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增Banner
|
||||
export function addBanner(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('name', data.name)
|
||||
formData.append('sort', data.sort)
|
||||
formData.append('jumpUrl', data.jumpUrl || '')
|
||||
if (data.file) {
|
||||
formData.append('file', data.file)
|
||||
}
|
||||
return request({
|
||||
url: '/back/banner/add',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改Banner
|
||||
export function updateBanner(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('id', data.id)
|
||||
formData.append('name', data.name)
|
||||
formData.append('sort', data.sort)
|
||||
formData.append('jumpUrl', data.jumpUrl || '')
|
||||
|
||||
// 如果有新图片文件，上传新图片
|
||||
if (data.file) {
|
||||
formData.append('file', data.file)
|
||||
}
|
||||
|
||||
// 传递图片路径（原图片或新图片的路径）
|
||||
if (data.bannerAddr) {
|
||||
formData.append('bannerAddr', data.bannerAddr)
|
||||
}
|
||||
|
||||
return request({
|
||||
url: '/back/banner/update',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除Banner
|
||||
export function delBanner(id) {
|
||||
return request({
|
||||
url: '/back/banner/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
69
ruoyi-ui/src/api/content/category.js
Normal file
69
ruoyi-ui/src/api/content/category.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询分类列表
|
||||
export function listCategory(query) {
|
||||
return request({
|
||||
url: '/back/category/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询分类详细
|
||||
export function getCategory(id) {
|
||||
return request({
|
||||
url: '/back/category/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增分类
|
||||
export function addCategory(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('name', data.name)
|
||||
if (data.file) {
|
||||
formData.append('file', data.file)
|
||||
}
|
||||
return request({
|
||||
url: '/back/category',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改分类
|
||||
export function updateCategory(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('id', data.id)
|
||||
formData.append('name', data.name)
|
||||
|
||||
// 如果有新图片文件，上传新图片
|
||||
if (data.file) {
|
||||
formData.append('file', data.file)
|
||||
}
|
||||
|
||||
// 传递图片路径（原图片或新图片的路径）
|
||||
if (data.backImg) {
|
||||
formData.append('backImg', data.backImg)
|
||||
}
|
||||
|
||||
return request({
|
||||
url: '/back/category/update',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除分类
|
||||
export function delCategory(id) {
|
||||
return request({
|
||||
url: '/back/category/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
ruoyi-ui/src/api/content/tag.js
Normal file
44
ruoyi-ui/src/api/content/tag.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询标签列表
|
||||
export function listTag(query) {
|
||||
return request({
|
||||
url: '/back/tag/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询标签详细
|
||||
export function getTag(id) {
|
||||
return request({
|
||||
url: '/back/tag/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增标签
|
||||
export function addTag(data) {
|
||||
return request({
|
||||
url: '/back/tag',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改标签
|
||||
export function updateTag(data) {
|
||||
return request({
|
||||
url: '/back/tag',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除标签
|
||||
export function delTag(id) {
|
||||
return request({
|
||||
url: '/back/tag/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
34
ruoyi-ui/src/utils/image.js
Normal file
34
ruoyi-ui/src/utils/image.js
Normal file
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 图片工具类
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取图片完整URL
|
||||
* @param {string} imagePath 图片路径
|
||||
* @returns {string} 完整的图片URL
|
||||
*/
|
||||
export function getImageUrl(imagePath) {
|
||||
if (!imagePath) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// 如果已经是完整URL，直接返回
|
||||
if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
|
||||
return imagePath;
|
||||
}
|
||||
|
||||
// 使用项目的API前缀配置
|
||||
const baseApi = process.env.VUE_APP_BASE_API || '/dev-api';
|
||||
return baseApi + imagePath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图片完整URL（带默认图片）
|
||||
* @param {string} imagePath 图片路径
|
||||
* @param {string} defaultImage 默认图片路径
|
||||
* @returns {string} 完整的图片URL
|
||||
*/
|
||||
export function getImageUrlWithDefault(imagePath, defaultImage = '') {
|
||||
const url = getImageUrl(imagePath);
|
||||
return url || defaultImage;
|
||||
}
|
||||
336
ruoyi-ui/src/views/content/banner/index.vue
Normal file
336
ruoyi-ui/src/views/content/banner/index.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="Banner名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入Banner名称"
|
||||
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>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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="['content:banner:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="bannerList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="Banner ID" align="center" prop="id" />
|
||||
<el-table-column label="Banner名称" align="center" prop="name" />
|
||||
<el-table-column label="排序" align="center" prop="sort" />
|
||||
<el-table-column label="跳转链接" align="center" prop="jumpUrl" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="Banner图片" align="center" prop="bannerAddr" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 80px; height: 50px"
|
||||
:src="getImageUrlMethod(scope.row.bannerAddr)"
|
||||
:preview-src-list="[getImageUrlMethod(scope.row.bannerAddr)]"
|
||||
fit="cover">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
</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="['content:banner:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['content:banner: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改Banner对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="Banner名称" prop="name" required>
|
||||
<el-input v-model="form.name" placeholder="请输入Banner名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" required>
|
||||
<el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接" prop="jumpUrl" required>
|
||||
<el-input v-model="form.jumpUrl" placeholder="请输入跳转链接" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Banner图片" required>
|
||||
<el-upload
|
||||
action=""
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleImageChange"
|
||||
:before-upload="beforeImageUpload"
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<img v-if="form.previewUrl" :src="form.previewUrl" class="avatar">
|
||||
<img v-else-if="form.bannerAddr" :src="getImageUrlMethod(form.bannerAddr)" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listBanner, getBanner, delBanner, addBanner, updateBanner } from "@/api/content/banner";
|
||||
import { getImageUrl } from "@/utils/image.js";
|
||||
|
||||
export default {
|
||||
name: "Banner",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// Banner表格数据
|
||||
bannerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "Banner名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
jumpUrl: [
|
||||
{ required: true, message: "跳转链接不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取图片完整URL的方法
|
||||
getImageUrlMethod(imagePath) {
|
||||
return getImageUrl(imagePath);
|
||||
},
|
||||
/** 查询Banner列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listBanner(this.queryParams).then(response => {
|
||||
this.bannerList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
sort: 0,
|
||||
jumpUrl: null,
|
||||
bannerAddr: null,
|
||||
previewUrl: null,
|
||||
file: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加Banner";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getBanner(id).then(response => {
|
||||
this.form = response.data;
|
||||
// 设置图片回显
|
||||
if (this.form.bannerAddr) {
|
||||
this.form.previewUrl = this.getImageUrlMethod(this.form.bannerAddr);
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "修改Banner";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
// 手动检查图片字段
|
||||
if (!this.form.id) {
|
||||
// 新增操作：必须上传图片
|
||||
if (!this.form.file) {
|
||||
this.$message.error('Banner图片不能为空');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 编辑操作：如果有原图片或新图片都可以
|
||||
if (!this.form.bannerAddr) {
|
||||
this.$message.error('Banner图片不能为空');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
// 编辑操作：直接使用bannerAddr字段
|
||||
updateBanner(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addBanner(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除Banner编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delBanner(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 图片选择处理
|
||||
handleImageChange(file) {
|
||||
// 保存文件对象用于提交
|
||||
this.form.file = file.raw;
|
||||
// 创建本地预览URL
|
||||
this.form.previewUrl = URL.createObjectURL(file.raw);
|
||||
// 将新图片路径保存到bannerAddr字段，保持字段一致
|
||||
this.form.bannerAddr = file.name; // 或者使用其他方式生成路径
|
||||
|
||||
// 强制更新视图
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 图片上传前的处理
|
||||
beforeImageUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
320
ruoyi-ui/src/views/content/category/index.vue
Normal file
320
ruoyi-ui/src/views/content/category/index.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
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>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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="['content:category:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="分类ID" align="center" prop="id" />
|
||||
<el-table-column label="分类名称" align="center" prop="name" />
|
||||
<el-table-column label="分类图片" align="center" prop="backImg" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="getImageUrlMethod(scope.row.backImg)"
|
||||
:preview-src-list="[getImageUrlMethod(scope.row.backImg)]"
|
||||
fit="cover">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
</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="['content:category:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['content: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改分类对话框 -->
|
||||
<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="name" required>
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类图片" required>
|
||||
<el-upload
|
||||
action=""
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleImageChange"
|
||||
:before-upload="beforeImageUpload"
|
||||
class="avatar-uploader"
|
||||
>
|
||||
<img v-if="form.previewUrl" :src="form.previewUrl" class="avatar">
|
||||
<img v-else-if="form.backImg" :src="getImageUrlMethod(form.backImg)" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/content/category";
|
||||
import { getImageUrl } from "@/utils/image.js";
|
||||
|
||||
export default {
|
||||
name: "Category",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
categoryList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取图片完整URL的方法
|
||||
getImageUrlMethod(imagePath) {
|
||||
return getImageUrl(imagePath);
|
||||
},
|
||||
/** 查询分类列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listCategory(this.queryParams).then(response => {
|
||||
this.categoryList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
backImg: null,
|
||||
previewUrl: null,
|
||||
file: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加分类";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getCategory(id).then(response => {
|
||||
this.form = response.data;
|
||||
// 设置图片回显
|
||||
if (this.form.backImg) {
|
||||
this.form.previewUrl = this.getImageUrlMethod(this.form.backImg);
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "修改分类";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
// 手动检查图片字段
|
||||
if (!this.form.id) {
|
||||
// 新增操作：必须上传图片
|
||||
if (!this.form.file) {
|
||||
this.$message.error('分类图片不能为空');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 编辑操作：如果有原图片或新图片都可以
|
||||
if (!this.form.backImg) {
|
||||
this.$message.error('分类图片不能为空');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
// 编辑操作：直接使用backImg字段
|
||||
updateCategory(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addCategory(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delCategory(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 图片选择处理
|
||||
handleImageChange(file) {
|
||||
// 保存文件对象用于提交
|
||||
this.form.file = file.raw;
|
||||
// 创建本地预览URL
|
||||
this.form.previewUrl = URL.createObjectURL(file.raw);
|
||||
// 将新图片路径保存到backImg字段，保持字段一致
|
||||
this.form.backImg = file.name; // 或者使用其他方式生成路径
|
||||
|
||||
// 强制更新视图
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 图片上传前的处理
|
||||
beforeImageUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
215
ruoyi-ui/src/views/content/tag/index.vue
Normal file
215
ruoyi-ui/src/views/content/tag/index.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
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>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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="['content:tag:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="标签ID" align="center" prop="id" />
|
||||
<el-table-column label="标签名称" align="center" prop="name" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
</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="['content:tag:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['content:tag: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改标签对话框 -->
|
||||
<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="name">
|
||||
<el-input v-model="form.name" placeholder="请输入标签名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTag, getTag, delTag, addTag, updateTag } from "@/api/content/tag";
|
||||
|
||||
export default {
|
||||
name: "Tag",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 标签表格数据
|
||||
tagList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "标签名称不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询标签列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listTag(this.queryParams).then(response => {
|
||||
this.tagList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加标签";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getTag(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改标签";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateTag(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addTag(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除标签编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delTag(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
|
||||
|
||||
const baseUrl = 'http://localhost:8080' // 后端接口
|
||||
const baseUrl = 'http://60.205.107.210:8080' // 后端接口
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
||||
|
||||
Reference in New Issue
Block a user