linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

厂区结构增加设备弹窗

Browse Source
pull/3/head
liutao 2 weeks ago
parent 974cf1b3dd
commit 88874df91e
2 changed files with 217 additions and 16 deletions
Show Stats Download Patch File Download Diff File

3
src/api/iot/device/index.ts
Unescape Escape View File

@ -102,6 +102,9 @@ export const DeviceApi = {
getAvailableList: async () => {
return await request.get({ url: `/iot/device/available-list` })
},
getAvailableListPage: async (params: any) => {
return await request.get({ url: `/iot/device/available-page` , params})
},
// 新增物联设备
createDevice: async (data: DeviceVO) => {
return await request.post({ url: `/iot/device/create`, data })

230
src/views/mes/organization/OrganizationForm.vue
Unescape Escape View File

@ -79,7 +79,7 @@
</el-tooltip>
</span>
</template>
<el-select v-model="formData.orgType" @change="handleOrgTypeChange" :placeholder="t('FactoryModeling.FactoryStructure.dialogOrgTypePlaceholder')">
<el-select v-model="formData.orgType" :placeholder="t('FactoryModeling.FactoryStructure.dialogOrgTypePlaceholder')">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MES_ORG_TYPE)"
:key="dict.value"
@ -89,25 +89,20 @@
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.FactoryStructure.dialogMachineLabel')" v-if="formData.orgClass == 'workplace'" prop="machineId">
<!-- <el-tree-select
v-model="formData.machineId"
:data="machineComponentTree"
:props="defaultProps"
check-strictly
default-expand-all
placeholder="请选择机台"
/> -->
<el-select v-model="formData.machineId" :placeholder="t('FactoryModeling.FactoryStructure.dialogMachinePlaceholder')" clearable>
<!-- <el-select v-model="formData.machineId" :placeholder="t('FactoryModeling.FactoryStructure.dialogMachinePlaceholder')" clearable>
<el-option
v-for="item in deviceList"
:key="item.id"
:label="item.deviceName"
:value="item.id"
/>
</el-select>
</el-select>-->
<el-input :model-value="displayItemDevice" readonly clearable class="device-ledger-selection-input"
:placeholder="t('FactoryModeling.FactoryStructure.dialogMachinePlaceholder')"
@click="openCriticalComponentDialog" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.dvName')" prop="dvId" v-if="formData.orgClass == 'workplace'">
<el-select v-model="formData.dvId" filterable :placeholder="t('EquipmentManagement.EquipmentLedger.dvId')" clearable>
<!-- <el-select v-model="formData.dvId" filterable :placeholder="t('EquipmentManagement.EquipmentLedger.dvId')" clearable>
<el-option
v-for="item in dvList"
:key="item.id"
@ -115,7 +110,10 @@
:value="item.id"
:disabled="item.selected === true"
/>
</el-select>
</el-select>-->
<el-input :model-value="dvIdItemDevice" readonly clearable class="device-ledger-selection-input"
:placeholder="t('EquipmentManagement.EquipmentLedger.dvId')"
@click="openCaijiComponentDialog" />
</el-form-item>
<!-- <el-form-item label="组织状态" prop="status">
<el-radio-group v-model="formData.status">
@ -134,6 +132,59 @@
<el-button @click="dialogVisible = false">{{ t('FactoryModeling.FactoryStructure.dialogCancelButton') }}</el-button>
</template>
</Dialog>
<TableSelectDialog
ref="deviceSelectDialogRef"
title="选择设备"
:columns="deviceColumns"
:fetch-api="fetchDeviceLedgerPage"
row-key="id"
@confirm="handleDeviceSelectConfirm"
:query-params="mergedQueryParams"
:selection-type="'single'"
>
<!-- 使用 header 插槽插入查询表单 -->
<template #header>
<el-form ref="searchFormRef" :model="searchParams" :inline="true" >
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="searchParams.deviceCode" placeholder="请输入编号" clearable />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="searchParams.deviceName" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
<el-button @click="resetSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
</el-form-item>
</el-form>
</template>
</TableSelectDialog>
<TableSelectDialog
ref="caiJiSelectDialogRef"
title="选择采集设备"
:columns="caiJiColumns"
:fetch-api="fetchCaiJILedgerPage"
row-key="id"
@confirm="handleCaiJISelectConfirm"
:query-params="mergedQueryParams"
:selection-type="'single'"
>
<!-- 使用 header 插槽插入查询表单 -->
<template #header>
<el-form ref="searchFormRef" :model="searchParams" :inline="true" >
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="searchParams.deviceCode" placeholder="请输入编号" clearable />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="searchParams.deviceName" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCJSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
<el-button @click="resetCJSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
</el-form-item>
</el-form>
</template>
</TableSelectDialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
@ -142,13 +193,14 @@ import { defaultProps, handleTree } from '@/utils/tree'
import {MachineComponentApi} from "@/api/mes/machine";
import {DeviceLedgerApi, DeviceLedgerVO} from "@/api/mes/deviceledger";
import { DeviceApi,DeviceVO } from '@/api/iot/device'
import TableSelectDialog from '@/components/TableSelectDialog/TableSelectDialog.vue'
/** 产线工位 表单 */
defineOptions({ name: 'OrganizationForm' })
const loading = ref(true)
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const deviceSelectDialogRef = ref(false)
const caiJiSelectDialogRef = ref(false)
const dvList = ref<DeviceVO[]>([]) // 列表
const deviceList = ref<DeviceLedgerVO[]>([]) // 列表
const dialogVisible = ref(false) // 弹窗的是否展示
@ -179,14 +231,54 @@ const formRules = reactive({
parentId: [{ required: true, message: t('FactoryModeling.FactoryStructure.validatorParentRequired'), trigger: 'blur' }],
orgClass: [{ required: true, message: t('FactoryModeling.FactoryStructure.validatorOrgClassRequired'), trigger: 'blur' }]
})
const itemList = ref<DeviceLedgerVO[]>([])
const CJList = ref<DeviceVO[]>([]) // 列表
const mergedQueryParams = computed(() => ({ ...searchParams }))
const formRef = ref() // 表单 Ref
const organizationTree = ref() // 树形结构
const deviceColumns = [
{ label: '设备编号', prop: 'deviceCode', minWidth: 140 },
{ label: '设备名称', prop: 'deviceName', minWidth: 160 },
{ label: '设备型号', prop: 'deviceModel', minWidth: 140 },
{ label: '所属车间', prop: 'workshop', minWidth: 140 }
]
const caiJiColumns = [
{ label: '设备编号', prop: 'deviceCode', minWidth: 140 },
{ label: '设备名称', prop: 'deviceName', minWidth: 160 },
]
// 1. 自定义表单的查询参数
const searchParams = reactive({
deviceCode: undefined,
deviceName: undefined,
})
const handleSearch = () => {
// 触发弹窗内部重新加载数据
deviceSelectDialogRef.value?.reload?.()
}
const searchFormRef = ref()
const resetSearch = () => {
searchFormRef.value?.resetFields()
handleSearch()
}
const handleCJSearch = () => {
// 触发弹窗内部重新加载数据
caiJiSelectDialogRef.value?.reload?.()
}
const searchCJFormRef = ref()
const resetCJSearch = () => {
searchFormRef.value?.resetFields()
handleCJSearch()
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
initSelectedItems()
// 修改时，设置数据
if (id) {
formLoading.value = true
@ -195,6 +287,9 @@ const open = async (type: string, id?: number) => {
} finally {
formLoading.value = false
}
}else{
ids.value=[]
CJIds.value=[]
}
await getOrganizationTree()
if (type == 'create' || typeof formData.value.machineId != 'number') {
@ -283,8 +378,111 @@ const getMachineComponentTree = async () => {
root.children = handleTree(data, 'id', 'parentId')
machineComponentTree.value.push(root)
}
const ids = ref([])
const CJIds = ref([])
const displayItemDevice = computed( () => {
if (!ids.value.length)return ''
if (!itemList.value.length) {
return formData.value.machineId ? String(formData.value.machineId) : ''
}
const map = new Map(itemList.value.map((item) => [item.id, item.deviceName]))
const names = ids.value
.map((id) => map.get(id))
.filter((name) => name)
return names.join(',')
})
const dvIdItemDevice = computed( () => {
if (!CJIds.value.length)return ''
if (!CJList.value.length) {
return formData.value.dvId ? String(formData.value.dvId) : ''
}
const map = new Map(CJList.value.map((item) => [item.id, item.deviceName]))
const names = CJIds.value
.map((id) => map.get(id))
.filter((name) => name)
return names.join(',')
})
const fetchDeviceLedgerPage = (params: Record<string, any>) => {
return DeviceLedgerApi.getDeviceLedgerPage({
...params,
})
}
const fetchCaiJILedgerPage = (params: Record<string, any>) => {
return DeviceApi.getAvailableListPage({
...params,
})
}
const selectedDeviceRows = ref<any[]>([])
const selectedCaiJiRows = ref<any[]>([])
const handleDeviceSelectConfirm = (payload: { ids: (number | string)[]; rows: any[] }) => {
formData.value.devices = payload.rows
.map((item) => {
const id = Number(item.id)
if (!Number.isFinite(id)) return undefined
return {
id,
name: item.deviceName || item.name || item.code || `设备ID:${id}`
}
})
.filter((item): item is { id: number; name: string } => Boolean(item))
selectedDeviceRows.value = payload.rows
formData.value.dvId = payload.ids.join(',')
ids.value = payload.ids.map((id) => Number(id))
}
const openCriticalComponentDialog = async () => {
searchParams.deviceCode=''
searchParams.deviceName=''
const rows = selectedDeviceRows.value.map((item) => ({ ...item, id: Number(item.id) }))
deviceSelectDialogRef.value?.open(rows)
let initIds= formData.value.machineId!=undefined?formData.value.machineId.toString().split(","):[]
ids.value=initIds.map((id) => Number(id))
}
const handleCaiJISelectConfirm = (payload: { ids: (number | string)[]; rows: any[] }) => {
formData.value.devices = payload.rows
.map((item) => {
const id = Number(item.id)
if (!Number.isFinite(id)) return undefined
return {
id,
name: item.deviceName || item.name || item.code || `设备ID:${id}`
}
})
.filter((item): item is { id: number; name: string } => Boolean(item))
selectedCaiJiRows.value = payload.rows
formData.value.dvId = payload.ids.join(',')
CJIds.value = payload.ids.map((id) => Number(id))
}
const openCaijiComponentDialog = async () => {
searchParams.deviceCode=''
searchParams.deviceName=''
const rows = selectedCaiJiRows.value.map((item) => ({ ...item, id: Number(item.id) }))
caiJiSelectDialogRef.value?.open(rows)
let initIds= formData.value.dvId!=undefined?formData.value.dvId.toString().split(","):[]
CJIds.value=initIds.map((id) => Number(id))
}
const initSelectedItems = async () => {
if (!itemList.value.length) {
loading.value = true
try {
itemList.value = await DeviceLedgerApi.getDeviceLedgerList()
} finally {
loading.value = false
}
}
if (!CJList.value.length) {
loading.value = true
try {
CJList.value = await DeviceApi.getAvailableList()
} finally {
loading.value = false
}
}
}
/** 初始化 **/
onMounted(async () => {
//console.log("ssss")

Write Preview
Loading…
Cancel
Save