DeXun/double-rack
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 流程设计模块更新用户类型

Browse Source
This commit is contained in:
tony
2022-12-13 22:34:34 +08:00
parent e093855bd9
commit e37577f7fb
26 changed files with 2037 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ruoyi-ui/src/components/Process/PropertyPanel.vue
View File

@@ -8,6 +8,7 @@
:modeler="modeler"
:users="users"
:groups="groups"
:exps="exps"
:categorys="categorys"
@dataType="dataType"
/>
@@ -38,6 +39,10 @@ export default {
type: Array,
required: true
},
exps: {
type: Array,
default: () => []
},
modeler: {
type: Object,
required: true

11
ruoyi-ui/src/components/Process/common/parseElement.js
View File

@@ -41,10 +41,19 @@ export function userTaskParse(obj) {
for (const key in obj) {
if (key === 'candidateUsers') {
obj.userType = 'candidateUsers'
obj[key] = obj[key]?.split(',') || []
// if (obj[key].toString().indexOf(",") !== -1) {
//
// }else {
// obj[key] = obj[key].toString()?.split(',') || []
// }
} else if (key === 'candidateGroups') {
obj.userType = 'candidateGroups'
obj[key] = obj[key]?.split(',') || []
// if (obj[key].toString().indexOf(",") !== -1) {
//
// }else {
// obj[key] = obj[key].toString()?.split(',') || []
// }
} else if (key === 'assignee') {
obj.userType = 'assignee'
}

428
ruoyi-ui/src/components/Process/components/nodePanel/task.vue
View File

@@ -16,6 +16,32 @@
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
</el-badge>
</template>
<template #checkSingleUser>
<el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">
<!--指定用户-->
<el-button slot="append" size="mini" icon="el-icon-user" @click="singleUserCheck"></el-button>
<el-divider direction="vertical"></el-divider>
<!--选择表达式-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('assignee')"></el-button>
</el-input>
</template>
<template #checkMultipleUser>
<el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">
<!--候选用户-->
<el-button slot="append" size="mini" icon="el-icon-user" @click="multipleUserCheck"></el-button>
<el-divider direction="vertical"></el-divider>
<!--选择表达式-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('candidateUsers')"></el-button>
</el-input>
</template>
<template #checkRole>
<el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">
<!--候选角色-->
<!-- <el-button slot="append" size="mini" icon="el-icon-user" @click="singleRoleCheck"></el-button>-->
<!-- <el-divider direction="vertical"></el-divider>-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="multipleRoleCheck"></el-button>
</el-input>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
@@ -35,6 +61,48 @@
:modeler="modeler"
@close="finishMultiInstance"
/>
<!--选择人员-->
<el-dialog
title="选择人员"
:visible.sync="userVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-user :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
<span slot="footer" class="dialog-footer">
<el-button @click="userVisible = false">取 消</el-button>
<el-button type="primary" @click="checkUserComplete">确 定</el-button>
</span>
</el-dialog>
<!--选择表达式-->
<el-dialog
title="选择表达式"
:visible.sync="expVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-exp @handleSingleExpSelect="handleSingleExpSelect"></flow-exp>
<span slot="footer" class="dialog-footer">
<el-button @click="expVisible = false">取 消</el-button>
<el-button type="primary" @click="checkExpComplete">确 定</el-button>
</span>
</el-dialog>
<!--选择角色-->
<el-dialog
title="选择候选角色"
:visible.sync="roleVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-role :checkType="checkType" @handleRoleSelect="handleRoleSelect"></flow-role>
<span slot="footer" class="dialog-footer">
<el-button @click="roleVisible = false">取 消</el-button>
<el-button type="primary" @click="checkRoleComplete">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -44,11 +112,19 @@ import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import { commonParse, userTaskParse } from '../../common/parseElement'
import FlowUser from '@/components/flow/User'
import FlowRole from '@/components/flow/Role'
import FlowExp from '@/components/flow/Expression'
import log from "@/views/monitor/job/log";
export default {
components: {
executionListenerDialog,
taskListenerDialog,
multiInstanceDialog
multiInstanceDialog,
FlowUser,
FlowRole,
FlowExp,
},
mixins: [mixinPanel],
props: {
@@ -59,6 +135,10 @@ export default {
groups: {
type: Array,
required: true
},
exps: {
type: Array,
required: true
}
},
data() {
@@ -66,7 +146,7 @@ export default {
userTypeOption: [
{ label: '指定人员', value: 'assignee' },
{ label: '候选人员', value: 'candidateUsers' },
{ label: '候选组', value: 'candidateGroups' }
{ label: '候选角色', value: 'candidateGroups' }
],
dataTypeOption: [
{ label: '固定', value: 'fixed' },
@@ -76,7 +156,23 @@ export default {
executionListenerLength: 0,
taskListenerLength: 0,
hasMultiInstance: false,
formData: {}
userVisible: false,
roleVisible: false,
expVisible: false,
formData: {},
assignee: null,
candidateUsers: "",
candidateGroups: null,
// 选类型
checkType: 'single',
// 选中的值
checkValues: null,
// 用户列表
userList: this.users,
groupList: this.groups,
expList: this.exps,
// 表达式类型
expType: null,
}
},
computed: {
@@ -116,63 +212,65 @@ export default {
{
xType: 'select',
name: 'userType',
label: '人员类型',
label: '用户类型',
dic: _this.userTypeOption,
show: !!_this.showConfig.userType
},
{
xType: 'radio',
name: 'dataType',
label: '指定方式',
dic: _this.dataTypeOption,
show: !!_this.showConfig.dataType,
rules: [{ required: true, message: '请指定方式' }]
},
// {
// xType: 'input',
// name: 'assigneeFixed',
// label: '指定人(表达式)',
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
// xType: 'radio',
// name: 'dataType',
// label: '指定方式',
// dic: _this.dataTypeOption,
// show: !!_this.showConfig.dataType,
// rules: [{ required: true, message: '请指定方式' }]
// },
// {
// xType: 'input',
// name: 'candidateUsersFixed',
// label: '候选人(表达式)',
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
// xType: 'select',
// name: 'assignee',
// label: '指定人员',
// allowCreate: true,
// filterable: true,
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
// show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
// },
// {
// xType: 'input',
// name: 'candidateGroupsFixed',
// label: '候选组(表达式)',
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
// xType: 'select',
// name: 'candidateUsers',
// label: '候选人员',
// multiple: true,
// allowCreate: true,
// filterable: true,
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
// show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
// },
// {
// xType: 'select',
// name: 'candidateGroups',
// label: '候选组',
// multiple: true,
// allowCreate: true,
// filterable: true,
// dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
// show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
// },
{
xType: 'select',
name: 'assignee',
xType: 'slot',
name: 'checkSingleUser',
label: '指定人员',
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
// rules: [{ required: true, message: '指定人员不能为空' }],
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
},
{
xType: 'select',
name: 'candidateUsers',
xType: 'slot',
name: 'checkMultipleUser',
label: '候选人员',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
},
{
xType: 'select',
name: 'candidateGroups',
label: '候选组',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
xType: 'slot',
name: 'checkRole',
label: '候选角色',
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
},
{
@@ -280,50 +378,51 @@ export default {
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
this.updateProperties({'flowable:userType': type})
})
}
},
// 动态选择流程执行人
'formData.dataType': function(val) {
const that = this
this.updateProperties({'flowable:dataType': val})
if (val === 'dynamic') {
this.updateProperties({'flowable:userType': that.formData.userType})
}
// 切换时 删除之前选中的值
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
// 传值到父组件
const params = {
dataType: val,
userType: this.formData.userType
}
this.$emit('dataType', params)
},
'formData.assignee': function(val) {
if (this.formData.userType !== 'assignee') {
delete this.element.businessObject.$attrs[`flowable:assignee`]
return
}
this.updateProperties({'flowable:assignee': val})
},
'formData.candidateUsers': function(val) {
if (this.formData.userType !== 'candidateUsers') {
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
return
}
this.updateProperties({'flowable:candidateUsers': val?.join(',')})
},
'formData.candidateGroups': function(val) {
if (this.formData.userType !== 'candidateGroups') {
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
return
}
this.updateProperties({'flowable:candidateGroups': val?.join(',')})
},
// // 动态选择流程执行人
// 'formData.dataType': function(val) {
// const that = this
// this.updateProperties({'flowable:dataType': val})
// if (val === 'dynamic') {
// this.updateProperties({'flowable:userType': that.formData.userType})
// }
// // 切换时 删除之前选中的值
// const types = ['assignee', 'candidateUsers', 'candidateGroups']
// types.forEach(type => {
// delete this.element.businessObject.$attrs[`flowable:${type}`]
// delete this.formData[type]
// })
// // 传值到父组件
// const params = {
// dataType: val,
// userType: this.formData.userType
// }
// this.$emit('dataType', params)
// },
// 'formData.assignee': function(val) {
// if (this.formData.userType !== 'assignee') {
// delete this.element.businessObject.$attrs[`flowable:assignee`]
// return
// }
// this.updateProperties({'flowable:assignee': val})
// },
// 'formData.candidateUsers': function(val) {
// if (this.formData.userType !== 'candidateUsers') {
// delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
// return
// }
// this.updateProperties({'flowable:candidateUsers': val?.join(',')})
// },
// 'formData.candidateGroups': function(val) {
// if (this.formData.userType !== 'candidateGroups') {
// delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
// return
// }
// this.updateProperties({'flowable:candidateGroups': val?.join(',')})
// },
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': val })
@@ -384,6 +483,7 @@ export default {
this.computedExecutionListenerLength()
this.computedTaskListenerLength()
this.computedHasMultiInstance()
this.getCheckValues()
},
methods: {
computedExecutionListenerLength() {
@@ -401,6 +501,81 @@ export default {
this.hasMultiInstance = false
}
},
// 数据回显
getCheckValues(){
const that = this;
console.log(that.element.businessObject,"this.element.businessObject")
const attrs = that.element.businessObject.$attrs;
const businessObject = that.element.businessObject;
// 指定用户
if (attrs.hasOwnProperty("flowable:assignee")){
const val = attrs["flowable:assignee"];
// 查找是否动态指定人员(选中流程表达式)
if (attrs["flowable:dataType"] === "dynamic"){
this.checkValues = that.expList.find(item => item.id == val).name;
}else {
this.checkValues = that.userList.find(item => item.userId == val).nickName;
}
// 候选用户
} else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
const val = attrs["flowable:candidateUsers"];
if (attrs["flowable:dataType"] === "dynamic") {
this.checkValues = that.expList.find(item => item.id == val).name;
} else {
const array = [];
const vals = val.split(',');
vals.forEach(key => {
const user = that.userList.find(item => item.userId == key)
if (user) {
array.push(user.nickName);
}
})
this.checkValues = array.join(',');
}
// if (val.indexOf(",") !== -1) {
// const vals = val.split(',');
// vals.forEach(key => {
// const user = that.userList.find(item => item.userId == key)
// if (user) {
// array.push(user.nickName);
// }
// })
// this.checkValues = array.join(',');
// }else {
// const user = that.userList.find(item => item.userId == val);
// this.checkValues = user.nickName;
// }
} else if (businessObject.hasOwnProperty("candidateGroups")){
// 候选角色信息
const val = businessObject["candidateGroups"];
if (attrs["flowable:dataType"] === "dynamic") {
this.checkValues = that.expList.find(item => item.id == val).name;
} else {
const array = [];
const vals = val.split(',');
vals.forEach(key => {
const role = that.groupList.find(item => item.roleId == key)
if (role) {
array.push(role.roleName);
}
})
this.checkValues = array.join(',');
}
// if (val.indexOf(",") !== -1) {
// const vals = val.split(',');
// vals.forEach(key => {
// const role = that.groupList.find(item => item.roleId == key)
// if (role) {
// array.push(role.roleName);
// }
// })
// this.checkValues = array.join(',');
// }else {
// const role = that.groupList.find(item => item.roleId == val);
// this.checkValues = role.roleName;
// }
}
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
@@ -418,6 +593,93 @@ export default {
this.computedHasMultiInstance()
}
this.dialogName = ''
},
/*单选人员*/
singleUserCheck(){
this.userVisible = true;
this.checkType = "single";
},
/*多选人员*/
multipleUserCheck(){
this.userVisible = true;
this.checkType = "multiple";
},
/*单选角色*/
singleRoleCheck(){
this.roleVisible = true;
this.checkType = "single";
},
/*多选角色*/
multipleRoleCheck(){
this.roleVisible = true;
this.checkType = "multiple";
},
/*单选表达式*/
singleExpCheck(expType){
this.expVisible = true;
this.expType = expType;
},
// 选中表达式
handleSingleExpSelect(selection){
this.deleteFlowAttar();
console.log(this.element.businessObject,"element.businessObject")
this.updateProperties({'flowable:dataType': 'dynamic'})
if ("assignee" === this.expType){
this.updateProperties({'flowable:assignee': selection.id.toString()});
}else if ("candidateUsers" === this.expType) {
this.updateProperties({'flowable:candidateUsers': selection.id.toString()});
}
this.checkValues = selection.name;
this.expType = null;
},
// 用户选中数据
handleUserSelect(selection) {
console.log(selection,"handleUserSelect")
const that = this;
if (selection) {
that.deleteFlowAttar();
this.updateProperties({'flowable:dataType': 'fixed'})
if (selection instanceof Array){
const userIds = selection.map(item => item.userId);
const nickName = selection.map(item => item.nickName);
that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
that.checkValues = nickName.join(',');
}else {
that.updateProperties({'flowable:assignee': selection.userId})
that.checkValues = selection.nickName;
}
}
},
// 角色选中数据
handleRoleSelect(selection,name) {
const that = this;
if (selection && name) {
that.deleteFlowAttar();
this.updateProperties({'flowable:dataType': 'fixed'})
that.updateProperties({'flowable:candidateGroups': selection});
that.checkValues = name;
}
},
/*用户选中赋值*/
checkUserComplete(){
this.userVisible = false;
this.checkType = "";
},
/*候选角色选中赋值*/
checkRoleComplete(){
this.roleVisible = false;
this.checkType = "";
},
/*表达式选中赋值*/
checkExpComplete(){
this.expVisible = false;
},
// 删除节点
deleteFlowAttar(){
delete this.element.businessObject.$attrs[`flowable:dataType`]
delete this.element.businessObject.$attrs[`flowable:assignee`]
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
}
}
}

6
ruoyi-ui/src/components/Process/index.vue
View File

@@ -41,7 +41,7 @@
<div ref="canvas" class="canvas" />
</el-main>
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" @dataType="dataType" />
</el-aside>
</el-container>
</el-container>
@@ -79,6 +79,10 @@ export default {
type: Array,
default: () => []
},
exps: {
type: Array,
default: () => []
},
isView: {
type: Boolean,
default: false

120
ruoyi-ui/src/components/flow/Expression/index.vue Executable file
View File

@@ -0,0 +1,120 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入表达式名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.sys_common_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="expressionList" @current-change="handleSingleExpSelect">
<el-table-column width="55" align="center" >
<template slot-scope="scope">
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
<el-radio v-model="radioSelected" :label="scope.row.id">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="表达式内容" align="center" prop="expression" />
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page-sizes="[5,10]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/system/expression";
export default {
name: "Expression",
dicts: ['sys_common_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程达式表格数据
expressionList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
expression: null,
status: null,
},
radioSelected:null
};
},
created() {
this.getList();
},
methods: {
/** 查询流程达式列表 */
getList() {
this.loading = true;
listExpression(this.queryParams).then(response => {
this.expressionList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 单选框选中数据
handleSingleExpSelect(selection) {
this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果
// console.log( this.radioSelected ,"handleSingleExpSelect");
this.$emit('handleSingleExpSelect',selection);
},
}
};
</script>

200
ruoyi-ui/src/components/flow/Role/index.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="queryParams.roleName"
placeholder="请输入角色名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-if="selectType === 'multiple'" v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<el-table v-else v-loading="loading" :data="roleList" @current-change="handleSingleRoleSelect">
<el-table-column width="55" align="center" >
<template slot-scope="scope">
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
<el-radio v-model="radioSelected" :label="scope.row.roleId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page-sizes="[5,10]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
export default {
name: "FlowRole",
dicts: ['sys_normal_disable'],
// 接受父组件的值
props: {
checkType: String,
default: 'multiple',
required: false
},
data() {
return {
selectType: this.checkType,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 角色表格数据
roleList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
// 日期范围
dateRange: [],
// 数据范围选项
dataScopeOptions: [
{
value: "1",
label: "全部数据权限"
},
{
value: "2",
label: "自定数据权限"
},
{
value: "3",
label: "本部门数据权限"
},
{
value: "4",
label: "本部门及以下数据权限"
},
{
value: "5",
label: "仅本人数据权限"
}
],
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 5,
roleName: undefined,
roleKey: undefined,
status: undefined
},
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
},
radioSelected:''
};
},
created() {
this.getList();
},
methods: {
/** 查询角色列表 */
getList() {
this.loading = true;
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.roleList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
// 多选框选中数据
handleRoleSelect(selection) {
// this.ids = selection.map(item => item.userId);
this.radioSelected = selection.roleId;//点击当前行时,radio同样有选中效果
console.log(selection,"handleRoleSelect");
this.$emit('handleRoleSelect', selection);
},
// 多选框选中数据
handleMultipleRoleSelect(selection) {
this.ids = selection.map(item => item.roleId);
const nameList = selection.map(item => item.roleName);
console.log( this.ids,"handleRoleSelect");
this.$emit('handleRoleSelect',this.ids.join(','),nameList.join(','));
},
// 单选框选中数据
handleSingleRoleSelect(selection) {
this.radioSelected = selection.roleId;//点击当前行时,radio同样有选中效果
const name = selection.roleName;//点击当前行时,radio同样有选中效果
console.log(this.radioSelected.toString() ,"handleRoleSelect");
this.$emit('handleRoleSelect',this.radioSelected.toString(),name);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.handleQuery();
},
}
};
</script>
<style>
/*隐藏radio展示的label及本身自带的样式*/
.el-radio__label{
display:none;
}
</style>

235
ruoyi-ui/src/components/flow/User/index.vue Normal file
View File

@@ -0,0 +1,235 @@
<template>
<div>
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="6" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<!--用户数据-->
<el-col :span="18" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-if="selectType === 'multiple'" v-loading="loading" :data="userList" @selection-change="handleMultipleUserSelect">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
<el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
</el-table>
<el-table v-else v-loading="loading" :data="userList" @current-change="handleSingleUserSelect">
<el-table-column width="55" align="center" >
<template slot-scope="scope">
<el-radio v-model="radioSelected" :label="scope.row.userId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
<el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page-sizes="[5,10]"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</div>
</template>
<script>
import { listUser, deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "FlowUser",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
// 接受父组件的值
props: {
checkType: String,
default: 'multiple',
required: false
},
data() {
return {
selectType: this.checkType,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 5,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
],
radioSelected:null
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
}
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg;
});
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 多选框选中数据
handleMultipleUserSelect(selection) {
this.$emit('handleUserSelect', selection);
},
// 单选框选中数据
handleSingleUserSelect(selection) {
this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果
this.$emit('handleUserSelect', selection.toString());
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
}
};
</script>
<style>
/*隐藏radio展示的label及本身自带的样式*/
.el-radio__label{
display:none;
}
</style>