| | |
| | | <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.sparePartsName" placeholder="请输入备件名称" clearable style="width: 240px" /> |
| | | </el-form-item> |
| | | <el-form-item label="来源"> |
| | | <el-select v-model="usageQuery.sourceType" placeholder="请选择" clearable style="width: 200px"> |
| | | <el-option label="维修" :value="0" /> |
| | | <el-option label="保养" :value="1" /> |
| | | </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> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onMounted, reactive, watch } from 'vue'; |
| | | import { ref, computed, onMounted, reactive } from 'vue'; |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | 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({ |
| | | sparePartsName: "", |
| | | sourceType: "", |
| | | }); |
| | | 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: "sparePartsName" }, |
| | | { label: "领用数量", prop: "quantity" }, |
| | | { label: "操作人", prop: "operator" }, |
| | | { label: "时间", prop: "createTime" }, |
| | | ]); |
| | | |
| | | const handleTabChange = async (name) => { |
| | | if (name === "usage") { |
| | | usagePagination.current = 1; |
| | | await fetchUsageData(); |
| | | } |
| | | }; |
| | | const columns = ref([ |
| | | { |
| | | label: "设备名称", |
| | |
| | | } |
| | | } |
| | | |
| | | const fetchUsageData = async () => { |
| | | usageLoading.value = true; |
| | | try { |
| | | const res = await getSparePartsUsagePage({ |
| | | current: usagePagination.current, |
| | | size: usagePagination.size, |
| | | sparePartsName: usageQuery.sparePartsName || undefined, |
| | | sourceType: usageQuery.sourceType || 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.sourceText === "" ? "-" : r.sourceText, |
| | | })); |
| | | } else { |
| | | usagePagination.total = 0; |
| | | usageTableData.value = []; |
| | | } |
| | | } finally { |
| | | usageLoading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const handleUsageQuery = () => { |
| | | usagePagination.current = 1; |
| | | fetchUsageData(); |
| | | }; |
| | | const resetUsageQuery = () => { |
| | | usageQuery.sparePartsName = ""; |
| | | usageQuery.sourceType = ""; |
| | | usagePagination.current = 1; |
| | | fetchUsageData(); |
| | | }; |
| | | const handleUsagePageChange = (obj) => { |
| | | usagePagination.current = obj.page; |
| | | usagePagination.size = obj.limit; |
| | | fetchUsageData(); |
| | | }; |
| | | |
| | | // 查询 |
| | | const handleQuery = () => { |
| | | pagination.current = 1; |