clay
/
workflow-engine-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

master #33

Merged
clay merged 4 commits from master into pro 2023-03-03 18:06:36 +00:00
Conversation 0 Commits 4 Files Changed 18 +163 -145
3 changed files with 163 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b271979372 - Show all commits

112
flowable-engine-web/src/components/common/Test.vue
View File

@ -15,17 +15,14 @@
</div> </div>
<!-- 人员选择 --> <!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/> <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:350px"> <el-scrollbar style="height:317px">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value" <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" :default-expanded-keys="expandedKeys"
:show-checkbox="showCheckbox"
@check-change="handleCheckChange"
@node-click="handleChange" @node-click="handleChange"
:filter-node-method="filterNode" :filter-node-method="filterNode"
check-strictly
> >
<div class="custom-tree-node" slot-scope="{ node,data }"> <div class="tree-node" slot-scope="{ node,data }">
<div v-if="data.type === 0" :style="'height:'+(data.type === 0 ?'50px':'0px')"> <div v-if="data.type === 0" style="display: flex;align-items: center">
<el-avatar :src="data.avatar"></el-avatar> <el-avatar :src="data.avatar"></el-avatar>
{{ node.label }} {{ node.label }}
</div> </div>
@ -50,8 +47,9 @@
<div class="org-items" style="height: 350px;"> <div class="org-items" style="height: 350px;">
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/> <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item"> <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
<el-avatar :src="selectItem.avatar"></el-avatar> <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>
{{ selectItem.name }} {{ selectItem.name }}
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
</div> </div>
</div> </div>
</div> </div>
@ -64,7 +62,7 @@
import {getUserTree} from "@/api/org"; import {getUserTree} from "@/api/org";
export default { export default {
name: "departmentPicker", name: "Test",
props: { props: {
value: { value: {
type: Array, type: Array,
@ -109,9 +107,6 @@ export default {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
created() {
this.getList();
},
computed: { computed: {
_value: { _value: {
get() { get() {
@ -132,15 +127,14 @@ export default {
}, },
getList() { getList() {
getUserTree(this.radio, this.chooseId).then(res => { getUserTree(this.radio, this.chooseId).then(res => {
if (this.selectItem.type === -1 || this.selectItem.type === -2) { if (res.data) {
this.dataList = this.setData(res.data) if (this.selectItem.type === -1 || this.selectItem.type === -2) {
console.log('--111--2', res.data) this.dataList = this.setData(res.data)
} else if (this.selectItem.type === 1) { } else if (this.selectItem.type === 1) {
this.selectItem.children = res.data this.selectItem.children = res.data
console.log('111', res.data) } else if (this.selectItem.type === 2) {
} else if (this.selectItem.type === 2) { this.selectItem.children = this.setData(res.data)
console.log('222', res.data) }
this.selectItem.children = this.setData(res.data)
} }
}); });
}, },
@ -158,66 +152,44 @@ export default {
}, },
//用于用户选择 //用于用户选择
showUserPicker() { showUserPicker() {
this.getList();
this.visible = true; this.visible = true;
}, },
//渲染子节点用户或部门及用户数据 //渲染子节点用户或部门及用户数据
handleChange(item) { handleChange(item, check) {
this.selectItem = item this.selectItem = item
this.expandedKeys.push(item.value) this.expandedKeys.push(item.value)
if (item.type !== 0) { if (item.type !== 0) {
this.chooseId = item.id this.chooseId = item.id
this.getList() this.getList()
} }
}, if (!item.children) {
/**
* 选中用户
* @param data 选择的每个节点item
* @param checked 是否选中
*/
handleCheckChange(data, checked) {
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) { if (this.multiple) {
// console.log('左侧有选择框 + 多选')
// //不添加重复的数据到右边
// for (let i = 0; i < this.selectList.length; i++) {
// if (this.selectList[i].value === data.value) {
// this.selectList.splice(i, 1);
// break;
// }
// }
// if (checked) {
// // if (data.children === undefined) {
// this.selectList.push(data);
// // }
// } else if (data === '1') {
// this.$refs.tree.setCheckedKeys([]);
// this.selectList = [];
// }
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边 //不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) { for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].id === data.id) { if (this.selectList[i].id === item.id) {
this.selectList.splice(i, 1); this.selectList.splice(i, 1);
break; break;
} }
} }
if (checked) { this.selectList.push(item);
console.log('this.$refs.tree',this.$refs.tree) console.log('多选this.selectList', this.selectList);
// if(data.type==0){ } else {
this.$refs.tree.setCheckedNodes([data]); this.selectList = [item];
this.selectList = [data];
// }
} else if (data === "1") {
this.selectList = [];
this.$refs.tree.setCheckedKeys([]);
}
} }
} }
this._value = this.selectList this._value = this.selectList
}, },
//右侧的×
noSelected(selectItem) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === selectItem.value) {
this.selectList.splice(i, 1);
break;
}
}
selectItem.selected = false;
},
//清空 //清空
clearSelected() { clearSelected() {
this.$confirm("您确定要清空已选中的项?", "提示", { this.$confirm("您确定要清空已选中的项?", "提示", {
@ -225,7 +197,7 @@ export default {
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(() => { }).then(() => {
this.handleCheckChange("1"); this.selectList = []
}); });
}, },
//确定按钮 //确定按钮
@ -239,6 +211,24 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@containWidth: 278px; @containWidth: 278px;
/deep/ .el-tree-node {
.el-tree-node__children {
.el-tree-node__content {
height: 42px;
}
}
}
.tree-node {
div {
.el-avatar {
width: 40px;
height: 40px;
margin-right: 5px;
}
}
}
/deep/ .el-tree-node { /deep/ .el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner { .is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block; display: inline-block;

112
flowable-engine-web/src/components/common/UserPicker.vue
View File

@ -15,17 +15,14 @@
</div> </div>
<!-- 人员选择 --> <!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/> <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:350px"> <el-scrollbar style="height:317px">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value" <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" :default-expanded-keys="expandedKeys"
:show-checkbox="showCheckbox"
@check-change="handleCheckChange"
@node-click="handleChange" @node-click="handleChange"
:filter-node-method="filterNode" :filter-node-method="filterNode"
check-strictly
> >
<div class="custom-tree-node" slot-scope="{ node,data }"> <div class="tree-node" slot-scope="{ node,data }">
<div v-if="data.type === 0" :style="'height:'+(data.type === 0 ?'50px':'0px')"> <div v-if="data.type === 0" style="display: flex;align-items: center">
<el-avatar :src="data.avatar"></el-avatar> <el-avatar :src="data.avatar"></el-avatar>
{{ node.label }} {{ node.label }}
</div> </div>
@ -50,8 +47,9 @@
<div class="org-items" style="height: 350px;"> <div class="org-items" style="height: 350px;">
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/> <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item"> <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
<el-avatar :src="selectItem.avatar"></el-avatar> <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>
{{ selectItem.name }} {{ selectItem.name }}
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
</div> </div>
</div> </div>
</div> </div>
@ -62,6 +60,7 @@
<script> <script>
import {getUserTree} from "@/api/org"; import {getUserTree} from "@/api/org";
export default { export default {
name: "UserPicker", name: "UserPicker",
props: { props: {
@ -108,9 +107,6 @@ export default {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
created() {
this.getList();
},
computed: { computed: {
_value: { _value: {
get() { get() {
@ -131,15 +127,14 @@ export default {
}, },
getList() { getList() {
getUserTree(this.radio, this.chooseId).then(res => { getUserTree(this.radio, this.chooseId).then(res => {
if (this.selectItem.type === -1 || this.selectItem.type === -2) { if (res.data) {
this.dataList = this.setData(res.data) if (this.selectItem.type === -1 || this.selectItem.type === -2) {
console.log('--111--2', res.data) this.dataList = this.setData(res.data)
} else if (this.selectItem.type === 1) { } else if (this.selectItem.type === 1) {
this.selectItem.children = res.data this.selectItem.children = res.data
console.log('111', res.data) } else if (this.selectItem.type === 2) {
} else if (this.selectItem.type === 2) { this.selectItem.children = this.setData(res.data)
console.log('222', res.data) }
this.selectItem.children = this.setData(res.data)
} }
}); });
}, },
@ -157,66 +152,43 @@ export default {
}, },
//用于用户选择 //用于用户选择
showUserPicker() { showUserPicker() {
this.getList();
this.visible = true; this.visible = true;
}, },
//渲染子节点用户或部门及用户数据 //渲染子节点用户或部门及用户数据
handleChange(item) { handleChange(item, check) {
this.selectItem = item this.selectItem = item
this.expandedKeys.push(item.value) this.expandedKeys.push(item.value)
if (item.type !== 0) { if (item.type !== 0) {
this.chooseId = item.id this.chooseId = item.id
this.getList() this.getList()
} }
}, if (!item.children) {
/**
* 选中用户
* @param data 选择的每个节点item
* @param checked 是否选中
*/
handleCheckChange(data, checked) {
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) { if (this.multiple) {
// console.log('左侧有选择框 + 多选')
//不添加重复的数据到右边 //不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) { for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) { if (this.selectList[i].id === item.id) {
this.selectList.splice(i, 1); this.selectList.splice(i, 1);
break; break;
} }
} }
if (checked) { this.selectList.push(item);
// if (data.children === undefined) { } else {
this.selectList.push(data); this.selectList = [item];
// }
} else if (data === '1') {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
}
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].id === data.id) {
this.selectList.splice(i, 1);
break;
}
}
if (checked) {
console.log('this.$refs.tree',this.$refs.tree)
// if(data.type==0){
this.$refs.tree.setCheckedNodes([data]);
this.selectList = [data];
// }
} else if (data === "1") {
this.selectList = [];
this.$refs.tree.setCheckedKeys([]);
}
} }
} }
this._value = this.selectList // this._value = this.selectList
},
//右侧的×
noSelected(selectItem) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === selectItem.value) {
this.selectList.splice(i, 1);
break;
}
}
selectItem.selected = false;
}, },
//清空 //清空
clearSelected() { clearSelected() {
this.$confirm("您确定要清空已选中的项?", "提示", { this.$confirm("您确定要清空已选中的项?", "提示", {
@ -224,7 +196,7 @@ export default {
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(() => { }).then(() => {
this.handleCheckChange("1"); this.selectList = []
}); });
}, },
//确定按钮 //确定按钮
@ -238,6 +210,24 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@containWidth: 278px; @containWidth: 278px;
/deep/ .el-tree-node {
.el-tree-node__children {
.el-tree-node__content {
height: 42px;
}
}
}
.tree-node {
div {
.el-avatar {
width: 40px;
height: 40px;
margin-right: 5px;
}
}
}
/deep/ .el-tree-node { /deep/ .el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner { .is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block; display: inline-block;

84
flowable-engine-web/src/views/common/form/components/UserPicker.vue
View File

@ -2,44 +2,50 @@
<div style="max-width: 350px"> <div style="max-width: 350px">
<template v-if="mode === 'DESIGN'"> <template v-if="mode === 'DESIGN'">
<el-button disabled icon="el-icon-user" type="primary" size="mini" round>选择人员</el-button> <el-button disabled icon="el-icon-user" type="primary" size="mini" round>选择人员</el-button>
<span class="placeholder"> {{placeholder}}</span> <span class="placeholder"> {{ placeholder }}</span>
</template> </template>
<template v-else> <template v-else>
<template v-if="perm === 'E'"> <template v-if="perm === 'E'">
<el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button> <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">
选择人员
</el-button>
<user-select type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/> <user-select type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
<span class="placeholder"> {{placeholder}}</span> <span class="placeholder"> {{ placeholder }}</span>
<div style="margin-top: 5px;display: flex;flex-direction: column;position:relative;" v-for="(user, i) in _value" :key="i"> <div style="display: flex;">
<!-- <el-tag closable @close="delDept(i)">--> <div class="userStyle" v-for="(user, i) in _value" :key="i">
<span style="position:absolute;right: 0">×</span> <span @click="delDept(i)">×</span>
<el-avatar :src="user.avatar"/> <el-avatar :src="user.avatar"/>
<span>{{user.name}}</span> <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
<span>{{ user.name }}</span>
</el-tooltip>
</div>
</div> </div>
</template> </template>
<template v-else-if="perm === 'R'"> <template v-else-if="perm === 'R'">
<div v-for="(user, i) in _value" :key="i"> <div style="display: flex;">
<el-avatar :src="user.avatar"/> <div v-for="(user, i) in _value" :key="i" class="view_user">
{{user.label}} <el-avatar :src="user.avatar"/>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<span>{{ user.name }}</span>
</el-tooltip>
</div>
</div> </div>
</template> </template>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import componentMinxins from '../ComponentMinxins' import componentMinxins from '../ComponentMinxins'
import UserSelect from "@/components/common/UserPicker"; import UserSelect from "@/components/common/UserPicker";
export default { export default {
mixins: [componentMinxins], mixins: [componentMinxins],
name: "UserPicker", name: "UserPicker",
components: {UserSelect}, components: {UserSelect},
props: { props: {
value:{ value: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
@ -53,7 +59,7 @@ export default {
type: String, type: String,
default: '请选择人员' default: '请选择人员'
}, },
multiple:{ multiple: {
type: Boolean, type: Boolean,
default: false default: false
} }
@ -63,26 +69,58 @@ export default {
showPickerSelect: false showPickerSelect: false
} }
}, },
created() {
console.log(this.mode,"sdjhsjdhsjd1111111111111111")
},
methods: { methods: {
selected(values){ selected(values) {
console.log(values,"sdjhsjdhjshd888888888888")
this.showPickerSelect = false this.showPickerSelect = false
this._value = values this._value = values
}, },
delDept(i){ delDept(i) {
this._value.splice(i, 1) this._value.splice(i, 1)
} }
} }
} }
</script> </script>
<style scoped> <style scoped lang="less">
.placeholder{ .placeholder {
margin-left: 10px; margin-left: 10px;
color: #adabab; color: #adabab;
font-size: smaller; font-size: smaller;
} }
.userStyle {
width: 45px;
margin-top: 10px;
display: flex;
flex-direction: column;
position: relative;
margin-right: 10px;
span:first-child {
position: absolute;
right: -3px;
top: -11px;
cursor: pointer;
}
span:last-child {
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
}
.view_user {
width: 45px;
display: flex;
flex-direction: column;
margin-right: 10px;
span {
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
}
</style> </style>