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

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

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

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

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

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

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

383
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-col>
<el-col :span="1.5">
<el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改
</el-button>
<el-button type="success" plain icon="edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改 </el-button>
</el-col>
<el-col :span="1.5">
<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>
</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 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">
<template #default="scope">
<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-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-input v-model="form.dictName" placeholder="请输入字典名称" />
</el-form-item>
@ -84,12 +83,12 @@
</el-form-item>
<el-form-item label="字典状态" prop="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-form-item>
<el-form-item label="系统内置" prop="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-form-item>
<el-form-item label="备注" prop="remark">
@ -102,215 +101,189 @@
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="dictDataVisible" width="60%" :lock-scroll="false">
<dict-data v-model:dictId="dictId"></dict-data>
</el-dialog>
</div>
</template>
<script>
import dictData from "@/views/components/dictData";
<script setup name="dict">
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 {
listType,
getType,
delType,
addType,
updateType,
exportType,
} from "@/api/system/dict/type";
export default {
name: "dict",
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: {
pageNum: 1,
pageSize: 10,
dictName: undefined,
dictType: undefined,
status: undefined,
},
// 字典Id传值给子组件
dictId: 0,
// 表单参数
form: {},
// 表单校验
rules: {
dictName: [
{ required: true, message: "字典名称不能为空", trigger: "blur" },
],
dictType: [
{ required: true, message: "字典类型不能为空", trigger: "blur" },
],
},
};
const formRef = ref()
// 字典Id传值给子组件
const dictId = ref(0)
const state = reactive({
rules: {
dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
},
created() {
this.getList();
this.getDicts("sys_normal_disable").then((response) => {
this.statusOptions = response.data;
});
this.getDicts("sys_yes_no").then((response) => {
this.typeOptions = response.data;
});
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
dictName: undefined,
dictType: undefined,
status: undefined,
},
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,
dictName: undefined,
dictType: undefined,
status: "0",
type: "N",
remark: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加字典类型";
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.dictId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const dictId = row.dictId || this.ids;
getType(dictId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改字典类型";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.dictId != undefined) {
updateType(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addType(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const dictIds = row.dictId || this.ids;
this.$confirm(
'是否确认删除字典编号为"' + dictIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
return delType(dictIds);
})
const { rules, form, queryParams } = toRefs(state)
/** 查询字典类型列表 */
function getList() {
loading.value = true
listType(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
typeList.value = response.data.result
total.value = response.data.totalNum
loading.value = false
})
}
// 取消按钮
function cancel() {
open.value = false
reset()
}
// 表单重置
function reset() {
form.value = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: '0',
type: 'N',
remark: undefined,
}
proxy.resetForm('formRef')
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery() {
dateRange.value = []
proxy.resetForm('queryForm')
handleQuery()
}
/** 新增按钮操作 */
function handleAdd() {
reset()
open.value = true
title.value = '添加字典类型'
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.dictId)
single.value = selection.length != 1
multiple.value = !selection.length
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset()
const dictId = row.dictId || ids.value
getType(dictId).then((response) => {
form.value = response.data
open.value = true
title.value = '修改字典类型'
})
}
/** 提交按钮 */
function submitForm() {
proxy.$refs['formRef'].validate((valid) => {
if (valid) {
if (form.value.dictId != undefined) {
updateType(form.value).then((response) => {
proxy.$modal.msgSuccess('修改成功')
open.value = false
getList()
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有类型数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportType(queryParams);
} else {
addType(form.value).then((response) => {
proxy.$modal.msgSuccess('新增成功')
open.value = false
getList()
})
.then((response) => {
this.download(response.data.path);
});
},
showDictData(row) {
this.dictId = row.dictId;
this.dictDataVisible = true;
},
},
};
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const dictIds = row.dictId || ids.value
proxy
.$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
return delType(dictIds)
})
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
}
/** 导出按钮操作 */
function handleExport() {
proxy
.$confirm('是否确认导出所有类型数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
return exportType(queryParams.value)
})
.then((response) => {
proxy.download(response.data.path)
})
}
function showDictData(row) {
dictId.value = row.dictId
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>

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

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

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

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

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

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

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

@ -1,13 +1,5 @@
<template>
<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-item label="角色名">
<el-input v-model="roleUserQueryParams.roleName" disabled />
@ -16,7 +8,7 @@
<el-input v-model="roleUserQueryParams.roleKey" disabled />
</el-form-item>
<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-button type="primary" icon="search" @click="searchRoleUser">搜索</el-button>
@ -26,24 +18,21 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户
</el-button>
<el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户 </el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']">
批量取消授权</el-button>
<el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']"> 批量取消授权</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="close" @click="handleClose">关闭</el-button>
</el-col>
</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 prop="userId" align="center" label="用户Id" 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="email" align="center" label="邮箱" />
<el-table-column prop="status" align="center" label="账号状态" width="80">
<template #default="scope">
<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 align="center" label="操作">
<template #default="scope">
<el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1"
v-hasPermi="['system:roleusers:del']">取消授权</el-button>
<el-button type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1" v-hasPermi="['system:roleusers:del']">
取消授权
</el-button>
</template>
</el-table-column>
</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-form :inline="true" @submit.prevent>
<el-form-item>
<el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search"
@keyup.enter="handleSearchRoleUser" />
<el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable prefix-icon="search" @keyup.enter="handleSearchRoleUser" />
</el-form-item>
</el-form>
<el-row>
<el-col>
<el-table ref="userTable" v-loading="loadingUser" :data="dataUserTable" @selection-change="handleSelectionChange" row-key="userId" stripe
border :height="tableHeight*0.5">
<el-table
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 prop="userId" align="center" label="用户编号" width="150" />
<el-table-column prop="userName" align="center" label="用户名称" width="150" />
@ -93,203 +90,175 @@
</el-dialog>
</div>
</template>
<script>
<script setup name="roleusers">
// import { listRole } from "@/api/system/role";
import { getRole } from "@/api/system/role";
import {
getRoleUsers,
createRoleUsers,
deleteRoleUsers,
getExcludeUsers,
} from "@/api/system/userRoles";
export default {
name: "roleusers",
data() {
return {
// 遮罩层
loadingRole: false,
loadingUser: false,
loadingRoleUser: false,
// 表格高度
tableHeight: window.innerHeight,
// 角色列表
dataRoleTable: [],
// 已添加用户列表
dataRoleUserTable: [],
dataRoleUserCount: 0,
// 未添加用户列表
dataUserTable: [],
dataUserCount: 0,
// 勾选添加用户列表
addSelections: [],
// 勾选删除用户列表
delSelections: [],
// 过滤查询
search: "",
// 角色id
roleId: "",
// 是否显示弹出层
open: false,
// 角色用户查询参数
roleUserQueryParams: {
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
roleName: undefined,
roleKey: undefined,
},
userQueryParams: {
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
},
// 状态字典
statusOptions: [],
};
},
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();
import { getRole } from '@/api/system/role'
import { getRoleUsers, createRoleUsers, deleteRoleUsers, getExcludeUsers } from '@/api/system/userRoles'
getRole(roleId).then((response) => {
const { code, data } = response;
if (code == 200) {
this.roleUserQueryParams.roleName = data.roleName;
this.roleUserQueryParams.roleKey = data.roleKey;
}
});
} else {
this.msgError("请升级数据库");
const loadingUser = ref(false)
const loading = ref(false)
// 表格高度
const tableHeight = ref(window.innerHeight)
// 已添加用户列表
const roleUserList = ref([])
const roleUserCount = ref(0)
// 未添加用户列表
const dataUserTable = ref([])
const dataUserCount = ref(0)
// 勾选添加用户列表
const addSelections = ref([])
// 勾选删除用户列表
const delSelections = ref([])
// 是否显示弹出层
const open = ref(false)
const roleUserTableRef = ref()
// 角色用户查询参数
const roleUserQueryParams = reactive({
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
roleName: undefined,
roleKey: undefined,
})
const userQueryParams = reactive({
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
})
// 状态字典
const statusOptions = ref([])
const { proxy } = getCurrentInstance()
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) {
roleUserQueryParams.roleName = data.roleName
roleUserQueryParams.roleKey = data.roleKey
}
},
methods: {
searchRoleUser() {
this.roleUserQueryParams.pageNum = 1;
this.getRoleUser();
},
// 获取角色用户
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(() => {
deleteRoleUsers({
roleId: this.roleId,
userIds: this.delSelections,
}).then((response) => {
if (response.code === 200) {
this.$message({
message: "成功删除" + response.data + "条数据",
type: "success",
});
this.getRoleUser();
}
});
})
.catch(() => {});
},
// 取消授权
handleCancelPerm(row) {
this.delSelections = [];
this.delSelections.push(row.userId);
})
}
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
.$confirm('是否确认删除选中的 ' + delSelections.value.length + ' 条数据?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRoleUsers({
roleId: this.roleId,
userIds: this.delSelections,
roleId: role_id,
userIds: delSelections.value,
}).then((response) => {
if (response.code === 200) {
this.$message({
message: "成功删除" + response.data + "条数据",
type: "success",
});
this.getRoleUser();
proxy.$message({
message: '成功删除' + response.data + '条数据',
type: 'success',
})
getRoleUser()
}
});
},
// 选中角色
// 多选框选中数据
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({
roleId: this.roleId,
userIds: this.addSelections,
}).then((response) => {
if (response.code === 200) {
this.$message({
message: "成功添加" + response.data + "条数据",
type: "success",
});
this.getRoleUser();
this.open = false;
}
});
},
cancel() {
this.open = false;
},
},
};
})
})
.catch(() => {})
}
// 取消授权
function handleCancelPerm(row) {
delSelections.value = []
delSelections.value.push(row.userId)
deleteRoleUsers({
roleId: role_id,
userIds: delSelections.value,
}).then((response) => {
if (response.code === 200) {
proxy.$message({
message: '成功删除' + response.data + '条数据',
type: 'success',
})
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
}
createRoleUsers({
roleId: role_id,
userIds: addSelections.value,
}).then((response) => {
if (response.code === 200) {
proxy.$message({
message: '成功添加' + response.data + '条数据',
type: 'success',
})
getRoleUser()
open.value = false
}
})
}
function cancel() {
open.value = false
}
init()
</script>

183
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" />
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
:filter-node-method="filterNode" ref="deptTreeRef" default-expand-all @node-click="handleNodeClick" />
<el-tree
: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>
</el-col>
<!--用户数据-->
@ -26,8 +33,7 @@
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<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" width="150" class-name="small-padding fixed-width">
<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>
<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="Key" @click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"></el-button>
<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 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="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
</template>
</el-table-column>
</el-table>
@ -86,7 +89,7 @@
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
<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-form-item label="用户名" prop="userName">
<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-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :lg="12">
<el-form-item label="归属部门" prop="deptId">
<tree-select v-model:value="form.deptId" :show-count="true" :options="deptOptions" placeholder="请选择归属部门"
:objMap="{ value: 'id', label: 'label', children: 'children' }" />
<tree-select
v-model:value="form.deptId"
:show-count="true"
:options="deptOptions"
placeholder="请选择归属部门"
:objMap="{ value: 'id', label: 'label', children: 'children' }"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
@ -121,13 +126,11 @@
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择用户性别">
<el-option v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
</el-select>
<el-radio-group v-model="form.sex" placeholder="请选择用户性别">
<el-radio v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
@ -137,26 +140,20 @@
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="12">
<el-col :lg="24">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1">
</el-option>
<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>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="角色">
<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>
<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>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :lg="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@ -172,36 +169,21 @@
</template>
</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-upload name="file" ref="uploadRef" :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> -->
<el-upload
name="file"
ref="uploadRef"
: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">
<upload-filled />
</el-icon>
@ -212,7 +194,7 @@
<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>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
</div>
</template>
</el-upload>
@ -222,7 +204,6 @@
<el-button @click="upload.open = false">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@ -230,18 +211,8 @@
<script setup name="user">
import { getToken } from '@/utils/auth'
import { treeselect } from '@/api/system/dept'
import {
changeUserStatus,
listUser,
resetUserPwd,
delUser,
getUser,
updateUser,
addUser,
exportUser,
} from '@/api/system/user'
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, exportUser } from '@/api/system/user'
const router = useRouter()
const { proxy } = getCurrentInstance()
const statusOptions = ref([])
@ -252,10 +223,6 @@ proxy.getDicts('sys_normal_disable').then((response) => {
proxy.getDicts('sys_user_sex').then((response) => {
sexOptions.value = response.data
})
// proxy.getConfigKey("sys.user.initPassword").then((response) => {
// initPassword.value = response.data;
// });
const userList = ref([])
const open = ref(false)
const loading = ref(true)
@ -284,7 +251,7 @@ const upload = reactive({
// 设置上传的请求头部
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([
@ -317,9 +284,7 @@ const data = reactive({
trigger: 'blur',
},
],
nickName: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
],
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
{
@ -331,8 +296,9 @@ const data = reactive({
],
email: [
{
required: true,
type: 'email',
message: "'请输入正确的邮箱地址",
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
],
@ -348,6 +314,10 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data)
proxy.getConfigKey('sys.user.initPassword').then((response) => {
initPassword.value = response.data
})
/** 通过条件过滤节点 */
const filterNode = (value, data) => {
if (!value) return true
@ -366,13 +336,11 @@ function getTreeselect() {
/** 查询用户列表 */
function getList() {
loading.value = true
listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
(res) => {
loading.value = false
userList.value = res.data.result
total.value = res.data.totalNum
}
)
listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
loading.value = false
userList.value = res.data.result
total.value = res.data.totalNum
})
}
/** 节点单击事件 */
function handleNodeClick(data) {
@ -439,24 +407,6 @@ function handleStatusChange(row) {
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) {
proxy
@ -487,11 +437,6 @@ function handleImport() {
}
/** 下载模板操作 */
function importTemplate() {
// proxy.download(
// "system/user/importTemplate",
// {},
// `user_template_${new Date().getTime()}.xlsx`
// );
proxy.download('/system/user/importTemplate', '用户数据导入模板')
}
/**文件上传中处理 */
@ -503,13 +448,7 @@ const handleFileSuccess = (response, file, fileList) => {
upload.open = false
upload.isUploading = false
proxy.$refs['uploadRef'].clearFiles()
proxy.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
'</div>',
'导入结果',
{ dangerouslyUseHTMLString: true }
)
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
getList()
}
/** 提交上传文件 */
@ -535,7 +474,7 @@ function reset() {
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
sex: '2',
status: '0',
remark: undefined,
postIds: [],
@ -557,7 +496,7 @@ function handleAdd() {
roleOptions.value = response.data.roles
open.value = true
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">
<svg-icon icon-class="peoples" />所属角色
<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>
</li>
<li class="list-group-item">

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

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

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

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

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

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

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

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