From 50b6007b336a65b7deb6c77c9fdc608865067608 Mon Sep 17 00:00:00 2001 From: 张诺 <2864490065@qq.com> Date: 星期五, 25 七月 2025 16:31:57 +0800 Subject: [PATCH] 昭德改善销售数量 --- src/views/equipment/management/index.vue | 477 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 358 insertions(+), 119 deletions(-) diff --git a/src/views/equipment/management/index.vue b/src/views/equipment/management/index.vue index 5c29464..f82ac28 100644 --- a/src/views/equipment/management/index.vue +++ b/src/views/equipment/management/index.vue @@ -30,64 +30,88 @@ <!-- 鎿嶄綔鎸夐挳鍖� --> <el-row :gutter="24" class="table-toolbar"> - <el-button :icon="Plus" type="primary" @click="handleAdd" - >鏂板缓</el-button + <el-button + :icon="Plus" + type="primary" + v-show="activeTab === 'management'" + @click="handleAdd" + >璁惧鏂板</el-button > - <el-button :icon="Delete" type="danger" @click="handleDelete" - >鍒犻櫎</el-button + <el-button + :icon="Plus" + type="primary" + v-show="activeTab === 'equipmentRequisition'" + @click="handleAdd" + >棰嗙敤</el-button + > + <el-button + :icon="Delete" + type="danger" + v-show="activeTab === 'management'" + @click="handleDelete" + :disabled="selectedCount === 0" + >鍒犻櫎 {{ selectedCount > 0 ? `(${selectedCount})` : '' }}</el-button > </el-row> - <!-- 琛ㄦ牸缁勪欢 --> - <div> + <!-- 琛ㄦ牸缁勪欢 --> + <div class="table-container"> + <!-- 鍔犺浇鐘舵�� --> + <el-skeleton v-if="loading" animated> + <template #template> + <el-skeleton-item variant="h1" style="width: 40%" /> + <div style="padding: 14px;"> + <el-skeleton-item variant="text" /> + <el-skeleton-item variant="text" /> + <el-skeleton-item variant="text" /> + </div> + </template> + </el-skeleton> + + <!-- 鏁版嵁琛ㄦ牸 --> <data-table + v-else + :showOverflowTooltip="false" :border="true" :columns="columns" :loading="loading" style="width: 100%; height: calc(100vh - 29em)" - :show-selection="true" + :show-selection="activeTab === 'management'" :table-data="tableData" @edit="handleEdit" @viewRow="handleView" @selection-change="handleSelectionChange" - :operations="['edit', 'viewRow']" - :operationsWidth="200" + @custom-click="handleCustomButtonClick" + :operations="getTableOperations()" + :operationsWidth="getOperationsWidth()" + :customButtons="getCustomButtons()" > - <!-- 瀛楁鍚嶇О鍒楃殑鑷畾涔夋彃妲� - 鏄剧ず涓烘爣绛� --> - <template - v-if="activeTab === 'coalQualityMaintenance'" - #fieldIds="{ row }" - > - <template - v-if=" - typeof row.fieldIds === 'string' && row.fieldIds.includes(',') - " + <!-- 绌虹姸鎬佹彃妲� --> + <template #empty> + <el-empty + :description="`鏆傛棤${currentTabConfig?.label || ''}鏁版嵁`" + :image-size="120" > - <el-tag - v-for="(field, index) in row.fieldIds.split(',')" - :key="index" - size="small" - style="margin-right: 4px; margin-bottom: 2px" - type="primary" - > - </el-tag> - </template> - <template v-else> - <el-tag size="small" type="primary"> - </el-tag> - </template> + <template #description> + <p>鏆傛棤{{ currentTabConfig?.label || '' }}鏁版嵁</p> + <p v-if="queryParams.searchAll" class="text-secondary"> + 灏濊瘯璋冩暣鎼滅储鏉′欢鎴� + <el-button type="primary" link @click="resetQuery">娓呯┖鎼滅储</el-button> + </p> + </template> + </el-empty> </template> </data-table> </div> <pagination v-if="total > 0" :layout="'total, prev, pager, next, jumper'" - :limit="pageSizes" + :limit="pageSize" :page="pageNum" :total="total" @pagination="handPagination" /> <managementDialog - v-if="activeTab == 'management'" + v-if="activeTab == 'management'" v-model:copyForm="copyForm" v-model:managementFormDialog="manaDialog" :addOrEdit="addOrEdit" @@ -99,22 +123,34 @@ v-model="equipmentRequisitionDialog" :formData="form" :maxQuantity="getMaxQuantity()" + :addOrEdit="addOrEdit" + :equipmentStatus="form.equipmentStatus" @submit="onEquipmentRequisitionSubmit" /> - <UsageRecord + <!-- <UsageRecord v-if="activeTab == 'usageRecord'" v-model:copyForm="copyForm" v-model:usageRecordDialog="usageRecordDialog" :addOrEdit="addOrEdit" :form="form" @submit="getList" + /> --> + + <!-- 鏌ョ湅璇︽儏寮圭獥 --> + <DilogTable + v-model="dialogTableVisible" + :title="dialogTableTitle" + :table-data="dialogTableData" + :columns="dialogTableColumns" + width="70%" + height="500px" /> </el-card> </div> </template> <script setup> -import { computed, onMounted, reactive, ref } from "vue"; +import { computed, onMounted, reactive, ref, nextTick, toRefs } from "vue"; import { ElMessage } from "element-plus"; import { Delete, Plus } from "@element-plus/icons-vue"; @@ -123,35 +159,89 @@ import Pagination from "@/components/Pagination"; import managementDialog from "./mould/managementDialog.vue"; import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue"; -import UsageRecord from "./mould/usageRecord.vue"; +import DilogTable from "@/components/dialog/DilogTable.vue"; // API 鏈嶅姟瀵煎叆 import { useDelete } from "@/hooks/useDelete.js"; -import { getManagementList, delEquipment } from "@/api/equipment/management/index.js"; -import { getUsageRecordList } from "@/api/equipment/requisition/index.js"; +import { + getManagementList, + delEquipment, +} from "@/api/equipment/management/index.js"; +import { getUsageRecordList, getUsageDetailList } from "@/api/equipment/requisition/index.js"; -// 鍝嶅簲寮忕姸鎬佺鐞� -const form = ref({}); -const title = ref(""); -const copyForm = ref({}); -const addOrEdit = ref("add"); +// 璁惧鐘舵�佹灇涓� +const EQUIPMENT_STATUS = { + USING: 1, // 浣跨敤涓� + PARTIAL_RETURN: 2, // 閮ㄥ垎褰掕繕 + RETURNED: 3 // 宸插綊杩� +}; + +// 鑾峰彇鐘舵�佹枃鏈� +const getStatusText = (status) => { + switch(status) { + case EQUIPMENT_STATUS.USING: return "浣跨敤涓�"; + case EQUIPMENT_STATUS.PARTIAL_RETURN: return "閮ㄥ垎褰掕繕"; + case EQUIPMENT_STATUS.RETURNED: return "宸插綊杩�"; + default: return "鏈煡鐘舵��"; + } +}; + +// 鑾峰彇鐘舵�侀鑹� +const getStatusColor = (status) => { + switch(status) { + case EQUIPMENT_STATUS.USING: return '#409eff'; // 钃濊壊 + case EQUIPMENT_STATUS.PARTIAL_RETURN: return '#e6a23c'; // 姗欒壊 + case EQUIPMENT_STATUS.RETURNED: return '#67c23a'; // 缁胯壊 + default: return '#909399'; // 鐏拌壊 + } +}; + +// 鍝嶅簲寮忕姸鎬佺鐞� - 浣跨敤瑙f瀯鍜岄粯璁ゅ�� +const initFormState = () => ({ consumables: false }); + +const state = reactive({ + form: initFormState(), + title: "", + copyForm: {}, + addOrEdit: "add", + loading: false, + activeTab: "management", + selectedRows: [], + tableData: [], + // 鍒嗛〉鐘舵�� + pageNum: 1, + pageSize: 10, + total: 0, + // 鏌ヨ鍙傛暟 + queryParams: { + searchAll: "", + }, +}); + +// 浣跨敤瑙f瀯绠�鍖栬闂� +const { + form, + title, + copyForm, + addOrEdit, + loading, + activeTab, + selectedRows, + tableData, + pageNum, + pageSize, + total, + queryParams, +} = toRefs(state); + +// 娣诲姞缂哄け鐨勫搷搴斿紡鍙橀噺 const manaDialog = ref(false); const equipmentRequisitionDialog = ref(false); const usageRecordDialog = ref(false); -const loading = ref(false); -const activeTab = ref("management"); -const selectedRows = ref([]); -const tableData = ref([]); - -// 鍒嗛〉鐘舵�� -const pageNum = ref(1); -const pageSizes = ref(10); -const total = ref(0); - -// 鏌ヨ鍙傛暟 -const queryParams = reactive({ - searchAll: "" -}); +const dialogTableVisible = ref(false); +const dialogTableTitle = ref(''); +const dialogTableData = ref([]); +const dialogTableColumns = ref([]); // 鏍囩椤甸厤缃� - 渚夸簬鍚庣画鎵╁睍 const tabsConfig = { @@ -164,69 +254,48 @@ columns: [ { prop: "equipmentNo", label: "璁惧缂栧彿", minWidth: 100 }, { prop: "equipmentName", label: "璁惧鍚嶇О", minWidth: 100 }, - { prop: "quantity", label: "鏁伴噺", minWidth: 100 }, + { prop: "consumables", label: "鑰楁潗", + formatter: (row) => (row.consumables ? "鏄�" : "鍚�"), minWidth: 100 }, + { prop: "quantity", label: "鎬绘暟閲�", minWidth: 100 }, + { prop: "usedNo", label: "宸蹭娇鐢ㄦ暟閲�", minWidth: 100 }, { prop: "specification", label: "瑙勬牸鍨嬪彿", minWidth: 100 }, - { - prop: "usageStatus", - label: "浣跨敤鐘舵��", - minWidth: 100, - formatter: (row) => row.usageStatus == 1 ? "鍚敤" : "绂佺敤" - }, { prop: "purchaseDate", label: "閲囪喘鏃ユ湡", minWidth: 100 }, { prop: "purchasePrice", label: "閲囪喘浠锋牸", minWidth: 100 }, - ] + ], }, - equipmentRequisition:{ + equipmentRequisition: { label: "璁惧棰嗙敤", searchPlaceholder: "璁惧缂栧彿/璁惧鍚嶇О/瑙勬牸鍨嬪彿", showSearch: true, api: getUsageRecordList, deleteApi: null, columns: [ - { prop: "userId", label: "棰嗙敤浜�", minWidth: 100 }, - { prop: "equipmentId", label: "璁惧ID", minWidth: 100 }, + { prop: "userName", label: "棰嗙敤浜�", minWidth: 100 }, + { prop: "equipmentNo", label: "璁惧缂栧彿", minWidth: 100 }, + { prop: "equipmentName", label: "璁惧鍚嶇О", minWidth: 100 }, { prop: "usageQuantity", label: "棰嗙敤鏁伴噺", minWidth: 100 }, - { - prop: "equipmentStatus", - label: "浣跨敤鐘舵��", + {prop: "returnQuantity" , label: "褰掕繕鏁伴噺", minWidth: 100, + formatter: (row) => row.returnQuantity || 0 + }, + { + prop: "equipmentStatus", + label: "浣跨敤鐘舵��", minWidth: 100, - formatter: (row) => row.usageStatus == 1 ? "鍚敤" : "绂佺敤" + formatter: (row) => getStatusText(row.equipmentStatus), + cellStyle: (row) => ({ color: getStatusColor(row.equipmentStatus) }), }, { prop: "usageStartTime", label: "浣跨敤寮�濮嬫椂闂�", minWidth: 100 }, { prop: "usageEndTime", label: "浣跨敤缁撴潫鏃堕棿", minWidth: 100 }, { prop: "remarks", label: "澶囨敞", minWidth: 100 }, - ] + ], }, - usageRecord:{ - label: "棰嗙敤璁板綍", - searchPlaceholder: "璁惧缂栧彿/璁惧鍚嶇О/瑙勬牸鍨嬪彿", - showSearch: true, - api: getManagementList, - deleteApi: delEquipment, - columns: [ - { prop: "equipmentId", label: "璁惧缂栧彿", minWidth: 100 }, - { prop: "equipmentName", label: "璁惧鍚嶇О", minWidth: 100 }, - { prop: "quantity", label: "鏁伴噺", minWidth: 100 }, - { prop: "specification", label: "瑙勬牸鍨嬪彿", minWidth: 100 }, - { - prop: "usageStatus", - label: "浣跨敤鐘舵��", - minWidth: 100, - formatter: (row) => row.usageStatus == 1 ? "鍚敤" : "绂佺敤" - }, - { prop: "purchaseDate", label: "閲囪喘鏃ユ湡", minWidth: 100 }, - { prop: "purchasePrice", label: "閲囪喘浠锋牸", minWidth: 100 }, - ] - }, - - // 鍚庣画鍙互鍦ㄨ繖閲屾坊鍔犳柊鐨勬爣绛鹃〉閰嶇疆 }; // 鏍囩椤垫暟鎹� const tabs = reactive( Object.entries(tabsConfig).map(([name, config]) => ({ name, - label: config.label + label: config.label, })) ); @@ -234,11 +303,81 @@ const currentTabConfig = computed(() => tabsConfig[activeTab.value]); // 璁$畻灞炴�� -const searchPlaceholder = computed(() => currentTabConfig.value?.searchPlaceholder || "璇疯緭鍏ユ悳绱俊鎭�"); -const shouldShowSearch = computed(() => currentTabConfig.value?.showSearch || false); +const searchPlaceholder = computed( + () => currentTabConfig.value?.searchPlaceholder || "璇疯緭鍏ユ悳绱俊鎭�" +); +const shouldShowSearch = computed( + () => currentTabConfig.value?.showSearch || false +); const columns = computed(() => currentTabConfig.value?.columns || []); const selectedCount = computed(() => selectedRows.value.length); +// 鍔ㄦ�佽幏鍙栬〃鏍兼搷浣滈厤缃� +const getTableOperations = () => { + if (activeTab.value === 'equipmentRequisition') { + return [ 'viewRow']; // 璁惧棰嗙敤椤甸潰鍙樉绀虹紪杈戝拰鏌ョ湅 + } + return ['edit', 'viewRow']; // 榛樿鎿嶄綔 +}; + +// 鍔ㄦ�佽幏鍙栨搷浣滃垪瀹藉害 +const getOperationsWidth = () => { + if (activeTab.value === 'equipmentRequisition') { + return 250; // 涓哄綊杩樻寜閽鐣欐洿澶氱┖闂� + } + return 200; // 榛樿瀹藉害 +}; + +// 鍔ㄦ�佽幏鍙栬嚜瀹氫箟鎸夐挳閰嶇疆 +const getCustomButtons = () => { + const buttons = []; + + // 鍦ㄨ澶囬鐢ㄩ〉闈㈡坊鍔犲綊杩樻寜閽� + if (activeTab.value === 'equipmentRequisition') { + buttons.push({ + name: 'return', + label: '褰掕繕', + type: 'success', + size: 'small', + link: true, + show: (row) => row.equipmentStatus === EQUIPMENT_STATUS.USING || row.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN, + disabled: (row) => row.equipmentStatus === EQUIPMENT_STATUS.RETURNED, + }); + } + + return buttons; +}; + +// 澶勭悊鑷畾涔夋寜閽偣鍑讳簨浠� +const handleCustomButtonClick = ({ buttonName, row }) => { + switch (buttonName) { + case 'return': + handleReturn(row); + break; + // 鍙互鍦ㄨ繖閲屾坊鍔犳洿澶氳嚜瀹氫箟鎸夐挳鐨勫鐞嗛�昏緫 + default: + console.warn(`鏈鐞嗙殑鑷畾涔夋寜閽�: ${buttonName}`); + } +}; +const handleReturn = (row) => { + // 妫�鏌ヨ澶囩姸鎬� + if (row.equipmentStatus === EQUIPMENT_STATUS.RETURNED) { + ElMessage.warning('璇ヨ澶囧凡褰掕繕瀹屾垚锛屾棤闇�鍐嶆褰掕繕'); + return; + } + + if (row.equipmentStatus !== EQUIPMENT_STATUS.USING && row.equipmentStatus !== EQUIPMENT_STATUS.PARTIAL_RETURN) { + ElMessage.warning('璇ヨ澶囧綋鍓嶇姸鎬佷笉鏀寔褰掕繕鎿嶄綔'); + return; + } + + form.value = { ...row }; + addOrEdit.value = "return"; // 璁剧疆涓哄綊杩樻ā寮� + title.value = `褰掕繕璁惧 - ${row.equipmentName || ''}`; + copyForm.value = { ...row }; + equipmentRequisitionDialog.value = true; + console.log("褰掕繕璁惧锛�", row); +}; // 浜嬩欢澶勭悊鍑芥暟 const handleTabClick = (tab) => { activeTab.value = tab.props.name; @@ -247,18 +386,20 @@ }; const resetState = () => { - form.value = {}; + form.value = { + consumables: false, + }; addOrEdit.value = "add"; loading.value = true; tableData.value = []; pageNum.value = 1; - pageSizes.value = 10; + pageSize.value = 10; total.value = 0; - queryParams.searchAll = ""; + queryParams.value.searchAll = ""; }; const resetQuery = () => { - queryParams.searchAll = ""; + queryParams.value.searchAll = ""; pageNum.value = 1; getList(); }; @@ -270,7 +411,9 @@ const handleAdd = () => { addOrEdit.value = "add"; - form.value = {}; + form.value = { + consumables: false, + }; title.value = `鏂板${currentTabConfig.value.label}`; // 閫氱敤鐨� copyForm.value = {}; @@ -297,14 +440,70 @@ } }; -const handleView = (row) => { +const handleView = async (row) => { + // 閽堝璁惧绠$悊椤甸潰锛氱洿鎺ユ墦寮�缂栬緫寮圭獥鏌ョ湅 + if (activeTab.value === 'management') { + form.value = { ...row }; + addOrEdit.value = "viewRow"; + title.value = `鏌ョ湅${currentTabConfig.value.label}`; + copyForm.value = { ...row }; + manaDialog.value = true; + return; + } + + // 閽堝璁惧棰嗙敤椤甸潰锛氭墦寮�璇︽儏璁板綍琛ㄦ牸 + if (activeTab.value === 'equipmentRequisition') { + try { + dialogTableTitle.value = `${row.equipmentName || '璁惧'} - 鎿嶄綔璁板綍璇︽儏`; + + // 鏄剧ず鍔犺浇鐘舵�� + dialogTableVisible.value = true; + dialogTableData.value = []; + + // 璋冪敤璇︽儏鎺ュ彛鑾峰彇鏁版嵁 + const { data, code } = await getUsageDetailList(row.id); + if (code === 200 && data) { + // 澶勭悊鏁扮粍鏁版嵁锛岀洿鎺ユ樉绀烘搷浣滆褰曞垪琛� + if (Array.isArray(data)) { + dialogTableData.value = data; + dialogTableColumns.value = [ + { prop: 'equipmentNo', label: '璁惧缂栧彿', minWidth: 100 }, + { prop: 'equipmentName', label: '璁惧鍚嶇О', minWidth: 120 }, + { prop: 'specification', label: '瑙勬牸鍨嬪彿', minWidth: 100 }, + { + prop: 'operationType', + label: '鎿嶄綔绫诲瀷', + minWidth: 80, + formatter: (row) => row.operationType === 1 ? '棰嗙敤' : '褰掕繕' + }, + { prop: 'quantity', label: '鎿嶄綔鏁伴噺', minWidth: 80 }, + { prop: 'operator', label: '鎿嶄綔浜�', minWidth: 80 }, + { prop: 'remark', label: '澶囨敞', minWidth: 150, showOverflowTooltip: true }, + { prop: 'createTime', label: '鎿嶄綔鏃堕棿', minWidth: 150 } + ]; + } else { + ElMessage.warning('鏆傛棤鎿嶄綔璁板綍'); + } + } else { + ElMessage.error('鑾峰彇璇︽儏鏁版嵁澶辫触'); + dialogTableVisible.value = false; + } + + } catch (error) { + console.error('鑾峰彇璇︽儏澶辫触:', error); + ElMessage.error('鑾峰彇璇︽儏鏁版嵁澶辫触'); + dialogTableVisible.value = false; + } + return; + } + + // 鍏朵粬椤甸潰鐨勯粯璁ゅ鐞� form.value = { ...row }; addOrEdit.value = "viewRow"; title.value = `鏌ョ湅${currentTabConfig.value.label}`; copyForm.value = { ...row }; - if (activeTab.value === "equipmentRequisition") { - equipmentRequisitionDialog.value = true; - } else if (activeTab.value === "usageRecord") { + + if (activeTab.value === "usageRecord") { usageRecordDialog.value = true; } else { manaDialog.value = true; @@ -313,7 +512,7 @@ const handPagination = (val) => { pageNum.value = val.page; - pageSizes.value = val.limit; + pageSize.value = val.limit; getList(); }; @@ -321,14 +520,13 @@ selectedRows.value = selection; }; - // 鍒犻櫎澶勭悊 const { handleDeleteBatch: handleDelete } = useDelete({ deleteApi: () => currentTabConfig.value.deleteApi, selectedRows: selectedRows, getList: () => getList(), - tableData: tableData, - total: total, + tableData, + total, confirmText: "纭鍒犻櫎閫変腑鐨勬暟鎹悧锛�", successText: "鍒犻櫎鎴愬姛", }); @@ -336,7 +534,9 @@ // 鑾峰彇璁惧鏈�澶у彲棰嗙敤鏁伴噺 const getMaxQuantity = () => { if (form.value.equipmentId) { - const equipment = tableData.value.find(item => item.equipmentId === form.value.equipmentId); + const equipment = tableData.value.find( + (item) => item.equipmentId === form.value.equipmentId + ); return equipment ? equipment.quantity : null; } return null; @@ -344,9 +544,19 @@ // 璁惧棰嗙敤寮圭獥鎻愪氦澶勭悊 const onEquipmentRequisitionSubmit = (formData) => { - ElMessage.success('璁惧棰嗙敤鎴愬姛'); + if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) { + ElMessage.success("璁惧宸插畬鍏ㄥ綊杩�"); + } else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) { + } else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) { + ElMessage.success("璁惧棰嗙敤鎴愬姛"); + } else { + ElMessage.success("鎿嶄綔鎴愬姛"); + } equipmentRequisitionDialog.value = false; - getList(); + nextTick(() => { + form.value = {}; + getList(); + }); }; // 鏁版嵁鑾峰彇 @@ -355,14 +565,14 @@ loading.value = true; const apiParams = { current: pageNum.value, - pageSize: pageSizes.value, - searchAll: queryParams.searchAll, + pageSize: pageSize.value, + searchAll: queryParams.value.searchAll, }; const { data, code } = await currentTabConfig.value.api(apiParams); if (code !== 200) { - ElMessage.error("鑾峰彇鏁版嵁澶辫触锛�" + (data?.msg || "鏈煡閿欒")); + // ElMessage.error("鑾峰彇鏁版嵁澶辫触锛�" + (data?.msg || "鏈煡閿欒")); return; } @@ -401,7 +611,7 @@ flex-wrap: wrap; gap: 10px; } -.app-container{ +.app-container { padding: 18px !important; } /* 鍝嶅簲寮忚〃鏍� */ @@ -432,4 +642,33 @@ .main-container { background: red !important; } + +/* 璁惧鐘舵�佹牱寮� */ +.status-using { + color: #409eff; + font-weight: 500; +} + +.status-partial-return { + color: #e6a23c; + font-weight: 500; +} + +.status-returned { + color: #67c23a; + font-weight: 500; +} + +.status-unknown { + color: #909399; + font-weight: 500; +} + +/* 鐘舵�佹爣绛炬牱寮� */ +:deep(.el-table .cell .status-tag) { + font-size: 12px; + padding: 2px 6px; + border-radius: 4px; + white-space: nowrap; +} </style> -- Gitblit v1.9.3