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 | { | ... | ... |