From 2e5e296c5ff250c0325aa28782f7732544b01f22 Mon Sep 17 00:00:00 2001
From: ZN <zhang_12370@163.com>
Date: 星期三, 18 三月 2026 09:43:23 +0800
Subject: [PATCH] feat(productionProcess): 添加工序机台选择功能
---
src/views/productionManagement/productionProcess/New.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 161 insertions(+), 4 deletions(-)
diff --git a/src/views/productionManagement/productionProcess/New.vue b/src/views/productionManagement/productionProcess/New.vue
index a5f00aa..4c96dbf 100644
--- a/src/views/productionManagement/productionProcess/New.vue
+++ b/src/views/productionManagement/productionProcess/New.vue
@@ -20,10 +20,40 @@
message: '鏈�澶�100涓瓧绗�',
}
]">
- <el-input v-model="formState.name" />
+ <el-input v-model="formState.name" placeholder="璇疯緭鍏ュ伐搴忓悕绉�" />
</el-form-item>
- <el-form-item label="宸ュ簭缂栧彿" prop="no">
- <el-input v-model="formState.no" />
+ <el-form-item
+ label="宸ュ簭鏈哄彴"
+ prop="deviceId"
+ :rules="[
+ {
+ required: true,
+ message: '璇烽�夋嫨宸ュ簭绫诲瀷',
+ }
+ ]"
+ >
+ <el-select
+ v-model="formState.deviceId"
+ placeholder="璇烽�夋嫨宸ュ簭鏈哄彴"
+ filterable
+ remote
+ clearable
+ reserve-keyword
+ :remote-method="handleDeviceRemoteSearch"
+ :loading="deviceLoading"
+ @clear="handleDeviceClear"
+ @change="handleDeviceChange"
+ @visible-change="handleDeviceDropdownVisible"
+ popper-class="device-select-popper"
+ >
+ <el-option v-for="item in equipmentList" :key="item.id" :label="item.deviceName" :value="item.id" />
+ <el-option
+ v-if="equipmentList.length > 0 && deviceHasMore"
+ :value="__deviceLoadMoreSentinel"
+ label="鍔犺浇鏇村鈥�"
+ disabled
+ />
+ </el-select>
</el-form-item>
<el-form-item
label="宸ュ簭绫诲瀷"
@@ -63,8 +93,9 @@
</template>
<script setup>
-import { ref, computed, getCurrentInstance } from "vue";
+import { ref, computed, onMounted, getCurrentInstance, reactive, nextTick, onBeforeUnmount } from "vue";
import {add} from "@/api/productionManagement/productionProcess.js";
+import {getLedgerPage} from "@/api/equipmentManagement/ledger.js";
const props = defineProps({
visible: {
@@ -84,6 +115,21 @@
isQuality: false,
});
+// 鍒嗛〉鏌ヨ鍙傛暟
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+});
+
+onMounted(() => {
+ resetDeviceOptions();
+});
+
+const handleDeviceChange = (val) => {
+ formState.value.deviceName = equipmentList.value.find(item => item.id === val)?.deviceName || '';
+};
+
const isShow = computed({
get() {
return props.visible;
@@ -94,6 +140,112 @@
});
let { proxy } = getCurrentInstance()
+
+
+const equipmentList = ref([]);
+const deviceLoading = ref(false);
+const deviceQuery = ref("");
+const deviceScrollWrap = ref(null);
+const __deviceLoadMoreSentinel = "__deviceLoadMoreSentinel";
+
+const deviceHasMore = computed(() => {
+ const total = Number(page.total ?? 0);
+ if (!total) {
+ return false;
+ }
+ return equipmentList.value.length < total;
+});
+
+// 鑾峰彇璁惧鍒楄〃锛堝垎椤垫煡璇級
+const getLedgerPageS = async ({ reset = false } = {}) => {
+ if (deviceLoading.value) return;
+ deviceLoading.value = true;
+ try {
+ const res = await getLedgerPage({
+ current: page.current,
+ size: page.size,
+ deviceName: deviceQuery.value ? deviceQuery.value : undefined,
+ });
+ const data = res?.data || {};
+ const records = Array.isArray(data.records) ? data.records : [];
+
+ page.total = Number(data.total ?? page.total ?? 0);
+ page.current = Number(data.current ?? page.current);
+ page.size = Number(data.size ?? page.size);
+
+ equipmentList.value = reset ? records : [...equipmentList.value, ...records];
+ } finally {
+ deviceLoading.value = false;
+ }
+};
+
+const resetDeviceOptions = async () => {
+ page.current = 1;
+ page.size = 10;
+ page.total = 0;
+ equipmentList.value = [];
+ await getLedgerPageS({ reset: true });
+};
+
+const loadMoreDevices = async () => {
+ if (deviceLoading.value) return;
+ if (!deviceHasMore.value) return;
+ page.current += 1;
+ await getLedgerPageS();
+};
+
+let remoteTimer = null;
+const handleDeviceRemoteSearch = (query) => {
+ const nextQuery = (query ?? "").trim();
+ deviceQuery.value = nextQuery;
+ if (remoteTimer) clearTimeout(remoteTimer);
+ remoteTimer = setTimeout(() => {
+ resetDeviceOptions();
+ }, 300);
+};
+
+const handleDeviceClear = () => {
+ deviceQuery.value = "";
+ resetDeviceOptions();
+};
+
+const onDeviceDropdownScroll = (e) => {
+ const el = e.target;
+ if (!el) return;
+ if (el.scrollHeight - el.scrollTop - el.clientHeight <= 20) {
+ loadMoreDevices();
+ }
+};
+
+const unbindDeviceDropdownScroll = () => {
+ if (deviceScrollWrap.value) {
+ deviceScrollWrap.value.removeEventListener("scroll", onDeviceDropdownScroll);
+ deviceScrollWrap.value = null;
+ }
+};
+
+const bindDeviceDropdownScroll = () => {
+ unbindDeviceDropdownScroll();
+ const wrap =
+ document.querySelector(".device-select-popper .el-scrollbar__wrap") ||
+ document.querySelector(".device-select-popper .el-select-dropdown__wrap");
+ if (wrap) {
+ deviceScrollWrap.value = wrap;
+ wrap.addEventListener("scroll", onDeviceDropdownScroll);
+ }
+};
+
+const handleDeviceDropdownVisible = async (visible) => {
+ if (!visible) {
+ unbindDeviceDropdownScroll();
+ return;
+ }
+ if (equipmentList.value.length === 0) {
+ await resetDeviceOptions();
+ }
+ await nextTick();
+ bindDeviceDropdownScroll();
+};
const closeModal = () => {
isShow.value = false;
@@ -118,4 +270,9 @@
handleSubmit,
isShow,
});
+
+onBeforeUnmount(() => {
+ unbindDeviceDropdownScroll();
+ if (remoteTimer) clearTimeout(remoteTimer);
+});
</script>
--
Gitblit v1.9.3