|
|
<template>
|
|
|
<div>
|
|
|
<div class="mb-16">
|
|
|
<el-button type="primary" @click="handleAdd">+ 新增机床</el-button>
|
|
|
<el-button @click="importVisible = true">导入</el-button>
|
|
|
<el-button type="success" @click="handleExport">导出</el-button>
|
|
|
<el-button v-if="selectedRows.length" size="default" @click="batchToggle(0)" :disabled="!selectedRows.some(r => r.isEnabled)">批量停用({{ selectedRows.length }})</el-button>
|
|
|
<el-button v-if="selectedRows.length" size="default" type="primary" @click="batchToggle(1)" :disabled="!selectedRows.some(r => !r.isEnabled)">批量启用({{ selectedRows.length }})</el-button>
|
|
|
<el-button v-if="selectedRows.length" size="default" type="danger" @click="handleBatchDelete">批量删除({{ selectedRows.length }})</el-button>
|
|
|
</div>
|
|
|
|
|
|
<el-form :inline="true" class="mb-16">
|
|
|
<el-form-item label="车间">
|
|
|
<el-select v-model="query.workshopId" clearable placeholder="全部">
|
|
|
<el-option v-for="w in workshopList" :key="w.id" :label="w.name" :value="w.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="在线状态">
|
|
|
<el-select v-model="query.isOnline" clearable placeholder="全部">
|
|
|
<el-option label="在线" :value="1" />
|
|
|
<el-option label="离线" :value="0" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌">
|
|
|
<el-select v-model="query.brandId" clearable placeholder="全部">
|
|
|
<el-option v-for="b in brandList" :key="b.id" :label="b.brandName" :value="b.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-input v-model="query.keyword" placeholder="机床名称/device_code" clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="loadData">查询</el-button>
|
|
|
<el-button @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<el-table :data="tableData" border stripe v-loading="loading" @selection-change="(rows: Machine[]) => selectedRows = rows">
|
|
|
<el-table-column type="selection" width="50" fixed="left" align="center" />
|
|
|
<el-table-column label="机床名称" min-width="120" fixed="left" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
<el-link type="primary" @click="goDetail(row.id)">{{ row.name }}</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="deviceCode" label="device_code" show-overflow-tooltip sortable />
|
|
|
<el-table-column prop="workshopName" label="车间" align="center" sortable />
|
|
|
<el-table-column prop="brandName" label="品牌" align="center" sortable />
|
|
|
<el-table-column prop="ipAddress" label="IP地址" />
|
|
|
<el-table-column label="在线状态" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag :type="row.isOnline ? 'success' : 'info'" size="small">{{ row.isOnline ? '在线' : '离线' }}</el-tag>
|
|
|
<span v-if="row.isOnline && row.lastPingLatency != null" style="margin-left:4px;font-size:12px;color:#909399">{{ row.lastPingLatency }}ms</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag :type="row.isEnabled ? 'success' : 'danger'" size="small">{{ row.isEnabled ? '启用' : '停用' }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="workerName" label="绑定工人" align="center">
|
|
|
<template #default="{ row }">{{ row.workerName || '-' }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<div style="white-space:nowrap">
|
|
|
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
|
|
|
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<el-pagination
|
|
|
v-model:current-page="page.page"
|
|
|
v-model:page-size="page.pageSize"
|
|
|
:page-sizes="[20, 50, 100]"
|
|
|
:total="page.total"
|
|
|
background
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
style="margin-top:16px"
|
|
|
@current-change="loadData"
|
|
|
@size-change="handleSizeChange"
|
|
|
/>
|
|
|
|
|
|
<!-- 新增/编辑弹窗 -->
|
|
|
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑机床' : '新增机床'" width="600px" destroy-on-close>
|
|
|
<el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
|
|
|
<el-form-item label="机床名称" prop="name"><el-input v-model="form.name" maxlength="100" /></el-form-item>
|
|
|
<el-form-item label="device_code" prop="deviceCode"><el-input v-model="form.deviceCode" maxlength="100" :disabled="!!editingId" /></el-form-item>
|
|
|
<el-form-item label="所属车间" prop="workshopId">
|
|
|
<el-select v-model="form.workshopId"><el-option v-for="w in workshopList" :key="w.id" :label="w.name" :value="w.id" /></el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="采集地址" prop="collectAddressId">
|
|
|
<el-select v-model="form.collectAddressId" @change="onAddressChange">
|
|
|
<el-option v-for="a in addressList" :key="a.id" :label="a.name" :value="a.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌"><el-input v-model="form.brandName" disabled /></el-form-item>
|
|
|
<el-form-item label="IP地址" prop="ipAddress"><el-input v-model="form.ipAddress" /></el-form-item>
|
|
|
<el-form-item label="绑定工人">
|
|
|
<el-select v-model="form.workerId" clearable>
|
|
|
<el-option v-for="w in workerList" :key="w.id" :label="w.name" :value="w.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 导入弹窗 -->
|
|
|
<el-dialog v-model="importVisible" title="导入机床" width="500px" destroy-on-close>
|
|
|
<el-button type="primary" link @click="downloadTemplate">下载模板</el-button>
|
|
|
<el-upload ref="uploadRef" accept=".xlsx" :limit="1" :auto-upload="false" :on-change="onFileChange" style="margin:16px 0">
|
|
|
<el-button>选择文件</el-button>
|
|
|
</el-upload>
|
|
|
<div v-if="importResult">
|
|
|
<el-tag type="success">成功{{ importResult.successCount }}条</el-tag>
|
|
|
<el-tag v-if="importResult.failCount" type="danger" style="margin-left:8px">失败{{ importResult.failCount }}条</el-tag>
|
|
|
<div v-if="importResult.failDetails?.length" style="margin-top:8px;color:#f56c6c;font-size:12px">
|
|
|
<div v-for="(d, i) in importResult.failDetails" :key="i">{{ d }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<el-button @click="importVisible = false">关闭</el-button>
|
|
|
<el-button type="primary" :loading="importing" @click="handleImport">确认导入</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
import request from '@/utils/request'
|
|
|
import { useMockMode } from '@/composables/useMockMode'
|
|
|
import { View } from '@element-plus/icons-vue'
|
|
|
import type { ApiResponse, Machine, Workshop, Brand, CollectAddress, Worker } from '@/types'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const { isMock } = useMockMode()
|
|
|
|
|
|
const loading = ref(false)
|
|
|
const tableData = ref<Machine[]>([])
|
|
|
const selectedRows = ref<Machine[]>([])
|
|
|
const workshopList = ref<Workshop[]>([])
|
|
|
const brandList = ref<Brand[]>([])
|
|
|
const addressList = ref<CollectAddress[]>([])
|
|
|
const workerList = ref<Worker[]>([])
|
|
|
|
|
|
const query = reactive({
|
|
|
workshopId: undefined as number | undefined,
|
|
|
isOnline: undefined as number | undefined,
|
|
|
brandId: undefined as number | undefined,
|
|
|
keyword: '',
|
|
|
})
|
|
|
const page = reactive({ page: 1, pageSize: 20, total: 0 })
|
|
|
|
|
|
// 弹窗
|
|
|
const dialogVisible = ref(false)
|
|
|
const submitting = ref(false)
|
|
|
const editingId = ref<number | null>(null)
|
|
|
const formRef = ref<FormInstance>()
|
|
|
const form = reactive({
|
|
|
name: '', deviceCode: '', workshopId: undefined as number | undefined,
|
|
|
collectAddressId: undefined as number | undefined, brandId: undefined as number | undefined, brandName: '',
|
|
|
ipAddress: '', workerId: undefined as number | undefined,
|
|
|
})
|
|
|
|
|
|
const formRules: FormRules = {
|
|
|
name: [{ required: true, message: '请输入机床名称', trigger: 'blur' }],
|
|
|
deviceCode: [{ required: true, message: '请输入device_code', trigger: 'blur' }],
|
|
|
workshopId: [{ required: true, message: '请选择车间', trigger: 'change' }],
|
|
|
collectAddressId: [{ required: true, message: '请选择采集地址', trigger: 'change' }],
|
|
|
ipAddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
|
|
|
}
|
|
|
|
|
|
// 导入
|
|
|
const importVisible = ref(false)
|
|
|
const importing = ref(false)
|
|
|
const importFile = ref<File | null>(null)
|
|
|
const importResult = ref<any>(null)
|
|
|
|
|
|
function goDetail(id: number) {
|
|
|
router.push((isMock.value ? '/mock/machine/' : '/machine/') + id)
|
|
|
}
|
|
|
|
|
|
/** 查看详情：在普通路由和 Mock 路径下跳转到详情页 */
|
|
|
function handleViewDetail(row: Machine) {
|
|
|
const currentPath = window.location.pathname
|
|
|
const isMockPath = currentPath.startsWith('/mock')
|
|
|
const prefix = isMockPath ? '/mock' : ''
|
|
|
router.push(`${prefix}/machine/${row.id}`)
|
|
|
}
|
|
|
|
|
|
async function loadData() {
|
|
|
loading.value = true
|
|
|
try {
|
|
|
const r: ApiResponse<{ items: Machine[]; total?: number }> = await request.get('/admin/machine', { params: { ...query, page: page.page, pageSize: page.pageSize } })
|
|
|
tableData.value = r.data?.items || []
|
|
|
page.total = r.data?.total ?? 0
|
|
|
} finally { loading.value = false }
|
|
|
}
|
|
|
|
|
|
function resetQuery() {
|
|
|
Object.assign(query, { workshopId: undefined, isOnline: undefined, brandId: undefined, keyword: '' })
|
|
|
page.page = 1
|
|
|
loadData()
|
|
|
}
|
|
|
|
|
|
/** 每页条数变化时重置到第1页并重新加载 */
|
|
|
function handleSizeChange() {
|
|
|
page.page = 1
|
|
|
loadData()
|
|
|
}
|
|
|
|
|
|
function handleAdd() {
|
|
|
editingId.value = null
|
|
|
Object.assign(form, { name: '', deviceCode: '', workshopId: undefined, collectAddressId: undefined, brandId: undefined, brandName: '', ipAddress: '', workerId: undefined })
|
|
|
dialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
function handleEdit(row: Machine) {
|
|
|
editingId.value = row.id
|
|
|
Object.assign(form, {
|
|
|
name: row.name, deviceCode: row.deviceCode, workshopId: row.workshopId,
|
|
|
collectAddressId: row.collectAddressId, brandId: row.brandId, brandName: row.brandName,
|
|
|
ipAddress: row.ipAddress, workerId: row.workerId,
|
|
|
})
|
|
|
dialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
function onAddressChange(addressId: number) {
|
|
|
const addr = addressList.value.find((a: CollectAddress) => a.id === addressId)
|
|
|
form.brandId = addr ? addr.brandId : undefined
|
|
|
form.brandName = addr ? addr.brandName : ''
|
|
|
}
|
|
|
|
|
|
async function handleSubmit() {
|
|
|
const valid = await formRef.value?.validate().catch(() => false)
|
|
|
if (!valid) return
|
|
|
submitting.value = true
|
|
|
try {
|
|
|
await request[editingId.value ? 'put' : 'post'](editingId.value ? `/admin/machine/${editingId.value}` : '/admin/machine', { ...form })
|
|
|
ElMessage.success('保存成功')
|
|
|
dialogVisible.value = false
|
|
|
loadData()
|
|
|
} finally { submitting.value = false }
|
|
|
}
|
|
|
|
|
|
async function handleDelete(row: Machine) {
|
|
|
await ElMessageBox.confirm(`确定删除【${row.name}】？此操作不可恢复。`, '提示', { type: 'warning' })
|
|
|
await request.delete(`/admin/machine/${row.id}`)
|
|
|
ElMessage.success('已删除')
|
|
|
loadData()
|
|
|
}
|
|
|
|
|
|
async function batchToggle(isEnabled: number) {
|
|
|
await ElMessageBox.confirm(`确定对选中的${selectedRows.value.length}项操作？`, '提示', { type: 'warning' })
|
|
|
// 逐个调用toggle接口（后端只提供单个toggle）
|
|
|
for (const row of selectedRows.value) {
|
|
|
if ((isEnabled === 1 && !row.isEnabled) || (isEnabled === 0 && row.isEnabled)) {
|
|
|
await request.put(`/admin/machine/${row.id}/toggle`)
|
|
|
}
|
|
|
}
|
|
|
ElMessage.success('操作成功')
|
|
|
loadData()
|
|
|
}
|
|
|
|
|
|
async function handleBatchDelete() {
|
|
|
await ElMessageBox.confirm(`确定删除选中的${selectedRows.value.length}台机床？此操作不可恢复。`, '提示', { type: 'warning' })
|
|
|
await request.post('/admin/machine/batch-delete', { ids: selectedRows.value.map((r: Machine) => r.id) })
|
|
|
ElMessage.success('批量删除成功')
|
|
|
loadData()
|
|
|
}
|
|
|
|
|
|
async function handleExport() {
|
|
|
const baseURL = (request as any).defaults?.baseURL || ''
|
|
|
const qs = new URLSearchParams(query as any).toString()
|
|
|
window.open(`${baseURL}/admin/machine/export?${qs}`, '_blank')
|
|
|
ElMessage.success('正在导出...')
|
|
|
}
|
|
|
|
|
|
function onFileChange(file: any) { importFile.value = file.raw }
|
|
|
function downloadTemplate() { window.open('/api/admin/machine/import-template', '_blank') }
|
|
|
|
|
|
async function handleImport() {
|
|
|
if (!importFile.value) { ElMessage.warning('请选择文件'); return }
|
|
|
importing.value = true
|
|
|
try {
|
|
|
const formData = new FormData()
|
|
|
formData.append('file', importFile.value)
|
|
|
const r = await request.post('/admin/machine/import', formData) as any
|
|
|
importResult.value = r.data
|
|
|
if (r.data?.successCount) ElMessage.success(`成功导入${r.data.successCount}条`)
|
|
|
loadData()
|
|
|
} finally { importing.value = false }
|
|
|
}
|
|
|
|
|
|
async function loadDrops() {
|
|
|
const w: ApiResponse<{ items: Workshop[] }> = await request.get('/admin/workshop')
|
|
|
const b: ApiResponse<{ items: Brand[] }> = await request.get('/admin/brand')
|
|
|
const a: ApiResponse<{ items: CollectAddress[] }> = await request.get('/admin/collect-address')
|
|
|
const wk: ApiResponse<{ items: Worker[] }> = await request.get('/admin/worker')
|
|
|
workshopList.value = w.data?.items ?? []
|
|
|
brandList.value = b.data?.items ?? []
|
|
|
addressList.value = a.data?.items ?? []
|
|
|
workerList.value = wk.data?.items ?? []
|
|
|
}
|
|
|
|
|
|
onMounted(() => { loadData(); loadDrops() })
|
|
|
</script>
|