hxd/zky_mandate_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 用户选择器，页面细节完善

Browse Source
This commit is contained in:
yxh 2024-01-29 15:30:54 +08:00
parent 2e67b8c04f
commit f5d11f2c3c
11 changed files with 475 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/system/user/index.ts
View File

@ -1,5 +1,16 @@
import request from '/@/utils/request';
// 根据ids 获取用户列表信息
export function getUserByIds(query:Object) {
return request({
url: '/api/v1/system/user/getUserByIds',
method: 'get',
params:query
})
}
export function getUserList(query:Object) {
return request({
url: '/api/v1/system/user/list',
@ -8,6 +19,14 @@ export function getUserList(query:Object) {
})
}
export function getUserSelector(query:Object) {
return request({
url: '/api/v1/system/user/selector',
method: 'get',
params:query
})
}
export function getDeptTree() {
return request({
url: '/api/v1/system/dept/treeSelect',

158
src/components/selectUser/component/userList.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<el-row :gutter="10" style="width: 100%;" v-if="multiple">
<el-col :span="6">
<el-form-item>
<el-button size="default" type="success" class="ml10" @click="confirmUser">确定选取</el-button>
</el-form-item>
</el-col>
</el-row>
<div class="system-user-list-container" style="min-height: 600px;">
<el-table :data="tableData.data" style="width: 100%" v-if="!multiple">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userNickname" label="姓名" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100" >
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenSelectUser(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<el-table ref="tableMultipleRef" :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-else>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userNickname" label="姓名" show-overflow-tooltip></el-table-column>
</el-table>
<pagination
v-show="tableData.total>0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="setUserList"
/>
</div>
</template>
<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import {getUserSelector} from '/@/api/system/user/index';
interface TableDataState {
ids:number[];
userItem:any[];
deptProps:{};
tableData: {
data: any[];
total: number;
loading: boolean;
param: TableParam;
};
}
interface TableParam {
pageNum: number;
pageSize: number;
deptId:string;
roleId:number | undefined;
mobile:string;
status:string;
keyWords:string;
dateRange: string[];
}
export default defineComponent({
name: 'systemUserList',
props:{
deptData:{
type:Array,
default:()=>[]
},
param:{
type:Object,
default:()=>{}
},
genderData:{
type:Array,
default:()=>[]
},
multiple:{
type:Boolean,
default:false
}
},
emits:['ok'],
components: { },
setup(prop,{emit}) {
const {proxy,props} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const tableMultipleRef = ref();
const state = reactive<TableDataState>({
ids:[],
userItem:[],
deptProps:{
id:"deptId",
children: "children",
label: "deptName"
},
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
roleId:undefined,
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
},
});
const setUserList = ()=>{
const param = {...state.tableData.param, ...props.param};
getUserSelector(param).then((res:any)=>{
state.tableData.data = res.data.userList??[];
state.tableData.total = res.data.total;
toggleSelection()
});
};
const toggleSelection = (rows?: any) => {
if (rows) {
rows.forEach((row) => {
tableMultipleRef.value!.toggleRowSelection(row, undefined)
})
} else {
tableMultipleRef.value!.clearSelection()
}
}
const confirmUser = () => {
let userItem:any[] = [];
userItem = state.userItem
if(userItem.length===0){
ElMessage.error('请勾选用户');
return
}else{
emit("ok",userItem);
}
};
// 多选框选中数据
const handleSelectionChange = (selection:any[])=> {
state.ids = selection.map(item => item.id)
state.userItem = selection.map(item => item)
};
const onOpenSelectUser = (row:any) => {
emit("ok",row);
}
return {
sys_user_sex,
setUserList,
handleSelectionChange,
onOpenSelectUser,
confirmUser,
tableMultipleRef,
...toRefs(state),
};
},
});
</script>

185
src/components/selectUser/index.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div>
<el-dialog title="选择用户" v-model="visible" width="60%" top="5vh" append-to-body :close-on-click-modal="false">
<div class="system-user-container">
<el-row :gutter="10" style="width: 100%;">
<el-col :span="6">
<el-card shadow="hover">
<el-aside>
<el-scrollbar>
<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable style="width: 80%;"/>
<el-tree
ref="treeRef"
class="filter-tree"
:data="deptData"
:props="deptProps"
default-expand-all
:filter-node-method="deptFilterNode"
@node-click="handleNodeClick"
/>
</el-scrollbar>
</el-aside>
</el-card>
</el-col>
<el-col :span="18">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :model="param" ref="queryRef" :inline="true" label-width="68px">
<el-form-item label="关键字" prop="keyWords">
<el-input
v-model="param.keyWords"
placeholder="请输入姓名"
clearable
style="width: 240px"
@keyup.enter.native="getUserList"
/>
</el-form-item>
<el-form-item label="创建时间" prop="dateRange">
<el-date-picker
v-model="param.dateRange"
style="width: 240px"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="getUserList">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" @click="resetQuery(queryRef)">
<el-icon>
<ele-Refresh />
</el-icon>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<UserList ref="userListRef" :dept-data="deptData" :gender-data="sys_user_sex" :param="param" :multiple="multiple" @ok="handleSelectUserOk"/>
</el-card>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
</template>
<script lang="ts">
import {toRefs, reactive, ref, defineComponent, watch, getCurrentInstance, nextTick} from 'vue';
import {ElTree,FormInstance} from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import UserList from './component/userList.vue';
import {getDeptTree} from '/@/api/system/user/index';
interface QueryParam {
ids:number[];
deptProps:{};
deptData:any[];
param: {
deptId:string;
mobile:string;
status:string;
keyWords:string;
dateRange: string[];
};
}
export default defineComponent({
name: 'systemUser',
components: { UserList },
props:{
multiple:{
type:Boolean,
default:false
}
},
emits:['selectUser'],
setup(prop,{emit}) {
const visible = ref(false)
const {proxy} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const userListRef = ref();
const queryRef = ref();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const search = Search
const state = reactive<QueryParam>({
ids:[],
deptProps:{
id:"deptId",
children: "children",
label: "deptName"
},
deptData:[],
param: {
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
});
const getUserList = ()=>{
userListRef.value.setUserList();
};
// 初始化表格数据
const initTableData = () => {
getDeptTree().then((res:any)=>{
state.deptData = res.data.deps
})
getUserList()
};
watch(filterText, (val) => {
treeRef.value!.filter(val)
});
const deptFilterNode = (value: string, data:any) => {
if (!value) return true;
return data.deptName.includes(value)
};
// 节点单击事件
const handleNodeClick = (data:any) => {
state.param.deptId = data.deptId;
getUserList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
getUserList()
};
const openDialog = ()=>{
visible.value = true
nextTick(()=>{
initTableData();
})
}
const handleSelectUserOk = (row:any)=>{
visible.value = false;
emit("selectUser",row);
}
return {
visible,
queryRef,
userListRef,
deptFilterNode,
filterText,
treeRef,
search,
sys_user_sex,
openDialog,
getUserList,
handleSelectUserOk,
handleNodeClick,
resetQuery,
...toRefs(state),
};
},
});
</script>

8
src/layout/navBars/breadcrumb/userNews.vue
View File

@ -28,9 +28,7 @@
<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
</div>
<div class="foot-box" v-if="noticeList.length > 0">
<!-- <el-button @click="hendleClear('公告')" size="80">清空</el-button>-->
<!-- <el-button @click="hendleAllread('公告')" size="80">全部已读</el-button>-->
<el-button @click="hendleShowMore()" size="80">查看更多</el-button>
<el-button @click="hendleShowMore()" size="small">查看更多</el-button>
</div>
</div>
@ -65,9 +63,7 @@
<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
</div>
<div class="foot-box" v-if="noticeList.length > 0">
<!-- <el-button @click="hendleClear('通知')" size="80">清空</el-button>-->
<!-- <el-button @click="hendleAllread('通知')" size="80">全部已读</el-button>-->
<el-button @click="hendleShowMore()" size="80">查看更多</el-button>
<el-button @click="hendleShowMore()" size="small">查看更多</el-button>
</div>
</div>
</el-tab-pane>

1
src/theme/app.scss
View File

@ -4,7 +4,6 @@
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none !important;
}
:root {

19
src/theme/element.scss
View File

@ -27,25 +27,6 @@
max-height: 280px !important;
}
/* Form 表单
------------------------------- */
.el-form {
// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
.el-form-item:last-of-type {
margin-bottom: 0 !important;
}
// 修复行内表单最后一个 el-form-item 位置下移问题
&.el-form--inline {
.el-form-item--large.el-form-item:last-of-type {
margin-bottom: 22px !important;
}
.el-form-item--default.el-form-item:last-of-type,
.el-form-item--small.el-form-item:last-of-type {
margin-bottom: 18px !important;
}
}
}
/* Alert 警告
------------------------------- */
.el-alert {

85
src/views/system/dept/component/editDept.vue
View File

@ -3,7 +3,7 @@
<el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="上级部门">
<el-cascader
:options="deptData"
@ -20,32 +20,40 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="负责人">
<el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
<div v-if="deptUser.length > 0">
<el-tag closable :disable-transitions="false" class="u-m-r-10" v-for="(item,index) in deptUser" :key="index" @close="handleClose(item,index)" >{{item.userNickname}}</el-tag>
</div>
<!-- <el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>-->
<el-button
style="padding-left: 10px;"
type="primary"
link
@click="handleSelectUser" >请选择</el-button>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="手机号">
<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="邮箱">
<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="排序">
<el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="部门状态">
<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
@ -60,12 +68,15 @@
</template>
</el-dialog>
</div>
<select-user ref="selectUserRef" @selectUser="confirmUser" :multiple="true"></select-user>
</template>
<script lang="ts">
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
import {addDept,editDept, getDeptList} from "/@/api/system/dept";
import {getUserByIds} from '/@/api/system/user/index';
import {ElMessage} from "element-plus";
import selectUser from "/@/components/selectUser/index.vue"
// 定义接口来定义对象的类型
interface TableDataRow {
@ -79,7 +90,7 @@ interface RuleFormState {
parentId: number;
deptName: string;
orderNum: number;
leader: string;
leader: any[];
phone: string | number;
email: string;
status: number;
@ -93,9 +104,15 @@ interface DeptSate {
export default defineComponent({
name: 'systemEditDept',
components:{
selectUser,
},
emits:['deptList'],
setup(prop,{emit}) {
const {proxy} = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const selectUserRef = ref();
const deptUser = ref([]);
const state = reactive<DeptSate>({
isShowDialog: false,
ruleForm: {
@ -103,7 +120,7 @@ export default defineComponent({
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: '',
leader: [],
phone: '',
email: '',
status: 1,
@ -123,8 +140,24 @@ export default defineComponent({
});
if(row && typeof row === "object"){
state.ruleForm = row;
let leaders = row.leader
if (leaders.length > 0){
//获取部门负责人信息
getUserByIds({ids:leaders}).then((res:any)=>{
if(res.code === 0){
deptUser.value = res.data.userList;
}
});
}else{
//清空 deptUser, 避免缓存影响
deptUser.value = [];
}
}else if(row && typeof row === 'number'){
state.ruleForm.parentId = row
deptUser.value = [];
}else{
deptUser.value = [];
}
state.isShowDialog = true;
};
@ -166,20 +199,50 @@ export default defineComponent({
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: '',
leader: [],
phone: '',
email: '',
status: 1,
}
};
const handleClose = (data:any,key:number) => {
deptUser.value.splice(key, 1);
state.ruleForm.leader = deptUser.value.map(item => item.id)
};
const confirmUser = (data:any[]) => {
let leaderArr = state.ruleForm.leader;
data.map(function (item) {
// 若存在某个用户 则不添加
if (!leaderArr.includes(item.id)){
deptUser.value.push(item)
leaderArr.push(item.id)
}
});
state.ruleForm.leader = leaderArr;
};
//选择用户
const handleSelectUser = () =>{
selectUserRef.value.openDialog()
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
selectUserRef,
formRef,
deptUser,
confirmUser,
handleClose,
handleSelectUser,
...toRefs(state),
};
},
});
</script>
<style>
.u-m-r-10{
margin-right: 8px;
}
</style>

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

@ -68,6 +68,7 @@ interface TableDataRow {
deptId:number;
parentId:number;
deptName:string;
leader:[];
status:number;
orderNum:number;
createdAt:string;
@ -115,6 +116,7 @@ export default defineComponent({
};
// 打开新增菜单弹窗
const onOpenAddDept = (row?: TableDataRow) => {
editDeptRef.value.openDialog(row?.deptId);
};
// 打开编辑菜单弹窗

32
src/views/system/menu/component/editMenu.vue
View File

@ -5,7 +5,7 @@
<el-form :model="ruleForm" :rules="rules"
ref="ruleFormRef" size="default" label-width="80px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="上级菜单">
<el-cascader
:options="menuData"
@ -22,7 +22,7 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="菜单类型" prop="menuType">
<el-radio-group v-model="ruleForm.menuType">
<el-radio label="0">目录</el-radio>
@ -31,58 +31,58 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model="ruleForm.menuName" placeholder="请填写菜单名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="接口规则" prop="name">
<el-input v-model="ruleForm.name" placeholder="后端 aip 地址" clearable></el-input>
</el-form-item>
</el-col>
<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="路由路径" prop="path">
<el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="重定向">
<el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="菜单图标">
<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" type="all" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="组件路径" prop="component">
<el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="链接地址">
<el-input v-model="ruleForm.linkUrl" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="ruleForm.isLink===0">
</el-input>
</el-form-item>
</el-col>
</template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="权限标识">
<el-select v-model="ruleForm.roles" multiple placeholder="选择角色" clearable class="w100">
<el-option v-for="role in roles" :key="'role_'+role.id" :label="role.name" :value="role.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="菜单排序">
<el-input-number v-model="ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<template v-if="ruleForm.menuType === '0'||ruleForm.menuType === '1'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否隐藏">
<el-radio-group v-model="ruleForm.isHide">
<el-radio
@ -93,7 +93,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="页面缓存">
<el-radio-group v-model="ruleForm.isKeepAlive">
<el-radio :label="1">缓存</el-radio>
@ -101,7 +101,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否固定">
<el-radio-group v-model="ruleForm.isAffix">
<el-radio :label="1">固定</el-radio>
@ -109,7 +109,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否外链">
<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
<el-radio :label="1">是</el-radio>
@ -117,7 +117,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否内嵌">
<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
<el-radio :label="1">是</el-radio>

14
src/views/system/role/component/editRole.vue
View File

@ -3,7 +3,7 @@
<el-dialog :title="(formData.id===0?'添加':'修改')+'角色'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="上级角色">
<el-cascader
:options="roleData"
@ -20,27 +20,27 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="排序">
<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="角色状态">
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="角色描述">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="菜单权限">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@ -48,7 +48,7 @@
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-tree
:data="menuData"
ref="menuRef"

22
src/views/system/user/component/editUser.vue
View File

@ -3,22 +3,22 @@
<el-dialog :title="(ruleForm.userId!==0?'修改':'添加')+'用户'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.userId===0">
<el-form-item label="用户名" prop="userName">
<el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="ruleForm.userId===0">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.userId===0">
<el-form-item label="账户密码" prop="password">
<el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="关联角色" prop="roleIds">
<el-cascader
:options="roleList"
@ -35,7 +35,7 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="部门" prop="deptId">
<el-cascader
:options="deptData"
@ -52,17 +52,17 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="手机号" prop="mobile">
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="性别" prop="sex">
<el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
<el-option
@ -73,7 +73,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="岗位" prop="postIds">
<el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
<el-option
@ -85,7 +85,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="用户状态">
<el-switch v-model="ruleForm.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
@ -102,7 +102,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="用户描述">
<el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
</el-form-item>