From 9aae2af6f3937a7d99ec619b51f457002cef969f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 十一月 2025 14:29:37 +0800
Subject: [PATCH] 档案管理-添加导出功能
---
src/views/collaborativeApproval/planTemplate/index.vue | 295 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 206 insertions(+), 89 deletions(-)
diff --git a/src/views/collaborativeApproval/planTemplate/index.vue b/src/views/collaborativeApproval/planTemplate/index.vue
index f46a203..0af6d8b 100644
--- a/src/views/collaborativeApproval/planTemplate/index.vue
+++ b/src/views/collaborativeApproval/planTemplate/index.vue
@@ -18,6 +18,8 @@
v-model="currentDate"
:type="datePickerType"
placeholder="閫夋嫨鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
style="width: 180px; margin-left: 10px"
@change="handleDateChange"
/>
@@ -25,7 +27,7 @@
<div class="right-actions">
<el-button type="primary" @click="handleAddPlan">鏂板璁″垝</el-button>
<el-button @click="handleExport">瀵煎嚭璁″垝</el-button>
- <el-button @click="handleShare">鍏变韩璁″垝</el-button>
+ <!-- <el-button @click="handleShare">鍏变韩璁″垝@</el-button> -->
</div>
</div>
@@ -107,7 +109,7 @@
<span>{{ getCurrentLevelText() }} - {{ getCurrentPeriodText() }}</span>
<div>
<el-button size="small" @click="handleRefresh">鍒锋柊</el-button>
- <el-button size="small" @click="handleFilter">绛涢��</el-button>
+ <!-- <el-button size="small" @click="handleFilter">绛涢�堾</el-button> -->
</div>
</div>
</template>
@@ -122,13 +124,13 @@
<div class="plan-actions">
<el-button size="small" @click="handleEditPlan(plan)">缂栬緫</el-button>
<el-button size="small" @click="handleViewDetail(plan)">璇︽儏</el-button>
- <el-dropdown @command="handleMoreAction">
+ <el-dropdown @command="(command) => handleMoreAction(plan, command)">
<el-button size="small">
鏇村<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
- <el-dropdown-item command="share">鍏变韩</el-dropdown-item>
+ <!-- <el-dropdown-item command="share">鍏变韩@</el-dropdown-item> -->
<el-dropdown-item command="copy">澶嶅埗</el-dropdown-item>
<el-dropdown-item command="delete" divided>鍒犻櫎</el-dropdown-item>
</el-dropdown-menu>
@@ -180,7 +182,7 @@
<!-- 鏂板/缂栬緫璁″垝瀵硅瘽妗� -->
<el-dialog
v-model="planDialogVisible"
- :title="dialogTitle"
+ :title="operationType === 'add' ? '鍙戝竷璁″垝' : '缂栬緫璁″垝'"
width="600px"
@close="handleDialogClose"
>
@@ -215,6 +217,8 @@
<el-date-picker
v-model="planForm.startDate"
type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
placeholder="閫夋嫨寮�濮嬫椂闂�"
style="width: 100%"
/>
@@ -223,6 +227,8 @@
<el-date-picker
v-model="planForm.endDate"
type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
placeholder="閫夋嫨缁撴潫鏃堕棿"
style="width: 100%"
/>
@@ -237,8 +243,48 @@
<el-option label="浣�" value="low" />
</el-select>
</el-form-item>
- <el-form-item label="鏍囩">
+ <!-- <el-form-item label="鏍囩">
<el-input v-model="planForm.tags" placeholder="璇疯緭鍏ユ爣绛撅紝鐢ㄩ�楀彿鍒嗛殧" />
+ </el-form-item> -->
+ <el-form-item label="鏍囩" prop="tags">
+ <!-- <el-checkbox-group v-model="planForm.tags">
+ <el-checkbox label="all"></el-checkbox>
+ <el-checkbox label="manager">绠＄悊灞�</el-checkbox>
+ <el-checkbox label="hr">浜轰簨閮ㄩ棬</el-checkbox>
+ <el-checkbox label="finance">璐㈠姟閮ㄩ棬</el-checkbox>
+ <el-checkbox label="tech">鎶�鏈儴闂�</el-checkbox>
+ </el-checkbox-group> -->
+ <el-select
+ v-model="planForm.tags"
+ multiple
+ placeholder="璇烽�夋嫨鏍囩"
+ style="width: 100%"
+ >
+ <el-option
+ v-for="dept in departments"
+ :key="dept"
+ :label="dept"
+ :value="dept"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="planForm.status" placeholder="閫夋嫨鐘舵��" style="width: 100%">
+ <el-option label="鏈紑濮�" value="not_started" />
+ <el-option label="杩涜涓�" value="in_progress" />
+ <el-option label="宸插畬鎴�" value="completed" />
+ <el-option label="宸叉殏鍋�" value="paused" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="杩涘害" prop="progress">
+ <el-input-number
+ v-model="planForm.progress"
+ min="0"
+ max="100"
+ step="1"
+ placeholder="璇疯緭鍏ヨ繘搴�"
+ style="width: 100%"
+ />
</el-form-item>
</el-form>
<template #footer>
@@ -248,12 +294,31 @@
</span>
</template>
</el-dialog>
+ <!-- 璁″垝璇︽儏瀵硅瘽妗� -->
+ <el-dialog v-model="showPlanDetailDialog" title="璁″垝璇︽儏" width="700px">
+ <div v-if="currentPlanDetail" class="mb10">
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="璁″垝鏍囬">{{ currentPlanDetail.title }}</el-descriptions-item>
+ <el-descriptions-item label="璁″垝鎻忚堪">{{ currentPlanDetail.description }}</el-descriptions-item>
+ <el-descriptions-item label="璁″垝绾у埆">{{ getCurrentLevelText(currentPlanDetail.level) }}</el-descriptions-item>
+ <el-descriptions-item label="鏃堕棿鍛ㄦ湡">{{ getCurrentPeriodText(currentPlanDetail.period) }}</el-descriptions-item>
+ <el-descriptions-item label="寮�濮嬫椂闂�">{{ currentPlanDetail.startDate }}</el-descriptions-item>
+ <el-descriptions-item label="缁撴潫鏃堕棿">{{ currentPlanDetail.endDate }}</el-descriptions-item>
+ <el-descriptions-item label="璐熻矗浜�">{{ currentPlanDetail.assignee }}</el-descriptions-item>
+ <el-descriptions-item label="浼樺厛绾�">{{ getPriorityText(currentPlanDetail.priority) }}</el-descriptions-item>
+ <el-descriptions-item label="鏍囩">{{ currentPlanDetail.tags.join(', ') }}</el-descriptions-item>
+ <el-descriptions-item label="鐘舵��">{{ getStatusText(currentPlanDetail.status) }}</el-descriptions-item>
+ <el-descriptions-item label="杩涘害">{{ currentPlanDetail.progress }}%</el-descriptions-item>
+ </el-descriptions>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
+const { proxy } = getCurrentInstance();
import {
User,
UserFilled,
@@ -264,17 +329,22 @@
Flag,
ArrowDown
} from '@element-plus/icons-vue'
+import { listDutyPlan, addDutyPlan, updateDutyPlan, delDutyPlan,NumDutyPlan,exportDutyPlan } from '@/api/collaborativeApproval/planTemplate.js'
// 鍝嶅簲寮忔暟鎹�
+const operationType = ref('add')
const currentLevel = ref('personal')
const currentPeriod = ref('week')
const currentDate = ref(new Date())
const planDialogVisible = ref(false)
const dialogTitle = ref('鏂板璁″垝')
const planFormRef = ref()
+const showPlanDetailDialog = ref(false)
+const currentPlanDetail = ref(null)
// 琛ㄥ崟鏁版嵁
const planForm = reactive({
+ id: '',
title: '',
description: '',
level: 'personal',
@@ -283,7 +353,9 @@
endDate: '',
assignee: '',
priority: 'medium',
- tags: ''
+ tags: [],
+ status: '',
+ progress: 0
})
// 琛ㄥ崟楠岃瘉瑙勫垯
@@ -297,74 +369,17 @@
assignee: [{ required: true, message: '璇疯緭鍏ヨ礋璐ｄ汉', trigger: 'blur' }],
priority: [{ required: true, message: '璇烽�夋嫨浼樺厛绾�', trigger: 'change' }]
}
-
+const departments = ["浜у搧", "鍒嗘瀽", "璋冪爺",'鎶�鏈�', '鏋舵瀯', '璁捐','甯傚満', '鎺ㄥ箍', '钀ラ攢'];
// 姒傝鏁版嵁
const overviewData = reactive({
- personal: { total: 12, completion: 75 },
- group: { total: 8, completion: 60 },
- department: { total: 15, completion: 45 },
- company: { total: 6, completion: 30 }
+ personal: { total: 0, completion: 0 },
+ group: { total: 0, completion: 0 },
+ department: { total: 0, completion: 0 },
+ company: { total: 0, completion: 0 }
})
// 璁″垝鍒楄〃鏁版嵁
-const planList = ref([
- {
- id: 1,
- title: '浜у搧闇�姹傚垎鏋�',
- description: '瀵规柊浜у搧杩涜璇︾粏鐨勯渶姹傚垎鏋愬拰甯傚満璋冪爺锛屽埗瀹氫骇鍝佽鍒掓柟妗�',
- level: 'personal',
- period: 'week',
- startDate: '2025-01-15',
- endDate: '2025-01-21',
- assignee: '闄堝織寮�',
- priority: 'high',
- status: 'in_progress',
- progress: 80,
- tags: ['浜у搧', '鍒嗘瀽', '璋冪爺']
- },
- {
- id: 2,
- title: '鎶�鏈灦鏋勮璁�',
- description: '璁捐绯荤粺鎶�鏈灦鏋勶紝鍖呮嫭鏁版嵁搴撹璁°�佹帴鍙ｈ璁＄瓑',
- level: 'group',
- period: 'month',
- startDate: '2025-01-01',
- endDate: '2025-01-31',
- assignee: '鍒橀泤濠�',
- priority: 'high',
- status: 'completed',
- progress: 100,
- tags: ['鎶�鏈�', '鏋舵瀯', '璁捐']
- },
- {
- id: 3,
- title: '甯傚満鎺ㄥ箍璁″垝',
- description: '鍒跺畾骞村害甯傚満鎺ㄥ箍绛栫暐鍜岃惀閿�璁″垝',
- level: 'department',
- period: 'year',
- startDate: '2025-01-01',
- endDate: '2025-12-31',
- assignee: '鐜嬪缓鍥�',
- priority: 'medium',
- status: 'not_started',
- progress: 0,
- tags: ['甯傚満', '鎺ㄥ箍', '钀ラ攢']
- },
- {
- id: 4,
- title: '鍥㈤槦寤鸿娲诲姩',
- description: '缁勭粐鍥㈤槦寤鸿娲诲姩锛屾彁鍗囧洟闃熷嚌鑱氬姏鍜屽崗浣滄晥鐜�',
- level: 'company',
- period: 'month',
- startDate: '2025-01-15',
- endDate: '2025-02-15',
- assignee: '璧典附鍗�',
- priority: 'low',
- status: 'in_progress',
- progress: 30,
- tags: ['鍥㈤槦', '寤鸿', '娲诲姩']
- }
-])
+const planList = ref([])
// 璁＄畻灞炴��
const datePickerType = computed(() => {
@@ -383,20 +398,24 @@
// 鏂规硶
const handleLevelChange = (value) => {
console.log('璁″垝绾у埆鍙樻洿:', value)
+ getPlanList()
// 杩欓噷鍙互鏍规嵁绾у埆绛涢�夋暟鎹�
}
const handlePeriodChange = (value) => {
console.log('鏃堕棿鍛ㄦ湡鍙樻洿:', value)
+ getPlanList()
// 杩欓噷鍙互鏍规嵁鍛ㄦ湡绛涢�夋暟鎹�
}
const handleDateChange = (value) => {
console.log('鏃ユ湡鍙樻洿:', value)
+ getPlanList()
// 杩欓噷鍙互鏍规嵁鏃ユ湡绛涢�夋暟鎹�
}
const handleAddPlan = () => {
+ operationType.value = 'add'
dialogTitle.value = '鏂板璁″垝'
planDialogVisible.value = true
// 閲嶇疆琛ㄥ崟
@@ -406,32 +425,61 @@
planForm.level = 'personal'
planForm.period = 'week'
planForm.priority = 'medium'
+ planForm.status = 'not_started'
+ planForm.progress = 0
}
const handleEditPlan = (plan) => {
+ operationType.value = 'edit'
dialogTitle.value = '缂栬緫璁″垝'
planDialogVisible.value = true
- // 濉厖琛ㄥ崟鏁版嵁
- Object.keys(planForm).forEach(key => {
- if (key === 'tags') {
- planForm[key] = plan[key].join(', ')
- } else {
- planForm[key] = plan[key]
- }
- })
+ Object.assign(planForm, plan)
+ // // 濉厖琛ㄥ崟鏁版嵁
+ // Object.keys(planForm).forEach(key => {
+ // if (key === 'tags') {
+ // planForm[key] = plan[key].join(', ')
+ // } else {
+ // planForm[key] = plan[key]
+ // }
+ // })
}
const handleViewDetail = (plan) => {
- ElMessage.info(`鏌ョ湅璁″垝璇︽儏: ${plan.title}`)
+ currentPlanDetail.value = plan
+ showPlanDetailDialog.value = true
+ // ElMessage.info(`鏌ョ湅璁″垝璇︽儏: ${plan.title}`)
}
-const handleMoreAction = (command) => {
+const handleMoreAction = async(plan,command) => {
+ let ids = [];
+ ids.push(plan.id);
+ console.log("ids",ids)
switch (command) {
case 'share':
ElMessage.success('璁″垝宸插叡浜�')
break
case 'copy':
- ElMessage.success('璁″垝宸插鍒�')
+ const knowledgeText = `
+ 璁″垝鏍囬锛�${plan.title}
+ 璁″垝鎻忚堪锛�${plan.description}
+ 璁″垝绾у埆锛�${getCurrentLevelText(plan.level)}
+ 鏃堕棿鍛ㄦ湡锛�${getCurrentPeriodText(plan.period)}
+ 寮�濮嬫椂闂达細${plan.startDate}
+ 缁撴潫鏃堕棿锛�${plan.endDate}
+ 璐熻矗浜猴細${plan.assignee}
+ 浼樺厛绾э細${getPriorityText(plan.priority)}
+ 鏍囩锛�${plan.tags.join(', ')}
+ 鐘舵�侊細${getStatusText(plan.status)}
+ 杩涘害锛�${plan.progress}%
+ `.trim();
+
+ // 澶嶅埗鍒板壀璐存澘
+ navigator.clipboard.writeText(knowledgeText).then(() => {
+ ElMessage.success("鐭ヨ瘑鍐呭宸插鍒跺埌鍓创鏉�");
+ }).catch(() => {
+ ElMessage.error("澶嶅埗澶辫触锛岃鎵嬪姩澶嶅埗");
+ });
+ // ElMessage.success('璁″垝宸插鍒�')
break
case 'delete':
ElMessageBox.confirm('纭畾瑕佸垹闄よ繖涓鍒掑悧锛�', '鎻愮ず', {
@@ -439,17 +487,40 @@
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
- ElMessage.success('璁″垝宸插垹闄�')
+
+ delDutyPlan(ids).then(res => {
+ if (res.code === 200) {
+ ElMessage.success('璁″垝宸插垹闄�')
+ ids.value = [];
+ getPlanList()
+ }
+ })
})
break
}
}
-
+//
const handleSavePlan = async () => {
try {
await planFormRef.value.validate()
- ElMessage.success('璁″垝淇濆瓨鎴愬姛')
- planDialogVisible.value = false
+ if (operationType.value === 'add') {
+ addDutyPlan(planForm).then(res => {
+ if (res.code === 200) {
+ ElMessage.success('璁″垝淇濆瓨鎴愬姛')
+ planDialogVisible.value = false
+ }
+ getPlanList()
+ })
+ } else {
+
+ updateDutyPlan(planForm).then(res => {
+ if (res.code === 200) {
+ ElMessage.success('璁″垝淇濆瓨鎴愬姛')
+ planDialogVisible.value = false
+ }
+ getPlanList()
+ })
+ }
} catch (error) {
console.log('琛ㄥ崟楠岃瘉澶辫触:', error)
}
@@ -460,7 +531,8 @@
}
const handleRefresh = () => {
- ElMessage.success('鏁版嵁宸插埛鏂�')
+ getPlanList()
+ // ElMessage.success('鏁版嵁宸插埛鏂�')
}
const handleFilter = () => {
@@ -468,9 +540,21 @@
}
const handleExport = () => {
- ElMessage.success('璁″垝宸插鍑�')
-}
-
+ ElMessageBox.confirm("鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ // exportDutyPlan().then(res => {
+
+ // })
+ proxy.download("/dutyPlan/export", {}, "璁″垝绠＄悊.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
const handleShare = () => {
ElMessage.success('璁″垝宸插叡浜�')
}
@@ -527,8 +611,41 @@
if (progress >= 50) return '#E6A23C'
return '#F56C6C'
}
+//鑾峰彇鏁版嵁鍒楄〃
+const getPlanList = async () => {
+ const params = {
+ level: currentLevel.value,
+ period: currentPeriod.value,
+ queryDate:currentDate.value
+ }
+ listDutyPlan(params).then(res => {
+ if (res.code === 200) {
+ planList.value = res.data.records
+ }
+ }).catch(err => {
+ console.log(err)
+ })
+}
+//鑾峰彇鏁版嵁
+const getPlanNum = async () => {
+ NumDutyPlan().then(res => {
+ if (res.code === 200) {
+ // console.log(res.data)
+ //璁茬粨鏋滈噷闈㈢殑鏁版嵁鏍规嵁level 璧嬪�肩粰overviewData
+ res.data.forEach(item => {
+ overviewData[item.level].total = item.num
+ overviewData[item.level].completion = item.completion
+ })
+
+ }
+ }).catch(err => {
+ console.log(err)
+ })
+}
onMounted(() => {
+ getPlanList()
+ getPlanNum()
console.log('澶氱骇璁″垝妯℃澘椤甸潰宸插姞杞�')
})
</script>
--
Gitblit v1.9.3