@cmstops/pro-compo 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,76 @@
1
+ import { defineComponent, openBlock, createBlock, unref, withCtx, createCommentVNode, createElementVNode, toDisplayString, createVNode } from "vue";
2
+ import { Tree, Avatar, Button } from "@arco-design/web-vue";
3
+ import { IconUserGroup, IconPlus } from "@arco-design/web-vue/es/icon";
4
+ const _hoisted_1 = { class: "user-item" };
5
+ const _hoisted_2 = { class: "left" };
6
+ const _sfc_main = defineComponent({
7
+ __name: "userTree",
8
+ props: {
9
+ list: {}
10
+ },
11
+ emits: ["select", "expand", "add"],
12
+ setup(__props, { emit: __emit }) {
13
+ const props = __props;
14
+ const loadMore = () => {
15
+ };
16
+ const fieldNames = {
17
+ children: "children",
18
+ title: "alias",
19
+ key: "node_key"
20
+ };
21
+ const emit = __emit;
22
+ const select = (selectedKeys, data) => {
23
+ emit("select", selectedKeys, data);
24
+ };
25
+ const expand = (expandedKeys, data) => {
26
+ emit("expand", expandedKeys, data);
27
+ };
28
+ const addItem = (nodeData) => {
29
+ emit("add", nodeData);
30
+ };
31
+ return (_ctx, _cache) => {
32
+ return openBlock(), createBlock(unref(Tree), {
33
+ data: props.list,
34
+ "load-more": loadMore,
35
+ "block-node": "",
36
+ size: "large",
37
+ "field-names": fieldNames,
38
+ "action-on-node-click": "expand",
39
+ onSelect: select,
40
+ onExpand: expand
41
+ }, {
42
+ icon: withCtx((node) => [
43
+ !node.isLeaf ? (openBlock(), createBlock(unref(IconUserGroup), { key: 0 })) : createCommentVNode("v-if", true)
44
+ ]),
45
+ title: withCtx((nodeData) => [
46
+ createElementVNode("div", _hoisted_1, [
47
+ createElementVNode("div", _hoisted_2, [
48
+ nodeData.isUser ? (openBlock(), createBlock(unref(Avatar), {
49
+ key: 0,
50
+ size: 22,
51
+ "image-url": nodeData.avatar
52
+ }, null, 8, ["image-url"])) : createCommentVNode("v-if", true),
53
+ createElementVNode("span", null, toDisplayString(nodeData.alias), 1)
54
+ ])
55
+ ])
56
+ ]),
57
+ extra: withCtx((nodeData) => [
58
+ createVNode(unref(Button), {
59
+ class: "tree-action",
60
+ type: "primary",
61
+ size: "mini",
62
+ shape: "circle",
63
+ onClick: ($event) => addItem(nodeData)
64
+ }, {
65
+ default: withCtx(() => [
66
+ createVNode(unref(IconPlus))
67
+ ]),
68
+ _: 2
69
+ }, 1032, ["onClick"])
70
+ ]),
71
+ _: 1
72
+ }, 8, ["data"]);
73
+ };
74
+ }
75
+ });
76
+ export { _sfc_main as default };
@@ -1,8 +1,55 @@
1
+ .user-director-modal-body {
2
+ padding: 0;
3
+ }
4
+ .user-director-modal-body .arco-collapse {
5
+ height: calc(100% - 36px);
6
+ }
7
+ .user-director-modal-body .arco-collapse-item-content {
8
+ padding-left: 10px;
9
+ padding-right: 0;
10
+ background: white;
11
+ }
1
12
  .user-select-content {
2
13
  height: 60vh;
14
+ display: flex;
3
15
  }
4
16
  .user-select-content .user-select-left,
5
17
  .user-select-content .user-select-right {
6
18
  width: 50%;
7
19
  height: 100%;
8
20
  }
21
+ .user-select-content .user-select-left {
22
+ border-right: 1px solid var(--color-neutral-3);
23
+ }
24
+ .user-select-content .user-select-right .user-select-right-title {
25
+ display: flex;
26
+ justify-content: space-between;
27
+ font-size: 14px;
28
+ font-weight: 500;
29
+ padding: 6px 16px;
30
+ border-bottom: 1px solid var(--color-neutral-3);
31
+ }
32
+ .user-select-content .user-select-right .user-item {
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: space-between;
36
+ padding: 5px 16px;
37
+ }
38
+ .user-select-content .user-select-right .user-item .action {
39
+ display: none;
40
+ }
41
+ .user-select-content .user-select-right .user-item:hover {
42
+ background-color: var(--color-fill-1);
43
+ }
44
+ .user-select-content .user-select-right .user-item:hover .action {
45
+ display: flex;
46
+ }
47
+ .user-select-content .tree-action {
48
+ position: absolute;
49
+ top: 7px;
50
+ right: 30px;
51
+ display: none;
52
+ }
53
+ .user-select-content .arco-tree-node:hover .tree-action {
54
+ display: inline-block;
55
+ }
@@ -1,8 +1,58 @@
1
+ .user-director-modal-body {
2
+ padding: 0;
3
+ .arco-collapse {
4
+ height: calc(100% - 36px);
5
+ }
6
+
7
+ .arco-collapse-item-content {
8
+ padding-left: 10px;
9
+ padding-right: 0;
10
+ background: white;
11
+ }
12
+ }
1
13
  .user-select-content {
2
14
  height: 60vh;
15
+ display: flex;
3
16
  .user-select-left,
4
17
  .user-select-right {
5
18
  width: 50%;
6
19
  height: 100%;
7
20
  }
21
+ .user-select-left {
22
+ border-right: 1px solid var(--color-neutral-3);
23
+ }
24
+ .user-select-right {
25
+ .user-select-right-title {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ font-size: 14px;
29
+ font-weight: 500;
30
+ padding: 6px 16px;
31
+ border-bottom: 1px solid var(--color-neutral-3);
32
+ }
33
+ .user-item {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: space-between;
37
+ padding: 5px 16px;
38
+ .action {
39
+ display: none;
40
+ }
41
+ &:hover {
42
+ background-color: var(--color-fill-1);
43
+ .action {
44
+ display: flex;
45
+ }
46
+ }
47
+ }
48
+ }
49
+ .tree-action {
50
+ position: absolute;
51
+ top: 7px;
52
+ right: 30px;
53
+ display: none;
54
+ }
55
+ .arco-tree-node:hover .tree-action {
56
+ display: inline-block;
57
+ }
8
58
  }
package/lib/index.css CHANGED
@@ -2113,43 +2113,43 @@
2113
2113
  .empty-data-container .slot-view {
2114
2114
  margin-top: 16px;
2115
2115
  }
2116
- .tooltip-button {
2116
+ .filter-wrp .tooltip-button {
2117
2117
  height: auto;
2118
2118
  padding: 20px;
2119
2119
  }
2120
- .dop.active {
2120
+ .filter-wrp .dop.active {
2121
2121
  color: #165dff;
2122
2122
  }
2123
- .dop .label {
2123
+ .filter-wrp .dop .label {
2124
2124
  display: flex;
2125
2125
  gap: 10px;
2126
2126
  align-items: center;
2127
2127
  }
2128
- .filter-view-container {
2128
+ .filter-wrp .filter-view-container {
2129
2129
  display: flex;
2130
2130
  align-items: center;
2131
2131
  margin-bottom: 10px;
2132
2132
  font-size: 14px;
2133
2133
  }
2134
- .filter-search {
2134
+ .filter-wrp .filter-search {
2135
2135
  display: flex;
2136
2136
  gap: 10px;
2137
2137
  width: 180px;
2138
2138
  margin-right: 10px;
2139
2139
  }
2140
- .filter-content {
2140
+ .filter-wrp .filter-content {
2141
2141
  position: relative;
2142
2142
  display: flex;
2143
2143
  flex: 1;
2144
2144
  align-items: center;
2145
2145
  justify-content: space-between;
2146
2146
  }
2147
- .left {
2147
+ .filter-wrp .left {
2148
2148
  display: flex;
2149
2149
  gap: 10px;
2150
2150
  align-items: center;
2151
2151
  }
2152
- .right {
2152
+ .filter-wrp .right {
2153
2153
  position: absolute;
2154
2154
  right: 0;
2155
2155
  z-index: 1;
@@ -2160,15 +2160,15 @@
2160
2160
  padding-left: 20px;
2161
2161
  background: white;
2162
2162
  }
2163
- .more-btn {
2163
+ .filter-wrp .more-btn {
2164
2164
  margin-right: 10px;
2165
2165
  }
2166
- .right-prefix {
2166
+ .filter-wrp .right-prefix {
2167
2167
  display: flex;
2168
2168
  gap: 10px;
2169
2169
  align-items: center;
2170
2170
  }
2171
- .filter-pannel {
2171
+ .filter-wrp .filter-pannel {
2172
2172
  display: flex;
2173
2173
  gap: 10px;
2174
2174
  padding: 10px;
@@ -2176,29 +2176,29 @@
2176
2176
  border-radius: 6px;
2177
2177
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
2178
2178
  }
2179
- .filter-item-view {
2179
+ .filter-wrp .filter-item-view {
2180
2180
  position: relative;
2181
2181
  display: flex;
2182
2182
  overflow: hidden;
2183
2183
  }
2184
- .filter-item-view .show-view {
2184
+ .filter-wrp .filter-item-view .show-view {
2185
2185
  z-index: 1;
2186
2186
  width: 100%;
2187
2187
  height: 100%;
2188
2188
  background: #fff;
2189
2189
  pointer-events: none;
2190
2190
  }
2191
- .filter-item-view .select-view {
2191
+ .filter-wrp .filter-item-view .select-view {
2192
2192
  position: absolute;
2193
2193
  z-index: 0;
2194
2194
  width: 100%;
2195
2195
  }
2196
- .hasvalue-btn {
2196
+ .filter-wrp .hasvalue-btn {
2197
2197
  color: #165dff;
2198
2198
  background-color: #e8f3ff;
2199
2199
  border-right: none !important;
2200
2200
  }
2201
- .right-prefix {
2201
+ .filter-wrp .right-prefix {
2202
2202
  display: flex;
2203
2203
  gap: 10px;
2204
2204
  align-items: center;
@@ -2207,11 +2207,58 @@
2207
2207
  width: 40px !important;
2208
2208
  height: 40px !important;
2209
2209
  }
2210
+ .user-director-modal-body {
2211
+ padding: 0;
2212
+ }
2213
+ .user-director-modal-body .arco-collapse {
2214
+ height: calc(100% - 36px);
2215
+ }
2216
+ .user-director-modal-body .arco-collapse-item-content {
2217
+ padding-left: 10px;
2218
+ padding-right: 0;
2219
+ background: white;
2220
+ }
2210
2221
  .user-select-content {
2211
2222
  height: 60vh;
2223
+ display: flex;
2212
2224
  }
2213
2225
  .user-select-content .user-select-left,
2214
2226
  .user-select-content .user-select-right {
2215
2227
  width: 50%;
2216
2228
  height: 100%;
2217
2229
  }
2230
+ .user-select-content .user-select-left {
2231
+ border-right: 1px solid var(--color-neutral-3);
2232
+ }
2233
+ .user-select-content .user-select-right .user-select-right-title {
2234
+ display: flex;
2235
+ justify-content: space-between;
2236
+ font-size: 14px;
2237
+ font-weight: 500;
2238
+ padding: 6px 16px;
2239
+ border-bottom: 1px solid var(--color-neutral-3);
2240
+ }
2241
+ .user-select-content .user-select-right .user-item {
2242
+ display: flex;
2243
+ align-items: center;
2244
+ justify-content: space-between;
2245
+ padding: 5px 16px;
2246
+ }
2247
+ .user-select-content .user-select-right .user-item .action {
2248
+ display: none;
2249
+ }
2250
+ .user-select-content .user-select-right .user-item:hover {
2251
+ background-color: var(--color-fill-1);
2252
+ }
2253
+ .user-select-content .user-select-right .user-item:hover .action {
2254
+ display: flex;
2255
+ }
2256
+ .user-select-content .tree-action {
2257
+ position: absolute;
2258
+ top: 7px;
2259
+ right: 30px;
2260
+ display: none;
2261
+ }
2262
+ .user-select-content .arco-tree-node:hover .tree-action {
2263
+ display: inline-block;
2264
+ }
@@ -11,7 +11,7 @@ const _hoisted_2 = { class: "label" };
11
11
  const _sfc_main = vue.defineComponent({
12
12
  __name: "DocFilter",
13
13
  props: {
14
- filterKeys: { default: () => ["keywords", "doc_type"] },
14
+ filterKeys: { default: () => ["doc_type"] },
15
15
  filterType: { default: "APV" }
16
16
  },
17
17
  emits: ["search", "change"],
@@ -69,22 +69,27 @@ const _sfc_main = vue.defineComponent({
69
69
  filter.value[key] = "";
70
70
  });
71
71
  }
72
+ function columnFilter(fi) {
73
+ const ret = {};
74
+ calculateRules.value.forEach((item) => {
75
+ ret[item.key] = fi[item.key];
76
+ });
77
+ ret.keywords = fi.keywords;
78
+ ret.highSearch = {
79
+ order: fi.order,
80
+ sort: fi.sort,
81
+ meta: fi.meta
82
+ };
83
+ return ret;
84
+ }
72
85
  function handleSearch() {
73
- emits("search", filter.value);
86
+ const ret = columnFilter(filter.value);
87
+ emits("search", ret);
74
88
  }
75
89
  vue.watch(
76
90
  () => filter.value,
77
91
  (n) => {
78
- const ret = {};
79
- calculateRules.value.forEach((item) => {
80
- ret[item.key] = n[item.key];
81
- });
82
- ret.keywords = n.keywords;
83
- ret.highSearch = {
84
- order: n.order,
85
- sort: n.sort,
86
- meta: n.meta
87
- };
92
+ const ret = columnFilter(n);
88
93
  emits("change", ret);
89
94
  },
90
95
  { deep: true }
@@ -1,40 +1,40 @@
1
- .tooltip-button {
1
+ .filter-wrp .tooltip-button {
2
2
  height: auto;
3
3
  padding: 20px;
4
4
  }
5
- .dop.active {
5
+ .filter-wrp .dop.active {
6
6
  color: #165dff;
7
7
  }
8
- .dop .label {
8
+ .filter-wrp .dop .label {
9
9
  display: flex;
10
10
  gap: 10px;
11
11
  align-items: center;
12
12
  }
13
- .filter-view-container {
13
+ .filter-wrp .filter-view-container {
14
14
  display: flex;
15
15
  align-items: center;
16
16
  margin-bottom: 10px;
17
17
  font-size: 14px;
18
18
  }
19
- .filter-search {
19
+ .filter-wrp .filter-search {
20
20
  display: flex;
21
21
  gap: 10px;
22
22
  width: 180px;
23
23
  margin-right: 10px;
24
24
  }
25
- .filter-content {
25
+ .filter-wrp .filter-content {
26
26
  position: relative;
27
27
  display: flex;
28
28
  flex: 1;
29
29
  align-items: center;
30
30
  justify-content: space-between;
31
31
  }
32
- .left {
32
+ .filter-wrp .left {
33
33
  display: flex;
34
34
  gap: 10px;
35
35
  align-items: center;
36
36
  }
37
- .right {
37
+ .filter-wrp .right {
38
38
  position: absolute;
39
39
  right: 0;
40
40
  z-index: 1;
@@ -45,15 +45,15 @@
45
45
  padding-left: 20px;
46
46
  background: white;
47
47
  }
48
- .more-btn {
48
+ .filter-wrp .more-btn {
49
49
  margin-right: 10px;
50
50
  }
51
- .right-prefix {
51
+ .filter-wrp .right-prefix {
52
52
  display: flex;
53
53
  gap: 10px;
54
54
  align-items: center;
55
55
  }
56
- .filter-pannel {
56
+ .filter-wrp .filter-pannel {
57
57
  display: flex;
58
58
  gap: 10px;
59
59
  padding: 10px;
@@ -61,29 +61,29 @@
61
61
  border-radius: 6px;
62
62
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
63
63
  }
64
- .filter-item-view {
64
+ .filter-wrp .filter-item-view {
65
65
  position: relative;
66
66
  display: flex;
67
67
  overflow: hidden;
68
68
  }
69
- .filter-item-view .show-view {
69
+ .filter-wrp .filter-item-view .show-view {
70
70
  z-index: 1;
71
71
  width: 100%;
72
72
  height: 100%;
73
73
  background: #fff;
74
74
  pointer-events: none;
75
75
  }
76
- .filter-item-view .select-view {
76
+ .filter-wrp .filter-item-view .select-view {
77
77
  position: absolute;
78
78
  z-index: 0;
79
79
  width: 100%;
80
80
  }
81
- .hasvalue-btn {
81
+ .filter-wrp .hasvalue-btn {
82
82
  color: #165dff;
83
83
  background-color: #e8f3ff;
84
84
  border-right: none !important;
85
85
  }
86
- .right-prefix {
86
+ .filter-wrp .right-prefix {
87
87
  display: flex;
88
88
  gap: 10px;
89
89
  align-items: center;
@@ -1,108 +1,110 @@
1
- .tooltip-button {
2
- height: auto;
3
- padding: 20px;
4
- }
1
+ .filter-wrp {
2
+ .tooltip-button {
3
+ height: auto;
4
+ padding: 20px;
5
+ }
5
6
 
6
- // DocFilter 组件内部样式
7
- .dop.active {
8
- color: #165dff;
9
- }
7
+ // DocFilter 组件内部样式
8
+ .dop.active {
9
+ color: #165dff;
10
+ }
10
11
 
11
- .dop .label {
12
- display: flex;
13
- gap: 10px;
14
- align-items: center;
15
- }
12
+ .dop .label {
13
+ display: flex;
14
+ gap: 10px;
15
+ align-items: center;
16
+ }
16
17
 
17
- // FilterGroup 内部样式
18
- .filter-view-container {
19
- display: flex;
20
- align-items: center;
21
- margin-bottom: 10px;
22
- font-size: 14px;
23
- }
18
+ // FilterGroup 内部样式
19
+ .filter-view-container {
20
+ display: flex;
21
+ align-items: center;
22
+ margin-bottom: 10px;
23
+ font-size: 14px;
24
+ }
24
25
 
25
- .filter-search {
26
- display: flex;
27
- gap: 10px;
28
- width: 180px;
29
- margin-right: 10px;
30
- }
26
+ .filter-search {
27
+ display: flex;
28
+ gap: 10px;
29
+ width: 180px;
30
+ margin-right: 10px;
31
+ }
31
32
 
32
- .filter-content {
33
- position: relative;
34
- display: flex;
35
- flex: 1;
36
- align-items: center;
37
- justify-content: space-between;
38
- }
33
+ .filter-content {
34
+ position: relative;
35
+ display: flex;
36
+ flex: 1;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ }
39
40
 
40
- .left {
41
- display: flex;
42
- gap: 10px;
43
- align-items: center;
44
- }
41
+ .left {
42
+ display: flex;
43
+ gap: 10px;
44
+ align-items: center;
45
+ }
45
46
 
46
- .right {
47
- position: absolute;
48
- right: 0;
49
- z-index: 1;
50
- display: flex;
51
- flex-wrap: nowrap;
52
- align-items: center;
53
- height: 100%;
54
- padding-left: 20px;
55
- background: white;
56
- }
47
+ .right {
48
+ position: absolute;
49
+ right: 0;
50
+ z-index: 1;
51
+ display: flex;
52
+ flex-wrap: nowrap;
53
+ align-items: center;
54
+ height: 100%;
55
+ padding-left: 20px;
56
+ background: white;
57
+ }
57
58
 
58
- .more-btn {
59
- margin-right: 10px;
60
- }
59
+ .more-btn {
60
+ margin-right: 10px;
61
+ }
61
62
 
62
- .right-prefix {
63
- display: flex;
64
- gap: 10px;
65
- align-items: center;
66
- }
63
+ .right-prefix {
64
+ display: flex;
65
+ gap: 10px;
66
+ align-items: center;
67
+ }
67
68
 
68
- .filter-pannel {
69
- display: flex;
70
- gap: 10px;
71
- padding: 10px;
72
- background-color: white;
73
- border-radius: 6px;
74
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
75
- }
69
+ .filter-pannel {
70
+ display: flex;
71
+ gap: 10px;
72
+ padding: 10px;
73
+ background-color: white;
74
+ border-radius: 6px;
75
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
76
+ }
76
77
 
77
- // Filter Item 内部样式
78
- .filter-item-view {
79
- position: relative;
80
- display: flex;
81
- overflow: hidden;
82
- }
78
+ // Filter Item 内部样式
79
+ .filter-item-view {
80
+ position: relative;
81
+ display: flex;
82
+ overflow: hidden;
83
+ }
83
84
 
84
- .filter-item-view .show-view {
85
- z-index: 1;
86
- width: 100%;
87
- height: 100%;
88
- background: #fff;
89
- pointer-events: none;
90
- }
85
+ .filter-item-view .show-view {
86
+ z-index: 1;
87
+ width: 100%;
88
+ height: 100%;
89
+ background: #fff;
90
+ pointer-events: none;
91
+ }
91
92
 
92
- .filter-item-view .select-view {
93
- position: absolute;
94
- z-index: 0;
95
- width: 100%;
96
- }
93
+ .filter-item-view .select-view {
94
+ position: absolute;
95
+ z-index: 0;
96
+ width: 100%;
97
+ }
97
98
 
98
- .hasvalue-btn {
99
- color: #165dff;
100
- background-color: #e8f3ff;
101
- border-right: none !important;
102
- }
99
+ .hasvalue-btn {
100
+ color: #165dff;
101
+ background-color: #e8f3ff;
102
+ border-right: none !important;
103
+ }
103
104
 
104
- .right-prefix {
105
- display: flex;
106
- gap: 10px;
107
- align-items: center;
105
+ .right-prefix {
106
+ display: flex;
107
+ gap: 10px;
108
+ align-items: center;
109
+ }
108
110
  }