任务导出

src/views/TaskView.vue

@@ -5,6 +5,7 @@
             <ElButton :icon="Plus" @click="onEdit({ checkConnection: true, useBackup: false }), getPhoneList()">
                 添加
             </ElButton>
+            <ElButton :icon="Download" @click="exportDialog">导出</ElButton>
         </template>
         <ElTableColumn type="expand">
             <template #default="{ row }">
@@ -65,7 +66,8 @@
                                     排队状态
                                 </ElButton>
                                 <ElButton type="primary" size="small" @click="detail(row)">详情</ElButton>
-                                <ElButton type="primary" size="small" @click="onEdit(row)">编辑</ElButton>
+                                <ElButton type="primary" size="small" @click="onEdit(row)" v-if="isSuperApi">编辑
+                                </ElButton>
                                 <ElButton
                                     type="primary"
                                     size="small"
@@ -252,12 +254,33 @@
             <ElButton @click="addValue" :icon="Plus"></ElButton>
         </ElFormItem>
     </EditDialog>
+
+    <ElDialog v-model="showExportDialog" title="日期选择" width="400px">
+        <div class="block">
+            <el-date-picker
+                v-model="dateValue"
+                type="daterange"
+                unlink-panels
+                range-separator="-"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+                :shortcuts="shortcuts"
+            />
+        </div>
+        <template #footer>
+      <span class="dialog-footer">
+        <ElButton @click="exportDialog()">取 消</ElButton>
+        <ElButton type="primary" @click="confirmExport()">确 定</ElButton>
+      </span>
+        </template>
+    </ElDialog>
+
 </template>
 <script setup>
 import { computed, inject, ref, onMounted } from 'vue'
 import PagingTable from '@/components/PagingTable.vue'
 import { useTimeFormatter } from '@/utils/formatter'
-import { Plus, Refresh, Trash } from '@vicons/tabler'
+import { Plus, Refresh, Trash, Download } from '@vicons/tabler'
 import EditDialog from '@/components/EditDialog.vue'
 import { setupEditDialog } from '@/utils/editDialog'
 import { http } from '@/plugins/http'
@@ -270,6 +293,7 @@ const { user } = storeToRefs(useUserStore())
 const where = ref({})
 const isAdmin = inject('isAdmin')
 const isAdminOrApi = inject('isAdminOrApi')
+const isSuperApi = inject('isSuperApi')
 const timeFormatter = useTimeFormatter()
 const table = ref(null)
 const model = ref({
@@ -378,6 +402,80 @@ const selectedRow = ref(null)
 const showDetailDialog = ref(false)
 const phoneTable = ref(null)
 
+const showExportDialog = ref(false)
+const dateValue = ref('')
+const shortcuts = [
+    {
+        text: '当前周',
+        value: () => {
+            const now = new Date()
+            const startOfWeek = new Date(now)
+            startOfWeek.setDate(startOfWeek.getDate() - (now.getDay() + 6) % 7)
+            return [startOfWeek, now]
+        }
+    },
+    {
+        text: '当前月',
+        value: () => {
+            const now = new Date()
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
+            return [startOfMonth, now]
+        }
+    },
+    {
+        text: '上一周',
+        value: () => {
+            const now = new Date()
+            const startOfWeek = new Date(now)
+            startOfWeek.setDate(startOfWeek.getDate() - (now.getDay() + 6) % 7 - 7)
+            const endOfWeek = new Date(startOfWeek.getTime() + 6 * 24 * 3600 * 1000)
+            return [startOfWeek, endOfWeek]
+        }
+    },
+    {
+        text: '上一月',
+        value: () => {
+            const now = new Date()
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+            const endOfMonth = new Date(now.getFullYear(), now.getMonth(), 0)
+            return [startOfMonth, endOfMonth]
+        }
+    }
+]
+
+async function confirmExport() {
+    const data = {
+        startDate: timeFormatter(null, null, dateValue.value[0], null),
+        endDate: timeFormatter(null, null, dateValue.value[1], null)
+    }
+    const loading = ElLoading.service({
+        lock: true,
+        text: '正在生成Excel...',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+    try {
+        const response = await http.post(`/task/export`, data)
+        const uint8Array = new Uint8Array(response.data)
+        const blob = new Blob([uint8Array], { type: 'application/octet-stream' })
+        const link = document.createElement('a')
+        const blobUrl = URL.createObjectURL(blob)
+        link.href = blobUrl
+        link.download = `任务数据.xlsx`
+        link.click()
+        window.URL.revokeObjectURL(blobUrl)
+        loading.close()
+    } catch (error) {
+        loading.close()
+        console.error('Error export:', error)
+        ElMessage.error(error)
+    }
+    exportDialog()
+}
+
+function exportDialog() {
+    showExportDialog.value = !showExportDialog.value
+}
+
 function detail(row) {
     selectedRow.value = row
     showDetailDialog.value = true
@@ -528,4 +626,29 @@ function delValue(index) {
         width: 100% !important;
     }
 }
+
+.demo-date-picker {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px var(--el-border-color);
+    flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+    border-right: none;
+}
+
+.demo-date-picker .demonstration {
+    display: block;
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+    margin-bottom: 20px;
+}
 </style>