Commit 2471262385230764527b971d9fadfd5fc6876481
1 parent
a5a22bb3
feat: data component list add search conditions
Showing
4 changed files
with
94 additions
and
4 deletions
... | ... | @@ -14,9 +14,9 @@ VITE_PUBLIC_PATH = / |
14 | 14 | # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]] |
15 | 15 | # 线上测试环境 |
16 | 16 | # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]] |
17 | -VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]] | |
17 | +# VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]] | |
18 | 18 | # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]] |
19 | -# VITE_PROXY = [["/api","http://192.168.10.111:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]] | |
19 | +VITE_PROXY = [["/api","http://192.168.10.111:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]] | |
20 | 20 | |
21 | 21 | # 实时数据的ws地址 |
22 | 22 | # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token= | ... | ... |
1 | +import { getOrganizationList } from '/@/api/system/system'; | |
1 | 2 | import { FormSchema } from '/@/components/Form'; |
3 | +import { copyTransFun } from '/@/utils/fnUtils'; | |
2 | 4 | export enum ViewType { |
3 | 5 | PRIVATE_VIEW = 'PRIVATE_VIEW', |
4 | 6 | PUBLIC_VIEW = 'PUBLIC_VIEW', |
... | ... | @@ -9,12 +11,29 @@ export const formSchema: FormSchema[] = [ |
9 | 11 | field: 'name', |
10 | 12 | label: '名称', |
11 | 13 | component: 'Input', |
12 | - required: true, | |
14 | + rules: [{ required: true, message: '请输入看板名称' }], | |
13 | 15 | componentProps: { |
14 | 16 | placeholder: '请输入看板名称', |
15 | 17 | }, |
16 | 18 | }, |
17 | 19 | { |
20 | + field: 'organizationId', | |
21 | + component: 'ApiTreeSelect', | |
22 | + label: '组织', | |
23 | + rules: [{ required: true, message: '组织为必填项' }], | |
24 | + componentProps() { | |
25 | + return { | |
26 | + placeholder: '请选择组织', | |
27 | + api: async () => { | |
28 | + const data = await getOrganizationList(); | |
29 | + copyTransFun(data as any as any[]); | |
30 | + return data; | |
31 | + }, | |
32 | + getPopupContainer: () => document.body, | |
33 | + }; | |
34 | + }, | |
35 | + }, | |
36 | + { | |
18 | 37 | field: 'viewType', |
19 | 38 | label: '名称', |
20 | 39 | component: 'RadioGroup', | ... | ... |
src/views/visual/board/config/searchForm.ts
0 → 100644
1 | +import { getOrganizationList } from '/@/api/system/system'; | |
2 | +import { FormSchema } from '/@/components/Form'; | |
3 | +import { ColEx } from '/@/components/Form/src/types'; | |
4 | +import { useGridLayout } from '/@/hooks/component/useGridLayout'; | |
5 | +import { copyTransFun } from '/@/utils/fnUtils'; | |
6 | + | |
7 | +export const formSchema: FormSchema[] = [ | |
8 | + { | |
9 | + field: 'name', | |
10 | + label: '看板名称', | |
11 | + component: 'Input', | |
12 | + // colProps: { span: 10 }, | |
13 | + colProps: useGridLayout(2, 3, 4) as unknown as ColEx, | |
14 | + }, | |
15 | + { | |
16 | + field: 'organizationId', | |
17 | + component: 'ApiTreeSelect', | |
18 | + label: '组织', | |
19 | + // colProps: { span: 10 }, | |
20 | + colProps: useGridLayout(2, 3, 4) as unknown as ColEx, | |
21 | + componentProps() { | |
22 | + return { | |
23 | + placeholder: '请选择组织', | |
24 | + api: async () => { | |
25 | + const data = await getOrganizationList(); | |
26 | + copyTransFun(data as any as any[]); | |
27 | + return data; | |
28 | + }, | |
29 | + getPopupContainer: () => document.body, | |
30 | + }; | |
31 | + }, | |
32 | + }, | |
33 | +]; | ... | ... |
... | ... | @@ -19,6 +19,8 @@ |
19 | 19 | import { computed } from '@vue/reactivity'; |
20 | 20 | import { usePermission } from '/@/hooks/web/usePermission'; |
21 | 21 | import { encode } from './config/config'; |
22 | + import { useForm, BasicForm } from '/@/components/Form'; | |
23 | + import { formSchema } from './config/searchForm'; | |
22 | 24 | |
23 | 25 | const ListItem = List.Item; |
24 | 26 | const router = useRouter(); |
... | ... | @@ -28,6 +30,21 @@ |
28 | 30 | const listEL = ref(); |
29 | 31 | const loading = ref(false); |
30 | 32 | const dataBoardList = ref<DataBoardRecord[]>([]); |
33 | + | |
34 | + const [searchFormRegister, searchFormMethod] = useForm({ | |
35 | + schemas: formSchema, | |
36 | + labelWidth: 80, | |
37 | + layout: 'inline', | |
38 | + submitButtonOptions: { | |
39 | + loading: loading, | |
40 | + }, | |
41 | + submitFunc: async () => { | |
42 | + try { | |
43 | + await getDatasource(); | |
44 | + } catch (error) {} | |
45 | + }, | |
46 | + }); | |
47 | + | |
31 | 48 | //分页相关 |
32 | 49 | const page = ref(1); |
33 | 50 | const pageSize = ref(10); |
... | ... | @@ -87,9 +104,11 @@ |
87 | 104 | const getDatasource = async () => { |
88 | 105 | try { |
89 | 106 | loading.value = true; |
107 | + const params = searchFormMethod.getFieldsValue() || {}; | |
90 | 108 | const { total, items } = await getDataBoardList({ |
91 | 109 | page: unref(paginationProp).current, |
92 | 110 | pageSize: unref(paginationProp).pageSize, |
111 | + ...params, | |
93 | 112 | }); |
94 | 113 | dataBoardList.value = items; |
95 | 114 | paginationProp.value.total = total; |
... | ... | @@ -176,12 +195,16 @@ |
176 | 195 | |
177 | 196 | <template> |
178 | 197 | <PageWrapper> |
179 | - <div class="flex mb-6 items-center bg-light-100 h-78px"> | |
198 | + <div class="flex items-center mb-3 bg-light-100 h-78px"> | |
180 | 199 | <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div> |
181 | 200 | <Authority value="api:yt:data_board:add:post"> |
182 | 201 | <Button type="primary" @click="handleOpenDetailModal">创建看板</Button> |
183 | 202 | </Authority> |
184 | 203 | </div> |
204 | + <div class="bg-light-100 mb-6 w-full p-3 search-form"> | |
205 | + <BasicForm class="flex-auto w-full" @register="searchFormRegister" /> | |
206 | + </div> | |
207 | + <!-- <div> </div> --> | |
185 | 208 | <Spin :spinning="loading"> |
186 | 209 | <List |
187 | 210 | ref="listEL" |
... | ... | @@ -266,4 +289,19 @@ |
266 | 289 | background-image: url('/@/assets/svg/component.svg'); |
267 | 290 | } |
268 | 291 | } |
292 | + | |
293 | + .search-form { | |
294 | + width: 100%; | |
295 | + form { | |
296 | + width: 100%; | |
297 | + :deep(.ant-row) { | |
298 | + width: 100%; | |
299 | + } | |
300 | + | |
301 | + :deep(.ant-row > div:last-child) { | |
302 | + flex: 1; | |
303 | + max-width: 100%; | |
304 | + } | |
305 | + } | |
306 | + } | |
269 | 307 | </style> | ... | ... |