@neatui/vue 2.2.0 → 2.3.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/package.json
CHANGED
|
@@ -22,9 +22,15 @@
|
|
|
22
22
|
</div>
|
|
23
23
|
</template>
|
|
24
24
|
</div>
|
|
25
|
-
<div class="mr-sl-sub my-sm-sub nowrap" ui-hide="<pad">
|
|
25
|
+
<div class="mr-sl-sub my-sm-sub nowrap" ui-flex="row rm" ui-hide="<pad">
|
|
26
26
|
<IFollowView tipBoxClass="nr-no">
|
|
27
|
-
<button ui-btn="@a s case :border"
|
|
27
|
+
<button ui-btn="@a s case :border">
|
|
28
|
+
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="co-read" style="width: 1em; height: 1em">
|
|
29
|
+
<path
|
|
30
|
+
d="M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z"
|
|
31
|
+
></path>
|
|
32
|
+
</svg>
|
|
33
|
+
</button>
|
|
28
34
|
<template v-if="state.limit.length" #tips>
|
|
29
35
|
<div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
|
|
30
36
|
<div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="full-x" ui-flex="row xt">
|
|
3
|
-
<div ui-flex="row lm :wrap" class="mr-mm-sub my-sm-sub">
|
|
4
|
-
<template v-for="(item, idx) in state.limit" :key="idx">
|
|
5
|
-
<div v-if="item._view" ui-flex="row lm" v-bind="item.attrs">
|
|
6
|
-
<span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
|
|
7
|
-
<Select sz="s" v-if="item.model === 'Select'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
|
|
8
|
-
<Cascader sz="s" v-else-if="item.model === 'Cascader'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
|
|
9
|
-
<MoreSelect sz="s" v-else-if="item.model === 'MoreSelect'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
|
|
10
|
-
<SearchMoreSelect sz="s" v-else-if="item.model === 'SearchMoreSelect'" class="w-mm" :options="item.enums" v-model="state.param[item.field]" />
|
|
11
|
-
<DatePicker v-else-if="item.model === 'DatePicker'" class="w-mm" sz="s" v-model="state.param[item.field]" @change="(val:any) => (state.param[item.field] = val)" />
|
|
12
|
-
<DateRangePicker
|
|
13
|
-
v-else-if="item.model === 'DateRangePicker'"
|
|
14
|
-
class="w-ls"
|
|
15
|
-
sz="s"
|
|
16
|
-
v-model="state.param[item.field]"
|
|
17
|
-
@change="(val:any) => (state.param[item.field] = val)"
|
|
18
|
-
/>
|
|
19
|
-
<Input sz="s" v-else class="w-mm" :block="false" v-model="state.param[item.field]" />
|
|
20
|
-
</div>
|
|
21
|
-
</template>
|
|
22
|
-
</div>
|
|
23
|
-
<div ui-hide="<pad" class="mr-sl-sub my-sm-sub nowrap">
|
|
24
|
-
<IFollowView tipBoxClass="nr-no">
|
|
25
|
-
<button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
|
|
26
|
-
<template v-if="state.limit.length" #tips>
|
|
27
|
-
<div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
|
|
28
|
-
<div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
|
|
29
|
-
<label ui-form="@a type:checkbox" class="ny-xs nx-sm">
|
|
30
|
-
<input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
|
|
31
|
-
<span>{{ item.label }}</span>
|
|
32
|
-
</label>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
</template>
|
|
36
|
-
</IFollowView>
|
|
37
|
-
<button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
<div ui-hide=">mob" class="mr-sl-sub my-sm-sub nowrap">
|
|
41
|
-
<IFollowView tipBoxClass="nr-no">
|
|
42
|
-
<button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
|
|
43
|
-
<template v-if="state.limit.length" #tips>
|
|
44
|
-
<div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
|
|
45
|
-
<div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
|
|
46
|
-
<label ui-form="@a type:checkbox" class="ny-xs nx-sm">
|
|
47
|
-
<input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
|
|
48
|
-
<span>{{ item.label }}</span>
|
|
49
|
-
</label>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
</template>
|
|
53
|
-
</IFollowView>
|
|
54
|
-
<button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
|
|
55
|
-
</div>
|
|
56
|
-
</template>
|
|
57
|
-
<script setup lang="ts">
|
|
58
|
-
import { computed, reactive, watch } from 'vue';
|
|
59
|
-
import { useRoute } from 'vue-router';
|
|
60
|
-
import { IFollowView } from '../../basic';
|
|
61
|
-
import { Input, Select, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
|
|
62
|
-
const route = useRoute();
|
|
63
|
-
|
|
64
|
-
// 外部数据
|
|
65
|
-
const props: any = defineProps({
|
|
66
|
-
words: {
|
|
67
|
-
type: Object,
|
|
68
|
-
default: () => ({})
|
|
69
|
-
},
|
|
70
|
-
limit: {
|
|
71
|
-
type: Array as () => any[],
|
|
72
|
-
default: () => []
|
|
73
|
-
},
|
|
74
|
-
param: {
|
|
75
|
-
type: Object,
|
|
76
|
-
default: () => ({})
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
// 内部数据
|
|
81
|
-
const state: any = reactive({
|
|
82
|
-
name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
|
|
83
|
-
limit: computed(() => {
|
|
84
|
-
const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
|
|
85
|
-
return (props.limit || [])?.map((item: any) => {
|
|
86
|
-
if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_view')) {
|
|
87
|
-
item._view = _cache[item.field]?._view;
|
|
88
|
-
} else {
|
|
89
|
-
if (item.view === true || item.view === 1 || item.view === 'always') {
|
|
90
|
-
item._view = 1;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
return item;
|
|
94
|
-
});
|
|
95
|
-
}),
|
|
96
|
-
param: {}
|
|
97
|
-
});
|
|
98
|
-
watch(
|
|
99
|
-
[() => state.limit],
|
|
100
|
-
() => {
|
|
101
|
-
const _limit: any = {};
|
|
102
|
-
state.limit.forEach((item: any, idx: number) => {
|
|
103
|
-
if (Object.prototype.hasOwnProperty.call(item, '_view')) {
|
|
104
|
-
_limit[item.field] = { _view: item._view ? 1 : 0 };
|
|
105
|
-
if (!item._view) {
|
|
106
|
-
delete state.param[item.field];
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
|
|
111
|
-
},
|
|
112
|
-
{ deep: true }
|
|
113
|
-
);
|
|
114
|
-
|
|
115
|
-
watch(
|
|
116
|
-
() => props.param,
|
|
117
|
-
() => {
|
|
118
|
-
state.param = props.param;
|
|
119
|
-
},
|
|
120
|
-
{ deep: true, immediate: true }
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
// 重置筛选
|
|
124
|
-
const fResetLimit = () => {
|
|
125
|
-
for (const key in state.param) {
|
|
126
|
-
if (key !== 'page' && key !== 'pageSize') {
|
|
127
|
-
delete state.param[key];
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
};
|
|
131
|
-
</script>
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="full-x" ui-flex="row xt">
|
|
3
|
-
<div ui-flex="row lm :wrap" class="mr-mm-sub my-sm-sub">
|
|
4
|
-
<template v-for="(item, idx) in state.limit" :key="idx">
|
|
5
|
-
<div v-if="item._view" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">
|
|
6
|
-
<span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
|
|
7
|
-
<Select sz="s" v-if="item.model[0] === 'Select'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
|
|
8
|
-
<Cascader sz="s" v-else-if="item.model[0] === 'Cascader'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
|
|
9
|
-
<MoreSelect sz="s" v-else-if="item.model[0] === 'MoreSelect'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
|
|
10
|
-
<SearchMoreSelect sz="s" v-else-if="item.model[0] === 'SearchMoreSelect'" :options="item.enums" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
|
|
11
|
-
<DatePicker
|
|
12
|
-
v-else-if="item.model[0] === 'DatePicker'"
|
|
13
|
-
sz="s"
|
|
14
|
-
v-model="state.param[item.field]"
|
|
15
|
-
@change="(val:any) => (state.param[item.field] = val)"
|
|
16
|
-
v-bind="{ ...(item.model[1] || {}) }"
|
|
17
|
-
/>
|
|
18
|
-
<DateRangePicker
|
|
19
|
-
v-else-if="item.model[0] === 'DateRangePicker'"
|
|
20
|
-
sz="s"
|
|
21
|
-
v-model="state.param[item.field]"
|
|
22
|
-
@change="(val:any) => (state.param[item.field] = val)"
|
|
23
|
-
v-bind="{ ...(item.model[1] || {}) }"
|
|
24
|
-
/>
|
|
25
|
-
<Input sz="s" v-else :block="false" v-model="state.param[item.field]" v-bind="{ ...(item.model[1] || {}) }" />
|
|
26
|
-
</div>
|
|
27
|
-
</template>
|
|
28
|
-
</div>
|
|
29
|
-
<div ui-hide="<pad" class="mr-sl-sub my-sm-sub nowrap">
|
|
30
|
-
<IFollowView tipBoxClass="nr-no">
|
|
31
|
-
<button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
|
|
32
|
-
<template v-if="state.limit.length" #tips>
|
|
33
|
-
<div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
|
|
34
|
-
<div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
|
|
35
|
-
<label ui-form="@a type:checkbox" class="ny-xs nx-sm">
|
|
36
|
-
<input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
|
|
37
|
-
<span>{{ item.label }}</span>
|
|
38
|
-
</label>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
</template>
|
|
42
|
-
</IFollowView>
|
|
43
|
-
<button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
<div ui-hide=">mob" class="mr-sl-sub my-sm-sub nowrap">
|
|
47
|
-
<IFollowView tipBoxClass="nr-no">
|
|
48
|
-
<button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
|
|
49
|
-
<template v-if="state.limit.length" #tips>
|
|
50
|
-
<div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
|
|
51
|
-
<div v-for="(item, idx) in state.limit" class="item ux-hover nowrap r-ss" :key="idx">
|
|
52
|
-
<label ui-form="@a type:checkbox" class="ny-xs nx-sm">
|
|
53
|
-
<input type="checkbox" :checked="item._view" @change="item._view = item._view ? 0 : 1" />
|
|
54
|
-
<span>{{ item.label }}</span>
|
|
55
|
-
</label>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</template>
|
|
59
|
-
</IFollowView>
|
|
60
|
-
<button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
|
|
61
|
-
</div>
|
|
62
|
-
</template>
|
|
63
|
-
<script setup lang="ts">
|
|
64
|
-
import { computed, reactive, watch } from 'vue';
|
|
65
|
-
import { useRoute } from 'vue-router';
|
|
66
|
-
import { isString } from '@fekit/utils';
|
|
67
|
-
import { IFollowView } from '../../basic';
|
|
68
|
-
import { Input, Select, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
|
|
69
|
-
const route = useRoute();
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* 入参说明
|
|
73
|
-
*
|
|
74
|
-
* words 语言包
|
|
75
|
-
* limit 结构配置
|
|
76
|
-
* param 数据
|
|
77
|
-
*/
|
|
78
|
-
|
|
79
|
-
interface LimitProps {
|
|
80
|
-
label?: string | (() => string);
|
|
81
|
-
field: string | (() => string);
|
|
82
|
-
model?: string | Array<any> | (() => string | Array<any>);
|
|
83
|
-
enums?: Array<any> | (() => string | Array<any>);
|
|
84
|
-
rules?: Array<any> | (() => string | Array<any>);
|
|
85
|
-
event?: Array<any> | (() => string | Array<any>);
|
|
86
|
-
attrs?: Array<any> | (() => string | Array<any>);
|
|
87
|
-
value?: any | (() => any);
|
|
88
|
-
clear?: boolean | (() => boolean);
|
|
89
|
-
close?: boolean;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// 类型
|
|
93
|
-
interface Props {
|
|
94
|
-
words?: { [key: string | number]: any };
|
|
95
|
-
limit: Array<LimitProps>;
|
|
96
|
-
param: any;
|
|
97
|
-
}
|
|
98
|
-
const props: any = withDefaults(defineProps<Props>(), {
|
|
99
|
-
words: () => ({}),
|
|
100
|
-
limit: () => [],
|
|
101
|
-
param: () => ({})
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
// 内部数据
|
|
105
|
-
const state: any = reactive({
|
|
106
|
-
name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
|
|
107
|
-
limit: computed(() => {
|
|
108
|
-
const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
|
|
109
|
-
return (props.limit || [])?.map((item: any) => {
|
|
110
|
-
if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_view')) {
|
|
111
|
-
item._view = _cache[item.field]?._view;
|
|
112
|
-
} else {
|
|
113
|
-
if (item.view === true || item.view === 1 || item.view === 'always') {
|
|
114
|
-
item._view = 1;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// 模型处理
|
|
119
|
-
if (item.model) {
|
|
120
|
-
if (isString(item.model)) {
|
|
121
|
-
item.model = [item.model, { verify: false }];
|
|
122
|
-
}
|
|
123
|
-
} else {
|
|
124
|
-
item.model = ['Input', { verify: false }];
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// 属性处理
|
|
128
|
-
if (item.model[1].class) {
|
|
129
|
-
if (!/\bw-[sml]+/.test(item.model[1].class || '')) {
|
|
130
|
-
item.model[1].class += ' w-mm';
|
|
131
|
-
}
|
|
132
|
-
} else {
|
|
133
|
-
item.model[1].class = 'w-mm';
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
return item;
|
|
137
|
-
});
|
|
138
|
-
}),
|
|
139
|
-
param: {}
|
|
140
|
-
});
|
|
141
|
-
watch(
|
|
142
|
-
[() => state.limit],
|
|
143
|
-
() => {
|
|
144
|
-
const _limit: any = {};
|
|
145
|
-
state.limit.forEach((item: any, idx: number) => {
|
|
146
|
-
if (Object.prototype.hasOwnProperty.call(item, '_view')) {
|
|
147
|
-
_limit[item.field] = { _view: item._view ? 1 : 0 };
|
|
148
|
-
if (!item._view) {
|
|
149
|
-
delete state.param[item.field];
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
});
|
|
153
|
-
localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
|
|
154
|
-
},
|
|
155
|
-
{ deep: true }
|
|
156
|
-
);
|
|
157
|
-
|
|
158
|
-
watch(
|
|
159
|
-
() => props.param,
|
|
160
|
-
() => {
|
|
161
|
-
state.param = props.param;
|
|
162
|
-
},
|
|
163
|
-
{ deep: true, immediate: true }
|
|
164
|
-
);
|
|
165
|
-
|
|
166
|
-
// 重置筛选
|
|
167
|
-
const fResetLimit = () => {
|
|
168
|
-
for (const key in state.param) {
|
|
169
|
-
if (key !== 'page' && key !== 'pageSize') {
|
|
170
|
-
delete state.param[key];
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
</script>
|