Commit 756f7b12d8a63dfe129fd09faa19c88c43f8ee20
Merge branch 'f-dev' into 'main'
feat:联调报表配置 See merge request huang/yun-teng-iot-front!274
Showing
11 changed files
with
463 additions
and
450 deletions
src/api/export/exportManager.ts
0 → 100644
1 | +import { defHttp } from '/@/utils/http/axios'; | |
2 | +import { ExportQueryParam } from './model/exportModel'; | |
3 | + | |
4 | +enum ReportManagerApi { | |
5 | + GET_EXPORT_API = '/report/generate/record', | |
6 | + DELETE_EXPORT_API = '/report/generate/record', | |
7 | +} | |
8 | + | |
9 | +//报表导出分页 | |
10 | +export const exportPage = (params: ExportQueryParam) => { | |
11 | + return defHttp.get<ExportQueryParam>({ | |
12 | + url: ReportManagerApi.GET_EXPORT_API, | |
13 | + params, | |
14 | + }); | |
15 | +}; | |
16 | + | |
17 | +//报表导出删除 | |
18 | +export const deleteExportManage = (ids: string[]) => { | |
19 | + return defHttp.delete({ | |
20 | + url: ReportManagerApi.DELETE_EXPORT_API, | |
21 | + data: { | |
22 | + ids: ids, | |
23 | + }, | |
24 | + }); | |
25 | +}; | ... | ... |
src/api/export/model/exportModel.ts
0 → 100644
... | ... | @@ -7,6 +7,7 @@ enum ReportManagerApi { |
7 | 7 | DELETE_REPORT_API = '/report_form/config', |
8 | 8 | PUT_REPORT_API = '/report_form/config', |
9 | 9 | PUTID_REPORT_API = '/report_form', |
10 | + EDIT_DETAIL_REPORT_API = '/report_form', | |
10 | 11 | } |
11 | 12 | |
12 | 13 | //分页 |
... | ... | @@ -39,7 +40,7 @@ export const createOrEditReportManage = (data) => { |
39 | 40 | export const putReportConfigManage = (data) => { |
40 | 41 | return defHttp.put<ReportModel>({ |
41 | 42 | url: ReportManagerApi.PUT_REPORT_API, |
42 | - data | |
43 | + data, | |
43 | 44 | }); |
44 | 45 | }; |
45 | 46 | |
... | ... | @@ -49,3 +50,10 @@ export const putReportByidAndStatusManage = (id, status) => { |
49 | 50 | url: ReportManagerApi.PUTID_REPORT_API + '/config/' + id + '/' + status, |
50 | 51 | }); |
51 | 52 | }; |
53 | + | |
54 | +//编辑详情 | |
55 | +export const reportEditDetailPage = (params) => { | |
56 | + return defHttp.get<ReportQueryParam>({ | |
57 | + url: ReportManagerApi.EDIT_DETAIL_REPORT_API + '/config/' + params, | |
58 | + }); | |
59 | +}; | ... | ... |
... | ... | @@ -9,32 +9,17 @@ |
9 | 9 | </div> |
10 | 10 | <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }"> |
11 | 11 | <div style="margin-left: 1vw"> |
12 | - <h3 | |
13 | - v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" | |
14 | - style="color: gray" | |
15 | - >查询频率(毫秒*)</h3 | |
16 | - > | |
17 | - <InputNumber | |
18 | - v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" | |
19 | - v-model:value="queryingFrequencyMs" | |
20 | - :min="0" | |
21 | - :max="99999999999999999999" | |
22 | - style="margin-top: 0.25vh" | |
23 | - /> | |
12 | + <h3 v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" style="color: gray"> | |
13 | + 查询频率(毫秒*)</h3> | |
14 | + <InputNumber v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" | |
15 | + v-model:value="queryingFrequencyMs" :min="0" :max="99999999999999999999" style="margin-top: 0.25vh" /> | |
24 | 16 | <div style="margin-top: 0.65vh"></div> |
25 | - <MappingsForm | |
26 | - :value="item.mappings" | |
27 | - @change="handleMappingsChange" | |
28 | - @dynamicAddHeight="dynamicHeight += 4" | |
29 | - @dynamicReduceHeight="dynamicHeight -= 4" | |
30 | - /> | |
17 | + <MappingsForm :value="item.mappings" @change="handleMappingsChange" @dynamicAddHeight="dynamicHeight += 4" | |
18 | + @dynamicReduceHeight="dynamicHeight -= 4" /> | |
31 | 19 | </div> |
32 | 20 | </div> |
33 | 21 | <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }"> |
34 | - <div | |
35 | - style="text-align: center; line-height: 20vh" | |
36 | - :style="{ lineHeight: dynamicHeight + 'vh' }" | |
37 | - > | |
22 | + <div style="text-align: center; line-height: 20vh" :style="{ lineHeight: dynamicHeight + 'vh' }"> | |
38 | 23 | <Button size="small" type="default" @click="handleRemove(item, index)"> |
39 | 24 | <template #icon> |
40 | 25 | <MinusCircleOutlined /> |
... | ... | @@ -45,102 +30,105 @@ |
45 | 30 | </div> |
46 | 31 | </template> |
47 | 32 | <script setup lang="ts"> |
48 | - import { ref } from 'vue'; | |
49 | - import { Button, InputNumber } from 'ant-design-vue'; | |
50 | - import { MinusCircleOutlined } from '@ant-design/icons-vue'; | |
51 | - import MappingsForm from './MappingsForm.vue'; | |
52 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
33 | +import { ref } from 'vue'; | |
34 | +import { Button, InputNumber } from 'ant-design-vue'; | |
35 | +import { MinusCircleOutlined } from '@ant-design/icons-vue'; | |
36 | +import MappingsForm from './MappingsForm.vue'; | |
37 | +import { useMessage } from '/@/hooks/web/useMessage'; | |
53 | 38 | |
54 | - const props = defineProps({ | |
55 | - item: { | |
56 | - type: Object, | |
57 | - default: () => {}, | |
58 | - }, | |
59 | - index: { | |
60 | - type: Number, | |
61 | - }, | |
62 | - }); | |
63 | - const emit = defineEmits(['removeItem']); | |
64 | - const dynamicHeight = ref(25); | |
65 | - const queryingFrequencyMs = ref(5000); | |
66 | - const { createMessage } = useMessage(); | |
67 | - const handleMappingsChange = (e) => { | |
68 | - // eslint-disable-next-line vue/no-mutating-props | |
69 | - props.item.mappings = e; | |
70 | - }; | |
71 | - const handleRemove = (item, index) => { | |
72 | - emit('removeItem', item, index); | |
73 | - }; | |
74 | - //设置回显的高度 | |
75 | - const setFieldsValueFunc = () => { | |
76 | - dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15; | |
77 | - queryingFrequencyMs.value = props.item.queryingFrequencyMs; | |
78 | - }; | |
79 | - //获取表单的值 | |
80 | - const getSnmpFormFunc = () => { | |
81 | - if ( | |
82 | - props.item.spec == 'TELEMETRY_QUERYING' || | |
83 | - props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING' | |
84 | - ) { | |
85 | - if (queryingFrequencyMs.value == null) { | |
86 | - return createMessage.error('请填写查询频率'); | |
87 | - } | |
39 | +const props = defineProps({ | |
40 | + item: { | |
41 | + type: Object, | |
42 | + default: () => { }, | |
43 | + }, | |
44 | + index: { | |
45 | + type: Number, | |
46 | + }, | |
47 | +}); | |
48 | +const emit = defineEmits(['removeItem']); | |
49 | +const dynamicHeight = ref(25); | |
50 | +const queryingFrequencyMs = ref(5000); | |
51 | +const { createMessage } = useMessage(); | |
52 | +const handleMappingsChange = (e) => { | |
53 | + // eslint-disable-next-line vue/no-mutating-props | |
54 | + props.item.mappings = e; | |
55 | +}; | |
56 | +const handleRemove = (item, index) => { | |
57 | + emit('removeItem', item, index); | |
58 | +}; | |
59 | +//设置回显的高度 | |
60 | +const setFieldsValueFunc = () => { | |
61 | + dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15; | |
62 | + queryingFrequencyMs.value = props.item.queryingFrequencyMs; | |
63 | +}; | |
64 | +//获取表单的值 | |
65 | +const getSnmpFormFunc = () => { | |
66 | + if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) { | |
67 | + return createMessage.error('请选择范围'); | |
68 | + } | |
69 | + if ( | |
70 | + props.item.spec == 'TELEMETRY_QUERYING' || | |
71 | + props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING' | |
72 | + ) { | |
73 | + if (queryingFrequencyMs.value == null) { | |
74 | + return createMessage.error('请填写查询频率'); | |
88 | 75 | } |
89 | - let obj: any = {}; | |
90 | - obj = { | |
91 | - ...{ spec: props.item.spec }, | |
92 | - ...{ mappings: props.item.mappings }, | |
93 | - ...{ | |
94 | - queryingFrequencyMs: | |
95 | - props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING' | |
96 | - ? queryingFrequencyMs.value | |
97 | - : null, | |
98 | - }, | |
99 | - }; | |
100 | - return obj; | |
76 | + } | |
77 | + let obj: any = {}; | |
78 | + obj = { | |
79 | + ...{ spec: props.item.spec }, | |
80 | + ...{ mappings: props.item.mappings }, | |
81 | + ...{ | |
82 | + queryingFrequencyMs: | |
83 | + props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING' | |
84 | + ? queryingFrequencyMs.value | |
85 | + : null, | |
86 | + }, | |
101 | 87 | }; |
102 | - defineExpose({ | |
103 | - getSnmpFormFunc, | |
104 | - setFieldsValueFunc, | |
105 | - handleMappingsChange, | |
106 | - }); | |
88 | + return obj; | |
89 | +}; | |
90 | +defineExpose({ | |
91 | + getSnmpFormFunc, | |
92 | + setFieldsValueFunc, | |
93 | + handleMappingsChange, | |
94 | +}); | |
107 | 95 | </script> |
108 | 96 | <style lang="less" scoped> |
109 | - ::-webkit-scrollbar { | |
110 | - display: none; | |
111 | - width: 0 !important; | |
112 | - height: 0 !important; | |
113 | - -webkit-appearance: none; | |
114 | - background: transparent; | |
115 | - } | |
97 | +::-webkit-scrollbar { | |
98 | + display: none; | |
99 | + width: 0 !important; | |
100 | + height: 0 !important; | |
101 | + -webkit-appearance: none; | |
102 | + background: transparent; | |
103 | +} | |
104 | + | |
105 | +.snmp-form { | |
106 | + display: flex; | |
107 | + align-items: center; | |
108 | + justify-content: space-between; | |
109 | + width: 40vw; | |
110 | + height: 20vh; | |
111 | + border: 0.1px solid #bfbfbf; | |
112 | + margin-top: 2vh; | |
116 | 113 | |
117 | - .snmp-form { | |
118 | - display: flex; | |
119 | - align-items: center; | |
120 | - justify-content: space-between; | |
121 | - width: 40vw; | |
114 | + .form-item1 { | |
115 | + width: 9vw; | |
122 | 116 | height: 20vh; |
123 | 117 | border: 0.1px solid #bfbfbf; |
124 | - margin-top: 2vh; | |
125 | - | |
126 | - .form-item1 { | |
127 | - width: 9vw; | |
128 | - height: 20vh; | |
129 | - border: 0.1px solid #bfbfbf; | |
130 | - } | |
118 | + } | |
131 | 119 | |
132 | - .form-item2 { | |
133 | - width: 28vw; | |
134 | - height: 20vh; | |
135 | - border: 0.1px solid #bfbfbf; | |
136 | - overflow: hidden; | |
137 | - overflow-y: scroll; | |
138 | - } | |
120 | + .form-item2 { | |
121 | + width: 28vw; | |
122 | + height: 20vh; | |
123 | + border: 0.1px solid #bfbfbf; | |
124 | + overflow: hidden; | |
125 | + overflow-y: scroll; | |
126 | + } | |
139 | 127 | |
140 | - .form-item3 { | |
141 | - width: 2vw; | |
142 | - height: 20vh; | |
143 | - border: 0.1px solid #bfbfbf; | |
144 | - } | |
128 | + .form-item3 { | |
129 | + width: 2vw; | |
130 | + height: 20vh; | |
131 | + border: 0.1px solid #bfbfbf; | |
145 | 132 | } |
133 | +} | |
146 | 134 | </style> | ... | ... |
... | ... | @@ -17,20 +17,23 @@ import { ref, computed, unref, reactive, watch, nextTick, Ref } from 'vue'; |
17 | 17 | import { BasicForm, useForm } from '/@/components/Form'; |
18 | 18 | import { formSchema, organizationId } from './config.data'; |
19 | 19 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
20 | -import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager'; | |
20 | +import { createOrEditReportManage, putReportConfigManage, reportEditDetailPage } from '/@/api/report/reportManager'; | |
21 | 21 | import { useMessage } from '/@/hooks/web/useMessage'; |
22 | 22 | import moment from 'moment'; |
23 | 23 | import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; |
24 | 24 | import { Select } from 'ant-design-vue'; |
25 | 25 | import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue'; |
26 | 26 | import { SelectTypes } from 'ant-design-vue/es/select'; |
27 | +import { SchemaFiled } from './config.data'; | |
28 | +import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config'; | |
27 | 29 | |
28 | 30 | type TDeviceList = { |
29 | 31 | key?: string, |
30 | 32 | value?: string, |
31 | 33 | label?: string, |
32 | 34 | attribute?: string, |
33 | - device?: string | |
35 | + device?: string, | |
36 | + name?: string | |
34 | 37 | } |
35 | 38 | const emit = defineEmits(['success', 'register']); |
36 | 39 | const deviceAttrRef: any = ref(null); |
... | ... | @@ -62,26 +65,29 @@ const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ |
62 | 65 | labelWidth: 120, |
63 | 66 | schemas: formSchema, |
64 | 67 | showActionButtonGroup: false, |
65 | - fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']], | |
68 | + fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]], | |
66 | 69 | }); |
67 | 70 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
68 | 71 | await resetFields(); |
69 | 72 | setDrawerProps({ confirmLoading: false }); |
70 | 73 | isUpdate.value = !!data?.isUpdate; |
71 | 74 | if (unref(isUpdate)) { |
72 | - //回显基础数据 | |
73 | - editId.value = data.record.id; | |
74 | - await setFieldsValue(data.record); | |
75 | + //编辑回显数据 | |
76 | + const editResData: any = await reportEditDetailPage(data.record.id) | |
77 | + console.log(editResData.data) | |
78 | + // //回显基础数据 | |
79 | + editId.value = editResData.data.id; | |
80 | + await setFieldsValue(editResData.data); | |
75 | 81 | //回显嵌套数据 |
76 | 82 | setFieldsValue({ |
77 | - agg: queryCondition?.agg, | |
78 | - interval: queryCondition?.interval, | |
83 | + agg: editResData.data.queryCondition?.agg, | |
84 | + interval: editResData.data.queryCondition?.interval, | |
79 | 85 | }); |
80 | 86 | //回显设备 |
81 | - orgId.value = data.record.organizationId; | |
87 | + orgId.value = editResData.data.organizationId; | |
82 | 88 | //获取该组织下的设备--排除网关设备 |
83 | 89 | const { items } = await screenLinkPageByDeptIdGetDevice({ |
84 | - organizationId: data.record.organizationId, | |
90 | + organizationId: editResData.data.organizationId, | |
85 | 91 | }); |
86 | 92 | selectOptions.value = items.map((item) => { |
87 | 93 | if (item.deviceType !== 'GATEWAY') |
... | ... | @@ -90,49 +96,15 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( |
90 | 96 | value: item.tbDeviceId, |
91 | 97 | }; |
92 | 98 | }); |
93 | - //TODO 模拟的数据 待服务端返回 | |
94 | - const deviceIds: any = [ | |
95 | - { | |
96 | - label: '奥迪网关子设备', | |
97 | - key: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0', | |
98 | - }, | |
99 | - { | |
100 | - label: '宝马默认设备', | |
101 | - key: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', | |
102 | - }, | |
103 | - { | |
104 | - label: '奔驰默认设备', | |
105 | - key: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', | |
106 | - }, | |
107 | - { | |
108 | - label: '新增奥迪测试设备', | |
109 | - key: '8f5b4280-f29e-11ec-98ad-a9680487d1e0', | |
110 | - }, | |
111 | - ]; | |
99 | + const deviceIds = editResData.data.executeAttributes.map(m => { | |
100 | + return { | |
101 | + label: m.name, | |
102 | + key: m.device | |
103 | + } | |
104 | + }) | |
112 | 105 | selectDevice.value = deviceIds; |
113 | 106 | //回显设备属性 TODO 模拟的数据 待服务端返回 |
114 | - deviceList.value = [ | |
115 | - { | |
116 | - value: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0', | |
117 | - attribute: 'CO2', | |
118 | - label: '奥迪网关子设备', | |
119 | - }, | |
120 | - { | |
121 | - value: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0', | |
122 | - attribute: 'co', | |
123 | - label: '宝马默认设备', | |
124 | - }, | |
125 | - { | |
126 | - value: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0', | |
127 | - attribute: 'hot', | |
128 | - label: '奔驰默认设备', | |
129 | - }, | |
130 | - { | |
131 | - value: '8f5b4280-f29e-11ec-98ad-a9680487d1e0', | |
132 | - attribute: 'wet', | |
133 | - label: '新增奥迪测试设备', | |
134 | - }, | |
135 | - ]; | |
107 | + deviceList.value = editResData.data.executeAttributes | |
136 | 108 | nextTick(() => { }); |
137 | 109 | } else { |
138 | 110 | editId.value = ''; |
... | ... | @@ -147,12 +119,14 @@ const getTitle = computed(() => (!unref(isUpdate) ? '新增报表é…ç½®' : 'ç¼–è |
147 | 119 | const handleChange = (e: any) => { |
148 | 120 | getAttrDevice.value.push({ |
149 | 121 | device: e.value, |
150 | - attribute: e.attribute | |
122 | + attribute: e.attribute, | |
123 | + name: e.device | |
151 | 124 | }); |
152 | 125 | }; |
153 | 126 | let postObj: any = reactive({}); |
154 | 127 | let queryCondition: any = reactive({}); |
155 | 128 | let executeContent: any = reactive({}); |
129 | +const startTs = ref(0) | |
156 | 130 | const endTs = ref(0); |
157 | 131 | async function handleSubmit() { |
158 | 132 | setDrawerProps({ confirmLoading: true }); |
... | ... | @@ -166,26 +140,38 @@ async function handleSubmit() { |
166 | 140 | if (values.executeWay == 0) { |
167 | 141 | executeContent = null; |
168 | 142 | } else { |
169 | - executeContent = {}; | |
170 | - } | |
171 | - if (values.timeZone) { | |
172 | - const getTime = JSON.stringify(values.timeZone); | |
173 | - endTs.value = moment(JSON.parse(getTime)[0]).valueOf() || 1659424160000; | |
143 | + executeContent = values.cronTime | |
174 | 144 | } |
175 | 145 | queryCondition = { |
176 | 146 | agg: values.agg, |
177 | 147 | interval: values.interval, |
178 | 148 | limit: values.limit, |
179 | 149 | }; |
150 | + if (values.way === QueryWay.LATEST) { | |
151 | + startTs.value = moment().subtract(values.startTs, 'ms').valueOf() | |
152 | + endTs.value = Date.now() | |
153 | + } else { | |
154 | + startTs.value = moment(values.startTs).valueOf() | |
155 | + endTs.value = moment(values.endTs).valueOf() | |
156 | + } | |
180 | 157 | delete values.devices; |
181 | 158 | delete values.agg; |
182 | 159 | delete values.interval; |
183 | 160 | delete values.timeZone; |
161 | + delete values.timeWeek; | |
162 | + delete values.cronTime; | |
163 | + delete values.cronWeek; | |
164 | + delete values.cronYear; | |
184 | 165 | postObj = { |
185 | 166 | ...values, |
186 | 167 | ...{ executeAttributes: getAttrDevice.value }, |
187 | 168 | ...{ queryCondition }, |
188 | - ...{ endTs: endTs.value }, | |
169 | + ...{ | |
170 | + startTs: startTs.value | |
171 | + }, | |
172 | + ...{ | |
173 | + endTs: endTs.value | |
174 | + }, | |
189 | 175 | ...{ executeContent }, |
190 | 176 | ...{ id: editId.value !== '' ? editId.value : '' }, |
191 | 177 | }; | ... | ... |
... | ... | @@ -36,11 +36,11 @@ export const columns: BasicColumn[] = [ |
36 | 36 | { |
37 | 37 | title: '配置名称', |
38 | 38 | dataIndex: 'name', |
39 | - width: 80, | |
39 | + width: 120, | |
40 | 40 | }, |
41 | 41 | { |
42 | 42 | title: '所属组织', |
43 | - dataIndex: 'organizationId', | |
43 | + dataIndex: 'organizationName', | |
44 | 44 | width: 120, |
45 | 45 | }, |
46 | 46 | { |
... | ... | @@ -223,7 +223,7 @@ export const formSchema: QFormSchema[] = [ |
223 | 223 | ifShow: ({ values }) => isTiming(values.executeWay), |
224 | 224 | }, |
225 | 225 | { |
226 | - field: '51111', | |
226 | + field: 'cronWeek', | |
227 | 227 | component: 'ApiSelect', |
228 | 228 | label: '每周', |
229 | 229 | required: true, |
... | ... | @@ -241,7 +241,7 @@ export const formSchema: QFormSchema[] = [ |
241 | 241 | ifShow: ({ values }) => isWeek(values.timeWeek), |
242 | 242 | }, |
243 | 243 | { |
244 | - field: '71111', | |
244 | + field: 'cronYear', | |
245 | 245 | component: 'ApiSelect', |
246 | 246 | label: '每月', |
247 | 247 | required: true, |
... | ... | @@ -259,7 +259,7 @@ export const formSchema: QFormSchema[] = [ |
259 | 259 | ifShow: ({ values }) => isMonth(values.timeWeek), |
260 | 260 | }, |
261 | 261 | { |
262 | - field: '62121', | |
262 | + field: 'cronTime', | |
263 | 263 | component: 'ApiSelect', |
264 | 264 | label: '时间', |
265 | 265 | required: true, |
... | ... | @@ -276,18 +276,7 @@ export const formSchema: QFormSchema[] = [ |
276 | 276 | }, |
277 | 277 | ifShow: ({ values }) => isTiming(values.executeWay), |
278 | 278 | }, |
279 | - { | |
280 | - field: 'devices', | |
281 | - label: '设备', | |
282 | - helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'], | |
283 | - component: 'Select', | |
284 | - componentProps: { | |
285 | - placeholder: '请选择设备', | |
286 | - mode: 'multiple', | |
287 | - }, | |
288 | - slot: 'devices', | |
289 | - colProps: { span: 24 }, | |
290 | - }, | |
279 | + | |
291 | 280 | { |
292 | 281 | field: 'attributeNature', |
293 | 282 | component: 'RadioGroup', |
... | ... | @@ -345,6 +334,19 @@ export const formSchema: QFormSchema[] = [ |
345 | 334 | }, |
346 | 335 | }, |
347 | 336 | { |
337 | + field: 'devices', | |
338 | + label: '设备', | |
339 | + helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'], | |
340 | + component: 'Select', | |
341 | + // required: true, | |
342 | + componentProps: { | |
343 | + placeholder: '请选择设备', | |
344 | + mode: 'multiple', | |
345 | + }, | |
346 | + slot: 'devices', | |
347 | + colProps: { span: 24 }, | |
348 | + }, | |
349 | + { | |
348 | 350 | field: 'dataCompare', |
349 | 351 | label: '数据类型', |
350 | 352 | required: true, |
... | ... | @@ -385,7 +387,7 @@ export const formSchema: QFormSchema[] = [ |
385 | 387 | ifShow({ values }) { |
386 | 388 | return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; |
387 | 389 | }, |
388 | - // defaultValue: 200, | |
390 | + defaultValue: 200, | |
389 | 391 | componentProps() { |
390 | 392 | return { |
391 | 393 | max: 50000, |
... | ... | @@ -402,6 +404,7 @@ export const formSchema: QFormSchema[] = [ |
402 | 404 | componentProps({ formActionType }) { |
403 | 405 | const { setFieldsValue } = formActionType; |
404 | 406 | return { |
407 | + getPopupContainer: () => document.body, | |
405 | 408 | placeholder: '请选择查询周期', |
406 | 409 | options: [ |
407 | 410 | { label: '固定周期', value: QueryWay.LATEST }, |
... | ... | @@ -431,7 +434,7 @@ export const formSchema: QFormSchema[] = [ |
431 | 434 | const { setFieldsValue } = formActionType; |
432 | 435 | let dates: Moment[] = []; |
433 | 436 | return { |
434 | - placeholder: '请选择时间段', | |
437 | + placeholder: ['请选择开始时间','请选择结束时间'], | |
435 | 438 | showTime: true, |
436 | 439 | onCalendarChange(value: Moment[]) { |
437 | 440 | dates = value; | ... | ... |
... | ... | @@ -9,12 +9,7 @@ |
9 | 9 | <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button> |
10 | 10 | </Authority> |
11 | 11 | <Authority value="api:yt:report:delete"> |
12 | - <Popconfirm | |
13 | - title="您确定要批量删除数据" | |
14 | - ok-text="确定" | |
15 | - cancel-text="取消" | |
16 | - @confirm="handleDeleteOrBatchDelete(null)" | |
17 | - > | |
12 | + <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)"> | |
18 | 13 | <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button> |
19 | 14 | </Popconfirm> |
20 | 15 | </Authority> |
... | ... | @@ -25,36 +20,28 @@ |
25 | 20 | </a-button> |
26 | 21 | </template> |
27 | 22 | <template #action="{ record }"> |
28 | - <TableAction | |
29 | - :actions="[ | |
30 | - { | |
31 | - label: '编辑', | |
32 | - icon: 'clarity:note-edit-line', | |
33 | - auth: 'api:yt:report:update', | |
34 | - onClick: handleCreateOrEdit.bind(null, record), | |
23 | + <TableAction :actions="[ | |
24 | + { | |
25 | + label: '编辑', | |
26 | + icon: 'clarity:note-edit-line', | |
27 | + auth: 'api:yt:report:update', | |
28 | + onClick: handleCreateOrEdit.bind(null, record), | |
29 | + }, | |
30 | + { | |
31 | + label: '删除', | |
32 | + icon: 'ant-design:delete-outlined', | |
33 | + auth: 'api:yt:report:delete', | |
34 | + color: 'error', | |
35 | + popConfirm: { | |
36 | + title: '是否确认删除', | |
37 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
35 | 38 | }, |
36 | - { | |
37 | - label: '删除', | |
38 | - icon: 'ant-design:delete-outlined', | |
39 | - auth: 'api:yt:report:delete', | |
40 | - color: 'error', | |
41 | - popConfirm: { | |
42 | - title: '是否确认删除', | |
43 | - confirm: handleDeleteOrBatchDelete.bind(null, record), | |
44 | - }, | |
45 | - }, | |
46 | - ]" | |
47 | - /> | |
39 | + }, | |
40 | + ]" /> | |
48 | 41 | </template> |
49 | 42 | <template #status="{ record }"> |
50 | - <Switch | |
51 | - :disabled="disabledSwitch" | |
52 | - :checked="record.status === 1" | |
53 | - :loading="record.pendingStatus" | |
54 | - checkedChildren="启用" | |
55 | - unCheckedChildren="禁用" | |
56 | - @change="(checked:boolean)=>statusChange(checked,record)" | |
57 | - /> | |
43 | + <Switch :disabled="disabledSwitch" :checked="record.status === 1" :loading="record.pendingStatus" | |
44 | + checkedChildren="启用" unCheckedChildren="禁用" @change="(checked: boolean) => statusChange(checked, record)" /> | |
58 | 45 | </template> |
59 | 46 | </BasicTable> |
60 | 47 | <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" /> |
... | ... | @@ -63,113 +50,114 @@ |
63 | 50 | </template> |
64 | 51 | |
65 | 52 | <script lang="ts" setup> |
66 | - import { reactive, nextTick, ref } from 'vue'; | |
67 | - import { BasicTable, useTable, TableAction } from '/@/components/Table'; | |
68 | - import { useDrawer } from '/@/components/Drawer'; | |
69 | - import ReportConfigDrawer from './ReportConfigDrawer.vue'; | |
70 | - import DevicePreviewModal from './DevicePreviewModal.vue'; | |
71 | - import { | |
72 | - reportPage, | |
73 | - deleteReportManage, | |
74 | - putReportByidAndStatusManage, | |
75 | - } from '/@/api/report/reportManager'; | |
76 | - import { searchFormSchema, columns } from './config.data'; | |
77 | - import { Authority } from '/@/components/Authority'; | |
78 | - import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
79 | - import { Popconfirm, Switch } from 'ant-design-vue'; | |
80 | - import { useModal } from '/@/components/Modal'; | |
81 | - import { useGo } from '/@/hooks/web/usePage'; | |
82 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
53 | +import { reactive, nextTick, ref } from 'vue'; | |
54 | +import { BasicTable, useTable, TableAction } from '/@/components/Table'; | |
55 | +import { useDrawer } from '/@/components/Drawer'; | |
56 | +import ReportConfigDrawer from './ReportConfigDrawer.vue'; | |
57 | +import DevicePreviewModal from './DevicePreviewModal.vue'; | |
58 | +import { | |
59 | + reportPage, | |
60 | + deleteReportManage, | |
61 | + putReportByidAndStatusManage, | |
62 | +} from '/@/api/report/reportManager'; | |
63 | +import { searchFormSchema, columns } from './config.data'; | |
64 | +import { Authority } from '/@/components/Authority'; | |
65 | +import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
66 | +import { Popconfirm, Switch } from 'ant-design-vue'; | |
67 | +import { useModal } from '/@/components/Modal'; | |
68 | +import { useGo } from '/@/hooks/web/usePage'; | |
69 | +import { useMessage } from '/@/hooks/web/useMessage'; | |
83 | 70 | |
84 | - const searchInfo = reactive<Recordable>({}); | |
85 | - const disabledSwitch = ref(false); | |
86 | - const [registerTable, { reload, setProps }] = useTable({ | |
87 | - title: '报表列表', | |
88 | - api: reportPage, | |
89 | - columns, | |
90 | - showIndexColumn: false, | |
91 | - clickToRowSelect: false, | |
92 | - formConfig: { | |
93 | - labelWidth: 120, | |
94 | - schemas: searchFormSchema, | |
95 | - fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']], | |
96 | - }, | |
97 | - useSearchForm: true, | |
98 | - showTableSetting: true, | |
99 | - bordered: true, | |
100 | - rowKey: 'id', | |
101 | - actionColumn: { | |
102 | - width: 200, | |
103 | - title: '操作', | |
104 | - dataIndex: 'action', | |
105 | - slots: { customRender: 'action' }, | |
106 | - fixed: 'right', | |
107 | - }, | |
108 | - }); | |
71 | +const searchInfo = reactive<Recordable>({}); | |
72 | +const disabledSwitch = ref(false); | |
109 | 73 | |
110 | - // 弹框 | |
111 | - const [registerDrawer, { openDrawer }] = useDrawer(); | |
112 | - const { createMessage } = useMessage(); | |
74 | +const [registerTable, { reload, setProps }] = useTable({ | |
75 | + title: '报表列表', | |
76 | + api: reportPage, | |
77 | + columns, | |
78 | + showIndexColumn: false, | |
79 | + clickToRowSelect: false, | |
80 | + formConfig: { | |
81 | + labelWidth: 120, | |
82 | + schemas: searchFormSchema, | |
83 | + fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']], | |
84 | + }, | |
85 | + useSearchForm: true, | |
86 | + showTableSetting: true, | |
87 | + bordered: true, | |
88 | + rowKey: 'id', | |
89 | + actionColumn: { | |
90 | + width: 200, | |
91 | + title: '操作', | |
92 | + dataIndex: 'action', | |
93 | + slots: { customRender: 'action' }, | |
94 | + fixed: 'right', | |
95 | + }, | |
96 | +}); | |
113 | 97 | |
114 | - // 刷新 | |
115 | - const handleSuccess = () => { | |
116 | - reload(); | |
117 | - }; | |
98 | +// 弹框 | |
99 | +const [registerDrawer, { openDrawer }] = useDrawer(); | |
100 | +const { createMessage } = useMessage(); | |
118 | 101 | |
119 | - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
120 | - deleteReportManage, | |
121 | - handleSuccess, | |
122 | - setProps | |
123 | - ); | |
102 | +// 刷新 | |
103 | +const handleSuccess = () => { | |
104 | + reload(); | |
105 | +}; | |
124 | 106 | |
125 | - nextTick(() => { | |
126 | - setProps(selectionOptions); | |
127 | - }); | |
107 | +const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
108 | + deleteReportManage, | |
109 | + handleSuccess, | |
110 | + setProps | |
111 | +); | |
128 | 112 | |
129 | - // 新增或编辑 | |
130 | - const handleCreateOrEdit = (record: Recordable | null) => { | |
131 | - if (record) { | |
132 | - openDrawer(true, { | |
133 | - isUpdate: true, | |
134 | - record, | |
135 | - }); | |
136 | - } else { | |
137 | - openDrawer(true, { | |
138 | - isUpdate: false, | |
139 | - }); | |
140 | - } | |
141 | - }; | |
113 | +nextTick(() => { | |
114 | + setProps(selectionOptions); | |
115 | +}); | |
142 | 116 | |
143 | - //查看设备 | |
144 | - const [registerModal, { openModal }] = useModal(); | |
145 | - const handleDeviceView = (record) => { | |
146 | - openModal(true, { | |
117 | +// 新增或编辑 | |
118 | +const handleCreateOrEdit = (record: Recordable | null) => { | |
119 | + if (record) { | |
120 | + openDrawer(true, { | |
147 | 121 | isUpdate: true, |
148 | 122 | record, |
149 | 123 | }); |
150 | - }; | |
151 | - const statusChange = async (checked, record) => { | |
152 | - try { | |
124 | + } else { | |
125 | + openDrawer(true, { | |
126 | + isUpdate: false, | |
127 | + }); | |
128 | + } | |
129 | +}; | |
130 | + | |
131 | +//查看设备 | |
132 | +const [registerModal, { openModal }] = useModal(); | |
133 | +const handleDeviceView = (record) => { | |
134 | + openModal(true, { | |
135 | + isUpdate: true, | |
136 | + record, | |
137 | + }); | |
138 | +}; | |
139 | +const statusChange = async (checked, record) => { | |
140 | + try { | |
141 | + setProps({ | |
142 | + loading: true, | |
143 | + }); | |
144 | + disabledSwitch.value = true; | |
145 | + const newStatus = checked ? 1 : 0; | |
146 | + const res = await putReportByidAndStatusManage(record.id, newStatus); | |
147 | + if (res && newStatus) { | |
148 | + createMessage.success(`启用成功`); | |
149 | + } else { | |
150 | + createMessage.success('禁用成功'); | |
151 | + } | |
152 | + } finally { | |
153 | + setTimeout(() => { | |
153 | 154 | setProps({ |
154 | - loading: true, | |
155 | + loading: false, | |
155 | 156 | }); |
156 | - disabledSwitch.value = true; | |
157 | - const newStatus = checked ? 1 : 0; | |
158 | - const res = await putReportByidAndStatusManage(record.id, newStatus); | |
159 | - if (res && newStatus) { | |
160 | - createMessage.success(`启用成功`); | |
161 | - } else { | |
162 | - createMessage.success('禁用成功'); | |
163 | - } | |
164 | - } finally { | |
165 | - setTimeout(() => { | |
166 | - setProps({ | |
167 | - loading: false, | |
168 | - }); | |
169 | - disabledSwitch.value = false; | |
170 | - }, 500); | |
171 | - reload(); | |
172 | - } | |
173 | - }; | |
174 | - const go = useGo(); | |
157 | + disabledSwitch.value = false; | |
158 | + }, 500); | |
159 | + reload(); | |
160 | + } | |
161 | +}; | |
162 | +const go = useGo(); | |
175 | 163 | </script> | ... | ... |
... | ... | @@ -5,27 +5,33 @@ import moment from 'moment'; |
5 | 5 | export const columns: BasicColumn[] = [ |
6 | 6 | { |
7 | 7 | title: '配置名称', |
8 | - dataIndex: '1', | |
8 | + dataIndex: 'reportConfigName', | |
9 | 9 | width: 80, |
10 | 10 | }, |
11 | 11 | { |
12 | 12 | title: '所属组织', |
13 | - dataIndex: '2', | |
13 | + dataIndex: 'organizationName', | |
14 | 14 | width: 120, |
15 | 15 | }, |
16 | 16 | { |
17 | 17 | title: '数据类型', |
18 | - dataIndex: '3', | |
18 | + dataIndex: 'dataCompare', | |
19 | 19 | width: 120, |
20 | + format: (_text: string, record: Recordable) => { | |
21 | + return record.dataCompare === 0 ? '历史数据' : record.dataCompare === 1 ? '同比' : '环比'; | |
22 | + }, | |
20 | 23 | }, |
21 | 24 | { |
22 | - title: '执行状态', | |
23 | - dataIndex: '4', | |
25 | + title: '执行方式', | |
26 | + dataIndex: 'executeWay', | |
24 | 27 | width: 120, |
28 | + format: (_text: string, record: Recordable) => { | |
29 | + return record.executeWay === 0 ? '立即执行' : '定时执行'; | |
30 | + }, | |
25 | 31 | }, |
26 | 32 | { |
27 | 33 | title: '执行日期', |
28 | - dataIndex: '8', | |
34 | + dataIndex: 'executeTime', | |
29 | 35 | width: 180, |
30 | 36 | }, |
31 | 37 | ]; |
... | ... | @@ -33,7 +39,7 @@ export const columns: BasicColumn[] = [ |
33 | 39 | // 查询配置 |
34 | 40 | export const searchFormSchema: FormSchema[] = [ |
35 | 41 | { |
36 | - field: '1', | |
42 | + field: 'reportConfigName', | |
37 | 43 | label: '配置名称', |
38 | 44 | component: 'Input', |
39 | 45 | colProps: { span: 6 }, |
... | ... | @@ -43,7 +49,7 @@ export const searchFormSchema: FormSchema[] = [ |
43 | 49 | }, |
44 | 50 | }, |
45 | 51 | { |
46 | - field: '2', | |
52 | + field: 'status', | |
47 | 53 | label: '执行状态', |
48 | 54 | component: 'Select', |
49 | 55 | colProps: { span: 6 }, |
... | ... | @@ -66,7 +72,7 @@ export const searchFormSchema: FormSchema[] = [ |
66 | 72 | }, |
67 | 73 | }, |
68 | 74 | { |
69 | - field: '3', | |
75 | + field: 'executeTime', | |
70 | 76 | label: '执行时间', |
71 | 77 | component: 'RangePicker', |
72 | 78 | componentProps: { | ... | ... |
... | ... | @@ -6,42 +6,35 @@ |
6 | 6 | <a-button type="primary" @click="exportCharts"> 导出报表 </a-button> |
7 | 7 | </Authority> |
8 | 8 | <Authority value="api:yt:reportExport:delete"> |
9 | - <Popconfirm | |
10 | - title="您确定要批量删除数据" | |
11 | - ok-text="确定" | |
12 | - cancel-text="取消" | |
13 | - @confirm="handleDeleteOrBatchDelete(null)" | |
14 | - > | |
9 | + <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)"> | |
15 | 10 | <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button> |
16 | 11 | </Popconfirm> |
17 | 12 | </Authority> |
18 | 13 | </template> |
19 | 14 | <template #action="{ record }"> |
20 | - <TableAction | |
21 | - :actions="[ | |
22 | - { | |
23 | - label: '查看', | |
24 | - icon: 'clarity:note-edit-line', | |
25 | - auth: 'api:yt:reportExport:get', | |
26 | - onClick: handleView.bind(null, record), | |
15 | + <TableAction :actions="[ | |
16 | + { | |
17 | + label: '查看', | |
18 | + icon: 'clarity:note-edit-line', | |
19 | + auth: 'api:yt:reportExport:get', | |
20 | + onClick: handleView.bind(null, record), | |
21 | + }, | |
22 | + { | |
23 | + label: '导出报表', | |
24 | + icon: 'clarity:note-edit-line', | |
25 | + auth: 'api:yt:reportExport:export', | |
26 | + }, | |
27 | + { | |
28 | + label: '删除', | |
29 | + icon: 'ant-design:delete-outlined', | |
30 | + auth: 'api:yt:reportExport:delete', | |
31 | + color: 'error', | |
32 | + popConfirm: { | |
33 | + title: '是否确认删除', | |
34 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
27 | 35 | }, |
28 | - { | |
29 | - label: '导出报表', | |
30 | - icon: 'clarity:note-edit-line', | |
31 | - auth: 'api:yt:reportExport:export', | |
32 | - }, | |
33 | - { | |
34 | - label: '删除', | |
35 | - icon: 'ant-design:delete-outlined', | |
36 | - auth: 'api:yt:reportExport:delete', | |
37 | - color: 'error', | |
38 | - popConfirm: { | |
39 | - title: '是否确认删除', | |
40 | - confirm: handleDeleteOrBatchDelete.bind(null, record), | |
41 | - }, | |
42 | - }, | |
43 | - ]" | |
44 | - /> | |
36 | + }, | |
37 | + ]" /> | |
45 | 38 | </template> |
46 | 39 | </BasicTable> |
47 | 40 | <ReportPreviewModal @register="registerModal" /> |
... | ... | @@ -49,61 +42,64 @@ |
49 | 42 | </template> |
50 | 43 | |
51 | 44 | <script lang="ts" setup> |
52 | - import { reactive, nextTick } from 'vue'; | |
53 | - import { BasicTable, useTable, TableAction } from '/@/components/Table'; | |
54 | - import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager'; | |
55 | - import { searchFormSchema, columns } from './config.data'; | |
56 | - import { Authority } from '/@/components/Authority'; | |
57 | - import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
58 | - import { Popconfirm } from 'ant-design-vue'; | |
59 | - import { useModal } from '/@/components/Modal'; | |
60 | - import ReportPreviewModal from './ReportPreviewModal.vue'; | |
45 | +import { reactive, nextTick } from 'vue'; | |
46 | +import { BasicTable, useTable, TableAction } from '/@/components/Table'; | |
47 | +import { searchFormSchema, columns } from './config.data'; | |
48 | +import { Authority } from '/@/components/Authority'; | |
49 | +import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
50 | +import { Popconfirm } from 'ant-design-vue'; | |
51 | +import { useModal } from '/@/components/Modal'; | |
52 | +import ReportPreviewModal from './ReportPreviewModal.vue'; | |
53 | +import { | |
54 | + exportPage, | |
55 | + deleteExportManage | |
56 | +} from '/@/api/export/exportManager'; | |
61 | 57 | |
62 | - const searchInfo = reactive<Recordable>({}); | |
58 | +const searchInfo = reactive<Recordable>({}); | |
63 | 59 | |
64 | - const [registerTable, { reload, setProps }] = useTable({ | |
65 | - title: '报表导出列表', | |
66 | - api: cameraPage, | |
67 | - columns, | |
68 | - showIndexColumn: false, | |
69 | - clickToRowSelect: false, | |
70 | - formConfig: { | |
71 | - labelWidth: 120, | |
72 | - schemas: searchFormSchema, | |
73 | - }, | |
74 | - useSearchForm: true, | |
75 | - showTableSetting: true, | |
76 | - bordered: true, | |
77 | - rowKey: 'id', | |
78 | - actionColumn: { | |
79 | - width: 200, | |
80 | - title: '操作', | |
81 | - dataIndex: 'action', | |
82 | - slots: { customRender: 'action' }, | |
83 | - fixed: 'right', | |
84 | - }, | |
85 | - }); | |
60 | +const [registerTable, { reload, setProps }] = useTable({ | |
61 | + title: '报表导出列表', | |
62 | + api: exportPage, | |
63 | + columns, | |
64 | + showIndexColumn: false, | |
65 | + clickToRowSelect: false, | |
66 | + formConfig: { | |
67 | + labelWidth: 120, | |
68 | + schemas: searchFormSchema, | |
69 | + }, | |
70 | + useSearchForm: true, | |
71 | + showTableSetting: true, | |
72 | + bordered: true, | |
73 | + rowKey: 'id', | |
74 | + actionColumn: { | |
75 | + width: 200, | |
76 | + title: '操作', | |
77 | + dataIndex: 'action', | |
78 | + slots: { customRender: 'action' }, | |
79 | + fixed: 'right', | |
80 | + }, | |
81 | +}); | |
86 | 82 | |
87 | - const handleSuccess = () => { | |
88 | - reload(); | |
89 | - }; | |
83 | +const handleSuccess = () => { | |
84 | + reload(); | |
85 | +}; | |
90 | 86 | |
91 | - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
92 | - deleteCameraManage, | |
93 | - handleSuccess, | |
94 | - setProps | |
95 | - ); | |
87 | +const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
88 | + deleteExportManage, | |
89 | + handleSuccess, | |
90 | + setProps | |
91 | +); | |
96 | 92 | |
97 | - nextTick(() => { | |
98 | - setProps(selectionOptions); | |
99 | - }); | |
93 | +nextTick(() => { | |
94 | + setProps(selectionOptions); | |
95 | +}); | |
100 | 96 | |
101 | - const [registerModal, { openModal }] = useModal(); | |
102 | - const handleView = (_, record) => { | |
103 | - openModal(true, { | |
104 | - isUpdate: true, | |
105 | - record, | |
106 | - }); | |
107 | - }; | |
108 | - const exportCharts = () => {}; | |
97 | +const [registerModal, { openModal }] = useModal(); | |
98 | +const handleView = (_, record) => { | |
99 | + openModal(true, { | |
100 | + isUpdate: true, | |
101 | + record, | |
102 | + }); | |
103 | +}; | |
104 | +const exportCharts = () => { }; | |
109 | 105 | </script> | ... | ... |
... | ... | @@ -185,9 +185,10 @@ export const modeKafkaForm: FormSchema[] = [ |
185 | 185 | }, |
186 | 186 | { |
187 | 187 | field: 'otherProperties', |
188 | - label: '其他属性(不可重复)', | |
188 | + label: '其他属性', | |
189 | 189 | colProps: { span: 24 }, |
190 | 190 | component: 'JAddInput', |
191 | + subLabel: '不可重复', | |
191 | 192 | }, |
192 | 193 | { |
193 | 194 | field: 'addMetadataKeyValuesAsKafkaHeaders', |
... | ... | @@ -539,7 +540,7 @@ export const modeRabbitMqForm: FormSchema[] = [ |
539 | 540 | }, |
540 | 541 | { |
541 | 542 | field: 'virtualHost', |
542 | - label: '虚拟端口', | |
543 | + label: '虚拟端口(以/开头)', | |
543 | 544 | colProps: { span: 12 }, |
544 | 545 | component: 'Input', |
545 | 546 | defaultValue: '/', |
... | ... | @@ -601,9 +602,10 @@ export const modeRabbitMqForm: FormSchema[] = [ |
601 | 602 | }, |
602 | 603 | { |
603 | 604 | field: 'clientProperties', |
604 | - label: '客户端属性(不可重复)', | |
605 | + label: '客户端属性', | |
605 | 606 | colProps: { span: 24 }, |
606 | 607 | component: 'JAddInput', |
608 | + subLabel: '不可重复', | |
607 | 609 | }, |
608 | 610 | { |
609 | 611 | field: 'description', |
... | ... | @@ -814,10 +816,11 @@ export const modeApiForm: FormSchema[] = [ |
814 | 816 | }, |
815 | 817 | { |
816 | 818 | field: 'headers', |
817 | - label: 'Headers(不可重复)', | |
819 | + label: 'Headers', | |
818 | 820 | colProps: { span: 24 }, |
819 | 821 | defaultValue: { 'Content-Type': 'application/json' }, |
820 | 822 | component: 'JAddInput', |
823 | + subLabel: '不可重复', | |
821 | 824 | }, |
822 | 825 | |
823 | 826 | { | ... | ... |
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <BasicModal | |
4 | - v-bind="$attrs" | |
5 | - width="62rem" | |
6 | - :height="heightNum" | |
7 | - @register="register" | |
8 | - title="任务详细" | |
9 | - @cancel="handleCancel" | |
10 | - :showOkBtn="false" | |
11 | - style="font-size: 12px" | |
12 | - > | |
3 | + <BasicModal v-bind="$attrs" width="62rem" :height="heightNum" @register="register" title="任务详细" | |
4 | + @cancel="handleCancel" :showOkBtn="false" style="font-size: 12px"> | |
13 | 5 | <div> |
14 | 6 | <Description :column="3" size="middle" @register="registeDesc" /> |
15 | 7 | </div> |
... | ... | @@ -17,37 +9,46 @@ |
17 | 9 | </div> |
18 | 10 | </template> |
19 | 11 | <script setup lang="ts"> |
20 | - import { ref, nextTick, reactive } from 'vue'; | |
21 | - import { BasicModal, useModalInner } from '/@/components/Modal'; | |
22 | - import { personSchema } from './config.data'; | |
23 | - import { Description } from '/@/components/Description/index'; | |
24 | - import { useDescription } from '/@/components/Description'; | |
12 | +import { ref, nextTick, reactive } from 'vue'; | |
13 | +import { BasicModal, useModalInner } from '/@/components/Modal'; | |
14 | +import { personSchema } from './config.data'; | |
15 | +import { Description } from '/@/components/Description/index'; | |
16 | +import { useDescription } from '/@/components/Description'; | |
25 | 17 | |
26 | - const heightNum = ref(800); | |
27 | - let personData = reactive({}); | |
28 | - const [registeDesc, { setDescProps }] = useDescription({ | |
29 | - title: '任务详细信息', | |
30 | - data: personData, | |
31 | - schema: personSchema, | |
32 | - column: 3, | |
18 | +const heightNum = ref(800); | |
19 | +let personData = reactive({}); | |
20 | +const [registeDesc, { setDescProps }] = useDescription({ | |
21 | + title: '任务详细信息', | |
22 | + data: personData, | |
23 | + schema: personSchema, | |
24 | + column: 3, | |
25 | +}); | |
26 | +const [register] = useModalInner((data) => { | |
27 | + nextTick(() => { | |
28 | + //回显 | |
29 | + for (let i in data.record) { | |
30 | + Reflect.set(personData, i, data.record[i]); | |
31 | + } | |
32 | + setDescProps(personData); | |
33 | 33 | }); |
34 | - const [register] = useModalInner((data) => { | |
35 | - nextTick(() => { | |
36 | - //回显 | |
37 | - for (let i in data.record) { | |
38 | - Reflect.set(personData, i, data.record[i]); | |
39 | - } | |
40 | - setDescProps(personData); | |
41 | - }); | |
42 | - }); | |
43 | - const handleCancel = () => {}; | |
34 | +}); | |
35 | +const handleCancel = () => { }; | |
44 | 36 | </script> |
45 | 37 | <style lang="less" scoped> |
46 | - :deep(.vben-basic-title-normal) { | |
47 | - font-size: 16px; | |
48 | - font-weight: 500; | |
49 | - } | |
50 | - :deep(.vben-collapse-container__header) { | |
51 | - border-bottom: none; | |
52 | - } | |
38 | +:deep(.vben-basic-title-normal) { | |
39 | + font-size: 16px; | |
40 | + font-weight: 500; | |
41 | +} | |
42 | + | |
43 | +:deep(.vben-collapse-container__header) { | |
44 | + border-bottom: none; | |
45 | +} | |
46 | + | |
47 | +:deep(.ant-descriptions-item-label) { | |
48 | + width: 30rem | |
49 | +} | |
50 | + | |
51 | +:deep(.ant-descriptions-item-content) { | |
52 | + width: 45rem | |
53 | +} | |
53 | 54 | </style> | ... | ... |