Commit 304d88321f482b6a12b9a7c4c6b602f198439413

Authored by xp.Huang
2 parents 84d019c3 096c805d

Merge branch 'ft_local_dev' into 'main'

pref:优化样式

See merge request huang/yun-teng-iot-front!340
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 {
... ...
... ... @@ -6,7 +6,7 @@ module.exports = {
6 6 'selector-pseudo-class-no-unknown': [
7 7 true,
8 8 {
9   - ignorePseudoClasses: ['global'],
  9 + ignorePseudoClasses: ['global', 'deep'],
10 10 },
11 11 ],
12 12 'selector-pseudo-element-no-unknown': [
... ...