| | |
| | | <template> |
| | | <div class="spare-part-category"> |
| | | <el-tabs v-model="activeTab" @tab-change="handleTabChange"> |
| | | <el-tab-pane label="å¤ä»¶å表" name="list"> |
| | | <div class="search_form"> |
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item label="å¤ä»¶åç§°"> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </el-tab-pane> |
| | | |
| | | <el-tab-pane label="å¤ä»¶é¢ç¨è®°å½" name="usage"> |
| | | <div class="search_form"> |
| | | <el-form :inline="true" :model="usageQuery" class="search-form"> |
| | | <el-form-item label="å¤ä»¶åç§°"> |
| | | <el-input |
| | | v-model="usageQuery.sparePartName" |
| | | placeholder="请è¾å
¥å¤ä»¶åç§°" |
| | | clearable |
| | | style="width: 240px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æ¥æº"> |
| | | <el-select v-model="usageQuery.source" placeholder="è¯·éæ©" clearable style="width: 200px"> |
| | | <el-option label="ç»´ä¿®" value="ç»´ä¿®" /> |
| | | <el-option label="ä¿å
»" value="ä¿å
»" /> |
| | | <el-option label="æå·¥" value="æå·¥" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleUsageQuery">æ¥è¯¢</el-button> |
| | | <el-button @click="resetUsageQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <PIMTable |
| | | rowKey="rowKey" |
| | | :column="usageColumns" |
| | | :tableData="usageTableData" |
| | | :tableLoading="usageLoading" |
| | | :page="usagePagination" |
| | | :isShowPagination="true" |
| | | @pagination="handleUsagePageChange" |
| | | /> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { getSparePartsList, addSparePart, editSparePart, delSparePart } from "@/api/equipmentManagement/spareParts"; |
| | | import { getDeviceLedger } from "@/api/equipmentManagement/ledger"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | import { getSparePartsUsagePage } from "@/api/equipmentManagement/sparePartsUsage"; |
| | | |
| | | // å è½½ç¶æ |
| | | const loading = ref(false); |
| | | const formLoading = ref(false); |
| | | const activeTab = ref("list"); |
| | | // å¯¹è¯æ¡æ¾ç¤ºç¶æ |
| | | const dialogVisible = ref(false); |
| | | // ç¼è¾ ID |
| | |
| | | size: 10, |
| | | total: 0 |
| | | }); |
| | | |
| | | // å¤ä»¶é¢ç¨è®°å½ |
| | | const usageLoading = ref(false); |
| | | const usageQuery = reactive({ |
| | | sparePartName: "", |
| | | source: "", |
| | | }); |
| | | const usagePagination = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | total: 0, |
| | | }); |
| | | const usageTableData = ref([]); |
| | | const usageColumns = ref([ |
| | | { label: "æ¥æº", prop: "sourceText" }, |
| | | { label: "åæ®/è®°å½ID", prop: "sourceId" }, |
| | | { label: "设å¤åç§°", prop: "deviceName" }, |
| | | { label: "å¤ä»¶åç§°", prop: "sparePartName" }, |
| | | { label: "é¢ç¨æ°é", prop: "qty" }, |
| | | { label: "æä½äºº", prop: "operator" }, |
| | | { label: "æ¶é´", prop: "useTime" }, |
| | | ]); |
| | | |
| | | const handleTabChange = async (name) => { |
| | | if (name === "usage") { |
| | | usagePagination.current = 1; |
| | | await fetchUsageData(); |
| | | } |
| | | }; |
| | | // è¡¨åæ°æ® |
| | | const form = reactive({ |
| | | id:'', |
| | |
| | | } |
| | | } |
| | | |
| | | const fetchUsageData = async () => { |
| | | usageLoading.value = true; |
| | | try { |
| | | const res = await getSparePartsUsagePage({ |
| | | current: usagePagination.current, |
| | | size: usagePagination.size, |
| | | sparePartName: usageQuery.sparePartName || undefined, |
| | | source: usageQuery.source || undefined, |
| | | }); |
| | | if (res?.code === 200) { |
| | | const records = res?.data?.records || []; |
| | | usagePagination.total = res?.data?.total || 0; |
| | | usageTableData.value = records.map((r, idx) => ({ |
| | | rowKey: r.id ?? `${usagePagination.current}-${idx}`, |
| | | ...r, |
| | | sourceText: |
| | | r.source === "ç»´ä¿®" ? "ç»´ä¿®" : |
| | | r.source === "ä¿å
»" ? "ä¿å
»" : |
| | | r.source === "æå·¥" ? "æå·¥" : |
| | | (r.source || "-"), |
| | | })); |
| | | } else { |
| | | usagePagination.total = 0; |
| | | usageTableData.value = []; |
| | | } |
| | | } finally { |
| | | usageLoading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const handleUsageQuery = () => { |
| | | usagePagination.current = 1; |
| | | fetchUsageData(); |
| | | }; |
| | | const resetUsageQuery = () => { |
| | | usageQuery.sparePartName = ""; |
| | | usageQuery.source = ""; |
| | | usagePagination.current = 1; |
| | | fetchUsageData(); |
| | | }; |
| | | const handleUsagePageChange = (obj) => { |
| | | usagePagination.current = obj.page; |
| | | usagePagination.size = obj.limit; |
| | | fetchUsageData(); |
| | | }; |
| | | |
| | | // æ¥è¯¢ |
| | | const handleQuery = () => { |
| | | pagination.current = 1; |