<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="新增工序"
|
width="400"
|
@close="closeModal"
|
>
|
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
|
<el-form-item
|
label="工序名称："
|
prop="name"
|
:rules="[
|
{
|
required: true,
|
message: '请输入工序名称',
|
},
|
{
|
max: 100,
|
message: '最多100个字符',
|
}
|
]">
|
<el-input v-model="formState.name" placeholder="请输入工序名称" />
|
</el-form-item>
|
<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="工序类型"
|
prop="type"
|
:rules="[
|
{
|
required: true,
|
message: '请选择工序类型',
|
}
|
]"
|
>
|
<el-select v-model="formState.type" placeholder="请选择工序类型">
|
<el-option label="计时" :value="0" />
|
<el-option label="计件" :value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工资定额" prop="salaryQuota">
|
<el-input v-model="formState.salaryQuota" type="number" :step="0.001">
|
<template #append>元</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="是否质检" prop="isQuality">
|
<el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formState.remark" type="textarea" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
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: {
|
type: Boolean,
|
required: true,
|
},
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
name: '',
|
type: undefined,
|
remark: '',
|
salaryQuota: '',
|
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;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
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;
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
add(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
|
onBeforeUnmount(() => {
|
unbindDeviceDropdownScroll();
|
if (remoteTimer) clearTimeout(remoteTimer);
|
});
|
</script>
|
