ap-dev 1.2.12 → 1.2.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.
- package/dev/ApiPanel/modules/ApiGrid.vue +1423 -1423
- package/dev/ComponentsPanel/index.vue +646 -61
- package/dev/ComponentsPanel/indexback0704.vue +775 -0
- package/dev/ComponentsPanel/old.vue +191 -0
- package/dev/ConfigPanel/DevCpt.vue +736 -0
- package/dev/ConfigPanel/DevCptBase.vue +210 -0
- package/dev/ConfigPanel/index.vue +41 -12
- package/dev/base/VueRender.vue +13 -6
- package/dev/dev/index.vue +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-pack-center" style="height: 100%;height: 100%;margin-top: 5px;">
|
|
3
|
+
<!--左侧面板-->
|
|
4
|
+
<div class="dev-container dev-left-panel">
|
|
5
|
+
<el-tabs value="default" :stretch="true">
|
|
6
|
+
<el-tab-pane label="默认" name="default">
|
|
7
|
+
<el-collapse v-model="componentGroup">
|
|
8
|
+
<template v-for="devComponent in devComponents">
|
|
9
|
+
<el-collapse-item :name="devComponent.title">
|
|
10
|
+
<template slot="title">
|
|
11
|
+
<span class="dev-collapse-title">{{ devComponent.title }}</span>
|
|
12
|
+
</template>
|
|
13
|
+
<div class="dev-panel-item">
|
|
14
|
+
<div
|
|
15
|
+
v-for="item in devComponent.list"
|
|
16
|
+
:key="item.type"
|
|
17
|
+
class="dev-comp-item"
|
|
18
|
+
:data-type="item.type"
|
|
19
|
+
@click="clickItemEvent(item.type)"
|
|
20
|
+
>
|
|
21
|
+
<i :class="item.icon"/> {{ item.title }}
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</el-collapse-item>
|
|
25
|
+
</template>
|
|
26
|
+
</el-collapse>
|
|
27
|
+
</el-tab-pane>
|
|
28
|
+
<el-tab-pane label="自定义" name="custom"/>
|
|
29
|
+
</el-tabs>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!--中间面板-->
|
|
33
|
+
<div class="flex-1 flex flex-direction-column" style="overflow: auto;">
|
|
34
|
+
<ap-container>
|
|
35
|
+
<ap-header margin="0111" height="45%" style="overflow: auto;">
|
|
36
|
+
<template v-if="showItem">
|
|
37
|
+
<!-- <dynamic-item/>-->
|
|
38
|
+
<vue-render :options.sync="vueCode"></vue-render>
|
|
39
|
+
</template>
|
|
40
|
+
<template v-else>
|
|
41
|
+
组件加载中...
|
|
42
|
+
</template>
|
|
43
|
+
</ap-header>
|
|
44
|
+
<ap-main margin="0101" style="overflow: auto;background-color: #f9f2f4;">
|
|
45
|
+
<div style="position: relative;float: right;">
|
|
46
|
+
<el-button-group>
|
|
47
|
+
<el-button icon="el-icon-copy" @click="copyCode($event)">复制</el-button>
|
|
48
|
+
</el-button-group>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="dev-code">
|
|
51
|
+
{{ template }}
|
|
52
|
+
</div>
|
|
53
|
+
</ap-main>
|
|
54
|
+
</ap-container>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<!--右侧面板-->
|
|
58
|
+
<div class="dev-container dev-right-panel flex flex-direction-column">
|
|
59
|
+
<div class="flex-1" style="overflow: auto">
|
|
60
|
+
<comment :is="currentItem" @dataChange="itemDataChange"/>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</template>
|
|
65
|
+
|
|
66
|
+
<script>
|
|
67
|
+
import devComponents from './../dev/devConfig'
|
|
68
|
+
import VueRender from './../base/VueRender'
|
|
69
|
+
import DynamicItem from "./DynamicItem";
|
|
70
|
+
// import DynamicItem from './../generator/DynamicItem'
|
|
71
|
+
import {getLocalData} from './../dev/DevUtil'
|
|
72
|
+
import clipboard from 'ap-util/util/ClipboardUtil'
|
|
73
|
+
|
|
74
|
+
// 批量导入组件
|
|
75
|
+
const allComponents = require.context('./items', false, /\.vue$/)
|
|
76
|
+
const apDevComponentItems = {}
|
|
77
|
+
allComponents.keys().forEach(fileName => {
|
|
78
|
+
const comp = allComponents(fileName)
|
|
79
|
+
apDevComponentItems[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
|
|
80
|
+
})
|
|
81
|
+
apDevComponentItems['DynamicItem'] = DynamicItem
|
|
82
|
+
apDevComponentItems['VueRender'] = VueRender
|
|
83
|
+
|
|
84
|
+
export default {
|
|
85
|
+
name: 'ComponentsPanel',
|
|
86
|
+
components: apDevComponentItems,
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
devComponents: devComponents,
|
|
90
|
+
componentGroup: [],
|
|
91
|
+
currentItem: '',
|
|
92
|
+
template: '',
|
|
93
|
+
showItem: true,
|
|
94
|
+
vueCode: ''
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
computed: {},
|
|
98
|
+
created() {
|
|
99
|
+
for (let i = 0; i < devComponents.length; i++) {
|
|
100
|
+
this.componentGroup.push(devComponents[i].title)
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
methods: {
|
|
104
|
+
clickItemEvent(type) {
|
|
105
|
+
this.currentItem = 'ap-dev-item-' + type
|
|
106
|
+
},
|
|
107
|
+
createFile(projectName, list) {
|
|
108
|
+
this.$request({
|
|
109
|
+
url: '/apd/dev/DevGenerateCode/createFile',
|
|
110
|
+
method: 'post',
|
|
111
|
+
data: {
|
|
112
|
+
list: JSON.stringify(list),
|
|
113
|
+
projectName: projectName
|
|
114
|
+
}
|
|
115
|
+
}).then(response => {
|
|
116
|
+
this.showItem = true
|
|
117
|
+
})
|
|
118
|
+
},
|
|
119
|
+
// 子组件数据修改
|
|
120
|
+
itemDataChange(template) {
|
|
121
|
+
this.template = template
|
|
122
|
+
this.renderVue();
|
|
123
|
+
},
|
|
124
|
+
renderVue() {
|
|
125
|
+
this.vueCode = this.template;
|
|
126
|
+
},
|
|
127
|
+
copyCode(event){
|
|
128
|
+
clipboard(this.vueCode, event)
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<style scoped>
|
|
135
|
+
.dev-container {
|
|
136
|
+
height: 100%;
|
|
137
|
+
background-color: white;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.dev-left-panel {
|
|
141
|
+
width: 270px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.dev-right-panel {
|
|
145
|
+
width: 350px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.dev-right-panel /deep/ .el-form-item {
|
|
149
|
+
margin-bottom: 12px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.dev-left-panel /deep/ .el-tabs__header {
|
|
153
|
+
margin: 0px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.dev-main-panel {
|
|
157
|
+
height: 100%;
|
|
158
|
+
width: 100%;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.dev-collapse-title {
|
|
162
|
+
font-weight: bold;
|
|
163
|
+
font-size: 13px;
|
|
164
|
+
padding: 0px 8px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.dev-comp-item {
|
|
168
|
+
padding: 5px 8px;
|
|
169
|
+
background: #f6f7ff;
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
cursor: pointer;
|
|
172
|
+
border: 1px solid #f6f7ff;
|
|
173
|
+
border-radius: 3px;
|
|
174
|
+
width: 44%;
|
|
175
|
+
margin-left: 4%;
|
|
176
|
+
float: left;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.dev-comp-item:hover {
|
|
180
|
+
border: 1px solid #787be8;
|
|
181
|
+
color: #787be8;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.dev-code {
|
|
185
|
+
color: #c7254e;
|
|
186
|
+
border-radius: 4px;
|
|
187
|
+
padding: 5px;
|
|
188
|
+
white-space: pre;
|
|
189
|
+
width: fit-content;
|
|
190
|
+
}
|
|
191
|
+
</style>
|