@nixweb/nixloc-ui 0.0.158 → 0.0.159
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.
package/package.json
CHANGED
|
@@ -16,7 +16,12 @@
|
|
|
16
16
|
<img
|
|
17
17
|
:class="classCss"
|
|
18
18
|
:style="'width:100px;height:100px'"
|
|
19
|
-
:src="
|
|
19
|
+
:src="
|
|
20
|
+
'https://espaco.blob.core.windows.net/' +
|
|
21
|
+
container +
|
|
22
|
+
'/' +
|
|
23
|
+
urlImage
|
|
24
|
+
"
|
|
20
25
|
/>
|
|
21
26
|
</div>
|
|
22
27
|
<div>
|
|
@@ -31,7 +36,11 @@
|
|
|
31
36
|
</div>
|
|
32
37
|
<div v-else>
|
|
33
38
|
<div class="div-button">
|
|
34
|
-
<button
|
|
39
|
+
<button
|
|
40
|
+
class="button small danger"
|
|
41
|
+
v-if="!loadingAdd"
|
|
42
|
+
@click="remove()"
|
|
43
|
+
>
|
|
35
44
|
<span v-if="!loadingRemove"
|
|
36
45
|
><i class="fas fa-camera"></i> Remover Foto</span
|
|
37
46
|
>
|
|
@@ -56,7 +65,7 @@
|
|
|
56
65
|
:height="100"
|
|
57
66
|
:noCircle="true"
|
|
58
67
|
img-format="png"
|
|
59
|
-
|
|
68
|
+
/>
|
|
60
69
|
</div>
|
|
61
70
|
</template>
|
|
62
71
|
<script>
|
|
@@ -68,12 +77,13 @@ export default {
|
|
|
68
77
|
name: "ImageUpload",
|
|
69
78
|
components: {
|
|
70
79
|
"my-upload": myUpload,
|
|
80
|
+
VueCropper,
|
|
71
81
|
},
|
|
72
82
|
props: {
|
|
73
83
|
title: String,
|
|
74
84
|
container: String,
|
|
75
85
|
accepted: String,
|
|
76
|
-
classCss:String,
|
|
86
|
+
classCss: String,
|
|
77
87
|
urlPost: String,
|
|
78
88
|
urlRemove: String,
|
|
79
89
|
onLoad: Function,
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="div-btn">
|
|
4
|
+
<Button
|
|
5
|
+
_key="btnAddTree"
|
|
6
|
+
title="Categoria"
|
|
7
|
+
classIcon="fas fa-plus-circle"
|
|
8
|
+
type="primary"
|
|
9
|
+
size="small"
|
|
10
|
+
:clicked="addNode"
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
<div v-show="!data.children">
|
|
14
|
+
<span>Nenhum registro encontrado!</span>
|
|
15
|
+
</div>
|
|
16
|
+
<vue-tree-list
|
|
17
|
+
@click="onClick"
|
|
18
|
+
@change-name="onChangeName"
|
|
19
|
+
@delete-node="onDel"
|
|
20
|
+
@add-node="onAddNode"
|
|
21
|
+
:model="data"
|
|
22
|
+
default-tree-node-name="Novo Centro de Custo"
|
|
23
|
+
default-leaf-node-name="Novo Plano de Conta"
|
|
24
|
+
v-bind:default-expanded="false"
|
|
25
|
+
>
|
|
26
|
+
<template v-slot:leafNameDisplay="slotProps">
|
|
27
|
+
<span>
|
|
28
|
+
{{ slotProps.model.name }}
|
|
29
|
+
</span>
|
|
30
|
+
</template>
|
|
31
|
+
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
|
32
|
+
<span class="icon" slot="addLeafNodeIcon">
|
|
33
|
+
<i class="icon-tree icon-add fa-solid fa-circle-plus"></i>
|
|
34
|
+
</span>
|
|
35
|
+
<span class="icon" slot="editNodeIcon">
|
|
36
|
+
<i class="icon-tree icon-edit fa-solid fa-pen-to-square"></i>
|
|
37
|
+
</span>
|
|
38
|
+
<span class="icon" slot="delNodeIcon">
|
|
39
|
+
<i class="icon-tree icon-delete fa-solid fa-trash"></i>
|
|
40
|
+
</span>
|
|
41
|
+
<span class="icon" slot="leafNodeIcon">
|
|
42
|
+
<i class="icon-tree fa-solid fa-arrow-right"></i>
|
|
43
|
+
</span>
|
|
44
|
+
<span class="icon" slot="treeNodeIcon"> </span>
|
|
45
|
+
</vue-tree-list>
|
|
46
|
+
</div>
|
|
47
|
+
</template>
|
|
48
|
+
|
|
49
|
+
<script>
|
|
50
|
+
import { VueTreeList, Tree, TreeNode } from "vue-tree-list";
|
|
51
|
+
import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
|
|
52
|
+
|
|
53
|
+
import { mapMutations } from "vuex";
|
|
54
|
+
|
|
55
|
+
export default {
|
|
56
|
+
components: {
|
|
57
|
+
VueTreeList,
|
|
58
|
+
Button,
|
|
59
|
+
},
|
|
60
|
+
data() {
|
|
61
|
+
return {
|
|
62
|
+
newTree: {},
|
|
63
|
+
data: new Tree([]),
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
methods: {
|
|
67
|
+
...mapMutations("generic", ["removeLoading"]),
|
|
68
|
+
onDel(node) {
|
|
69
|
+
// console.log(node);
|
|
70
|
+
node.remove();
|
|
71
|
+
},
|
|
72
|
+
onChangeName(params) {
|
|
73
|
+
if (params.eventType == "blur") {
|
|
74
|
+
this.getNewTree();
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
onAddNode(params) {
|
|
78
|
+
// console.log(params);
|
|
79
|
+
},
|
|
80
|
+
onClick(params) {
|
|
81
|
+
// console.log(params);
|
|
82
|
+
},
|
|
83
|
+
addNode() {
|
|
84
|
+
var node = new TreeNode({
|
|
85
|
+
name: "Novo Centro de Custo",
|
|
86
|
+
dragDisabled: true,
|
|
87
|
+
addTreeNodeDisabled: true,
|
|
88
|
+
addLeafNodeDisabled: false,
|
|
89
|
+
editNodeDisabled: false,
|
|
90
|
+
delNodeDisabled: false,
|
|
91
|
+
});
|
|
92
|
+
if (!this.data.children) this.data.children = [];
|
|
93
|
+
this.data.addChildren(node);
|
|
94
|
+
this.removeLoading(["btnAddTree"]);
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
getNewTree() {
|
|
98
|
+
var vm = this;
|
|
99
|
+
function _dfs(oldNode) {
|
|
100
|
+
var newNode = {};
|
|
101
|
+
|
|
102
|
+
for (var k in oldNode) {
|
|
103
|
+
if (k !== "children" && k !== "parent") {
|
|
104
|
+
newNode[k] = oldNode[k];
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (oldNode.children && oldNode.children.length > 0) {
|
|
109
|
+
newNode.children = [];
|
|
110
|
+
for (var i = 0, len = oldNode.children.length; i < len; i++) {
|
|
111
|
+
newNode.children.push(_dfs(oldNode.children[i]));
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
if (newNode.isLeaf == false && newNode.id == 0) return newNode;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
vm.newTree = _dfs(vm.data);
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
</script>
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
<style scoped>
|
|
125
|
+
.div-btn {
|
|
126
|
+
color: gray;
|
|
127
|
+
font-size: 80%;
|
|
128
|
+
margin-bottom: 20px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.icon-add {
|
|
132
|
+
color: #577696 !important;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.icon-edit {
|
|
136
|
+
color: darkgray !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.icon-delete {
|
|
140
|
+
color: red !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.icon-tree {
|
|
144
|
+
font-size: 15px;
|
|
145
|
+
margin-right: 10px;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
color: #232324;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.vtl-input {
|
|
151
|
+
background-color: red !important;
|
|
152
|
+
}
|
|
153
|
+
</style>
|