From 00100d130c240c191d87d3b6cfb2415f47b9c2d0 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 19 八月 2025 10:17:00 +0800 Subject: [PATCH] 中强恒兴数据修改 --- src/views/collaborativeApproval/officeSupplies/index.vue | 670 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 670 insertions(+), 0 deletions(-) diff --git a/src/views/collaborativeApproval/officeSupplies/index.vue b/src/views/collaborativeApproval/officeSupplies/index.vue new file mode 100644 index 0000000..58ccc76 --- /dev/null +++ b/src/views/collaborativeApproval/officeSupplies/index.vue @@ -0,0 +1,670 @@ +<template> + <div class="app-container"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <span>鍔炲叕鐗╄祫鐢宠绠$悊</span> + <el-button type="primary" @click="showApplyDialog = true"> + <el-icon><Plus /></el-icon> + 鏂板缓鐢宠 + </el-button> + </div> + </template> + + <!-- 鎼滅储鍖哄煙 --> + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> + <el-form-item label="鐢宠缂栧彿" prop="applyNo"> + <el-input + v-model="queryParams.applyNo" + placeholder="璇疯緭鍏ョ敵璇风紪鍙�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐢宠浜�" prop="applicant"> + <el-input + v-model="queryParams.applicant" + placeholder="璇疯緭鍏ョ敵璇蜂汉" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐢宠鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨鐘舵��" clearable style="width: 200px"> + <el-option label="寰呭鎵�" value="pending" /> + <el-option label="宸查�氳繃" value="approved" /> + <el-option label="宸叉嫆缁�" value="rejected" /> + <el-option label="宸插彂鏀�" value="issued" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="handleQuery"> + <el-icon><Search /></el-icon> + 鎼滅储 + </el-button> + <el-button @click="resetQuery"> + <el-icon><Refresh /></el-icon> + 閲嶇疆 + </el-button> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="handleExport"> + <el-icon><Download /></el-icon> + 瀵煎嚭 + </el-button> + <el-button type="success" @click="handleBatchApprove" :disabled="multipleSelection.length === 0"> + <el-icon><Check /></el-icon> + 鎵归噺瀹℃壒 + </el-button> + </el-form-item> + </el-form> + + <!-- 琛ㄦ牸鍖哄煙 --> + <el-table + v-loading="loading" + :data="suppliesList" + @selection-change="handleSelectionChange" + style="width: 100%" + > + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="鐢宠缂栧彿" align="center" prop="applyNo" width="180" /> + <el-table-column label="鐢宠浜�" align="center" prop="applicant" width="120" /> + <el-table-column label="閮ㄩ棬" align="center" prop="department" width="120" /> + <el-table-column label="鐗╄祫绫诲瀷" align="center" prop="supplyType" width="120" /> + <el-table-column label="鐢宠鏁伴噺" align="center" prop="quantity" width="100" /> + <el-table-column label="鐢宠鍘熷洜" align="center" prop="reason" min-width="200" show-overflow-tooltip /> + <el-table-column label="鐢宠鐘舵��" align="center" prop="status" width="100"> + <template #default="scope"> + <el-tag :type="getStatusType(scope.row.status)"> + {{ getStatusText(scope.row.status) }} + </el-tag> + </template> + </el-table-column> + <el-table-column label="鐢宠鏃堕棿" align="center" prop="applyTime" width="180" /> + <el-table-column label="瀹℃壒浜�" align="center" prop="approver" width="120" /> + <el-table-column label="瀹℃壒鏃堕棿" align="center" prop="approveTime" width="180" /> + <el-table-column label="鍙戞斁鏃堕棿" align="center" prop="issueTime" width="180" /> + <el-table-column label="鎿嶄綔" align="center" fixed="right" class-name="small-padding fixed-width" width="200"> + <template #default="scope"> + <el-button + v-if="scope.row.status === 'pending'" + type="primary" + link + @click="handleApprove(scope.row)" + > + 瀹℃壒 + </el-button> + <el-button + v-if="scope.row.status === 'approved'" + type="success" + link + @click="handleIssue(scope.row)" + > + 鍙戞斁 + </el-button> + <el-button + type="info" + link + @click="handleDetail(scope.row)" + > + 璇︽儏 + </el-button> + <el-button + v-if="scope.row.status === 'pending'" + type="danger" + link + @click="handleDelete(scope.row)" + > + 鍒犻櫎 + </el-button> + </template> + </el-table-column> + </el-table> + + <!-- 鍒嗛〉 --> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </el-card> + + <!-- 鐢宠瀵硅瘽妗� --> + <el-dialog + v-model="showApplyDialog" + title="鍔炲叕鐗╄祫鐢宠" + width="600px" + append-to-body + > + <el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="100px"> + <el-form-item label="鐗╄祫绫诲瀷" prop="supplyType"> + <el-select v-model="applyForm.supplyType" placeholder="璇烽�夋嫨鐗╄祫绫诲瀷" style="width: 100%"> + <el-option label="鍔炲叕鐢ㄥ搧" value="office" /> + <el-option label="鐢靛瓙璁惧" value="electronic" /> + <el-option label="娓呮磥鐢ㄥ搧" value="cleaning" /> + <el-option label="鍏朵粬" value="other" /> + </el-select> + </el-form-item> + <el-form-item label="鍏蜂綋鐗╁搧" prop="itemName"> + <el-input v-model="applyForm.itemName" placeholder="璇疯緭鍏ュ叿浣撶墿鍝佸悕绉�" /> + </el-form-item> + <el-form-item label="鐢宠鏁伴噺" prop="quantity"> + <el-input-number v-model="applyForm.quantity" :min="1" :max="999" style="width: 100%" /> + </el-form-item> + <el-form-item label="鐢宠鍘熷洜" prop="reason"> + <el-input + v-model="applyForm.reason" + type="textarea" + :rows="3" + placeholder="璇疯緭鍏ョ敵璇峰師鍥�" + /> + </el-form-item> + <el-form-item label="绱ф�ョ▼搴�" prop="urgency"> + <el-radio-group v-model="applyForm.urgency"> + <el-radio label="normal">鏅��</el-radio> + <el-radio label="urgent">绱ф��</el-radio> + <el-radio label="very_urgent">闈炲父绱ф��</el-radio> + </el-radio-group> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button @click="showApplyDialog = false">鍙� 娑�</el-button> + <el-button type="primary" @click="submitApply">纭� 瀹�</el-button> + </div> + </template> + </el-dialog> + + <!-- 瀹℃壒瀵硅瘽妗� --> + <el-dialog + v-model="showApproveDialog" + title="瀹℃壒鐢宠" + width="500px" + append-to-body + > + <el-form ref="approveFormRef" :model="approveForm" :rules="approveRules" label-width="100px"> + <el-form-item label="瀹℃壒缁撴灉" prop="approveResult"> + <el-radio-group v-model="approveForm.approveResult"> + <el-radio label="approved">閫氳繃</el-radio> + <el-radio label="rejected">鎷掔粷</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="瀹℃壒鎰忚" prop="approveComment"> + <el-input + v-model="approveForm.approveComment" + type="textarea" + :rows="3" + placeholder="璇疯緭鍏ュ鎵规剰瑙�" + /> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button @click="showApproveDialog = false">鍙� 娑�</el-button> + <el-button type="primary" @click="submitApprove">纭� 瀹�</el-button> + </div> + </template> + </el-dialog> + + <!-- 璇︽儏瀵硅瘽妗� --> + <el-dialog + v-model="showDetailDialog" + title="鐢宠璇︽儏" + width="700px" + append-to-body + > + <el-descriptions :column="2" border> + <el-descriptions-item label="鐢宠缂栧彿">{{ currentDetail.applyNo }}</el-descriptions-item> + <el-descriptions-item label="鐢宠浜�">{{ currentDetail.applicant }}</el-descriptions-item> + <el-descriptions-item label="閮ㄩ棬">{{ currentDetail.department }}</el-descriptions-item> + <el-descriptions-item label="鐗╄祫绫诲瀷">{{ currentDetail.supplyType }}</el-descriptions-item> + <el-descriptions-item label="鍏蜂綋鐗╁搧">{{ currentDetail.itemName }}</el-descriptions-item> + <el-descriptions-item label="鐢宠鏁伴噺">{{ currentDetail.quantity }}</el-descriptions-item> + <el-descriptions-item label="鐢宠鍘熷洜" :span="2">{{ currentDetail.reason }}</el-descriptions-item> + <el-descriptions-item label="鐢宠鐘舵��"> + <el-tag :type="getStatusType(currentDetail.status)"> + {{ getStatusText(currentDetail.status) }} + </el-tag> + </el-descriptions-item> + <el-descriptions-item label="鐢宠鏃堕棿">{{ currentDetail.applyTime }}</el-descriptions-item> + <el-descriptions-item label="瀹℃壒浜�">{{ currentDetail.approver || '-' }}</el-descriptions-item> + <el-descriptions-item label="瀹℃壒鏃堕棿">{{ currentDetail.approveTime || '-' }}</el-descriptions-item> + <el-descriptions-item label="瀹℃壒鎰忚" :span="2">{{ currentDetail.approveComment || '-' }}</el-descriptions-item> + <el-descriptions-item label="鍙戞斁鏃堕棿">{{ currentDetail.issueTime || '-' }}</el-descriptions-item> + <el-descriptions-item label="鍙戞斁浜�">{{ currentDetail.issuer || '-' }}</el-descriptions-item> + </el-descriptions> + </el-dialog> + </div> +</template> + +<script setup> +import { ref, reactive, onMounted } from 'vue' +import { ElMessage, ElMessageBox } from 'element-plus' +import { Plus, Search, Refresh, Download, Check } from '@element-plus/icons-vue' + +// 鍝嶅簲寮忔暟鎹� +const loading = ref(false) +const showSearch = ref(true) +const showApplyDialog = ref(false) +const showApproveDialog = ref(false) +const showDetailDialog = ref(false) +const multipleSelection = ref([]) +const total = ref(0) +const suppliesList = ref([]) +const currentDetail = ref({}) + +// 鏌ヨ鍙傛暟 +const queryParams = reactive({ + pageNum: 1, + pageSize: 10, + applyNo: '', + applicant: '', + status: '' +}) + +// 鐢宠琛ㄥ崟 +const applyForm = reactive({ + supplyType: '', + itemName: '', + quantity: 1, + reason: '', + urgency: 'normal' +}) + +// 瀹℃壒琛ㄥ崟 +const approveForm = reactive({ + approveResult: 'approved', + approveComment: '' +}) + +// 琛ㄥ崟鏍¢獙瑙勫垯 +const applyRules = { + supplyType: [{ required: true, message: '璇烽�夋嫨鐗╄祫绫诲瀷', trigger: 'change' }], + itemName: [{ required: true, message: '璇疯緭鍏ュ叿浣撶墿鍝佸悕绉�', trigger: 'blur' }], + quantity: [{ required: true, message: '璇疯緭鍏ョ敵璇锋暟閲�', trigger: 'blur' }], + reason: [{ required: true, message: '璇疯緭鍏ョ敵璇峰師鍥�', trigger: 'blur' }] +} + +const approveRules = { + approveResult: [{ required: true, message: '璇烽�夋嫨瀹℃壒缁撴灉', trigger: 'change' }], + approveComment: [{ required: true, message: '璇疯緭鍏ュ鎵规剰瑙�', trigger: 'blur' }] +} + +// 鍋囨暟鎹� +const mockData = [ + { + id: 1, + applyNo: 'WS20241201001', + applicant: '闄堝織寮�', + department: '鎶�鏈儴', + supplyType: '鍔炲叕鐢ㄥ搧', + itemName: 'A4鎵撳嵃绾�', + quantity: 10, + reason: '鏃ュ父鍔炲叕鎵撳嵃闇�瑕�', + status: 'pending', + applyTime: '2024-12-01 09:30:00', + approver: '', + approveTime: '', + approveComment: '', + issueTime: '', + issuer: '' + }, + { + id: 2, + applyNo: 'WS20241201002', + applicant: '鍒橀泤濠�', + department: '浜轰簨閮�', + supplyType: '鐢靛瓙璁惧', + itemName: '鏃犵嚎榧犳爣', + quantity: 2, + reason: '鏂板憳宸ュ叆鑱岄厤澶�', + status: 'approved', + applyTime: '2024-12-01 10:15:00', + approver: '鐜嬪缓鍥�', + approveTime: '2024-12-01 14:20:00', + approveComment: '鍚屾剰鐢宠锛岃鍙婃椂鍙戞斁', + issueTime: '', + issuer: '' + }, + { + id: 3, + applyNo: 'WS20241201003', + applicant: '鐜嬪缓鍥�', + department: '璐㈠姟閮�', + supplyType: '娓呮磥鐢ㄥ搧', + itemName: '娲楁墜娑�', + quantity: 5, + reason: '鍔炲叕瀹ゆ竻娲佺敤鍝佽ˉ鍏�', + status: 'issued', + applyTime: '2024-12-01 11:00:00', + approver: '鍒橀泤濠�', + approveTime: '2024-12-01 15:30:00', + approveComment: '鍚屾剰鐢宠', + issueTime: '2024-12-01 16:00:00', + issuer: '閽变紵鏄�' + }, + { + id: 4, + applyNo: 'WS20241201004', + applicant: '璧典附鍗�', + department: '甯傚満閮�', + supplyType: '鍏朵粬', + itemName: '鏂囦欢澶�', + quantity: 20, + reason: '椤圭洰璧勬枡鏁寸悊闇�瑕�', + status: 'rejected', + applyTime: '2024-12-01 13:45:00', + approver: '闄堝織寮�', + approveTime: '2024-12-01 17:00:00', + approveComment: '鏁伴噺杩囧锛屽缓璁噺灏戝埌10涓�', + issueTime: '', + issuer: '' + }, + { + id: 5, + applyNo: 'WS20241202001', + applicant: '閽变紵鏄�', + department: '杩愯惀閮�', + supplyType: '鍔炲叕鐢ㄥ搧', + itemName: '绛惧瓧绗�', + quantity: 50, + reason: '閮ㄩ棬鏃ュ父鍔炲叕鐢ㄥ搧琛ュ厖', + status: 'pending', + applyTime: '2024-12-02 08:30:00', + approver: '', + approveTime: '', + approveComment: '', + issueTime: '', + issuer: '' + }, + { + id: 6, + applyNo: 'WS20241202002', + applicant: '瀛欐槑鍗�', + department: '鎶�鏈儴', + supplyType: '鐢靛瓙璁惧', + itemName: '閿洏', + quantity: 3, + reason: '鏂板憳宸ヨ澶囬厤澶�', + status: 'approved', + applyTime: '2024-12-02 14:20:00', + approver: '闄堝織寮�', + approveTime: '2024-12-02 16:00:00', + approveComment: '鍚屾剰鐢宠', + issueTime: '', + issuer: '' + }, + { + id: 7, + applyNo: 'WS20241203001', + applicant: '鍛ㄧ編鐜�', + department: '浜轰簨閮�', + supplyType: '娓呮磥鐢ㄥ搧', + itemName: '绾稿肪', + quantity: 30, + reason: '鍔炲叕鍖哄煙娓呮磥鐢ㄥ搧琛ュ厖', + status: 'issued', + applyTime: '2024-12-03 09:15:00', + approver: '璧典附鍗�', + approveTime: '2024-12-03 10:30:00', + approveComment: '鍚屾剰鐢宠', + issueTime: '2024-12-03 11:00:00', + issuer: '瀛欐槑鍗�' + }, + { + id: 8, + applyNo: 'WS20241203002', + applicant: '鍚村織寮�', + department: '璐㈠姟閮�', + supplyType: '鍏朵粬', + itemName: '璁$畻鍣�', + quantity: 2, + reason: '璐㈠姟鏍哥畻宸ヤ綔闇�瑕�', + status: 'rejected', + applyTime: '2024-12-03 15:45:00', + approver: '鐜嬪缓鍥�', + approveTime: '2024-12-03 17:20:00', + approveComment: '宸叉湁璁$畻鍣紝鏆備笉闇�瑕�', + issueTime: '', + issuer: '' + } +] + +// 鑾峰彇鍒楄〃鏁版嵁 +const getList = () => { + loading.value = true + // 妯℃嫙寮傛璇锋眰 + setTimeout(() => { + let filteredData = [...mockData] + + // 鏍规嵁鏌ヨ鏉′欢杩囨护 + if (queryParams.applyNo) { + filteredData = filteredData.filter(item => + item.applyNo.toLowerCase().includes(queryParams.applyNo.toLowerCase()) + ) + } + if (queryParams.applicant) { + filteredData = filteredData.filter(item => + item.applicant.toLowerCase().includes(queryParams.applicant.toLowerCase()) + ) + } + if (queryParams.status) { + filteredData = filteredData.filter(item => + item.status === queryParams.status + ) + } + + // 鎸夌敵璇锋椂闂村�掑簭鎺掑垪 + filteredData.sort((a, b) => new Date(b.applyTime) - new Date(a.applyTime)) + + total.value = filteredData.length + suppliesList.value = filteredData.slice( + (queryParams.pageNum - 1) * queryParams.pageSize, + queryParams.pageNum * queryParams.pageSize + ) + loading.value = false + }, 500) +} + +// 鏌ヨ +const handleQuery = () => { + queryParams.pageNum = 1 + getList() +} + +// 閲嶇疆鏌ヨ +const resetQuery = () => { + queryParams.applyNo = '' + queryParams.applicant = '' + queryParams.status = '' + handleQuery() +} + +// 澶氶�� +const handleSelectionChange = (selection) => { + multipleSelection.value = selection +} + +// 鑾峰彇鐘舵�佺被鍨� +const getStatusType = (status) => { + const statusMap = { + pending: 'warning', + approved: 'success', + rejected: 'danger', + issued: 'info' + } + return statusMap[status] || 'info' +} + +// 鑾峰彇鐘舵�佹枃鏈� +const getStatusText = (status) => { + const statusMap = { + pending: '寰呭鎵�', + approved: '宸查�氳繃', + rejected: '宸叉嫆缁�', + issued: '宸插彂鏀�' + } + return statusMap[status] || status +} + +// 鎻愪氦鐢宠 +const submitApply = () => { + const newApply = { + id: mockData.length + 1, + applyNo: `WS${new Date().getTime()}`, + applicant: '褰撳墠鐢ㄦ埛', + department: '鎶�鏈儴', + supplyType: applyForm.supplyType, + itemName: applyForm.itemName, + quantity: applyForm.quantity, + reason: applyForm.reason, + status: 'pending', + applyTime: new Date().toLocaleString(), + approver: '', + approveTime: '', + approveComment: '', + issueTime: '', + issuer: '' + } + + mockData.unshift(newApply) + showApplyDialog.value = false + ElMessage.success('鐢宠鎻愪氦鎴愬姛') + getList() + + // 閲嶇疆琛ㄥ崟 + Object.assign(applyForm, { + supplyType: '', + itemName: '', + quantity: 1, + reason: '', + urgency: 'normal' + }) +} + +// 瀹℃壒 +const handleApprove = (row) => { + currentDetail.value = row + showApproveDialog.value = true +} + +// 鎻愪氦瀹℃壒 +const submitApprove = () => { + const index = mockData.findIndex(item => item.id === currentDetail.value.id) + if (index !== -1) { + mockData[index].status = approveForm.approveResult + mockData[index].approver = '褰撳墠瀹℃壒浜�' + mockData[index].approveTime = new Date().toLocaleString() + mockData[index].approveComment = approveForm.approveComment + } + + showApproveDialog.value = false + ElMessage.success('瀹℃壒瀹屾垚') + getList() + + // 閲嶇疆琛ㄥ崟 + Object.assign(approveForm, { + approveResult: 'approved', + approveComment: '' + }) +} + +// 鍙戞斁 +const handleIssue = (row) => { + const index = mockData.findIndex(item => item.id === row.id) + if (index !== -1) { + mockData[index].status = 'issued' + mockData[index].issueTime = new Date().toLocaleString() + mockData[index].issuer = '褰撳墠鍙戞斁浜�' + } + + ElMessage.success('鍙戞斁瀹屾垚') + getList() +} + +// 鏌ョ湅璇︽儏 +const handleDetail = (row) => { + currentDetail.value = row + showDetailDialog.value = true +} + +// 鍒犻櫎 +const handleDelete = (row) => { + ElMessageBox.confirm('纭鍒犻櫎璇ョ敵璇峰悧锛�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + const index = mockData.findIndex(item => item.id === row.id) + if (index !== -1) { + mockData.splice(index, 1) + } + ElMessage.success('鍒犻櫎鎴愬姛') + getList() + }) +} + +// 鎵归噺瀹℃壒 +const handleBatchApprove = () => { + if (multipleSelection.value.length === 0) { + ElMessage.warning('璇烽�夋嫨瑕佸鎵圭殑璁板綍') + return + } + + ElMessageBox.confirm(`纭鎵归噺瀹℃壒閫変腑鐨� ${multipleSelection.value.length} 鏉¤褰曞悧锛焋, '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + multipleSelection.value.forEach(row => { + const index = mockData.findIndex(item => item.id === row.id) + if (index !== -1) { + mockData[index].status = 'approved' + mockData[index].approver = '褰撳墠瀹℃壒浜�' + mockData[index].approveTime = new Date().toLocaleString() + mockData[index].approveComment = '鎵归噺瀹℃壒閫氳繃' + } + }) + ElMessage.success('鎵归噺瀹℃壒瀹屾垚') + getList() + }) +} + +// 瀵煎嚭 +const handleExport = () => { + ElMessage.success('瀵煎嚭鍔熻兘寮�鍙戜腑...') +} + +// 椤甸潰鍔犺浇鏃惰幏鍙栨暟鎹� +onMounted(() => { + getList() +}) +</script> + +<style scoped> +.app-container { + padding: 20px; +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.mb8 { + margin-bottom: 8px; +} + +.dialog-footer { + text-align: right; +} + +:deep(.el-descriptions__label) { + width: 120px; +} +</style> -- Gitblit v1.9.3