Vue3 + Element Plus版本iot前端迁移到vben版本

apps/web-antd/src/views/iot/ota/firmware/index.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { $t } from '#/locales';
+
+import {
+  handleDeleteFirmware,
+  useGridFormSchema,
+  useGridOptions,
+} from './data';
+import Form from '../modules/OtaFirmwareForm.vue';
+
+defineOptions({ name: 'IoTOtaFirmware' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建固件 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑固件 */
+function handleEdit(row: IoTOtaFirmwareApi.Firmware) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除固件 */
+async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
+  await handleDeleteFirmware(row, onRefresh);
+}
+
+/** 查看固件详情 */
+function handleDetail(row: IoTOtaFirmwareApi.Firmware) {
+  formModalApi.setData({ type: 'view', id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: useGridOptions(),
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="固件列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['固件']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+
+      <!-- 产品名称列 -->
+      <template #product="{ row }">
+        <span class="text-gray-700">{{ row.productName || '未知产品' }}</span>
+      </template>
+
+      <!-- 固件文件列 -->
+      <template #fileUrl="{ row }">
+        <a
+          v-if="row.fileUrl"
+          :href="row.fileUrl"
+          target="_blank"
+          download
+          class="text-primary cursor-pointer hover:underline"
+        >
+          <Icon icon="ant-design:download-outlined" class="mr-1" />
+          下载固件
+        </a>
+        <span v-else class="text-gray-400">无文件</span>
+      </template>
+
+      <!-- 操作列 -->
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>