wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更换组合式API写法

Browse Source
This commit is contained in:
不做码农 2022-04-22 17:12:43 +08:00
parent cd8050d3cc
commit face320c24
14 changed files with 1655 additions and 1845 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

399
src/views/components/dictData.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<div>
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form-item label="字典名称" prop="dictType"> <el-form-item label="字典名称" prop="dictType">
<el-select v-model="queryParams.dictType"> <el-select v-model="queryParams.dictType">
@ -27,9 +26,8 @@
<el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典编码" align="center" prop="dictCode" />
<el-table-column label="字典标签" align="center" prop="dictLabel"> <el-table-column label="字典标签" align="center" prop="dictLabel">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'" :class="scope.row.cssClass">{{scope.row.dictLabel}}</span> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</span>
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{scope.row.dictLabel}} <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }} </el-tag>
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="字典键值" align="center" prop="dictValue" /> <el-table-column label="字典键值" align="center" prop="dictValue" />
@ -51,7 +49,7 @@
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典类型"> <el-form-item label="字典类型">
<el-input v-model="form.dictType" :disabled="true" /> <el-input v-model="form.dictType" :disabled="true" />
</el-form-item> </el-form-item>
@ -77,7 +75,7 @@
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -91,273 +89,256 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div>
</template> </template>
<script> <script setup name="dictData">
import { import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data'
listData, import { listType, getType } from '@/api/system/dict/type'
getData, const { proxy } = getCurrentInstance()
delData, const props = defineProps({
addData,
updateData,
} from "@/api/system/dict/data";
import { listType, getType } from "@/api/system/dict/type";
export default {
name: "dictData",
props: {
dictId: { dictId: {
type: Number, type: Number,
default: 0, default: 0,
}, },
}, })
watch: { watch(
dictId: { () => props.dictId,
handler(newVal, oldVal) { (newVal, oldValue) => {
// this.dictId = newVal; console.log(`监控new=${newVal},old${oldValue}`)
if (newVal) { if (newVal) {
this.getType(newVal); getTypeInfo(newVal)
this.getTypeList(); getTypeList()
this.getDicts("sys_normal_disable").then((response) => { proxy.getDicts('sys_normal_disable').then((response) => {
this.statusOptions = response.data; statusOptions.value = response.data
}); })
} }
}, },
{
immediate: true, immediate: true,
deep: true, deep: true,
}, },
}, )
data() {
return { const ids = ref()
// 总条数 const loading = ref(false)
total: 0, // 总条数
// 字典表格数据 const total = ref(0)
dataList: [], // 字典表格数据
// 默认字典类型 const dataList = ref([])
defaultDictType: "", // 默认字典类型
// 弹出层标题 const defaultDictType = ref('')
title: "", // 弹出层标题
// 是否显示弹出层 const title = ref('')
open: false, // 是否显示弹出层
// 数据标签回显样式 const open = ref(false)
listClassOptions: [ // 数据标签回显样式
const listClassOptions = ref([
{ {
value: "default", value: 'default',
label: "默认", label: '默认',
}, },
{ {
value: "primary", value: 'primary',
label: "主要", label: '主要',
}, },
{ {
value: "success", value: 'success',
label: "成功", label: '成功',
}, },
{ {
value: "info", value: 'info',
label: "信息", label: '信息',
}, },
{ {
value: "warning", value: 'warning',
label: "警告", label: '警告',
}, },
{ {
value: "danger", value: 'danger',
label: "危险", label: '危险',
}, },
], ])
cssClassOptions: [
const cssClassOptions = ref([
{ {
value: "text-primary", value: 'text-primary',
label: "primary", label: 'primary',
}, },
{ {
value: "text-navy", value: 'text-navy',
label: "text-navy", label: 'text-navy',
}, },
{ {
value: "text-success", value: 'text-success',
label: "成功", label: '成功',
}, },
{ {
value: "text-info", value: 'text-info',
label: "信息", label: '信息',
}, },
{ {
value: "text-warning", value: 'text-warning',
label: "警告", label: '警告',
}, },
{ {
value: "text-danger", value: 'text-danger',
label: "危险", label: '危险',
}, },
{ {
value: "text-orange", value: 'text-orange',
label: "橘红色", label: '橘红色',
}, },
{ {
value: "text-hotpink", value: 'text-hotpink',
label: "粉红色", label: '粉红色',
}, },
{ {
value: "text-green", value: 'text-green',
label: "绿色", label: '绿色',
}, },
{ {
value: "text-greenyellow", value: 'text-greenyellow',
label: "黄绿色", label: '黄绿色',
}, },
], ])
// 状态数据字典 // 状态数据字典
statusOptions: [], const statusOptions = ref([])
// 类型数据字典 // 类型数据字典
typeOptions: [], const typeOptions = ref([])
// 查询参数 // 查询参数
queryParams: { const queryParams = reactive({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
dictName: undefined, dictName: undefined,
dictType: undefined, dictType: undefined,
status: undefined, status: undefined,
}, })
// 表单参数 // 表单参数
const formRef = ref()
const state = reactive({
form: {}, form: {},
// 表单校验
rules: { rules: {
dictLabel: [ dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
{ required: true, message: "数据标签不能为空", trigger: "blur" }, dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
], dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
dictValue: [
{ required: true, message: "数据键值不能为空", trigger: "blur" },
],
dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" },
],
}, },
}; })
},
created() { const { form, rules } = toRefs(state)
// const dictId = this.$route.params && this.$route.params.dictId; /** 查询字典类型详细 */
}, function getTypeInfo(dictId) {
mounted() {},
methods: {
/** 查询字典类型详细 */
getType(dictId) {
getType(dictId).then((response) => { getType(dictId).then((response) => {
this.queryParams.dictType = response.data.dictType; queryParams.dictType = response.data.dictType
this.defaultDictType = response.data.dictType; defaultDictType.value = response.data.dictType
this.getList(); getList()
}); })
}, }
/** 查询字典类型列表 */ /** 查询字典类型列表 */
getTypeList() { function getTypeList() {
listType().then((response) => { listType().then((response) => {
this.typeOptions = response.data.result; typeOptions.value = response.data.result
}); })
}, }
/** 查询字典数据列表 */
getList() { /** 查询字典数据列表 */
this.loading = true; function getList() {
listData(this.queryParams).then((response) => { loading.value = true
this.dataList = response.data.result; listData(queryParams).then((response) => {
this.total = response.data.totalNum; dataList.value = response.data.result
this.loading = false; total.value = response.data.totalNum
}); loading.value = false
}, })
// 数据状态字典翻译 }
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status); // 取消按钮
}, function cancel() {
// 取消按钮 open.value = false
cancel() { reset()
this.open = false; }
this.reset(); // 表单重置
}, function reset() {
// 表单重置 form.value = {
reset() {
this.form = {
dictCode: undefined, dictCode: undefined,
dictLabel: undefined, dictLabel: undefined,
dictValue: undefined, dictValue: undefined,
dictSort: 0, dictSort: 0,
status: "0", status: '0',
remark: undefined, remark: undefined,
}; }
this.resetForm("form"); proxy.resetForm('formRef')
}, }
/** 搜索按钮操作 */
handleQuery() { /** 搜索按钮操作 */
this.queryParams.pageNum = 1; function handleQuery() {
this.getList(); queryParams.pageNum = 1
}, getList()
/** 重置按钮操作 */ }
resetQuery() {
this.resetForm("queryForm"); /** 重置按钮操作 */
this.queryParams.dictType = this.defaultDictType; function resetQuery() {
this.handleQuery(); proxy.resetForm('queryForm')
}, queryParams.dictType = defaultDictType.value
/** 新增按钮操作 */ handleQuery()
handleAdd() { }
this.reset(); /** 新增按钮操作 */
this.open = true; function handleAdd() {
this.title = "添加字典数据"; reset()
this.form.dictType = this.queryParams.dictType; open.value = true
}, title.value = '添加字典数据'
// 多选框选中数据 form.value.dictType = queryParams.dictType
handleSelectionChange(selection) { }
this.ids = selection.map((item) => item.dictCode); // 多选框选中数据
this.single = selection.length != 1; // function handleSelectionChange(selection) {
this.multiple = !selection.length; // this.ids = selection.map((item) => item.dictCode)
}, // this.single = selection.length != 1
/** 修改按钮操作 */ // this.multiple = !selection.length
handleUpdate(row) { // }
this.reset(); /** 修改按钮操作 */
const dictCode = row.dictCode || this.ids; function handleUpdate(row) {
reset()
const dictCode = row.dictCode || ids.value
getData(dictCode).then((response) => { getData(dictCode).then((response) => {
this.form = response.data; form.value = response.data
this.open = true; open.value = true
this.title = "修改字典数据"; title.value = '修改字典数据'
}); })
}, }
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { function submitForm() {
this.$refs["form"].validate((valid) => { proxy.$refs['formRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.dictCode != undefined) { if (form.value.dictCode != undefined) {
updateData(this.form).then((response) => { updateData(form.value).then((response) => {
this.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} else { } else {
addData(this.form).then((response) => { addData(form.value).then((response) => {
this.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess('新增成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} }
} }
}); })
}, }
/** 删除按钮操作 */
handleDelete(row) { /** 删除按钮操作 */
const dictCodes = row.dictCode || this.ids; function handleDelete(row) {
this.$confirm( const dictCodes = row.dictCode || ids.value
'是否确认删除字典编码为"' + dictCodes + '"的数据项?', proxy
"警告", .$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', '警告', {
{ confirmButtonText: '确定',
confirmButtonText: "确定", cancelButtonText: '取消',
cancelButtonText: "取消", type: 'warning',
type: "warning", })
}
)
.then(function () { .then(function () {
return delData(dictCodes); return delData(dictCodes)
}) })
.then(() => { .then(() => {
this.getList(); getList()
this.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess('删除成功')
}); })
}, }
},
};
</script> </script>

291
src/views/system/config/index.vue
View File

@ -13,8 +13,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker v-model="dateRange" type="daterange" range-separator="-" <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="search" size="small" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="search" size="small" @click="handleQuery">搜索</el-button>
@ -27,12 +26,10 @@
<el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button> <el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="success" plain icon="edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']"> <el-button type="success" plain icon="edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']"> 修改</el-button>
修改</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="danger" plain icon="delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">删除 <el-button type="danger" plain icon="delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">删除 </el-button>
</el-button>
</el-col> </el-col>
<!-- <el-col :span="1.5"> <!-- <el-col :span="1.5">
<el-button type="danger" plain icon="refresh" size="small" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button> <el-button type="danger" plain icon="refresh" size="small" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
@ -54,14 +51,13 @@
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> <el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template #default="scope"> <template #default="scope">
<span>{{scope.row.createTime}}</span> <span>{{ scope.row.createTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button> <el-button size="small" type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
<el-button size="small" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除 <el-button size="small" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除 </el-button>
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -70,7 +66,7 @@
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="参数名称" prop="configName"> <el-form-item label="参数名称" prop="configName">
<el-input v-model="form.configName" placeholder="请输入参数名称" /> <el-input v-model="form.configName" placeholder="请输入参数名称" />
</el-form-item> </el-form-item>
@ -82,7 +78,7 @@
</el-form-item> </el-form-item>
<el-form-item label="系统内置" prop="configType"> <el-form-item label="系统内置" prop="configType">
<el-radio-group v-model="form.configType"> <el-radio-group v-model="form.configType">
<el-radio v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -99,176 +95,153 @@
</div> </div>
</template> </template>
<script> <script setup name="config">
import { import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config'
listConfig,
getConfig,
delConfig,
addConfig,
updateConfig,
// exportConfig,
refreshCache,
} from "@/api/system/config";
export default { // 遮罩层
name: "config", const loading = ref(true)
data() { // 导出遮罩层
return { const exportLoading = ref(false)
// 遮罩层 // 选中数组
loading: true, const ids = ref([])
// 导出遮罩层 // 非单个禁用
exportLoading: false, const single = ref(true)
// 选中数组 // 非多个禁用
ids: [], const multiple = ref(true)
// 非单个禁用 // 显示搜索条件
single: true, const showSearch = ref(true)
// 非多个禁用 // 总条数
multiple: true, const total = ref(0)
// 显示搜索条件 // 参数表格数据
showSearch: true, const configList = ref([])
// 总条数 // 弹出层标题
total: 0, const title = ref('')
// 参数表格数据 // 是否显示弹出层
configList: [], const open = ref(false)
// 弹出层标题 // 日期范围
title: "", const dateRange = ref([])
// 是否显示弹出层 // 系统是否
open: false, const sysYesNoOptions = ref([])
// 日期范围 const queryParams = reactive({
dateRange: [],
// 系统是否
sysYesNoOptions: [],
// 查询参数
queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
configName: undefined, configName: undefined,
configKey: undefined, configKey: undefined,
configType: undefined, configType: undefined,
}, })
// 表单参数 const state = reactive({
form: {}, form: {},
// 表单校验
rules: { rules: {
configName: [ configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
{ required: true, message: "参数名称不能为空", trigger: "blur" }, configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
], configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
configKey: [
{ required: true, message: "参数键名不能为空", trigger: "blur" },
],
configValue: [
{ required: true, message: "参数键值不能为空", trigger: "blur" },
],
}, },
}; })
}, const formRef = ref()
created() { const { form, rules } = toRefs(state)
this.getDicts("sys_yes_no").then((response) => { const { proxy } = getCurrentInstance()
this.sysYesNoOptions = response.data;
}); /** 查询参数列表 */
this.getList(); function getList() {
}, loading.value = true
methods: { listConfig(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
/** 查询参数列表 */ configList.value = response.data.result
getList() { total.value = response.data.totalNum
this.loading = true; loading.value = false
listConfig(this.addDateRange(this.queryParams, this.dateRange)).then( })
(response) => { }
this.configList = response.data.result; // 取消按钮
this.total = response.data.totalNum; function cancel() {
this.loading = false; open.value = false
} reset()
); }
}, // 表单重置
// 取消按钮 function reset() {
cancel() { form.value = {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
configId: undefined, configId: undefined,
configName: undefined, configName: undefined,
configKey: undefined, configKey: undefined,
configValue: undefined, configValue: undefined,
configType: "Y", configType: 'Y',
remark: undefined, remark: undefined,
}; }
this.resetForm("form"); proxy.resetForm('formRef')
}, }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { function handleQuery() {
this.queryParams.pageNum = 1; queryParams.pageNum = 1
this.getList(); getList()
}, }
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { function resetQuery() {
this.dateRange = []; dateRange.value = []
this.resetForm("queryForm"); proxy.resetForm('queryForm')
this.handleQuery(); handleQuery()
}, }
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { function handleAdd() {
this.reset(); reset()
this.open = true; open.value = true
this.title = "添加参数"; title.value = '添加参数'
}, }
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { function handleSelectionChange(selection) {
this.ids = selection.map((item) => item.configId); ids.value = selection.map((item) => item.configId)
this.single = selection.length != 1; single.value = selection.length != 1
this.multiple = !selection.length; multiple.value = !selection.length
}, }
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { function handleUpdate(row) {
this.reset(); reset()
const configId = row.configId || this.ids; const configId = row.configId || ids.value
getConfig(configId).then((response) => { getConfig(configId).then((response) => {
this.form = response.data; form.value = response.data
this.open = true; open.value = true
this.title = "修改参数"; title.value = '修改参数'
}); })
}, }
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { function submitForm() {
this.$refs["form"].validate((valid) => { proxy.$refs['formRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.configId != undefined) { if (form.value.configId != undefined) {
updateConfig(this.form).then((response) => { updateConfig(form.value).then((response) => {
this.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} else { } else {
addConfig(this.form).then((response) => { addConfig(form.value).then((response) => {
this.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess('新增成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} }
} }
}); })
}, }
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { function handleDelete(row) {
const configIds = row.configId || this.ids; const configIds = row.configId || ids.value
this.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项？') proxy
.$confirm('是否确认删除参数编号为"' + configIds + '"的数据项？')
.then(function () { .then(function () {
return delConfig(configIds); return delConfig(configIds)
}) })
.then(() => { .then(() => {
this.getList(); getList()
this.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess('删除成功')
}) })
.catch(() => {}); .catch(() => {})
}, }
/** 刷新缓存按钮操作 */ /** 刷新缓存按钮操作 */
handleRefreshCache() { function handleRefreshCache() {
refreshCache().then(() => { refreshCache().then(() => {
this.$modal.msgSuccess("刷新成功"); proxy.$modal.msgSuccess('刷新成功')
}); })
}, }
}, proxy.getDicts('sys_yes_no').then((response) => {
}; sysYesNoOptions.value = response.data
})
getList()
</script> </script>

292
src/views/system/dept/index.vue
View File

@ -26,8 +26,14 @@
<right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" :default-expand-all="isExpandAll" <el-table
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> v-if="refreshTable"
v-loading="loading"
:data="deptList"
row-key="deptId"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
<el-table-column prop="leader" label="负责人" width="100"></el-table-column> <el-table-column prop="leader" label="负责人" width="100"></el-table-column>
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column> <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
@ -45,15 +51,14 @@
<template #default="scope"> <template #default="scope">
<el-button type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:update']">修改</el-button> <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:update']">修改</el-button>
<el-button type="text" icon="plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button> <el-button type="text" icon="plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
<el-button v-if="scope.row.parentId != 0" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除 <el-button v-if="scope.row.parentId != 0" type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除 </el-button>
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 添加或修改部门对话框 --> <!-- 添加或修改部门对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :lg="24" v-if="form.parentId !== 0"> <el-col :lg="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId"> <el-form-item label="上级部门" prop="parentId">
@ -88,7 +93,7 @@
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="部门状态"> <el-form-item label="部门状态">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -100,102 +105,78 @@
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script setup name="dept">
import { import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept'
listDept, // 遮罩层
getDept, const loading = ref(true)
delDept, // 显示搜索条件
addDept, const showSearch = ref(true)
updateDept, // 表格树数据
listDeptExcludeChild, const deptList = ref([])
} from "@/api/system/dept"; // 是否展开，默认全部折叠
const isExpandAll = ref(false)
export default { // 重新渲染表格状态
name: "dept", const refreshTable = ref(true)
// components: { Treeselect }, // 部门树选项
data() { const deptOptions = ref([])
return { // 弹出层标题
// 遮罩层 const title = ref('')
loading: true, // 是否显示弹出层
// 显示搜索条件 const open = ref(false)
showSearch: true, // 状态数据字典
// 表格树数据 const statusOptions = ref([])
deptList: [], // 查询参数
// 是否展开，默认全部折叠 const queryParams = reactive({
isExpandAll: false,
// 重新渲染表格状态
refreshTable: true,
// 部门树选项
deptOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 状态数据字典
statusOptions: [],
// 查询参数
queryParams: {
deptName: undefined, deptName: undefined,
status: undefined, status: undefined,
}, })
const state = reactive({
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
parentId: [ parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
{ required: true, message: "上级部门不能为空", trigger: "blur" }, deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
], orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
deptName: [
{ required: true, message: "部门名称不能为空", trigger: "blur" },
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" },
],
email: [ email: [
{ {
type: "email", type: 'email',
message: "请输入正确的邮箱地址", message: '请输入正确的邮箱地址',
trigger: ["blur", "change"], trigger: ['blur', 'change'],
}, },
], ],
phone: [ phone: [
{ {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码", message: '请输入正确的手机号码',
trigger: "blur", trigger: 'blur',
}, },
], ],
}, },
}; })
}, const formRef = ref()
created() { const { form, rules } = toRefs(state)
this.getList(); const { proxy } = getCurrentInstance()
this.getDicts("sys_normal_disable").then((response) => { /** 查询部门列表 */
this.statusOptions = response.data; function getList() {
}); loading.value = true
}, listDept(queryParams).then((response) => {
methods: { deptList.value = proxy.handleTree(response.data, 'deptId')
/** 查询部门列表 */ loading.value = false
getList() { })
this.loading = true; }
listDept(this.queryParams).then((response) => { // 取消按钮
this.deptList = this.handleTree(response.data, "deptId"); function cancel() {
this.loading = false; open.value = false
}); reset()
}, }
// 取消按钮 // 表单重置
cancel() { function reset() {
this.open = false; form.value = {
this.reset();
},
// 表单重置
reset() {
this.form = {
deptId: undefined, deptId: undefined,
parentId: undefined, parentId: undefined,
deptName: undefined, deptName: undefined,
@ -203,90 +184,89 @@ export default {
leader: undefined, leader: undefined,
phone: undefined, phone: undefined,
email: undefined, email: undefined,
status: "0", status: '0',
}; }
this.resetForm("form"); proxy.resetForm('formRef')
}, }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { function handleQuery() {
this.getList(); getList()
}, }
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { function resetQuery() {
this.resetForm("queryForm"); proxy.resetForm('queryForm')
this.handleQuery(); handleQuery()
}, }
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd(row) { function handleAdd(row) {
this.reset(); reset()
if (row != undefined) { if (row != undefined) {
this.form.parentId = row.deptId; form.value.parentId = row.deptId
} }
this.open = true; open.value = true
this.title = "添加部门"; title.value = '添加部门'
listDept().then((response) => { listDept().then((response) => {
this.deptOptions = this.handleTree(response.data, "deptId"); deptOptions.value = proxy.handleTree(response.data, 'deptId')
}); })
}, }
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { function handleUpdate(row) {
this.reset(); reset()
getDept(row.deptId).then((response) => { getDept(row.deptId).then((response) => {
this.form = response.data; form.value = response.data
this.open = true; open.value = true
this.title = "修改部门"; title.value = '修改部门'
}); })
listDeptExcludeChild(row.deptId).then((response) => { listDeptExcludeChild(row.deptId).then((response) => {
this.deptOptions = this.handleTree(response.data, "deptId"); deptOptions.value = proxy.handleTree(response.data, 'deptId')
}); })
}, }
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { function submitForm() {
this.$refs["form"].validate((valid) => { proxy.$refs['formRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.deptId != undefined) { if (form.value.deptId != undefined) {
updateDept(this.form).then((response) => { updateDept(form.value).then((response) => {
this.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} else { } else {
addDept(this.form).then((response) => { addDept(form.value).then((response) => {
this.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess('新增成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} }
} }
}); })
}, }
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { function handleDelete(row) {
this.$confirm( proxy
'是否确认删除名称为"' + row.deptName + '"的数据项?', .$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
"警告", confirmButtonText: '确定',
{ cancelButtonText: '取消',
confirmButtonText: "确定", type: 'warning',
cancelButtonText: "取消", })
type: "warning",
}
)
.then(function () { .then(function () {
return delDept(row.deptId); return delDept(row.deptId)
}) })
.then(() => { .then(() => {
this.getList(); getList()
this.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess('删除成功')
}); })
}, }
//展开/折叠操作 //展开/折叠操作
toggleExpandAll() { function toggleExpandAll() {
this.refreshTable = false; refreshTable.value = false
this.isExpandAll = !this.isExpandAll; isExpandAll.value = !isExpandAll.value
this.$nextTick(() => { nextTick(() => {
this.refreshTable = true; refreshTable.value = true
}); })
}, }
}, getList()
}; proxy.getDicts('sys_normal_disable').then((response) => {
statusOptions.value = response.data
})
</script> </script>

345
src/views/system/dict/index.vue
View File

@ -31,8 +31,7 @@
<el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button> <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改 <el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改 </el-button>
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button> <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
@ -43,9 +42,9 @@
<right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table :data="typeList" border @selection-change="handleSelectionChange"> <el-table :data="typeList" v-loading="loading" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典编号" align="center" prop="dictId" width="80" /> <el-table-column label="字典编号" align="center" prop="dictId" width="100" sortable/>
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true"> <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="showDictData(scope.row)">{{ scope.row.dictType }}</el-button> <el-button type="text" @click="showDictData(scope.row)">{{ scope.row.dictType }}</el-button>
@ -75,7 +74,7 @@
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="dictName"> <el-form-item label="字典名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典名称" /> <el-input v-model="form.dictName" placeholder="请输入字典名称" />
</el-form-item> </el-form-item>
@ -84,12 +83,12 @@
</el-form-item> </el-form-item>
<el-form-item label="字典状态" prop="status"> <el-form-item label="字典状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="系统内置" prop="type"> <el-form-item label="系统内置" prop="type">
<el-radio-group v-model="form.type"> <el-radio-group v-model="form.type">
<el-radio v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -102,59 +101,57 @@
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="dictDataVisible" width="60%" :lock-scroll="false"> <el-dialog v-model="dictDataVisible" width="60%" :lock-scroll="false">
<dict-data v-model:dictId="dictId"></dict-data> <dict-data v-model:dictId="dictId"></dict-data>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script setup name="dict">
import dictData from "@/views/components/dictData"; import dictData from '@/views/components/dictData'
import { listType, getType, delType, addType, updateType, exportType } from '@/api/system/dict/type'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// 遮罩层
const loading = ref(true)
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 字典表格数据
const typeList = ref([])
// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)
// 字典弹出层
const dictDataVisible = ref(false)
// 状态数据字典
const statusOptions = ref([])
// 是否内置
const typeOptions = ref([])
// 日期范围
const dateRange = ref([])
// 查询参数
import { const formRef = ref()
listType, // 字典Id传值给子组件
getType, const dictId = ref(0)
delType,
addType, const state = reactive({
updateType, rules: {
exportType, dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
} from "@/api/system/dict/type"; dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
export default { },
name: "dict", form: {},
components: { dictData },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
typeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 字典弹出层
dictDataVisible: false,
// 状态数据字典
statusOptions: [],
// 是否内置
typeOptions: [],
// 日期范围
dateRange: [],
// 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
@ -162,155 +159,131 @@ export default {
dictType: undefined, dictType: undefined,
status: undefined, status: undefined,
}, },
// 字典Id传值给子组件 })
dictId: 0, const { rules, form, queryParams } = toRefs(state)
// 表单参数
form: {}, /** 查询字典类型列表 */
// 表单校验 function getList() {
rules: { loading.value = true
dictName: [ listType(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
{ required: true, message: "字典名称不能为空", trigger: "blur" }, typeList.value = response.data.result
], total.value = response.data.totalNum
dictType: [ loading.value = false
{ required: true, message: "字典类型不能为空", trigger: "blur" }, })
], }
},
}; // 取消按钮
}, function cancel() {
created() { open.value = false
this.getList(); reset()
this.getDicts("sys_normal_disable").then((response) => { }
this.statusOptions = response.data; // 表单重置
}); function reset() {
this.getDicts("sys_yes_no").then((response) => { form.value = {
this.typeOptions = response.data;
});
},
methods: {
/** 查询字典类型列表 */
getList() {
this.loading = true;
listType(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.typeList = response.data.result;
this.total = response.data.totalNum;
this.loading = false;
}
);
},
// 字典状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
dictId: undefined, dictId: undefined,
dictName: undefined, dictName: undefined,
dictType: undefined, dictType: undefined,
status: "0", status: '0',
type: "N", type: 'N',
remark: undefined, remark: undefined,
}; }
this.resetForm("form"); proxy.resetForm('formRef')
}, }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { function handleQuery() {
this.queryParams.pageNum = 1; queryParams.value.pageNum = 1
this.getList(); getList()
}, }
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { function resetQuery() {
this.dateRange = []; dateRange.value = []
this.resetForm("queryForm"); proxy.resetForm('queryForm')
this.handleQuery(); handleQuery()
}, }
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { function handleAdd() {
this.reset(); reset()
this.open = true; open.value = true
this.title = "添加字典类型"; title.value = '添加字典类型'
}, }
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { function handleSelectionChange(selection) {
this.ids = selection.map((item) => item.dictId); ids.value = selection.map((item) => item.dictId)
this.single = selection.length != 1; single.value = selection.length != 1
this.multiple = !selection.length; multiple.value = !selection.length
}, }
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { function handleUpdate(row) {
this.reset(); reset()
const dictId = row.dictId || this.ids; const dictId = row.dictId || ids.value
getType(dictId).then((response) => { getType(dictId).then((response) => {
this.form = response.data; form.value = response.data
this.open = true; open.value = true
this.title = "修改字典类型"; title.value = '修改字典类型'
}); })
}, }
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { function submitForm() {
this.$refs["form"].validate((valid) => { proxy.$refs['formRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.dictId != undefined) { if (form.value.dictId != undefined) {
updateType(this.form).then((response) => { updateType(form.value).then((response) => {
this.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} else { } else {
addType(this.form).then((response) => { addType(form.value).then((response) => {
this.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess('新增成功')
this.open = false; open.value = false
this.getList(); getList()
}); })
} }
} }
}); })
}, }
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { function handleDelete(row) {
const dictIds = row.dictId || this.ids; const dictIds = row.dictId || ids.value
this.$confirm( proxy
'是否确认删除字典编号为"' + dictIds + '"的数据项?', .$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?', '警告', {
"警告", confirmButtonText: '确定',
{ cancelButtonText: '取消',
confirmButtonText: "确定", type: 'warning',
cancelButtonText: "取消", })
type: "warning",
}
)
.then(function () { .then(function () {
return delType(dictIds); return delType(dictIds)
}) })
.then(() => { .then(() => {
this.getList(); getList()
this.msgSuccess("删除成功"); proxy.$modal.msgSuccess('删除成功')
}); })
}, }
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { function handleExport() {
const queryParams = this.queryParams; proxy
this.$confirm("是否确认导出所有类型数据项?", "警告", { .$confirm('是否确认导出所有类型数据项?', '警告', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}) })
.then(function () { .then(function () {
return exportType(queryParams); return exportType(queryParams.value)
}) })
.then((response) => { .then((response) => {
this.download(response.data.path); proxy.download(response.data.path)
}); })
}, }
showDictData(row) { function showDictData(row) {
this.dictId = row.dictId; dictId.value = row.dictId
this.dictDataVisible = true; dictDataVisible.value = true
}, }
},
}; getList()
proxy.getDicts('sys_normal_disable').then((response) => {
statusOptions.value = response.data
})
proxy.getDicts('sys_yes_no').then((response) => {
typeOptions.value = response.data
})
</script> </script>

78
src/views/system/menu/index.vue
View File

@ -25,8 +25,15 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" border <el-table
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> v-if="refreshTable"
v-loading="loading"
:data="menuList"
row-key="menuId"
:default-expand-all="isExpandAll"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
<el-table-column prop="icon" label="图标" align="center" width="100"> <el-table-column prop="icon" label="图标" align="center" width="100">
<template #default="scope"> <template #default="scope">
@ -41,7 +48,7 @@
<el-tag type="warning" v-else-if="scope.row.menuType == 'F'">按钮</el-tag> <el-tag type="warning" v-else-if="scope.row.menuType == 'F'">按钮</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column> <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="visible" label="显示" width="70"> <el-table-column prop="visible" label="显示" width="70">
@ -74,8 +81,19 @@
<el-row> <el-row>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="上级菜单"> <el-form-item label="上级菜单">
<tree-select v-model:value="form.parentId" :options="menuOptions" :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }" <el-cascader
placeholder="选择上级菜单" /> class="w100"
:options="menuOptions"
:props="{ checkStrictly: true, value: 'menuId', label: 'menuName', emitPath: false }"
placeholder="请选择上级菜单"
clearable
v-model="form.parentId"
>
<template #default="{ node, data }">
<span>{{ data.menuName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
@ -146,7 +164,6 @@
<el-col :lg="12" v-if="form.menuType == 'C'"> <el-col :lg="12" v-if="form.menuType == 'C'">
<el-form-item prop="component"> <el-form-item prop="component">
<template #label> <template #label>
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top"> <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<el-icon :size="15"> <el-icon :size="15">
<questionFilled /> <questionFilled />
@ -170,7 +187,7 @@
</template> </template>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="form.menuType == 'C'"> <!-- <el-col :lg="12" v-if="form.menuType == 'C'">
<el-form-item> <el-form-item>
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
<template #label> <template #label>
@ -182,11 +199,10 @@
路由参数 路由参数
</template> </template>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :lg="12" v-if="form.menuType == 'C'"> <el-col :lg="12" v-if="form.menuType == 'C'">
<el-form-item> <el-form-item prop="isCache">
<template #label> <template #label>
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top"> <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
<el-icon :size="15"> <el-icon :size="15">
<questionFilled /> <questionFilled />
@ -201,9 +217,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12" v-if="form.menuType != 'F'"> <el-col :lg="12" v-if="form.menuType != 'F'">
<el-form-item> <el-form-item prop="visible">
<template #label> <template #label>
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top"> <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
<el-icon :size="15"> <el-icon :size="15">
<questionFilled /> <questionFilled />
@ -243,14 +258,8 @@
</div> </div>
</template> </template>
<script setup name="menu"> <script setup name="sysmenu">
import { import { addMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu'
addMenu,
delMenu,
getMenu,
listMenu,
updateMenu,
} from '@/api/system/menu'
import SvgIcon from '@/components/SvgIcon' import SvgIcon from '@/components/SvgIcon'
import IconSelect from '@/components/IconSelect' import IconSelect from '@/components/IconSelect'
@ -287,13 +296,10 @@ const data = reactive({
visible: undefined, visible: undefined,
}, },
rules: { rules: {
menuName: [ menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
{ required: true, message: '菜单名称不能为空', trigger: 'blur' }, orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
],
orderNum: [
{ required: true, message: '菜单顺序不能为空', trigger: 'blur' },
],
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }], path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
visible: [{ required: true, message: '显示状态不能为空', trigger: 'blur' }],
}, },
}) })
@ -303,16 +309,16 @@ const { queryParams, form, rules } = toRefs(data)
function getList() { function getList() {
loading.value = true loading.value = true
listMenu(queryParams.value).then((response) => { listMenu(queryParams.value).then((response) => {
menuList.value = response.data // proxy.handleTree(response.data, "menuId"); menuList.value = response.data
loading.value = false loading.value = false
}) })
} }
/** 查询菜单下拉树结构 */ /** 查询菜单下拉树结构 */
async function getTreeselect() { function getTreeselect() {
listMenu().then((response) => {
menuOptions.value = [] menuOptions.value = []
await listMenu().then((response) => { const menu = { menuId: 0, menuName: '根菜单', children: [] }
const menu = { menuId: 0, menuName: '主类目', children: [] }
//menu.children = proxy.handleTree(response.data, "menuId");
menu.children = response.data menu.children = response.data
menuOptions.value.push(menu) menuOptions.value.push(menu)
}) })
@ -325,7 +331,7 @@ function cancel() {
/** 表单重置 */ /** 表单重置 */
function reset() { function reset() {
form.value = { form.value = {
menuId: undefined, menuId: 0,
parentId: 0, parentId: 0,
menuName: undefined, menuName: undefined,
icon: undefined, icon: undefined,
@ -358,10 +364,10 @@ function resetQuery() {
handleQuery() handleQuery()
} }
/** 新增按钮操作 */ /** 新增按钮操作 */
async function handleAdd(row) { function handleAdd(row) {
reset() reset()
await getTreeselect() getTreeselect()
if (row != null && row.menuId) { if (row != null && row.menuId != undefined) {
form.value.parentId = row.menuId form.value.parentId = row.menuId
} else { } else {
form.value.parentId = 0 form.value.parentId = 0
@ -380,7 +386,7 @@ function toggleExpandAll() {
/** 修改按钮操作 */ /** 修改按钮操作 */
async function handleUpdate(row) { async function handleUpdate(row) {
reset() reset()
await getTreeselect() getTreeselect()
getMenu(row.menuId).then((response) => { getMenu(row.menuId).then((response) => {
form.value = response.data form.value = response.data
open.value = true open.value = true

23
src/views/system/notice/index.vue
View File

@ -81,7 +81,7 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="状态"> <el-form-item label="状态">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio> <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -104,14 +104,9 @@
<script setup name="notice"> <script setup name="notice">
// 富文本组件 // 富文本组件
import Editor from "@/components/Editor"; import Editor from '@/components/Editor'
import { import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
listNotice, import { getCurrentInstance } from 'vue';
getNotice,
delNotice,
addNotice,
updateNotice,
} from '@/api/system/notice'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const noticeList = ref([]) const noticeList = ref([])
@ -123,6 +118,7 @@ const single = ref(true)
const multiple = ref(true) const multiple = ref(true)
const total = ref(0) const total = ref(0)
const title = ref('') const title = ref('')
const noticeRef = ref()
const data = reactive({ const data = reactive({
form: {}, form: {},
@ -134,12 +130,8 @@ const data = reactive({
status: undefined, status: undefined,
}, },
rules: { rules: {
noticeTitle: [ noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
{ required: true, message: '公告标题不能为空', trigger: 'blur' }, noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
],
noticeType: [
{ required: true, message: '公告类型不能为空', trigger: 'change' },
],
}, },
}) })
const statusOptions = ref([]) const statusOptions = ref([])
@ -213,7 +205,6 @@ function handleUpdate(row) {
/** 提交按钮 */ /** 提交按钮 */
function submitForm() { function submitForm() {
proxy.$refs['noticeRef'].validate((valid) => { proxy.$refs['noticeRef'].validate((valid) => {
console.log(valid)
if (valid) { if (valid) {
if (form.value.noticeId != undefined) { if (form.value.noticeId != undefined) {
updateNotice(form.value).then((response) => { updateNotice(form.value).then((response) => {

606
src/views/system/role/index.vue
View File

@ -22,7 +22,7 @@
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button> <el-button type="primary" plain icon="plus" size="small" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
</el-col> </el-col>
<right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="roleList" highlight-current-row @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="roleList" highlight-current-row @selection-change="handleSelectionChange">
@ -33,8 +33,7 @@
<el-table-column label="权限范围" prop="dataScope" :formatter="dataScopeFormat"></el-table-column> <el-table-column label="权限范围" prop="dataScope" :formatter="dataScopeFormat"></el-table-column>
<el-table-column label="状态" align="center" width="90"> <el-table-column label="状态" align="center" width="90">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.status" :disabled="scope.row.roleKey == 'admin'" active-value="0" inactive-value="1" <el-switch v-model="scope.row.status" :disabled="scope.row.roleKey == 'admin'" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
@change="handleStatusChange(scope.row)"></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="用户个数" align="center" prop="userNum" width="90" /> <el-table-column label="用户个数" align="center" prop="userNum" width="90" />
@ -43,13 +42,10 @@
<el-table-column label="操作" align="center" width="200"> <el-table-column label="操作" align="center" width="200">
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.roleKey != 'admin'"> <div v-if="scope.row.roleKey != 'admin'">
<el-button size="small" type="text" icon="edit" @click.stop="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">修改 <el-button size="small" type="text" icon="edit" @click.stop="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">修改 </el-button>
</el-button> <el-button size="small" type="text" icon="delete" @click.stop="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除 </el-button>
<el-button size="small" type="text" icon="delete" @click.stop="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">删除
</el-button>
<el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit', 'system:role:authorize', 'system:roleusers:list']">
v-hasPermi="['system:role:edit', 'system:role:authorize', 'system:roleusers:list']">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
更多 更多
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
@ -76,14 +72,23 @@
<el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input> <el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="权限字符"> <el-form-item label="权限字符">
{{form.roleKey}} {{ form.roleKey }}
</el-form-item> </el-form-item>
<el-form-item label="数据权限"> <el-form-item label="数据权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox> <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox> <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" <el-tree
empty-text="加载中，请稍后" :filter-node-method="menuFilterNode" :props="defaultProps"></el-tree> class="tree-border"
:data="menuOptions"
show-checkbox
ref="menuRef"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍后"
:filter-node-method="menuFilterNode"
:props="defaultProps"
></el-tree>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -96,7 +101,7 @@
<!-- 添加或修改角色配置对话框 --> <!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="角色名称" prop="roleName"> <el-form-item label="角色名称" prop="roleName">
@ -132,8 +137,17 @@
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox> <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox> <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
<el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="dept" node-key="id" <el-tree
:check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree> class="tree-border"
:data="deptOptions"
show-checkbox
default-expand-all
ref="deptRef"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
@ -150,66 +164,45 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script setup name="role">
import { import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from '@/api/system/role'
listRole, import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
getRole, import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
delRole,
addRole,
updateRole,
exportRole,
dataScope,
changeRoleStatus,
} from '@/api/system/role'
import {
treeselect as menuTreeselect,
roleMenuTreeselect,
} from '@/api/system/menu'
import {
treeselect as deptTreeselect,
roleDeptTreeselect,
} from '@/api/system/dept'
export default { const { proxy } = getCurrentInstance()
name: 'role',
data() { const loading = ref(true)
return { // 选中数组
// 遮罩层 const ids = ref([])
loading: true, // 非单个禁用
// 选中数组 const single = ref(true)
ids: [], // 非多个禁用
// 非单个禁用 const multiple = ref(true)
single: true, // 显示搜索条件
// 非多个禁用 const showSearch = ref(true)
multiple: true, // 总条数
// 显示搜索条件 const total = ref(0)
showSearch: true, // 角色表格数据
// 表格高度 const roleList = ref([])
tableHeight: window.innerHeight, // 弹出层标题
// 总条数 const title = ref('')
total: 0, // 是否显示弹出层
// 角色表格数据 const open = ref(false)
roleList: [], const menuExpand = ref(true)
// 弹出层标题 const menuNodeAll = ref(false)
title: '', const deptExpand = ref(true)
// 是否显示弹出层 const deptNodeAll = ref(false)
open: false, // 日期范围
menuExpand: true, const dateRange = ref([])
menuNodeAll: false, // 状态数据字典
deptExpand: true, const statusOptions = ref([])
deptNodeAll: false, // 是否显示下拉菜单分配
// 日期范围 const showRoleScope = ref(false)
dateRange: [], // 数据范围选项
// 状态数据字典 const dataScopeOptions = ref([
statusOptions: [],
// 是否显示下拉菜单分配
showRoleScope: false,
// 数据范围选项
dataScopeOptions: [
{ {
dictValue: '1', dictValue: '1',
dictLabel: '全部', dictLabel: '全部',
@ -223,155 +216,141 @@ export default {
dictLabel: '本部门', dictLabel: '本部门',
}, },
{ {
dictValue: "4", dictValue: '4',
dictLabel: "本部门及以下数据权限", dictLabel: '本部门及以下',
}, },
{ {
dictValue: '5', dictValue: '5',
dictLabel: '仅本人', dictLabel: '仅本人',
}, },
], ])
// 菜单列表 // 菜单列表
menuOptions: [], const menuOptions = ref([])
// 部门列表 // 部门列表
deptOptions: [], const deptOptions = ref([])
// 查询参数 // 查询参数
queryParams: { const queryParams = reactive({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
status: undefined, status: undefined,
}, })
searchText: '', const searchText = ref('')
// 表单参数
const state = reactive({
form: {}, form: {},
rules: {
roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }],
},
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'label', label: 'label',
}, },
// 表单校验 })
rules: { const menuRef = ref()
roleName: [ const deptRef = ref()
{ required: true, message: '角色名称不能为空', trigger: 'blur' }, const formRef = ref()
], const { form, rules, defaultProps } = toRefs(state)
roleKey: [
{ required: true, message: '权限字符不能为空', trigger: 'blur' },
],
roleSort: [
{ required: true, message: '角色顺序不能为空', trigger: 'blur' },
],
},
}
},
watch: {
searchText(val) {
this.$refs.menu.filter(val)
},
},
created() {
this.getList()
this.getDicts('sys_normal_disable').then((response) => {
this.statusOptions = response.data
})
},
methods: {
/** 查询角色列表 */
getList() {
this.loading = true
listRole(this.addDateRange(this.queryParams, this.dateRange)).then( watch(searchText, (val) => {
(response) => { proxy.$refs.menuRef.filter(val)
this.roleList = response.data.result })
this.total = response.data.totalNum
this.loading = false /** 查询角色列表 */
} function getList() {
) loading.value = true
},
/** 查询菜单树结构 */ listRole(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
getMenuTreeselect() { roleList.value = response.data.result
menuTreeselect().then((response) => { total.value = response.data.totalNum
this.menuOptions = response.data loading.value = false
}) })
}, }
/** 查询部门树结构 */
getDeptTreeselect() { /** 查询菜单树结构 */
// function getMenuTreeselect() {
// menuTreeselect().then((response) => {
// menuOptions.value = response.data
// })
// }
/** 查询部门树结构 */
function getDeptTreeselect() {
deptTreeselect().then((response) => { deptTreeselect().then((response) => {
this.deptOptions = response.data deptOptions.value = response.data
}) })
}, }
// 所有菜单节点数据 // 所有菜单节点数据
getMenuAllCheckedKeys() { function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点 // 目前被选中的菜单节点
const checkedKeys = this.$refs.menu.getCheckedKeys() const checkedKeys = proxy.$refs.menuRef.getCheckedKeys()
// 半选中的菜单节点 // 半选中的菜单节点
const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys() const halfCheckedKeys = proxy.$refs.menuRef.getHalfCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys return checkedKeys
}, }
// 所有部门节点数据 // 所有部门节点数据
getDeptAllCheckedKeys() { function getDeptAllCheckedKeys() {
// 目前被选中的部门节点 // 目前被选中的部门节点
const checkedKeys = this.$refs.dept.getCheckedKeys() const checkedKeys = proxy.$refs.deptRef.getCheckedKeys()
// 半选中的部门节点 // 半选中的部门节点
const halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys() const halfCheckedKeys = proxy.$refs.deptRef.getHalfCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys return checkedKeys
}, }
/** 根据角色ID查询菜单树结构 */ /** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) { function getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then((response) => { return roleMenuTreeselect(roleId).then((response) => {
this.menuOptions = response.data.menus menuOptions.value = response.data.menus
return response return response
}) })
}, }
/** 根据角色ID查询部门树结构 */ /** 根据角色ID查询部门树结构 */
getRoleDeptTreeselect(roleId) { function getRoleDeptTreeselect(roleId) {
return roleDeptTreeselect(roleId).then((response) => { return roleDeptTreeselect(roleId).then((response) => {
console.log('角色', response) deptOptions.value = response.data.depts
this.deptOptions = response.data.depts
return response return response
}) })
}, }
// 角色状态修改 // 角色状态修改
handleStatusChange(row) { function handleStatusChange(row) {
const text = row.status === '0' ? '启用' : '停用' const text = row.status === '0' ? '启用' : '停用'
this.$confirm( proxy
'确认要"' + text + '""' + row.roleName + '"角色吗?', .$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', '警告', {
'警告',
{
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} })
)
.then(function () { .then(function () {
return changeRoleStatus(row.roleId, row.status) return changeRoleStatus(row.roleId, row.status)
}) })
.then(() => { .then(() => {
this.$modal.msgSuccess(text + '成功') proxy.$modal.msgSuccess(text + '成功')
}) })
.catch(function () { .catch(function () {
row.status = row.status === '0' ? '1' : '0' row.status = row.status === '0' ? '1' : '0'
}) })
}, }
// 取消按钮 // 取消按钮
cancel() { function cancel() {
this.open = false open.value = false
this.showRoleScope = false showRoleScope.value = false
this.reset() reset()
}, }
// 表单重置 // 表单重置
reset() { function reset() {
if (this.$refs.menu != undefined) { if (proxy.$refs.menuRef != undefined) {
this.$refs.menu.setCheckedKeys([]) proxy.$refs.menuRef.setCheckedKeys([])
} }
;(this.menuExpand = false), ;(menuExpand.value = false),
(this.menuNodeAll = false), (menuNodeAll.value = false),
(this.deptExpand = true), (deptExpand.value = true),
(this.deptNodeAll = false), (deptNodeAll.value = false),
(this.form = { (form.value = {
roleId: undefined, roleId: undefined,
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
@ -384,206 +363,212 @@ export default {
deptCheckStrictly: true, deptCheckStrictly: true,
remark: undefined, remark: undefined,
}) })
this.resetForm('form') proxy.resetForm('form')
}, }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { function handleQuery() {
this.queryParams.pageNum = 1 queryParams.pageNum = 1
this.getList() getList()
}, }
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { function resetQuery() {
this.dateRange = [] dateRange.value = []
this.resetForm('queryForm') proxy.resetForm('queryForm')
this.handleQuery() handleQuery()
}, }
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { function handleSelectionChange(selection) {
this.ids = selection.map((item) => item.roleId) ids.value = selection.map((item) => item.roleId)
this.single = selection.length != 1 single.value = selection.length != 1
this.multiple = !selection.length multiple.value = !selection.length
}, }
// 更多操作触发 // 更多操作触发
handleCommand(command, row) { function handleCommand(command, row) {
switch (command) { switch (command) {
case 'handleDataScope': case 'handleDataScope':
this.handleDataScope(row) handleDataScope(row)
break break
case 'handleAuthUser': case 'handleAuthUser':
this.handleAuthUser(row) handleAuthUser(row)
break break
default: default:
break break
} }
}, }
// 树权限（展开/折叠） // 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) { function handleCheckedTreeExpand(value, type) {
if (type == 'menu') { if (type == 'menu') {
const treeList = this.menuOptions const treeList = menuOptions.value
for (let i = 0; i < treeList.length; i++) { for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value proxy.$refs.menuRef.store.nodesMap[treeList[i].id].expanded = value
} }
} else if (type == 'dept') { } else if (type == 'dept') {
const treeList = this.deptOptions const treeList = deptOptions.value
for (let i = 0; i < treeList.length; i++) { for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value proxy.$refs.deptRef.store.nodesMap[treeList[i].id].expanded = value
} }
} }
}, }
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) { // 树权限（全选/全不选）
function handleCheckedTreeNodeAll(value, type) {
if (type == 'menu') { if (type == 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []) proxy.$refs.menuRef.setCheckedNodes(value ? menuOptions.value : [])
} else if (type == 'dept') { } else if (type == 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []) proxy.$refs.deptRef.setCheckedNodes(value ? deptOptions.value : [])
} }
}, }
// 树权限（父子联动）
handleCheckedTreeConnect(value, type) { // 树权限（父子联动）
function handleCheckedTreeConnect(value, type) {
if (type == 'menu') { if (type == 'menu') {
this.form.menuCheckStrictly = !!value form.value.menuCheckStrictly = !!value
} else if (type == 'dept') { } else if (type == 'dept') {
this.form.deptCheckStrictly = !!value form.value.deptCheckStrictly = !!value
} }
}, }
// 菜单筛选
menuFilterNode(value, data) { // 菜单筛选
function menuFilterNode(value, data) {
if (!value) return true if (!value) return true
return data.label.indexOf(value) !== -1 return data.label.indexOf(value) !== -1
}, }
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.getDeptTreeselect()
this.open = true
this.title = '添加角色'
this.showRoleScope = false
},
/** 修改按钮操作 ok */
handleUpdate(row) {
this.reset()
this.showRoleScope = false
const roleId = row.roleId || this.ids
const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
getRole(roleId).then((response) => {
this.form = response.data
this.open = true
this.title = '修改角色'
this.$nextTick(() => { /** 新增按钮操作 */
function handleAdd() {
reset()
getDeptTreeselect()
open.value = true
title.value = '添加角色'
showRoleScope.value = false
}
/** 修改按钮操作 ok */
function handleUpdate(row) {
reset()
showRoleScope.value = false
const roleId = row.roleId || ids.value
const roleDeptTreeselect = getRoleDeptTreeselect(row.roleId)
getRole(roleId).then((response) => {
form.value = response.data
open.value = true
title.value = '修改角色'
nextTick(() => {
roleDeptTreeselect.then((res) => { roleDeptTreeselect.then((res) => {
this.$refs.dept.setCheckedKeys(res.data.checkedKeys) proxy.$refs.deptRef.setCheckedKeys(res.data.checkedKeys)
}) })
}) })
}) })
}, }
/** 选择角色权限范围触发 */ /** 选择角色权限范围触发 */
dataScopeSelectChange(value) { function dataScopeSelectChange(value) {
if (value !== '2') { if (value !== '2') {
this.$refs.dept.setCheckedKeys([]) proxy.$refs.deptRef.setCheckedKeys([])
} }
}, }
// 数据权限 // 数据权限
dataScopeFormat(row, column) { function dataScopeFormat(row, column) {
return this.selectDictLabel(this.dataScopeOptions, row.dataScope) return proxy.selectDictLabel(dataScopeOptions.value, row.dataScope)
}, }
/** 分配角色权限按钮操作 */ /** 分配角色权限按钮操作 */
// 新增 和上面代码基本相同 // 新增 和上面代码基本相同
handleDataScope(row) { function handleDataScope(row) {
if (row.roleId == 1) { if (row.roleId == 1) {
this.showRoleScope = false showRoleScope.value = false
return return
} }
this.reset() reset()
this.showRoleScope = true showRoleScope.value = true
const roleId = row.roleId || this.ids const roleId = row.roleId || ids.value
const roleMenu = this.getRoleMenuTreeselect(roleId) const roleMenu = getRoleMenuTreeselect(roleId)
roleMenu.then((res) => { roleMenu.then((res) => {
const checkedKeys = res.data.checkedKeys const checkedKeys = res.data.checkedKeys
checkedKeys.forEach((v) => { checkedKeys.forEach((v) => {
this.$nextTick(() => { nextTick(() => {
this.$refs.menu.setChecked(v, true, false) proxy.$refs.menuRef.setChecked(v, true, false)
}) })
}) })
}) })
this.form = { form.value = {
roleId: row.roleId, roleId: row.roleId,
roleName: row.roleName, roleName: row.roleName,
roleKey: row.roleKey, roleKey: row.roleKey,
menuCheckStrictly: row.menuCheckStrictly, menuCheckStrictly: row.menuCheckStrictly,
} }
}, }
/** 分配用户操作 */ const router = useRouter()
handleAuthUser: function (row) { /** 分配用户操作 */
function handleAuthUser(row) {
const roleId = row.roleId const roleId = row.roleId
this.$router.push({ path: '/system/roleusers', query: { roleId } }) router.push({ path: '/system/roleusers', query: { roleId } })
}, }
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { function submitForm() {
this.$refs['form'].validate((valid) => { proxy.$refs['formRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.roleId != undefined && this.form.roleId > 0) { if (form.value.roleId != undefined && form.value.roleId > 0) {
this.form.type = 'edit' form.value.type = 'edit'
this.form.deptIds = this.getDeptAllCheckedKeys() form.value.deptIds = getDeptAllCheckedKeys()
updateRole(this.form).then((response) => { updateRole(form.value).then((response) => {
this.$modal.msgSuccess('修改成功') proxy.$modal.msgSuccess('修改成功')
this.open = false open.value = false
this.getList() getList()
}) })
} else { } else {
this.form.type = 'add' form.value.type = 'add'
this.form.deptIds = this.getDeptAllCheckedKeys() form.value.deptIds = getDeptAllCheckedKeys()
addRole(this.form).then((response) => { addRole(form.value).then((response) => {
this.open = false open.value = false
if (response.code == 200) { if (response.code == 200) {
this.$modal.msgSuccess('新增成功') proxy.$modal.msgSuccess('新增成功')
this.getList() getList()
} else { } else {
this.msgInfo(response.msg) proxy.$modal.msgError(response.msg)
} }
}) })
} }
} }
}) })
}, }
/** 提交按钮（菜单数据权限） */
submitDataScope: function () { /** 提交按钮（菜单数据权限） */
if (this.form.roleId != undefined) { function submitDataScope() {
this.form.menuIds = this.getMenuAllCheckedKeys() if (form.value.roleId != undefined) {
dataScope(this.form).then((response) => { form.value.menuIds = getMenuAllCheckedKeys()
this.$modal.msgSuccess('修改成功') dataScope(form.value).then((response) => {
this.getList() proxy.$modal.msgSuccess('修改成功')
this.cancel() getList()
cancel()
}) })
} else { } else {
this.$modal.msgError('请选择角色') proxy.$modal.msgError('请选择角色')
} }
}, }
/** 删除按钮操作 */
handleDelete(row) { /** 删除按钮操作 */
const roleIds = row.roleId || this.ids function handleDelete(row) {
this.$confirm( const roleIds = row.roleId || ids.value
'是否确认删除角色编号为"' + roleIds + '"的数据项?', proxy
'警告', .$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', '警告', {
{
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} })
)
.then(function () { .then(function () {
return delRole(roleIds) return delRole(roleIds)
}) })
.then(() => { .then(() => {
this.getList() getList()
this.$modal.msgSuccess('删除成功') proxy.$modal.msgSuccess('删除成功')
}) })
}, }
/** 导出按钮操作 */
handleExport() { /** 导出按钮操作 */
const queryParams = this.queryParams function handleExport() {
this.$confirm('是否确认导出所有角色数据项?', '警告', { proxy
.$confirm('是否确认导出所有角色数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
@ -592,11 +577,14 @@ export default {
return exportRole(queryParams) return exportRole(queryParams)
}) })
.then((response) => { .then((response) => {
this.download(response.data.path) proxy.download(response.data.path)
}) })
},
},
} }
getList()
proxy.getDicts('sys_normal_disable').then((response) => {
statusOptions.value = response.data
})
</script> </script>
<style scoped> <style scoped>
/* tree border */ /* tree border */

353
src/views/system/roleusers/index.vue
View File

@ -1,13 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- <el-col :span="4" :xs="24">
<el-table ref="roleTable" v-loading="loadingRole" highlight-current-row :data="dataRoleTable" border :height="tableHeight-135"
@row-click="handleRoleTableSelection">
<el-table-column prop="roleName" label="请选择角色名称" />
</el-table>
</el-col> -->
<el-form :inline="true" @submit.prevent> <el-form :inline="true" @submit.prevent>
<el-form-item label="角色名"> <el-form-item label="角色名">
<el-input v-model="roleUserQueryParams.roleName" disabled /> <el-input v-model="roleUserQueryParams.roleName" disabled />
@ -16,7 +8,7 @@
<el-input v-model="roleUserQueryParams.roleKey" disabled /> <el-input v-model="roleUserQueryParams.roleKey" disabled />
</el-form-item> </el-form-item>
<el-form-item label="用户名"> <el-form-item label="用户名">
<el-input v-model="roleUserQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="el-icon-search" @keyup.enter="searchRoleUser" /> <el-input v-model="roleUserQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" @keyup.enter="searchRoleUser" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="search" @click="searchRoleUser">搜索</el-button> <el-button type="primary" icon="search" @click="searchRoleUser">搜索</el-button>
@ -26,24 +18,21 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户 <el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户 </el-button>
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']"> <el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']"> 批量取消授权</el-button>
批量取消授权</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="warning" plain icon="close" @click="handleClose">关闭</el-button> <el-button type="warning" plain icon="close" @click="handleClose">关闭</el-button>
</el-col> </el-col>
</el-row> </el-row>
<el-table ref="roleUserTable" v-loading="loadingRoleUser" :data="dataRoleUserTable" row-key="userId" stripe border> <el-table ref="roleUserTableRef" v-loading="loading" :data="roleUserList" @selection-change="handleCancelSelectionChange" row-key="userId" stripe border>
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column prop="userId" align="center" label="用户Id" width="150" /> <el-table-column prop="userId" align="center" label="用户Id" width="150" />
<el-table-column prop="userName" align="center" label="用户名" width="150" /> <el-table-column prop="userName" align="center" label="用户名" width="150" />
<el-table-column prop="nickName" align="center" label="用户昵称" width="150" /> <el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
<el-table-column prop="email" align="center" label="邮箱" />
<el-table-column prop="status" align="center" label="账号状态" width="80"> <el-table-column prop="status" align="center" label="账号状态" width="80">
<template #default="scope"> <template #default="scope">
<dict-tag :options="statusOptions" :value="scope.row.status" /> <dict-tag :options="statusOptions" :value="scope.row.status" />
@ -52,25 +41,33 @@
<el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" /> <el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" />
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template #default="scope"> <template #default="scope">
<el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1" <el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1" v-hasPermi="['system:roleusers:del']">
v-hasPermi="['system:roleusers:del']">取消授权</el-button> 取消授权
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-model:total="dataRoleUserCount" v-model:page="roleUserQueryParams.pageNum" v-model:limit="roleUserQueryParams.pageSize" @pagination="getRoleUser" /> <pagination v-model:total="roleUserCount" v-model:page="roleUserQueryParams.pageNum" v-model:limit="roleUserQueryParams.pageSize" @pagination="getRoleUser" />
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<el-dialog title="添加用户" v-model="open" append-to-body @close="cancel"> <el-dialog title="添加用户" v-model="open" append-to-body @close="cancel">
<el-form :inline="true" @submit.prevent> <el-form :inline="true" @submit.prevent>
<el-form-item> <el-form-item>
<el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" <el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" @keyup.enter="handleSearchRoleUser" />
@keyup.enter="handleSearchRoleUser" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row> <el-row>
<el-col> <el-col>
<el-table ref="userTable" v-loading="loadingUser" :data="dataUserTable" @selection-change="handleSelectionChange" row-key="userId" stripe <el-table
border :height="tableHeight*0.5"> ref="userTable"
v-loading="loadingUser"
:data="dataUserTable"
@selection-change="handleSelectionChange"
row-key="userId"
stripe
border
:height="tableHeight * 0.5"
>
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column prop="userId" align="center" label="用户编号" width="150" /> <el-table-column prop="userId" align="center" label="用户编号" width="150" />
<el-table-column prop="userName" align="center" label="用户名称" width="150" /> <el-table-column prop="userName" align="center" label="用户名称" width="150" />
@ -93,203 +90,175 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script setup name="roleusers">
// import { listRole } from "@/api/system/role"; // import { listRole } from "@/api/system/role";
import { getRole } from "@/api/system/role"; import { getRole } from '@/api/system/role'
import { import { getRoleUsers, createRoleUsers, deleteRoleUsers, getExcludeUsers } from '@/api/system/userRoles'
getRoleUsers,
createRoleUsers, const loadingUser = ref(false)
deleteRoleUsers, const loading = ref(false)
getExcludeUsers, // 表格高度
} from "@/api/system/userRoles"; const tableHeight = ref(window.innerHeight)
export default { // 已添加用户列表
name: "roleusers", const roleUserList = ref([])
data() { const roleUserCount = ref(0)
return { // 未添加用户列表
// 遮罩层 const dataUserTable = ref([])
loadingRole: false, const dataUserCount = ref(0)
loadingUser: false, // 勾选添加用户列表
loadingRoleUser: false, const addSelections = ref([])
// 表格高度 // 勾选删除用户列表
tableHeight: window.innerHeight, const delSelections = ref([])
// 角色列表 // 是否显示弹出层
dataRoleTable: [], const open = ref(false)
// 已添加用户列表 const roleUserTableRef = ref()
dataRoleUserTable: [], // 角色用户查询参数
dataRoleUserCount: 0, const roleUserQueryParams = reactive({
// 未添加用户列表
dataUserTable: [],
dataUserCount: 0,
// 勾选添加用户列表
addSelections: [],
// 勾选删除用户列表
delSelections: [],
// 过滤查询
search: "",
// 角色id
roleId: "",
// 是否显示弹出层
open: false,
// 角色用户查询参数
roleUserQueryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
roleId: undefined, roleId: undefined,
userName: undefined, userName: undefined,
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
}, })
userQueryParams: { const userQueryParams = reactive({
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
roleId: undefined, roleId: undefined,
userName: undefined, userName: undefined,
}, })
// 状态字典 // 状态字典
statusOptions: [], const statusOptions = ref([])
};
},
created() {
// 获取角色列表
// this.loadingRole = true;
// listRole({ pageSize: 50 }).then((response) => {
// this.dataRoleTable = response.data.result;
// // this.handleRoleTableSelection(this.dataRoleTable[0]);
// // this.$refs.roleTable.setCurrentRow(this.dataRoleTable[0]);
// this.loadingRole = false;
// });
this.getDicts("sys_normal_disable").then((response) => {
this.statusOptions = response.data;
});
var roleId = this.$route.query.roleId;
console.log(roleId);
if (roleId) {
this.roleId = roleId;
this.searchRoleUser();
getRole(roleId).then((response) => { const { proxy } = getCurrentInstance()
const { code, data } = response; const route = useRoute()
proxy.getDicts('sys_normal_disable').then((response) => {
statusOptions.value = response.data
})
const role_id = route.query.roleId
roleUserQueryParams.roleId = role_id
userQueryParams.roleId = role_id
function init() {
searchRoleUser()
getRole(roleUserQueryParams.roleId).then((response) => {
const { code, data } = response
if (code == 200) { if (code == 200) {
this.roleUserQueryParams.roleName = data.roleName; roleUserQueryParams.roleName = data.roleName
this.roleUserQueryParams.roleKey = data.roleKey; roleUserQueryParams.roleKey = data.roleKey
} }
}); })
} else { }
this.msgError("请升级数据库");
function searchRoleUser() {
roleUserQueryParams.pageNum = 1
getRoleUser()
}
// 获取角色用户
function getRoleUser() {
loading.value = true
getRoleUsers(roleUserQueryParams).then((response) => {
roleUserList.value = response.data.result
roleUserCount.value = response.data.totalNum
loading.value = false
})
}
// 返回按钮
function handleClose() {
const obj = { path: '/system/role' }
proxy.$tab.closeOpenPage(obj)
}
function handleCancelSelectionChange(selection) {
delSelections.value = selection.map((item) => item.userId)
}
// 批量删除角色用户
function cancelAuthUserAll() {
if (delSelections.value.length === 0) {
proxy.$modal.msgError('请选择要删除的用户')
return
} }
}, proxy
methods: { .$confirm('是否确认删除选中的 ' + delSelections.value.length + ' 条数据?', '警告', {
searchRoleUser() { confirmButtonText: '确定',
this.roleUserQueryParams.pageNum = 1; cancelButtonText: '取消',
this.getRoleUser(); type: 'warning',
}, })
// 获取角色用户
getRoleUser() {
this.loadingRoleUser = true;
this.roleUserQueryParams.roleId = this.roleId;
getRoleUsers(this.roleUserQueryParams).then((response) => {
this.dataRoleUserTable = response.data.result;
this.dataRoleUserCount = response.data.totalNum;
this.loadingRoleUser = false;
});
},
// 返回按钮
handleClose() {
const obj = { path: "/system/role" };
this.$tab.closeOpenPage(obj);
},
// 批量删除角色用户
cancelAuthUserAll() {
this.delSelections = [];
this.$refs.roleUserTable.selection.forEach((element) => {
this.delSelections.push(element.userId);
});
if (this.delSelections.length === 0) {
this.$modal.msgError("请选择要删除的用户");
return;
}
this.$confirm(
"是否确认删除选中的 " + this.delSelections.length + " 条数据?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => { .then(() => {
deleteRoleUsers({ deleteRoleUsers({
roleId: this.roleId, roleId: role_id,
userIds: this.delSelections, userIds: delSelections.value,
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ proxy.$message({
message: "成功删除" + response.data + "条数据", message: '成功删除' + response.data + '条数据',
type: "success", type: 'success',
});
this.getRoleUser();
}
});
}) })
.catch(() => {}); getRoleUser()
}, }
// 取消授权 })
handleCancelPerm(row) { })
this.delSelections = []; .catch(() => {})
this.delSelections.push(row.userId); }
// 取消授权
function handleCancelPerm(row) {
delSelections.value = []
delSelections.value.push(row.userId)
deleteRoleUsers({ deleteRoleUsers({
roleId: this.roleId, roleId: role_id,
userIds: this.delSelections, userIds: delSelections.value,
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ proxy.$message({
message: "成功删除" + response.data + "条数据", message: '成功删除' + response.data + '条数据',
type: "success", type: 'success',
}); })
this.getRoleUser(); getRoleUser()
}
})
}
// 选中角色
// 多选框选中数据
function handleSelectionChange(selection) {
addSelections.value = selection.map((item) => item.userId)
}
function handleSearchRoleUser() {
userQueryParams.pageNum = 1
handleGetUserTable()
}
// 获取未添加角色列表
function handleGetUserTable() {
open.value = true
loadingUser.value = true
getExcludeUsers(userQueryParams).then((response) => {
dataUserTable.value = response.data.result
dataUserCount.value = response.data.totalNum
loadingUser.value = false
})
}
// 新增用户角色
function handleSubmit() {
if (addSelections.value.length <= 0) {
proxy.$modal.msgError('请选择要添加的用户')
return
} }
});
},
// 选中角色
// 多选框选中数据
handleSelectionChange(selection) {
this.addSelections = selection.map((item) => item.userId);
},
handleSearchRoleUser() {
this.userQueryParams.pageNum = 1;
this.handleGetUserTable();
},
// 获取未添加角色列表
handleGetUserTable() {
this.open = true;
this.loadingUser = true;
this.userQueryParams.roleId = this.roleId;
getExcludeUsers(this.userQueryParams).then((response) => {
this.dataUserTable = response.data.result;
this.dataUserCount = response.data.totalNum;
this.loadingUser = false;
});
},
// 新增用户角色
handleSubmit() {
createRoleUsers({ createRoleUsers({
roleId: this.roleId, roleId: role_id,
userIds: this.addSelections, userIds: addSelections.value,
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ proxy.$message({
message: "成功添加" + response.data + "条数据", message: '成功添加' + response.data + '条数据',
type: "success", type: 'success',
}); })
this.getRoleUser(); getRoleUser()
this.open = false; open.value = false
} }
}); })
}, }
cancel() { function cancel() {
this.open = false; open.value = false
}, }
}, init()
};
</script> </script>

177
src/views/system/user/index.vue
View File

@ -7,8 +7,15 @@
<el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="el-icon-search" style="margin-bottom: 20px" /> <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="el-icon-search" style="margin-bottom: 20px" />
</div> </div>
<div class="head-container"> <div class="head-container">
<el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" <el-tree
:filter-node-method="filterNode" ref="deptTreeRef" default-expand-all @node-click="handleNodeClick" /> :data="deptOptions"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTreeRef"
default-expand-all
@node-click="handleNodeClick"
/>
</div> </div>
</el-col> </el-col>
<!--用户数据--> <!--用户数据-->
@ -26,8 +33,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" <el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
end-placeholder="结束日期"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
@ -70,12 +76,9 @@
<el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column> <el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column>
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button v-if="scope.row.userId !== 1" type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"> <el-button v-if="scope.row.userId !== 1" type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"> </el-button>
</el-button> <el-button v-if="scope.row.userId !== 1" type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"> </el-button>
<el-button v-if="scope.row.userId !== 1" type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"> <el-button v-if="scope.row.userId !== 1" type="text" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
</el-button>
<el-button v-if="scope.row.userId !== 1" type="text" icon="Key" @click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"></el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -86,7 +89,7 @@
<!-- 添加或修改用户配置对话框 --> <!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form :model="form" :rules="rules" ref="userRef" label-width="80px"> <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
<el-row v-if="form.userId == undefined"> <el-row :gutter="20">
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="用户名" prop="userName"> <el-form-item label="用户名" prop="userName">
<el-input :disabled="form.userId != undefined" v-model="form.userName" placeholder="请输入用户名(用于登陆)" /> <el-input :disabled="form.userId != undefined" v-model="form.userName" placeholder="请输入用户名(用于登陆)" />
@ -97,20 +100,22 @@
<el-input :disabled="form.userId != undefined" v-model="form.password" placeholder="请输入用户密码" type="password" /> <el-input :disabled="form.userId != undefined" v-model="form.password" placeholder="请输入用户密码" type="password" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="用户昵称" prop="nickName"> <el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" /> <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :lg="12">
<el-form-item label="归属部门" prop="deptId"> <el-form-item label="归属部门" prop="deptId">
<tree-select v-model:value="form.deptId" :show-count="true" :options="deptOptions" placeholder="请选择归属部门" <tree-select
:objMap="{ value: 'id', label: 'label', children: 'children' }" /> v-model:value="form.deptId"
:show-count="true"
:options="deptOptions"
placeholder="请选择归属部门"
:objMap="{ value: 'id', label: 'label', children: 'children' }"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
@ -121,13 +126,11 @@
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :lg="12"> <el-col :lg="12">
<el-form-item label="用户性别"> <el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择用户性别"> <el-radio-group v-model="form.sex" placeholder="请选择用户性别">
<el-option v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option> <el-radio v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-select> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
@ -137,26 +140,20 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :lg="24">
<el-row>
<el-col :lg="12">
<el-form-item label="岗位"> <el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择"> <el-select v-model="form.postIds" multiple placeholder="请选择" class="w100">
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"> <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"> </el-option>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="角色"> <el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择" style="width:100%" @change="selectRole($event)"> <el-select v-model="form.roleIds" multiple placeholder="请选择" style="width: 100%" @change="selectRole($event)">
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"> <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"> </el-option>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="备注"> <el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@ -172,36 +169,21 @@
</template> </template>
</el-dialog> </el-dialog>
<!-- 用户导入对话框 -->
<!-- <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
<el-upload name="file" ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</template>
</el-dialog> -->
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
<el-upload name="file" ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" <el-upload
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" name="file"
:on-success="handleFileSuccess" :auto-upload="false" drag> ref="uploadRef"
<!-- <i class="el-icon-upload"></i> --> :limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload"> <el-icon class="el-icon--upload">
<upload-filled /> <upload-filled />
</el-icon> </el-icon>
@ -212,7 +194,7 @@
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> --> </div> -->
<span>仅允许导入xls、xlsx格式文件。</span> <span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
</div> </div>
</template> </template>
</el-upload> </el-upload>
@ -222,7 +204,6 @@
<el-button @click="upload.open = false">取 消</el-button> <el-button @click="upload.open = false">取 消</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -230,18 +211,8 @@
<script setup name="user"> <script setup name="user">
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import { treeselect } from '@/api/system/dept' import { treeselect } from '@/api/system/dept'
import { import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, exportUser } from '@/api/system/user'
changeUserStatus,
listUser,
resetUserPwd,
delUser,
getUser,
updateUser,
addUser,
exportUser,
} from '@/api/system/user'
const router = useRouter()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const statusOptions = ref([]) const statusOptions = ref([])
@ -252,10 +223,6 @@ proxy.getDicts('sys_normal_disable').then((response) => {
proxy.getDicts('sys_user_sex').then((response) => { proxy.getDicts('sys_user_sex').then((response) => {
sexOptions.value = response.data sexOptions.value = response.data
}) })
// proxy.getConfigKey("sys.user.initPassword").then((response) => {
// initPassword.value = response.data;
// });
const userList = ref([]) const userList = ref([])
const open = ref(false) const open = ref(false)
const loading = ref(true) const loading = ref(true)
@ -284,7 +251,7 @@ const upload = reactive({
// 设置上传的请求头部 // 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() }, headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址 // 上传的地址
url: import.meta.env.VITE_APP_BASE_API + 'system/user/importData', url: import.meta.env.VITE_APP_BASE_API + '/system/user/importData',
}) })
// 列显隐信息 // 列显隐信息
const columns = ref([ const columns = ref([
@ -317,9 +284,7 @@ const data = reactive({
trigger: 'blur', trigger: 'blur',
}, },
], ],
nickName: [ nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
],
password: [ password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' }, { required: true, message: '用户密码不能为空', trigger: 'blur' },
{ {
@ -331,8 +296,9 @@ const data = reactive({
], ],
email: [ email: [
{ {
required: true,
type: 'email', type: 'email',
message: "'请输入正确的邮箱地址", message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'], trigger: ['blur', 'change'],
}, },
], ],
@ -348,6 +314,10 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data) const { queryParams, form, rules } = toRefs(data)
proxy.getConfigKey('sys.user.initPassword').then((response) => {
initPassword.value = response.data
})
/** 通过条件过滤节点 */ /** 通过条件过滤节点 */
const filterNode = (value, data) => { const filterNode = (value, data) => {
if (!value) return true if (!value) return true
@ -366,13 +336,11 @@ function getTreeselect() {
/** 查询用户列表 */ /** 查询用户列表 */
function getList() { function getList() {
loading.value = true loading.value = true
listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then( listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
(res) => {
loading.value = false loading.value = false
userList.value = res.data.result userList.value = res.data.result
total.value = res.data.totalNum total.value = res.data.totalNum
} })
)
} }
/** 节点单击事件 */ /** 节点单击事件 */
function handleNodeClick(data) { function handleNodeClick(data) {
@ -439,24 +407,6 @@ function handleStatusChange(row) {
row.status = row.status === '0' ? '1' : '0' row.status = row.status === '0' ? '1' : '0'
}) })
} }
/** 更多操作 */
function handleCommand(command, row) {
switch (command) {
case 'handleResetPwd':
handleResetPwd(row)
break
case 'handleAuthRole':
handleAuthRole(row)
break
default:
break
}
}
/** 跳转角色分配 */
function handleAuthRole(row) {
const userId = row.userId
router.push('/system/user-auth/role/' + userId)
}
/** 重置密码按钮操作 */ /** 重置密码按钮操作 */
function handleResetPwd(row) { function handleResetPwd(row) {
proxy proxy
@ -487,11 +437,6 @@ function handleImport() {
} }
/** 下载模板操作 */ /** 下载模板操作 */
function importTemplate() { function importTemplate() {
// proxy.download(
// "system/user/importTemplate",
// {},
// `user_template_${new Date().getTime()}.xlsx`
// );
proxy.download('/system/user/importTemplate', '用户数据导入模板') proxy.download('/system/user/importTemplate', '用户数据导入模板')
} }
/**文件上传中处理 */ /**文件上传中处理 */
@ -503,13 +448,7 @@ const handleFileSuccess = (response, file, fileList) => {
upload.open = false upload.open = false
upload.isUploading = false upload.isUploading = false
proxy.$refs['uploadRef'].clearFiles() proxy.$refs['uploadRef'].clearFiles()
proxy.$alert( proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
'</div>',
'导入结果',
{ dangerouslyUseHTMLString: true }
)
getList() getList()
} }
/** 提交上传文件 */ /** 提交上传文件 */
@ -535,7 +474,7 @@ function reset() {
password: undefined, password: undefined,
phonenumber: undefined, phonenumber: undefined,
email: undefined, email: undefined,
sex: undefined, sex: '2',
status: '0', status: '0',
remark: undefined, remark: undefined,
postIds: [], postIds: [],
@ -557,7 +496,7 @@ function handleAdd() {
roleOptions.value = response.data.roles roleOptions.value = response.data.roles
open.value = true open.value = true
title.value = '添加用户' title.value = '添加用户'
// form.password.value = initPassword.value; form.value.password = initPassword.value
}) })
} }
/** 修改按钮操作 */ /** 修改按钮操作 */

2
src/views/system/user/profile/index.vue
View File

@ -32,7 +32,7 @@
<li class="list-group-item"> <li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色 <svg-icon icon-class="peoples" />所属角色
<div class="pull-right"> <div class="pull-right">
<span v-for="item in state.roles" :key="item">{{item}}</span> <span v-for="item in state.roles" :key="item">{{ item }}</span>
</div> </div>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">

2
src/views/system/user/profile/operLog.vue
View File

@ -45,8 +45,6 @@
<script setup name="operlog"> <script setup name="operlog">
import { list as queryLog } from '@/api/monitor/operlog' import { list as queryLog } from '@/api/monitor/operlog'
import { getCurrentInstance } from 'vue-demi'
// 遮罩层 // 遮罩层
const loading = ref(true) const loading = ref(true)
// 总条数 // 总条数

32
src/views/system/user/profile/resetPwd.vue
View File

@ -17,47 +17,47 @@
</template> </template>
<script setup> <script setup>
import { updateUserPwd } from "@/api/system/user"; import { updateUserPwd } from '@/api/system/user'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const user = reactive({ const user = reactive({
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined, confirmPassword: undefined,
}); })
const equalToPassword = (rule, value, callback) => { const equalToPassword = (rule, value, callback) => {
if (user.newPassword !== value) { if (user.newPassword !== value) {
callback(new Error("两次输入的密码不一致")); callback(new Error('两次输入的密码不一致'))
} else { } else {
callback(); callback()
} }
}; }
const rules = ref({ const rules = ref({
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }], oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
newPassword: [ newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" }, { required: true, message: '新密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
], ],
confirmPassword: [ confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, message: '确认密码不能为空', trigger: 'blur' },
{ required: true, validator: equalToPassword, trigger: "blur" }, { required: true, validator: equalToPassword, trigger: 'blur' },
], ],
}); })
/** 提交按钮 */ /** 提交按钮 */
function submit() { function submit() {
proxy.$refs.pwdRef.validate((valid) => { proxy.$refs.pwdRef.validate((valid) => {
if (valid) { if (valid) {
updateUserPwd(user.oldPassword, user.newPassword).then((response) => { updateUserPwd(user.oldPassword, user.newPassword).then((response) => {
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
}); })
} }
}); })
} }
/** 关闭按钮 */ /** 关闭按钮 */
function close() { function close() {
proxy.$tab.closePage(); proxy.$tab.closePage()
} }
</script> </script>

116
src/views/system/user/profile/userAvatar.vue
View File

@ -1,12 +1,23 @@
<template> <template>
<div class="user-info-head" @click="editCropper()"><img :src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> <div class="user-info-head" @click="editCropper()">
<img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
</div>
<el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{ height: '350px' }">
<vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth" <vue-cropper
:autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" @realTime="realTime" v-if="visible" /> ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
v-if="visible"
/>
</el-col> </el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{ height: '350px' }">
<div class="avatar-upload-preview"> <div class="avatar-upload-preview">
<img :src="options.previews.url" :style="options.previews.img" /> <img :src="options.previews.url" :style="options.previews.img" />
</div> </div>
@ -24,19 +35,19 @@
</el-button> </el-button>
</el-upload> </el-upload>
</el-col> </el-col>
<el-col :lg="{span: 1, offset: 2}" :md="2"> <el-col :lg="{ span: 1, offset: 2 }" :md="2">
<el-button icon="Plus" @click="changeScale(1)"></el-button> <el-button icon="Plus" @click="changeScale(1)"></el-button>
</el-col> </el-col>
<el-col :lg="{span: 1, offset: 1}" :md="2"> <el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button icon="Minus" @click="changeScale(-1)"></el-button> <el-button icon="Minus" @click="changeScale(-1)"></el-button>
</el-col> </el-col>
<el-col :lg="{span: 1, offset: 1}" :md="2"> <el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button icon="RefreshLeft" @click="rotateLeft()"></el-button> <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
</el-col> </el-col>
<el-col :lg="{span: 1, offset: 1}" :md="2"> <el-col :lg="{ span: 1, offset: 1 }" :md="2">
<el-button icon="RefreshRight" @click="rotateRight()"></el-button> <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
</el-col> </el-col>
<el-col :lg="{span: 2, offset: 6}" :md="2"> <el-col :lg="{ span: 2, offset: 6 }" :md="2">
<el-button type="primary" @click="uploadImg()">提 交</el-button> <el-button type="primary" @click="uploadImg()">提 交</el-button>
</el-col> </el-col>
</el-row> </el-row>
@ -44,10 +55,9 @@
</template> </template>
<script> <script>
import "vue-cropper/dist/index.css"; import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper"; import { VueCropper } from 'vue-cropper'
import { uploadAvatar } from "@/api/system/user"; import { uploadAvatar } from '@/api/system/user'
import { reactive, ref, getCurrentInstance } from "vue";
export default { export default {
components: { components: {
@ -60,12 +70,12 @@ export default {
}, },
}, },
setup() { setup() {
const store = useStore(); const store = useStore()
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const open = ref(false); const open = ref(false)
const visible = ref(false); const visible = ref(false)
const title = ref("修改头像"); const title = ref('修改头像')
//图片裁剪数据 //图片裁剪数据
const options = reactive({ const options = reactive({
@ -75,67 +85,65 @@ export default {
autoCropHeight: 200, // 默认生成截图框高度 autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变 fixedBox: true, // 固定截图框大小 不允许改变
previews: {}, //预览数据 previews: {}, //预览数据
}); })
/** 编辑头像 */ /** 编辑头像 */
function editCropper() { function editCropper() {
open.value = true; open.value = true
} }
/** 打开弹出层结束时的回调 */ /** 打开弹出层结束时的回调 */
function modalOpened() { function modalOpened() {
visible.value = true; visible.value = true
} }
/** 覆盖默认上传行为 */ /** 覆盖默认上传行为 */
function requestUpload() {} function requestUpload() {}
/** 向左旋转 */ /** 向左旋转 */
function rotateLeft() { function rotateLeft() {
proxy.$refs.cropper.rotateLeft(); proxy.$refs.cropper.rotateLeft()
} }
/** 向右旋转 */ /** 向右旋转 */
function rotateRight() { function rotateRight() {
proxy.$refs.cropper.rotateRight(); proxy.$refs.cropper.rotateRight()
} }
/** 图片缩放 */ /** 图片缩放 */
function changeScale(num) { function changeScale(num) {
num = num || 1; num = num || 1
proxy.$refs.cropper.changeScale(num); proxy.$refs.cropper.changeScale(num)
} }
/** 上传预处理 */ /** 上传预处理 */
function beforeUpload(file) { function beforeUpload(file) {
if (file.type.indexOf("image/") == -1) { if (file.type.indexOf('image/') == -1) {
proxy.$modal.msgError( proxy.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
"文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
);
} else { } else {
const reader = new FileReader(); const reader = new FileReader()
reader.readAsDataURL(file); reader.readAsDataURL(file)
reader.onload = () => { reader.onload = () => {
options.img = reader.result; options.img = reader.result
}; }
} }
} }
/** 上传图片 */ /** 上传图片 */
function uploadImg() { function uploadImg() {
proxy.$refs.cropper.getCropBlob((data) => { proxy.$refs.cropper.getCropBlob((data) => {
let formData = new FormData(); let formData = new FormData()
formData.append("picture", data); formData.append('picture', data)
uploadAvatar(formData).then((response) => { uploadAvatar(formData).then((response) => {
open.value = false; open.value = false
options.img = response.data.imgUrl;; options.img = response.data.imgUrl
store.commit("SET_AVATAR", options.img); store.commit('SET_AVATAR', options.img)
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
visible.value = false; visible.value = false
}); })
}); })
} }
/** 实时预览 */ /** 实时预览 */
function realTime(data) { function realTime(data) {
options.previews = data; options.previews = data
} }
/** 关闭窗口 */ /** 关闭窗口 */
function closeDialog() { function closeDialog() {
options.img = store.getters.avatar; options.img = store.getters.avatar
options.visible = false; options.visible = false
} }
return { return {
@ -153,21 +161,25 @@ export default {
uploadImg, uploadImg,
realTime, realTime,
closeDialog, closeDialog,
}; }
}, },
}; }
</script> </script>
<style lang="scss" scoped>
<style lang='scss' scoped>
.user-info-head { .user-info-head {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 120px;
height: 120px; height: 120px;
img {
width: 100%;
}
} }
.user-info-head:hover:after { .user-info-head:hover:after {
content: "+"; content: '+';
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -180,7 +192,7 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
cursor: pointer; cursor: pointer;
line-height: 110px; line-height: 120px;
border-radius: 50%; border-radius: 50%;
} }
</style> </style>

30
src/views/system/user/profile/userInfo.vue
View File

@ -23,48 +23,48 @@
</template> </template>
<script setup> <script setup>
import { updateUserProfile } from "@/api/system/user"; import { updateUserProfile } from '@/api/system/user'
const props = defineProps({ const props = defineProps({
user: { user: {
type: Object, type: Object,
}, },
}); })
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const rules = ref({ const rules = ref({
nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }], nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
email: [ email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
{ {
type: "email", type: 'email',
message: "'请输入正确的邮箱地址", message: "'请输入正确的邮箱地址",
trigger: ["blur", "change"], trigger: ['blur', 'change'],
}, },
], ],
phonenumber: [ phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" }, { required: true, message: '手机号码不能为空', trigger: 'blur' },
{ {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码", message: '请输入正确的手机号码',
trigger: "blur", trigger: 'blur',
}, },
], ],
}); })
/** 提交按钮 */ /** 提交按钮 */
function submit() { function submit() {
proxy.$refs.userRef.validate((valid) => { proxy.$refs.userRef.validate((valid) => {
if (valid) { if (valid) {
updateUserProfile(props.user).then((response) => { updateUserProfile(props.user).then((response) => {
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess('修改成功')
}); })
} }
}); })
} }
/** 关闭按钮 */ /** 关闭按钮 */
function close() { function close() {
proxy.$tab.closePage(); proxy.$tab.closePage()
} }
</script> </script>