vue-2024-ui 0.0.9 → 0.0.11
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/package.json +2 -1
- package/src/components/g-ctrl.vue +53 -54
- package/src/components/g-form.vue +47 -45
- package/src/components/g-query-item.vue +11 -10
- package/src/components/g-query.vue +49 -32
- package/src/components/g-table.vue +222 -141
- package/src/components/index.d.ts +76 -23
- package/src/components/index.js +49 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-2024-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/components/index.js",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"preview": "vite preview"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
+
"@element-plus/icons-vue": "^2.3.1",
|
|
21
22
|
"element-plus": "^2.8.4",
|
|
22
23
|
"vue": "^3.4.29"
|
|
23
24
|
},
|
|
@@ -2,90 +2,90 @@
|
|
|
2
2
|
<div style="display: flex; width: 100%;" class="g-ctrl-container">
|
|
3
3
|
<!--radio-->
|
|
4
4
|
<el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-if="ctrlType == 'radio'">
|
|
5
|
-
<slot :name="`${ctrlKey}
|
|
6
|
-
<el-radio v-bind="option" v-for="option in
|
|
7
|
-
<slot :name="`${ctrlKey}-
|
|
5
|
+
<slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
|
|
6
|
+
<el-radio v-bind="option" v-for="option in model[ctrlKey].options">
|
|
7
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
|
|
8
8
|
</el-radio>
|
|
9
9
|
</slot>
|
|
10
10
|
</el-radio-group>
|
|
11
11
|
<!--radio-button-->
|
|
12
12
|
<el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'radio-button'">
|
|
13
|
-
<slot :name="`${ctrlKey}
|
|
14
|
-
<el-radio-button v-bind="option" v-for="option in
|
|
15
|
-
<slot :name="`${ctrlKey}-
|
|
13
|
+
<slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
|
|
14
|
+
<el-radio-button v-bind="option" v-for="option in model[ctrlKey].options">
|
|
15
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
|
|
16
16
|
</el-radio-button>
|
|
17
17
|
</slot>
|
|
18
18
|
</el-radio-group>
|
|
19
19
|
<!--checkbox-->
|
|
20
20
|
<el-checkbox v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox'">
|
|
21
|
-
<slot :name="`${ctrlKey}
|
|
21
|
+
<slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">{{ " " }}</slot>
|
|
22
22
|
</el-checkbox>
|
|
23
23
|
<!--checkbox-group-->
|
|
24
24
|
<el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group'">
|
|
25
|
-
<slot :name="`${ctrlKey}
|
|
26
|
-
<el-checkbox v-bind="option" v-for="option in
|
|
27
|
-
<slot :name="`${ctrlKey}-
|
|
25
|
+
<slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
|
|
26
|
+
<el-checkbox v-bind="option" v-for="option in model[ctrlKey].options">
|
|
27
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option>{{ option.label }}</slot>
|
|
28
28
|
</el-checkbox>
|
|
29
29
|
</slot>
|
|
30
30
|
</el-checkbox-group>
|
|
31
31
|
<!--checkbox-group-button-->
|
|
32
32
|
<el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group-button'">
|
|
33
|
-
<slot :name="`${ctrlKey}
|
|
34
|
-
<el-checkbox-button v-bind="option" v-for="option in
|
|
35
|
-
<slot :name="`${ctrlKey}-
|
|
33
|
+
<slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
|
|
34
|
+
<el-checkbox-button v-bind="option" v-for="option in model[ctrlKey].options">
|
|
35
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
|
|
36
36
|
</el-checkbox-button>
|
|
37
37
|
</slot>
|
|
38
38
|
</el-checkbox-group>
|
|
39
39
|
<!--select-->
|
|
40
|
-
<el-select v-model="ctrlValue" :placeholder="
|
|
40
|
+
<el-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="selectModel"
|
|
41
41
|
v-else-if="ctrlType == 'select'">
|
|
42
|
-
<template #default v-if="
|
|
43
|
-
<slot :name="`${ctrlKey}
|
|
44
|
-
<el-option-group v-for="group in
|
|
42
|
+
<template #default v-if="model[ctrlKey]?.options?.some(a => a.options)">
|
|
43
|
+
<slot :name="`${props.t}-${ctrlKey}`" :options="model[ctrlKey].options">
|
|
44
|
+
<el-option-group v-for="group in model[ctrlKey].options" :label="group.label">
|
|
45
45
|
<el-option v-bind="option" v-for="option in group.options"
|
|
46
46
|
@click.native="selectModel.change && selectModel.change(option)">
|
|
47
|
-
<slot :name="`${ctrlKey}-
|
|
47
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
|
|
48
48
|
</el-option>
|
|
49
49
|
</el-option-group>
|
|
50
50
|
</slot>
|
|
51
51
|
</template>
|
|
52
52
|
<template #default v-else>
|
|
53
|
-
<slot :name="`${ctrlKey}
|
|
54
|
-
<el-option v-bind="option" v-for="option in
|
|
53
|
+
<slot :name="`${props.t}-${ctrlKey}`" :options="model[ctrlKey].options">
|
|
54
|
+
<el-option v-bind="option" v-for="option in model[ctrlKey].options"
|
|
55
55
|
@click.native="selectModel.change && selectModel.change(option)">
|
|
56
|
-
<slot :name="`${ctrlKey}-
|
|
56
|
+
<slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
|
|
57
57
|
</el-option>
|
|
58
58
|
</slot>
|
|
59
59
|
</template>
|
|
60
60
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
61
|
-
<slot :name="`${ctrlKey}
|
|
61
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
62
62
|
</template>
|
|
63
63
|
</el-select>
|
|
64
64
|
<!--tree-select-->
|
|
65
|
-
<el-tree-select v-model="ctrlValue" :placeholder="
|
|
65
|
+
<el-tree-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
|
|
66
66
|
v-else-if="ctrlType == 'tree-select'">
|
|
67
67
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
68
|
-
<slot :name="`${ctrlKey}
|
|
68
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
69
69
|
</template>
|
|
70
70
|
</el-tree-select>
|
|
71
71
|
<!--time-->
|
|
72
|
-
<el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" :placeholder="
|
|
72
|
+
<el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" :placeholder="model[ctrlKey].label"
|
|
73
73
|
v-else-if="ctrlType == 'time'" />
|
|
74
74
|
<!--time-select-->
|
|
75
|
-
<el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" :placeholder="
|
|
75
|
+
<el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" :placeholder="model[ctrlKey].label"
|
|
76
76
|
v-bind="itemInfo" v-else-if="ctrlType == 'time-select'" />
|
|
77
77
|
<!--date-->
|
|
78
|
-
<el-date-picker v-model="ctrlValue" type="date" :placeholder="
|
|
78
|
+
<el-date-picker v-model="ctrlValue" type="date" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
|
|
79
79
|
v-else-if="ctrlType == 'date'">
|
|
80
80
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
81
|
-
<slot :name="`${ctrlKey}
|
|
81
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
82
82
|
</template>
|
|
83
83
|
</el-date-picker>
|
|
84
84
|
<!--datetime-->
|
|
85
|
-
<el-date-picker v-model="ctrlValue" type="datetime" :placeholder="
|
|
85
|
+
<el-date-picker v-model="ctrlValue" type="datetime" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
|
|
86
86
|
v-else-if="ctrlType == 'datetime'">
|
|
87
87
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
88
|
-
<slot :name="`${ctrlKey}
|
|
88
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
89
89
|
</template>
|
|
90
90
|
</el-date-picker>
|
|
91
91
|
<!--color-->
|
|
@@ -97,46 +97,46 @@
|
|
|
97
97
|
<!--switch-->
|
|
98
98
|
<el-switch v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'switch'">
|
|
99
99
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
100
|
-
<slot :name="`${ctrlKey}
|
|
100
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
101
101
|
</template>
|
|
102
102
|
</el-switch>
|
|
103
103
|
<!--transfer-->
|
|
104
104
|
<el-transfer v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'transfer'">
|
|
105
105
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
106
|
-
<slot :name="`${ctrlKey}
|
|
106
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
107
107
|
</template>
|
|
108
108
|
</el-transfer>
|
|
109
109
|
<!--cascader-->
|
|
110
110
|
<el-cascader v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'cascader'">
|
|
111
111
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
112
|
-
<slot :name="`${ctrlKey}
|
|
112
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
113
113
|
</template>
|
|
114
114
|
</el-cascader>
|
|
115
115
|
<!--upload-->
|
|
116
116
|
<el-upload v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'upload'">
|
|
117
117
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
118
|
-
<slot :name="`${ctrlKey}
|
|
118
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
119
119
|
</template>
|
|
120
120
|
</el-upload>
|
|
121
121
|
<!--autocomplete-->
|
|
122
|
-
<el-autocomplete v-model="ctrlValue" v-bind="itemInfo" :placeholder="
|
|
122
|
+
<el-autocomplete v-model="ctrlValue" v-bind="itemInfo" :placeholder="model[ctrlKey].label"
|
|
123
123
|
v-else-if="ctrlType == 'autocomplete'">
|
|
124
124
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
125
|
-
<slot :name="`${ctrlKey}
|
|
125
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
126
126
|
</template>
|
|
127
127
|
</el-autocomplete>
|
|
128
128
|
<!--input-number-->
|
|
129
|
-
<el-input-number v-model="ctrlValue" :min="0" :max="100000000" :placeholder="
|
|
130
|
-
v-else-if="ctrlType == 'input-number'">
|
|
129
|
+
<el-input-number v-model="ctrlValue" :min="0" :max="100000000" :placeholder="model[ctrlKey].label"
|
|
130
|
+
v-bind="itemInfo" v-else-if="ctrlType == 'input-number'">
|
|
131
131
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
132
|
-
<slot :name="`${ctrlKey}
|
|
132
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
133
133
|
</template>
|
|
134
134
|
</el-input-number>
|
|
135
135
|
<!--input-->
|
|
136
|
-
<el-input v-model="ctrlValue" :placeholder="
|
|
137
|
-
v-bind="itemInfo" v-else>
|
|
136
|
+
<el-input v-model="ctrlValue" :placeholder="model[ctrlKey].label" :maxlength="itemInfo?.max || 25"
|
|
137
|
+
:clearable="true" v-bind="itemInfo" v-else>
|
|
138
138
|
<template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
|
|
139
|
-
<slot :name="`${ctrlKey}
|
|
139
|
+
<slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
|
|
140
140
|
</template>
|
|
141
141
|
</el-input>
|
|
142
142
|
</div>
|
|
@@ -144,22 +144,21 @@
|
|
|
144
144
|
|
|
145
145
|
<script setup>
|
|
146
146
|
defineOptions({ inheritAttrs: false });
|
|
147
|
-
import { onMounted,
|
|
147
|
+
import { onMounted, useSlots } from "vue";
|
|
148
148
|
import { filterObject } from ".";
|
|
149
149
|
const ctrlValue = defineModel({ required: true });
|
|
150
|
-
const
|
|
151
|
-
|
|
152
|
-
const ctrlKey =
|
|
153
|
-
const ctrlType =
|
|
154
|
-
const model =
|
|
155
|
-
const slots = () => Object.keys(useSlots()).filter(a => a.startsWith(ctrlKey)).
|
|
150
|
+
const props = defineProps(["t", "ctrlKey", "item", "model", 'ctrlType'])
|
|
151
|
+
const itemInfo = props.item;
|
|
152
|
+
const ctrlKey = props.ctrlKey;
|
|
153
|
+
const ctrlType = props.ctrlType;
|
|
154
|
+
const model = props.model;
|
|
155
|
+
const slots = () => Object.keys(useSlots()).filter(a => a.startsWith(`${props.t}-${ctrlKey}-`)).map(a => a.replace(`${props.t}-${ctrlKey}-`, ''));
|
|
156
156
|
|
|
157
157
|
//select 默认属性
|
|
158
158
|
const selectModel = {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}, ...itemInfo
|
|
159
|
+
filterable: true,
|
|
160
|
+
remote: itemInfo && itemInfo["remote-method"] ? true : false,
|
|
161
|
+
...itemInfo
|
|
163
162
|
};
|
|
164
163
|
const selectRemoteMethod = (query) => {
|
|
165
164
|
itemInfo["remote-method"](query, (a) => {
|
|
@@ -168,7 +167,7 @@ const selectRemoteMethod = (query) => {
|
|
|
168
167
|
}
|
|
169
168
|
|
|
170
169
|
onMounted(() => {
|
|
171
|
-
if (itemInfo["remote-method"]) {
|
|
170
|
+
if (itemInfo && itemInfo["remote-method"]) {
|
|
172
171
|
selectModel['remote-method'] = selectRemoteMethod;
|
|
173
172
|
}
|
|
174
173
|
})
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<el-form ref="gform" :model="model"
|
|
3
|
-
v-bind="filterObject(model.form, k => !['
|
|
2
|
+
<el-form ref="gform" :model="model" :style="{ width: '98%', padding: 0, margin: 0, 'box-sizing': 'border-box' }"
|
|
3
|
+
v-bind="filterObject(model.form, k => !['footer', 'submit', 'reset', 'slots', 'type', 'sort'].includes(k))"
|
|
4
4
|
class="g-form-container">
|
|
5
5
|
<slot>
|
|
6
|
-
<el-
|
|
7
|
-
|
|
8
|
-
:
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
<el-col v-bind="{ ...model.form.cols, ...item.col }" v-for="(item, key) of items" :key="key"
|
|
7
|
+
style="width: 100%;">
|
|
8
|
+
<el-form-item :label="item.label" :prop="`${key}.value`" :rules="getItemRulesByItem(item)"
|
|
9
|
+
v-bind="{ ...model?.formItems, ...item?.formItem }" style="width:100%;">
|
|
10
|
+
<slot :name="'f-' + key" :item :model>
|
|
11
|
+
<g-ctrl v-model="model[key].value" :item="item?.editor" :ctrlKey="key" :ctrlType="item.type"
|
|
12
|
+
:model class="g-ctrl-container" t="f">
|
|
13
|
+
<template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
|
|
14
|
+
<slot :name="slotKey" :data :item :model></slot>
|
|
15
|
+
</template>
|
|
16
|
+
</g-ctrl>
|
|
17
|
+
</slot>
|
|
18
|
+
<template #label="data">
|
|
19
|
+
<slot :name="`f-${key}-label`" :data :item :model>{{ item.label }}</slot>
|
|
20
|
+
</template>
|
|
21
|
+
</el-form-item>
|
|
22
|
+
</el-col>
|
|
23
|
+
<slot name="f-footer" v-if="!model.form.footer.hidden">
|
|
21
24
|
<div :style="model.form.footer.style">
|
|
22
|
-
<slot name="footer-left"></slot>
|
|
23
|
-
<el-button @click="model.form.submit.click(formInfo, model)"
|
|
25
|
+
<slot name="f-footer-left"></slot>
|
|
26
|
+
<el-button @click.stop="model.form.submit.click(formInfo, model)"
|
|
24
27
|
v-bind="filterObject(model.form.submit, k => !['click'].includes(k))"
|
|
25
28
|
v-if="!model?.form?.submit?.hidden">
|
|
26
29
|
{{ model?.form?.submit?.label }}
|
|
@@ -30,7 +33,7 @@
|
|
|
30
33
|
v-if="!model?.form?.reset?.hidden">{{
|
|
31
34
|
model?.form?.reset?.label
|
|
32
35
|
}}</el-button>
|
|
33
|
-
<slot name="footer-right"></slot>
|
|
36
|
+
<slot name="f-footer-right"></slot>
|
|
34
37
|
</div>
|
|
35
38
|
</slot>
|
|
36
39
|
</slot>
|
|
@@ -38,17 +41,16 @@
|
|
|
38
41
|
</template>
|
|
39
42
|
|
|
40
43
|
<script setup>
|
|
41
|
-
import { computed,
|
|
44
|
+
import { computed, inject, onMounted, ref, useAttrs, watch } from "vue";
|
|
42
45
|
import gCtrl from "./g-ctrl.vue";
|
|
43
|
-
import {
|
|
46
|
+
import { mergeObjects, filterObject } from "./index";
|
|
44
47
|
defineOptions({
|
|
45
48
|
name: "g-form",
|
|
46
49
|
inheritAttrs: false
|
|
47
50
|
})
|
|
48
51
|
const model = defineModel({ required: true });
|
|
49
|
-
const emits = defineEmits(["
|
|
52
|
+
const emits = defineEmits(["submit", "reset"]);
|
|
50
53
|
const gform = ref(null);
|
|
51
|
-
let marginRight = ref(32);
|
|
52
54
|
const options = inject('options');
|
|
53
55
|
|
|
54
56
|
const defaultFormAttrs = {
|
|
@@ -58,10 +60,11 @@ const defaultFormAttrs = {
|
|
|
58
60
|
"label-width": "100px",
|
|
59
61
|
"status-icon": true,
|
|
60
62
|
"scroll-into-view-options": true,
|
|
61
|
-
columns: 2,
|
|
62
63
|
style: {
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
display: "flex",
|
|
65
|
+
flexWrap: "wrap",
|
|
66
|
+
...useAttrs()?.style,
|
|
67
|
+
|
|
65
68
|
},
|
|
66
69
|
// 表单底部属性
|
|
67
70
|
footer: {
|
|
@@ -78,11 +81,10 @@ const defaultFormAttrs = {
|
|
|
78
81
|
plain: true,
|
|
79
82
|
hidden: false,
|
|
80
83
|
click: async (formInfo, model) => {
|
|
81
|
-
emits("usubmit", formInfo, model);
|
|
82
84
|
if (!gform.value) return
|
|
83
85
|
await gform.value.validate((valid, fields) => {
|
|
84
86
|
if (valid) {
|
|
85
|
-
|
|
87
|
+
emits("submit", formInfo, model);
|
|
86
88
|
} else {
|
|
87
89
|
console.log('表单验证不通过!', fields);
|
|
88
90
|
}
|
|
@@ -115,6 +117,7 @@ model.value.form = mergeObjects(
|
|
|
115
117
|
);
|
|
116
118
|
const defaultFormItemsAttrs = {
|
|
117
119
|
type: "hidden",
|
|
120
|
+
labelPosition: "right",
|
|
118
121
|
style: {
|
|
119
122
|
width: "100%",
|
|
120
123
|
}
|
|
@@ -122,9 +125,20 @@ const defaultFormItemsAttrs = {
|
|
|
122
125
|
model.value.formItems = mergeObjects(
|
|
123
126
|
defaultFormItemsAttrs,
|
|
124
127
|
options?.formItems,
|
|
125
|
-
model?.formItems
|
|
128
|
+
model?.value?.formItems
|
|
126
129
|
);
|
|
127
130
|
|
|
131
|
+
const defaultColsAttrs = {
|
|
132
|
+
span: 12,
|
|
133
|
+
offset: 0
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
model.value.form.cols = mergeObjects(
|
|
137
|
+
defaultColsAttrs,
|
|
138
|
+
options?.form?.cols,
|
|
139
|
+
model.value.form.cols
|
|
140
|
+
)
|
|
141
|
+
|
|
128
142
|
//获取表单项验证规则
|
|
129
143
|
const getItemRulesByItem = (item) => {
|
|
130
144
|
// 组装验证规则
|
|
@@ -144,7 +158,6 @@ const getItemRulesByItem = (item) => {
|
|
|
144
158
|
}
|
|
145
159
|
// 获取item属性并合并规则
|
|
146
160
|
const itemInfo = { ...itemDefaultRule, ...item };
|
|
147
|
-
|
|
148
161
|
//必填验证
|
|
149
162
|
if (itemInfo.required) {
|
|
150
163
|
itemRules.push({ required: true, message: `${itemInfo.label}不能为空！`, trigger: 'blur' });
|
|
@@ -215,32 +228,21 @@ onMounted(() => {
|
|
|
215
228
|
})
|
|
216
229
|
|
|
217
230
|
const load = () => {
|
|
218
|
-
|
|
219
|
-
model.value.form.columns = 1;
|
|
220
|
-
}
|
|
231
|
+
|
|
221
232
|
for (const [key, value] of Object.entries(items.value)) {
|
|
222
233
|
model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem };
|
|
223
234
|
model.value[key].formItem.style = { ...model.value[key].formItem.style, ...value.formItem.style };
|
|
224
235
|
|
|
225
|
-
const columnWidth = value.columns && value.columns > 1 ?
|
|
226
|
-
columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value :
|
|
227
|
-
columnsWidth.value - marginRight.value;
|
|
228
|
-
model.value[key].formItem.style.width = `calc(${columnWidth}px)`;
|
|
229
236
|
}
|
|
230
237
|
};
|
|
231
238
|
|
|
232
|
-
onBeforeUnmount(() => {
|
|
233
|
-
console.log('destroy');
|
|
234
|
-
})
|
|
235
|
-
|
|
236
|
-
watch(() => model.value.form.columns, () => load());
|
|
237
239
|
watch(() => model.value.form.inline, () => load());
|
|
238
240
|
|
|
239
|
-
|
|
241
|
+
|
|
240
242
|
//表单项
|
|
241
243
|
const items = computed(() => Object.fromEntries(Object.entries(model.value)
|
|
242
244
|
.filter(a => a[1].type != "hidden")
|
|
243
|
-
.filter(a => (a[1].
|
|
245
|
+
.filter(a => (a[1].editor !== false))
|
|
244
246
|
.filter(a => (a[1].type !== "control"))
|
|
245
247
|
.map(key => [key[0], key[1]])));
|
|
246
248
|
//表单提交对象
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<template v-for="(item, key) of getQueryModel(props.more)" :key="key">
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
<g-ctrl v-model="queryModel[key]" :item :ctrlKey="key" :model
|
|
3
|
+
<el-col v-bind="{ ...model.query.cols, ...item?.search?.col }">
|
|
4
|
+
<slot :name="`q-${key}`" :item :model>
|
|
5
|
+
<el-form-item :label="item.label" v-bind="{ ...model.queryItems, ...item?.search }">
|
|
6
|
+
<g-ctrl v-model="queryModel[key]" :item="item?.editor" :ctrlKey="key" :ctrlType="item.type" :model
|
|
7
|
+
t="q">
|
|
7
8
|
<template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
|
|
8
9
|
<slot :name="slotKey" :data :item :model></slot>
|
|
9
10
|
</template>
|
|
10
11
|
</g-ctrl>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</
|
|
15
|
-
</
|
|
16
|
-
</
|
|
12
|
+
<template #label>
|
|
13
|
+
<slot :name="`q-${key}-label`" :item :model></slot>
|
|
14
|
+
</template>
|
|
15
|
+
</el-form-item>
|
|
16
|
+
</slot>
|
|
17
|
+
</el-col>
|
|
17
18
|
</template>
|
|
18
19
|
</template>
|
|
19
20
|
|
|
@@ -6,35 +6,41 @@
|
|
|
6
6
|
<slot :name="slotKey" :model></slot>
|
|
7
7
|
</template>
|
|
8
8
|
</g-query-item>
|
|
9
|
-
<el-
|
|
10
|
-
<el-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<el-popover v-bind="model.query.more.dialog" v-if="model.query.more.mode == 3">
|
|
21
|
-
<template #reference>
|
|
22
|
-
<el-button v-bind="model.query.more">
|
|
9
|
+
<el-col v-bind="model.query.btns.col" style="width:100%;">
|
|
10
|
+
<el-form-item style="width: 100%;">
|
|
11
|
+
<div :style="model.query.btns.style">
|
|
12
|
+
<el-button v-bind="model.query.query" @click="model.query.query.click()">
|
|
13
|
+
{{ model.query.query.label }}
|
|
14
|
+
</el-button>
|
|
15
|
+
<el-button v-bind="model.query.reset" @click="model.query.reset.click()">
|
|
16
|
+
{{ model.query.reset.label }}
|
|
17
|
+
</el-button>
|
|
18
|
+
<el-button v-bind="model.query.more" @click="model.query.more.click()"
|
|
19
|
+
v-if="model.query.more.mode !== 3">
|
|
23
20
|
{{ model.query.more.label }}
|
|
24
21
|
</el-button>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
<el-popover v-bind="model.query.more.dialog" v-if="model.query.more.mode == 3">
|
|
23
|
+
<template #reference>
|
|
24
|
+
<el-button v-bind="model.query.more">
|
|
25
|
+
{{ model.query.more.label }}
|
|
26
|
+
</el-button>
|
|
27
|
+
</template>
|
|
28
|
+
<template #default>
|
|
29
|
+
<el-form
|
|
30
|
+
v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
|
|
31
|
+
<g-query-item v-model="model" v-model:info="queryModel" :more="true">
|
|
32
|
+
<template v-for="(slot, slotKey, index) in $slots" :key="index"
|
|
33
|
+
#[slotKey]="data">
|
|
34
|
+
<slot :name="slotKey" :model></slot>
|
|
35
|
+
</template>
|
|
36
|
+
</g-query-item>
|
|
37
|
+
</el-form>
|
|
38
|
+
</template>
|
|
39
|
+
</el-popover>
|
|
40
|
+
<slot name="q-btns"></slot>
|
|
41
|
+
</div>
|
|
42
|
+
</el-form-item>
|
|
43
|
+
</el-col>
|
|
38
44
|
</el-form>
|
|
39
45
|
<Transition :duration="300" name="nested">
|
|
40
46
|
<div v-if="isShowMore && !model.query.more.hidden && model.query.more.mode == 1" class="outer">
|
|
@@ -52,7 +58,8 @@
|
|
|
52
58
|
</Transition>
|
|
53
59
|
<el-drawer v-model="isShowMore" title="更多查询" :show-close="false" v-bind="model.query.more.dialog"
|
|
54
60
|
v-if="isShowMore && !model.query.more.hidden && model.query.more.mode == 2">
|
|
55
|
-
<el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))"
|
|
61
|
+
<el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))"
|
|
62
|
+
style="width:98%;">
|
|
56
63
|
<g-query-item v-model="model" v-model:info="queryModel" :more="true">
|
|
57
64
|
<template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
|
|
58
65
|
<slot :name="slotKey" :model></slot>
|
|
@@ -116,6 +123,15 @@ const defaultQueryAttrs = {
|
|
|
116
123
|
emits('query', queryModel.value);
|
|
117
124
|
isShowMore.value = false;
|
|
118
125
|
}
|
|
126
|
+
},
|
|
127
|
+
cols: {
|
|
128
|
+
span: 6, offset: 0, xs: 24, sm: 12, md: 6, lg: 6, xl: 4,
|
|
129
|
+
},
|
|
130
|
+
btns: {
|
|
131
|
+
col: { span: 6, offset: 0, xs: 24, sm: 12, md: 6, lg: 6, xl: 4, },
|
|
132
|
+
style: {
|
|
133
|
+
width: "100%", display: "flex", justifyContent: "flex-end"
|
|
134
|
+
}
|
|
119
135
|
}
|
|
120
136
|
}
|
|
121
137
|
|
|
@@ -137,8 +153,9 @@ model.value.query.more.dialog = model.value.query.more.mode == 2 ? mergeObjects(
|
|
|
137
153
|
const defaultQueryItemsAttrs = {
|
|
138
154
|
type: "hidden",
|
|
139
155
|
labelPosition: 'right',
|
|
156
|
+
span: 8,
|
|
140
157
|
style: {
|
|
141
|
-
width: "
|
|
158
|
+
width: "100%"
|
|
142
159
|
}
|
|
143
160
|
};
|
|
144
161
|
model.value.queryItems = mergeObjects(defaultQueryItemsAttrs, options?.queryItems, model.value.queryItems);
|
|
@@ -167,14 +184,14 @@ model.value.queryItems = mergeObjects(defaultQueryItemsAttrs, options?.queryItem
|
|
|
167
184
|
}
|
|
168
185
|
|
|
169
186
|
.inner {
|
|
170
|
-
border-radius:
|
|
187
|
+
border-radius: 6px;
|
|
171
188
|
min-height: 100px;
|
|
172
189
|
border: 1px solid #f2f2f2;
|
|
173
190
|
padding: 20px;
|
|
174
191
|
box-sizing: border-box;
|
|
175
192
|
width: 100%;
|
|
176
|
-
background-color: rgba(255, 255, 255,
|
|
177
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
193
|
+
background-color: rgba(255, 255, 255, 0.8);
|
|
194
|
+
/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
|
|
178
195
|
}
|
|
179
196
|
|
|
180
197
|
.nested-enter-active,
|