Commit a0767d50af5b464faf13ca879839cc8c3e411b4c

Authored by fengtao
1 parent f4bd381f

feat:修改报表配置

@@ -7,6 +7,7 @@ enum ReportManagerApi { @@ -7,6 +7,7 @@ enum ReportManagerApi {
7 DELETE_REPORT_API = '/report_form/config', 7 DELETE_REPORT_API = '/report_form/config',
8 PUT_REPORT_API = '/report_form/config', 8 PUT_REPORT_API = '/report_form/config',
9 PUTID_REPORT_API = '/report_form', 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,7 +40,7 @@ export const createOrEditReportManage = (data) => {
39 export const putReportConfigManage = (data) => { 40 export const putReportConfigManage = (data) => {
40 return defHttp.put<ReportModel>({ 41 return defHttp.put<ReportModel>({
41 url: ReportManagerApi.PUT_REPORT_API, 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,3 +50,10 @@ export const putReportByidAndStatusManage = (id, status) => {
49 url: ReportManagerApi.PUTID_REPORT_API + '/config/' + id + '/' + status, 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 +};
@@ -17,20 +17,23 @@ import { ref, computed, unref, reactive, watch, nextTick, Ref } from 'vue'; @@ -17,20 +17,23 @@ import { ref, computed, unref, reactive, watch, nextTick, Ref } from 'vue';
17 import { BasicForm, useForm } from '/@/components/Form'; 17 import { BasicForm, useForm } from '/@/components/Form';
18 import { formSchema, organizationId } from './config.data'; 18 import { formSchema, organizationId } from './config.data';
19 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; 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 import { useMessage } from '/@/hooks/web/useMessage'; 21 import { useMessage } from '/@/hooks/web/useMessage';
22 import moment from 'moment'; 22 import moment from 'moment';
23 import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi'; 23 import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
24 import { Select } from 'ant-design-vue'; 24 import { Select } from 'ant-design-vue';
25 import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue'; 25 import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
26 import { SelectTypes } from 'ant-design-vue/es/select'; 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 type TDeviceList = { 30 type TDeviceList = {
29 key?: string, 31 key?: string,
30 value?: string, 32 value?: string,
31 label?: string, 33 label?: string,
32 attribute?: string, 34 attribute?: string,
33 - device?: string 35 + device?: string,
  36 + name?: string
34 } 37 }
35 const emit = defineEmits(['success', 'register']); 38 const emit = defineEmits(['success', 'register']);
36 const deviceAttrRef: any = ref(null); 39 const deviceAttrRef: any = ref(null);
@@ -62,26 +65,29 @@ const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ @@ -62,26 +65,29 @@ const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
62 labelWidth: 120, 65 labelWidth: 120,
63 schemas: formSchema, 66 schemas: formSchema,
64 showActionButtonGroup: false, 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 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { 70 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
68 await resetFields(); 71 await resetFields();
69 setDrawerProps({ confirmLoading: false }); 72 setDrawerProps({ confirmLoading: false });
70 isUpdate.value = !!data?.isUpdate; 73 isUpdate.value = !!data?.isUpdate;
71 if (unref(isUpdate)) { 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 setFieldsValue({ 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 const { items } = await screenLinkPageByDeptIdGetDevice({ 89 const { items } = await screenLinkPageByDeptIdGetDevice({
84 - organizationId: data.record.organizationId, 90 + organizationId: editResData.data.organizationId,
85 }); 91 });
86 selectOptions.value = items.map((item) => { 92 selectOptions.value = items.map((item) => {
87 if (item.deviceType !== 'GATEWAY') 93 if (item.deviceType !== 'GATEWAY')
@@ -90,49 +96,15 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async ( @@ -90,49 +96,15 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
90 value: item.tbDeviceId, 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 selectDevice.value = deviceIds; 105 selectDevice.value = deviceIds;
113 //回显设备属性 TODO 模拟的数据 待服务端返回 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 nextTick(() => { }); 108 nextTick(() => { });
137 } else { 109 } else {
138 editId.value = ''; 110 editId.value = '';
@@ -147,12 +119,14 @@ const getTitle = computed(() => (!unref(isUpdate) ? '新增报表é…ç½®' : 'ç¼–è @@ -147,12 +119,14 @@ const getTitle = computed(() => (!unref(isUpdate) ? '新增报表é…ç½®' : 'ç¼–è
147 const handleChange = (e: any) => { 119 const handleChange = (e: any) => {
148 getAttrDevice.value.push({ 120 getAttrDevice.value.push({
149 device: e.value, 121 device: e.value,
150 - attribute: e.attribute 122 + attribute: e.attribute,
  123 + name: e.device
151 }); 124 });
152 }; 125 };
153 let postObj: any = reactive({}); 126 let postObj: any = reactive({});
154 let queryCondition: any = reactive({}); 127 let queryCondition: any = reactive({});
155 let executeContent: any = reactive({}); 128 let executeContent: any = reactive({});
  129 +const startTs = ref(0)
156 const endTs = ref(0); 130 const endTs = ref(0);
157 async function handleSubmit() { 131 async function handleSubmit() {
158 setDrawerProps({ confirmLoading: true }); 132 setDrawerProps({ confirmLoading: true });
@@ -166,26 +140,38 @@ async function handleSubmit() { @@ -166,26 +140,38 @@ async function handleSubmit() {
166 if (values.executeWay == 0) { 140 if (values.executeWay == 0) {
167 executeContent = null; 141 executeContent = null;
168 } else { 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 queryCondition = { 145 queryCondition = {
176 agg: values.agg, 146 agg: values.agg,
177 interval: values.interval, 147 interval: values.interval,
178 limit: values.limit, 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 delete values.devices; 157 delete values.devices;
181 delete values.agg; 158 delete values.agg;
182 delete values.interval; 159 delete values.interval;
183 delete values.timeZone; 160 delete values.timeZone;
  161 + delete values.timeWeek;
  162 + delete values.cronTime;
  163 + delete values.cronWeek;
  164 + delete values.cronYear;
184 postObj = { 165 postObj = {
185 ...values, 166 ...values,
186 ...{ executeAttributes: getAttrDevice.value }, 167 ...{ executeAttributes: getAttrDevice.value },
187 ...{ queryCondition }, 168 ...{ queryCondition },
188 - ...{ endTs: endTs.value }, 169 + ...{
  170 + startTs: startTs.value
  171 + },
  172 + ...{
  173 + endTs: endTs.value
  174 + },
189 ...{ executeContent }, 175 ...{ executeContent },
190 ...{ id: editId.value !== '' ? editId.value : '' }, 176 ...{ id: editId.value !== '' ? editId.value : '' },
191 }; 177 };
@@ -36,11 +36,11 @@ export const columns: BasicColumn[] = [ @@ -36,11 +36,11 @@ export const columns: BasicColumn[] = [
36 { 36 {
37 title: '配置名称', 37 title: '配置名称',
38 dataIndex: 'name', 38 dataIndex: 'name',
39 - width: 80, 39 + width: 120,
40 }, 40 },
41 { 41 {
42 title: '所属组织', 42 title: '所属组织',
43 - dataIndex: 'organizationId', 43 + dataIndex: 'organizationName',
44 width: 120, 44 width: 120,
45 }, 45 },
46 { 46 {
@@ -223,7 +223,7 @@ export const formSchema: QFormSchema[] = [ @@ -223,7 +223,7 @@ export const formSchema: QFormSchema[] = [
223 ifShow: ({ values }) => isTiming(values.executeWay), 223 ifShow: ({ values }) => isTiming(values.executeWay),
224 }, 224 },
225 { 225 {
226 - field: '51111', 226 + field: 'cronWeek',
227 component: 'ApiSelect', 227 component: 'ApiSelect',
228 label: '每周', 228 label: '每周',
229 required: true, 229 required: true,
@@ -241,7 +241,7 @@ export const formSchema: QFormSchema[] = [ @@ -241,7 +241,7 @@ export const formSchema: QFormSchema[] = [
241 ifShow: ({ values }) => isWeek(values.timeWeek), 241 ifShow: ({ values }) => isWeek(values.timeWeek),
242 }, 242 },
243 { 243 {
244 - field: '71111', 244 + field: 'cronYear',
245 component: 'ApiSelect', 245 component: 'ApiSelect',
246 label: '每月', 246 label: '每月',
247 required: true, 247 required: true,
@@ -259,7 +259,7 @@ export const formSchema: QFormSchema[] = [ @@ -259,7 +259,7 @@ export const formSchema: QFormSchema[] = [
259 ifShow: ({ values }) => isMonth(values.timeWeek), 259 ifShow: ({ values }) => isMonth(values.timeWeek),
260 }, 260 },
261 { 261 {
262 - field: '62121', 262 + field: 'cronTime',
263 component: 'ApiSelect', 263 component: 'ApiSelect',
264 label: '时间', 264 label: '时间',
265 required: true, 265 required: true,
@@ -276,18 +276,7 @@ export const formSchema: QFormSchema[] = [ @@ -276,18 +276,7 @@ export const formSchema: QFormSchema[] = [
276 }, 276 },
277 ifShow: ({ values }) => isTiming(values.executeWay), 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 field: 'attributeNature', 281 field: 'attributeNature',
293 component: 'RadioGroup', 282 component: 'RadioGroup',
@@ -345,6 +334,19 @@ export const formSchema: QFormSchema[] = [ @@ -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 field: 'dataCompare', 350 field: 'dataCompare',
349 label: '数据类型', 351 label: '数据类型',
350 required: true, 352 required: true,
@@ -385,7 +387,7 @@ export const formSchema: QFormSchema[] = [ @@ -385,7 +387,7 @@ export const formSchema: QFormSchema[] = [
385 ifShow({ values }) { 387 ifShow({ values }) {
386 return values[SchemaFiled.AGG] === AggregateDataEnum.NONE; 388 return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
387 }, 389 },
388 - // defaultValue: 200, 390 + defaultValue: 200,
389 componentProps() { 391 componentProps() {
390 return { 392 return {
391 max: 50000, 393 max: 50000,
@@ -402,6 +404,7 @@ export const formSchema: QFormSchema[] = [ @@ -402,6 +404,7 @@ export const formSchema: QFormSchema[] = [
402 componentProps({ formActionType }) { 404 componentProps({ formActionType }) {
403 const { setFieldsValue } = formActionType; 405 const { setFieldsValue } = formActionType;
404 return { 406 return {
  407 + getPopupContainer: () => document.body,
405 placeholder: '请选择查询周期', 408 placeholder: '请选择查询周期',
406 options: [ 409 options: [
407 { label: '固定周期', value: QueryWay.LATEST }, 410 { label: '固定周期', value: QueryWay.LATEST },
@@ -431,7 +434,7 @@ export const formSchema: QFormSchema[] = [ @@ -431,7 +434,7 @@ export const formSchema: QFormSchema[] = [
431 const { setFieldsValue } = formActionType; 434 const { setFieldsValue } = formActionType;
432 let dates: Moment[] = []; 435 let dates: Moment[] = [];
433 return { 436 return {
434 - placeholder: '请选择时间段', 437 + placeholder: ['请选择开始时间','请选择结束时间'],
435 showTime: true, 438 showTime: true,
436 onCalendarChange(value: Moment[]) { 439 onCalendarChange(value: Moment[]) {
437 dates = value; 440 dates = value;
@@ -9,12 +9,7 @@ @@ -9,12 +9,7 @@
9 <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button> 9 <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button>
10 </Authority> 10 </Authority>
11 <Authority value="api:yt:report:delete"> 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 <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button> 13 <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
19 </Popconfirm> 14 </Popconfirm>
20 </Authority> 15 </Authority>
@@ -25,36 +20,28 @@ @@ -25,36 +20,28 @@
25 </a-button> 20 </a-button>
26 </template> 21 </template>
27 <template #action="{ record }"> 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 </template> 41 </template>
49 <template #status="{ record }"> 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 </template> 45 </template>
59 </BasicTable> 46 </BasicTable>
60 <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" /> 47 <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -63,113 +50,114 @@ @@ -63,113 +50,114 @@
63 </template> 50 </template>
64 51
65 <script lang="ts" setup> 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 isUpdate: true, 121 isUpdate: true,
148 record, 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 setProps({ 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 </script> 163 </script>
1 <template> 1 <template>
2 <div> 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 <div> 5 <div>
14 <Description :column="3" size="middle" @register="registeDesc" /> 6 <Description :column="3" size="middle" @register="registeDesc" />
15 </div> 7 </div>
@@ -17,37 +9,46 @@ @@ -17,37 +9,46 @@
17 </div> 9 </div>
18 </template> 10 </template>
19 <script setup lang="ts"> 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 </script> 36 </script>
45 <style lang="less" scoped> 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 </style> 54 </style>