穿梭框状态色点改用内联style,修复scoped样式无法穿透el-transfer问题

main
haoliang 1 week ago
parent 5493277b8b
commit 6b74ef2bd1

@ -54,8 +54,8 @@
filter-placeholder="搜索机床"
>
<template #default="{ option }">
<span :class="['machine-transfer-item', getStatusClass(option)]">
<span class="status-dot"></span>
<span>
<span :style="dotStyle(option)"></span>
{{ option.name }}
<template v-if="option.deviceCode"> ({{ option.deviceCode }})</template>
<template v-if="option.workshopName"> - {{ option.workshopName }}</template>
@ -116,7 +116,11 @@ async function handleSubmit(){submitting.value=true;try{const ok = await (worker
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 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 dotStyle(m: MachineItem): Record<string, string> {
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 }
}
function getStatusClass(m: MachineItem): string {
if (!m.isEnabled) return 'status-disabled'
if (m.isOnline) return 'status-online'

Loading…
Cancel
Save