报表管理中心-提交

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

@@ -0,0 +1,165 @@
+<template>
+  <BasicModal :defaultFullscreen="defaultScreen" v-bind="$attrs" @register="registerModal" :title="title" :width="widthV"
+    :showCancelBtn="false" :showOkBtn="false" :footer="null" destroyOnClose :mask-closable="false" @cancel="closeModalFn">
+
+    <!-- 报表新增 -->
+    <div v-if="addOredit == 'add'">
+      <a-form :model="formState" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 14 }">
+        <a-form-item label="报表版本:">
+          <JDictSelectTag v-model:value="formState.reportType" placeholder="请选择报表类型..." dictCode="reportType" />
+        </a-form-item>
+        <a-form-item label="报表类型:">
+          <JDictSelectTag v-model:value="formState.reportVersion" placeholder="请选择报表版本..." dictCode="reportVersion" />
+        </a-form-item>
+        <div class="footer">
+          <a-button type="primary" style="margin-right: 20px;" @click="save">保存</a-button>
+          <a-button type="primar" @click="closeModalFn">取消</a-button>
+        </div>
+      </a-form>
+    </div>
+    <!-- 报表编辑 -->
+    <div v-else>
+      <div id="fileEdit"></div>
+    </div>
+
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { useUserStore } from '/@/store/modules/user';
+
+let props = defineProps({
+  addOredit: {
+    type: String,
+    default: ''
+  },
+  editID: {
+      type: String,
+      default: '',
+    },
+})
+
+const userStore = useUserStore(); //获取用户信息
+let userId = unref(userStore.getUserInfo).id;
+let userName = unref(userStore.getUserInfo).username;
+console.log(userId, '用户id');
+console.log(userName, '用户名');
+
+let formState = reactive({
+  reportType: '',
+  reportVersion: ''
+})
+
+//设置标题
+let title = computed(() => {
+  if (props.addOredit == 'add') {
+    return '报表新增'
+  } else {
+    return '报表编辑'
+  }
+})
+//弹窗宽度
+let widthV = computed(() => {
+  if (props.addOredit == 'add') {
+    return '600px'
+  } else {
+    return '1000px'
+  }
+})
+
+//弹窗是否全屏
+let defaultScreen = computed(() => {
+  if (props.addOredit == 'add') {
+    return false
+  } else {
+    return true
+  }
+})
+// 声明Emits
+const emit = defineEmits(['saveOrUpdate', 'register',]);
+
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  //重置表单
+  setModalProps({ confirmLoading: false });
+  // Object.assign(deviceData, data.record);
+  new DocsAPI.DocEditor(
+    'fileEdit', // 元素id
+    {
+      type: 'desktop',
+      width: '100%',
+      height: '100%',
+      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来加载文件
+        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',
+        permissions: {
+          download: true, //是否可下载
+          edit: true,
+          fillForms: true,
+          print: true, //是否可打印
+        },
+      },
+      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来加载文件
+        coEditing: {
+          mode: 'fast',
+          change: true,
+        },
+        customization: {
+          toolbarNoTabs: true,
+          autosave: false, //是否自动保存
+          forcesave: true, //定义保存按钮是否显示
+          hideRightMenu: true,
+        },
+        //用户信息
+        user: {
+          id: userId, //用户ID
+          name: userName, //用户名称
+        },
+      },
+    }
+  );
+
+});
+
+//点击图标关闭弹框
+const closeModalFn = () => {
+  formState.reportType = ''
+  formState.reportVersion = ''
+  closeModal()
+  // emit('closeModal')
+}
+
+//新增保存
+let save = () => {
+  emit('saveOrUpdate', formState)
+}
+
+
+
+
+
+</script>
+<style scoped lang="less">
+::v-deep .suffix {
+  height: 32px;
+  line-height: 32px;
+  margin-left: 5px;
+  color: #fff;
+}
+
+.footer {
+  width: 100%;
+  text-align: center;
+  padding-top: 30px;
+}
+</style>

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

@@ -0,0 +1,270 @@
+<template>
+    <div >
+      <BasicTable @register="registerTable" :rowSelection="rowSelection">
+        <template #tableTitle>
+          <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+        </template>
+        <template #action="{ record }">
+          <a class="table-action-link" @click="handleEdit(record)">编辑</a>
+          <a-popconfirm
+            title="确定删除?"
+            @confirm="handleDelete(record)"
+          >
+            <a class="table-action-link">删除</a>
+          </a-popconfirm>
+          <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"  @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
+   
+     
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  //ts语法
+  import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
+  import { BasicTable, ActionItem, EditRecordRow, BasicColumn } 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,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
+    },
+    searchFormSchema: {
+      type: Array,
+      default: () => [],
+    },
+    list: {
+      type: Function,
+      required: true,
+    },
+    deleteById: {
+      type: Function,
+      required: true,
+    },
+    batchDelete: {
+      type: Function,
+    },
+   
+   
+    designScope: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+  });
+  
+//区分打开编辑或新增弹窗
+let addOredit=ref('')
+//文件ID
+let editID = ref(0); 
+
+  const emit = defineEmits(['submitSuccess', 'editHandler','saveAdd']);
+  
+  const isUpdate = ref(false);
+  const record = reactive({});
+
+  provide('isUpdate', isUpdate);
+
+  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: props.searchFormSchema as any[],
+      },
+      useSearchForm: props.searchFormSchema.length > 0 ? true : false,
+      striped: true,
+      actionColumn: {
+        width: 180,
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, { column: 'createTime',id:props.Id,});
+      },
+    },
+  });
+  
+
+  
+  //注册table数据
+  const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
+  
+  
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    addOredit.value='add'
+    for (let key in record) {
+      delete record[key];
+    }
+    isUpdate.value = false;
+    openModal(true);
+    
+  }
+
+  //新增保存
+  function saveOrUpdate(param){
+    console.log(param,'新增参数----------')
+    emit('saveAdd',param)
+  }
+  
+  /**
+   * 编辑事件
+   */
+  function handleEdit(data) {
+    addOredit.value='edit'
+    isUpdate.value = true;
+    Object.assign(record, toRaw(data));
+    console.log(record, '编辑');
+    editID.value = record.id;
+    console.log(editID.value, '编辑文件ID');
+    openModal(true, {
+      record,
+    }, false);
+  }
+  
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await props.deleteById({ id: record.id }, reload);
+  }
+
+
+  //下载文件
+  function handleDownLoad(record) {
+    console.log(record, '下载');
+    props.downLoad({ reportInfo: record }).then((res) => {
+      console.log('11111');
+      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);
+    }
+  }
+  
+
+//   /**
+//    * 操作列定义
+//    * @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
+  });
+  
+  </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/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="reportManager">
+        <customHeader>报表管理中心</customHeader>
+        <div class="content">
+            <NormalTable v-if="refesh" :Id="Id" :columns="columns" :searchFormSchema="searchFormSchema"
+                :deleteById="deleteById" :downLoad="downLoad" :list="list" designScope="device-tabel" title="报表管理"
+                :showTab="true" @saveAdd="saveAdd" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import customHeader from '/@/views/vent/comment/components/customHeader.vue';
+import NormalTable from './comment/NormalTable.vue';
+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
+    })
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.reportManager {
+    width: calc(100% - 20px);
+    height: calc(100% - 90px);
+    position: relative;
+    margin: 80px 10px 10px 10px;
+
+    .content {
+        width: 100%;
+        height: calc(100% - 30px);
+        position: relative;
+    }
+}
+</style>

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

@@ -0,0 +1,37 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/safety/reportInfo/list',
+  save = '/safety/reportInfo/createReportFile',
+  deleteById = '/safety/reportInfo/delete',
+  downLoad='/safety/reportInfo/download'
+}
+
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const save = (params) => defHttp.post({ url: Api.save, params });
+
+
+/**
+ * 删除用户
+ */
+export const deleteById = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteById, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/*
+  下载
+*/ 
+export const downLoad = (params) => defHttp.post({ url: Api.downLoad, params, responseType: 'blob' });

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

@@ -0,0 +1,73 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+    {
+      title: '主键',
+      dataIndex: 'id',
+      ifShow: false,
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createBy',
+    },
+    {
+      title: '创建日期',
+      dataIndex: 'createTime',
+      // width: 260,
+    },
+  
+    {
+      title: '文件名称',
+      dataIndex: 'fileName',
+    },
+    {
+      title: '文件路径',
+      dataIndex: 'filePath',
+    },
+   
+    {
+      title: '所属部门',
+      dataIndex: 'orgCode',
+    },
+    {
+      title: '报表类型',
+      dataIndex: 'reportType',
+      width: 120,
+    },
+    {
+      title: '报表版本',
+      dataIndex: 'reportVersion',
+    },
+    {
+      title: '所属矿编号',
+      dataIndex: 'sysOrgCode',
+    },
+  ];
+
+  export const searchFormSchema: FormSchema[] = [
+   
+    {
+        label: '报表类型',
+        field: 'reportType',
+        component: 'JDictSelectTag',
+        componentProps: {
+          dictCode: 'reportType',
+          placeholder: '请选择报表类型',
+        },
+        colProps: { span: 6 },
+      },
+
+      {
+        label: '报表版本',
+        field: 'reportVersion',
+        component: 'JDictSelectTag',
+        componentProps: {
+          dictCode: 'reportVersion',
+          placeholder: '请选择报表版本',
+        },
+        colProps: { span: 6 },
+      },
+  
+  
+  ];