From c7b4b9a2f4c0f05aeb60a9e3f5fba5d9a3676f3f Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期一, 18 八月 2025 16:22:42 +0800 Subject: [PATCH] 中强恒兴设备管理页面添加 --- src/views/procurementManagement/purchaseOrder/index.vue | 188 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 188 insertions(+), 0 deletions(-) diff --git a/src/views/procurementManagement/purchaseOrder/index.vue b/src/views/procurementManagement/purchaseOrder/index.vue new file mode 100644 index 0000000..73b4e84 --- /dev/null +++ b/src/views/procurementManagement/purchaseOrder/index.vue @@ -0,0 +1,188 @@ +<template> + <div class="app-container"> + <el-card class="search-card" shadow="never"> + <el-form :model="searchForm" :inline="true"> + <el-form-item label="渚涘簲鍟嗗悕绉帮細"> + <el-input v-model="searchForm.supplierName" placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О" clearable /> + </el-form-item> + <el-form-item label="璁㈠崟鐘舵�侊細"> + <el-select v-model="searchForm.status" placeholder="璇烽�夋嫨鐘舵��" clearable> + <el-option label="鑽夌" value="draft" /> + <el-option label="寰呭鏍�" value="pending" /> + <el-option label="宸插鏍�" value="approved" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="handleSearch">鎼滅储</el-button> + <el-button @click="resetSearch">閲嶇疆</el-button> + </el-form-item> + </el-form> + </el-card> + + <el-card class="table-card" shadow="never"> + <div class="table-header"> + <el-button type="primary" @click="openDialog('add')">鏂板璁㈠崟</el-button> + <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedRows.length">鎵归噺鍒犻櫎</el-button> + </div> + + <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="璁㈠崟缂栧彿" prop="orderNo" width="180" /> + <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" /> + <el-table-column label="璁㈠崟鐘舵��" prop="status" width="100"> + <template #default="{ row }"> + <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag> + </template> + </el-table-column> + <el-table-column label="鎬婚噾棰�" prop="totalAmount" width="120"> + <template #default="{ row }">楼{{ row.totalAmount.toFixed(2) }}</template> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" prop="createTime" width="180" /> + <el-table-column label="鎿嶄綔" width="200" align="center"> + <template #default="{ row }"> + <el-button type="primary" size="small" @click="openDialog('edit', row)">缂栬緫</el-button> + <el-button type="success" size="small" @click="viewDetails(row)">鏌ョ湅</el-button> + <el-button type="danger" size="small" @click="handleDelete(row)">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + </el-card> + + <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '鏂板閲囪喘璁㈠崟' : '缂栬緫閲囪喘璁㈠崟'" width="800px"> + <el-form :model="formData" ref="formRef" label-width="120px"> + <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName"> + <el-select v-model="formData.supplierName" placeholder="璇烽�夋嫨渚涘簲鍟�" style="width: 100%"> + <el-option label="渚涘簲鍟咥" value="渚涘簲鍟咥" /> + <el-option label="渚涘簲鍟咮" value="渚涘簲鍟咮" /> + </el-select> + </el-form-item> + <el-form-item label="澶囨敞"> + <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�" /> + </el-form-item> + </el-form> + <template #footer> + <el-button @click="dialogVisible = false">鍙栨秷</el-button> + <el-button type="primary" @click="handleSubmit">纭畾</el-button> + </template> + </el-dialog> + </div> +</template> + +<script setup> +import { ref, reactive } from 'vue' +import { ElMessage, ElMessageBox } from 'element-plus' + +const loading = ref(false) +const dialogVisible = ref(false) +const dialogType = ref('add') +const selectedRows = ref([]) + +const searchForm = reactive({ + supplierName: '', + status: '' +}) + +const formData = reactive({ + supplierName: '', + remark: '' +}) + +const mockData = [ + { + id: 1, + orderNo: 'PO20241201001', + supplierName: '渚涘簲鍟咥', + status: 'approved', + totalAmount: 12500.00, + createTime: '2024-12-01 10:30:00', + remark: '甯歌閲囪喘' + } +] + +const tableData = ref([...mockData]) + +const getStatusType = (status) => { + const statusMap = { draft: 'info', pending: 'warning', approved: 'success' } + return statusMap[status] || 'info' +} + +const getStatusText = (status) => { + const statusMap = { draft: '鑽夌', pending: '寰呭鏍�', approved: '宸插鏍�' } + return statusMap[status] || '鏈煡' +} + +const handleSearch = () => { + loading.value = true + setTimeout(() => { + loading.value = false + }, 500) +} + +const resetSearch = () => { + Object.assign(searchForm, { supplierName: '', status: '' }) +} + +const openDialog = (type, row = {}) => { + dialogType.value = type + if (type === 'edit' && row.id) { + Object.assign(formData, { supplierName: row.supplierName, remark: row.remark }) + } else { + Object.assign(formData, { supplierName: '', remark: '' }) + } + dialogVisible.value = true +} + +const handleSubmit = () => { + if (dialogType.value === 'add') { + const newOrder = { + id: Date.now(), + orderNo: `PO${Date.now()}`, + supplierName: formData.supplierName, + status: 'draft', + totalAmount: 0, + createTime: new Date().toLocaleString(), + remark: formData.remark + } + tableData.value.unshift(newOrder) + ElMessage.success('鏂板鎴愬姛') + } + dialogVisible.value = false +} + +const viewDetails = (row) => { + ElMessage.info('鏌ョ湅璇︽儏鍔熻兘') +} + +const handleDelete = (row) => { + ElMessageBox.confirm('纭畾瑕佸垹闄よ繖鏉¤褰曞悧锛�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + const index = tableData.value.findIndex(item => item.id === row.id) + if (index !== -1) { + tableData.value.splice(index, 1) + ElMessage.success('鍒犻櫎鎴愬姛') + } + }) +} + +const handleBatchDelete = () => { + if (selectedRows.value.length === 0) { + ElMessage.warning('璇烽�夋嫨瑕佸垹闄ょ殑璁板綍') + return + } + ElMessage.success('鎵归噺鍒犻櫎鎴愬姛') +} + +const handleSelectionChange = (rows) => { + selectedRows.value = rows +} +</script> + +<style scoped> +.app-container { padding: 20px; } +.search-card { margin-bottom: 20px; } +.table-card { margin-bottom: 20px; } +.table-header { margin-bottom: 20px; } +</style> -- Gitblit v1.9.3