报表管理界面及接口开发-提交

src/views/vent/reportManager/comment/DeviceModal.vue

@@ -27,6 +27,12 @@
         </div>
       </a-form>
     </div>
+    <!--历史记录 -->
+    <div v-else-if="addOredit=='hisRecord'">
+      <NormalHisTable  :columns="columnsHis" 
+                 :downLoad="hisdownload" :list="hisList" designScope="device-tabel" title="报表历史记录管理"
+                :showTab="false"/>
+    </div>
     <!-- 报表编辑 -->
     <div v-else>
       <div id="fileEdit"></div>
@@ -35,9 +41,12 @@
 </template>
 <script lang="ts" setup>
   import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
+  import NormalHisTable from '../comment/NormalHisTable.vue'
   import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useUserStore } from '/@/store/modules/user';
+  import { hisList ,hisdownload} from '../reportManager.api'
+  import { columnsHis} from '../reportManager.data' ;
 
   let props = defineProps({
     addOredit: {
@@ -48,6 +57,14 @@
       type: String,
       default: '',
     },
+    fileType: {
+      type: String,
+      default: '',
+    },
+    reportLogHis:{
+      type:String,
+      default:''
+    }
   });
 
   const userStore = useUserStore(); //获取用户信息
@@ -65,6 +82,8 @@
   let title = computed(() => {
     if (props.addOredit == 'add') {
       return '报表新增';
+    }else if(props.addOredit=='hisRecord'){
+      return '历史记录'
     } else {
       return '报表编辑';
     }
@@ -99,11 +118,10 @@
       {
         type: 'desktop',
         width: '100%',
-        height: '100%',
+        height: '860px',
         document: {
           title: '文档管理',
-          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          // url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          url: 'http://182.92.126.35:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=' + props.editID+'&type='+props.reportLogHis, //id表示文件id，后端接口用这个id来加载文件
           fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
           key: '',
           lang: 'zh-CN',
@@ -116,9 +134,8 @@
         },
         editorConfig: {
           lang: 'zh-CN',
-          mode: 'edit', //view：只读且可复制内容，edit：可编辑
-          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          // callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          mode: props.reportLogHis ? 'view' : 'edit', //view：只读且可复制内容，edit：可编辑
+          callbackUrl: 'http://182.92.126.35:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=' + props.editID+'&type='+ props.reportLogHis, //id表示文件id，后端接口用这个id来加载文件
           coEditing: {
             mode: 'fast',
             change: true,

src/views/vent/reportManager/comment/NormalHisTable.vue

@@ -0,0 +1,186 @@
+<template>
+    <div>
+        <BasicTable @register="registerTable" :rowSelection="rowSelection">
+            <template #action="{ record }">
+                <a class="table-action-link" @click="handleEdit(record)">预览</a>
+                <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
+                <slot name="action" v-bind="{ record }"></slot>
+            </template>
+            <template #bodyCell="{ column, record }">
+                <slot name="filterCell" v-bind="{ column, record }"></slot>
+            </template>
+        </BasicTable>
+        <DeviceModal :editID="editID" :reportLogHis="reportLogHis" :fileType="fileType" @register="registerModal" :addOredit="addOredit" />
+    </div>
+</template>
+  
+<script lang="ts" setup>
+//ts语法
+import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
+import { BasicTable, } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import DeviceModal from './DeviceModal.vue';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { useListPage } from '/@/hooks/system/useListPage';
+
+const props = defineProps({
+    columns: {
+        type: Array,
+        // required: true,
+        default: () => [],
+    },
+    list: {
+        type: Function,
+        required: true,
+    },
+    //历史记录下载文件接口
+    downLoad: {
+        type: Function,
+        required: true,
+    },
+    designScope: {
+        type: String,
+    },
+    title: {
+        type: String,
+    },
+});
+
+//区分打开编辑或新增弹窗
+let addOredit = ref('')
+//文件ID
+let editID = ref(0);
+let fileType = ref(''); //文件类型
+
+let  reportLogHis=ref('')//是否为报表记录编辑
+
+const record = reactive({});
+
+const [registerModal, { openModal, closeModal }] = useModal();
+
+const columnList = getTableHeaderColumns('');
+
+// 列表页面公共参数、方法
+const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
+    designScope: props.designScope,
+    tableProps: {
+        title: props.title,
+        api: props.list,
+        columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
+        showTableSetting: false,
+        // size: 'small',
+        // bordered: false,
+        formConfig: {
+            showAdvancedButton: true,
+            // labelWidth: 100,
+            labelAlign: 'left',
+            labelCol: {
+                xs: 24,
+                sm: 24,
+                md: 24,
+                lg: 9,
+                xl: 7,
+                xxl: 5,
+            },
+            schemas: [],
+        },
+        useSearchForm: false,
+        striped: true,
+        actionColumn: {
+            width: 180,
+        },
+        beforeFetch: (params) => {
+            return Object.assign(params, { column: 'createTime', });
+        },
+    },
+});
+
+//注册table数据
+const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
+
+/**
+ * 编辑事件
+ */
+function handleEdit(data) {
+    addOredit.value = 'edit'
+    reportLogHis.value='reportLog'
+    Object.assign(record, toRaw(data));
+    let index = record.fileName.indexOf('.');
+    fileType.value = record.fileName.substring(index + 1);
+    editID.value = record.id;
+    console.log(editID.value,'报表历史记录ID')
+    openModal(true, {
+        record,
+    });
+}
+
+//下载文件
+function handleDownLoad(record) {
+    console.log(record, '下载');
+    props.downLoad({ id: record.id }).then((res) => {
+        console.log(res, '报表历史记录下载');
+        let filename = `${record.fileName}`;
+        downFilePublic(res, filename);
+    });
+}
+// 下载公用方法
+function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+        // 支持a标签download的浏览器
+        const link = document.createElement('a'); // 创建a标签
+        link.download = fileName; // a标签添加属性
+        link.style.display = 'none';
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click(); // 执行下载
+        URL.revokeObjectURL(link.href); // 释放url
+        document.body.removeChild(link); // 释放标签
+    } else {
+        // 其他浏览器
+        navigator.msSaveBlob(blob, fileName);
+    }
+}
+
+defineExpose({
+    doRequest, onExportXls, onImportXls, reload, getForm
+});
+
+</script>
+  
+<style scoped lang="less">
+@ventSpace: zxm;
+@vent-table-no-hover: #00bfff10;
+
+:deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+}
+
+:deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+}
+
+:deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
+}
+
+:deep(.jeecg-basic-table-row__striped) {
+    td {
+        background-color: @vent-table-no-hover !important;
+    }
+}
+
+:deep(.@{ventSpace}-select-dropdown) {
+
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
+        background-color: #ffffff33 !important;
+    }
+
+    .@{ventSpace}-select-item:hover {
+        background-color: #ffffff33 !important;
+    }
+}</style>
+  

src/views/vent/reportManager/comment/NormalTable.vue

@@ -13,13 +13,14 @@
             <a class="table-action-link">删除</a>
           </a-popconfirm>
           <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
+          <a class="table-action-link" @click="handleHisrecord(record)">历史记录</a>
           <slot name="action" v-bind="{ record }"></slot>
         </template>
         <template #bodyCell="{ column, record }">
           <slot name="filterCell" v-bind="{ column, record }"></slot>
         </template>
       </BasicTable>
-      <DeviceModal  :editID="editID"  @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
+      <DeviceModal  :editID="editID" :reportLogHis="reportLogHis" :fileType="fileType"  @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
    
      
     </div>
@@ -27,19 +28,14 @@
   
   <script lang="ts" setup>
   //ts语法
-  import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
-  import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
+  import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
+  import { BasicTable,  } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import DeviceModal from './DeviceModal.vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { useListPage } from '/@/hooks/system/useListPage';
   
   const props = defineProps({
-    //主键ID
-    Id:{
-        type:String,
-        default:''
-    },
      //下载文件接口
      downLoad: {
       type: Function,
@@ -79,14 +75,13 @@
 let addOredit=ref('')
 //文件ID
 let editID = ref(0); 
+let fileType = ref(''); //文件类型
+let  reportLogHis=ref('')//是否为报表记录编辑
 
-  const emit = defineEmits(['submitSuccess', 'editHandler','saveAdd']);
+  const emit = defineEmits(['saveAdd']);
   
-  const isUpdate = ref(false);
   const record = reactive({});
 
-  provide('isUpdate', isUpdate);
-
   const [registerModal, { openModal, closeModal }] = useModal();
   
   const columnList = getTableHeaderColumns('');
@@ -121,7 +116,7 @@ let editID = ref(0);
         width: 180,
       },
       beforeFetch: (params) => {
-        return Object.assign(params, { column: 'createTime',id:props.Id,});
+        return Object.assign(params, { column: 'createTime',});
       },
     },
   });
@@ -140,7 +135,6 @@ let editID = ref(0);
     for (let key in record) {
       delete record[key];
     }
-    isUpdate.value = false;
     openModal(true);
     
   }
@@ -156,14 +150,15 @@ let editID = ref(0);
    */
   function handleEdit(data) {
     addOredit.value='edit'
-    isUpdate.value = true;
+    reportLogHis.value=''
     Object.assign(record, toRaw(data));
-    console.log(record, '编辑');
+    let index = record.fileName.indexOf('.');
+    fileType.value = record.fileName.substring(index + 1);
     editID.value = record.id;
     console.log(editID.value, '编辑文件ID');
     openModal(true, {
       record,
-    }, false);
+    });
   }
   
   /**
@@ -173,12 +168,20 @@ let editID = ref(0);
     await props.deleteById({ id: record.id }, reload);
   }
 
+  // 历史记录
+  function handleHisrecord(data){
+    addOredit.value='hisRecord'
+    Object.assign(record, toRaw(data));
+    openModal(true, {
+      record,
+    });
+  }
+
 
   //下载文件
   function handleDownLoad(record) {
     console.log(record, '下载');
-    props.downLoad({ reportInfo: record }).then((res) => {
-      console.log('11111');
+    props.downLoad({ id: record.id }).then((res) => {
       console.log(res, '文件下载成功');
       let filename = `${record.fileName}`;
       downFilePublic(res, filename);
@@ -205,32 +208,6 @@ let editID = ref(0);
     }
   }
   
-
-//   /**
-//    * 操作列定义
-//    * @param record
-//    */
-//   function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-//     return [
-//       {
-//         label: '编辑',
-//         onClick: handleEdit.bind(null, record, column),
-//       },
-//       {
-//         label: '删除',
-//         popConfirm: {
-//           title: '是否确认删除',
-//           confirm: handleDelete.bind(null, record, column),
-//         },
-//       },
-//       // {
-//       //   label: '查看',
-//       //   onClick: handleDetail.bind(null, record),
-//       // },
-//     ];
-//   }
-  
-  
   defineExpose({
     doRequest, onExportXls, onImportXls, reload, getForm
   });

src/views/vent/reportManager/index.vue

@@ -2,7 +2,7 @@
     <div class="reportManager">
         <customHeader>报表管理中心</customHeader>
         <div class="content">
-            <NormalTable v-if="refesh" :Id="Id" :columns="columns" :searchFormSchema="searchFormSchema"
+            <NormalTable v-if="refesh"  :columns="columns" :searchFormSchema="searchFormSchema"
                 :deleteById="deleteById" :downLoad="downLoad" :list="list" designScope="device-tabel" title="报表管理"
                 :showTab="true" @saveAdd="saveAdd" />
         </div>
@@ -17,15 +17,13 @@ import { columns, searchFormSchema } from './reportManager.data';
 import { list, save, deleteById,downLoad } from './reportManager.api'
 
 let refesh = ref(true)
-//主键ID
-let Id = ref('')
+
 async function saveAdd(params) {
     let res = await save({ ...params })
     console.log(res, '新增成功-------')
     refesh.value = false
     nextTick(() => {
         refesh.value = true
-        Id.value = res.id
     })
 }
 

src/views/vent/reportManager/reportManager.api.ts

@@ -5,7 +5,9 @@ enum Api {
   list = '/safety/reportInfo/list',
   save = '/safety/reportInfo/createReportFile',
   deleteById = '/safety/reportInfo/delete',
-  downLoad='/safety/reportInfo/download'
+  downLoad='/safety/reportInfo/download',
+  hisList='/safety/reportLog/list',
+  hisdownload='/safety/reportLog/download'
 }
 
 
@@ -16,6 +18,12 @@ enum Api {
 export const list = (params) => defHttp.get({ url: Api.list, params });
 
 /**
+ * 历史记录列表接口
+ * @param params
+ */
+export const hisList = (params) => defHttp.get({ url: Api.hisList, params });
+
+/**
  * 保存或者更新用户
  * @param params
  */
@@ -35,3 +43,8 @@ export const deleteById = (params, handleSuccess) => {
   下载
 */ 
 export const downLoad = (params) => defHttp.post({ url: Api.downLoad, params, responseType: 'blob' });
+
+/*
+  报表历史记录下载
+*/ 
+export const hisdownload = (params) => defHttp.post({ url: Api.hisdownload, params, responseType: 'blob' });

src/views/vent/reportManager/reportManager.data.ts

@@ -10,38 +10,44 @@ export const columns: BasicColumn[] = [
     {
       title: '创建人',
       dataIndex: 'createBy',
+       width: 100,
     },
     {
       title: '创建日期',
       dataIndex: 'createTime',
-      // width: 260,
+      width: 160,
     },
   
     {
       title: '文件名称',
       dataIndex: 'fileName',
+      width: 160,
     },
     {
       title: '文件路径',
       dataIndex: 'filePath',
+      width: 160,
     },
    
     {
       title: '所属部门',
       dataIndex: 'orgCode',
+      width: 160,
     },
     {
       title: '报表类型',
       dataIndex: 'reportType',
-      width: 120,
+      width: 100,
     },
     {
       title: '报表版本',
       dataIndex: 'reportVersion',
+      width: 100,
     },
     {
       title: '所属矿编号',
       dataIndex: 'sysOrgCode',
+      width: 100,
     },
   ];
 
@@ -68,6 +74,43 @@ export const columns: BasicColumn[] = [
         },
         colProps: { span: 6 },
       },
+  ];
+//报表历史记录
+  export const columnsHis: BasicColumn[] = [
+    {
+      title: '主键',
+      dataIndex: 'id',
+      ifShow: false,
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createBy',
+       width: 100,
+    },
+    {
+      title: '创建日期',
+      dataIndex: 'createTime',
+      width: 160,
+    },
   
-  
+    {
+      title: '文件名称',
+      dataIndex: 'fileName',
+      width: 160,
+    },
+    {
+      title: '文件路径',
+      dataIndex: 'filePath',
+      width: 160,
+    },
+    {
+      title: '报表类型',
+      dataIndex: 'reportType',
+      width: 100,
+    },
+    {
+      title: '报表版本',
+      dataIndex: 'reportVersion',
+      width: 100,
+    },
   ];