Bläddra i källkod

feat: 周日报完成率新增导出按钮

qiny 1 år sedan
förälder
incheckning
fe4fdf2631

+ 5 - 1
client/src/components/ExportToExcel/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button type="primary" @click="exportToExcel">
+  <el-button :type="buttonType" :plain="props?.plain" :round="props?.round" @click="exportToExcel">
     <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
     导出
   </el-button>
@@ -19,9 +19,13 @@ interface IProp {
   }[] // 合并单元格列表
   colsWidth?: { wch: number }[] // 列宽
   title?: string // 标题
+  type?: string // 按钮类型
+  plain?: boolean // 是否朴素按钮
+  round?: boolean // 是否圆角按钮
 }
 // 定义组件props
 const props = defineProps<IProp>()
+const buttonType = props.type ?? 'primary'
 const titleStyle = {
   font: {
     bold: true,

+ 25 - 8
client/src/views/OaSystem/personnelManagement/CompletionRate/index.vue

@@ -3,16 +3,19 @@
     <div class="title">
       <div>各板块/部门周日报完成率</div>
       <div>
-        <el-button
+        <el-button type="primary" plain round :disabled="isDisabled" @click="handleClick">
+          {{ isDisabled ? `请稍候 (${countdown}s)` : '一键催报' }}
+        </el-button>
+        <ExportToExcel
           class="remind-btn"
-          type="primary"
           plain
           round
-          :disabled="isDisabled"
-          @click="handleClick"
-        >
-          {{ isDisabled ? `请稍候 (${countdown}s)` : '一键催报' }}
-        </el-button>
+          :data="exportData"
+          :colsWidth="colsWidth"
+          :file-name="`${moment(selectDate).format('YYYY年M月')}周日报完成率.xlsx`"
+          :title="`${moment(selectDate).format('YYYY年M月')}-周日报完成率`"
+          v-if="dataSource.length > 0"
+        />
         <el-date-picker
           v-model="selectDate"
           type="month"
@@ -63,6 +66,7 @@
 import request from '@/config/axios'
 import { handleTree } from '@/utils/tree'
 import moment from 'moment'
+import ExportToExcel from '@/components/ExportToExcel/index.vue'
 
 defineOptions({ name: 'CompletionRate' })
 
@@ -100,7 +104,6 @@ const getRateData = async () => {
       ElMessage.error('查询失败,请稍后重试!')
       loading.value = false
     })
-  // console.log('rateData', rateData)
 }
 // 处理完成率数据
 const rowSpanList: any = ref([])
@@ -148,6 +151,8 @@ const setRateData = (rateTree) => {
     // }
   }
   rowSpanList.value = getDeptFatherCountsAndIndices(rataData)
+  // 整理导出数据
+  getExportData(rataData)
   return rataData
 }
 // 获取相同内容的数组下标
@@ -260,6 +265,18 @@ const handleClick = () => {
     }, 1000)
   }
 }
+
+/** 导出excel */
+const newTableHead = [['板块', '板块完成率', '部门', '部门完成率']]
+const exportData = ref(newTableHead)
+const colsWidth = [{ wch: 25 }, { wch: 10 }, { wch: 25 }, { wch: 10 }]
+const getExportData = (dataSource: any[]) => {
+  const targetData = dataSource.map((item: any) => {
+    const { deptFather, fatherRate, deptName, fillRate } = item
+    return [deptFather, computedRate(fatherRate), deptName, computedRate(fillRate)]
+  })
+  exportData.value = [...newTableHead, ...targetData]
+}
 </script>
 <style scoped lang="scss">
 .title {