feat:设备台账-左侧树状结构添加产线分类

test
黄伟杰 2 weeks ago
parent 1459ce3460
commit 8333b589d8

@ -13,6 +13,7 @@ export interface DeviceLedgerVO {
deviceModel: string // 设备型号
deviceSpec: string // 设备规格
deviceType: string | number // 设备类型
deviceLine?: string | number // 设备产线
deviceTypeName?: string // 设备类型名称
supplier: string // 供应商
workshop: string // 所属车间

@ -0,0 +1,45 @@
import request from '@/config/axios'
export interface DeviceLineVO {
id: number
code: string
isCode?: boolean
qrcodeUrl?: string
name: string
remark: string
sort: number
parentId: number
parentChain: string
createTime?: string
}
export interface DeviceLineTreeVO extends DeviceLineVO {
children?: DeviceLineTreeVO[]
leaf?: boolean
}
export const DeviceLineApi = {
getDeviceLine: async (id: number) => {
return await request.get({ url: `/mes/device-line/get?id=` + id })
},
getDeviceLineTree: async () => {
return await request.get({ url: `/mes/device-line/tree` })
},
regenerateCode: async (id: number, code: string) => {
return await request.post({ url: `/mes/device-line/regenerate-code?id=${id}&code=${encodeURIComponent(code)}` })
},
createDeviceLine: async (data: DeviceLineVO) => {
return await request.post({ url: `/mes/device-line/create`, data })
},
updateDeviceLine: async (data: DeviceLineVO) => {
return await request.put({ url: `/mes/device-line/update`, data })
},
deleteDeviceLine: async (id: number) => {
return await request.delete({ url: `/mes/device-line/delete?id=` + id })
}
}

@ -5,7 +5,7 @@ export interface PrintTemplateVO {
templateCode: string
templateName: string
templateType: number
templateBizType: string
templateBizType: number
templateJson: string
remark: string
isEnable: boolean

@ -1252,6 +1252,11 @@ export default {
},
// Equipment Ledger
EquipmentLedger: {
lineCategory: 'Production Line Category',
createLineCategory: 'Add Production Line Category',
updateLineCategory: 'Edit Production Line Category',
emptyDeviceData: 'No device data',
runningLabel: 'Running',
images: 'Images',
deviceCode: 'Code',
qrcode: 'QR Code/Barcode',
@ -1259,6 +1264,12 @@ export default {
deviceStatus: 'Status',
statusEnabled: 'Enabled',
statusDisabled: 'Disabled',
statusRunning: 'Running',
statusStandby: 'Standby',
statusFault: 'Fault',
statusMaintenance: 'Under Maintenance',
statusStopped: 'Stopped',
statusUnknown: 'Unknown',
deviceType: 'Type',
deviceSpec: 'Spec',
deviceModel: 'Model',
@ -1334,6 +1345,7 @@ export default {
dvId: 'Please select device',
qrcodeLoadError: 'Failed to load QR code',
qrcodeEmpty: 'No QR code',
exportFileName: 'Device Ledger',
validatorDeviceCodeRequired: 'Code can not be empty',
gjTitle: 'Select key components',
bjTitle: 'Select spare parts',

@ -1242,6 +1242,11 @@ export default {
},
// 设备台账
EquipmentLedger: {
lineCategory: '产线分类',
createLineCategory: '新增产线分类',
updateLineCategory: '修改产线分类',
emptyDeviceData: '暂无设备数据',
runningLabel: '运行',
images: '图片',
deviceCode: '编码',
qrcode: '二维码/条形码',
@ -1249,6 +1254,12 @@ export default {
deviceStatus: '状态',
statusEnabled: '启用',
statusDisabled: '不启用',
statusRunning: '运行中',
statusStandby: '待机',
statusFault: '故障',
statusMaintenance: '维修中',
statusStopped: '已停用',
statusUnknown: '未知',
deviceType: '类型',
deviceSpec: '规格型号',
deviceModel: '型号',
@ -1324,6 +1335,7 @@ export default {
dvId: '请选择设备',
qrcodeLoadError: '二维码加载失败',
qrcodeEmpty: '暂无二维码',
exportFileName: '设备台账',
validatorDeviceCodeRequired: '编码不能为空',
gjTitle: '选择关键件',
bjTitle: '选择备件',

@ -488,7 +488,8 @@ const initFormData = () => ({
deviceSpec: undefined,
isScheduled: 0,
ratedCapacity: undefined,
deviceType: undefined,
deviceType: undefined as number | undefined,
deviceLine: undefined as number | undefined,
supplier: undefined,
workshop: undefined,
deviceLocation: undefined,
@ -681,7 +682,7 @@ const ensureOptionsLoaded = async () => {
}
/** 打开弹窗 */
const open = async (type: string, id?: number, defaultDeviceTypeId?: number) => {
const open = async (type: string, id?: number, defaultDeviceTypeId?: number, defaultDeviceLineId?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
@ -690,6 +691,9 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number) =>
if (type === 'create' && defaultDeviceTypeId) {
formData.value.deviceType = defaultDeviceTypeId
}
if (type === 'create' && defaultDeviceLineId) {
;(formData.value as any).deviceLine = defaultDeviceLineId
}
//
if (id) {
formLoading.value = true
@ -707,6 +711,7 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number) =>
isScheduled: normalizeNumberish((detail as any)?.isScheduled ?? (detail as any)?.isScheduled) ?? 0,
ratedCapacity: normalizeNumberish((detail as any)?.ratedCapacity),
deviceType: normalizeNumberish((detail as any)?.deviceType),
deviceLine: normalizeNumberish((detail as any)?.deviceLine),
deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
productionDate: normalizeYmd((detail as any)?.productionDate),
factoryEntryDate: normalizeYmd((detail as any)?.factoryEntryDate),
@ -935,6 +940,7 @@ const submitForm = async () => {
isScheduled: normalizeNumberish((formData.value as any).isScheduled) ?? 0,
ratedCapacity: normalizeNumberish((formData.value as any).ratedCapacity),
deviceType: normalizeNumberish(formData.value.deviceType),
deviceLine: normalizeNumberish((formData.value as any).deviceLine),
productionDate: normalizeYmd(formData.value.productionDate),
factoryEntryDate: normalizeYmd(formData.value.factoryEntryDate),
deviceManager: formData.value.deviceManagerIds?.length ? formData.value.deviceManagerIds.join(',') : undefined,

@ -1,69 +1,143 @@
<template>
<div class="device-ledger-layout">
<ContentWrap class="device-ledger-left">
<el-tree
v-loading="typeTreeLoading" :data="typeTreeData" node-key="id" highlight-current
:props="typeTreeProps"
:default-expanded-keys="typeTreeExpandedKeys" :expand-on-click-node="false"
@node-click="handleTypeNodeClick"/>
<div class="tree-header">
<span class="tree-title">{{ t('EquipmentManagement.EquipmentLedger.lineCategory') }}</span>
<div class="tree-header-actions">
<el-button link type="primary" size="small" @click="getTypeTree">
<Icon icon="ep:refresh" /> 刷新
</el-button>
<el-button link type="primary" size="small" @click="handleTreeAdd({ id: 0, parentChain: '0' })">
<Icon icon="ep:plus" /> {{ t('action.add') }}
</el-button>
</div>
</div>
<el-tree v-loading="typeTreeLoading" :data="typeTreeData" node-key="id" highlight-current :props="typeTreeProps"
:default-expanded-keys="typeTreeExpandedKeys" :expand-on-click-node="false" @node-click="handleTypeNodeClick">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span class="tree-node-label">{{ node.label }}</span>
<span class="tree-node-actions">
<el-button link type="primary" size="small" @click.stop="handleTreeAdd(data)">
<Icon icon="ep:plus" />
</el-button>
<el-button link type="primary" size="small" @click.stop="handleTreeEdit(data)">
<Icon icon="ep:edit" />
</el-button>
<el-button link type="danger" size="small" @click.stop="handleTreeDelete(data)">
<Icon icon="ep:delete" />
</el-button>
</span>
</span>
</template>
</el-tree>
</ContentWrap>
<!-- 产线分类 表单弹窗 -->
<Dialog :title="treeFormDialogTitle" v-model="treeFormDialogVisible">
<el-form ref="treeFormRef" :model="treeFormData" :rules="treeFormRules" label-width="80px">
<el-form-item :label="t('EquipmentManagement.EquipmentClassification.code')" prop="code">
<el-row :gutter="20" style="width: 100%">
<el-col :span="18">
<el-input v-model="treeFormData.code"
:placeholder="t('EquipmentManagement.EquipmentClassification.placeholderCode')"
:disabled="Boolean(treeFormData.isCode) || treeFormMode === 'update'" />
</el-col>
<el-col :span="6">
<el-switch v-model="treeFormData.isCode" :disabled="treeFormMode === 'update'"
@change="handleTreeCodeAutoChange" />
</el-col>
</el-row>
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentClassification.name')" prop="name">
<el-input v-model="treeFormData.name"
:placeholder="t('EquipmentManagement.EquipmentClassification.placeholderName')" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentClassification.sort')" prop="sort">
<el-input v-model="treeFormData.sort"
:placeholder="t('EquipmentManagement.EquipmentClassification.placeholderSort')" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentClassification.remark')" prop="remark">
<el-input v-model="treeFormData.remark"
:placeholder="t('EquipmentManagement.EquipmentClassification.placeholderRemark')" />
</el-form-item>
<el-form-item v-if="treeFormMode === 'update'" :label="t('EquipmentManagement.EquipmentLedger.qrcode')" prop="qrcodeUrl">
<div class="tree-qrcode-wrap">
<QrcodeActionCard
:image-url="treeFormData.qrcodeUrl"
:print-id="treeFormData.id"
:print-title="`${treeFormData.name || '设备类型'}码打印预览`"
:print-paper-width="80"
:print-paper-height="80"
:print-max-width="220"
:empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
:error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:refresh-url="getTreeQrcodeRefreshUrl()"
:refresh-disabled="!treeFormData.id || !treeFormData.code"
refresh-confirm-text="确认刷新该设备类型二维码吗?"
:print-data="buildTreeQrcodePrintData()"
@refresh-success="handleTreeQrcodeRefreshSuccess"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" :loading="treeFormLoading" @click="handleTreeFormSubmit">{{ t('common.ok')
}}</el-button>
<el-button @click="treeFormDialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
<div class="device-ledger-right">
<ContentWrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"
label-width="60px">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
prop="deviceCode">
<el-input
v-model="queryParams.deviceCode"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
clearable @keyup.enter="handleQuery"
class="!w-240px"/>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="60px">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
<el-input v-model="queryParams.deviceCode"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
prop="deviceName">
<el-input
v-model="queryParams.deviceName"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')"
clearable @keyup.enter="handleQuery"
class="!w-240px"/>
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')" prop="deviceName">
<el-input v-model="queryParams.deviceName"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')"
prop="deviceStatus">
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" prop="deviceStatus">
<el-select v-model="queryParams.deviceStatus"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceStatus')"
clearable class="!w-240px">
<el-option v-for="dict in tzStatusOptions" :key="dict.value" :label="dict.label"
:value="dict.value"/>
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceStatus')" clearable
class="!w-240px">
<el-option v-for="dict in tzStatusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')" prop="deviceType">
<el-tree-select v-model="queryParams.deviceType" :data="deviceTypeTree" :props="treeSelectProps"
check-strictly default-expand-all value-key="id"
:placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceType')" clearable
class="!w-240px" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px"/>
<Icon icon="ep:search" class="mr-5px" />
{{ t('common.query') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px"/>
<Icon icon="ep:refresh" class="mr-5px" />
{{ t('common.reset') }}
</el-button>
<el-button type="primary" plain @click="openForm('create')"
v-hasPermi="['mes:device-ledger:create']">
<Icon icon="ep:plus" class="mr-5px"/>
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:device-ledger:create']">
<Icon icon="ep:plus" class="mr-5px" />
{{ t('action.add') }}
</el-button>
<el-button type="danger" plain @click="handleBatchDelete"
v-hasPermi="['mes:device-ledger:delete']">
<Icon icon="ep:delete" class="mr-5px"/>
<el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['mes:device-ledger:delete']">
<Icon icon="ep:delete" class="mr-5px" />
{{ t('EquipmentManagement.EquipmentLedger.batchDelete') }}
</el-button>
<el-button
type="success" plain @click="handleExport" :loading="exportLoading"
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['mes:device-ledger:export']">
<Icon icon="ep:download" class="mr-5px"/>
<Icon icon="ep:download" class="mr-5px" />
{{ t('action.export') }}
</el-button>
<!-- 视图切换按钮 -->
<!-- <el-button
<!-- <el-button
:type="currentView === 'grid' ? 'primary' : 'default'"
:icon="currentView === 'grid' ? Menu : Grid"
@click="toggleView"
@ -77,121 +151,105 @@
<ContentWrap>
<div v-show="currentView === 'table'" class="simple-table-view">
<el-table
ref="tableRef" v-loading="loading" :data="list" :stripe="true"
:show-overflow-tooltip="true"
<el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
row-key="id" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" fixed="left" reserve-selection/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.serialNumber')"
align="center" width="50" fixed="left">
<el-table-column type="selection" width="55" fixed="left" reserve-selection />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.serialNumber')" align="center" width="50"
fixed="left">
<template #default="scope">
{{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
align="center" prop="deviceCode" min-width="160px" sortable/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
align="center" prop="deviceName" min-width="140px" sortable/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceType')"
align="center" prop="deviceType" min-width="110px" sortable>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" align="center"
prop="deviceCode" min-width="160px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')" align="center"
prop="deviceName" min-width="140px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceType')" align="center"
prop="deviceType" min-width="110px" sortable>
<template #default="scope">
<el-tag effect="light">
{{ getDeviceTypeName(scope.row.deviceTypeName ?? scope.row.deviceType) }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')"
align="center" prop="deviceStatus" sortable>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')" align="center"
prop="deviceStatus" sortable>
<template #default="scope">
<el-switch
:model-value="isDeviceLedgerEnabled(scope.row)"
:loading="Boolean(deviceStatusUpdatingMap[scope.row.id])"
inline-prompt
@change="(val) => handleDeviceStatusChange(scope.row, val)"
/>
<el-switch :model-value="isDeviceLedgerEnabled(scope.row)"
:loading="Boolean(deviceStatusUpdatingMap[scope.row.id])" inline-prompt
@change="(val) => handleDeviceStatusChange(scope.row, val)" />
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')"
align="center" prop="isSchedueld" min-width="100px">
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" align="center"
prop="isSchedueld" min-width="100px">
<template #default="scope">
<el-tag :type="Number(scope.row.isSchedueld ?? scope.row.isScheduled) === 1 ? 'success' : 'info'" effect="light">
<el-tag :type="Number(scope.row.isSchedueld ?? scope.row.isScheduled) === 1 ? 'success' : 'info'"
effect="light">
{{ formatScheduleLabel(scope.row.isSchedueld ?? scope.row.isScheduled) }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.ratedCapacity')"
align="center" prop="ratedCapacity" min-width="120px"/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')"
align="center" prop="deviceSpec"/>
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')"
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.ratedCapacity')" align="center"
prop="ratedCapacity" min-width="120px" />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')" align="center"
prop="deviceSpec" />
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')"
align="center" prop="deviceModel"/>-->
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
<el-table-column
:label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center"
prop="productionDate" :formatter="dateFormatter2"
width="120px" sortable/>
<el-table-column
:label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center"
prop="factoryEntryDate" :formatter="dateFormatter2"
width="120px" sortable/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center"
prop="productionDate" :formatter="dateFormatter2" width="120px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center"
prop="factoryEntryDate" :formatter="dateFormatter2" width="120px" sortable />
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.supplier')" align="center" prop="supplier" width="110px" /> -->
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center" prop="workshop" width="110px" /> -->
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')"
align="center" prop="workshopName" min-width="150px" sortable/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')"
align="center" prop="deviceLocation" min-width="150px"/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.workshop')" align="center"
prop="workshopName" min-width="150px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" align="center"
prop="deviceLocation" min-width="150px" />
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.systemOrg')" align="center" prop="systemOrg" width="110px" /> -->
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')"
align="center" prop="deviceManagerName" width="150px" sortable/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center"
prop="remark"/>
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" align="center"
prop="deviceManagerName" width="150px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" />
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px" sortable />
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable /> -->
<!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px" sortable /> -->
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.operate')"
align="center" min-width="160px" fixed="right">
<el-table-column :label="t('EquipmentManagement.EquipmentLedger.operate')" align="center" min-width="160px"
fixed="right">
<template #default="scope">
<el-button link @click="handleDetail(scope.row.id)">
{{ t('EquipmentManagement.EquipmentLedger.detail') }}
</el-button>
<el-button
link type="primary" @click="openForm('update', scope.row.id)"
<el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['mes:device-ledger:update']">
{{ t('EquipmentManagement.EquipmentLedger.edit') }}
</el-button>
<el-button
link type="danger" @click="handleDelete(scope.row.id)"
<el-button link type="danger" @click="handleDelete(scope.row.id)"
v-hasPermi="['mes:device-ledger:delete']">
{{ t('EquipmentManagement.EquipmentLedger.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList"/>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
<!-- 九宫格视图 -->
<div v-show="currentView === 'grid'" class="simple-grid-view">
<div v-if="!list || list.length === 0" class="empty-grid">
<el-empty description="暂无设备数据"/>
<el-empty :description="t('EquipmentManagement.EquipmentLedger.emptyDeviceData')" />
</div>
<div v-else class="grid-container">
<div
v-for="(item, index) in list"
:key="item.id || index"
class="grid-card"
@click="handleView(item, index)"
>
<div v-for="(item, index) in list" :key="item.id || index" class="grid-card"
@click="handleView(item, index)">
<!-- 设备状态指示 -->
<div class="status-indicator" :class="`status-${item.deviceStatus}`"></div>
<!-- 设备图标 -->
<div class="card-icon">
<el-icon :size="32" :color="getEquipmentColor(item.type)">
<component :is="getEquipmentIcon(item.type)"/>
<component :is="getEquipmentIcon(item.type)" />
</el-icon>
</div>
@ -203,35 +261,31 @@
<!-- 设备状态 -->
<div class="card-status">
<el-tag
:type="getStatusTag(item.status)"
size="small"
class="status-tag"
>
<el-tag :type="getStatusTag(item.status)" size="small" class="status-tag">
{{ getStatusText(item.status) }}
</el-tag>
</div>
<!-- 运行信息 -->
<div v-if="item.runningHours" class="card-running">
<span>运行: {{ formatRunningHours(item.runningHours) }}</span>
<span>{{ t('EquipmentManagement.EquipmentLedger.runningLabel') }}: {{
formatRunningHours(item.runningHours) }}</span>
</div>
<!-- 位置信息 -->
<div v-if="item.location" class="card-location">
<el-icon :size="12">
<Location/>
<Location />
</el-icon>
<span>{{ item.location }}</span>
</div>
</div>
</div>
</div>
<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[12, 24, 48, 96]"
@pagination="getList"/>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
:page-sizes="[12, 24, 48, 96]" @pagination="getList" />
<!-- 分页 -->
<!-- <div class="simple-pagination">
<!-- <div class="simple-pagination">
<el-pagination
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@ -249,18 +303,20 @@
</div>
<!-- 表单弹窗添加/修改 -->
<DeviceLedgerForm ref="formRef" @success="getList"/>
<DeviceLedgerForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import {DeviceLedgerApi, DeviceLedgerVO} from '@/api/mes/deviceledger'
import {DeviceTypeApi, DeviceTypeTreeVO} from '@/api/mes/devicetype'
import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
import { DeviceLineApi, DeviceLineTreeVO } from '@/api/mes/deviceline'
import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
import DeviceLedgerForm from './DeviceLedgerForm.vue'
import { getIntDictOptions } from '@/utils/dict'
import { useDictStoreWithOut } from '@/store/modules/dict'
import {ref} from "vue";
import { ref } from "vue";
import {
Refresh,
Grid,
@ -268,7 +324,7 @@ import {
Search,
Location
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import { useRouter } from "vue-router";
const currentView = ref('table') // 'table' 'grid'
//
@ -277,11 +333,11 @@ const router = useRouter()
const handleView = (row) => {
router.push({
path: '/equipment/detail',
query: {id: row.id}
query: { id: row.id }
})
}
/** 设备类型 列表 */
defineOptions({name: 'DeviceLedger'})
defineOptions({ name: 'DeviceLedger' })
const getEquipmentColor = (type) => {
const colorMap = {
'production': '#409eff',
@ -318,13 +374,13 @@ const getStatusTag = (status) => {
const getStatusText = (status) => {
const textMap = {
'running': '运行中',
'standby': '待机',
'fault': '故障',
'maintenance': '维修中',
'stopped': '已停用'
'running': t('EquipmentManagement.EquipmentLedger.statusRunning'),
'standby': t('EquipmentManagement.EquipmentLedger.statusStandby'),
'fault': t('EquipmentManagement.EquipmentLedger.statusFault'),
'maintenance': t('EquipmentManagement.EquipmentLedger.statusMaintenance'),
'stopped': t('EquipmentManagement.EquipmentLedger.statusStopped')
}
return textMap[status] || '未知'
return textMap[status] || t('EquipmentManagement.EquipmentLedger.statusUnknown')
}
//
@ -347,18 +403,20 @@ const formatRunningHours = (hours) => {
return remainingHours > 0 ? `${days}d ${remainingHours}h` : `${days}d`
}
const message = useMessage() //
const {t} = useI18n() //
const { t } = useI18n() //
const loading = ref(true) //
const list = ref<DeviceLedgerVO[]>([]) //
const total = ref(0) //
const selectedDeviceLineId = ref<number | undefined>(undefined)
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
deviceCode: undefined,
deviceName: undefined,
deviceStatus: undefined,
deviceType: undefined,
deviceType: undefined as number | undefined,
deviceLine: undefined as number | undefined,
})
const queryFormRef = ref() //
const exportLoading = ref(false)
@ -389,9 +447,11 @@ const tzStatusOptions = computed(() => {
const deviceStatusUpdatingMap = ref<Record<number, boolean>>({})
const typeTreeLoading = ref(false)
const typeTreeData = ref<DeviceTypeTreeVO[]>([])
const typeTreeProps = {label: 'name', children: 'children'}
const typeTreeExpandedKeys = ref<number[]>([0])
const typeTreeData = ref<DeviceLineTreeVO[]>([])
const typeTreeProps = { label: 'name', children: 'children' }
const treeSelectProps = { label: 'name', children: 'children' }
const typeTreeExpandedKeys = ref<number[]>([])
const deviceTypeTree = ref<DeviceTypeTreeVO[]>([])
const deviceTypeNameMap = ref<Record<number, string>>({})
const buildDeviceTypeNameMap = (nodes: DeviceTypeTreeVO[]) => {
@ -408,30 +468,185 @@ const buildDeviceTypeNameMap = (nodes: DeviceTypeTreeVO[]) => {
const getTypeTree = async () => {
typeTreeLoading.value = true
try {
const data = await DeviceTypeApi.getDeviceTypeTree({pageNo: 1, pageSize: 10})
const treeChildren = JSON.parse(JSON.stringify(data ?? []))
typeTreeData.value = [{
id: 0,
code: '',
name: '全部',
remark: '',
sort: 0,
children: treeChildren
} as any]
buildDeviceTypeNameMap(treeChildren)
typeTreeExpandedKeys.value = [0]
const data = await DeviceLineApi.getDeviceLineTree()
const treeData = JSON.parse(JSON.stringify(data ?? []))
typeTreeData.value = treeData
if (treeData.length > 0) {
typeTreeExpandedKeys.value = [treeData[0].id]
}
} finally {
typeTreeLoading.value = false
}
}
const getDeviceTypeTree = async () => {
const data = await DeviceTypeApi.getDeviceTypeTree({})
const treeData = JSON.parse(JSON.stringify(data ?? []))
deviceTypeTree.value = treeData
buildDeviceTypeNameMap(treeData)
}
const handleTypeNodeClick = (node: any) => {
const id = node?.id
queryParams.deviceType = id === 0 ? undefined : id
selectedDeviceLineId.value = id
queryParams.deviceLine = id
queryParams.pageNo = 1
getList()
}
const treeFormDialogVisible = ref(false)
const treeFormDialogTitle = ref('')
const treeFormLoading = ref(false)
const treeFormMode = ref<'create' | 'update'>('create')
const treeFormRef = ref()
const treeFormData = ref({
id: undefined as number | undefined,
code: '',
isCode: true,
name: '',
qrcodeUrl: '',
remark: '',
sort: '',
parentId: 0,
parentChain: '0',
})
const validateTreeCode = (_rule, value, callback) => {
if (Boolean(treeFormData.value.isCode)) {
callback()
return
}
if (value === undefined || value === null || String(value).trim() === '') {
callback(new Error(t('EquipmentManagement.EquipmentClassification.placeholderCode')))
return
}
callback()
}
const treeFormRules = {
code: [{ validator: validateTreeCode, trigger: ['blur', 'change'] }],
name: [{ required: true, message: t('EquipmentManagement.EquipmentClassification.placeholderName'), trigger: 'blur' }],
sort: [{ required: true, message: t('EquipmentManagement.EquipmentClassification.placeholderSort'), trigger: 'blur' }],
}
const resetTreeForm = () => {
treeFormData.value = {
id: undefined,
code: '',
isCode: true,
name: '',
qrcodeUrl: '',
remark: '',
sort: '',
parentId: 0,
parentChain: '0',
}
treeFormRef.value?.resetFields()
}
const handleTreeCodeAutoChange = (value: boolean) => {
if (value) {
treeFormData.value.code = ''
}
treeFormRef.value?.clearValidate?.('code')
}
const handleTreeAdd = (parent: any) => {
treeFormMode.value = 'create'
treeFormDialogTitle.value = t('EquipmentManagement.EquipmentLedger.createLineCategory')
resetTreeForm()
treeFormData.value.parentId = parent.id ?? 0
treeFormData.value.parentChain = parent.parentChain ? `${parent.parentChain},${parent.id}` : `${parent.id}`
treeFormDialogVisible.value = true
}
const loadTreeFormDetail = async (id: number) => {
const detail = await DeviceLineApi.getDeviceLine(id)
treeFormData.value = {
id: detail.id,
code: detail.code ?? '',
isCode: detail.isCode ?? false,
name: detail.name ?? '',
qrcodeUrl: detail.qrcodeUrl ?? '',
remark: detail.remark ?? '',
sort: String(detail.sort ?? ''),
parentId: detail.parentId ?? 0,
parentChain: detail.parentChain ?? '0',
}
}
const handleTreeEdit = async (data: any) => {
treeFormMode.value = 'update'
treeFormDialogTitle.value = t('EquipmentManagement.EquipmentLedger.updateLineCategory')
resetTreeForm()
treeFormDialogVisible.value = true
treeFormLoading.value = true
try {
await loadTreeFormDetail(data.id)
} catch {
treeFormDialogVisible.value = false
message.error(t('common.queryFail'))
} finally {
treeFormLoading.value = false
}
}
const handleTreeDelete = async (data: any) => {
try {
await message.delConfirm()
await DeviceLineApi.deleteDeviceLine(data.id)
message.success(t('common.delSuccess'))
await getTypeTree()
} catch {
// user cancelled or error
}
}
const handleTreeFormSubmit = async () => {
await treeFormRef.value.validate()
treeFormLoading.value = true
try {
const submitData = {
...treeFormData.value,
sort: Number(treeFormData.value.sort) || 0,
}
if (treeFormMode.value === 'create') {
await DeviceLineApi.createDeviceLine(submitData as any)
} else {
await DeviceLineApi.updateDeviceLine(submitData as any)
}
message.success(treeFormMode.value === 'create' ? t('common.createSuccess') : t('common.updateSuccess'))
treeFormDialogVisible.value = false
await getTypeTree()
} finally {
treeFormLoading.value = false
}
}
const getTreeQrcodeRefreshUrl = () => {
if (!treeFormData.value.id || !treeFormData.value.code) return ''
return `/mes/device-line/regenerate-code?id=${treeFormData.value.id}&code=${encodeURIComponent(String(treeFormData.value.code))}`
}
const handleTreeQrcodeRefreshSuccess = async () => {
if (!treeFormData.value.id) return
treeFormLoading.value = true
try {
await loadTreeFormDetail(treeFormData.value.id)
} catch {
message.error(t('common.queryFail'))
} finally {
treeFormLoading.value = false
}
}
const buildTreeQrcodePrintData = () => {
return {
id: treeFormData.value.id,
deviceCode: treeFormData.value.code,
deviceName: treeFormData.value.name,
qrcodeUrl: treeFormData.value.qrcodeUrl
}
}
const getDeviceTypeName = (value: any) => {
const id = typeof value === 'number' ? value : Number(value)
if (!Number.isNaN(id) && deviceTypeNameMap.value[id]) return deviceTypeNameMap.value[id]
@ -452,7 +667,7 @@ const handleDeviceStatusChange = async (row: DeviceLedgerVO, value: boolean) =>
if (!row?.id) return
const oldValue = Number((row as any).deviceStatus)
const nextValue = value ? 0 : 1
;(row as any).deviceStatus = nextValue
; (row as any).deviceStatus = nextValue
deviceStatusUpdatingMap.value[row.id] = true
try {
await DeviceLedgerApi.updateDeviceLedger({
@ -461,7 +676,7 @@ const handleDeviceStatusChange = async (row: DeviceLedgerVO, value: boolean) =>
} as DeviceLedgerVO)
message.success(t('common.updateSuccess'))
} catch {
;(row as any).deviceStatus = oldValue
; (row as any).deviceStatus = oldValue
message.error(t('common.updateFail'))
} finally {
deviceStatusUpdatingMap.value[row.id] = false
@ -482,7 +697,8 @@ const getList = async () => {
deviceCode: queryParams.deviceCode,
deviceName: queryParams.deviceName,
deviceStatus: queryParams.deviceStatus,
deviceType: queryParams.deviceType
deviceType: queryParams.deviceType,
deviceLine: queryParams.deviceLine
})
list.value = data.list
total.value = data.total
@ -506,7 +722,7 @@ const resetQuery = () => {
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id, queryParams.deviceType)
formRef.value.open(type, id, queryParams.deviceType, selectedDeviceLineId.value)
}
/** 删除按钮操作 */
@ -532,7 +748,7 @@ const handleDelete = async (ids: number | number[]) => {
const handleBatchDelete = async () => {
if (!selectedIds.value.length) {
message.error('请选择需要删除的数据')
message.error(t('common.delNoData'))
return
}
await handleDelete(selectedIds.value)
@ -550,7 +766,7 @@ const handleExport = async () => {
ids: selectedIds.value.length ? selectedIds.value.join(',') : undefined
}
const data = await DeviceLedgerApi.exportDeviceLedger(params)
download.excel(data, '设备台账.xls')
download.excel(data, `${t('EquipmentManagement.EquipmentLedger.exportFileName')}.xls`)
} catch {
} finally {
exportLoading.value = false
@ -561,6 +777,7 @@ const handleExport = async () => {
onMounted(async () => {
await dictStore.setDictMap()
dictReady.value = true
getDeviceTypeTree()
getTypeTree()
getList()
})
@ -589,7 +806,8 @@ onMounted(async () => {
height: calc(100vh - 600px);
overflow-y: auto;
.empty-grid { //
.empty-grid {
//
display: flex;
align-items: center;
justify-content: center;
@ -789,4 +1007,54 @@ onMounted(async () => {
}
.tree-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--el-border-color-lighter);
margin-bottom: 4px;
.tree-title {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.tree-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
}
.custom-tree-node {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
padding-right: 8px;
.tree-node-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tree-node-actions {
display: none;
flex-shrink: 0;
margin-left: 8px;
}
&:hover .tree-node-actions {
display: flex;
}
}
.tree-qrcode-wrap {
width: 100%;
max-width: 220px;
}
</style>

@ -354,6 +354,7 @@ const handleSave = async () => {
templateCode: currentRow.value.templateCode,
templateName: currentRow.value.templateName,
templateType: currentRow.value.templateType,
templateBizType: currentRow.value.templateBizType ?? 1,
templateJson: JSON.stringify(templateJson),
} as any)
message.success(t('common.updateSuccess'))

@ -593,6 +593,7 @@ const handleSave = async () => {
templateCode: currentRow.value.templateCode,
templateName: currentRow.value.templateName,
templateType: currentRow.value.templateType,
templateBizType: currentRow.value.templateBizType ?? 2,
templateJson: JSON.stringify(templateJson),
} as any)
message.success(t('common.updateSuccess'))

Loading…
Cancel
Save