Commit 304d88321f482b6a12b9a7c4c6b602f198439413
Merge branch 'ft_local_dev' into 'main'
pref:优化样式 See merge request huang/yun-teng-iot-front!340
Showing
5 changed files
with
66 additions
and
39 deletions
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <BasicModal v-bind="$attrs" width="55rem" :height="heightNum" @register="register" title="执行设备及属性" | |
4 | - @cancel="handleCancel" :showOkBtn="false"> | |
3 | + <BasicModal | |
4 | + style="min-height: auto" | |
5 | + v-bind="$attrs" | |
6 | + width="55rem" | |
7 | + @register="register" | |
8 | + title="执行设备及属性" | |
9 | + @cancel="handleCancel" | |
10 | + :showOkBtn="false" | |
11 | + > | |
5 | 12 | <div> |
6 | 13 | <BasicTable @register="registerTable" :dataSource="tableData" /> |
7 | 14 | </div> |
... | ... | @@ -9,37 +16,39 @@ |
9 | 16 | </div> |
10 | 17 | </template> |
11 | 18 | <script setup lang="ts"> |
12 | -import { ref, nextTick } from 'vue'; | |
13 | -import { BasicModal, useModalInner } from '/@/components/Modal'; | |
14 | -import { BasicTable, useTable } from '/@/components/Table'; | |
15 | -import { viewDeviceColumn } from './config.data'; | |
16 | -import { reportEditDetailPage } from '/@/api/report/reportManager'; | |
19 | + import { ref, nextTick } from 'vue'; | |
20 | + import { BasicModal, useModalInner } from '/@/components/Modal'; | |
21 | + import { BasicTable, useTable } from '/@/components/Table'; | |
22 | + import { viewDeviceColumn } from './config.data'; | |
23 | + import { reportEditDetailPage } from '/@/api/report/reportManager'; | |
17 | 24 | |
18 | -const heightNum = ref(800); | |
19 | -const tableData: any = ref([]); | |
20 | -const [registerTable] = useTable({ | |
21 | - columns: viewDeviceColumn, | |
22 | - showIndexColumn: false, | |
23 | - clickToRowSelect: false, | |
24 | - showTableSetting: false, | |
25 | - bordered: true, | |
26 | -}); | |
27 | -const [register] = useModalInner((data) => { | |
28 | - const getTableData = async () => { | |
29 | - const res: any = await reportEditDetailPage(data.record.id) | |
30 | - const resMap = res.data.executeAttributes.map(d => { | |
31 | - return { | |
32 | - device: d.name, | |
33 | - attribute: d.attributes.join(',') | |
34 | - } | |
35 | - }) | |
36 | - tableData.value = resMap | |
37 | - }; | |
38 | - nextTick(() => { | |
39 | - getTableData(); | |
25 | + const tableData: any = ref([]); | |
26 | + const [registerTable] = useTable({ | |
27 | + columns: viewDeviceColumn, | |
28 | + showIndexColumn: false, | |
29 | + clickToRowSelect: false, | |
30 | + showTableSetting: false, | |
31 | + bordered: true, | |
40 | 32 | }); |
41 | -}); | |
42 | -const handleCancel = () => { }; | |
33 | + const [register] = useModalInner((data) => { | |
34 | + const getTableData = async () => { | |
35 | + const res: any = await reportEditDetailPage(data.record.id); | |
36 | + const resMap = res.data.executeAttributes.map((d) => { | |
37 | + return { | |
38 | + device: d.name, | |
39 | + attribute: d.attributes.join(','), | |
40 | + }; | |
41 | + }); | |
42 | + tableData.value = resMap; | |
43 | + }; | |
44 | + nextTick(() => { | |
45 | + getTableData(); | |
46 | + }); | |
47 | + }); | |
48 | + const handleCancel = () => {}; | |
43 | 49 | </script> |
44 | -<style> | |
50 | +<style lang="less" scoped> | |
51 | + :deep(.ant-table-body) { | |
52 | + height: 470px !important; | |
53 | + } | |
45 | 54 | </style> | ... | ... |
... | ... | @@ -2,6 +2,8 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | 2 | import moment from 'moment'; |
3 | 3 | import { findDictItemByCode } from '/@/api/system/dict'; |
4 | 4 | import { format } from '../util'; |
5 | +import { h } from 'vue'; | |
6 | +import { Tag } from 'ant-design-vue'; | |
5 | 7 | |
6 | 8 | //格式化资源类型和操作类型 |
7 | 9 | let formatText; |
... | ... | @@ -63,8 +65,12 @@ export const columns: BasicColumn[] = [ |
63 | 65 | title: '操作状态', |
64 | 66 | dataIndex: 'actionStatus', |
65 | 67 | width: 180, |
66 | - format: (_, record) => { | |
67 | - return record.actionStatus == 'SUCCESS' ? '成功' : '失败'; | |
68 | + customRender: ({ record }) => { | |
69 | + const status = record.actionStatus; | |
70 | + const enable = status === 'SUCCESS' ? '成功' : '失败'; | |
71 | + const color = enable === '成功' ? 'green' : 'red'; | |
72 | + const text = enable === '成功' ? '成功' : '失败'; | |
73 | + return h(Tag, { color }, () => text); | |
68 | 74 | }, |
69 | 75 | }, |
70 | 76 | { | ... | ... |
... | ... | @@ -2,6 +2,8 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | 2 | import moment from 'moment'; |
3 | 3 | import { findDictItemByCode } from '/@/api/system/dict'; |
4 | 4 | import { format } from '../util'; |
5 | +import { Tag } from 'ant-design-vue'; | |
6 | +import { h } from 'vue'; | |
5 | 7 | |
6 | 8 | //格式化资源类型和操作类型 |
7 | 9 | let formatText; |
... | ... | @@ -64,8 +66,12 @@ export const columns: BasicColumn[] = [ |
64 | 66 | title: '操作状态', |
65 | 67 | dataIndex: 'actionStatus', |
66 | 68 | width: 180, |
67 | - format: (_, record) => { | |
68 | - return record.actionStatus == 'SUCCESS' ? '成功' : '失败'; | |
69 | + customRender: ({ record }) => { | |
70 | + const status = record.actionStatus; | |
71 | + const enable = status === 'SUCCESS' ? '成功' : '失败'; | |
72 | + const color = enable === '成功' ? 'green' : 'red'; | |
73 | + const text = enable === '成功' ? '成功' : '失败'; | |
74 | + return h(Tag, { color }, () => text); | |
69 | 75 | }, |
70 | 76 | }, |
71 | 77 | { | ... | ... |
... | ... | @@ -2,6 +2,8 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | 2 | import moment from 'moment'; |
3 | 3 | import { findDictItemByCode } from '/@/api/system/dict'; |
4 | 4 | import { format } from '../util'; |
5 | +import { h } from 'vue'; | |
6 | +import { Tag } from 'ant-design-vue'; | |
5 | 7 | |
6 | 8 | // 表格数据 |
7 | 9 | export const columns: BasicColumn[] = [ |
... | ... | @@ -32,8 +34,12 @@ export const columns: BasicColumn[] = [ |
32 | 34 | title: '操作状态', |
33 | 35 | dataIndex: 'actionStatus', |
34 | 36 | width: 180, |
35 | - format: (_, record) => { | |
36 | - return record.actionStatus == 'SUCCESS' ? '成功' : '失败'; | |
37 | + customRender: ({ record }) => { | |
38 | + const status = record.actionStatus; | |
39 | + const enable = status === 'SUCCESS' ? '成功' : '失败'; | |
40 | + const color = enable === '成功' ? 'green' : 'red'; | |
41 | + const text = enable === '成功' ? '成功' : '失败'; | |
42 | + return h(Tag, { color }, () => text); | |
37 | 43 | }, |
38 | 44 | }, |
39 | 45 | { | ... | ... |