Explorar o código

fix(machine): update createdAt column to display timestamp

- Adjusted the createdAt column width for better alignment.
- Added a template to display the creation timestamp for each machine entry.
yb hai 2 semanas
pai
achega
63a3587f92
Modificáronse 1 ficheiros con 68 adicións e 40 borrados
  1. 68 40
      src/views/machine/index.vue

+ 68 - 40
src/views/machine/index.vue

@@ -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()
           }