feat(mes): 添加角色选择器组件,优化安灯呼叫配置

pull/871/MERGE
YunaiV 2026-03-17 13:24:02 +08:00
parent 0571b98552
commit 8774ea3dad
2 changed files with 104 additions and 2 deletions

View File

@ -1,6 +1,6 @@
<!-- 安灯呼叫配置弹窗内联编辑表格 --> <!-- 安灯呼叫配置弹窗内联编辑表格 -->
<template> <template>
<Dialog title="安灯呼叫设置" v-model="dialogVisible" width="900px"> <Dialog title="安灯呼叫设置" v-model="dialogVisible" width="1050px">
<div class="mb-10px"> <div class="mb-10px">
<el-button <el-button
type="primary" type="primary"
@ -37,12 +37,23 @@
<dict-tag v-else :type="DICT_TYPE.MES_PRO_ANDON_LEVEL" :value="scope.row.level" /> <dict-tag v-else :type="DICT_TYPE.MES_PRO_ANDON_LEVEL" :value="scope.row.level" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="处置人" align="center" width="200"> <el-table-column label="处置角色" align="center" width="160">
<template #default="scope">
<RoleSelect
v-if="scope.row.editing"
v-model="scope.row.handlerRoleId"
placeholder="请选择角色"
/>
<RoleSelect v-else :model-value="scope.row.handlerRoleId" disabled />
</template>
</el-table-column>
<el-table-column label="处置人" align="center" width="180">
<template #default="scope"> <template #default="scope">
<UserSelect <UserSelect
v-if="scope.row.editing" v-if="scope.row.editing"
v-model="scope.row.handlerUserId" v-model="scope.row.handlerUserId"
placeholder="请选择处置人" placeholder="请选择处置人"
clearable
/> />
<span v-else>{{ scope.row.handlerUserNickname || scope.row.handlerUserId || '-' }}</span> <span v-else>{{ scope.row.handlerUserNickname || scope.row.handlerUserId || '-' }}</span>
</template> </template>
@ -94,6 +105,7 @@ import { ProAndonConfigApi, ProAndonConfigVO } from '@/api/mes/pro/andon/config'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { MesProAndonLevelEnum } from '@/views/mes/utils/constants' import { MesProAndonLevelEnum } from '@/views/mes/utils/constants'
import UserSelect from '@/views/system/user/components/UserSelect.vue' import UserSelect from '@/views/system/user/components/UserSelect.vue'
import RoleSelect from '@/views/system/role/components/RoleSelect.vue'
/** 安灯呼叫配置弹窗(内联编辑表格) */ /** 安灯呼叫配置弹窗(内联编辑表格) */
defineOptions({ name: 'AndonConfigDialog' }) defineOptions({ name: 'AndonConfigDialog' })
@ -153,6 +165,10 @@ const handleSave = async (row: any) => {
message.warning('级别不能为空') message.warning('级别不能为空')
return return
} }
if (!row.handlerUserId && !row.handlerRoleId) {
message.warning('处置角色和处置人至少填一个')
return
}
try { try {
if (row.isNew) { if (row.isNew) {
await ProAndonConfigApi.createAndonConfig(row) await ProAndonConfigApi.createAndonConfig(row)

View File

@ -0,0 +1,86 @@
<!-- 系统角色选择器纯下拉前端过滤支持 name / code -->
<template>
<el-select
v-model="selectValue"
:placeholder="placeholder"
:disabled="disabled"
:clearable="clearable"
filterable
:filter-method="handleFilter"
class="!w-1/1"
@change="handleChange"
>
<el-option
v-for="item in filteredList"
:key="item.id"
:label="item.name"
:value="item.id"
>
<div class="flex items-center gap-8px">
<span>{{ item.name }}</span>
<el-tag v-if="item.code" size="small" type="info" class="ml-4px">
{{ item.code }}
</el-tag>
</div>
</el-option>
</el-select>
</template>
<script setup lang="ts">
import { getSimpleRoleList, RoleVO } from '@/api/system/role'
defineOptions({ name: 'RoleSelect' })
const props = withDefaults(
defineProps<{
modelValue?: number
disabled?: boolean
clearable?: boolean
placeholder?: string
}>(),
{
disabled: false,
clearable: true,
placeholder: '请选择角色'
}
)
const emit = defineEmits<{
'update:modelValue': [value: number | undefined]
change: [item: RoleVO | undefined]
}>()
const allList = ref<RoleVO[]>([])
const filteredList = ref<RoleVO[]>([])
const selectValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
/** 前端过滤name + code */
const handleFilter = (query: string) => {
if (!query) {
filteredList.value = allList.value
return
}
const keyword = query.toLowerCase()
filteredList.value = allList.value.filter(
(item) =>
item.name?.toLowerCase().includes(keyword) ||
item.code?.toLowerCase().includes(keyword)
)
}
/** 选中变化 */
const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val)
emit('change', item)
}
/** 加载角色列表 */
onMounted(async () => {
allList.value = await getSimpleRoleList()
filteredList.value = allList.value
})
</script>