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/priceManagement/index.vue | 276 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 276 insertions(+), 0 deletions(-) diff --git a/src/views/procurementManagement/priceManagement/index.vue b/src/views/procurementManagement/priceManagement/index.vue new file mode 100644 index 0000000..12f785b --- /dev/null +++ b/src/views/procurementManagement/priceManagement/index.vue @@ -0,0 +1,276 @@ +<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.productName" placeholder="璇疯緭鍏ュ晢鍝佸悕绉�" clearable /> + </el-form-item> + <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="active" /> + <el-option label="宸茶繃鏈�" value="expired" /> + </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="success" @click="handleBatchUpdate">鎵归噺鏇存柊</el-button> + <el-button type="danger" @click="handleBatchDelete">鎵归噺鍒犻櫎</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="productName" /> + <el-table-column label="瑙勬牸鍨嬪彿" prop="specification" /> + <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" /> + <el-table-column label="鍘熶环鏍�" prop="oldPrice" width="120"> + <template #default="{ row }">楼{{ row.oldPrice.toFixed(2) }}</template> + </el-table-column> + <el-table-column label="鏂颁环鏍�" prop="newPrice" width="120"> + <template #default="{ row }">楼{{ row.newPrice.toFixed(2) }}</template> + </el-table-column> + <el-table-column label="璋冧环骞呭害" prop="priceChange" width="120"> + <template #default="{ row }"> + <span :style="{ color: row.priceChange >= 0 ? '#f56c6c' : '#67c23a' }"> + {{ row.priceChange >= 0 ? '+' : '' }}{{ row.priceChange.toFixed(2) }}% + </span> + </template> + </el-table-column> + <el-table-column label="鐢熸晥鏃堕棿" prop="effectiveTime" width="180" /> + <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="鎿嶄綔" width="200" align="center"> + <template #default="{ row }"> + <el-button type="primary" link @click="openDialog('edit', row)">缂栬緫</el-button> + <el-button type="success" link @click="handleApply(row)" v-if="row.status === 'pending'">搴旂敤</el-button> + <el-button type="danger" link @click="handleDelete(row)">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + </el-card> + + <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '鏂板浠锋牸' : '缂栬緫浠锋牸'" width="600px"> + <el-form :model="formData" label-width="120px"> + <el-form-item label="鍟嗗搧鍚嶇О"> + <el-select v-model="formData.productName" placeholder="璇烽�夋嫨鍟嗗搧" style="width: 100%"> + <el-option label="鍟嗗搧A" value="鍟嗗搧A" /> + <el-option label="鍟嗗搧B" value="鍟嗗搧B" /> + <el-option label="鍟嗗搧C" value="鍟嗗搧C" /> + </el-select> + </el-form-item> + <el-form-item label="瑙勬牸鍨嬪彿"> + <el-input v-model="formData.specification" placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�" /> + </el-form-item> + <el-form-item label="渚涘簲鍟嗗悕绉�"> + <el-select v-model="formData.supplierName" placeholder="璇烽�夋嫨渚涘簲鍟�" style="width: 100%"> + <el-option label="渚涘簲鍟咥" value="渚涘簲鍟咥" /> + <el-option label="渚涘簲鍟咮" value="渚涘簲鍟咮" /> + <el-option label="渚涘簲鍟咰" value="渚涘簲鍟咰" /> + </el-select> + </el-form-item> + <el-form-item label="鍘熶环鏍�"> + <el-input v-model="formData.oldPrice" placeholder="璇疯緭鍏ュ師浠锋牸" type="number" /> + </el-form-item> + <el-form-item label="鏂颁环鏍�"> + <el-input v-model="formData.newPrice" placeholder="璇疯緭鍏ユ柊浠锋牸" type="number" /> + </el-form-item> + <el-form-item label="鐢熸晥鏃堕棿"> + <el-date-picker v-model="formData.effectiveTime" type="datetime" placeholder="閫夋嫨鐢熸晥鏃堕棿" style="width: 100%" /> + </el-form-item> + <el-form-item label="璋冧环鍘熷洜"> + <el-select v-model="formData.reason" placeholder="璇烽�夋嫨璋冧环鍘熷洜" style="width: 100%"> + <el-option label="甯傚満浠锋牸鍙樺姩" value="market" /> + <el-option label="鎴愭湰鍙樺寲" value="cost" /> + <el-option label="渚涘簲鍟嗚皟鏁�" value="supplier" /> + <el-option label="鍏朵粬鍘熷洜" value="other" /> + </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, computed } 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({ + productName: '', + supplierName: '', + status: '' +}) + +const formData = reactive({ + productName: '', + specification: '', + supplierName: '', + oldPrice: 0, + newPrice: 0, + effectiveTime: '', + reason: '', + remark: '' +}) + +const mockData = [ + { + id: 1, + productName: '鍟嗗搧A', + specification: '瑙勬牸1', + supplierName: '渚涘簲鍟咥', + oldPrice: 50.00, + newPrice: 55.00, + priceChange: 10.00, + effectiveTime: '2024-12-01 00:00:00', + status: 'active', + reason: '甯傚満浠锋牸鍙樺姩', + remark: '甯傚満浠锋牸涓婃定' + }, + { + id: 2, + productName: '鍟嗗搧B', + specification: '瑙勬牸2', + supplierName: '渚涘簲鍟咮', + oldPrice: 80.00, + newPrice: 75.00, + priceChange: -6.25, + effectiveTime: '2024-12-01 00:00:00', + status: 'active', + reason: '鎴愭湰鍙樺寲', + remark: '鎴愭湰涓嬮檷' + } +] + +const tableData = ref([...mockData]) + +const getStatusType = (status) => { + const statusMap = { active: 'success', expired: 'info', pending: 'warning' } + return statusMap[status] || 'info' +} + +const getStatusText = (status) => { + const statusMap = { active: '鏈夋晥', expired: '宸茶繃鏈�', pending: '寰呯敓鏁�' } + return statusMap[status] || '鏈煡' +} + +const handleSearch = () => { + loading.value = true + setTimeout(() => { loading.value = false }, 500) +} + +const resetSearch = () => { + Object.assign(searchForm, { productName: '', supplierName: '', status: '' }) +} + +const openDialog = (type, row = {}) => { + dialogType.value = type + if (type === 'edit' && row.id) { + Object.assign(formData, { + productName: row.productName, + specification: row.specification, + supplierName: row.supplierName, + oldPrice: row.oldPrice, + newPrice: row.newPrice, + effectiveTime: row.effectiveTime, + reason: row.reason, + remark: row.remark + }) + } else { + Object.assign(formData, { + productName: '', + specification: '', + supplierName: '', + oldPrice: 0, + newPrice: 0, + effectiveTime: '', + reason: '', + remark: '' + }) + } + dialogVisible.value = true +} + +const handleSubmit = () => { + if (dialogType.value === 'add') { + const priceChange = ((formData.newPrice - formData.oldPrice) / formData.oldPrice) * 100 + const newPrice = { + id: Date.now(), + productName: formData.productName, + specification: formData.specification, + supplierName: formData.supplierName, + oldPrice: formData.oldPrice, + newPrice: formData.newPrice, + priceChange: priceChange, + effectiveTime: formData.effectiveTime, + status: 'pending', + reason: formData.reason, + remark: formData.remark + } + tableData.value.unshift(newPrice) + ElMessage.success('鏂板鎴愬姛') + } + dialogVisible.value = false +} + +const handleApply = (row) => { + row.status = 'active' + ElMessage.success('浠锋牸宸插簲鐢�') +} + +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 handleBatchUpdate = () => { + ElMessage.success('鎵归噺鏇存柊鎴愬姛') +} + +const handleBatchDelete = () => { + 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