From c0ac58d8d1e836787cc73eca9bd02411229836fb Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 01 四月 2026 17:00:46 +0800
Subject: [PATCH] fix: 备件管理可以跟设备维修、设备保养做联动
---
src/pages/equipmentManagement/repair/maintain.vue | 302 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 298 insertions(+), 4 deletions(-)
diff --git a/src/pages/equipmentManagement/repair/maintain.vue b/src/pages/equipmentManagement/repair/maintain.vue
index 67190f5..15bf464 100644
--- a/src/pages/equipmentManagement/repair/maintain.vue
+++ b/src/pages/equipmentManagement/repair/maintain.vue
@@ -57,6 +57,50 @@
@click="showDatePicker = true"></u-icon>
</template>
</u-form-item>
+ <u-form-item label="璁惧澶囦欢"
+ prop="sparePartsIds"
+ border-bottom>
+ <view class="spare-parts-container"
+ @click="showSparePart = true">
+ <view v-if="selectedSpareParts.length > 0"
+ class="spare-parts-list">
+ <view v-for="(item, index) in selectedSpareParts"
+ :key="String(item.id)"
+ class="spare-part-tag">
+ <text>{{ item.name }}</text>
+ <u-icon name="close"
+ size="12"
+ color="#fff"
+ @click.stop="removeSparePart(index)" />
+ </view>
+ </view>
+ <text v-else
+ class="placeholder">璇烽�夋嫨璁惧澶囦欢</text>
+ </view>
+ <template #right>
+ <u-icon name="arrow-right"
+ @click.stop="showSparePart = true"></u-icon>
+ </template>
+ </u-form-item>
+
+ <u-form-item v-if="selectedSpareParts.length"
+ label="棰嗙敤鏁伴噺"
+ border-bottom>
+ <view class="spare-qty-list">
+ <view v-for="item in selectedSpareParts"
+ :key="String(item.id)"
+ class="spare-qty-row">
+ <view class="spare-qty-name">
+ <text class="spare-name">{{ item.name }}</text>
+ <text v-if="item.quantity !== null && item.quantity !== undefined"
+ class="spare-stock">锛堝簱瀛橈細{{ item.quantity }}锛�</text>
+ </view>
+ <up-number-box v-model="sparePartQtyMap[item.id]"
+ :min="1"
+ :max="item.quantity !== null && item.quantity !== undefined ? Number(item.quantity) : undefined" />
+ </view>
+ </view>
+ </u-form-item>
</u-cell-group>
<!-- 鎻愪氦鎸夐挳 -->
<view class="footer-btns">
@@ -75,14 +119,43 @@
format="YYYY-MM-DD HH:mm:ss"
@confirm="onDateConfirm"
@cancel="showDatePicker = false" />
+
+ <!-- 璁惧澶囦欢閫夋嫨鍣� -->
+ <up-popup :show="showSparePart"
+ mode="bottom"
+ :closeable="true"
+ @close="showSparePart = false">
+ <view class="spare-part-popup">
+ <view class="popup-header">
+ <text class="popup-title">閫夋嫨璁惧澶囦欢</text>
+ </view>
+ <view class="spare-part-options">
+ <view v-for="(item, index) in sparePartOptions"
+ :key="index"
+ class="spare-part-option"
+ :class="{ selected: isSparePartSelected(item.id) }"
+ @click="toggleSparePartSelection(item)">
+ <text class="spare-part-option-text">{{ item.name }}</text>
+ <u-icon v-if="isSparePartSelected(item.id)"
+ name="checkmark"
+ color="#2c7be5" />
+ </view>
+ </view>
+ <up-button type="primary"
+ size="small"
+ :customStyle="{ borderRadius: '6px', padding: '4px 12px' }"
+ @click="confirmSparePartSelection">纭畾</up-button>
+ </view>
+ </up-popup>
</view>
</template>
<script setup>
- import { ref, onMounted } from "vue";
+ import { ref, onMounted, reactive, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import PageHeader from "@/components/PageHeader.vue";
import { addMaintain } from "@/api/equipmentManagement/repair";
+ import { getSparePartsList } from "@/api/equipmentManagement/spareParts";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
@@ -97,6 +170,11 @@
const loading = ref(false);
const showDatePicker = ref(false);
const pickerDateValue = ref(Date.now()); // 浣跨敤鏃堕棿鎴�
+ const showSparePart = ref(false);
+ const sparePartOptions = ref([]);
+ const selectedSpareParts = ref([]);
+ const tempSelectedSpareParts = ref([]);
+ const sparePartQtyMap = reactive({});
// 琛ㄥ崟楠岃瘉瑙勫垯
const formRules = {
@@ -131,6 +209,8 @@
maintenanceName: userStore.nickName || "", // 榛樿浣跨敤褰撳墠鐢ㄦ埛鏄电О
maintenanceResult: undefined, // 缁翠慨缁撴灉
maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 缁翠慨鏃ユ湡锛堝彧鏄剧ず鏃ユ湡锛�
+ status: "1",
+ sparePartsIds: [],
});
// 鑷畾涔塻howToast鍑芥暟
@@ -147,7 +227,12 @@
maintenanceName: userStore.nickName || "",
maintenanceResult: undefined,
maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+ status: "1",
+ sparePartsIds: [],
};
+ selectedSpareParts.value = [];
+ tempSelectedSpareParts.value = [];
+ Object.keys(sparePartQtyMap).forEach((k) => delete sparePartQtyMap[k]);
};
const resetFormAndValidate = () => {
@@ -179,8 +264,34 @@
return;
}
form.value.status = Number(form.value.status);
- // 鍑嗗鎻愪氦鏁版嵁锛宮aintenanceTime 鍔犱笂褰撳墠鏃跺垎绉�
- const submitData = { ...form.value };
+ // 棰嗙敤鏁伴噺鏍￠獙
+ if (Array.isArray(form.value.sparePartsIds) && form.value.sparePartsIds.length > 0) {
+ for (const partId of form.value.sparePartsIds) {
+ const qty = Number(sparePartQtyMap?.[partId]);
+ if (!Number.isFinite(qty) || qty <= 0) {
+ showToast("璇峰～鍐欏浠堕鐢ㄦ暟閲�");
+ loading.value = false;
+ return;
+ }
+ const part = sparePartOptions.value.find((p) => String(p.id) === String(partId));
+ const stock = part?.quantity;
+ if (stock !== null && stock !== undefined && Number.isFinite(Number(stock))) {
+ if (qty > Number(stock)) {
+ showToast(`澶囦欢銆�${part?.name || ""}銆嶉鐢ㄦ暟閲忎笉鑳借秴杩囧簱瀛橈紙${stock}锛塦);
+ loading.value = false;
+ return;
+ }
+ }
+ }
+ }
+
+ const spareIds = Array.isArray(form.value.sparePartsIds) ? form.value.sparePartsIds : [];
+ const submitData = {
+ ...form.value,
+ sparePartsIds: spareIds.length ? spareIds.join(",") : "",
+ sparePartsQty: spareIds.length ? spareIds.map((pid) => sparePartQtyMap?.[pid] ?? 1).join(",") : "",
+ sparePartsUseList: spareIds.length ? spareIds.map((pid) => ({ id: pid, quantity: sparePartQtyMap?.[pid] ?? 1 })) : [],
+ };
const { code } = await addMaintain({ id: id, ...submitData });
@@ -220,13 +331,71 @@
showDatePicker.value = false;
};
+ const fetchSparePartOptions = async () => {
+ try {
+ const res = await getSparePartsList({ current: 1, size: 1000 });
+ if (res?.code === 200) {
+ sparePartOptions.value = res?.data?.records || [];
+ } else {
+ sparePartOptions.value = [];
+ }
+ } catch (e) {
+ sparePartOptions.value = [];
+ }
+ };
+
+ const isSparePartSelected = (id) => {
+ return tempSelectedSpareParts.value.some((p) => String(p.id) === String(id));
+ };
+
+ const toggleSparePartSelection = (item) => {
+ const idx = tempSelectedSpareParts.value.findIndex((p) => String(p.id) === String(item.id));
+ if (idx >= 0) {
+ tempSelectedSpareParts.value.splice(idx, 1);
+ delete sparePartQtyMap[item.id];
+ } else {
+ tempSelectedSpareParts.value.push({
+ id: item.id,
+ name: item.name,
+ quantity: item.quantity,
+ });
+ if (!Number.isFinite(Number(sparePartQtyMap[item.id]))) {
+ sparePartQtyMap[item.id] = 1;
+ }
+ }
+ };
+
+ const confirmSparePartSelection = () => {
+ selectedSpareParts.value = [...tempSelectedSpareParts.value];
+ form.value.sparePartsIds = selectedSpareParts.value.map((i) => i.id);
+ // 淇濆簳缁欐湭濉殑鏁伴噺璧嬪��
+ selectedSpareParts.value.forEach((p) => {
+ if (!Number.isFinite(Number(sparePartQtyMap[p.id])) || Number(sparePartQtyMap[p.id]) <= 0) {
+ sparePartQtyMap[p.id] = 1;
+ }
+ });
+ showSparePart.value = false;
+ };
+
+ const removeSparePart = (index) => {
+ const removed = selectedSpareParts.value.splice(index, 1)[0];
+ tempSelectedSpareParts.value = [...selectedSpareParts.value];
+ form.value.sparePartsIds = selectedSpareParts.value.map((i) => i.id);
+ if (removed?.id !== null && removed?.id !== undefined) {
+ delete sparePartQtyMap[removed.id];
+ }
+ };
+
// 鍒濆鍖栬〃鍗曟暟鎹�
- const initForm = () => {
+ const initForm = async () => {
form.value.status = "1";
// 璁剧疆鎶ヤ慨浜轰负褰撳墠鐢ㄦ埛鏄电О
form.value.maintenanceName = userStore.nickName || "";
// 璁剧疆褰撳墠鏃ユ湡锛堝彧鍖呭惈骞存湀鏃ワ級
form.value.maintenanceTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+
+ // 鎷夊彇澶囦欢鍒楄〃锛堝榻� PC锛�/spareParts/listPage锛�
+ await fetchSparePartOptions();
};
onShow(() => {
@@ -238,6 +407,22 @@
// 椤甸潰鍔犺浇鏃跺垵濮嬪寲琛ㄥ崟
initForm();
});
+
+ watch(showSparePart, (val) => {
+ if (val) {
+ tempSelectedSpareParts.value = [...selectedSpareParts.value];
+ tempSelectedSpareParts.value.forEach((p) => {
+ if (!Number.isFinite(Number(sparePartQtyMap[p.id])) || Number(sparePartQtyMap[p.id]) <= 0) {
+ sparePartQtyMap[p.id] = 1;
+ }
+ });
+
+ // 鍏滃簳锛氬鏋滆繕娌″姞杞藉浠跺垪琛紝鎵撳紑寮圭獥鏃跺啀鎷変竴娆�
+ if (!Array.isArray(sparePartOptions.value) || sparePartOptions.value.length === 0) {
+ fetchSparePartOptions().catch(() => {});
+ }
+ }
+ });
</script>
<style scoped lang="scss">
@@ -248,6 +433,115 @@
padding-bottom: 5rem;
}
+ .spare-parts-container {
+ width: 100%;
+ min-height: 72rpx;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 12rpx;
+ }
+
+ .spare-parts-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12rpx;
+ }
+
+ .spare-part-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 8rpx;
+ padding: 10rpx 14rpx;
+ background: #2c7be5;
+ border-radius: 999rpx;
+ color: #fff;
+ font-size: 24rpx;
+ }
+
+ .placeholder {
+ color: #c0c4cc;
+ font-size: 28rpx;
+ }
+
+ .spare-qty-list {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 18rpx;
+ padding: 6rpx 0;
+ }
+
+ .spare-qty-row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18rpx;
+ }
+
+ .spare-qty-name {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8rpx;
+ }
+
+ .spare-name {
+ max-width: 420rpx;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #303133;
+ font-size: 28rpx;
+ }
+
+ .spare-stock {
+ color: #909399;
+ font-size: 24rpx;
+ }
+
+ .spare-part-popup {
+ padding: 24rpx;
+ }
+
+ .popup-header {
+ padding-bottom: 12rpx;
+ }
+
+ .popup-title {
+ font-size: 32rpx;
+ font-weight: 600;
+ color: #303133;
+ }
+
+ .spare-part-options {
+ max-height: 60vh;
+ overflow: auto;
+ margin: 16rpx 0 24rpx 0;
+ border-radius: 12rpx;
+ background: #fff;
+ }
+
+ .spare-part-option {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 22rpx 18rpx;
+ border-bottom: 1rpx solid #f2f3f5;
+ }
+
+ .spare-part-option.selected {
+ background: #f3f8ff;
+ }
+
+ .spare-part-option-text {
+ color: #303133;
+ font-size: 28rpx;
+ }
+
.footer-btns {
position: fixed;
left: 0;
--
Gitblit v1.9.3