ol-base-components 2.5.0 → 2.6.0
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/.eslintrc +59 -8
- package/.prettierignore +6 -0
- package/.prettierrc +14 -0
- package/README.md +225 -152
- package/package.json +4 -1
- package/src/App.vue +416 -354
- package/src/assets/duojibiaotou.png +0 -0
- package/src/component/countCom.vue +105 -0
- package/src/package/form/index.js +7 -0
- package/src/package/form/src/index.vue +384 -0
- package/src/package/formSearch/src/index.vue +53 -40
- package/src/package/index.js +2 -1
- package/src/package/table/src/TableColumn.vue +80 -0
- package/src/package/table/src/index.vue +883 -784
|
Binary file
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="quantity-control">
|
|
3
|
+
<transition name="slide-fade">
|
|
4
|
+
<div
|
|
5
|
+
v-if="quantity > 0"
|
|
6
|
+
class="quantity-wrapper"
|
|
7
|
+
>
|
|
8
|
+
<button
|
|
9
|
+
class="btn minus"
|
|
10
|
+
@click="decrease"
|
|
11
|
+
>-</button>
|
|
12
|
+
<span class="quantity">{{ quantity }}</span>
|
|
13
|
+
</div>
|
|
14
|
+
</transition>
|
|
15
|
+
<button
|
|
16
|
+
class="btn plus addBtn"
|
|
17
|
+
@click="increase"
|
|
18
|
+
>+</button>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
export default {
|
|
24
|
+
name: 'QuantityControl',
|
|
25
|
+
props: {
|
|
26
|
+
value: {
|
|
27
|
+
type: Number,
|
|
28
|
+
default: 0
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
data() {
|
|
32
|
+
return {
|
|
33
|
+
quantity: this.value
|
|
34
|
+
};
|
|
35
|
+
},
|
|
36
|
+
watch: {
|
|
37
|
+
value(newVal) {
|
|
38
|
+
this.quantity = newVal;
|
|
39
|
+
},
|
|
40
|
+
quantity(newVal) {
|
|
41
|
+
this.$emit('input', newVal);
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
methods: {
|
|
45
|
+
increase() {
|
|
46
|
+
this.quantity++;
|
|
47
|
+
},
|
|
48
|
+
decrease() {
|
|
49
|
+
if (this.quantity > 0) {
|
|
50
|
+
this.quantity--;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.quantity-control {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: flex-end;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.btn {
|
|
65
|
+
width: 30px;
|
|
66
|
+
height: 30px;
|
|
67
|
+
border: 1px solid #ccc;
|
|
68
|
+
background-color: #eee;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
font-size: 16px;
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
transition: background-color 0.3s ease;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.btn:hover {
|
|
78
|
+
background-color: #f0f0f0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.addBtn {
|
|
82
|
+
z-index: 1000;
|
|
83
|
+
}
|
|
84
|
+
.quantity-wrapper {
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.quantity {
|
|
90
|
+
margin: 0 10px;
|
|
91
|
+
font-size: 16px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* 动画效果 */
|
|
95
|
+
.slide-fade-enter-active,
|
|
96
|
+
.slide-fade-leave-active {
|
|
97
|
+
transition: all 0.1s ease;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.slide-fade-enter,
|
|
101
|
+
.slide-fade-leave-to {
|
|
102
|
+
opacity: 0;
|
|
103
|
+
transform: translateX(30px);
|
|
104
|
+
}
|
|
105
|
+
</style>
|
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<el-form
|
|
4
|
+
ref="formRef"
|
|
5
|
+
:model="form.value"
|
|
6
|
+
:rules="form.rules"
|
|
7
|
+
style="display: flex; flex-wrap: wrap"
|
|
8
|
+
v-bind="{
|
|
9
|
+
labelWidth: '130px',
|
|
10
|
+
disabled: !form.type,
|
|
11
|
+
...$attrs,
|
|
12
|
+
...form.attrs,
|
|
13
|
+
}"
|
|
14
|
+
v-on="$listeners"
|
|
15
|
+
>
|
|
16
|
+
<template v-for="(item, index) in form.model">
|
|
17
|
+
<el-form-item
|
|
18
|
+
v-if="!item.hidden"
|
|
19
|
+
:key="index"
|
|
20
|
+
:label="item.label"
|
|
21
|
+
:prop="item.prop"
|
|
22
|
+
:required="item.required || false"
|
|
23
|
+
:style="{ width: width(item) }"
|
|
24
|
+
>
|
|
25
|
+
<el-input
|
|
26
|
+
v-if="item.type == 'input'"
|
|
27
|
+
v-model="form.value[item.prop]"
|
|
28
|
+
:placeholder="
|
|
29
|
+
item.readonly
|
|
30
|
+
? item.placeholder || item.label
|
|
31
|
+
: `请输入${item.placeholder || item.label}`
|
|
32
|
+
"
|
|
33
|
+
:clearable="item.clearable || true"
|
|
34
|
+
:readonly="item.readonly || false"
|
|
35
|
+
:show-password="item.showPassword || false"
|
|
36
|
+
v-bind="{
|
|
37
|
+
...item.props,
|
|
38
|
+
disabled: inputDisabled(item),
|
|
39
|
+
}"
|
|
40
|
+
/>
|
|
41
|
+
<el-input-number
|
|
42
|
+
v-else-if="item.type == 'number'"
|
|
43
|
+
v-model="form.value[item.prop]"
|
|
44
|
+
:placeholder="`请输入${item.placeholder || item.label}`"
|
|
45
|
+
:clearable="item.clearable || true"
|
|
46
|
+
:readonly="item.readonly || false"
|
|
47
|
+
v-bind="{ min: 0, ...item.props }"
|
|
48
|
+
/>
|
|
49
|
+
<el-input
|
|
50
|
+
v-else-if="item.type == 'textarea'"
|
|
51
|
+
v-model="form.value[item.prop]"
|
|
52
|
+
type="textarea"
|
|
53
|
+
:placeholder="`请输入${item.placeholder || item.label}`"
|
|
54
|
+
:autosize="item.autosize"
|
|
55
|
+
:readonly="item.readonly || false"
|
|
56
|
+
:clearable="item.clearable || true"
|
|
57
|
+
:maxlength="item.length || ''"
|
|
58
|
+
/>
|
|
59
|
+
<el-switch
|
|
60
|
+
v-else-if="item.type == 'switch'"
|
|
61
|
+
v-model="form.value[item.prop]"
|
|
62
|
+
class="switchStyle"
|
|
63
|
+
active-text="启用"
|
|
64
|
+
inactive-text="禁用"
|
|
65
|
+
v-bind="item.props || {}"
|
|
66
|
+
/>
|
|
67
|
+
<el-radio-group v-else-if="item.type == 'radio'" v-model="form.value[item.prop]">
|
|
68
|
+
<el-radio v-for="ctem in item.child" :key="ctem.key" :label="ctem.key">{{
|
|
69
|
+
ctem.value
|
|
70
|
+
}}</el-radio>
|
|
71
|
+
</el-radio-group>
|
|
72
|
+
<!-- v-bind="item.props || { type: 'date' }" -->
|
|
73
|
+
<el-date-picker
|
|
74
|
+
v-else-if="item.type == 'date'"
|
|
75
|
+
v-model="form.value[item.prop]"
|
|
76
|
+
:placeholder="item.placeholder || '请选择日期'"
|
|
77
|
+
style="width: 100%"
|
|
78
|
+
v-bind="{ type: 'date', ...item.props }"
|
|
79
|
+
:clearable="item.clearable || true"
|
|
80
|
+
v-on="{
|
|
81
|
+
...item.listeners,
|
|
82
|
+
change: event => changeHandle(event, item),
|
|
83
|
+
}"
|
|
84
|
+
/>
|
|
85
|
+
<Tree-select
|
|
86
|
+
v-else-if="item.type == 'treeSelect'"
|
|
87
|
+
v-model="form.value[item.prop]"
|
|
88
|
+
v-bind="item.props || {}"
|
|
89
|
+
:options="item.child"
|
|
90
|
+
@getValue="item.change && item.change(form.value[item.prop])"
|
|
91
|
+
/>
|
|
92
|
+
<!-- <el-select v-else-if="item.type == 'select'" v-model="form.value[item.prop]"
|
|
93
|
+
:placeholder="`请选择${item.placeholder || item.label}`"
|
|
94
|
+
:clearable="'clearable' in item ? item.clearable : true" :disabled="item.disabled || false"
|
|
95
|
+
v-bind="item.props || {}" v-on="{ ...item.listeners, change: selectChangeHandle(item) }">
|
|
96
|
+
<el-option v-for="(jtem, jindex) in item.child" :key="jindex" :label="jtem.value"
|
|
97
|
+
:value="jtem.key"></el-option>
|
|
98
|
+
</el-select> -->
|
|
99
|
+
<!-- v-on="{ ...item.listeners, change: (event) => selectChangeHandle(event,
|
|
100
|
+
item), }" -->
|
|
101
|
+
<el-select
|
|
102
|
+
v-else-if="item.type == 'select'"
|
|
103
|
+
v-model="form.value[item.prop]"
|
|
104
|
+
:placeholder="`请选择${item.placeholder || item.label}`"
|
|
105
|
+
:clearable="'clearable' in item ? item.clearable : true"
|
|
106
|
+
v-bind="{ disabled: !!item.disabled, ...(item.props || {}) }"
|
|
107
|
+
v-on="{
|
|
108
|
+
...item.listeners,
|
|
109
|
+
change: event => selectChangeHandle(event, item),
|
|
110
|
+
}"
|
|
111
|
+
@keyup.native="
|
|
112
|
+
$event =>
|
|
113
|
+
item.keyup({
|
|
114
|
+
event: $event,
|
|
115
|
+
item,
|
|
116
|
+
form: form.value,
|
|
117
|
+
})
|
|
118
|
+
"
|
|
119
|
+
>
|
|
120
|
+
<el-option
|
|
121
|
+
v-for="(jtem, jindex) in item.child"
|
|
122
|
+
:key="jindex"
|
|
123
|
+
:label="jtem.value"
|
|
124
|
+
:value="jtem.key"
|
|
125
|
+
/>
|
|
126
|
+
</el-select>
|
|
127
|
+
<div v-else-if="item.type == 'inputSpecial'">
|
|
128
|
+
<el-col :span="6">
|
|
129
|
+
<el-form-item :prop="item.layerprop">
|
|
130
|
+
<el-input
|
|
131
|
+
v-model="form.value[item.layerprop]"
|
|
132
|
+
:clearable="item.clearable || true"
|
|
133
|
+
/>
|
|
134
|
+
</el-form-item>
|
|
135
|
+
</el-col>
|
|
136
|
+
<el-col class="line" style="text-align: center" :span="3">- </el-col>
|
|
137
|
+
<el-col :span="6">
|
|
138
|
+
<el-form-item :prop="item.rowprop">
|
|
139
|
+
<el-input v-model="form.value[item.rowprop]" :clearable="item.clearable || true" />
|
|
140
|
+
</el-form-item>
|
|
141
|
+
</el-col>
|
|
142
|
+
<el-col class="line" style="text-align: center" :span="3">- </el-col>
|
|
143
|
+
<el-col :span="6">
|
|
144
|
+
<el-form-item :prop="item.columnprop">
|
|
145
|
+
<el-input
|
|
146
|
+
v-model="form.value[item.columnprop]"
|
|
147
|
+
:clearable="item.clearable || true"
|
|
148
|
+
/>
|
|
149
|
+
</el-form-item>
|
|
150
|
+
</el-col>
|
|
151
|
+
</div>
|
|
152
|
+
<!-- 自定义输入框插槽 -->
|
|
153
|
+
<template v-else-if="item.type == 'slot'">
|
|
154
|
+
<slot :name="item.name" :item="item" />
|
|
155
|
+
</template>
|
|
156
|
+
</el-form-item>
|
|
157
|
+
</template>
|
|
158
|
+
</el-form>
|
|
159
|
+
<div v-if="showBtn" slot="footer" class="dialog-footer">
|
|
160
|
+
<slot v-if="$slots.btnSlot" name="btnSlot" :form="form" />
|
|
161
|
+
<template v-else>
|
|
162
|
+
<el-button @click="onCancel">取消</el-button>
|
|
163
|
+
<el-button v-if="form.type" type="primary" @click="onConfirm">确定</el-button>
|
|
164
|
+
</template>
|
|
165
|
+
<slot name="btnAfterSlot" />
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</template>
|
|
169
|
+
<!--
|
|
170
|
+
# BaseForm 基础表单组件
|
|
171
|
+
|
|
172
|
+
## Props 属性
|
|
173
|
+
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|
|
174
|
+
|-------------|----------|---------|------|--------------|
|
|
175
|
+
| form | Object | - | 是 | 表单配置对象 |
|
|
176
|
+
| defaultValue| Object | {} | 否 | 表单默认值 |
|
|
177
|
+
| showBtn | Boolean | true | 否 | 是否显示底部按钮 |
|
|
178
|
+
|
|
179
|
+
## form 对象结构
|
|
180
|
+
{
|
|
181
|
+
type: Number, // 表单类型：0-详情，1-新建，2-编辑
|
|
182
|
+
title: String, // 表单标题（会根据type自动设置）
|
|
183
|
+
value: Object, // 表单数据对象
|
|
184
|
+
rules: Object, // 表单验证规则
|
|
185
|
+
attrs: Object, // el-form的属性配置
|
|
186
|
+
model: Array // 表单项配置数组
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
## model 项配置
|
|
190
|
+
| 字段 | 类型 | 说明 |
|
|
191
|
+
|-------------|----------------|---------|
|
|
192
|
+
| type | String | 表单项类型：input/number/textarea/switch/radio/date/treeSelect/select/projectCodeSelect/inputSpecial/slot |
|
|
193
|
+
| label | String | 表单项标签 |
|
|
194
|
+
| prop | String | 表单项字段名 |
|
|
195
|
+
| placeholder | String | 占位文本 |
|
|
196
|
+
| required | Boolean | 是否必填 |
|
|
197
|
+
| hidden | Boolean | 是否隐藏 |
|
|
198
|
+
| clearable | Boolean | 是否可清空 |
|
|
199
|
+
| readonly | Boolean | 是否只读 |
|
|
200
|
+
| disabled | Boolean/Function| 是否禁用 |
|
|
201
|
+
| props | Object | 对应表单控件的属性配置 |
|
|
202
|
+
| listeners | Object | 事件监听器配置 |
|
|
203
|
+
|
|
204
|
+
## Events 事件
|
|
205
|
+
| 事件名 | 说明 | 回调参数 |
|
|
206
|
+
|-------------|---------------|---------|
|
|
207
|
+
| onSubmit | 表单提交事件 | {form: 表单配置, data: 表单数据} |
|
|
208
|
+
| onCancel | 取消按钮点击事件 | - |
|
|
209
|
+
| selectChange| 选择器值变化事件 | {obj: 当前项配置, val: 变化后的值} |
|
|
210
|
+
-->
|
|
211
|
+
<script>
|
|
212
|
+
// interface FormItem {
|
|
213
|
+
// type: Number;
|
|
214
|
+
// title?: String;
|
|
215
|
+
// model: IModelItem[]; //src\utils\interface\dialogInterface.ts
|
|
216
|
+
// rules:Form.rules;
|
|
217
|
+
// attrs: Form; //import { Form } from "element-ui";
|
|
218
|
+
// }
|
|
219
|
+
export default {
|
|
220
|
+
name: "form",
|
|
221
|
+
props: {
|
|
222
|
+
form: Object,
|
|
223
|
+
// 默认值
|
|
224
|
+
defaultValue: {
|
|
225
|
+
type: Object,
|
|
226
|
+
default: () => ({}),
|
|
227
|
+
},
|
|
228
|
+
showBtn: {
|
|
229
|
+
type: Boolean,
|
|
230
|
+
default: true,
|
|
231
|
+
},
|
|
232
|
+
},
|
|
233
|
+
data() {
|
|
234
|
+
return {
|
|
235
|
+
// model: [],
|
|
236
|
+
formInit: {}, // 初始化表单，用于重置表单用
|
|
237
|
+
// formValue: {}, // 表单数据
|
|
238
|
+
};
|
|
239
|
+
},
|
|
240
|
+
computed: {
|
|
241
|
+
width() {
|
|
242
|
+
return function (item) {
|
|
243
|
+
if (this.form.model.length > 18 && item.type != "textarea") {
|
|
244
|
+
return "25%";
|
|
245
|
+
} else if (
|
|
246
|
+
this.form.model.length > 10 &&
|
|
247
|
+
this.form.model.length <= 18 &&
|
|
248
|
+
item.type != "textarea"
|
|
249
|
+
) {
|
|
250
|
+
return "calc(100% / 3)";
|
|
251
|
+
} else if (
|
|
252
|
+
this.form.model.length > 6 &&
|
|
253
|
+
this.form.model.length <= 10 &&
|
|
254
|
+
item.type != "textarea"
|
|
255
|
+
) {
|
|
256
|
+
return "50%";
|
|
257
|
+
} else {
|
|
258
|
+
return item.type == "textarea" && item.width ? item.width : "100%";
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
},
|
|
262
|
+
},
|
|
263
|
+
watch: {
|
|
264
|
+
// 副作用以便父级直接使用
|
|
265
|
+
"form.type": {
|
|
266
|
+
handler(newValue) {
|
|
267
|
+
// 如果没有type则默认值为1
|
|
268
|
+
if (!Object.keys(this.form).includes("type")) {
|
|
269
|
+
this.$set(this.form, "type", 1);
|
|
270
|
+
}
|
|
271
|
+
let result;
|
|
272
|
+
switch (newValue) {
|
|
273
|
+
case 0:
|
|
274
|
+
result = "详情"; // 当 newValue 为 0 时，标题为 "详情"
|
|
275
|
+
break;
|
|
276
|
+
case 1:
|
|
277
|
+
result = "新建";
|
|
278
|
+
break;
|
|
279
|
+
case 2:
|
|
280
|
+
result = "编辑";
|
|
281
|
+
break;
|
|
282
|
+
default:
|
|
283
|
+
result = "弹框";
|
|
284
|
+
break;
|
|
285
|
+
}
|
|
286
|
+
this.form.title = result;
|
|
287
|
+
},
|
|
288
|
+
immediate: true,
|
|
289
|
+
},
|
|
290
|
+
// "form.model": {
|
|
291
|
+
// handler() {
|
|
292
|
+
|
|
293
|
+
// },
|
|
294
|
+
// immediate: true,
|
|
295
|
+
// deep: true
|
|
296
|
+
// }
|
|
297
|
+
},
|
|
298
|
+
created() {
|
|
299
|
+
// 默认值复制
|
|
300
|
+
if (Object.keys(this.defaultValue)?.length) {
|
|
301
|
+
Object.keys(this.defaultValue).forEach(key => {
|
|
302
|
+
form.value[key] = this.defaultValue[key];
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
this.init();
|
|
306
|
+
},
|
|
307
|
+
// beforeDestroy() {},
|
|
308
|
+
methods: {
|
|
309
|
+
init() {},
|
|
310
|
+
// 保留之前的change调用方式，并添扩展新的
|
|
311
|
+
selectChangeHandle(val, item) {
|
|
312
|
+
(item &&
|
|
313
|
+
item.listeners &&
|
|
314
|
+
item.listeners.change &&
|
|
315
|
+
item.listeners.change(item, this.form.value[item.prop])) ||
|
|
316
|
+
item.change
|
|
317
|
+
? item.change(val)
|
|
318
|
+
: this.selectChange(item, val);
|
|
319
|
+
},
|
|
320
|
+
changeHandle(val, item) {
|
|
321
|
+
if (
|
|
322
|
+
item &&
|
|
323
|
+
item.listeners &&
|
|
324
|
+
item.listeners.change &&
|
|
325
|
+
item.listeners.change(item, this.form.value[item.prop])
|
|
326
|
+
) {
|
|
327
|
+
this.selectChange(item, val);
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
selectChange(obj, val) {
|
|
331
|
+
let temp = {
|
|
332
|
+
obj: obj,
|
|
333
|
+
val: val,
|
|
334
|
+
};
|
|
335
|
+
this.$emit("selectChange", temp);
|
|
336
|
+
},
|
|
337
|
+
inputDisabled(item) {
|
|
338
|
+
if (!item.props) return false;
|
|
339
|
+
if (!Object.keys(item.props).includes("disabled")) return false;
|
|
340
|
+
// disabled是函数还是Boolean值，如果boolean值直接返回，如果是函数执行函数并返回boolean
|
|
341
|
+
return typeof item.props.disabled === "function"
|
|
342
|
+
? item.props.disabled({ item, form: this.form })
|
|
343
|
+
: item.props.disabled;
|
|
344
|
+
},
|
|
345
|
+
validate() {
|
|
346
|
+
return new Promise((resolve, reject) => {
|
|
347
|
+
this.$refs.formRef.validate(valid => {
|
|
348
|
+
if (valid) {
|
|
349
|
+
resolve({
|
|
350
|
+
valid,
|
|
351
|
+
formData: this.form?.value || {},
|
|
352
|
+
});
|
|
353
|
+
} else {
|
|
354
|
+
reject("表单验证失败");
|
|
355
|
+
}
|
|
356
|
+
});
|
|
357
|
+
});
|
|
358
|
+
},
|
|
359
|
+
onCancel() {
|
|
360
|
+
this.$refs.formRef.resetFields();
|
|
361
|
+
this.$refs.formRef.clearValidate();
|
|
362
|
+
this.$emit("onCancel");
|
|
363
|
+
},
|
|
364
|
+
onConfirm() {
|
|
365
|
+
console.log("BaseForm数据", this.form);
|
|
366
|
+
this.validate()
|
|
367
|
+
.then(() => {
|
|
368
|
+
this.$emit("onSubmit", { form: this.form, data: this.form.value });
|
|
369
|
+
})
|
|
370
|
+
.catch(err => {
|
|
371
|
+
console.log("校验失败", err);
|
|
372
|
+
});
|
|
373
|
+
},
|
|
374
|
+
},
|
|
375
|
+
};
|
|
376
|
+
</script>
|
|
377
|
+
|
|
378
|
+
<style lang="scss" scoped>
|
|
379
|
+
.dialog-footer {
|
|
380
|
+
display: flex;
|
|
381
|
+
justify-content: flex-end;
|
|
382
|
+
}
|
|
383
|
+
</style>
|
|
384
|
+
|
|
@@ -149,14 +149,15 @@
|
|
|
149
149
|
size="small"
|
|
150
150
|
type="primary"
|
|
151
151
|
@click="handleSearch('formSearch')"
|
|
152
|
-
|
|
152
|
+
>查询
|
|
153
153
|
</el-button>
|
|
154
154
|
<el-button
|
|
155
155
|
v-if="formSearchData.reset"
|
|
156
156
|
plain
|
|
157
157
|
size="small"
|
|
158
158
|
@click="handleReset('formSearch')"
|
|
159
|
-
|
|
159
|
+
>重置</el-button
|
|
160
|
+
>
|
|
160
161
|
<el-button
|
|
161
162
|
v-if="formSearchData.expendShow"
|
|
162
163
|
plain
|
|
@@ -164,7 +165,8 @@
|
|
|
164
165
|
:icon="expend ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
|
|
165
166
|
@click="handleExpend('formSearch')"
|
|
166
167
|
>
|
|
167
|
-
{{ expend ? "收起" : "展开" }}</el-button
|
|
168
|
+
{{ expend ? "收起" : "展开" }}</el-button
|
|
169
|
+
>
|
|
168
170
|
</el-form-item>
|
|
169
171
|
</el-form>
|
|
170
172
|
</div>
|
|
@@ -187,7 +189,7 @@
|
|
|
187
189
|
</template>
|
|
188
190
|
|
|
189
191
|
<script>
|
|
190
|
-
import { getData } from
|
|
192
|
+
import { getData } from "../../index.js";
|
|
191
193
|
|
|
192
194
|
export default {
|
|
193
195
|
name: "search",
|
|
@@ -252,7 +254,7 @@ export default {
|
|
|
252
254
|
props: {
|
|
253
255
|
url: {
|
|
254
256
|
type: String,
|
|
255
|
-
default:
|
|
257
|
+
default: "",
|
|
256
258
|
},
|
|
257
259
|
formSearchData: {
|
|
258
260
|
type: Object,
|
|
@@ -300,7 +302,7 @@ export default {
|
|
|
300
302
|
};
|
|
301
303
|
},
|
|
302
304
|
async created() {
|
|
303
|
-
this.init()
|
|
305
|
+
this.init();
|
|
304
306
|
},
|
|
305
307
|
watch: {
|
|
306
308
|
"formSearchData.value": {
|
|
@@ -317,43 +319,51 @@ export default {
|
|
|
317
319
|
},
|
|
318
320
|
methods: {
|
|
319
321
|
async init() {
|
|
320
|
-
const swaggerData = await getData()
|
|
321
|
-
const swaggersearchColumns =
|
|
322
|
+
const swaggerData = await getData();
|
|
323
|
+
const swaggersearchColumns =
|
|
324
|
+
swaggerData.paths[this.url].get.parameters || [];
|
|
322
325
|
swaggersearchColumns.forEach((item) => {
|
|
323
|
-
let tempItem = this.formSearchData.tableSearch.find(
|
|
326
|
+
let tempItem = this.formSearchData.tableSearch.find(
|
|
327
|
+
(e) => e.value.toLowerCase() === item.name.toLowerCase()
|
|
328
|
+
);
|
|
324
329
|
if (tempItem) {
|
|
325
330
|
// 匹配到
|
|
326
|
-
tempItem = { ...item, ...tempItem }
|
|
331
|
+
tempItem = { ...item, ...tempItem };
|
|
327
332
|
} else if (item.description) {
|
|
328
333
|
// 未匹配到
|
|
329
334
|
const pushItem = {
|
|
330
335
|
value: item.name,
|
|
331
336
|
label: item.description,
|
|
332
|
-
inputType:
|
|
333
|
-
props: {}
|
|
334
|
-
}
|
|
337
|
+
inputType: "text",
|
|
338
|
+
props: {},
|
|
339
|
+
};
|
|
335
340
|
if (item.schema.enum && Array.isArray(item.schema.enum)) {
|
|
336
341
|
//枚举值
|
|
337
|
-
pushItem.inputType =
|
|
338
|
-
pushItem.children = item.schema.enum.map(e => ({
|
|
339
|
-
|
|
342
|
+
pushItem.inputType = "select";
|
|
343
|
+
pushItem.children = item.schema.enum.map((e) => ({
|
|
344
|
+
key: e,
|
|
345
|
+
value: e,
|
|
346
|
+
}));
|
|
347
|
+
} else if (item.schema.format === "date-time") {
|
|
340
348
|
//日期
|
|
341
|
-
pushItem.inputType =
|
|
342
|
-
pushItem.props.valueFormat =
|
|
343
|
-
pushItem.props.format =
|
|
344
|
-
} else if (item.schema && item.schema.type ===
|
|
345
|
-
pushItem.inputType =
|
|
349
|
+
pushItem.inputType = "picker";
|
|
350
|
+
pushItem.props.valueFormat = "yyyy-MM-dd";
|
|
351
|
+
pushItem.props.format = "yyyy/MM/dd";
|
|
352
|
+
} else if (item.schema && item.schema.type === "string") {
|
|
353
|
+
pushItem.inputType = "text";
|
|
346
354
|
}
|
|
347
|
-
this.formSearchData.tableSearch.push(pushItem)
|
|
355
|
+
this.formSearchData.tableSearch.push(pushItem);
|
|
348
356
|
}
|
|
349
|
-
})
|
|
357
|
+
});
|
|
350
358
|
|
|
351
|
-
const tableHasCreatedTime = this.formSearchData.tableSearch.some(
|
|
359
|
+
const tableHasCreatedTime = this.formSearchData.tableSearch.some(
|
|
360
|
+
(e) => e.value === "createdTime"
|
|
361
|
+
);
|
|
352
362
|
if (!tableHasCreatedTime) {
|
|
353
363
|
// 单独处理创建时间 就是BeginTime，EndTime
|
|
354
|
-
const requiredNames = [
|
|
355
|
-
const hseCreatedTime = requiredNames.every(name =>
|
|
356
|
-
swaggersearchColumns.some(item => item.name === name)
|
|
364
|
+
const requiredNames = ["BeginTime", "EndTime"];
|
|
365
|
+
const hseCreatedTime = requiredNames.every((name) =>
|
|
366
|
+
swaggersearchColumns.some((item) => item.name === name)
|
|
357
367
|
);
|
|
358
368
|
if (hseCreatedTime) {
|
|
359
369
|
this.formSearchData.tableSearch.push({
|
|
@@ -366,15 +376,19 @@ export default {
|
|
|
366
376
|
endPlaceholder: "结束时间",
|
|
367
377
|
placeholder: "选择时间范围",
|
|
368
378
|
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
|
369
|
-
format: "yyyy/MM/dd HH:mm:ss"
|
|
370
|
-
}
|
|
371
|
-
})
|
|
379
|
+
format: "yyyy/MM/dd HH:mm:ss",
|
|
380
|
+
},
|
|
381
|
+
});
|
|
372
382
|
}
|
|
373
383
|
}
|
|
374
|
-
this.findTableSearch =
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
384
|
+
this.findTableSearch =
|
|
385
|
+
this.formSearchData.tableSearch.length > this.tableSearchSlice
|
|
386
|
+
? this.formSearchData.tableSearch.slice(0, this.tableSearchSlice)
|
|
387
|
+
: this.formSearchData.tableSearch;
|
|
388
|
+
console.log(
|
|
389
|
+
`\x1b[36m\x1b[4mol插件-搜索框渲染`,
|
|
390
|
+
this.formSearchData.tableSearch
|
|
391
|
+
);
|
|
378
392
|
},
|
|
379
393
|
// 树形下拉
|
|
380
394
|
getValue(val) {
|
|
@@ -389,7 +403,7 @@ export default {
|
|
|
389
403
|
this.formSearch.BeginTime = null;
|
|
390
404
|
this.formSearch.EndTime = null;
|
|
391
405
|
}
|
|
392
|
-
const tempFormSearch = Object.assign({}, this.formSearch)
|
|
406
|
+
const tempFormSearch = Object.assign({}, this.formSearch);
|
|
393
407
|
if (this.formSearchData.rules) {
|
|
394
408
|
return this.$refs[formName].validate((valid) => {
|
|
395
409
|
if (!valid) return false;
|
|
@@ -397,8 +411,7 @@ export default {
|
|
|
397
411
|
});
|
|
398
412
|
}
|
|
399
413
|
this.$emit("handleSearch", tempFormSearch, item);
|
|
400
|
-
console.log(`\x1b[36m\x1b[4mol插件-搜索框查询`, tempFormSearch)
|
|
401
|
-
|
|
414
|
+
console.log(`\x1b[36m\x1b[4mol插件-搜索框查询`, tempFormSearch);
|
|
402
415
|
},
|
|
403
416
|
loadmore(obj) {
|
|
404
417
|
this.$emit("loadmore", obj);
|
|
@@ -446,9 +459,9 @@ export default {
|
|
|
446
459
|
this.expend = !this.expend; // 展开和收起
|
|
447
460
|
this.findTableSearch = this.expend
|
|
448
461
|
? this.formSearchData.tableSearch.slice(
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
462
|
+
0,
|
|
463
|
+
this.formSearchData.tableSearch.length
|
|
464
|
+
)
|
|
452
465
|
: this.formSearchData.tableSearch.slice(0, this.tableSearchSlice);
|
|
453
466
|
|
|
454
467
|
this.$emit("btnHandleExpend", this.expend);
|
package/src/package/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import OlTable from "./table";
|
|
2
2
|
import OlSearch from "./formSearch";
|
|
3
3
|
import Dialog from "./dialog";
|
|
4
|
+
import Form from "./form";
|
|
4
5
|
import SwaggerClient from "swagger-client";
|
|
5
6
|
|
|
6
7
|
const consoleTooltip = () => {
|
|
@@ -212,5 +213,5 @@ const install = async function (Vue) {
|
|
|
212
213
|
};
|
|
213
214
|
|
|
214
215
|
export default install;
|
|
215
|
-
export { OlTable, OlSearch, Dialog };
|
|
216
|
+
export { OlTable, OlSearch, Dialog, Form };
|
|
216
217
|
export { swaggerInstall, swaggerUnload };
|