1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| <template>
| <members-dep
| :popover-display="'block'"
| :dep-checked-data="dataStrucs"
| :user-checked-data="dataUsers"
| @popoverSubmit="popoverSubmit">
| <div slot="membersDep">
| <flexbox
| wrap="wrap"
| class="structure-container">
| <div
| v-for="(item, index) in dataUsers"
| :key="'user'+index"
| class="user-item">{{ item.name ? item.name : item.realname }}
| </div>
| <div
| v-for="(item, index) in dataStrucs"
| :key="'struc'+index"
| class="user-item">{{ item.name }}
| </div>
| <div class="add-item">+添加</div>
| </flexbox>
| </div>
| </members-dep>
|
| </template>
| <script type="text/javascript">
| import membersDep from '@/components/selectEmployee/membersDep'
|
| export default {
| name: 'XhStrucUserCell', // 新建 struc-user-cell
| components: {
| membersDep
| },
| props: {
| // 员工和 部门
| users: {
| type: Array,
| default: () => {
| return []
| }
| },
| strucs: {
| type: Array,
| default: () => {
| return []
| }
| },
| value: {
| type: Object,
| default: () => {
| return {
| users: [],
| strucs: []
| }
| }
| },
| /** 索引值 用于更新数据 */
| index: Number,
| /** 包含数据源 */
| item: Object
| },
| data () {
| return {
| dataUsers: [], // 关联的时候展示name 编辑的时候展示realname
| dataStrucs: []
| }
| },
| computed: {},
| watch: {
| value: function (val) {
| this.dataUsers = val.users
| this.dataStrucs = val.strucs
| },
| users: function (val) {
| this.dataUsers = val
| },
| strucs: function (val) {
| this.dataStrucs = val
| }
| },
| created () {
| if (this.value) {
| this.dataUsers = this.value.users
| this.dataStrucs = this.value.strucs
| }
| },
| methods: {
| popoverSubmit (users, strucs) {
| this.dataUsers = users
| this.dataStrucs = strucs
|
| this.$emit('value-change', {
| index: this.index,
| value: { users: users, strucs: strucs }
| })
| }
| }
| }
| </script>
| <style lang="less" scoped>
| .structure-container {
| min-height: 34px;
| margin: 3px 0;
| position: relative;
| border-radius: 3px;
| font-size: 12px;
| border: 1px solid #ddd;
| color: #333333;
| padding: 0.5px;
| line-height: 15px;
| max-height: 105px;
| overflow-y: auto;
| .user-item {
| padding: 5px;
| background-color: #e2ebf9;
| border-radius: 3px;
| margin: 3px;
| cursor: pointer;
| }
| .add-item {
| padding: 5px;
| color: #4D88FF;
| cursor: pointer;
| }
| .delete-icon {
| color: #999;
| cursor: pointer;
| }
| &:hover {
| border-color: #c0c4cc;
| }
| }
| </style>
|
|
