feat：修改报表配置

@@ -7,6 +7,7 @@ enum ReportManagerApi {
   DELETE_REPORT_API = '/report_form/config',
   PUT_REPORT_API = '/report_form/config',
   PUTID_REPORT_API = '/report_form',
+  EDIT_DETAIL_REPORT_API = '/report_form',
 }
 
 //分页
@@ -39,7 +40,7 @@ export const createOrEditReportManage = (data) => {
 export const putReportConfigManage = (data) => {
   return defHttp.put<ReportModel>({
     url: ReportManagerApi.PUT_REPORT_API,
-    data
+    data,
   });
 };
 
@@ -49,3 +50,10 @@ export const putReportByidAndStatusManage = (id, status) => {
     url: ReportManagerApi.PUTID_REPORT_API + '/config/' + id + '/' + status,
   });
 };
+
+//编辑详情
+export const reportEditDetailPage = (params) => {
+  return defHttp.get<ReportQueryParam>({
+    url: ReportManagerApi.EDIT_DETAIL_REPORT_API + '/config/' + params,
+  });
+};

@@ -17,20 +17,23 @@ import { ref, computed, unref, reactive, watch, nextTick, Ref } from 'vue';
 import { BasicForm, useForm } from '/@/components/Form';
 import { formSchema, organizationId } from './config.data';
 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-import { createOrEditReportManage, putReportConfigManage } from '/@/api/report/reportManager';
+import { createOrEditReportManage, putReportConfigManage, reportEditDetailPage } from '/@/api/report/reportManager';
 import { useMessage } from '/@/hooks/web/useMessage';
 import moment from 'moment';
 import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
 import { Select } from 'ant-design-vue';
 import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
 import { SelectTypes } from 'ant-design-vue/es/select';
+import { SchemaFiled } from './config.data';
+import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config';
 
 type TDeviceList = {
   key?: string,
   value?: string,
   label?: string,
   attribute?: string,
-  device?: string
+  device?: string,
+  name?: string
 }
 const emit = defineEmits(['success', 'register']);
 const deviceAttrRef: any = ref(null);
@@ -62,26 +65,29 @@ const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
   labelWidth: 120,
   schemas: formSchema,
   showActionButtonGroup: false,
-  fieldMapToTime: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+  fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
 });
 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
   await resetFields();
   setDrawerProps({ confirmLoading: false });
   isUpdate.value = !!data?.isUpdate;
   if (unref(isUpdate)) {
-    //回显基础数据
-    editId.value = data.record.id;
-    await setFieldsValue(data.record);
+    //编辑回显数据
+    const editResData: any = await reportEditDetailPage(data.record.id)
+    console.log(editResData.data)
+    // //回显基础数据
+    editId.value = editResData.data.id;
+    await setFieldsValue(editResData.data);
     //回显嵌套数据
     setFieldsValue({
-      agg: queryCondition?.agg,
-      interval: queryCondition?.interval,
+      agg: editResData.data.queryCondition?.agg,
+      interval: editResData.data.queryCondition?.interval,
     });
     //回显设备
-    orgId.value = data.record.organizationId;
+    orgId.value = editResData.data.organizationId;
     //获取该组织下的设备--排除网关设备
     const { items } = await screenLinkPageByDeptIdGetDevice({
-      organizationId: data.record.organizationId,
+      organizationId: editResData.data.organizationId,
     });
     selectOptions.value = items.map((item) => {
       if (item.deviceType !== 'GATEWAY')
@@ -90,49 +96,15 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
           value: item.tbDeviceId,
         };
     });
-    //TODO 模拟的数据 待服务端返回
-    const deviceIds: any = [
-      {
-        label: '奥迪网关子设备',
-        key: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
-      },
-      {
-        label: '宝马默认设备',
-        key: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
-      },
-      {
-        label: '奔驰默认设备',
-        key: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
-      },
-      {
-        label: '新增奥迪测试设备',
-        key: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
-      },
-    ];
+    const deviceIds = editResData.data.executeAttributes.map(m => {
+      return {
+        label: m.name,
+        key: m.device
+      }
+    })
     selectDevice.value = deviceIds;
     //回显设备属性 TODO 模拟的数据 待服务端返回
-    deviceList.value = [
-      {
-        value: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
-        attribute: 'CO2',
-        label: '奥迪网关子设备',
-      },
-      {
-        value: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
-        attribute: 'co',
-        label: '宝马默认设备',
-      },
-      {
-        value: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
-        attribute: 'hot',
-        label: '奔驰默认设备',
-      },
-      {
-        value: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
-        attribute: 'wet',
-        label: '新增奥迪测试设备',
-      },
-    ];
+    deviceList.value = editResData.data.executeAttributes
     nextTick(() => { });
   } else {
     editId.value = '';
@@ -147,12 +119,14 @@ const getTitle = computed(() => (!unref(isUpdate) ? '新增报表é…ç½®' : 'ç¼–è
 const handleChange = (e: any) => {
   getAttrDevice.value.push({
     device: e.value,
-    attribute: e.attribute
+    attribute: e.attribute,
+    name: e.device
   });
 };
 let postObj: any = reactive({});
 let queryCondition: any = reactive({});
 let executeContent: any = reactive({});
+const startTs = ref(0)
 const endTs = ref(0);
 async function handleSubmit() {
   setDrawerProps({ confirmLoading: true });
@@ -166,26 +140,38 @@ async function handleSubmit() {
     if (values.executeWay == 0) {
       executeContent = null;
     } else {
-      executeContent = {};
-    }
-    if (values.timeZone) {
-      const getTime = JSON.stringify(values.timeZone);
-      endTs.value = moment(JSON.parse(getTime)[0]).valueOf() || 1659424160000;
+      executeContent = values.cronTime
     }
     queryCondition = {
       agg: values.agg,
       interval: values.interval,
       limit: values.limit,
     };
+    if (values.way === QueryWay.LATEST) {
+      startTs.value = moment().subtract(values.startTs, 'ms').valueOf()
+      endTs.value = Date.now()
+    } else {
+      startTs.value = moment(values.startTs).valueOf()
+      endTs.value = moment(values.endTs).valueOf()
+    }
     delete values.devices;
     delete values.agg;
     delete values.interval;
     delete values.timeZone;
+    delete values.timeWeek;
+    delete values.cronTime;
+    delete values.cronWeek;
+    delete values.cronYear;
     postObj = {
       ...values,
       ...{ executeAttributes: getAttrDevice.value },
       ...{ queryCondition },
-      ...{ endTs: endTs.value },
+      ...{
+        startTs: startTs.value
+      },
+      ...{
+        endTs: endTs.value
+      },
       ...{ executeContent },
       ...{ id: editId.value !== '' ? editId.value : '' },
     };

@@ -36,11 +36,11 @@ export const columns: BasicColumn[] = [
   {
     title: '配置名称',
     dataIndex: 'name',
-    width: 80,
+    width: 120,
   },
   {
     title: '所属组织',
-    dataIndex: 'organizationId',
+    dataIndex: 'organizationName',
     width: 120,
   },
   {
@@ -223,7 +223,7 @@ export const formSchema: QFormSchema[] = [
     ifShow: ({ values }) => isTiming(values.executeWay),
   },
   {
-    field: '51111',
+    field: 'cronWeek',
     component: 'ApiSelect',
     label: '每周',
     required: true,
@@ -241,7 +241,7 @@ export const formSchema: QFormSchema[] = [
     ifShow: ({ values }) => isWeek(values.timeWeek),
   },
   {
-    field: '71111',
+    field: 'cronYear',
     component: 'ApiSelect',
     label: '每月',
     required: true,
@@ -259,7 +259,7 @@ export const formSchema: QFormSchema[] = [
     ifShow: ({ values }) => isMonth(values.timeWeek),
   },
   {
-    field: '62121',
+    field: 'cronTime',
     component: 'ApiSelect',
     label: '时间',
     required: true,
@@ -276,18 +276,7 @@ export const formSchema: QFormSchema[] = [
     },
     ifShow: ({ values }) => isTiming(values.executeWay),
   },
-  {
-    field: 'devices',
-    label: '设备',
-    helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'],
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择设备',
-      mode: 'multiple',
-    },
-    slot: 'devices',
-    colProps: { span: 24 },
-  },
+
   {
     field: 'attributeNature',
     component: 'RadioGroup',
@@ -345,6 +334,19 @@ export const formSchema: QFormSchema[] = [
     },
   },
   {
+    field: 'devices',
+    label: '设备',
+    helpMessage: ['报表配置只对拥有"数值型"属性的设备才能配置'],
+    component: 'Select',
+    // required: true,
+    componentProps: {
+      placeholder: '请选择设备',
+      mode: 'multiple',
+    },
+    slot: 'devices',
+    colProps: { span: 24 },
+  },
+  {
     field: 'dataCompare',
     label: '数据类型',
     required: true,
@@ -385,7 +387,7 @@ export const formSchema: QFormSchema[] = [
     ifShow({ values }) {
       return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
     },
-    // defaultValue: 200,
+    defaultValue: 200,
     componentProps() {
       return {
         max: 50000,
@@ -402,6 +404,7 @@ export const formSchema: QFormSchema[] = [
     componentProps({ formActionType }) {
       const { setFieldsValue } = formActionType;
       return {
+      getPopupContainer: () => document.body,
         placeholder: '请选择查询周期',
         options: [
           { label: '固定周期', value: QueryWay.LATEST },
@@ -431,7 +434,7 @@ export const formSchema: QFormSchema[] = [
       const { setFieldsValue } = formActionType;
       let dates: Moment[] = [];
       return {
-        placeholder: '请选择时间段',
+        placeholder: ['请选择开始时间','请选择结束时间'],
         showTime: true,
         onCalendarChange(value: Moment[]) {
           dates = value;

@@ -9,12 +9,7 @@
           <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button>
         </Authority>
         <Authority value="api:yt:report:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
+          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
             <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
           </Popconfirm>
         </Authority>
@@ -25,36 +20,28 @@
         </a-button>
       </template>
       <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              icon: 'clarity:note-edit-line',
-              auth: 'api:yt:report:update',
-              onClick: handleCreateOrEdit.bind(null, record),
+        <TableAction :actions="[
+          {
+            label: '编辑',
+            icon: 'clarity:note-edit-line',
+            auth: 'api:yt:report:update',
+            onClick: handleCreateOrEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            icon: 'ant-design:delete-outlined',
+            auth: 'api:yt:report:delete',
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDeleteOrBatchDelete.bind(null, record),
             },
-            {
-              label: '删除',
-              icon: 'ant-design:delete-outlined',
-              auth: 'api:yt:report:delete',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
+          },
+        ]" />
       </template>
       <template #status="{ record }">
-        <Switch
-          :disabled="disabledSwitch"
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Switch :disabled="disabledSwitch" :checked="record.status === 1" :loading="record.pendingStatus"
+          checkedChildren="启用" unCheckedChildren="禁用" @change="(checked: boolean) => statusChange(checked, record)" />
       </template>
     </BasicTable>
     <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -63,113 +50,114 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, nextTick, ref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawer } from '/@/components/Drawer';
-  import ReportConfigDrawer from './ReportConfigDrawer.vue';
-  import DevicePreviewModal from './DevicePreviewModal.vue';
-  import {
-    reportPage,
-    deleteReportManage,
-    putReportByidAndStatusManage,
-  } from '/@/api/report/reportManager';
-  import { searchFormSchema, columns } from './config.data';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Popconfirm, Switch } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { useMessage } from '/@/hooks/web/useMessage';
+import { reactive, nextTick, ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useDrawer } from '/@/components/Drawer';
+import ReportConfigDrawer from './ReportConfigDrawer.vue';
+import DevicePreviewModal from './DevicePreviewModal.vue';
+import {
+  reportPage,
+  deleteReportManage,
+  putReportByidAndStatusManage,
+} from '/@/api/report/reportManager';
+import { searchFormSchema, columns } from './config.data';
+import { Authority } from '/@/components/Authority';
+import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+import { Popconfirm, Switch } from 'ant-design-vue';
+import { useModal } from '/@/components/Modal';
+import { useGo } from '/@/hooks/web/usePage';
+import { useMessage } from '/@/hooks/web/useMessage';
 
-  const searchInfo = reactive<Recordable>({});
-  const disabledSwitch = ref(false);
-  const [registerTable, { reload, setProps }] = useTable({
-    title: '报表列表',
-    api: reportPage,
-    columns,
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    rowKey: 'id',
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
-  });
+const searchInfo = reactive<Recordable>({});
+const disabledSwitch = ref(false);
 
-  // 弹框
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  const { createMessage } = useMessage();
+const [registerTable, { reload, setProps }] = useTable({
+  title: '报表列表',
+  api: reportPage,
+  columns,
+  showIndexColumn: false,
+  clickToRowSelect: false,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  rowKey: 'id',
+  actionColumn: {
+    width: 200,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+});
 
-  // 刷新
-  const handleSuccess = () => {
-    reload();
-  };
+// 弹框
+const [registerDrawer, { openDrawer }] = useDrawer();
+const { createMessage } = useMessage();
 
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deleteReportManage,
-    handleSuccess,
-    setProps
-  );
+// 刷新
+const handleSuccess = () => {
+  reload();
+};
 
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
+const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+  deleteReportManage,
+  handleSuccess,
+  setProps
+);
 
-  // 新增或编辑
-  const handleCreateOrEdit = (record: Recordable | null) => {
-    if (record) {
-      openDrawer(true, {
-        isUpdate: true,
-        record,
-      });
-    } else {
-      openDrawer(true, {
-        isUpdate: false,
-      });
-    }
-  };
+nextTick(() => {
+  setProps(selectionOptions);
+});
 
-  //查看设备
-  const [registerModal, { openModal }] = useModal();
-  const handleDeviceView = (record) => {
-    openModal(true, {
+// 新增或编辑
+const handleCreateOrEdit = (record: Recordable | null) => {
+  if (record) {
+    openDrawer(true, {
       isUpdate: true,
       record,
     });
-  };
-  const statusChange = async (checked, record) => {
-    try {
+  } else {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+};
+
+//查看设备
+const [registerModal, { openModal }] = useModal();
+const handleDeviceView = (record) => {
+  openModal(true, {
+    isUpdate: true,
+    record,
+  });
+};
+const statusChange = async (checked, record) => {
+  try {
+    setProps({
+      loading: true,
+    });
+    disabledSwitch.value = true;
+    const newStatus = checked ? 1 : 0;
+    const res = await putReportByidAndStatusManage(record.id, newStatus);
+    if (res && newStatus) {
+      createMessage.success(`启用成功`);
+    } else {
+      createMessage.success('禁用成功');
+    }
+  } finally {
+    setTimeout(() => {
       setProps({
-        loading: true,
+        loading: false,
       });
-      disabledSwitch.value = true;
-      const newStatus = checked ? 1 : 0;
-      const res = await putReportByidAndStatusManage(record.id, newStatus);
-      if (res && newStatus) {
-        createMessage.success(`启用成功`);
-      } else {
-        createMessage.success('禁用成功');
-      }
-    } finally {
-      setTimeout(() => {
-        setProps({
-          loading: false,
-        });
-        disabledSwitch.value = false;
-      }, 500);
-      reload();
-    }
-  };
-  const go = useGo();
+      disabledSwitch.value = false;
+    }, 500);
+    reload();
+  }
+};
+const go = useGo();
 </script>

 <template>
   <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="62rem"
-      :height="heightNum"
-      @register="register"
-      title="任务详细"
-      @cancel="handleCancel"
-      :showOkBtn="false"
-      style="font-size: 12px"
-    >
+    <BasicModal v-bind="$attrs" width="62rem" :height="heightNum" @register="register" title="任务详细"
+      @cancel="handleCancel" :showOkBtn="false" style="font-size: 12px">
       <div>
         <Description :column="3" size="middle" @register="registeDesc" />
       </div>
@@ -17,37 +9,46 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, nextTick, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { personSchema } from './config.data';
-  import { Description } from '/@/components/Description/index';
-  import { useDescription } from '/@/components/Description';
+import { ref, nextTick, reactive } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { personSchema } from './config.data';
+import { Description } from '/@/components/Description/index';
+import { useDescription } from '/@/components/Description';
 
-  const heightNum = ref(800);
-  let personData = reactive({});
-  const [registeDesc, { setDescProps }] = useDescription({
-    title: '任务详细信息',
-    data: personData,
-    schema: personSchema,
-    column: 3,
+const heightNum = ref(800);
+let personData = reactive({});
+const [registeDesc, { setDescProps }] = useDescription({
+  title: '任务详细信息',
+  data: personData,
+  schema: personSchema,
+  column: 3,
+});
+const [register] = useModalInner((data) => {
+  nextTick(() => {
+    //回显
+    for (let i in data.record) {
+      Reflect.set(personData, i, data.record[i]);
+    }
+    setDescProps(personData);
   });
-  const [register] = useModalInner((data) => {
-    nextTick(() => {
-      //回显
-      for (let i in data.record) {
-        Reflect.set(personData, i, data.record[i]);
-      }
-      setDescProps(personData);
-    });
-  });
-  const handleCancel = () => {};
+});
+const handleCancel = () => { };
 </script>
 <style lang="less" scoped>
-  :deep(.vben-basic-title-normal) {
-    font-size: 16px;
-    font-weight: 500;
-  }
-  :deep(.vben-collapse-container__header) {
-    border-bottom: none;
-  }
+:deep(.vben-basic-title-normal) {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.vben-collapse-container__header) {
+  border-bottom: none;
+}
+
+:deep(.ant-descriptions-item-label) {
+  width: 30rem
+}
+
+:deep(.ant-descriptions-item-content) {
+  width: 45rem
+}
 </style>