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

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

@ -15,17 +15,14 @@
</div>
<!-- 人员选择 -->
<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"
:default-expanded-keys="expandedKeys"
:show-checkbox="showCheckbox"
@check-change="handleCheckChange"
@node-click="handleChange"
:filter-node-method="filterNode"
check-strictly
>
<div class="custom-tree-node" slot-scope="{ node,data }">
<div v-if="data.type === 0" :style="'height:'+(data.type === 0 ?'50px':'0px')">
<div class="tree-node" slot-scope="{ node,data }">
<div v-if="data.type === 0" style="display: flex;align-items: center">
<el-avatar :src="data.avatar"></el-avatar>
{{ node.label }}
</div>
@ -50,8 +47,9 @@
<div class="org-items" style="height: 350px;">
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<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 }}
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
</div>
</div>
</div>
@ -62,6 +60,7 @@
<script>
import {getUserTree} from "@/api/org";
export default {
name: "UserPicker",
props: {
@ -108,9 +107,6 @@ export default {
this.$refs.tree.filter(val);
}
},
created() {
this.getList();
},
computed: {
_value: {
get() {
@ -131,15 +127,14 @@ export default {
},
getList() {
getUserTree(this.radio, this.chooseId).then(res => {
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
this.dataList = this.setData(res.data)
console.log('--111--2', res.data)
} else if (this.selectItem.type === 1) {
this.selectItem.children = res.data
console.log('111', res.data)
} else if (this.selectItem.type === 2) {
console.log('222', res.data)
this.selectItem.children = this.setData(res.data)
if (res.data) {
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
this.dataList = this.setData(res.data)
} else if (this.selectItem.type === 1) {
this.selectItem.children = res.data
} else if (this.selectItem.type === 2) {
this.selectItem.children = this.setData(res.data)
}
}
});
},
@ -157,66 +152,43 @@ export default {
},
//用于用户选择
showUserPicker() {
this.getList();
this.visible = true;
},
//渲染子节点用户或部门及用户数据
handleChange(item) {
handleChange(item, check) {
this.selectItem = item
this.expandedKeys.push(item.value)
if (item.type !== 0) {
this.chooseId = item.id
this.getList()
}
},
/**
* 选中用户
* @param data 选择的每个节点item
* @param checked 是否选中
*/
handleCheckChange(data, checked) {
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (!item.children) {
if (this.multiple) {
// console.log('左侧有选择框 + 多选')
//不添加重复的数据到右边
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);
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++) {
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.selectList.push(item);
} else {
this.selectList = [item];
}
}
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() {
this.$confirm("您确定要清空已选中的项?", "提示", {
@ -224,7 +196,7 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.handleCheckChange("1");
this.selectList = []
});
},
//确定按钮
@ -238,6 +210,24 @@ export default {
<style lang="less" scoped>
@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 {
.is-leaf + .el-checkbox .el-checkbox__inner {
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">
<template v-if="mode === 'DESIGN'">
<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 v-else>
<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"/>
<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">
<!-- <el-tag closable @close="delDept(i)">-->
<span style="position:absolute;right: 0">×</span>
<span class="placeholder"> {{ placeholder }}</span>
<div style="display: flex;">
<div class="userStyle" v-for="(user, i) in _value" :key="i">
<span @click="delDept(i)">×</span>
<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>
</template>
<template v-else-if="perm === 'R'">
<div v-for="(user, i) in _value" :key="i">
<el-avatar :src="user.avatar"/>
{{user.label}}
<div style="display: flex;">
<div v-for="(user, i) in _value" :key="i" class="view_user">
<el-avatar :src="user.avatar"/>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<span>{{ user.name }}</span>
</el-tooltip>
</div>
</div>
</template>
</template>
</div>
</template>
<script>
import componentMinxins from '../ComponentMinxins'
import UserSelect from "@/components/common/UserPicker";
export default {
mixins: [componentMinxins],
name: "UserPicker",
components: {UserSelect},
props: {
value:{
value: {
type: Array,
default: () => {
return []
@ -53,7 +59,7 @@ export default {
type: String,
default: '请选择人员'
},
multiple:{
multiple: {
type: Boolean,
default: false
}
@ -63,26 +69,58 @@ export default {
showPickerSelect: false
}
},
created() {
console.log(this.mode,"sdjhsjdhsjd1111111111111111")
},
methods: {
selected(values){
console.log(values,"sdjhsjdhjshd888888888888")
selected(values) {
this.showPickerSelect = false
this._value = values
},
delDept(i){
delDept(i) {
this._value.splice(i, 1)
}
}
}
</script>
<style scoped>
.placeholder{
<style scoped lang="less">
.placeholder {
margin-left: 10px;
color: #adabab;
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>