pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pvtfxms7o:ca5c23059baf41c90a3449b28a40c85ae2551aa1
Branches Tags
pvtfxms7o:main
pvtfxms7o:cyj
pvtfxms7o:yq
pvtfxms7o:qjh
pvtfxms7o:qjj
pvtfxms7o:branch
..
compare: pvtfxms7o:9502fa189079236e430e99b57bbb6f0725085865
Branches Tags
pvtfxms7o:main
pvtfxms7o:cyj
pvtfxms7o:yq
pvtfxms7o:qjh
pvtfxms7o:qjj
pvtfxms7o:branch

No commits in common. 'ca5c23059baf41c90a3449b28a40c85ae2551aa1' and '9502fa189079236e430e99b57bbb6f0725085865' have entirely different histories.
ca5c23059b ... 9502fa1890

13 changed files with 1038 additions and 1395 deletions
Show Stats

61
front-end/mall4v/src/views/modules/sys/area/add-or-update.vue
Unescape View File

@ -1,11 +1,9 @@
<template>
<!-- 对话框组件 -->
<el-dialog
v-model="visible"
:title="!dataForm.areaId ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单组件 -->
<el-form
ref="dataFormRef"
:model="dataForm"
@ -13,7 +11,6 @@
label-width="100px"
@keyup.enter="onSubmit()"
>
<!-- 地区名称输入项 -->
<el-form-item
label="地区名称"
prop="areaName"
@ -25,7 +22,6 @@
show-word-limit
/>
</el-form-item>
<!-- 上级地区选择项 -->
<el-form-item
label="上级地区"
prop="parentId"
@ -41,7 +37,6 @@
/>
</el-form-item>
</el-form>
<!-- 对话框底部操作按钮 -->
<template #footer>
<div class="dialog-footer">
<el-button
@ -64,12 +59,7 @@
import { ElMessage } from 'element-plus'
import { treeDataTranslate } from '@/utils'
import { Debounce } from '@/utils/debounce'
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
// 定义父组件事件
const emit = defineEmits(['refreshDataList'])
// 定义表单验证规则
const dataRule = reactive({
areaName: [
{ required: true, message: '区域名称不能为空', trigger: 'blur' },
@ -77,7 +67,6 @@ const dataRule = reactive({
]
})
// 定义可见性状态、地区列表、表单数据等响应式变量
const visible = ref(false)
const areaList = ref([])
const dataForm = ref({
@ -92,76 +81,61 @@ const categoryTreeProps = reactive({
checkStrictly: true
})
const selectedOptions = ref([])
// 获取表单实例引用
const dataFormRef = ref(null)
// 初始化方法，接收areaId作为参数
const init = (areaId) => {
dataForm.value.areaId = areaId || 0 // 设置当前编辑的地区ID
visible.value = true // 打开对话框
selectedOptions.value = [] // 清空已选项
// 使用nextTick确保DOM更新完毕后执行
dataForm.value.areaId = areaId || 0
visible.value = true
selectedOptions.value = []
nextTick(() => {
dataFormRef.value?.resetFields() // 重置表单
dataFormRef.value?.resetFields()
if (dataForm.value.areaId) {
// 如果有areaId，则获取该地区的详情
http({
url: http.adornUrl('/admin/area/info/' + dataForm.value.areaId),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
dataForm.value = data // 填充表单数据
selectedOptions.value = dataForm.value.parentId // 设置上级地区
// 更新分类树属性（这行代码可能无效，因为categoryTreeProps是reactive对象）
categoryTreeProps.areaId = dataForm.value.areaId
categoryTreeProps.areaName = dataForm.value.areaName
})
.then(({ data }) => {
dataForm.value = data
selectedOptions.value = dataForm.value.parentId
categoryTreeProps.areaId = dataForm.value.areaId
categoryTreeProps.areaName = dataForm.value.areaName
})
}
// 获取所有地区列表并转换为树结构
http({
url: http.adornUrl('/admin/area/list'),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
areaList.value = treeDataTranslate(data, 'areaId', 'parentId')
})
.then(({ data }) => {
areaList.value = treeDataTranslate(data, 'areaId', 'parentId')
})
})
}
// 将init方法暴露给父组件调用
defineExpose({ init })
// 分页信息
const page = {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
}
/**
* 表单提交
*/
const onSubmit = Debounce(() => {
// 验证表单
dataFormRef.value?.validate((valid) => {
if (valid) {
// 发送HTTP请求保存地区信息
http({
url: http.adornUrl('/admin/area'),
method: dataForm.value.areaId ? 'put' : 'post', // 判断是更新还是创建
method: dataForm.value.areaId ? 'put' : 'post',
data: http.adornData(dataForm.value)
}).then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList', page) // 触发刷新数据列表事件
visible.value = false
emit('refreshDataList', page)
}
})
})
@ -169,9 +143,8 @@ const onSubmit = Debounce(() => {
})
})
// 处理上级地区选择变化
const handleChange = (val) => {
// 更新表单中parentId字段的值为最新选择的上级地区ID
dataForm.value.parentId = val[val.length - 1]
}
</script>

94
front-end/mall4v/src/views/modules/sys/area/index.vue
Unescape View File

@ -1,13 +1,10 @@
<template>
<!-- 地区管理模块 -->
<div class="mod-sys-area">
<!-- 地区名称输入框，用于过滤树状结构中的节点 -->
<el-input
v-model="areaName"
class="area-search-input"
placeholder="地区关键词"
/>
<!-- 新增按钮，点击时触发新增或更新操作 -->
<el-button
type="primary"
class="area-add-btn"
@ -16,20 +13,17 @@
新增
</el-button>
<!-- 树形控件，展示地区层级结构 -->
<el-tree
ref="tree2Ref"
:data="areaTreeData"
node-key="areaId"
:filter-node-method="filterNode"
:props="props"
:expand-on-click-node="false"
:data="areaTreeData"
node-key="areaId"
:filter-node-method="filterNode"
:props="props"
:expand-on-click-node="false"
>
<!-- 自定义节点内容模板 -->
<template #default="{ node, data }">
<span class="addr-name">{{ node.label }}</span> <!-- 显示地区名称 -->
<span>
<!-- 修改按钮，点击时触发修改操作 -->
<template #default="{ node, data }">
<span class="addr-name">{{ node.label }}</span>
<span>
<el-button
type="text"
icon="el-icon-edit"
@ -37,7 +31,6 @@
>
修改
</el-button>
<!-- 删除按钮，点击时触发删除操作 -->
<el-button
type="text"
icon="el-icon-delete"
@ -46,59 +39,48 @@
删除
</el-button>
</span>
</template>
</template>
</el-tree>
<!-- 添加或更新对话框组件 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
/>
</div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import AddOrUpdate from './add-or-update.vue' // 引入添加或更新对话框组件
import { treeDataTranslate } from '@/utils' // 引入树数据转换工具函数
import { ref, watch, onMounted, reactive, nextTick } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { treeDataTranslate } from '@/utils'
// 地区名称过滤器绑定的响应式变量
const areaName = ref('')
// 树形控件节点属性映射配置
const props = {
id: 'areaId',
label: 'areaName',
children: 'children'
}
// 监听地区名称变化，自动过滤树节点
const tree2Ref = ref(null)
watch(
() => areaName.value,
() => areaName,
(val) => {
tree2Ref.value?.filter(val)
}
)
// 页面加载完成后获取地区列表
onMounted(() => {
getDataList(page)
})
// 分页信息配置
const page = reactive({
total: 0, // 总条目数
currentPage: 1, // 当前页码
pageSize: 10 // 每页条目数
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
// 地区树形数据绑定的响应式变量
const areaTreeData = ref(null)
// 获取地区列表的方法
const getDataList = (pageParam, params) => {
http({
url: http.adornUrl('/admin/area/list'),
@ -108,46 +90,38 @@ const getDataList = (pageParam, params) => {
size: pageParam == null ? page.pageSize : pageParam.pageSize
}, params))
}).then(({ data }) => {
// 将获取到的数据转换成树形结构并赋值给areaTreeData
areaTreeData.value = treeDataTranslate(data, 'areaId', 'parentId')
})
}
// 添加或更新对话框引用
const addOrUpdateRef = ref(null)
// 控制添加或更新对话框显示状态的响应式变量
const addOrUpdateVisible = ref(false)
/**
* 触发新增或更新操作
* @param id 可选参数，若提供则表示更新指定ID的地区信息
* 新增 / 修改
* @param id
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化对话框组件
addOrUpdateRef.value?.init(id)
})
}
/**
* 执行删除操作
* @param areaId 要删除的地区ID
* 删除
* @param areaId
*/
const onDelete = (areaId) => {
// 弹出确认对话框，询问用户是否确定删除
ElMessageBox.confirm('确定进行删除操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送HTTP请求执行删除操作
http({
url: http.adornUrl('/admin/area/' + areaId),
method: 'delete',
data: http.adornData({})
}).then(() => {
// 成功提示，并刷新地区列表
ElMessage({
message: '操作成功',
type: 'success',
@ -157,37 +131,35 @@ const onDelete = (areaId) => {
}
})
})
}).catch(() => { /* 用户取消删除 */ })
}).catch(() => { })
}
// 更新地区信息的代理方法，实际调用onAddOrUpdate
// eslint-disable-next-line no-unused-vars
const update = (node, data) => {
onAddOrUpdate(data.areaId)
}
// 删除地区信息的代理方法，实际调用onDelete
// eslint-disable-next-line no-unused-vars
const remove = (node, data) => {
onDelete(data.areaId)
}
// 节点过滤方法，根据输入的地区名称筛选符合条件的节点
const filterNode = (value, data) => {
if (!value) return true // 如果没有输入，则不做过滤
return data.areaName.indexOf(value) !== -1 // 包含输入值的节点通过过滤
if (!value) return true
return data.areaName.indexOf(value) !== -1
}
</script>
<style lang="scss" scoped>
.mod-sys-area {
.area-search-input {
width: 30%; // 设置搜索输入框宽度为容器的30%
width: 30%;
}
.area-add-btn {
float: right; // 新增按钮右对齐
float: right;
}
}
/* 使用:deep选择器穿透样式作用于子组件 */
:deep(.el-tree-node) .addr-name {
width: 100%; // 地址名称占满整个行宽
width: 100%;
}
</style>

144
front-end/mall4v/src/views/modules/sys/config/add-or-update.vue
Unescape View File

@ -1,111 +1,89 @@
<template>
<!-- 对话框组件 -->
<el-dialog
v-model="visible"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单组件 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<!-- 参数名输入项 -->
<el-form-item
label="参数名"
prop="paramKey"
>
<el-input
v-model="dataForm.paramKey"
placeholder="参数名"
/>
</el-form-item>
<!-- 参数值输入项 -->
<el-form-item
label="参数值"
prop="paramValue"
>
<el-input
v-model="dataForm.paramValue"
placeholder="参数值"
/>
</el-form-item>
<!-- 备注输入项 -->
<el-form-item
label="备注"
prop="remark"
>
<el-input
v-model="dataForm.remark"
placeholder="备注"
/>
</el-form-item>
</el-form>
<!-- 对话框底部操作按钮 -->
<template #footer>
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<el-form-item
label="参数名"
prop="paramKey"
>
<el-input
v-model="dataForm.paramKey"
placeholder="参数名"
/>
</el-form-item>
<el-form-item
label="参数值"
prop="paramValue"
>
<el-input
v-model="dataForm.paramValue"
placeholder="参数值"
/>
</el-form-item>
<el-form-item
label="备注"
prop="remark"
>
<el-input
v-model="dataForm.remark"
placeholder="备注"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 关闭对话框 -->
<el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 提交表单 -->
<el-button @click="visible = false">取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span>
</template>
</template>
</el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce'
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
// 定义父组件事件
const emit = defineEmits(['refreshDataList'])
// 控制对话框显示状态的响应式变量
const visible = ref(false)
// 表单数据模型，使用reactive定义以保证其响应性
const dataForm = reactive({
id: 0, // 配置项ID，0表示新增
paramKey: '', // 参数名
paramValue: '', // 参数值
remark: '' // 备注
id: 0,
paramKey: '',
paramValue: '',
remark: ''
})
// 表单验证规则
const dataRule = {
paramKey: [
{ required: true, message: '参数名不能为空', trigger: 'blur' }, // 必填验证
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数名', trigger: 'blur' } // 正则表达式验证
{ required: true, message: '参数名不能为空', trigger: 'blur' },
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数名', trigger: 'blur' }
],
paramValue: [
{ required: true, message: '参数值不能为空', trigger: 'blur' }, // 必填验证
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数值', trigger: 'blur' } // 正则表达式验证
{ required: true, message: '参数值不能为空', trigger: 'blur' },
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数值', trigger: 'blur' }
]
}
// 获取表单实例引用
const dataFormRef = ref(null)
// 初始化方法，接收id作为参数
const init = (id) => {
dataForm.id = id || 0 // 设置当前编辑的配置项ID
visible.value = true // 打开对话框
// 使用nextTick确保DOM更新完毕后执行
dataForm.id = id || 0
visible.value = true
nextTick(() => {
dataFormRef.value?.resetFields() // 重置表单
dataFormRef.value?.resetFields()
if (dataForm.id) {
// 如果有id，则获取该配置项的详情
http({
url: http.adornUrl(`/sys/config/info/${dataForm.id}`),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
// 填充表单数据
dataForm.paramKey = data.paramKey
dataForm.paramValue = data.paramValue
dataForm.remark = data.remark
@ -113,21 +91,16 @@ const init = (id) => {
}
})
}
// 将init方法暴露给父组件调用
defineExpose({ init })
/**
* 表单提交
*/
const onSubmit = Debounce(() => {
// 验证表单
dataFormRef.value?.validate((valid) => {
if (valid) {
// 发送HTTP请求保存配置信息
http({
url: http.adornUrl('/sys/config'),
method: dataForm.id ? 'put' : 'post', // 判断是更新还是创建
method: dataForm.id ? 'put' : 'post',
data: http.adornData({
id: dataForm.id || undefined,
paramKey: dataForm.paramKey,
@ -135,14 +108,13 @@ const onSubmit = Debounce(() => {
remark: dataForm.remark
})
}).then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList') // 触发刷新数据列表事件
visible.value = false
emit('refreshDataList')
}
})
})

157
front-end/mall4v/src/views/modules/sys/config/index.vue
Unescape View File

@ -1,164 +1,135 @@
<template>
<!-- 配置管理模块 -->
<div class="mod-config">
<!-- AvueCrud表格组件 -->
<avue-crud
ref="crudRef"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
>
<!-- 自定义左侧菜单按钮 -->
<template #menu-left>
<el-button
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<template #menu-left>
<el-button
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<el-button
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<!-- 自定义行内操作按钮 -->
<template #menu="scope">
<el-button
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.id)"
>
编辑
</el-button>
<el-button
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.id)"
>
删除
</el-button>
</template>
<el-button
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<template #menu="scope">
<el-button
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.id)"
>
编辑
</el-button>
<el-button
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.id)"
>
删除
</el-button>
</template>
</avue-crud>
<!-- 添加或更新对话框组件 -->
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
/>
</div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/sys/config.js' // 引入表格配置
import { ref, reactive, nextTick, defineExpose } from 'vue'
// 数据列表绑定的响应式变量
import { tableOption } from '@/crud/sys/config.js'
const dataList = ref([])
// 分页信息配置
const page = reactive({
total: 0, // 总条目数
currentPage: 1, // 当前页码
pageSize: 10 // 每页条目数
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
/**
* 获取数据列表方法
* @param pageParam 可选参数，用于指定分页信息
* @param params 搜索条件参数
* @param done 分页加载完成回调函数
* 获取数据列表
*/
const getDataList = (pageParam, params, done) => {
http({
url: http.adornUrl('/sys/config/page'), // API端点
method: 'get', // 请求方式
url: http.adornUrl('/sys/config/page'),
method: 'get',
params: http.adornParams(
Object.assign(
{
current: pageParam == null ? page.currentPage : pageParam.currentPage,
size: pageParam == null ? page.pageSize : pageParam.pageSize
},
params // 合并搜索条件
params
)
)
})
.then(({ data }) => {
dataList.value = data.records // 更新表格数据
page.total = data.total // 更新总条目数
if (done) done() // 如果有分页加载完成回调，则调用它
dataList.value = data.records
page.total = data.total
if (done) done()
})
}
/**
* 条件查询方法
* @param params 搜索条件参数
* @param done 分页加载完成回调函数
* 条件查询
*/
const onSearch = (params, done) => {
getDataList(page, params, done) // 根据搜索条件获取数据列表
getDataList(page, params, done)
}
// 多选变化绑定的响应式变量
const dataListSelections = ref([])
/**
* 多选变化方法
* @param val 选中的数据项
* 多选变化
*/
const selectionChange = (val) => {
dataListSelections.value = val // 更新多选的数据项
dataListSelections.value = val
}
// 控制添加或更新对话框显示状态的响应式变量
const addOrUpdateVisible = ref(false)
// 添加或更新对话框引用
const addOrUpdate = ref(null)
/**
* 触发新增或修改操作
* @param id 可选参数，若提供则表示更新指定ID的配置信息
* 新增 / 修改
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示对话框
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdate.value?.init(id) // 初始化对话框组件
addOrUpdate.value?.init(id)
})
}
/**
* 删除配置信息
* @param id 可选参数，若提供则表示删除指定ID的配置信息
* 删除
*/
const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => item.id) // 获取要删除的ID列表
// 弹出确认对话框，询问用户是否确定删除
const ids = id ? [id] : dataListSelections.value?.map(item => {
return item.id
})
ElMessageBox.confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// 发送HTTP请求执行删除操作
http({
url: http.adornUrl('/sys/config'),
method: 'delete',
data: http.adornData(ids, false)
})
.then(() => {
// 成功提示，并刷新数据列表
ElMessage({
message: '操作成功',
type: 'success',
@ -168,6 +139,6 @@ const onDelete = (id) => {
}
})
})
}).catch(() => { /* 用户取消删除 */ })
}).catch(() => { })
}
</script>

53
front-end/mall4v/src/views/modules/sys/log/index.vue
Unescape View File

@ -1,70 +1,57 @@
<template>
<!-- 日志管理模块 -->
<div class="mod-log">
<!-- AvueCrud表格组件用于展示日志数据 -->
<avue-crud
ref="crudRef" <!-- 引用表格实例 -->
:page="page" <!-- 分页信息 -->
:data="dataList" <!-- 表格数据 -->
:option="tableOption" <!-- 表格选项配置 -->
@search-change="onSearch" <!-- 搜索条件变化事件 -->
@on-load="getDataList" <!-- 加载数据事件 -->
ref="crudRef"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@on-load="getDataList"
/>
</div>
</template>
<script setup>
import { tableOption } from '@/crud/sys/log.js' // 引入日志表格配置
import { ref, reactive, onMounted } from 'vue'
// 数据列表绑定的响应式变量
import { tableOption } from '@/crud/sys/log.js'
const dataList = ref([])
// 分页信息配置
const page = reactive({
total: 0, // 总条目数
currentPage: 1, // 当前页码
pageSize: 10 // 每页条目数
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
// 组件挂载完成后获取数据列表
onMounted(() => {
getDataList()
})
/**
* 获取数据列表方法
* @param pageParam 可选参数，用于指定分页信息
* @param params 搜索条件参数
* @param done 分页加载完成回调函数
* 获取数据列表
*/
const getDataList = (pageParam, params, done) => {
http({
url: http.adornUrl('/sys/log/page'), // API端点
method: 'get', // 请求方式
url: http.adornUrl('/sys/log/page'),
method: 'get',
params: http.adornParams(
Object.assign(
{
current: pageParam == null ? page.currentPage : pageParam.currentPage,
size: pageParam == null ? page.pageSize : pageParam.pageSize
},
params // 合并搜索条件
params
)
)
})
.then(({ data }) => {
dataList.value = data.records // 更新表格数据
page.total = data.total // 更新总条目数
if (done) done() // 如果有分页加载完成回调，则调用它
dataList.value = data.records
page.total = data.total
if (done) done()
})
}
/**
* 条件查询方法
* @param params 搜索条件参数
* @param done 分页加载完成回调函数
* 条件查询
*/
const onSearch = (params, done) => {
getDataList(page, params, done) // 根据搜索条件获取数据列表
getDataList(page, params, done)
}
</script>

351
front-end/mall4v/src/views/modules/sys/menu/add-or-update.vue
Unescape View File

@ -1,182 +1,162 @@
<template>
<!-- 对话框组件 -->
<el-dialog
v-model="visible"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单组件 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<!-- 类型选择项 -->
<el-form-item
label="类型"
prop="type"
>
<el-radio-group v-model="dataForm.type">
<el-radio
v-for="(type, index) in dataForm.typeList"
:key="index"
:label="index"
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<el-form-item
label="类型"
prop="type"
>
{{ type }}
</el-radio>
</el-radio-group>
</el-form-item>
<!-- 动态标签，根据类型改变 -->
<el-form-item
:label="dataForm.typeList[dataForm.type] + '名称'"
prop="name"
>
<el-input
v-model="dataForm.name"
:placeholder="dataForm.typeList[dataForm.type] + '名称'"
/>
</el-form-item>
<!-- 上级菜单选择 -->
<el-form-item label="上级菜单">
<el-cascader
v-model="selectedMenu"
expand-trigger="hover"
:options="menuList"
:props="menuListTreeProps"
change-on-select
:clearable="true"
@change="handleSelectMenuChange"
/>
</el-form-item>
<!-- 菜单路由输入（仅当类型为1时显示） -->
<el-form-item
v-if="dataForm.type === 1"
label="菜单路由"
prop="url"
>
<el-input
v-model="dataForm.url"
placeholder="菜单路由"
/>
</el-form-item>
<!-- 授权标识输入（除类型0外显示） -->
<el-form-item
v-if="dataForm.type !== 0"
label="授权标识"
prop="perms"
>
<el-input
v-model="dataForm.perms"
placeholder="多个用逗号分隔, 如: user:list,user:create"
/>
</el-form-item>
<!-- 排序号输入（除类型2外显示） -->
<el-form-item
v-if="dataForm.type !== 2"
label="排序号"
prop="orderNum"
>
<el-input-number
v-model="dataForm.orderNum"
controls-position="right"
:min="0"
label="排序号"
/>
</el-form-item>
<!-- 菜单图标选择（除类型2外显示） -->
<el-form-item
v-if="dataForm.type !== 2"
label="菜单图标"
prop="icon"
>
<el-row>
<el-col :span="22">
<el-input
ref="iconInputRef"
v-model="dataForm.icon"
:virtual-ref="iconListPopoverRef"
placeholder="菜单图标名称"
clearable
/>
<el-popover
ref="iconListPopoverRef"
style="width: 390px"
:virtual-ref="iconInputRef"
placement="bottom-start"
trigger="click"
:popper-style="iconPopoverClass"
virtual-triggering
>
<el-button
v-for="(item, index) in iconList"
<el-radio-group v-model="dataForm.type">
<el-radio
v-for="(type, index) in dataForm.typeList"
:key="index"
style="padding: 8px; margin: 8px 0 0 8px"
:class="{ 'is-active': item === dataForm.icon }"
@click="iconActiveHandle(item)"
:label="index"
>
<svg-icon
:icon-class="`${item}`"
/>
</el-button>
</el-popover>
</el-col>
<el-col
:span="2"
class="icon-list__tips"
{{ type }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="dataForm.typeList[dataForm.type] + '名称'"
prop="name"
>
<el-tooltip
placement="top"
effect="light"
>
<template #content>
<div>全站推荐使用SVG Sprite, 详细请参考:icons/index.js 描述</div>
</template>
<i class="el-icon-warning" />
</el-tooltip>
</el-col>
</el-row>
</el-form-item>
</el-form>
<!-- 对话框底部操作按钮 -->
<template #footer>
<el-input
v-model="dataForm.name"
:placeholder="dataForm.typeList[dataForm.type] + '名称'"
/>
</el-form-item>
<el-form-item label="上级菜单">
<el-cascader
v-model="selectedMenu"
expand-trigger="hover"
:options="menuList"
:props="menuListTreeProps"
change-on-select
:clearable="true"
@change="handleSelectMenuChange"
/>
</el-form-item>
<el-form-item
v-if="dataForm.type === 1"
label="菜单路由"
prop="url"
>
<el-input
v-model="dataForm.url"
placeholder="菜单路由"
/>
</el-form-item>
<el-form-item
v-if="dataForm.type !== 0"
label="授权标识"
prop="perms"
>
<el-input
v-model="dataForm.perms"
placeholder="多个用逗号分隔, 如: user:list,user:create"
/>
</el-form-item>
<el-form-item
v-if="dataForm.type !== 2"
label="排序号"
prop="orderNum"
>
<el-input-number
v-model="dataForm.orderNum"
controls-position="right"
:min="0"
label="排序号"
/>
</el-form-item>
<el-form-item
v-if="dataForm.type !== 2"
label="菜单图标"
prop="icon"
>
<el-row>
<el-col :span="22">
<el-input
ref="iconInputRef"
v-model="dataForm.icon"
:virtual-ref="iconListPopoverRef"
placeholder="菜单图标名称"
clearable
/>
<el-popover
ref="iconListPopoverRef"
style="width: 390px"
:virtual-ref="iconInputRef"
placement="bottom-start"
trigger="click"
:popper-style="iconPopoverClass"
virtual-triggering
>
<el-button
v-for="(item, index) in iconList"
:key="index"
style="padding: 8px; margin: 8px 0 0 8px"
:class="{ 'is-active': item === dataForm.icon }"
@click="iconActiveHandle(item)"
>
<svg-icon
:icon-class="`${item}`"
/>
</el-button>
</el-popover>
</el-col>
<el-col
:span="2"
class="icon-list__tips"
>
<el-tooltip
placement="top"
effect="light"
>
<template #content>
<div>全站推荐使用SVG Sprite, 详细请参考:icons/index.js 描述</div>
</template>
<i class="el-icon-warning" />
</el-tooltip>
</el-col>
</el-row>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 关闭对话框 -->
<el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 提交表单 -->
<el-button @click="visible = false">取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>
确定
</el-button>
</span>
</template>
</template>
</el-dialog>
</template>
<script setup>
import { treeDataTranslate, idList } from '@/utils'
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, onMounted, nextTick, defineEmits, defineExpose } from 'vue'
// 定义父组件事件
const emit = defineEmits(['refreshDataList'])
// 引用图标输入框和弹出框
const iconInputRef = ref(null)
const iconListPopoverRef = ref(null)
const iconPopoverClass = computed(() => {
return {
width: '396px'
}
})
// 计算图标弹出框样式
const iconPopoverClass = computed(() => ({
width: '396px'
}))
// 控制对话框显示状态的响应式变量
const visible = ref(false)
// 表单数据模型，使用reactive定义以保证其响应性
const dataForm = reactive({
id: 0,
type: 1,
@ -189,19 +169,15 @@ const dataForm = reactive({
icon: '',
iconList: []
})
// 上级菜单列表和选中值
const menuList = ref([])
const selectedMenu = ref([])
// 上级菜单树形结构属性配置
const menuListTreeProps = {
value: 'menuId',
label: 'name',
checkStrictly: true
}
// URL验证规则
// eslint-disable-next-line no-unused-vars
const validateUrl = (rule, value, callback) => {
if (dataForm.type === 1 && !/\S/.test(value)) {
callback(new Error('菜单URL不能为空'))
@ -209,8 +185,6 @@ const validateUrl = (rule, value, callback) => {
callback()
}
}
// 表单验证规则
const dataRule = ref({
name: [
{ required: true, message: '菜单名称不能为空', trigger: 'blur' },
@ -221,11 +195,10 @@ const dataRule = ref({
]
})
// 加载图标方法
onMounted(() => {
onLoadIcons()
})
const iconList = []
/**
* 加载图标
*/
@ -233,42 +206,35 @@ const onLoadIcons = () => {
const icons = import.meta.glob('@/icons/svg/*.svg')
for (const icon in icons) {
const iconName = icon.split('/src/icons/svg/')[1].split('.svg')[0]
dataForm.iconList.push(iconName)
iconList.push(iconName)
}
}
// 获取表单实例引用
const dataFormRef = ref(null)
/**
* 初始化方法，接收id作为参数
* @param id 菜单项ID
*/
const init = (id) => {
dataForm.id = id || 0 // 设置当前编辑的菜单项ID
dataForm.id = id || 0
http({
url: http.adornUrl('/sys/menu/list'),
method: 'get',
params: http.adornParams()
})
.then(({ data }) => {
menuList.value = treeDataTranslate(data, 'menuId') // 将菜单列表转换成树形结构
menuList.value = treeDataTranslate(data, 'menuId')
})
.then(() => {
visible.value = true // 打开对话框
visible.value = true
nextTick(() => {
dataFormRef.value?.resetFields() // 重置表单
dataFormRef.value?.resetFields()
})
})
.then(() => {
if (dataForm.id) {
// 如果有id，则获取该菜单项的详情
// 修改
http({
url: http.adornUrl(`/sys/menu/info/${dataForm.id}`),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
// 填充表单数据
dataForm.id = data.menuId
dataForm.type = data.type
dataForm.name = data.name
@ -280,39 +246,31 @@ const init = (id) => {
selectedMenu.value = idList(menuList.value, data.parentId, 'menuId', 'children').reverse()
})
} else {
selectedMenu.value = [] // 清空上级菜单选择
selectedMenu.value = []
}
})
}
defineExpose({ init })
/**
* 上级菜单选择变化处理
* @param val 选中的菜单路径
*/
const handleSelectMenuChange = (val) => {
dataForm.parentId = val[val.length - 1] // 设置parentId为最后一个选中的菜单ID
dataForm.parentId = val[val.length - 1]
}
/**
* 图标选中处理
* @param iconName 选中的图标名称
* 图标选中
* @param iconName
*/
const iconActiveHandle = (iconName) => {
dataForm.icon = iconName // 设置选中的图标名称
dataForm.icon = iconName
}
/**
* 表单提交
*/
const onSubmit = Debounce(() => {
// 验证表单
dataFormRef.value?.validate((valid) => {
if (valid) {
// 发送HTTP请求保存菜单信息
http({
url: http.adornUrl('/sys/menu'),
method: dataForm.id ? 'put' : 'post', // 判断是更新还是创建
method: dataForm.id ? 'put' : 'post',
data: http.adornData({
menuId: dataForm.id || undefined,
type: dataForm.type,
@ -325,14 +283,13 @@ const onSubmit = Debounce(() => {
})
})
.then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList') // 触发刷新数据列表事件
visible.value = false
emit('refreshDataList')
}
})
})

277
front-end/mall4v/src/views/modules/sys/menu/index.vue
Unescape View File

@ -1,211 +1,194 @@
<template>
<!-- 菜单管理模块 -->
<div class="mod-menu">
<!-- 搜索表单 -->
<el-form
:inline="true"
:model="dataForm"
:model="dataForm"
>
<el-form-item>
<!-- 新增按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:menu:save')"
type="primary"
@click="onAddOrUpdate()"
>
新增
</el-button>
</el-form-item>
<el-form-item>
<el-button
v-if="isAuth('sys:menu:save')"
type="primary"
@click="onAddOrUpdate()"
>
新增
</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
:data="dataList"
border
style="width: 100%;"
row-key="menuId"
border
style="width: 100%;"
row-key="menuId"
>
<!-- 名称列 -->
<el-table-column
prop="name"
header-align="center"
tree-key="menuId"
width="150"
label="名称"
/>
<!-- 图标列 -->
<el-table-column
header-align="center"
align="center"
label="图标"
>
<template #default="scope"> <!-- 自定义列内容 -->
<svg-icon
:icon-class="`icon-${scope.row.icon}`"
<el-table-column
prop="name"
header-align="center"
tree-key="menuId"
width="150"
label="名称"
/>
</template>
</el-table-column>
<!-- 类型列 -->
<el-table-column
prop="type"
header-align="center"
align="center"
label="类型"
>
<template #default="scope"> <!-- 自定义列内容 -->
<el-tag v-if="scope.row.type === 0">目录</el-tag> <!-- 根据类型动态渲染标签 -->
<el-tag v-else-if="scope.row.type === 1" type="success">菜单</el-tag>
<el-tag v-else-if="scope.row.type === 2" type="info">按钮</el-tag>
</template>
</el-table-column>
<!-- 排序号列 -->
<el-table-column
prop="orderNum"
header-align="center"
align="center"
label="排序号"
/>
<!-- 菜单URL列 -->
<el-table-column
prop="url"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="菜单URL"
>
<template #default="scope"> <!-- 自定义列内容 -->
{{ scope.row.url || '-' }} <!-- 如果没有值则显示'-' -->
</template>
</el-table-column>
<!-- 授权标识列 -->
<el-table-column
prop="perms"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="授权标识"
>
<template #default="scope"> <!-- 自定义列内容 -->
{{ scope.row.perms || '-' }} <!-- 如果没有值则显示'-' -->
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
<template #default="scope"> <!-- 自定义列内容 -->
<!-- 修改按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:menu:update')"
type="text"
@click="onAddOrUpdate(scope.row.menuId)"
<el-table-column
header-align="center"
align="center"
label="图标"
>
<template #default="scope">
<svg-icon
:icon-class="`icon-${scope.row.icon}`"
/>
</template>
</el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
label="类型"
>
<template #default="scope">
<el-tag
v-if="scope.row.type === 0"
>
目录
</el-tag>
<el-tag
v-else-if="scope.row.type === 1"
type="success"
>
菜单
</el-tag>
<el-tag
v-else-if="scope.row.type === 2"
type="info"
>
按钮
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="orderNum"
header-align="center"
align="center"
label="排序号"
/>
<el-table-column
prop="url"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="菜单URL"
>
<template #default="scope">
{{ scope.row.url || '-' }}
</template>
</el-table-column>
<el-table-column
prop="perms"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="授权标识"
>
修改
</el-button>
<!-- 删除按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:menu:delete')"
type="text"
@click="onDelete(scope.row.menuId)"
<template #default="scope">
{{ scope.row.perms || '-' }}
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
删除
</el-button>
</template>
</el-table-column>
<template #default="scope">
<el-button
v-if="isAuth('sys:menu:update')"
type="text"
@click="onAddOrUpdate(scope.row.menuId)"
>
修改
</el-button>
<el-button
v-if="isAuth('sys:menu:delete')"
type="text"
@click="onDelete(scope.row.menuId)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
@close="addOrUpdateVisible=false"
/>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { treeDataTranslate, isAuth } from '@/utils' // 导入工具函数
import { ElMessage, ElMessageBox } from 'element-plus' // 导入消息提示和确认框组件
import AddOrUpdate from './add-or-update.vue' // 引入新增/修改弹窗组件
import { treeDataTranslate, isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddOrUpdate from './add-or-update.vue'
// 表单数据模型
const dataForm = ref({})
// 在组件挂载完成后获取数据列表
onMounted(() => {
getDataList()
})
// 数据列表绑定的响应式变量
const dataList = ref([])
/**
* 获取数据列表方法
* 获取数据列表
*/
const getDataList = () => {
http({
url: http.adornUrl('/sys/menu/table'), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
url: http.adornUrl('/sys/menu/table'),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
dataList.value = treeDataTranslate(data, 'menuId') // 更新表格数据并转换成树形结构
dataList.value = treeDataTranslate(data, 'menuId')
})
}
// 新增/修改弹窗引用
const addOrUpdateRef = ref(null)
// 控制弹窗显示状态的响应式变量
const addOrUpdateVisible = ref(false)
/**
* 新增 / 修改菜单项
* @param id 菜单项ID（可选），如果没有传入，则表示新增
* 新增 / 修改
* @param id
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示弹窗
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化弹窗数据
addOrUpdateRef.value?.init(id)
})
}
/**
* 删除菜单项
* @param id 菜单项ID
* 删除
* @param id
*/
const onDelete = (id) => {
// 显示确认框
ElMessageBox.confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送HTTP请求执行删除操作
http({
url: http.adornUrl(`/sys/menu/${id}`),
method: 'delete',
data: http.adornData()
}).then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
getDataList() // 刷新数据列表
getDataList()
}
})
})

217
front-end/mall4v/src/views/modules/sys/role/add-or-update.vue
Unescape View File

@ -1,180 +1,136 @@
<template>
<!-- 角色管理对话框 -->
<el-dialog
v-model="visible"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<!-- 角色名称输入框 -->
<el-form-item
label="角色名称"
prop="roleName"
>
<el-input
v-model="dataForm.roleName"
placeholder="角色名称"
/>
</el-form-item>
<!-- 备注输入框 -->
<el-form-item
label="备注"
prop="remark"
>
<el-input
v-model="dataForm.remark"
placeholder="备注"
/>
</el-form-item>
<!-- 授权菜单树 -->
<el-form-item label="授权">
<el-tree
ref="menuListTreeRef"
:data="menuList"
:props="menuListTreeProps"
node-key="menuId"
show-checkbox
/>
</el-form-item>
</el-form>
<!-- 对话框底部按钮组 -->
<template #footer>
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<el-form-item
label="角色名称"
prop="roleName"
>
<el-input
v-model="dataForm.roleName"
placeholder="角色名称"
/>
</el-form-item>
<el-form-item
label="备注"
prop="remark"
>
<el-input
v-model="dataForm.remark"
placeholder="备注"
/>
</el-form-item>
<el-form-item label="授权">
<el-tree
ref="menuListTreeRef"
:data="menuList"
:props="menuListTreeProps"
node-key="menuId"
show-checkbox
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 取消按钮 -->
<el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 确认按钮 -->
<el-button @click="visible = false">取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span>
</template>
</template>
</el-dialog>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus' // 导入消息提示组件
import { treeDataTranslate } from '@/utils' // 导入树数据转换工具函数
import { Debounce } from '@/utils/debounce' // 导入防抖函数
import { ElMessage } from 'element-plus'
import { treeDataTranslate } from '@/utils'
import { Debounce } from '@/utils/debounce'
// 定义事件发射器
const emit = defineEmits(['refreshDataList'])
// 临时key，用于解决tree半选中状态项不能传给后台接口问题，待优化
const tempKey = -666666
// 控制对话框显示状态的响应式变量
const tempKey = -666666 // 临时key) 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
const visible = ref(false)
// 存储菜单列表的响应式变量
const menuList = ref([])
// 定义菜单树的属性映射
const menuListTreeProps = {
label: 'name', // 树节点标签对应的属性名
children: 'children' // 子节点数组对应的属性名
label: 'name',
children: 'children'
}
// 表单数据模型，使用reactive定义以使其成为响应式的
const dataForm = reactive({
id: 0, // 角色ID，默认为0表示新增
roleName: '', // 角色名称
remark: '' // 备注
id: 0,
roleName: '',
remark: ''
})
// 表单验证规则，使用reactive定义以使其成为响应式的
const dataRule = reactive({
roleName: [ // 验证规则：角色名称
{ required: true, message: '角色名称不能为空', trigger: 'blur' }, // 必填项
{ pattern: /\s\S+|\S+\s|\S/, message: '请输入正确的角色名称', trigger: 'blur' } // 正则表达式验证
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' },
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的角色名称', trigger: 'blur' }
],
remark: [ // 验证规则：备注
{ required: false, pattern: /\s\S+|\S+\s|\S/, message: '输入格式有误', trigger: 'blur' } // 可选，正则表达式验证
remark: [
{ required: false, pattern: /\s\S+|S+\s|\S/, message: '输入格式有误', trigger: 'blur' }
]
})
// 引用表单实例
const dataFormRef = ref(null)
// 引用菜单树实例
const menuListTreeRef = ref(null)
/**
* 初始化方法，接收可选的角色ID参数
* @param id 角色ID（可选）
*/
const init = (id) => {
dataForm.id = id || 0 // 如果提供了id，则设置为编辑模式；否则设置为新增模式
// 获取菜单列表并初始化对话框
dataForm.id = id || 0
http({
url: http.adornUrl('/sys/menu/table'), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
url: http.adornUrl('/sys/menu/table'),
method: 'get',
params: http.adornParams()
})
.then(({ data }) => {
menuList.value = treeDataTranslate(data, 'menuId', 'parentId') // 将菜单数据转换为树形结构
})
.then(() => {
visible.value = true // 显示对话框
return nextTick() // 等待DOM更新
menuList.value = treeDataTranslate(data, 'menuId', 'parentId')
})
.then(() => {
dataFormRef.value?.resetFields() // 重置表单数据
menuListTreeRef.value?.setCheckedKeys([]) // 清除菜单树的选择状态
visible.value = true
nextTick(() => {
dataFormRef.value?.resetFields()
menuListTreeRef.value?.setCheckedKeys([])
})
})
.then(() => {
if (dataForm.id) { // 如果是编辑模式，则获取角色详情
if (dataForm.id) {
http({
url: http.adornUrl(`/sys/role/info/${dataForm.id}`), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
url: http.adornUrl(`/sys/role/info/${dataForm.id}`),
method: 'get',
params: http.adornParams()
})
.then(({ data }) => {
dataForm.roleName = data.roleName // 设置角色名称
dataForm.remark = data.remark // 设置备注
// 处理菜单授权数据，移除临时key
dataForm.roleName = data.roleName
dataForm.remark = data.remark
const idx = data.menuIdList.indexOf(tempKey)
if (idx !== -1) {
data.menuIdList.splice(idx, data.menuIdList.length - idx)
}
// 设置菜单树的已选节点
menuListTreeRef.value?.setCheckedKeys(data.menuIdList)
})
}
})
}
// 将init方法暴露出去，以便父组件调用
defineExpose({ init })
/**
* 提交表单方法
* 表单提交
*/
const onSubmit = Debounce(() => { // 使用防抖函数防止快速点击多次提交
dataFormRef.value?.validate((valid) => { // 验证表单
if (valid) { // 如果表单验证通过
const onSubmit = Debounce(() => {
dataFormRef.value?.validate((valid) => {
if (valid) {
http({
url: http.adornUrl('/sys/role'), // API端点
method: dataForm.id ? 'put' : 'post', // 如果有id则是编辑操作，否则为新增操作
url: http.adornUrl('/sys/role'),
method: dataForm.id ? 'put' : 'post',
data: http.adornData({
roleId: dataForm.id || undefined, // 角色ID，新增时不发送
roleName: dataForm.roleName, // 角色名称
remark: dataForm.remark, // 备注
// 收集菜单树的选中和半选中的节点ID
menuIdList: [].concat(
menuListTreeRef.value?.getCheckedKeys(),
[tempKey],
menuListTreeRef.value?.getHalfCheckedKeys()
)
roleId: dataForm.id || undefined,
roleName: dataForm.roleName,
remark: dataForm.remark,
menuIdList: [].concat(menuListTreeRef.value?.getCheckedKeys(), [tempKey], menuListTreeRef.value?.getHalfCheckedKeys())
})
})
.then(() => {
@ -183,12 +139,13 @@ const onSubmit = Debounce(() => { // 使用防抖函数防止快速点击多次
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList') // 发射刷新事件通知父组件刷新数据列表
visible.value = false
emit('refreshDataList')
}
})
})
}
})
})
</script>

185
front-end/mall4v/src/views/modules/sys/role/index.vue
Unescape View File

@ -1,186 +1,153 @@
<template>
<!-- 角色管理模块 -->
<div class="mod-role">
<!-- 使用avue-crud创建CRUD表格 -->
<avue-crud
ref="crudRef"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
>
<!-- 左侧菜单栏 -->
<template #menu-left>
<!-- 新增按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:role:save')"
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<!-- 批量删除按钮，只有有权限且选择了项目时显示 -->
<el-button
v-if="isAuth('sys:role:delete')"
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<!-- 行内菜单 -->
<template #menu="scope"> <!-- 自定义行内菜单 -->
<!-- 编辑按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:role:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.roleId)"
>
编辑
</el-button>
<!-- 删除按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:role:delete')"
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.roleId)"
>
删除
</el-button>
</template>
<template #menu-left>
<el-button
v-if="isAuth('sys:role:save')"
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<el-button
v-if="isAuth('sys:role:delete')"
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<template #menu="scope">
<el-button
v-if="isAuth('sys:role:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.roleId)"
>
编辑
</el-button>
<el-button
v-if="isAuth('sys:role:delete')"
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.roleId)"
>
删除
</el-button>
</template>
</avue-crud>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
/>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { isAuth } from '@/utils' // 导入权限检查工具函数
import { ElMessage, ElMessageBox } from 'element-plus' // 导入消息提示和确认框组件
import { tableOption } from '@/crud/sys/role.js' // 导入表格配置选项
import AddOrUpdate from './add-or-update.vue' // 引入新增/修改弹窗组件
// 数据列表绑定的响应式变量
import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/sys/role.js'
import AddOrUpdate from './add-or-update.vue'
const dataList = ref([])
// 多选数据绑定的响应式变量
const dataListSelections = ref([])
// 分页配置对象，使用reactive定义以使其成为响应式的
const page = reactive({
total: 0, // 总记录数
currentPage: 1, // 当前页码
pageSize: 10 // 每页大小
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
/**
* 获取数据列表方法
* @param pageParam 分页参数（可选）
* @param params 搜索参数（可选）
* @param done 加载完成回调（可选）
* 获取数据列表
*/
const getDataList = (pageParam, params, done) => {
http({
url: http.adornUrl('/sys/role/page'), // API端点
method: 'get', // 请求方式
url: http.adornUrl('/sys/role/page'),
method: 'get',
params: http.adornParams(
Object.assign(
{
current: pageParam == null ? page.currentPage : pageParam.currentPage, // 当前页码
size: pageParam == null ? page.pageSize : pageParam.pageSize // 每页大小
current: pageParam == null ? page.currentPage : pageParam.currentPage,
size: pageParam == null ? page.pageSize : pageParam.pageSize
},
params // 搜索参数
params
)
)
})
.then(({ data }) => {
dataList.value = data.records // 更新数据列表
page.total = data.total // 更新总记录数
dataList.value = data.records
page.total = data.total
if (done) {
done() // 如果存在加载完成回调，则调用
done()
}
})
}
/**
* 条件查询方法
* @param params 搜索参数
* @param done 加载完成回调（可选）
* 条件查询
*/
const onSearch = (params, done) => {
getDataList(page, params, done)
}
/**
* 多选变化方法
* @param val 选择的数据项
* 多选变化
*/
const selectionChange = (val) => {
dataListSelections.value = val // 更新多选数据
dataListSelections.value = val
}
// 控制弹窗显示状态的响应式变量
const addOrUpdateVisible = ref(false)
// 引用弹窗实例
const addOrUpdateRef = ref(null)
/**
* 新增 / 修改角色信息
* @param id 角色ID（可选），如果没有传入，则表示新增
* 新增 / 修改
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示弹窗
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化弹窗数据
addOrUpdateRef.value?.init(id)
})
}
/**
* 删除角色信息
* @param id 角色ID（可选），如果传入则为单个删除，否则为批量删除
* 删除
*/
const onDelete = (id) => {
const ids = id ? [id] : dataListSelections.value?.map(item => item.roleId) // 收集要删除的角色ID
// 显示确认框
const ids = id ? [id] : dataListSelections.value?.map(item => {
return item.roleId
})
ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// 发送HTTP请求执行删除操作
http({
url: http.adornUrl('/sys/role'),
method: 'delete',
data: http.adornData(ids, false) // 发送要删除的角色ID列表
data: http.adornData(ids, false)
})
.then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
getDataList() // 刷新数据列表
getDataList()
}
})
})
}).catch(() => { /* 用户取消删除操作 */ })
}).catch(() => { })
}
</script>

356
front-end/mall4v/src/views/modules/sys/user/add-or-update.vue
Unescape View File

@ -1,264 +1,231 @@
<template>
<!-- 用户管理对话框 -->
<el-dialog
v-model="visible"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<!-- 用户名输入框 -->
<el-form-item
label="用户名"
prop="userName"
>
<el-input
v-model="dataForm.userName"
placeholder="登录帐号"
/>
</el-form-item>
<!-- 密码输入框 -->
<el-form-item
label="密码"
prop="password"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.password"
type="password"
placeholder="密码"
/>
</el-form-item>
<!-- 确认密码输入框 -->
<el-form-item
label="确认密码"
prop="comfirmPassword"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.comfirmPassword"
type="password"
placeholder="确认密码"
/>
</el-form-item>
<!-- 邮箱输入框 -->
<el-form-item
label="邮箱"
prop="email"
>
<el-input
v-model="dataForm.email"
placeholder="邮箱"
/>
</el-form-item>
<!-- 手机号输入框 -->
<el-form-item
label="手机号"
prop="mobile"
>
<el-input
v-model="dataForm.mobile"
maxlength="11"
placeholder="手机号"
/>
</el-form-item>
<!-- 角色选择 -->
<el-form-item
label="角色"
prop="roleIdList"
>
<el-checkbox-group v-model="dataForm.roleIdList"> <!-- 绑定选中的角色ID列表 -->
<el-checkbox
v-for="role in roleList"
:key="role.roleId"
:label="role.roleId"
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
{{ role.roleName }} <!-- 显示角色名称 -->
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 状态选择 -->
<el-form-item
label="状态"
prop="status"
>
<el-radio-group v-model="dataForm.status"> <!-- 绑定状态值 -->
<el-radio :label="0">禁用</el-radio> <!-- 禁用状态 -->
<el-radio :label="1">正常</el-radio> <!-- 正常状态 -->
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部按钮组 -->
<template #footer>
<el-form-item
label="用户名"
prop="userName"
>
<el-input
v-model="dataForm.userName"
placeholder="登录帐号"
/>
</el-form-item>
<el-form-item
label="密码"
prop="password"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.password"
type="password"
placeholder="密码"
/>
</el-form-item>
<el-form-item
label="确认密码"
prop="comfirmPassword"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.comfirmPassword"
type="password"
placeholder="确认密码"
/>
</el-form-item>
<el-form-item
label="邮箱"
prop="email"
>
<el-input
v-model="dataForm.email"
placeholder="邮箱"
/>
</el-form-item>
<el-form-item
label="手机号"
prop="mobile"
>
<el-input
v-model="dataForm.mobile"
maxlength="11"
placeholder="手机号"
/>
</el-form-item>
<el-form-item
label="角色"
prop="roleIdList"
>
<el-checkbox-group v-model="dataForm.roleIdList">
<el-checkbox
v-for="role in roleList"
:key="role.roleId"
:label="role.roleId"
>
{{ role.roleName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item
label="状态"
prop="status"
>
<el-radio-group v-model="dataForm.status">
<el-radio :label="0">
禁用
</el-radio>
<el-radio :label="1">
正常
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 取消按钮 -->
<el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 确认按钮 -->
<el-button @click="visible = false">取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span>
</template>
</template>
</el-dialog>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus' // 导入消息提示组件
import { isEmail, isMobile } from '@/utils/validate' // 导入邮箱和手机号格式验证工具函数
import { Debounce } from '@/utils/debounce' // 导入防抖函数
import { encrypt } from '@/utils/crypto' // 导入加密工具函数
// 定义事件发射器
import { ElMessage } from 'element-plus'
import { isEmail, isMobile } from '@/utils/validate'
import { Debounce } from '@/utils/debounce'
import { encrypt } from '@/utils/crypto'
const emit = defineEmits(['refreshDataList'])
// 控制对话框显示状态的响应式变量
const visible = ref(false)
// 表单数据模型，使用reactive定义以使其成为响应式的
const dataForm = reactive({
id: 0, // 用户ID，默认为0表示新增
userName: '', // 用户名
password: '', // 密码
comfirmPassword: '', // 确认密码
email: '', // 邮箱
mobile: '', // 手机号
roleIdList: [], // 角色ID列表
status: 1 // 状态，默认为1表示正常
id: 0,
userName: '',
password: '',
comfirmPassword: '',
email: '',
mobile: '',
roleIdList: [],
status: 1
})
// 验证密码是否为空（仅在新增时）
// eslint-disable-next-line no-unused-vars
const validatePassword = (rule, value, callback) => {
if (!dataForm.id && !/\S/.test(value)) { // 如果是新增且密码为空，则报错
if (!dataForm.id && !/\S/.test(value)) {
callback(new Error('密码不能为空'))
} else {
callback() // 否则通过验证
callback()
}
}
// 验证确认密码是否为空及与密码一致（仅在新增时）
// eslint-disable-next-line no-unused-vars
const validateComfirmPassword = (rule, value, callback) => {
if (!dataForm.id && !/\S/.test(value)) { // 如果是新增且确认密码为空，则清空密码并报错
if (!dataForm.id && !/\S/.test(value)) {
dataForm.password = ''
callback(new Error('确认密码不能为空'))
} else if (dataForm.password !== value) { // 如果确认密码与密码不一致，则报错
} else if (dataForm.password !== value) {
callback(new Error('确认密码与密码输入不一致'))
} else {
callback() // 否则通过验证
callback()
}
}
// 验证邮箱格式
// eslint-disable-next-line no-unused-vars
const validateEmail = (rule, value, callback) => {
if (!isEmail(value)) { // 如果邮箱格式错误，则报错
if (!isEmail(value)) {
callback(new Error('邮箱格式错误'))
} else {
callback() // 否则通过验证
callback()
}
}
// 验证手机号格式
// eslint-disable-next-line no-unused-vars
const validateMobile = (rule, value, callback) => {
if (!isMobile(value)) { // 如果手机号格式错误，则报错
if (!isMobile(value)) {
callback(new Error('手机号格式错误'))
} else {
callback() // 否则通过验证
callback()
}
}
// 表单验证规则，使用reactive定义以使其成为响应式的
const dataRule = reactive({
const dataRule = {
userName: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }, // 必填项
{ pattern: /\s\S+|\S+\s|\S/, message: '请输入正确的用户名', trigger: 'blur' } // 正则表达式验证
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ pattern: /\s\S+|S+\s|\S/, message: '请输入正确的用户名', trigger: 'blur' }
],
password: [
{ validator: validatePassword, trigger: 'blur' } // 自定义验证规则
{ validator: validatePassword, trigger: 'blur' }
],
comfirmPassword: [
{ validator: validateComfirmPassword, trigger: 'blur' } // 自定义验证规则
{ validator: validateComfirmPassword, trigger: 'blur' }
],
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' }, // 必填项
{ validator: validateEmail, trigger: 'blur' } // 自定义验证规则
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ validator: validateEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '手机号不能为空', trigger: 'blur' }, // 必填项
{ validator: validateMobile, trigger: 'blur' } // 自定义验证规则
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ validator: validateMobile, trigger: 'blur' }
]
})
}
// 存储角色列表的响应式变量
const roleList = ref([])
// 引用表单实例
const dataFormRef = ref(null)
/**
* 初始化方法，接收可选的用户ID参数
* @param id 用户ID（可选）
*/
const init = (id) => {
dataForm.id = id || 0 // 如果提供了id，则设置为编辑模式；否则设置为新增模式
// 获取角色列表并初始化对话框
dataForm.id = id || 0
http({
url: http.adornUrl('/sys/role/list'), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
url: http.adornUrl('/sys/role/list'),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
roleList.value = data // 更新角色列表
roleList.value = data
}).then(() => {
visible.value = true // 显示对话框
return nextTick() // 等待DOM更新
visible.value = true
nextTick(() => {
dataFormRef.value?.resetFields()
})
}).then(() => {
dataFormRef.value?.resetFields() // 重置表单数据
}).then(() => {
if (dataForm.id) { // 如果是编辑模式，则获取用户详情
if (dataForm.id) {
http({
url: http.adornUrl(`/sys/user/info/${dataForm.id}`), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
url: http.adornUrl(`/sys/user/info/${dataForm.id}`),
method: 'get',
params: http.adornParams()
}).then(({ data }) => {
dataForm.userName = data.username // 设置用户名
dataForm.email = data.email // 设置邮箱
dataForm.mobile = data.mobile // 设置手机号
dataForm.roleIdList = data.roleIdList // 设置角色ID列表
dataForm.status = data.status // 设置状态
dataForm.userName = data.username
dataForm.email = data.email
dataForm.mobile = data.mobile
dataForm.roleIdList = data.roleIdList
dataForm.status = data.status
})
}
})
}
// 将init方法暴露出去，以便父组件调用
defineExpose({ init })
/**
* 提交表单方法
* 表单提交
*/
const onSubmit = Debounce(() => { // 使用防抖函数防止快速点击多次提交
dataFormRef.value?.validate((valid) => { // 验证表单
if (valid) { // 如果表单验证通过
const onSubmit = Debounce(() => {
dataFormRef.value?.validate((valid) => {
if (valid) {
http({
url: http.adornUrl('/sys/user'), // API端点
method: dataForm.id ? 'put' : 'post', // 如果有id则是编辑操作，否则为新增操作
url: http.adornUrl('/sys/user'),
method: dataForm.id ? 'put' : 'post',
data: http.adornData({
userId: dataForm.id || undefined, // 用户ID，新增时不发送
username: dataForm.userName, // 用户名
password: encrypt(dataForm.password), // 加密后的密码
email: dataForm.email, // 邮箱
mobile: dataForm.mobile, // 手机号
status: dataForm.status, // 状态
roleIdList: dataForm.roleIdList // 角色ID列表
userId: dataForm.id || undefined,
username: dataForm.userName,
password: encrypt(dataForm.password),
email: dataForm.email,
mobile: dataForm.mobile,
status: dataForm.status,
roleIdList: dataForm.roleIdList
})
}).then(() => {
ElMessage({
@ -266,12 +233,13 @@ const onSubmit = Debounce(() => { // 使用防抖函数防止快速点击多次
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList') // 发射刷新事件通知父组件刷新数据列表
visible.value = false
emit('refreshDataList')
}
})
})
}
})
})
</script>

190
front-end/mall4v/src/views/modules/sys/user/index.vue
Unescape View File

@ -1,187 +1,155 @@
<template>
<!-- 用户管理模块 -->
<div class="mod-user">
<!-- 使用avue-crud创建CRUD表格 -->
<avue-crud
ref="crudRef"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
>
<!-- 左侧菜单栏 -->
<template #menu-left>
<!-- 新增按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:user:save')"
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
<template #menu-left>
<el-button
v-if="isAuth('sys:user:save')"
type="primary"
icon="el-icon-plus"
@click.stop="onAddOrUpdate()"
>
新增
</el-button>
<el-button
v-if="isAuth('sys:user:delete')"
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<template
#menu="scope"
>
新增
</el-button>
<!-- 批量删除按钮，只有有权限且选择了项目时显示 -->
<el-button
v-if="isAuth('sys:user:delete')"
type="danger"
:disabled="dataListSelections.length <= 0"
@click="onDelete()"
>
批量删除
</el-button>
</template>
<!-- 行内菜单 -->
<template #menu="scope"> <!-- 自定义行内菜单 -->
<!-- 编辑按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:user:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.userId)"
>
编辑
</el-button>
<!-- 删除按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('sys:user:delete')"
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.userId)"
>
删除
</el-button>
</template>
<el-button
v-if="isAuth('sys:user:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.userId)"
>
编辑
</el-button>
<el-button
v-if="isAuth('sys:user:delete')"
type="danger"
icon="el-icon-delete"
@click.stop="onDelete(scope.row.userId)"
>
删除
</el-button>
</template>
</avue-crud>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
/>
</div>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { isAuth } from '@/utils' // 导入权限检查工具函数
import { ElMessage, ElMessageBox } from 'element-plus' // 导入消息提示和确认框组件
import { tableOption } from '@/crud/sys/user.js' // 导入表格配置选项
import AddOrUpdate from './add-or-update.vue' // 引入新增/修改弹窗组件
import { isAuth } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableOption } from '@/crud/sys/user.js'
import AddOrUpdate from './add-or-update.vue'
// 数据列表绑定的响应式变量
const dataList = ref([])
// 加载状态绑定的响应式变量
const dataListLoading = ref(false)
// 多选数据绑定的响应式变量
const dataListSelections = ref([])
// 控制弹窗显示状态的响应式变量
const addOrUpdateVisible = ref(false)
// 分页配置对象，使用reactive定义以使其成为响应式的
const page = reactive({
total: 0, // 总记录数
currentPage: 1, // 当前页码
pageSize: 10 // 每页大小
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
/**
* 获取数据列表方法
* @param pageParam 分页参数（可选）
* @param params 搜索参数（可选）
* @param done 加载完成回调（可选）
* 获取数据列表
*/
const getDataList = (pageParam, params, done) => {
dataListLoading.value = true // 设置加载状态为true
dataListLoading.value = true
http({
url: http.adornUrl('/sys/user/page'), // API端点
method: 'get', // 请求方式
url: http.adornUrl('/sys/user/page'),
method: 'get',
params: http.adornParams(
Object.assign(
{
current: pageParam == null ? page.currentPage : pageParam.currentPage, // 当前页码
size: pageParam == null ? page.pageSize : pageParam.pageSize // 每页大小
current: pageParam == null ? page.currentPage : pageParam.currentPage,
size: pageParam == null ? page.pageSize : pageParam.pageSize
},
params // 搜索参数
params
)
)
}).then(({ data }) => {
dataList.value = data.records // 更新数据列表
page.total = data.total // 更新总记录数
dataListLoading.value = false // 设置加载状态为false
if (done) done() // 如果存在加载完成回调，则调用
dataList.value = data.records
page.total = data.total
dataListLoading.value = false
if (done) done()
})
}
/**
* 条件查询方法
* @param params 搜索参数
* @param done 加载完成回调（可选）
* 条件查询
*/
const onSearch = (params, done) => {
getDataList(page, params, done)
}
/**
* 多选变化方法
* @param val 选择的数据项
* 多选变化
*/
const selectionChange = (val) => {
dataListSelections.value = val // 更新多选数据
dataListSelections.value = val
}
// 引用弹窗实例
const addOrUpdateRef = ref(null)
/**
* 新增 / 修改用户信息
* @param id 用户ID（可选），如果没有传入，则表示新增
* 新增 / 修改
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示弹窗
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化弹窗数据
addOrUpdateRef.value?.init(id)
})
}
/**
* 删除用户信息
* @param id 用户ID（可选），如果传入则为单个删除，否则为批量删除
* 删除
*/
const onDelete = (id) => {
const userIds = id ? [id] : dataListSelections.value?.map(item => item.userId) // 收集要删除的用户ID
// 显示确认框
const userIds = id ? [id] : dataListSelections.value?.map(item => {
return item.userId
})
ElMessageBox.confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送HTTP请求执行删除操作
http({
url: http.adornUrl('/sys/user'),
method: 'delete',
data: http.adornData(userIds, false) // 发送要删除的用户ID列表
data: http.adornData(userIds, false)
}).then(() => {
// 成功提示
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
getDataList() // 刷新数据列表
getDataList()
}
})
})
}).catch(() => { /* 用户取消删除操作 */ })
}).catch(() => { })
}
</script>

203
front-end/mall4v/src/views/modules/user/user/add-or-update.vue
Unescape View File

@ -1,152 +1,139 @@
<template>
<!-- 用户管理对话框 -->
<el-dialog
v-model="visible"
:title="!dataForm.userId ? '新增' : '修改'"
:close-on-click-modal="false"
:title="!dataForm.userId ? '新增' : '修改'"
:close-on-click-modal="false"
>
<!-- 表单 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<!-- 用户头像展示 -->
<el-form-item
label="用户头像"
prop="pic"
>
<img
v-if="dataForm.pic"
:src="dataForm.pic"
class="image"
alt=""
/>
<div v-else>无</div> <!-- 如果没有头像，则显示文本 -->
</el-form-item>
<!-- 用户昵称输入框 -->
<el-form-item
label="用户昵称"
prop="nickName"
>
<el-input
v-model="dataForm.nickName"
:disabled="true"
placeholder="用户昵称"
/>
</el-form-item>
<!-- 状态选择 -->
<el-form-item
label="状态"
prop="status"
>
<el-radio-group v-model="dataForm.status"> <!-- 绑定状态值 -->
<el-radio :label="0">禁用</el-radio> <!-- 禁用状态 -->
<el-radio :label="1">正常</el-radio> <!-- 正常状态 -->
</el-radio-group>
</el-form-item>
</el-form>
<!-- 对话框底部按钮组 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <!-- 取消按钮 -->
<el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 确认按钮 -->
<el-form
ref="dataFormRef"
:model="dataForm"
:rules="dataRule"
label-width="80px"
@keyup.enter="onSubmit()"
>
<el-form-item
label="用户头像"
prop="pic"
>
<img
v-if="dataForm.pic"
:src="dataForm.pic"
class="image"
alt=""
>
<div v-else>
无
</div>
</el-form-item>
<el-form-item
label="用户昵称"
prop="nickName"
>
<el-input
v-model="dataForm.nickName"
:disabled="true"
placeholder="用户昵称"
/>
</el-form-item>
<el-form-item
label="状态"
prop="status"
>
<el-radio-group v-model="dataForm.status">
<el-radio :label="0">
禁用
</el-radio>
<el-radio :label="1">
正常
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span
class="dialog-footer"
>
<el-button @click="visible = false">取消</el-button>
<el-button
type="primary"
@click="onSubmit()"
>确定</el-button>
</span>
</template>
</template>
</el-dialog>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus' // 导入消息提示组件
import { Debounce } from '@/utils/debounce' // 导入防抖函数
// 定义事件发射器
import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce'
const emit = defineEmits(['refreshDataList'])
// 控制对话框显示状态的响应式变量
const visible = ref(false)
// 表单数据模型，使用ref定义以使其成为响应式的
const dataForm = ref({
userId: 0, // 用户ID，默认为0表示新增
nickName: '', // 用户昵称
pic: '', // 用户头像链接
status: 1 // 状态，默认为1表示正常
userId: 0,
nickName: '',
pic: '',
status: 1
})
// 分页配置对象，使用reactive定义以使其成为响应式的
const page = reactive({
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
// 表单验证规则，使用对象字面量定义
const dataRule = {
nickName: [
{ required: true, message: '用户名不能为空', trigger: 'blur' } // 必填项
{ required: true, message: '用户名不能为空', trigger: 'blur' }
]
}
// 引用表单实例
const dataFormRef = ref(null)
/**
* 初始化方法，接收可选的用户ID参数
* @param id 用户ID（可选）
*/
const init = (id) => {
dataForm.value.userId = id || 0 // 如果提供了id，则设置为编辑模式；否则设置为新增模式
visible.value = true // 显示对话框
dataForm.value.userId = id || 0
visible.value = true
nextTick(() => {
dataFormRef.value?.resetFields() // 重置表单数据
dataFormRef.value?.resetFields()
})
if (dataForm.value.userId) { // 如果是编辑模式，则获取用户详情
if (dataForm.value.userId) {
http({
url: http.adornUrl(`/admin/user/info/${dataForm.value.userId}`), // API端点
method: 'get', // 请求方式
params: http.adornParams() // 请求参数
}).then(({ data }) => {
dataForm.value = data // 更新表单数据
url: http.adornUrl(`/admin/user/info/${dataForm.value.userId}`),
method: 'get',
params: http.adornParams()
})
.then(({ data }) => {
dataForm.value = data
})
}
}
// 将init方法暴露出去，以便父组件调用
defineExpose({ init })
/**
* 提交表单方法
* 表单提交
*/
const onSubmit = Debounce(() => { // 使用防抖函数防止快速点击多次提交
dataFormRef.value?.validate((valid) => { // 验证表单
if (valid) { // 如果表单验证通过
const onSubmit = Debounce(() => {
dataFormRef.value?.validate(valid => {
if (valid) {
http({
url: http.adornUrl('/admin/user'), // API端点
method: dataForm.value.userId ? 'put' : 'post', // 如果有userId则是编辑操作，否则为新增操作
url: http.adornUrl('/admin/user'),
method: dataForm.value.userId ? 'put' : 'post',
data: http.adornData({
userId: dataForm.value.userId || undefined, // 用户ID，新增时不发送
nickName: dataForm.value.nickName, // 用户昵称
status: dataForm.value.status // 状态
})
}).then(() => {
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false // 关闭对话框
emit('refreshDataList', page) // 发射刷新事件通知父组件刷新数据列表，并传递分页信息
}
userId: dataForm.value.userId || undefined,
nickName: dataForm.value.nickName,
status: dataForm.value.status
})
})
.then(() => {
ElMessage({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
visible.value = false
emit('refreshDataList', page)
}
})
})
}
})
})
</script>

145
front-end/mall4v/src/views/modules/user/user/index.vue
Unescape View File

@ -1,139 +1,120 @@
<template>
<!-- 用户管理模块 -->
<div class="mod-user">
<!-- 使用avue-crud创建CRUD表格 -->
<avue-crud
ref="crudRef"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
:page="page"
:data="dataList"
:option="tableOption"
@search-change="onSearch"
@selection-change="selectionChange"
@on-load="getDataList"
>
<!-- 自定义列模板：用户头像 -->
<template #pic="scope"> <!-- 自定义用户头像列 -->
<span v-if="scope.row.pic" class="avue-crud__img">
<el-icon><Document /></el-icon> <!-- 如果存在头像链接，则显示图标 -->
<template #pic="scope">
<span
v-if="scope.row.pic"
class="avue-crud__img"
>
<el-icon><Document /></el-icon>
</span>
<span v-else>-</span> <!-- 否则显示"-" -->
</template>
<span v-else>-</span>
</template>
<!-- 自定义列模板：状态 -->
<template #status="scope"> <!-- 自定义状态列 -->
<el-tag v-if="scope.row.status === 0" type="danger">
禁用
</el-tag>
<el-tag v-else>
正常
</el-tag>
</template>
<template #status="scope">
<el-tag
v-if="scope.row.status === 0"
type="danger"
>
禁用
</el-tag>
<el-tag v-else>
正常
</el-tag>
</template>
<!-- 自定义行内菜单 -->
<template #menu="scope"> <!-- 自定义行内菜单 -->
<!-- 编辑按钮，只有有权限时显示 -->
<el-button
v-if="isAuth('admin:user:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.userId)"
>
编辑
</el-button>
</template>
<template #menu="scope">
<el-button
v-if="isAuth('admin:user:update')"
type="primary"
icon="el-icon-edit"
@click.stop="onAddOrUpdate(scope.row.userId)"
>
编辑
</el-button>
</template>
</avue-crud>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
ref="addOrUpdateRef"
@refresh-data-list="getDataList"
/>
</div>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { isAuth } from '@/utils' // 导入权限检查工具函数
import { tableOption } from '@/crud/user/user.js' // 导入表格配置选项
import AddOrUpdate from './add-or-update.vue' // 引入新增/修改弹窗组件
import { isAuth } from '@/utils'
import { tableOption } from '@/crud/user/user.js'
import AddOrUpdate from './add-or-update.vue'
// 数据列表绑定的响应式变量
const dataList = ref([])
// 加载状态绑定的响应式变量
const dataListLoading = ref(false)
// 多选数据绑定的响应式变量
const dataListSelections = ref([])
// 控制弹窗显示状态的响应式变量
const addOrUpdateVisible = ref(false)
// 分页配置对象，使用reactive定义以使其成为响应式的
const page = reactive({
total: 0, // 总记录数
currentPage: 1, // 当前页码
pageSize: 10 // 每页大小
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
})
/**
* 获取数据列表方法
* @param pageParam 分页参数（可选）
* @param params 搜索参数（可选）
* @param done 加载完成回调（可选）
* 获取数据列表
*/
const getDataList = (pageParam, params, done) => {
dataListLoading.value = true // 设置加载状态为true
dataListLoading.value = true
http({
url: http.adornUrl('/admin/user/page'), // API端点
method: 'get', // 请求方式
url: http.adornUrl('/admin/user/page'),
method: 'get',
params: http.adornParams(
Object.assign(
{
current: pageParam == null ? page.currentPage : pageParam.currentPage, // 当前页码
size: pageParam == null ? page.pageSize : pageParam.pageSize // 每页大小
current: pageParam == null ? page.currentPage : pageParam.currentPage,
size: pageParam == null ? page.pageSize : pageParam.pageSize
},
params // 搜索参数
params
)
)
}).then(({ data }) => {
dataList.value = data.records // 更新数据列表
page.total = data.total // 更新总记录数
dataListLoading.value = false // 设置加载状态为false
if (done) done() // 如果存在加载完成回调，则调用
})
.then(({ data }) => {
dataList.value = data.records
page.total = data.total
dataListLoading.value = false
if (done) done()
})
}
// 引用弹窗实例
const addOrUpdateRef = ref(null)
/**
* 新增 / 修改用户信息
* @param id 用户ID（可选），如果没有传入，则表示新增
* 新增 / 修改
* @param id
*/
const onAddOrUpdate = (id) => {
addOrUpdateVisible.value = true // 显示弹窗
addOrUpdateVisible.value = true
nextTick(() => {
addOrUpdateRef.value?.init(id) // 初始化弹窗数据
addOrUpdateRef.value?.init(id)
})
}
/**
* 条件查询方法
* @param params 搜索参数
* @param done 加载完成回调（可选）
* 条件查询
*/
const onSearch = (params, done) => {
getDataList(page, params, done)
}
/**
* 多选变化方法
* @param val 选择的数据项
* 多选变化
*/
const selectionChange = (val) => {
dataListSelections.value = val // 更新多选数据
dataListSelections.value = val
}
</script>

Write Preview
Loading…
Cancel
Save