vue2-client 1.2.60 → 1.2.61
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/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -44,345 +44,7 @@
|
|
|
44
44
|
</div>
|
|
45
45
|
</a-form-model-item>
|
|
46
46
|
</a-form-model>
|
|
47
|
-
<
|
|
48
|
-
title="数据字段配置"
|
|
49
|
-
:visible="dataColumnVisible"
|
|
50
|
-
:width="1000"
|
|
51
|
-
:zIndex="1001"
|
|
52
|
-
@cancel="modelCancel"
|
|
53
|
-
@ok="submitItem">
|
|
54
|
-
<a-form-model
|
|
55
|
-
ref="itemForm"
|
|
56
|
-
:rules="itemRules"
|
|
57
|
-
:model="item">
|
|
58
|
-
<a-row :gutter="16">
|
|
59
|
-
<a-col :span="8">
|
|
60
|
-
<a-form-model-item label="表单项名" prop="key">
|
|
61
|
-
<a-input v-model="item.key" placeholder="请输入表单项名" ref="key" :disabled="item.formType === 'file' || item.formType === 'image'">
|
|
62
|
-
<a-popover slot="suffix" title="关于表单项名" placement="bottom">
|
|
63
|
-
<template slot="content">
|
|
64
|
-
<p>设置表单项的名称</p>
|
|
65
|
-
</template>
|
|
66
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
67
|
-
</a-popover>
|
|
68
|
-
</a-input>
|
|
69
|
-
</a-form-model-item>
|
|
70
|
-
</a-col>
|
|
71
|
-
<a-col :span="8">
|
|
72
|
-
<a-form-model-item label="表单项中文名" prop="title">
|
|
73
|
-
<a-input v-model="item.title" placeholder="请输入表单项中文名，如：姓名" />
|
|
74
|
-
</a-form-model-item>
|
|
75
|
-
</a-col>
|
|
76
|
-
</a-row>
|
|
77
|
-
<template>
|
|
78
|
-
<a-row :gutter="16">
|
|
79
|
-
<a-col :span="8">
|
|
80
|
-
<a-form-model-item label="表单类型" prop="formType">
|
|
81
|
-
<a-select v-model="item.formType" placeholder="表单类型，可选" @change="changeFormType(item)">
|
|
82
|
-
<a-select-option key="input">输入框</a-select-option>
|
|
83
|
-
<a-select-option key="select">选择框</a-select-option>
|
|
84
|
-
<a-select-option key="checkbox">多选框</a-select-option>
|
|
85
|
-
<a-select-option key="radio">单选框</a-select-option>
|
|
86
|
-
<a-select-option key="rangePicker">日期范围选择框</a-select-option>
|
|
87
|
-
<a-select-option key="monthPicker">月份选择框</a-select-option>
|
|
88
|
-
<a-select-option key="datePicker">单日选择框</a-select-option>
|
|
89
|
-
<a-select-option key="cascader">级联选择框(单个下拉)</a-select-option>
|
|
90
|
-
<a-select-option key="selects">级联选择框(多个下拉)</a-select-option>
|
|
91
|
-
<a-select-option key="textarea">文本域</a-select-option>
|
|
92
|
-
<a-select-option key="file">文件上传</a-select-option>
|
|
93
|
-
<a-select-option key="image">图片上传</a-select-option>
|
|
94
|
-
<a-popover slot="suffixIcon" title="关于表单类型" placement="right">
|
|
95
|
-
<template slot="content">
|
|
96
|
-
<p>预览设置的表单类型</p>
|
|
97
|
-
<a-input-group compact style="width: 400px;">
|
|
98
|
-
<a-input value="输入框" style="width: 20%" readOnly/>
|
|
99
|
-
<a-input style="width: 80%" placeholder="请输入"/>
|
|
100
|
-
</a-input-group>
|
|
101
|
-
<br/>
|
|
102
|
-
<a-input-group compact style="width: 400px;">
|
|
103
|
-
<a-input value="选择框" style="width: 20%" readOnly/>
|
|
104
|
-
<a-select style="width: 80%" placeholder="请选择"/>
|
|
105
|
-
</a-input-group>
|
|
106
|
-
<br/>
|
|
107
|
-
<a-input-group compact style="width: 400px;">
|
|
108
|
-
<a-input value="多选框" style="width: 20%" readOnly/>
|
|
109
|
-
<a-checkbox-group style="margin-left: 10px;margin-top: 5px; width: 70%" :options="['数据1','数据2']"/>
|
|
110
|
-
</a-input-group>
|
|
111
|
-
<br/>
|
|
112
|
-
<a-input-group compact style="width: 400px;">
|
|
113
|
-
<a-input value="单选框" style="width: 20%" readOnly/>
|
|
114
|
-
<a-radio-group style="margin-left: 10px;margin-top: 5px; width: 70%" :options="[{label: '数据1', value: 'a'},{label: '数据2', value: 'b'}]" name="radioGroup" />
|
|
115
|
-
</a-input-group>
|
|
116
|
-
<br/>
|
|
117
|
-
<a-input-group compact style="width: 400px;">
|
|
118
|
-
<a-input value="日期范围选择框" style="width: 20%" readOnly/>
|
|
119
|
-
<a-range-picker style="width: 80%" :show-time="true" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
|
|
120
|
-
</a-input-group>
|
|
121
|
-
<br/>
|
|
122
|
-
<a-input-group compact style="width: 400px;">
|
|
123
|
-
<a-input value="月份选择框" style="width: 20%" readOnly/>
|
|
124
|
-
<a-month-picker style="width: 80%"/>
|
|
125
|
-
</a-input-group>
|
|
126
|
-
<br/>
|
|
127
|
-
<a-input-group compact style="width: 400px;">
|
|
128
|
-
<a-input value="单日选择框" style="width: 20%" readOnly/>
|
|
129
|
-
<a-date-picker style="width: 80%"/>
|
|
130
|
-
</a-input-group>
|
|
131
|
-
<br/>
|
|
132
|
-
<a-input-group compact style="width: 400px;">
|
|
133
|
-
<a-input value="级联选择框" style="width: 20%" readOnly/>
|
|
134
|
-
<a-cascader style="width: 80%" placeholder="请选择"/>
|
|
135
|
-
</a-input-group>
|
|
136
|
-
<br/>
|
|
137
|
-
<a-input-group compact style="width: 400px;">
|
|
138
|
-
<a-input value="文本域" style="width: 20%" readOnly/>
|
|
139
|
-
<a-textarea style="width: 80%" placeholder="请输入" :rows="1"/>
|
|
140
|
-
</a-input-group>
|
|
141
|
-
<br/>
|
|
142
|
-
<a-input-group compact style="width: 400px;">
|
|
143
|
-
<a-input value="文件上传" style="width: 20%" readOnly/>
|
|
144
|
-
<a-upload-dragger
|
|
145
|
-
name="file"
|
|
146
|
-
:multiple="true"
|
|
147
|
-
style="margin-left: 5px; width: 75%"
|
|
148
|
-
action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
|
|
149
|
-
<p class="ant-upload-drag-icon">
|
|
150
|
-
<a-icon type="inbox" />
|
|
151
|
-
</p>
|
|
152
|
-
<p class="ant-upload-text">
|
|
153
|
-
点击或拖动文件到该区域上传
|
|
154
|
-
</p>
|
|
155
|
-
<p class="ant-upload-hint">
|
|
156
|
-
支持单个或多个文件
|
|
157
|
-
</p>
|
|
158
|
-
</a-upload-dragger>
|
|
159
|
-
</a-input-group>
|
|
160
|
-
<br/>
|
|
161
|
-
<a-input-group compact style="width: 400px;">
|
|
162
|
-
<a-input value="图片上传" style="width: 20%" readOnly/>
|
|
163
|
-
<a-upload style="margin-left: 5px; width: 75%" list-type="picture-card" :file-list="[]">
|
|
164
|
-
<a-icon type="plus" />
|
|
165
|
-
<div class="ant-upload-text">
|
|
166
|
-
Upload
|
|
167
|
-
</div>
|
|
168
|
-
</a-upload>
|
|
169
|
-
</a-input-group>
|
|
170
|
-
</template>
|
|
171
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
172
|
-
</a-popover>
|
|
173
|
-
</a-select>
|
|
174
|
-
</a-form-model-item>
|
|
175
|
-
</a-col>
|
|
176
|
-
<a-col :span="8">
|
|
177
|
-
<a-form-model-item
|
|
178
|
-
label="表单水印"
|
|
179
|
-
prop="placeholder"
|
|
180
|
-
v-if="item.formType !== 'checkbox' && item.formType !== 'radio' && item.formType !== 'file' && item.formType !== 'image'">
|
|
181
|
-
<a-input v-model="item.placeholder" placeholder="表单水印（placeholder），可选" />
|
|
182
|
-
</a-form-model-item>
|
|
183
|
-
</a-col>
|
|
184
|
-
</a-row>
|
|
185
|
-
<a-row :gutter="16" v-if="item.formType === 'file' || item.formType === 'image'">
|
|
186
|
-
<a-col :span="8">
|
|
187
|
-
<a-form-model-item
|
|
188
|
-
label="允许上传文件数量"
|
|
189
|
-
prop="accept"
|
|
190
|
-
v-if="item.formType === 'file' || item.formType === 'image'">
|
|
191
|
-
<a-slider
|
|
192
|
-
v-model="item.acceptCount"
|
|
193
|
-
:min="1"
|
|
194
|
-
:max="20"
|
|
195
|
-
:marks="{ 1: '1', 3: '3', 5: '5', 10: '10', 15: '15', 20: '20'}"
|
|
196
|
-
:default-value="3"
|
|
197
|
-
/>
|
|
198
|
-
</a-form-model-item>
|
|
199
|
-
</a-col>
|
|
200
|
-
<a-col :span="8">
|
|
201
|
-
<a-form-model-item label="上传的仓库" prop="resUploadStock">
|
|
202
|
-
<a-select v-model="item.resUploadStock" placeholder="选择文件上传到的仓库" @change="changeStock">
|
|
203
|
-
<a-select-option v-for="stock in stockList" :key="stock.id">{{ stock.f_name }}</a-select-option>
|
|
204
|
-
</a-select>
|
|
205
|
-
</a-form-model-item>
|
|
206
|
-
</a-col>
|
|
207
|
-
<a-col :span="8">
|
|
208
|
-
<a-form-model-item v-if="item.resUploadStock" label="具体路径" prop="pathKey">
|
|
209
|
-
<a-select v-model="item.pathKey" placeholder="仓库扩展路径">
|
|
210
|
-
<a-select-option v-for="pathKey in lowerPath" :key="pathKey.label">{{ pathKey.label }}</a-select-option>
|
|
211
|
-
</a-select>
|
|
212
|
-
</a-form-model-item>
|
|
213
|
-
</a-col>
|
|
214
|
-
<a-col :span="8">
|
|
215
|
-
<a-form-model-item
|
|
216
|
-
label="文件上传模式"
|
|
217
|
-
prop="resUploadMode"
|
|
218
|
-
v-if="item.formType === 'file' || item.formType === 'image'">
|
|
219
|
-
<a-select v-model="item.resUploadMode" placeholder="文件上传模式，默认为服务器" @change="changeFormType(item)">
|
|
220
|
-
<a-select-option key="server">服务器</a-select-option>
|
|
221
|
-
<a-select-option key="oss">腾讯云对象存储</a-select-option>
|
|
222
|
-
<a-select-option key="base64" :disabled="item.formType === 'file'">Base64</a-select-option>
|
|
223
|
-
<a-popover slot="suffixIcon" title="关于资源上传模式" placement="right">
|
|
224
|
-
<template slot="content">
|
|
225
|
-
<p>指定文件上传到服务器，对象存储还是以base64方式存储</p>
|
|
226
|
-
<br/>
|
|
227
|
-
<p><span style="font-weight: bold">服务器：</span>文件上传到服务器，数据库需存储文件于服务器的路径</p>
|
|
228
|
-
<p><span style="font-weight: bold">对象存储：</span>文件上传到云对象存储，数据库需存储文件于对象存储的路径</p>
|
|
229
|
-
<p><span style="font-weight: bold">base64：</span>文件以base64字符串方式存入数据库中（仅图片上传表单支持）</p>
|
|
230
|
-
</template>
|
|
231
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
232
|
-
</a-popover>
|
|
233
|
-
</a-select>
|
|
234
|
-
</a-form-model-item>
|
|
235
|
-
</a-col>
|
|
236
|
-
<a-col :span="8">
|
|
237
|
-
<a-form-model-item v-if="item.formType === 'file'" label="允许上传文件类型" prop="accept">
|
|
238
|
-
<a-select v-model="item.accept" mode="tags" placeholder="指定文件类型，默认不限制" @change="itemAcceptChange">
|
|
239
|
-
<a-select-option v-for="type_item in fileType" :key="type_item.accept">{{ type_item.label }}</a-select-option>
|
|
240
|
-
</a-select>
|
|
241
|
-
</a-form-model-item>
|
|
242
|
-
</a-col>
|
|
243
|
-
<!-- TODO 配置文件上传表单-所属模块 -->
|
|
244
|
-
<!-- TODO 配置文件上传表单-上传扩展目录Key -->
|
|
245
|
-
</a-row>
|
|
246
|
-
<a-row :gutter="16" v-if="item.formType === 'selects'">
|
|
247
|
-
<a-col :span="8">
|
|
248
|
-
<a-form-model-item label="数据所属组别" prop="group">
|
|
249
|
-
<a-select v-model="item.group" placeholder="请输入数据字段名" ref="group">
|
|
250
|
-
<a-select-option v-for="i in groupArray" :key="i">{{ i }}</a-select-option>
|
|
251
|
-
<a-popover slot="suffixIcon" title="关于所属组别" placement="bottom">
|
|
252
|
-
<template slot="content">
|
|
253
|
-
<p>多个下拉框时按照次组别归为一组</p>
|
|
254
|
-
</template>
|
|
255
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
256
|
-
</a-popover>
|
|
257
|
-
</a-select>
|
|
258
|
-
</a-form-model-item>
|
|
259
|
-
</a-col>
|
|
260
|
-
<a-col :span="8">
|
|
261
|
-
<a-form-model-item label="组别内顺序" prop="groupIndex">
|
|
262
|
-
<a-select v-model="item.groupIndex" placeholder="表单类型，可选">
|
|
263
|
-
<template v-for="i in 5">
|
|
264
|
-
<a-select-option :key="i">{{ i }}</a-select-option>
|
|
265
|
-
</template>
|
|
266
|
-
<a-popover slot="suffix" title="关于组别内顺序" placement="bottom">
|
|
267
|
-
<template slot="content">
|
|
268
|
-
<p>多个下拉框为一组时,按照此顺序判断页面如何展示以及下拉框得父子顺序</p>
|
|
269
|
-
<p>只有顺序为1的数据字段才可以选择数据源类型</p>
|
|
270
|
-
</template>
|
|
271
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
272
|
-
</a-popover>
|
|
273
|
-
</a-select>
|
|
274
|
-
</a-form-model-item>
|
|
275
|
-
</a-col>
|
|
276
|
-
<a-col :span="8">
|
|
277
|
-
<a-form-model-item label="增加组" prop="groupName">
|
|
278
|
-
<a-input-search v-model="item.groupName" @search="addGroupName" placeholder="请输入数据字段名" ref="key">
|
|
279
|
-
<a-button slot="enterButton">
|
|
280
|
-
新增
|
|
281
|
-
</a-button>
|
|
282
|
-
</a-input-search>
|
|
283
|
-
</a-form-model-item>
|
|
284
|
-
</a-col>
|
|
285
|
-
</a-row>
|
|
286
|
-
<a-row :gutter="16">
|
|
287
|
-
<a-col :span="8">
|
|
288
|
-
<a-form-model-item label="数据源类型" prop="selectType" v-if="item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader'">
|
|
289
|
-
<a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="changeSelectKey(item)">
|
|
290
|
-
<a-select-option key="key">字典键</a-select-option>
|
|
291
|
-
<a-select-option key="fixArray">固定集合</a-select-option>
|
|
292
|
-
<a-select-option key="logic">业务逻辑</a-select-option>
|
|
293
|
-
<a-popover
|
|
294
|
-
slot="suffixIcon"
|
|
295
|
-
title="关于下拉框或级联框数据源类型"
|
|
296
|
-
placement="bottom">
|
|
297
|
-
<template slot="content">
|
|
298
|
-
<p>设置下拉框或级联框的数据源</p>
|
|
299
|
-
<p>数据源类型分为三种，你可以根据需要选择</p>
|
|
300
|
-
<p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
|
|
301
|
-
<p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
|
|
302
|
-
<p>固定集合：选项为静态值，JSONArray格式</p>
|
|
303
|
-
<p>当表单类型为 " 级联选择框(多个下拉) " 是数据模式为 [{lable,value,children[{lable,value,children[]},{lable,value,children[]}]}] 形式</p>
|
|
304
|
-
<p>如：</p>
|
|
305
|
-
<json-viewer :value="DemoJson" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
|
|
306
|
-
</template>
|
|
307
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
308
|
-
</a-popover>
|
|
309
|
-
</a-select>
|
|
310
|
-
</a-form-model-item>
|
|
311
|
-
</a-col>
|
|
312
|
-
<a-col :span="8">
|
|
313
|
-
<a-form-model-item label="数据源" prop="selectKey" v-if="(item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader') && item.selectType">
|
|
314
|
-
<a-select
|
|
315
|
-
show-search
|
|
316
|
-
v-model="item.selectKey"
|
|
317
|
-
v-if="item.selectType === 'key'"
|
|
318
|
-
placeholder="请选择字典键"
|
|
319
|
-
:filter-option="filterOption"
|
|
320
|
-
@change="changeSelectKey(item)"
|
|
321
|
-
>
|
|
322
|
-
<template>
|
|
323
|
-
<a-select-option
|
|
324
|
-
v-for="(optionItem,index) in option"
|
|
325
|
-
:key="index"
|
|
326
|
-
:value="Object.keys(optionItem)[0]">{{ optionItem[Object.keys(optionItem)[0]] }}
|
|
327
|
-
</a-select-option>
|
|
328
|
-
</template>
|
|
329
|
-
</a-select>
|
|
330
|
-
<a-input v-model="item.selectKey" v-if="item.selectType === 'logic'" placeholder="请输入业务逻辑名称"/>
|
|
331
|
-
<a-textarea v-model="item.selectKey" v-if="item.selectType === 'fixArray'" placeholder="请录入数据源" />
|
|
332
|
-
</a-form-model-item>
|
|
333
|
-
</a-col>
|
|
334
|
-
</a-row>
|
|
335
|
-
<a-form-model-item label="数据源加载方式" prop="selectLoadType" v-if="item.formType === 'select' && item.selectType === 'logic'">
|
|
336
|
-
<a-row :guttor="16">
|
|
337
|
-
<a-col :span="8">
|
|
338
|
-
<a-radio-group v-model="item.lazyLoad" default-value="false" button-style="solid">
|
|
339
|
-
<a-radio-button value="true">
|
|
340
|
-
懒加载搜索
|
|
341
|
-
</a-radio-button>
|
|
342
|
-
<a-radio-button value="false">
|
|
343
|
-
一次性加载
|
|
344
|
-
</a-radio-button>
|
|
345
|
-
</a-radio-group>
|
|
346
|
-
</a-col>
|
|
347
|
-
</a-row>
|
|
348
|
-
</a-form-model-item>
|
|
349
|
-
<a-form-model-item label="表单校验类型" prop="rule">
|
|
350
|
-
<a-row :gutter="16">
|
|
351
|
-
<a-col :span="8" v-if="item.formType === 'input' || item.formType === 'textarea'">
|
|
352
|
-
<a-select v-model="item.rule.type" placeholder="校验类型，可选">
|
|
353
|
-
<a-select-option key="string">字符串</a-select-option>
|
|
354
|
-
<a-select-option key="number">数字</a-select-option>
|
|
355
|
-
<a-select-option key="boolean">布尔值</a-select-option>
|
|
356
|
-
<a-select-option key="regexp">正则表达式</a-select-option>
|
|
357
|
-
<a-select-option key="integer">整数</a-select-option>
|
|
358
|
-
<a-select-option key="float">小数</a-select-option>
|
|
359
|
-
<a-select-option key="array">数组或集合</a-select-option>
|
|
360
|
-
<a-select-option key="date">日期</a-select-option>
|
|
361
|
-
<a-select-option key="email">邮箱</a-select-option>
|
|
362
|
-
<a-popover slot="suffixIcon" title="关于表单校验类型" placement="bottom">
|
|
363
|
-
<template slot="content">
|
|
364
|
-
<p>设置表单项的校验类型，默认字符串类型</p>
|
|
365
|
-
<p>你也可以设置该表单项是否必填</p>
|
|
366
|
-
</template>
|
|
367
|
-
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
|
368
|
-
</a-popover>
|
|
369
|
-
</a-select>
|
|
370
|
-
</a-col>
|
|
371
|
-
<a-col :span="8">
|
|
372
|
-
<a-radio-group v-model="item.rule.required" default-value="false" button-style="solid">
|
|
373
|
-
<a-radio-button value="true">
|
|
374
|
-
必选项
|
|
375
|
-
</a-radio-button>
|
|
376
|
-
<a-radio-button value="false">
|
|
377
|
-
非必选项
|
|
378
|
-
</a-radio-button>
|
|
379
|
-
</a-radio-group>
|
|
380
|
-
</a-col>
|
|
381
|
-
</a-row>
|
|
382
|
-
</a-form-model-item>
|
|
383
|
-
</template>
|
|
384
|
-
</a-form-model>
|
|
385
|
-
</a-modal>
|
|
47
|
+
<create-simple-form-query-item ref="queryItem" @itemHandle="itemHandle" @getColumn="getColumn"/>
|
|
386
48
|
<a-button type="primary" @click="view">操作</a-button>
|
|
387
49
|
</a-col>
|
|
388
50
|
<a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
|
|
@@ -401,29 +63,25 @@
|
|
|
401
63
|
</template>
|
|
402
64
|
|
|
403
65
|
<script>
|
|
404
|
-
import
|
|
66
|
+
import CreateSimpleFormQueryItem from './CreateSimpleFormQueryItem'
|
|
405
67
|
import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
|
|
406
68
|
import JsonViewer from 'vue-json-viewer'
|
|
407
69
|
import FileSaver from 'file-saver'
|
|
408
70
|
import { mapState } from 'vuex'
|
|
409
71
|
import { commonApi, post } from '@vue2-client/services/api'
|
|
410
|
-
const DemoJson = [{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }] }]
|
|
411
72
|
export default {
|
|
412
73
|
name: 'CreateSimpleFormQuery',
|
|
413
74
|
components: {
|
|
75
|
+
CreateSimpleFormQueryItem,
|
|
414
76
|
JsonViewer,
|
|
415
77
|
XAddForm
|
|
416
78
|
},
|
|
417
79
|
data () {
|
|
418
80
|
return {
|
|
419
|
-
fileType,
|
|
420
|
-
DemoJson,
|
|
421
81
|
// 页面宽度
|
|
422
82
|
screenWidth: document.documentElement.clientWidth,
|
|
423
83
|
// 效果预览模态框是否展示
|
|
424
84
|
modelVisible: false,
|
|
425
|
-
// 数据列配置模态框是否展示
|
|
426
|
-
dataColumnVisible: false,
|
|
427
85
|
// 数据列操作类型：新增，修改
|
|
428
86
|
type: '新增',
|
|
429
87
|
labelCol: { span: 4 },
|
|
@@ -433,35 +91,15 @@ export default {
|
|
|
433
91
|
describe: '',
|
|
434
92
|
column: []
|
|
435
93
|
},
|
|
436
|
-
lowerPath: [],
|
|
437
|
-
stockList: [],
|
|
438
94
|
result: {},
|
|
439
|
-
item: {
|
|
440
|
-
key: '',
|
|
441
|
-
title: '',
|
|
442
|
-
fileRootPath: undefined,
|
|
443
|
-
resUploadStock: undefined,
|
|
444
|
-
pathKey: undefined,
|
|
445
|
-
accept: undefined,
|
|
446
|
-
rule: {
|
|
447
|
-
required: 'false'
|
|
448
|
-
}
|
|
449
|
-
},
|
|
450
95
|
itemMap: {},
|
|
451
96
|
selectIndex: null,
|
|
452
97
|
selectType: undefined,
|
|
453
98
|
joinArray: [],
|
|
454
|
-
groupArray: ['默认组别'],
|
|
455
99
|
rules: {
|
|
456
100
|
group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
|
|
457
101
|
describe: [{ required: true, message: '请输入参数组描述', trigger: 'blur' }]
|
|
458
102
|
},
|
|
459
|
-
itemRules: {
|
|
460
|
-
key: [{ required: true, message: '请输入表单项名', trigger: 'blur' }],
|
|
461
|
-
title: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
|
462
|
-
selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
|
|
463
|
-
selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }]
|
|
464
|
-
},
|
|
465
103
|
formItems: [],
|
|
466
104
|
// 字典键集合
|
|
467
105
|
option: []
|
|
@@ -469,16 +107,9 @@ export default {
|
|
|
469
107
|
},
|
|
470
108
|
mounted () {
|
|
471
109
|
this.initView()
|
|
472
|
-
this.getStocks()
|
|
473
110
|
},
|
|
474
111
|
computed: {
|
|
475
|
-
...mapState('setting', ['isMobile'])
|
|
476
|
-
queryTypeV () {
|
|
477
|
-
if (this.item.formType) {
|
|
478
|
-
return queryType.filter(item => item.match.includes(this.item.formType))
|
|
479
|
-
}
|
|
480
|
-
return queryType
|
|
481
|
-
}
|
|
112
|
+
...mapState('setting', ['isMobile'])
|
|
482
113
|
},
|
|
483
114
|
props: {
|
|
484
115
|
visible: {
|
|
@@ -547,13 +178,6 @@ export default {
|
|
|
547
178
|
}
|
|
548
179
|
},
|
|
549
180
|
methods: {
|
|
550
|
-
// 添加多个下拉框分组标识符
|
|
551
|
-
addGroupName (val) {
|
|
552
|
-
this.item.groupName = undefined
|
|
553
|
-
if (!this.groupArray.find(item => item === val)) {
|
|
554
|
-
this.groupArray.push(val)
|
|
555
|
-
}
|
|
556
|
-
},
|
|
557
181
|
// 初始化组件
|
|
558
182
|
initView () {
|
|
559
183
|
this.result = {}
|
|
@@ -572,20 +196,6 @@ export default {
|
|
|
572
196
|
onModelClose () {
|
|
573
197
|
this.modelVisible = false
|
|
574
198
|
},
|
|
575
|
-
addColumnItem () {
|
|
576
|
-
this.type = '新增'
|
|
577
|
-
this.dataColumnVisible = true
|
|
578
|
-
},
|
|
579
|
-
editColumnItem (key, index) {
|
|
580
|
-
if (this.itemMap[key]) {
|
|
581
|
-
this.type = '修改'
|
|
582
|
-
this.item = Object.assign({ formType: 'input', type: 'string', pathKey: '' }, this.itemMap[key])
|
|
583
|
-
this.selectIndex = index
|
|
584
|
-
this.dataColumnVisible = true
|
|
585
|
-
} else {
|
|
586
|
-
this.$message.warn('编辑失败')
|
|
587
|
-
}
|
|
588
|
-
},
|
|
589
199
|
removeColumnItem (key, index) {
|
|
590
200
|
const _this = this
|
|
591
201
|
this.$confirm({
|
|
@@ -614,76 +224,31 @@ export default {
|
|
|
614
224
|
this.form.column.splice(index, 1, itemA)
|
|
615
225
|
this.form.column.splice(newIndex, 1, itemB)
|
|
616
226
|
},
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
}
|
|
622
|
-
})
|
|
623
|
-
},
|
|
624
|
-
itemHandle () {
|
|
625
|
-
const str = JSON.stringify(this.item)
|
|
626
|
-
const item = JSON.parse(str)
|
|
627
|
-
this.itemMap[item.key] = JSON.parse(str)
|
|
628
|
-
// 表单类型为输入框
|
|
629
|
-
if (item.formType && item.formType === 'input') {
|
|
630
|
-
delete item.formType
|
|
631
|
-
}
|
|
632
|
-
// 校验类型
|
|
633
|
-
if (item.rule.required) {
|
|
634
|
-
item.rule.required = item.rule.required.toString() === 'true'
|
|
635
|
-
} else {
|
|
636
|
-
item.rule.required = false
|
|
637
|
-
}
|
|
638
|
-
// 下拉框
|
|
639
|
-
if ((item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == '1') || item.formType === 'cascader') && item.selectKey) {
|
|
640
|
-
// 数据源为logic
|
|
641
|
-
if (item.selectType === 'logic') {
|
|
642
|
-
// 如果已经有了 logic@ 将不再拼接
|
|
643
|
-
if (item.selectKey.substring(0, 6) !== 'logic@') {
|
|
644
|
-
item.selectKey = 'logic@' + item.selectKey
|
|
645
|
-
}
|
|
646
|
-
if (!item.lazyLoad) {
|
|
647
|
-
delete item.lazyLoad
|
|
648
|
-
}
|
|
649
|
-
} else if (item.selectType === 'fixArray') {
|
|
650
|
-
// 数据源为固定json集合
|
|
651
|
-
if (!this.isJSON(item.selectKey)) {
|
|
652
|
-
this.$message.warning('下拉框数据源不是JSON集合')
|
|
653
|
-
return
|
|
654
|
-
}
|
|
655
|
-
delete item.lazyLoad
|
|
656
|
-
} else {
|
|
657
|
-
delete item.lazyLoad
|
|
658
|
-
}
|
|
659
|
-
if (item.formType !== 'selects') {
|
|
660
|
-
delete item.selectType
|
|
661
|
-
}
|
|
662
|
-
delete item.lazyLoad
|
|
663
|
-
} else {
|
|
664
|
-
if (item.formType !== 'selects') {
|
|
665
|
-
delete item.group
|
|
666
|
-
delete item.groupIndex
|
|
667
|
-
}
|
|
668
|
-
delete item.selectType
|
|
669
|
-
delete item.selectKey
|
|
670
|
-
delete item.selectKeyName
|
|
671
|
-
delete item.lazyLoad
|
|
672
|
-
}
|
|
673
|
-
if (this.type === '新增') {
|
|
227
|
+
itemHandle (item, type) {
|
|
228
|
+
console.log(JSON.stringify(item))
|
|
229
|
+
this.itemMap[item.key] = item
|
|
230
|
+
if (type === '新增') {
|
|
674
231
|
this.form.column.push(item)
|
|
675
232
|
} else {
|
|
676
|
-
this.form.column
|
|
233
|
+
this.$set(this.form.column, this.selectIndex, item)
|
|
677
234
|
}
|
|
678
|
-
this.
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
235
|
+
this.$message.success(`${type}成功`)
|
|
236
|
+
this.$refs.queryItem.flashModal(false)
|
|
237
|
+
},
|
|
238
|
+
addColumnItem () {
|
|
239
|
+
this.type = '新增'
|
|
240
|
+
this.$refs.queryItem.addColumnItemExecute()
|
|
241
|
+
},
|
|
242
|
+
editColumnItem (key, index) {
|
|
243
|
+
if (this.itemMap[key]) {
|
|
244
|
+
this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
|
|
245
|
+
this.selectIndex = index
|
|
246
|
+
} else {
|
|
247
|
+
this.$message.warn('编辑失败')
|
|
684
248
|
}
|
|
685
|
-
|
|
686
|
-
|
|
249
|
+
},
|
|
250
|
+
getColumn (callback) {
|
|
251
|
+
callback(JSON.parse(JSON.stringify(this.form.column)))
|
|
687
252
|
},
|
|
688
253
|
// 判断是否为json字符串
|
|
689
254
|
isJSON (str) {
|
|
@@ -738,69 +303,6 @@ export default {
|
|
|
738
303
|
}
|
|
739
304
|
})
|
|
740
305
|
},
|
|
741
|
-
// 修改上传到哪个仓库
|
|
742
|
-
changeStock (stock) {
|
|
743
|
-
if (stock) {
|
|
744
|
-
const stockValue = this.stockList.filter(item => item.id === stock)[0]
|
|
745
|
-
this.lowerPath = stockValue.f_lower_path_json ?? []
|
|
746
|
-
this.item.resUploadMode = stockValue.f_stock_type
|
|
747
|
-
this.item.fileRootPath = stockValue.f_root_path
|
|
748
|
-
this.item.stockAlias = stockValue.f_alias
|
|
749
|
-
this.item.pathKey = undefined
|
|
750
|
-
}
|
|
751
|
-
},
|
|
752
|
-
// 获取所有仓库
|
|
753
|
-
getStocks () {
|
|
754
|
-
if (this.stockList.length === 0) {
|
|
755
|
-
post('/webmeterapi/getFilesStock', {}).then(res => {
|
|
756
|
-
this.stockList = res.sort((a, b) => b.progress - a.progress)
|
|
757
|
-
}).catch(e => {})
|
|
758
|
-
}
|
|
759
|
-
},
|
|
760
|
-
modelCancel () {
|
|
761
|
-
this.dataColumnVisible = false
|
|
762
|
-
// 延迟是为了避免编辑数据窗口关闭时重置表单导致的闪烁
|
|
763
|
-
setTimeout(() => {
|
|
764
|
-
this.item = {
|
|
765
|
-
key: '',
|
|
766
|
-
title: '',
|
|
767
|
-
rule: {
|
|
768
|
-
required: 'false'
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
}, 100)
|
|
772
|
-
},
|
|
773
|
-
changeSelectKey (item) {
|
|
774
|
-
if (item.selectType === 'key' && item.selectKey) {
|
|
775
|
-
item.slot.type = 'badge'
|
|
776
|
-
item.slotKeyMap = item.selectKey
|
|
777
|
-
}
|
|
778
|
-
},
|
|
779
|
-
// 文件上传限制类型修改
|
|
780
|
-
itemAcceptChange (newVal) {
|
|
781
|
-
if (newVal.includes('*')) {
|
|
782
|
-
this.item.accept = ['*']
|
|
783
|
-
}
|
|
784
|
-
},
|
|
785
|
-
visitAcceptFile () {
|
|
786
|
-
window.open('https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#attr-accept')
|
|
787
|
-
},
|
|
788
|
-
changeFormType (item) {
|
|
789
|
-
console.log('=====')
|
|
790
|
-
if (item.formType === 'file' || item.formType === 'image') {
|
|
791
|
-
this.item.acceptCount = 3
|
|
792
|
-
this.getStocks()
|
|
793
|
-
this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
|
|
794
|
-
this.item.resUploadMode = 'server'
|
|
795
|
-
this.item.key = item.formType === 'file' ? 'FilesId' : 'Images'
|
|
796
|
-
} else {
|
|
797
|
-
if (['FilesId', 'Images'].includes(this.item.key)) { this.item.key = '' }
|
|
798
|
-
// 表单查询方式有预选项时
|
|
799
|
-
if (this.queryTypeV.length === 1) {
|
|
800
|
-
this.item.queryType = this.queryTypeV[0].value
|
|
801
|
-
}
|
|
802
|
-
}
|
|
803
|
-
},
|
|
804
306
|
}
|
|
805
307
|
}
|
|
806
308
|
</script>
|
|
@@ -0,0 +1,548 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<a-modal
|
|
3
|
+
:destroyOnClose="true"
|
|
4
|
+
:visible="visible"
|
|
5
|
+
:width="1250"
|
|
6
|
+
:zIndex="1001"
|
|
7
|
+
title="数据字段配置"
|
|
8
|
+
@cancel="modelCancel"
|
|
9
|
+
@ok="submitItem">
|
|
10
|
+
<a-form-model
|
|
11
|
+
ref="itemForm"
|
|
12
|
+
:model="item"
|
|
13
|
+
:rules="itemRules"
|
|
14
|
+
layout="vertical">
|
|
15
|
+
<a-row :gutter="16">
|
|
16
|
+
<a-col :span="6">
|
|
17
|
+
<a-card :bodyStyle="bodyStyle" title="基本属性">
|
|
18
|
+
<a-divider style="font-size: 14px;margin-top: 0">字段信息</a-divider>
|
|
19
|
+
<a-form-model-item label="标签名称" prop="title">
|
|
20
|
+
<a-input v-model="item.title" placeholder="请输入标签名称"/>
|
|
21
|
+
</a-form-model-item>
|
|
22
|
+
<a-form-model-item
|
|
23
|
+
label="字段名称"
|
|
24
|
+
prop="key">
|
|
25
|
+
<a-input ref="key" v-model="item.key" :disabled="keyDisabled" placeholder="请输入字段名">
|
|
26
|
+
<a-popover slot="suffix" placement="bottom" title="关于字段名称">
|
|
27
|
+
<template slot="content">
|
|
28
|
+
<p>设置数据字段的名称</p>
|
|
29
|
+
<p>用作SQL查询时为<span style="font-weight: bold">表别名.数据列名</span>的格式，如：i.id</p>
|
|
30
|
+
</template>
|
|
31
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
32
|
+
</a-popover>
|
|
33
|
+
</a-input>
|
|
34
|
+
</a-form-model-item>
|
|
35
|
+
<a-form-model-item
|
|
36
|
+
v-if="item.formType ==='addressSearch'"
|
|
37
|
+
label="坐标字段名">
|
|
38
|
+
<a-input :value="`${item.key}_coords`" :disabled="true">
|
|
39
|
+
<a-popover slot="suffix" placement="bottom" title="坐标字段名">
|
|
40
|
+
<template slot="content">
|
|
41
|
+
<p>表单类型为地点搜索框时：</p>
|
|
42
|
+
<p>新增/修改表单内,字段名称会存放地址名称,坐标字段名会存放坐标信息</p>
|
|
43
|
+
</template>
|
|
44
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
45
|
+
</a-popover>
|
|
46
|
+
</a-input>
|
|
47
|
+
</a-form-model-item>
|
|
48
|
+
</a-card>
|
|
49
|
+
</a-col>
|
|
50
|
+
<a-col :span="9">
|
|
51
|
+
<a-card :bodyStyle="bodyStyle" title="核心配置">
|
|
52
|
+
<template>
|
|
53
|
+
<a-divider style="font-size: 14px;margin-top: 0">表单配置</a-divider>
|
|
54
|
+
<a-form-model-item label="表单类型" prop="formType">
|
|
55
|
+
<a-select v-model="item.formType" placeholder="请选择表单类型" @change="changeFormType(item)">
|
|
56
|
+
<a-select-option v-for="formTypeItem in formType" :key="formTypeItem.key">{{ formTypeItem.label }}</a-select-option>
|
|
57
|
+
</a-select>
|
|
58
|
+
</a-form-model-item>
|
|
59
|
+
<template v-if="item.formType">
|
|
60
|
+
<a-form-model-item label="表单校验" prop="rule">
|
|
61
|
+
<a-row :gutter="16">
|
|
62
|
+
<a-col v-if="item.formType === 'input' || item.formType === 'textarea' && item.formType !=='file' && item.formType !=='image' " :span="12" >
|
|
63
|
+
<a-select v-model="item.rule.type" placeholder="校验类型" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
|
|
64
|
+
<a-select-option v-for="ruleTypeItem in formRuleType" :key="ruleTypeItem.key">{{ ruleTypeItem.label }}</a-select-option>
|
|
65
|
+
<a-popover slot="suffixIcon" placement="bottom" title="关于表单校验类型">
|
|
66
|
+
<template slot="content">
|
|
67
|
+
<p>设置表单项的校验类型</p>
|
|
68
|
+
</template>
|
|
69
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
70
|
+
</a-popover>
|
|
71
|
+
</a-select>
|
|
72
|
+
</a-col>
|
|
73
|
+
<a-col :span="12">
|
|
74
|
+
<a-radio-group v-model="item.rule.required" button-style="solid" default-value="false">
|
|
75
|
+
<a-radio-button value="true">
|
|
76
|
+
必选项
|
|
77
|
+
</a-radio-button>
|
|
78
|
+
<a-radio-button value="false">
|
|
79
|
+
非必选项
|
|
80
|
+
</a-radio-button>
|
|
81
|
+
</a-radio-group>
|
|
82
|
+
</a-col>
|
|
83
|
+
</a-row>
|
|
84
|
+
</a-form-model-item>
|
|
85
|
+
<a-form-model-item label="新增/修改场景选择" prop="addOrEdit">
|
|
86
|
+
<a-select v-model="item.addOrEdit" placeholder="请选择场景">
|
|
87
|
+
<a-select-option v-for="addOrEditItem in addOrEditTypeV" :key="addOrEditItem.key">{{ addOrEditItem.label }}</a-select-option>
|
|
88
|
+
<a-popover
|
|
89
|
+
slot="suffixIcon"
|
|
90
|
+
placement="bottom"
|
|
91
|
+
title="关于新增/修改场景选择">
|
|
92
|
+
<template slot="content">
|
|
93
|
+
<p>设置表单项的新增/修改场景</p>
|
|
94
|
+
<p>静默新增类型用于非人为新增的数据，不会生成表单项，且必须设置字段用途</p>
|
|
95
|
+
</template>
|
|
96
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
97
|
+
</a-popover>
|
|
98
|
+
</a-select>
|
|
99
|
+
</a-form-model-item>
|
|
100
|
+
<a-form-model-item v-if="item.addOrEdit === 'silenceAdd'" label="字段用途" prop="silencePurpose">
|
|
101
|
+
<a-select v-model="item.silencePurpose" placeholder="请选择字段用途" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
|
|
102
|
+
<a-select-option v-for="silencePurposeTypeItem in silencePurposeType" :key="silencePurposeTypeItem.key">{{ silencePurposeTypeItem.label }}</a-select-option>
|
|
103
|
+
<a-popover
|
|
104
|
+
slot="suffixIcon"
|
|
105
|
+
placement="bottom"
|
|
106
|
+
title="关于字段用途">
|
|
107
|
+
<template slot="content">
|
|
108
|
+
<p>用于静默新增时设置字段用途</p>
|
|
109
|
+
<p>在新增数据的表单提交时，页面会根据设置的字段用途自动获取相关数据并追加到表单中</p>
|
|
110
|
+
<p>当字段用途选择为<span style="font-weight: bold">自定义</span>时，必须指定一个业务逻辑(Logic)名称，表单提交前会将表单内容作为参数调用该Logic接口，并将Logic返回值作为表单值
|
|
111
|
+
</p>
|
|
112
|
+
</template>
|
|
113
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
114
|
+
</a-popover>
|
|
115
|
+
</a-select>
|
|
116
|
+
</a-form-model-item>
|
|
117
|
+
<a-form-model-item v-if="item.silencePurpose === 'customize'" label="字段用途对应Logic" prop="silenceSource">
|
|
118
|
+
<a-input v-model="item.silenceSource" placeholder="请输入业务逻辑名称"/>
|
|
119
|
+
</a-form-model-item>
|
|
120
|
+
</template>
|
|
121
|
+
</template>
|
|
122
|
+
</a-card>
|
|
123
|
+
</a-col>
|
|
124
|
+
<a-col v-if="item.formType" :span="9">
|
|
125
|
+
<a-card :bodyStyle="bodyStyle" title="扩展属性">
|
|
126
|
+
<template v-if="item.formType === 'input' || item.formType === 'select' || item.formType === 'selects'">
|
|
127
|
+
<a-divider style="font-size: 14px;margin-top: 0">提示相关</a-divider>
|
|
128
|
+
<a-form-model-item label="表单水印" prop="placeholder">
|
|
129
|
+
<a-input v-model="item.placeholder" placeholder="表单水印（placeholder）" />
|
|
130
|
+
</a-form-model-item>
|
|
131
|
+
</template>
|
|
132
|
+
<template v-if="item.formType === 'selects'">
|
|
133
|
+
<a-divider style="font-size: 14px;margin-top: 0">级联选择相关</a-divider>
|
|
134
|
+
<a-form-model-item label="是否根节点" prop="groupIndexView">
|
|
135
|
+
<a-radio-group
|
|
136
|
+
v-model="item.groupIndexView"
|
|
137
|
+
button-style="solid"
|
|
138
|
+
@change="groupIndexChange">
|
|
139
|
+
<a-radio-button value="1">
|
|
140
|
+
是
|
|
141
|
+
</a-radio-button>
|
|
142
|
+
<a-radio-button value="0">
|
|
143
|
+
否
|
|
144
|
+
</a-radio-button>
|
|
145
|
+
</a-radio-group>
|
|
146
|
+
</a-form-model-item>
|
|
147
|
+
<a-form-model-item v-show="item.groupIndexView === '0' && item.groupIndex !== -1" label="所属父级联动框" prop="groupIndex">
|
|
148
|
+
<a-select
|
|
149
|
+
ref="groupIndex"
|
|
150
|
+
v-model="item.parent_title"
|
|
151
|
+
placeholder="请选择父级联动框"
|
|
152
|
+
:getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
|
|
153
|
+
@change="parent_title_change">
|
|
154
|
+
<a-select-option v-for="parent_item in parent_node" :key="parent_item.key">
|
|
155
|
+
{{ parent_item.title }}
|
|
156
|
+
</a-select-option>
|
|
157
|
+
</a-select>
|
|
158
|
+
</a-form-model-item>
|
|
159
|
+
</template>
|
|
160
|
+
<template v-if="selectDataShow">
|
|
161
|
+
<a-divider style="font-size: 14px;margin-top: 0">数据源相关</a-divider>
|
|
162
|
+
<a-form-model-item label="数据源类型" prop="selectType">
|
|
163
|
+
<a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="this.item.selectKey = undefined">
|
|
164
|
+
<a-select-option v-for="selectDataTypeItem in selectDataType.filter(h=>!h.noMatch.includes(item.formType))" :key="selectDataTypeItem.key">{{ selectDataTypeItem.label }}</a-select-option>
|
|
165
|
+
<a-popover
|
|
166
|
+
slot="suffixIcon"
|
|
167
|
+
placement="bottom"
|
|
168
|
+
title="关于数据源类型">
|
|
169
|
+
<template slot="content">
|
|
170
|
+
<p>设置数据源</p>
|
|
171
|
+
<p>数据源类型分为三种，你可以根据需要选择</p>
|
|
172
|
+
<p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
|
|
173
|
+
<p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
|
|
174
|
+
<p>固定集合：选项为静态值，JSONArray格式</p>
|
|
175
|
+
<p>当表单为级联选择框类型时，返回的数据需按照以下形式：</p>
|
|
176
|
+
<json-viewer
|
|
177
|
+
:expand-depth="parseInt('100')"
|
|
178
|
+
:value="DemoJson"
|
|
179
|
+
style="overflow: auto;max-height: 440px"></json-viewer>
|
|
180
|
+
</template>
|
|
181
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
182
|
+
</a-popover>
|
|
183
|
+
</a-select>
|
|
184
|
+
</a-form-model-item>
|
|
185
|
+
<a-form-model-item v-if="item.selectType" label="数据源" prop="selectKey">
|
|
186
|
+
<a-select
|
|
187
|
+
v-if="item.selectType === 'key'"
|
|
188
|
+
v-model="item.selectKey"
|
|
189
|
+
:filter-option="filterOption"
|
|
190
|
+
placeholder="请选择字典键"
|
|
191
|
+
show-search>
|
|
192
|
+
<template>
|
|
193
|
+
<a-select-option
|
|
194
|
+
v-for="(optionItem,index) in option"
|
|
195
|
+
:key="index"
|
|
196
|
+
:value="Object.keys(optionItem)[0]">{{ optionItem[Object.keys(optionItem)[0]] }}
|
|
197
|
+
</a-select-option>
|
|
198
|
+
</template>
|
|
199
|
+
</a-select>
|
|
200
|
+
<a-input v-if="item.selectType === 'logic'" v-model="item.selectKey" placeholder="请输入业务逻辑名称"/>
|
|
201
|
+
<a-textarea v-if="item.selectType === 'fixArray'" v-model="item.selectKey" placeholder="请录入数据源"/>
|
|
202
|
+
</a-form-model-item>
|
|
203
|
+
<a-form-model-item v-if="item.selectType === 'logic'" label="数据源加载方式" prop="selectLoadType">
|
|
204
|
+
<a-radio-group v-model="item.lazyLoad" button-style="solid" default-value="false">
|
|
205
|
+
<a-radio-button value="true">
|
|
206
|
+
懒加载搜索
|
|
207
|
+
</a-radio-button>
|
|
208
|
+
<a-radio-button value="false">
|
|
209
|
+
一次性加载
|
|
210
|
+
</a-radio-button>
|
|
211
|
+
</a-radio-group>
|
|
212
|
+
</a-form-model-item>
|
|
213
|
+
</template>
|
|
214
|
+
<a-form-model-item v-if="selectDataShow || item.groupIndexView" label="关联外键字段" prop="selectKeyName">
|
|
215
|
+
<a-input v-model="item.selectKeyName" placeholder="该列关联的外键字段">
|
|
216
|
+
<a-popover slot="suffix" placement="bottom" title="关于关联外键字段">
|
|
217
|
+
<template slot="content">
|
|
218
|
+
<p><span style="font-weight: bold;"><span style="color: #FF0036">非必需的实验性功能：</span>设置该参数需开发岗指导</span></p>
|
|
219
|
+
<p>当字段与主子表外键有关系时，你可以指定<span style="font-weight: bold">该列所关联的外键字段名</span>
|
|
220
|
+
</p>
|
|
221
|
+
<p>设置该参数是为了该字段用作表单查询时，系统可以通过设置的关联外键字段，而非字面值作为查询条件</p>
|
|
222
|
+
<p>示例：</p>
|
|
223
|
+
<p>主表为t_userfiles(表档案)表，别名为u，与t_gasbrand(气表品牌表)有关联关系，别名为g，为了显示表档案对应的气表品牌数据，我们将数据字段名设置为g.f_gasbrand</p>
|
|
224
|
+
<p>这样我们就可以在table中看到气表品牌了，但是用户如果通过气表品牌下拉框进行筛选，我们指定的g.f_gasbrand只是气表品牌的值，而实际关联字段是u.f_gasbrand_id</p>
|
|
225
|
+
<p>所以如果我们指定了关联外键字段u.f_gasbrand_id，系统则会使用u.f_gasbrand_id筛选数据，而不是g.f_gasbrand，从而优化了查询效率
|
|
226
|
+
</p>
|
|
227
|
+
</template>
|
|
228
|
+
<a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
|
|
229
|
+
</a-popover>
|
|
230
|
+
</a-input>
|
|
231
|
+
</a-form-model-item>
|
|
232
|
+
<template v-if="item.formType === 'file' || item.formType === 'image'">
|
|
233
|
+
<a-divider style="font-size: 14px;margin-top: 0">文件上传相关</a-divider>
|
|
234
|
+
<a-form-model-item label="允许上传文件数量" prop="accept" style="margin-bottom: 5px;">
|
|
235
|
+
<a-slider
|
|
236
|
+
v-model="item.acceptCount"
|
|
237
|
+
:marks="{ 1: '1', 3: '3', 5: '5', 10: '10', 15: '15', 20: '20'}"
|
|
238
|
+
:max="20"
|
|
239
|
+
:min="1"
|
|
240
|
+
/>
|
|
241
|
+
</a-form-model-item>
|
|
242
|
+
<a-form-model-item label="上传的仓库" prop="resUploadStock">
|
|
243
|
+
<a-select v-model="item.resUploadStock" placeholder="选择文件上传到的仓库" @change="changeStock">
|
|
244
|
+
<a-select-option v-for="stock in stockList" :key="stock.id">{{ stock.f_name }}</a-select-option>
|
|
245
|
+
</a-select>
|
|
246
|
+
</a-form-model-item>
|
|
247
|
+
<a-form-model-item v-if="item.resUploadStock" label="具体路径" prop="pathKey">
|
|
248
|
+
<a-select v-model="item.pathKey" placeholder="仓库扩展路径">
|
|
249
|
+
<a-select-option v-for="pathKey in lowerPath" :key="pathKey.label">{{ pathKey.label }}</a-select-option>
|
|
250
|
+
</a-select>
|
|
251
|
+
</a-form-model-item>
|
|
252
|
+
<a-form-model-item v-if="item.formType === 'file'" label="允许上传文件类型" prop="accept">
|
|
253
|
+
<a-select v-model="item.accept" mode="tags" placeholder="指定文件类型，默认不限制" @change="itemAcceptChange">
|
|
254
|
+
<a-select-option v-for="type_item in fileType" :key="type_item.accept">{{ type_item.label }}</a-select-option>
|
|
255
|
+
</a-select>
|
|
256
|
+
</a-form-model-item>
|
|
257
|
+
</template>
|
|
258
|
+
</a-card>
|
|
259
|
+
</a-col>
|
|
260
|
+
</a-row>
|
|
261
|
+
</a-form-model>
|
|
262
|
+
</a-modal>
|
|
263
|
+
</template>
|
|
264
|
+
|
|
265
|
+
<script>
|
|
266
|
+
import {
|
|
267
|
+
fileType,
|
|
268
|
+
formRuleType,
|
|
269
|
+
formType,
|
|
270
|
+
silencePurposeType,
|
|
271
|
+
addOrEditType,
|
|
272
|
+
selectDataType
|
|
273
|
+
} from '@vue2-client/config/CreateQueryConfig'
|
|
274
|
+
import { commonApi, post } from '@vue2-client/services/api'
|
|
275
|
+
import JsonViewer from 'vue-json-viewer'
|
|
276
|
+
|
|
277
|
+
const DemoJson = [{
|
|
278
|
+
value: 'zhejiang',
|
|
279
|
+
label: 'Zhejiang',
|
|
280
|
+
children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }]
|
|
281
|
+
}]
|
|
282
|
+
|
|
283
|
+
export default {
|
|
284
|
+
name: 'CreateSimpleFormQueryItem',
|
|
285
|
+
components: {
|
|
286
|
+
JsonViewer
|
|
287
|
+
},
|
|
288
|
+
computed: {
|
|
289
|
+
// 是否展示数据源相关字段
|
|
290
|
+
selectDataShow () {
|
|
291
|
+
return this.item.formType === 'select' || (this.item.formType === 'selects' && this.item.groupIndexView === '1') || this.item.formType === 'checkbox' || this.item.formType === 'radio'
|
|
292
|
+
},
|
|
293
|
+
// 字段名称是否禁用
|
|
294
|
+
keyDisabled () {
|
|
295
|
+
return this.item.formType === 'file' || this.item.formType === 'image'
|
|
296
|
+
},
|
|
297
|
+
addOrEditTypeV () {
|
|
298
|
+
return addOrEditType.filter(item => {
|
|
299
|
+
return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
|
|
300
|
+
})
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
data () {
|
|
304
|
+
return {
|
|
305
|
+
DemoJson,
|
|
306
|
+
formType,
|
|
307
|
+
formRuleType,
|
|
308
|
+
fileType,
|
|
309
|
+
silencePurposeType,
|
|
310
|
+
addOrEditType,
|
|
311
|
+
selectDataType,
|
|
312
|
+
// 控制modal框
|
|
313
|
+
visible: false,
|
|
314
|
+
type: '',
|
|
315
|
+
bodyStyle: {
|
|
316
|
+
height: '500px',
|
|
317
|
+
overflowY: 'auto'
|
|
318
|
+
},
|
|
319
|
+
// 表单项
|
|
320
|
+
item: {
|
|
321
|
+
key: '',
|
|
322
|
+
title: '',
|
|
323
|
+
rule: {
|
|
324
|
+
required: 'false'
|
|
325
|
+
},
|
|
326
|
+
formType: 'input',
|
|
327
|
+
accept: undefined,
|
|
328
|
+
pathKey: undefined,
|
|
329
|
+
groupIndexView: undefined,
|
|
330
|
+
selectType: undefined,
|
|
331
|
+
selectKey: undefined,
|
|
332
|
+
addOrEdit: 'all',
|
|
333
|
+
fileRootPath: undefined,
|
|
334
|
+
selectKeyName: undefined,
|
|
335
|
+
resUploadStock: undefined
|
|
336
|
+
},
|
|
337
|
+
// 数据仓库列表
|
|
338
|
+
stockList: [],
|
|
339
|
+
// 扩展目录
|
|
340
|
+
lowerPath: [],
|
|
341
|
+
parent_node: [],
|
|
342
|
+
// 必填控制
|
|
343
|
+
itemRules: {
|
|
344
|
+
formType: [{ required: true, message: '请输入表单类型', trigger: 'change' }],
|
|
345
|
+
key: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
|
|
346
|
+
title: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
|
|
347
|
+
selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
|
|
348
|
+
selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }],
|
|
349
|
+
'slot.value': [{ required: true, message: '请输入文本溢出上限长度', trigger: 'blur' }],
|
|
350
|
+
'slot.keyMap': [{ required: true, message: '请输入徽标字典键', trigger: 'blur' }],
|
|
351
|
+
silencePurpose: [{ required: true, message: '请选择字段用途', trigger: 'change' }],
|
|
352
|
+
silenceSource: [{ required: true, message: '请输入业务逻辑名称', trigger: 'blur' }],
|
|
353
|
+
groupIndex: [{ required: true, message: '请选择父级联动框', trigger: 'blur' }],
|
|
354
|
+
resUploadStock: [{ required: true, message: '请选择上传到的仓库', trigger: 'blur' }],
|
|
355
|
+
pathKey: [{ required: true, message: '请选择上传到的扩展目录', trigger: 'blur' }]
|
|
356
|
+
},
|
|
357
|
+
// 字典键集合
|
|
358
|
+
option: []
|
|
359
|
+
}
|
|
360
|
+
},
|
|
361
|
+
mounted () {
|
|
362
|
+
},
|
|
363
|
+
props: { },
|
|
364
|
+
methods: {
|
|
365
|
+
initItem (lysis = {}) {
|
|
366
|
+
this.item = Object.assign({
|
|
367
|
+
key: '',
|
|
368
|
+
title: '',
|
|
369
|
+
rule: {
|
|
370
|
+
required: 'false'
|
|
371
|
+
},
|
|
372
|
+
selectKey: undefined,
|
|
373
|
+
formType: 'input',
|
|
374
|
+
fileRootPath: undefined,
|
|
375
|
+
pathKey: undefined,
|
|
376
|
+
accept: undefined,
|
|
377
|
+
selectType: undefined,
|
|
378
|
+
groupIndexView: undefined,
|
|
379
|
+
addOrEdit: 'all',
|
|
380
|
+
selectKeyName: undefined,
|
|
381
|
+
resUploadStock: undefined
|
|
382
|
+
}, lysis)
|
|
383
|
+
},
|
|
384
|
+
// 控制 展示
|
|
385
|
+
flashModal (show = 'None') {
|
|
386
|
+
const bool = show === 'None' ? !this.visible : !!show
|
|
387
|
+
if (bool && this.option.length === 0) {
|
|
388
|
+
post(commonApi.getDictionaryParam, {}).then(res => {
|
|
389
|
+
this.option = res
|
|
390
|
+
})
|
|
391
|
+
}
|
|
392
|
+
this.visible = bool
|
|
393
|
+
},
|
|
394
|
+
// 编辑数据字段前准备数据
|
|
395
|
+
editColumnItemExecute (_item) {
|
|
396
|
+
this.type = '修改'
|
|
397
|
+
const defaultValue = { formType: 'input', type: 'string', addOrEdit: 'all', slot: { type: 'default' }, rule: {}, selectKey: {} }
|
|
398
|
+
_item = Object.assign({}, defaultValue, _item)
|
|
399
|
+
if (_item.formType === 'file' || _item.formType === 'image') {
|
|
400
|
+
this.getStocks()
|
|
401
|
+
// 如果有仓库 则获取该仓库的扩展路径
|
|
402
|
+
if (_item.resUploadStock) {
|
|
403
|
+
this.lowerPath = this.stockList.filter(item => item.id === _item.resUploadStock)[0]?.f_lower_path_json ?? []
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
if (_item.formType === 'selects') {
|
|
407
|
+
// 因为 groupIndex 可能有很多值 单选框不行 赋给一个新的变量
|
|
408
|
+
_item.groupIndexView = _item.groupIndex === 1 ? '1' : '0'
|
|
409
|
+
}
|
|
410
|
+
this.item = _item
|
|
411
|
+
this.flashModal()
|
|
412
|
+
},
|
|
413
|
+
// 增加数据字段前数据处理
|
|
414
|
+
addColumnItemExecute () {
|
|
415
|
+
this.type = '新增'
|
|
416
|
+
this.initItem()
|
|
417
|
+
this.flashModal()
|
|
418
|
+
},
|
|
419
|
+
modelCancel () {
|
|
420
|
+
this.flashModal()
|
|
421
|
+
},
|
|
422
|
+
submitItem () {
|
|
423
|
+
this.$refs.itemForm.validate(valid => {
|
|
424
|
+
if (valid) { this.itemHandle() }
|
|
425
|
+
})
|
|
426
|
+
},
|
|
427
|
+
visitAcceptFile () {
|
|
428
|
+
window.open('https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#attr-accept')
|
|
429
|
+
},
|
|
430
|
+
// 修改上传到哪个仓库
|
|
431
|
+
changeStock (stock) {
|
|
432
|
+
if (stock) {
|
|
433
|
+
const stockValue = this.stockList.filter(item => item.id === stock)[0]
|
|
434
|
+
this.lowerPath = stockValue.f_lower_path_json ?? []
|
|
435
|
+
this.item.resUploadMode = stockValue.f_stock_type
|
|
436
|
+
this.item.fileRootPath = stockValue.f_root_path
|
|
437
|
+
this.item.stockAlias = stockValue.f_alias
|
|
438
|
+
this.item.pathKey = undefined
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
// 文件上传限制类型修改
|
|
442
|
+
itemAcceptChange (newVal) {
|
|
443
|
+
if (newVal.includes('*')) {
|
|
444
|
+
this.item.accept = ['*']
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
parent_title_change (parentKey) {
|
|
448
|
+
const parentArr = this.getColumn().filter(item => item.formType === 'selects' && item.key === parentKey)
|
|
449
|
+
if (parentArr.length === 1) {
|
|
450
|
+
this.item.groupIndex = parentArr[0].groupIndex + 1
|
|
451
|
+
this.item.group = parentArr[0].group
|
|
452
|
+
this.item.parent_title = parentArr[0].title
|
|
453
|
+
} else {
|
|
454
|
+
this.$message.error('数据字段中有字段别名相同,请检查!')
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
groupIndexChange ({ target }) {
|
|
458
|
+
if (target.value === '1') {
|
|
459
|
+
this.item.groupIndex = 1
|
|
460
|
+
this.item.groupIndexView = '1'
|
|
461
|
+
if (this.item.title) {
|
|
462
|
+
this.item.group = this.item.title + '组'
|
|
463
|
+
} else {
|
|
464
|
+
this.item.groupIndex = undefined
|
|
465
|
+
this.item.groupIndexView = undefined
|
|
466
|
+
this.$message.error('请先输入字段中文名称!')
|
|
467
|
+
}
|
|
468
|
+
} else {
|
|
469
|
+
if (!this.item.title) {
|
|
470
|
+
this.$message.error('请先输入字段名称!')
|
|
471
|
+
this.item.groupIndex = -1
|
|
472
|
+
this.item.groupIndexView = undefined
|
|
473
|
+
return
|
|
474
|
+
}
|
|
475
|
+
this.item.groupIndex = undefined
|
|
476
|
+
// 获取所有可以当作父节点的字段
|
|
477
|
+
this.parent_node = this.getColumn().filter(item => item.formType === 'selects' && item.key !== this.item.key)
|
|
478
|
+
}
|
|
479
|
+
},
|
|
480
|
+
getColumn () {
|
|
481
|
+
let result = {}
|
|
482
|
+
this.$emit('getColumn', val => { result = val })
|
|
483
|
+
return result
|
|
484
|
+
},
|
|
485
|
+
changeFormType (item) {
|
|
486
|
+
this.initItem({ key: item.key, title: item.title, formType: item.formType })
|
|
487
|
+
if (item.formType === 'file' || item.formType === 'image') {
|
|
488
|
+
this.item.acceptCount = 3
|
|
489
|
+
this.getStocks()
|
|
490
|
+
this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
|
|
491
|
+
this.item.resUploadMode = 'server'
|
|
492
|
+
this.item.key = item.formType === 'file' ? 'FilesId' : 'Images'
|
|
493
|
+
} else {
|
|
494
|
+
if (['FilesId', 'Images'].includes(this.item.key)) { this.item.key = '' }
|
|
495
|
+
}
|
|
496
|
+
},
|
|
497
|
+
// 获取所有仓库
|
|
498
|
+
getStocks () {
|
|
499
|
+
if (this.stockList.length === 0) {
|
|
500
|
+
post('/webmeterapi/getFilesStock', {}).then(res => {
|
|
501
|
+
this.stockList = res.sort((a, b) => b.progress - a.progress)
|
|
502
|
+
}).catch(e => {})
|
|
503
|
+
}
|
|
504
|
+
},
|
|
505
|
+
itemHandle () {
|
|
506
|
+
// 查询表单项或者新增/修改表单项
|
|
507
|
+
if (this.item.selectType && this.item.selectType === 'logic' && this.item.selectKey.substring(0, 6) !== 'logic@') {
|
|
508
|
+
// 数据源为logic
|
|
509
|
+
this.item.selectKey = 'logic@' + this.item.selectKey
|
|
510
|
+
} else if (this.item.selectType && this.item.selectType === 'fixArray' && !this.isJSON(this.item.selectKey)) {
|
|
511
|
+
// 数据源为固定json集合
|
|
512
|
+
this.$message.warning('下拉框数据源不是JSON集合')
|
|
513
|
+
return
|
|
514
|
+
}
|
|
515
|
+
// 如果和数据源字段无关
|
|
516
|
+
if (!this.selectDataShow) {
|
|
517
|
+
this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
|
|
518
|
+
}
|
|
519
|
+
this.delKey(this.item, 'addOrEdit', 'queryType', 'default', 'silencePurpose', 'silenceSource', 'rule', 'lazyLoad')
|
|
520
|
+
this.item.dataModeArray = ['addOrEditForm']
|
|
521
|
+
this.$emit('itemHandle', this.item, this.type)
|
|
522
|
+
this.initItem()
|
|
523
|
+
},
|
|
524
|
+
filterOption (input, option) {
|
|
525
|
+
return (
|
|
526
|
+
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
527
|
+
)
|
|
528
|
+
},
|
|
529
|
+
delKey (obj, ...args) {
|
|
530
|
+
args.forEach(v => {
|
|
531
|
+
delete obj[v]
|
|
532
|
+
})
|
|
533
|
+
return obj
|
|
534
|
+
},
|
|
535
|
+
// 判断是否为json字符串
|
|
536
|
+
isJSON (str) {
|
|
537
|
+
if (typeof str == 'string') {
|
|
538
|
+
try {
|
|
539
|
+
const obj = JSON.parse(str)
|
|
540
|
+
return !!(typeof obj == 'object' && obj)
|
|
541
|
+
} catch (e) {
|
|
542
|
+
return false
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
</script>
|
package/vue.config.js
CHANGED
|
@@ -35,8 +35,8 @@ const isProd = process.env.NODE_ENV === 'production'
|
|
|
35
35
|
// }
|
|
36
36
|
|
|
37
37
|
const server = 'http://121.36.106.17:8400'
|
|
38
|
-
const local = 'http://localhost:8445/webmeter'
|
|
39
|
-
|
|
38
|
+
// const local = 'http://localhost:8445/webmeter'
|
|
39
|
+
const local = 'http://123.60.214.109:8405/webmeter'
|
|
40
40
|
|
|
41
41
|
module.exports = {
|
|
42
42
|
devServer: {
|