弹窗加宽900px,穿梭框左侧过滤已绑定其他工人的机床,改为按需加载

main
haoliang 1 week ago
parent f865de2a9a
commit 3166ee94a5

@ -36,7 +36,7 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
/> />
</div> </div>
<el-dialog v-model="dialogVisible" :title="editingId?'编辑工人':'新增工人'" width="700px" destroy-on-close> <el-dialog v-model="dialogVisible" :title="editingId?'编辑工人':'新增工人'" width="900px" destroy-on-close>
<el-form :model="form" :rules="rules" ref="workerForm" label-width="100px"> <el-form :model="form" :rules="rules" ref="workerForm" label-width="100px">
<el-form-item label="工号" prop="code"> <el-form-item label="工号" prop="code">
<el-input v-model="form.code" maxlength="50" @blur="()=>workerForm?.validateField('code')"/> <el-input v-model="form.code" maxlength="50" @blur="()=>workerForm?.validateField('code')"/>
@ -48,7 +48,7 @@
<el-transfer <el-transfer
v-model="form.machineIds" v-model="form.machineIds"
:data="availableMachines" :data="availableMachines"
:titles="['全部机床', '已选择']" :titles="['可绑定机床', '已选择']"
:props="{ key: 'id', label: 'label' }" :props="{ key: 'id', label: 'label' }"
filterable filterable
filter-placeholder="搜索机床" filter-placeholder="搜索机床"
@ -110,35 +110,50 @@ rules.code = [{ validator: validateWorkerCode, trigger: 'blur' }]
function resetQuery(){query.isEnabled=undefined;query.keyword='';loadData()} function resetQuery(){query.isEnabled=undefined;query.keyword='';loadData()}
function goDetail(id:number){router.push((isMock.value?'/mock/worker/':'/worker/')+id)} function goDetail(id:number){router.push((isMock.value?'/mock/worker/':'/worker/')+id)}
async function loadData(){loading.value=true;try{const ps=pagination.value.pageSize;const cp=pagination.value.currentPage;const r: ApiResponse<{ items: Worker[]; total?: number }> = await request.get('/admin/worker',{params:{...query,page:cp,pageSize:ps}});tableData.value=r.data?.items||[];pagination.value.total= r.data?.total ?? (r.data?.items?.length ?? 0)}finally{loading.value=false}} async function loadData(){loading.value=true;try{const ps=pagination.value.pageSize;const cp=pagination.value.currentPage;const r: ApiResponse<{ items: Worker[]; total?: number }> = await request.get('/admin/worker',{params:{...query,page:cp,pageSize:ps}});tableData.value=r.data?.items||[];pagination.value.total= r.data?.total ?? (r.data?.items?.length ?? 0)}finally{loading.value=false}}
function handleAdd(){editingId.value=null;Object.assign(form,{code:'',name:'',machineIds:[]});dialogVisible.value=true} function handleAdd(){editingId.value=null;Object.assign(form,{code:'',name:'',machineIds:[]});loadTransferData();dialogVisible.value=true}
async function handleEdit(row: Worker){ async function handleEdit(row: Worker){
editingId.value=row.id editingId.value=row.id
//
Object.assign(form,{code:row.code,name:row.name,machineIds:[]}) Object.assign(form,{code:row.code,name:row.name,machineIds:[]})
await loadTransferData(row.id)
dialogVisible.value=true dialogVisible.value=true
// ID }
/** 加载穿梭框数据:未绑定的机床 + 当前编辑工人的已绑定机床 */
async function loadTransferData(workerId?: number){
try{ try{
const r: ApiResponse<{ items: Array<{machineId:number}> }> = await request.get(`/admin/worker/${row.id}/machines`) // +
form.machineIds = (r.data?.items ?? []).map(m => m.machineId) const [rAll, rAvail] = await Promise.all([
}catch{/* 获取失败时保持为空 */} request.get('/admin/machine',{params:{pageSize:999}}),
request.get('/admin/worker/available-machines')
])
const allMachines: any[] = (rAll as any).data?.items ?? []
const availIds = new Set(((rAvail as any).data?.items ?? []).map((m: any) => m.id))
//
let ownIds = new Set<number>()
if(workerId){
try{
const rOwn: ApiResponse<{ items: Array<{machineId:number}> }> = await request.get(`/admin/worker/${workerId}/machines`)
const items = rOwn.data?.items ?? []
ownIds = new Set(items.map((m: any) => m.machineId))
form.machineIds = items.map((m: any) => m.machineId)
}catch{}
}
//
availableMachines.value = allMachines
.filter((m: any) => availIds.has(m.id) || ownIds.has(m.id))
.map(m => ({ id: m.id, name: m.name, label: m.name, deviceCode: m.deviceCode, workshopName: m.workshopName, isOnline: m.isOnline, isEnabled: m.isEnabled }))
}catch{/* 接口不可用时保持为空 */}
} }
async function handleSubmit(){submitting.value=true;try{const ok = await (workerForm.value?.validate ? new Promise<boolean>((resolve)=>workerForm.value!.validate((valid:boolean)=>resolve(valid))) : Promise.resolve(true)); if(!ok){return} await request[editingId.value?'put':'post'](editingId.value?`/admin/worker/${editingId.value}`:'/admin/worker',{...form});ElMessage.success('保存成功');dialogVisible.value=false;loadData()}finally{submitting.value=false}} async function handleSubmit(){submitting.value=true;try{const ok = await (workerForm.value?.validate ? new Promise<boolean>((resolve)=>workerForm.value!.validate((valid:boolean)=>resolve(valid))) : Promise.resolve(true)); if(!ok){return} await request[editingId.value?'put':'post'](editingId.value?`/admin/worker/${editingId.value}`:'/admin/worker',{...form});ElMessage.success('保存成功');dialogVisible.value=false;loadData()}finally{submitting.value=false}}
async function handleDelete(row:any){await ElMessageBox.confirm('确定删除【'+row.name+'】?此操作不可恢复。','提示',{type:'warning'});await request.delete(`/admin/worker/${row.id}`);ElMessage.success('已删除');loadData()} async function handleDelete(row:any){await ElMessageBox.confirm('确定删除【'+row.name+'】?此操作不可恢复。','提示',{type:'warning'});await request.delete(`/admin/worker/${row.id}`);ElMessage.success('已删除');loadData()}
async function batchStatus(isEnabled:number){await ElMessageBox.confirm('确定对选中的'+selectedRows.value.length+'项操作?','提示',{type:'warning'});for(const id of selectedRows.value.map((r:any)=>r.id)){await request.put(`/admin/worker/${id}/toggle`,{isEnabled})};ElMessage.success('操作成功');loadData()} async function batchStatus(isEnabled:number){await ElMessageBox.confirm('确定对选中的'+selectedRows.value.length+'项操作?','提示',{type:'warning'});for(const id of selectedRows.value.map((r:any)=>r.id)){await request.put(`/admin/worker/${id}/toggle`,{isEnabled})};ElMessage.success('操作成功');loadData()}
async function loadDrops(){try{const r: ApiResponse<{ items: MachineItem[] }> = await request.get('/admin/machine',{params:{pageSize:999}}); availableMachines.value = (r.data?.items ?? []).map(m => ({ id: m.id, name: m.name, label: m.name, deviceCode: m.deviceCode, workshopName: m.workshopName, isOnline: m.isOnline, isEnabled: m.isEnabled }))}catch{/* 接口不可用时保持为空,不影响其他功能 */}} function handlePageChange(page:number){pagination.value.currentPage=page;loadData()}
function handleSizeChange(size:number){pagination.value.pageSize=size;pagination.value.currentPage=1;loadData()}
/** 根据机床在线/启用状态返回色点内联样式 */ /** 根据机床在线/启用状态返回色点内联样式 */
function dotStyle(m: MachineItem): Record<string, string> { function dotStyle(m: MachineItem): Record<string, string> {
const color = !m.isEnabled ? '#f56c6c' : m.isOnline ? '#67c23a' : '#c0c4cc' const color = !m.isEnabled ? '#f56c6c' : m.isOnline ? '#67c23a' : '#c0c4cc'
return { display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '6px', verticalAlign: 'middle', backgroundColor: color } return { display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '6px', verticalAlign: 'middle', backgroundColor: color }
} }
function getStatusClass(m: MachineItem): string { onMounted(()=>{loadData()})
if (!m.isEnabled) return 'status-disabled'
if (m.isOnline) return 'status-online'
return 'status-offline'
}
function handlePageChange(page:number){pagination.value.currentPage=page;loadData()}
function handleSizeChange(size:number){pagination.value.pageSize=size;pagination.value.currentPage=1;loadData()}
onMounted(()=>{loadData();loadDrops()})
</script> </script>
<style scoped> <style scoped>
/* 穿梭框状态色点 */ /* 穿梭框状态色点 */

Loading…
Cancel
Save