Skip to content

Commit 60c10fa

Browse files
author
wb-wjq456696
committed
feat: 增加拖拽排序
1 parent 46d7525 commit 60c10fa

18 files changed

+1246
-178
lines changed

‎package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
},
4545
"dependencies": {
4646
"highlight.js": "^9.15.6",
47-
"vue": "^2.6.8"
47+
"vue": "^2.6.8",
48+
"vuedraggable": "^2.23.2"
4849
},
4950
"browserslist": [
5051
"> 1%",

‎src/ArrayView.vue‎

Lines changed: 101 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,90 @@
11
<template>
22
<div class="block_content array">
33
<ol class="array-ol">
4-
<li
5-
v-for="(member, index) in flowData"
6-
:key="index"
7-
:class="['array-item', {'hide-item': hideMyItem[index] == true}]"
8-
>
9-
<p v-if="member.type !== 'object' && member.type !== 'array'">
10-
<input
11-
type="text"
12-
v-model="parsedData[index].remark"
13-
class="val-input"
14-
v-if="member.type == 'string'"
15-
placeholder="string"
16-
>
17-
<input
18-
type="number"
19-
v-model.number="parsedData[index].remark"
20-
class="val-input"
21-
v-if="member.type == 'number'"
22-
placeholder="number"
23-
>
24-
<select
25-
name="value"
26-
v-model="parsedData[index].remark"
27-
class="val-input"
28-
v-if="member.type == 'boolean'"
29-
>
30-
<option :value="true">true</option>
31-
<option :value="false">false</option>
32-
</select>
33-
</p>
34-
<div v-else>
35-
<span :class="['json-key', 'json-desc']">
36-
{{parsedData[index].type.toUpperCase()}}
37-
<i
38-
class="collapse-down"
39-
v-if="member.type == 'object' || member.type == 'array'"
40-
@click="closeBlock(index, $event)"
4+
5+
<draggable v-model="flowData" handle=".dragbar" @end="onDragEnd">
6+
<li
7+
v-for="(member, index) in flowData"
8+
:key="`${member.remark}${index}`"
9+
:class="['array-item', {'hide-item': hideMyItem[index] == true}]"
10+
>
11+
<p v-if="member.type !== 'object' && member.type !== 'array'">
12+
<input
13+
type="text"
14+
v-model="member.remark"
15+
class="val-input"
16+
v-if="member.type == 'string'"
17+
placeholder="string"
4118
>
42-
<i class="v-json-edit-icon-down-open"></i>
43-
</i>
44-
<i v-if="member.type == 'object'">
45-
{{'{' + parsedData[index].childParams.length + '}'}}
46-
</i>
47-
<i v-if="member.type == 'array'">
48-
{{'[' + parsedData[index].childParams.length + ']'}}
49-
</i>
50-
</span>
51-
52-
<span class="json-val">
53-
<template v-if="member.type == 'array'">
54-
<array-view
55-
:parsedData="parsedData[index].childParams"
56-
v-model="parsedData[index].childParams"
57-
></array-view>
58-
</template>
19+
<input
20+
type="number"
21+
v-model.number="member.remark"
22+
class="val-input"
23+
v-if="member.type == 'number'"
24+
placeholder="number"
25+
>
26+
<select
27+
name="value"
28+
v-model="member.remark"
29+
class="val-input"
30+
v-if="member.type == 'boolean'"
31+
>
32+
<option :value="true">true</option>
33+
<option :value="false">false</option>
34+
</select>
35+
</p>
36+
<div v-else>
37+
<span :class="['json-key', 'json-desc']">
38+
{{member.type.toUpperCase()}}
39+
<i
40+
class="collapse-down v-json-edit-icon-arrow_drop_down"
41+
v-if="member.type == 'object' || member.type == 'array'"
42+
@click="closeBlock(index, $event)"
43+
>
44+
</i>
45+
<!-- <i v-if="member.type == 'object'">
46+
{{'{' + member.childParams.length + '}'}}
47+
</i>
48+
<i v-if="member.type == 'array'">
49+
{{'[' + member.childParams.length + ']'}}
50+
</i> -->
51+
</span>
52+
53+
<span class="json-val">
54+
<template v-if="member.type == 'array'">
55+
<array-view
56+
:parsedData="member.childParams"
57+
v-model="member.childParams"
58+
></array-view>
59+
</template>
5960

60-
<template v-if="member.type == 'object'">
61-
<json-view
62-
:parsedData="parsedData[index].childParams"
63-
v-model="parsedData[index].childParams"
64-
></json-view>
65-
</template>
66-
</span>
67-
</div>
61+
<template v-if="member.type == 'object'">
62+
<json-view
63+
:parsedData="member.childParams"
64+
v-model="member.childParams"
65+
></json-view>
66+
</template>
67+
</span>
68+
</div>
6869

69-
<i
70-
class="del-btn"
71-
@click="delItem(parsedData, member, index)">
72-
<i class="v-json-edit-icon-trash"></i>
73-
</i>
74-
</li>
70+
<div class="tools">
71+
<select v-model="member.type" class="tools-types" @change="itemTypeChange(member)">
72+
<option
73+
v-for="(item, index) in formats"
74+
:value="item"
75+
:key="index">
76+
{{item}}
77+
</option>
78+
</select>
79+
<i class="dragbar v-json-edit-icon-drag"></i>
80+
<i
81+
class="del-btn"
82+
@click="delItem(parsedData, member, index)">
83+
<i class="v-json-edit-icon-huishouzhan_huaban"></i>
84+
</i>
85+
</div>
86+
</li>
87+
</draggable>
7588
</ol>
7689

7790
<item-add-form
@@ -85,7 +98,7 @@
8598
class="block add-key"
8699
v-if="!toAddItem"
87100
@click="addItem">
88-
<i class="v-json-edit-icon-plus"></i>
101+
<i class="v-json-edit-icon-add"></i>
89102
</div>
90103
</div>
91104
</template>
@@ -98,6 +111,7 @@ export default {
98111
props: ["parsedData"],
99112
data: function() {
100113
return {
114+
formats: ['string', 'array', 'object', 'number', 'boolean'],
101115
flowData: this.parsedData,
102116
toAddItem: false,
103117
hideMyItem: {}
@@ -106,7 +120,7 @@ export default {
106120
watch: {
107121
parsedData: {
108122
handler(newValue, oldValue) {
109-
this.flowData = this.parsedData;
123+
this.flowData = this.parsedData || [];
110124
}
111125
}
112126
},
@@ -151,6 +165,23 @@ export default {
151165
this.flowData.push(oj);
152166
this.$emit("input", this.flowData);
153167
this.cancelNewItem();
168+
},
169+
170+
onDragEnd: function() {
171+
this.$emit("input", this.flowData);
172+
},
173+
174+
itemTypeChange: function(item) {
175+
console.log(item)
176+
if (item.type === 'array') {
177+
item.remark = []
178+
}
179+
if (item.type === 'object') {
180+
item.remark = {}
181+
}
182+
if (item.type === 'boolean') {
183+
item.remark = true
184+
}
154185
}
155186
}
156187
};

0 commit comments

Comments
 (0)