新增数据导出功能

src/api/riskEventAudit.js

@@ -25,3 +25,11 @@ export function reportExportApi(obj) {
     params: obj
   });
 }
+
+export function checkHisExport(obj) {
+  return request({
+    url: '/admin/init/cnbg/init/task/check/his/export',
+    method: 'get',
+    params: obj
+  });
+}

src/views/servicePackageMonitoring/riskEventAudit/index.vue

@@ -37,7 +37,13 @@
       </template>
 
       <template slot="menuRight">
-        <el-checkbox v-model="supervision" @change="checkBoxChange">只看待监督</el-checkbox>
+        <div class="right-content">
+          <div class="r-btn" v-if="userInfo?.roles?.includes(53)">
+            <el-button v-if="exportDetailShow" :disabled="exportDetailDisabled" size="small" @click="downInfo">{{ exportBtnText }}</el-button>
+            <el-button type="primary" size="small" @click="exportTask">监督任务数据导出</el-button>
+          </div>
+          <el-checkbox v-model="supervision" @change="checkBoxChange">只看待监督</el-checkbox>
+        </div>
       </template>
 
       <!-- 操作栏 -->
@@ -89,22 +95,42 @@
         <el-button type="primary" @click="exportBtn">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog title="提示" :visible.sync="exportDialogVisible" width="30%">
+      <el-form ref="exportFormRef" :model="exportForm" label-width="80px">
+        <el-form-item label="选择月份">
+          <el-date-picker value-format="yyyy-MM-dd" v-model="exportForm.startDate" type="month" placeholder="选择月"> </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleExportDialogClose">取 消</el-button>
+        <el-button type="primary" @click="exportDialogFn">确 定</el-button>
+      </span>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-import { fetchList, supervisionPkgStatApi, reportExportApi } from '@/api/riskEventAudit.js';
+import { fetchList, supervisionPkgStatApi, reportExportApi, checkHisExport } from '@/api/riskEventAudit.js';
 import ElQuarterPicker from '@/components/ElQuarterPicker/index';
 import { tableOption } from '@/const/crud/riskEventAudit.js';
 import { getAreaTreeApi } from '@/api/areaTree';
 import monitorDialog from './components/monitorDialog.vue';
 import { mapGetters } from 'vuex';
 import dayjs from 'dayjs';
-
+import { getExportResult } from '@/api/admin/user';
 export default {
   components: { monitorDialog, ElQuarterPicker },
   data() {
     return {
+      exportDialogVisible: false,
+      exportUrl: '',
+      exportForm: {
+        startDate: ''
+      },
+      exportDetailShow: false,
+      exportDetailDisabled: false,
+      exportBtnText: '',
       tableLoading: false,
       tableOption: tableOption,
       page: {
@@ -148,7 +174,7 @@ export default {
     const roles = this.userInfo.roles;
     const rolesArr = [49, 52, 53, 56];
     this.IS_JDY = roles.some((item) => rolesArr.includes(item));
-
+    this.getExportInfoStatus()
     //
   },
 
@@ -334,7 +360,7 @@ export default {
       this.$refs.monitorRef.showInfo(row);
     },
     taskMonitorFn(row, type) {
-      console.log('this.monthrange', this.monthrange)
+      console.log('this.monthrange', this.monthrange);
       this.$router.push({
         path: '/servicePackageMonitoring/riskEventAudit/taskMonitor?deptId=' + row.deptId + `&type=${type}&time=${this.monthrange}`,
         query: {
@@ -374,6 +400,87 @@ export default {
         }
       }
       return 0;
+    },
+    exportTask() {
+      this.exportDialogVisible = true;
+    },
+
+    getMonthRange(dateStr) {
+      const start = dayjs(dateStr).startOf('month').format('YYYY-MM-DD');
+      const end = dayjs(dateStr).endOf('month').format('YYYY-MM-DD');
+      return [start, end];
+    },
+    async exportDialogFn() {
+      if (!this.exportForm.startDate) {
+        return this.$message.warning('请选择导出日期');
+      }
+
+      const taskPeriodResult = this.getMonthRange(this.exportForm.startDate);
+      const res = await checkHisExport({
+        taskPeriod: taskPeriodResult
+      });
+
+      if(res.data.code == 0) {
+        this.getExportInfoStatus()
+      } 
+      this.handleExportDialogClose();
+    },
+        // 获取导出状态 - 用户信息导出
+    async getExportInfoStatus() {
+      const checkStatus = async () => {
+        const res = await getExportResult({ type: 'CHECK_SUP' });
+        if (res.data.code === 0) {
+          this.exportDetailShow = true;
+          const status = res.data.data.status;
+
+          if (status === 'GENERATING') {
+            this.exportBtnText = '数据生成中';
+            this.exportDetailDisabled = true;
+            return false;
+          } else if (status === 'GENERATED') {
+            this.exportUrl = res.data.data.latestUrl;
+            this.exportBtnText = '下载数据';
+            this.exportDetailDisabled = false;
+            return true;
+          } else if (status === 'ERROR') {
+            this.exportBtnText = res.data.data.errorMsg || '导出失败';
+            this.exportDetailDisabled = true;
+            return true;
+          } else {
+            this.exportDetailShow = false;
+            return true;
+          }
+        } else {
+          this.exportBtnText = '获取状态失败';
+          this.exportDetailDisabled = false;
+          return true;
+        }
+      };
+
+      // 先执行一次
+      const stop = await checkStatus();
+
+      // 如果还在生成中，启动轮询
+      if (!stop) {
+        const timer = setInterval(async () => {
+          const stopLoop = await checkStatus();
+          if (stopLoop) clearInterval(timer);
+        }, 5000); // 每5秒轮询一次
+      }
+    },
+
+    downInfo() {
+      let link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = process.env.VUE_APP_URL + this.exportUrl;
+      link.setAttribute('download', '用户信息.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    handleExportDialogClose() {
+      this.exportForm.startDate = '';
+      this.exportDialogVisible = false;
     }
   }
 };
@@ -436,4 +543,11 @@ export default {
     height: 25px;
   }
 }
+.right-content {
+  display: flex;
+  align-items: center;
+  .r-btn {
+    margin-right: 10px;
+  }
+}
 </style>