Skip to content

Commit da265dc

Browse files
jinkin1995jinkin1995
committed
feat: format can be modified
1 parent 60c10fa commit da265dc

File tree

2 files changed

+67
-98
lines changed

2 files changed

+67
-98
lines changed

‎src/ArrayView.vue‎

Lines changed: 27 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
<template>
22
<div class="block_content array">
33
<ol class="array-ol">
4-
54
<draggable v-model="flowData" handle=".dragbar" @end="onDragEnd">
65
<li
76
v-for="(member, index) in flowData"
8-
:key="`${member.remark}${index}`"
7+
:key="`${member.type}${index}`"
98
:class="['array-item', {'hide-item': hideMyItem[index] == true}]"
109
>
1110
<p v-if="member.type !== 'object' && member.type !== 'array'">
1211
<input
1312
type="text"
1413
v-model="member.remark"
1514
class="val-input"
16-
v-if="member.type == 'string'"
15+
v-if="member.type === 'string'"
1716
placeholder="string"
18-
>
17+
/>
1918
<input
2019
type="number"
2120
v-model.number="member.remark"
2221
class="val-input"
2322
v-if="member.type == 'number'"
2423
placeholder="number"
25-
>
24+
/>
2625
<select
2726
name="value"
2827
v-model="member.remark"
@@ -40,64 +39,38 @@
4039
class="collapse-down v-json-edit-icon-arrow_drop_down"
4140
v-if="member.type == 'object' || member.type == 'array'"
4241
@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> -->
42+
></i>
43+
<i v-if="member.type == 'object'">{{'{' + member.childParams.length + '}'}}</i>
44+
<i v-if="member.type == 'array'">{{'[' + member.childParams.length + ']'}}</i>
5145
</span>
52-
46+
5347
<span class="json-val">
5448
<template v-if="member.type == 'array'">
55-
<array-view
56-
:parsedData="member.childParams"
57-
v-model="member.childParams"
58-
></array-view>
49+
<array-view :parsedData="member.childParams || []" v-model="member.childParams"></array-view>
5950
</template>
6051

6152
<template v-if="member.type == 'object'">
62-
<json-view
63-
:parsedData="member.childParams"
64-
v-model="member.childParams"
65-
></json-view>
53+
<json-view :parsedData="member.childParams || {}" v-model="member.childParams"></json-view>
6654
</template>
6755
</span>
6856
</div>
6957

7058
<div class="tools">
7159
<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>
60+
<option v-for="(item, index) in formats" :value="item" :key="index">{{item}}</option>
7861
</select>
7962
<i class="dragbar v-json-edit-icon-drag"></i>
80-
<i
81-
class="del-btn"
82-
@click="delItem(parsedData, member, index)">
63+
<i class="del-btn" @click="delItem(parsedData, member, index)">
8364
<i class="v-json-edit-icon-huishouzhan_huaban"></i>
8465
</i>
8566
</div>
8667
</li>
8768
</draggable>
8869
</ol>
8970

90-
<item-add-form
91-
v-if="toAddItem"
92-
@confirm="newItem"
93-
@cancel="cancelNewItem"
94-
:needName="false">
95-
</item-add-form>
71+
<item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem" :needName="false"></item-add-form>
9672

97-
<div
98-
class="block add-key"
99-
v-if="!toAddItem"
100-
@click="addItem">
73+
<div class="block add-key" v-if="!toAddItem" @click="addItem">
10174
<i class="v-json-edit-icon-add"></i>
10275
</div>
10376
</div>
@@ -111,18 +84,18 @@ export default {
11184
props: ["parsedData"],
11285
data: function() {
11386
return {
114-
formats: ['string', 'array', 'object', 'number', 'boolean'],
87+
formats: ["string", "array", "object", "number", "boolean"],
11588
flowData: this.parsedData,
11689
toAddItem: false,
11790
hideMyItem: {}
11891
};
11992
},
120-
watch: {
121-
parsedData: {
122-
handler(newValue, oldValue) {
123-
this.flowData = this.parsedData || [];
124-
}
125-
}
93+
watch: {
94+
parsedData: {
95+
handler(newValue, oldValue) {
96+
this.flowData = this.parsedData || [];
97+
}
98+
}
12699
},
127100
components: {
128101
"item-add-form": ItemAddForm,
@@ -172,15 +145,13 @@ export default {
172145
},
173146
174147
itemTypeChange: function(item) {
175-
console.log(item)
176-
if (item.type === 'array') {
177-
item.remark = []
178-
}
179-
if (item.type === 'object') {
180-
item.remark = {}
148+
console.log(item);
149+
if (item.type === "array" || item.type === "object") {
150+
item.childParams = [];
151+
item.remark = null;
181152
}
182-
if (item.type === 'boolean') {
183-
item.remark = true
153+
if (item.type === "boolean") {
154+
item.remark = true;
184155
}
185156
}
186157
}

‎src/JsonView.vue‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="block_content">
33
<draggable v-model="flowData" handle=".dragbar" @end="onDragEnd">
4-
<span
4+
<div
55
v-for="(item, index) in flowData"
6-
:key="`${item.remark}${index}`"
6+
:key="`${item.type}${index}`"
77
:class="['block', 'clearfix', {'hide-block': hideMyBlock[index] == true}]"
88
>
99
<span class="json-key">
@@ -13,32 +13,14 @@
1313
class="key-input"
1414
v-if="typeof item.name == 'string'"
1515
@blur="keyInputBlur(item, $event)"
16-
>
16+
/>
1717
<i
1818
class="collapse-down v-json-edit-icon-arrow_drop_down"
1919
v-if="item.type == 'object' || item.type == 'array'"
2020
@click="closeBlock(index, $event)"
21-
>
22-
</i>
23-
<!-- <i
24-
v-if="item.type == 'object'"
25-
class="i-type">
26-
{{'{' + item.childParams.length + '}'}}
27-
</i>
28-
<i
29-
v-if="item.type == 'array'"
30-
class="i-type">
31-
{{'[' + item.childParams.length + ']'}}
32-
</i> -->
33-
34-
<div class="tools">
35-
<i class="dragbar v-json-edit-icon-drag"></i>
36-
<i
37-
class="del-btn"
38-
@click="delItem(parsedData, item, index)">
39-
<i class="v-json-edit-icon-huishouzhan_huaban"></i>
40-
</i>
41-
</div>
21+
></i>
22+
<i v-if="item.type == 'object'" class="i-type">{{'{' + item.childParams.length + '}'}}</i>
23+
<i v-if="item.type == 'array'" class="i-type">{{'[' + item.childParams.length + ']'}}</i>
4224
</span>
4325
<span class="json-val">
4426
<template v-if="item.type == 'object'">
@@ -51,17 +33,18 @@
5133

5234
<template v-else>
5335
<span class="val">
54-
<input
55-
type="text"
56-
v-model="item.remark"
57-
class="val-input"
58-
v-if="item.type == 'string'">
36+
<input
37+
type="text"
38+
v-model="item.remark"
39+
class="val-input"
40+
v-if="item.type == 'string'"
41+
/>
5942
<input
6043
type="number"
6144
v-model.number="item.remark"
6245
class="val-input"
6346
v-if="item.type == 'number'"
64-
>
47+
/>
6548
<select
6649
name="value"
6750
v-model="item.remark"
@@ -74,18 +57,22 @@
7457
</span>
7558
</template>
7659
</span>
77-
</span>
60+
61+
<div class="tools">
62+
<select v-model="item.type" class="tools-types" @change="itemTypeChange(item)">
63+
<option v-for="(type, index) in formats" :value="type" :key="index">{{type}}</option>
64+
</select>
65+
<i class="dragbar v-json-edit-icon-drag"></i>
66+
<i class="del-btn" @click="delItem(parsedData, item, index)">
67+
<i class="v-json-edit-icon-huishouzhan_huaban"></i>
68+
</i>
69+
</div>
70+
</div>
7871
</draggable>
7972

80-
<item-add-form
81-
v-if="toAddItem"
82-
@confirm="newItem"
83-
@cancel="cancelNewItem"></item-add-form>
73+
<item-add-form v-if="toAddItem" @confirm="newItem" @cancel="cancelNewItem"></item-add-form>
8474

85-
<div
86-
class="block add-key"
87-
@click="addItem"
88-
v-if="!toAddItem">
75+
<div class="block add-key" @click="addItem" v-if="!toAddItem">
8976
<i class="v-json-edit-icon-add"></i>
9077
</div>
9178
</div>
@@ -97,14 +84,15 @@ import ItemAddForm from "./ItemAddForm.vue";
9784
export default {
9885
name: "JsonView",
9986
props: { parsedData: {} },
100-
data () {
87+
data() {
10188
return {
89+
formats: ["string", "array", "object", "number", "boolean"],
10290
flowData: this.parsedData,
10391
toAddItem: false,
10492
hideMyBlock: {}
10593
};
10694
},
107-
created () {
95+
created() {
10896
this.flowData = this.parsedData || {};
10997
},
11098
watch: {
@@ -149,7 +137,6 @@ export default {
149137
if (obj.type == "array" || obj.type == "object") {
150138
oj.childParams = obj.val;
151139
oj.remark = null;
152-
153140
} else {
154141
oj.childParams = null;
155142
oj.remark = obj.val;
@@ -175,6 +162,17 @@ export default {
175162
176163
onDragEnd: function() {
177164
this.$emit("input", this.flowData);
165+
},
166+
167+
itemTypeChange: function(item) {
168+
console.log(item);
169+
if (item.type === "array" || item.type === "object") {
170+
item.childParams = [];
171+
item.remark = null;
172+
}
173+
if (item.type === "boolean") {
174+
item.remark = true;
175+
}
178176
}
179177
}
180178
};

0 commit comments

Comments
 (0)