|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- 搜索表单 -->
|
|
|
<div class="search-form">
|
|
|
<el-form :model="searchForm" inline data-id="search-form">
|
|
|
- <el-form-item label="机器ID">
|
|
|
+ <el-form-item :label="t('机器ID')">
|
|
|
<el-input
|
|
|
v-model="searchForm.machineId"
|
|
|
placeholder="请输入机器ID"
|
|
|
@@ -12,7 +12,7 @@
|
|
|
@keyup.enter="handleSearch"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="名称">
|
|
|
+ <el-form-item :label="t('名称')">
|
|
|
<el-input
|
|
|
v-model="searchForm.name"
|
|
|
placeholder="请输入名称"
|
|
|
@@ -21,14 +21,14 @@
|
|
|
@keyup.enter="handleSearch"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="启用状态">
|
|
|
+ <el-form-item :label="t('启用状态')">
|
|
|
<el-select v-model="searchForm.enabled" placeholder="全部" clearable data-id="search-enabled">
|
|
|
<el-option label="全部" value="" />
|
|
|
<el-option label="已启用" :value="true" />
|
|
|
<el-option label="已禁用" :value="false" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="创建时间">
|
|
|
+ <el-form-item :label="t('创建时间')">
|
|
|
<el-date-picker
|
|
|
v-model="searchForm.dateRange"
|
|
|
type="daterange"
|
|
|
@@ -40,18 +40,24 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" :icon="Search" data-id="btn-search" @click="handleSearch">查询</el-button>
|
|
|
- <el-button :icon="RefreshRight" data-id="btn-reset" @click="handleReset">重置</el-button>
|
|
|
- <el-button type="primary" :icon="Plus" data-id="btn-add-machine" @click="handleAdd">新增</el-button>
|
|
|
+ <el-button type="primary" :icon="Search" data-id="btn-search" @click="handleSearch">
|
|
|
+ {{ t('查询') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button :icon="RefreshRight" data-id="btn-reset" @click="handleReset">{{ t('重置') }}</el-button>
|
|
|
+ <el-button type="primary" :icon="Plus" data-id="btn-add-machine" @click="handleAdd">
|
|
|
+ {{ t('新增') }}
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
|
|
|
<!-- 批量操作栏 -->
|
|
|
<div v-if="selectedRows.length > 0" class="batch-actions">
|
|
|
- <span class="batch-info">已选择 {{ selectedRows.length }} 项</span>
|
|
|
- <el-button type="danger" :icon="Delete" :loading="deleteLoading" @click="handleBatchDelete">批量删除</el-button>
|
|
|
- <el-button @click="clearSelection">取消选择</el-button>
|
|
|
+ <span class="batch-info">{{ t('已选择') }} {{ selectedRows.length }} {{ t('项') }}</span>
|
|
|
+ <el-button type="danger" :icon="Delete" :loading="deleteLoading" @click="handleBatchDelete">
|
|
|
+ {{ t('批量删除') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="clearSelection">{{ t('取消选择') }}</el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 数据表格 -->
|
|
|
@@ -69,33 +75,43 @@
|
|
|
>
|
|
|
<el-table-column type="selection" width="50" align="center" />
|
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
- <el-table-column prop="machineId" label="机器ID" min-width="120" sortable="custom" show-overflow-tooltip />
|
|
|
- <el-table-column prop="name" label="名称" min-width="120" sortable="custom" show-overflow-tooltip>
|
|
|
+ <el-table-column
|
|
|
+ prop="machineId"
|
|
|
+ :label="t('机器ID')"
|
|
|
+ min-width="120"
|
|
|
+ sortable="custom"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column prop="name" :label="t('名称')" min-width="120" sortable="custom" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
<el-link type="primary" :data-id="`link-edit-${row.machineId}`" @click="handleEdit(row)">
|
|
|
{{ row.name }}
|
|
|
</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="location" label="位置" min-width="120" show-overflow-tooltip />
|
|
|
- <el-table-column prop="description" label="描述" min-width="150" show-overflow-tooltip />
|
|
|
- <el-table-column prop="cameraCount" label="摄像头数" sortable="custom" align="center">
|
|
|
+ <el-table-column prop="location" :label="t('位置')" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="description" :label="t('描述')" min-width="150" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="cameraCount" :label="t('摄像头数')" sortable="custom" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag type="info">{{ row.cameraCount || 0 }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="enabled" label="启用" width="80" sortable="custom" align="center">
|
|
|
+ <el-table-column prop="enabled" :label="t('启用')" width="80" sortable="custom" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag :type="row.enabled ? 'success' : 'info'">
|
|
|
- {{ row.enabled ? '是' : '否' }}
|
|
|
+ {{ row.enabled ? t('是') : t('否') }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="createdAt" label="创建时间" width="175" sortable="custom" align="center" />
|
|
|
- <el-table-column label="操作" width="150" align="center" fixed="right">
|
|
|
+ <el-table-column prop="createdAt" :label="t('创建时间')" width="160" sortable="custom" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDateTime(row.createdAt) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="t('操作')" width="150" align="center" fixed="right">
|
|
|
<template #default="{ row }">
|
|
|
<el-button type="primary" link :icon="Edit" :data-id="`btn-edit-${row.machineId}`" @click="handleEdit(row)">
|
|
|
- 编辑
|
|
|
+ {{ t('编辑') }}
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
type="danger"
|
|
|
@@ -105,7 +121,7 @@
|
|
|
:data-id="`btn-delete-${row.machineId}`"
|
|
|
@click="handleDelete(row)"
|
|
|
>
|
|
|
- 删除
|
|
|
+ {{ t('删除') }}
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -129,16 +145,16 @@
|
|
|
<!-- 新增/编辑弹窗 -->
|
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close data-id="dialog-machine">
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px" data-id="form-machine">
|
|
|
- <el-form-item label="机器ID" prop="machineId">
|
|
|
+ <el-form-item :label="t('机器ID')" prop="machineId">
|
|
|
<el-input v-model="form.machineId" placeholder="请输入机器ID" :disabled="isEdit" data-id="input-machine-id" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="名称" prop="name">
|
|
|
+ <el-form-item :label="t('名称')" prop="name">
|
|
|
<el-input v-model="form.name" placeholder="请输入名称" data-id="input-name" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="位置" prop="location">
|
|
|
+ <el-form-item :label="t('位置')" prop="location">
|
|
|
<el-input v-model="form.location" placeholder="请输入位置" data-id="input-location" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="描述" prop="description">
|
|
|
+ <el-form-item :label="t('描述')" prop="description">
|
|
|
<el-input
|
|
|
v-model="form.description"
|
|
|
type="textarea"
|
|
|
@@ -147,13 +163,15 @@
|
|
|
data-id="input-description"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-if="isEdit" label="启用状态">
|
|
|
+ <el-form-item v-if="isEdit" :label="t('启用状态')">
|
|
|
<el-switch v-model="form.enabled" data-id="switch-enabled" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
- <el-button data-id="btn-cancel" @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" :loading="submitLoading" data-id="btn-submit" @click="handleSubmit">确定</el-button>
|
|
|
+ <el-button data-id="btn-cancel" @click="dialogVisible = false">{{ t('取消') }}</el-button>
|
|
|
+ <el-button type="primary" :loading="submitLoading" data-id="btn-submit" @click="handleSubmit">
|
|
|
+ {{ t('确定') }}
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -165,6 +183,16 @@ import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type TableI
|
|
|
import { Plus, Edit, Delete, Search, RefreshRight } from '@element-plus/icons-vue'
|
|
|
import { listMachines, addMachine, updateMachine, deleteMachine } from '@/api/machine'
|
|
|
import type { MachineDTO, MachineAddRequest, MachineUpdateRequest } from '@/types'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+// 格式化时间
|
|
|
+function formatDateTime(dateStr: string | undefined): string {
|
|
|
+ if (!dateStr) return '-'
|
|
|
+ return dayjs(dateStr).format('YYYY-MM-DD HH:mm')
|
|
|
+}
|
|
|
|
|
|
const loading = ref(false)
|
|
|
const submitLoading = ref(false)
|
|
|
@@ -280,11 +308,11 @@ const form = reactive<{
|
|
|
})
|
|
|
|
|
|
const isEdit = computed(() => !!form.id)
|
|
|
-const dialogTitle = computed(() => (isEdit.value ? '编辑机器' : '新增机器'))
|
|
|
+const dialogTitle = computed(() => (isEdit.value ? t('编辑机器') : t('新增机器')))
|
|
|
|
|
|
const rules: FormRules = {
|
|
|
- machineId: [{ required: true, message: '请输入机器ID', trigger: 'blur' }],
|
|
|
- name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
|
|
+ machineId: [{ required: true, message: t('请输入机器ID'), trigger: 'blur' }],
|
|
|
+ name: [{ required: true, message: t('请输入名称'), trigger: 'blur' }]
|
|
|
}
|
|
|
|
|
|
async function getList() {
|
|
|
@@ -335,20 +363,20 @@ async function handleBatchDelete() {
|
|
|
if (selectedRows.value.length === 0) return
|
|
|
|
|
|
try {
|
|
|
- await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 台机器吗?`, '提示', {
|
|
|
+ await ElMessageBox.confirm(`${t('确定要删除选中的')} ${selectedRows.value.length} ${t('台机器吗?')}`, t('提示'), {
|
|
|
type: 'warning'
|
|
|
})
|
|
|
deleteLoading.value = true
|
|
|
// 逐个删除
|
|
|
const deletePromises = selectedRows.value.map((row) => deleteMachine(row.id))
|
|
|
await Promise.all(deletePromises)
|
|
|
- ElMessage.success(`成功删除 ${selectedRows.value.length} 台机器`)
|
|
|
+ ElMessage.success(`${t('成功删除')} ${selectedRows.value.length} ${t('台机器')}`)
|
|
|
clearSelection()
|
|
|
getList()
|
|
|
} catch (error) {
|
|
|
if (error !== 'cancel') {
|
|
|
- console.error('批量删除失败', error)
|
|
|
- ElMessage.error('批量删除失败')
|
|
|
+ console.error(t('批量删除失败'), error)
|
|
|
+ ElMessage.error(t('批量删除失败'))
|
|
|
}
|
|
|
} finally {
|
|
|
deleteLoading.value = false
|
|
|
@@ -383,18 +411,18 @@ async function handleDelete(row: MachineDTO) {
|
|
|
if (deleteLoading.value) return
|
|
|
|
|
|
try {
|
|
|
- await ElMessageBox.confirm(`确定要删除机器 "${row.name}" 吗?`, '提示', {
|
|
|
+ await ElMessageBox.confirm(`${t('确定要删除机器')} "${row.name}" ${t('吗?')}`, t('提示'), {
|
|
|
type: 'warning'
|
|
|
})
|
|
|
deleteLoading.value = true
|
|
|
const res = await deleteMachine(row.id)
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success('删除成功')
|
|
|
+ ElMessage.success(t('删除成功'))
|
|
|
getList()
|
|
|
}
|
|
|
} catch (error) {
|
|
|
if (error !== 'cancel') {
|
|
|
- console.error('删除失败', error)
|
|
|
+ console.error(t('删除失败'), error)
|
|
|
}
|
|
|
} finally {
|
|
|
deleteLoading.value = false
|
|
|
@@ -418,7 +446,7 @@ async function handleSubmit() {
|
|
|
}
|
|
|
const res = await updateMachine(updateData)
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success('修改成功')
|
|
|
+ ElMessage.success(t('修改成功'))
|
|
|
dialogVisible.value = false
|
|
|
getList()
|
|
|
}
|
|
|
@@ -431,7 +459,7 @@ async function handleSubmit() {
|
|
|
}
|
|
|
const res = await addMachine(addData)
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success('新增成功')
|
|
|
+ ElMessage.success(t('新增成功'))
|
|
|
dialogVisible.value = false
|
|
|
getList()
|
|
|
}
|