feat（iot）：优化 ota 的代码风格（v5）

apps/web-antd/src/views/iot/ota/firmware/data.ts

@@ -1,12 +1,17 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
+import type { IotProductApi } from '#/api/iot/product/product';
 
 import { formatDateTime } from '@vben/utils';
 
 import { getSimpleProductList } from '#/api/iot/product/product';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let productList: IotProductApi.Product[] = [];
+getSimpleProductList().then((data) => (productList = data));
+
 /** 固件详情的描述字段 */
 export function useDetailSchema(): DescriptionItemSchema[] {
   return [
@@ -124,9 +129,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  getProductName?: (productId: number) => string | undefined,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -149,13 +152,12 @@ export function useGridColumns(
       title: '固件描述',
       minWidth: 200,
     },
-    // TODO DONE @AI：后端 firmware 没返回 productName，formatter 调 getProductName resolver；resolver + productList 反应式状态由 index.vue 注入（对齐 infra/codegen 模式）
     {
       field: 'productId',
       title: '所属产品',
       minWidth: 150,
       formatter: ({ cellValue }) =>
-        getProductName?.(cellValue) || (cellValue ? '加载中...' : '-'),
+        productList.find((p) => p.id === cellValue)?.name || '-',
     },
     {
       field: 'fileUrl',

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
 
 import { onMounted, ref } from 'vue';

apps/web-antd/src/views/iot/ota/firmware/detail/modules/info.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
 
 import { Card } from 'ant-design-vue';
@@ -8,7 +8,6 @@ import { useDescription } from '#/components/description';
 import { useDetailSchema } from '../../data';
 
 /** IoT OTA 固件基本信息 */
-// TODO DONE @AI：不需要；script setup 默认用文件名生成 __name（这里是 info），devtools 能识别；跟之前 upgrade-statistics / list 处理一致
 defineProps<{
   firmware: IoTOtaFirmwareApi.Firmware;
   loading?: boolean;

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

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
-import type { IotProductApi } from '#/api/iot/product/product';
 
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -13,26 +11,13 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
-import { getSimpleProductList } from '#/api/iot/product/product';
 import { $t } from '#/locales';
 
-import OtaFirmwareForm from './modules/form.vue';
 import { useGridColumns, useGridFormSchema } from './data';
+import OtaFirmwareForm from './modules/form.vue';
 
 const { push } = useRouter();
 
-const productList = ref<IotProductApi.Product[]>([]);
-
-/** 根据产品编号查找名称 */
-// TODO @AI：需要类似别的模块，拿到 data.ts 里么？
-function getProductName(productId: number | undefined) {
-  if (!productId) {
-    return '-';
-  }
-  const product = productList.value.find((p) => p.id === productId);
-  return product ? product.name : '加载中...';
-}
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: OtaFirmwareForm,
   destroyOnClose: true,
@@ -80,7 +65,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(getProductName),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -104,11 +89,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<IoTOtaFirmwareApi.Firmware>,
 });
-
-/** 初始化加载产品列表 */
-onMounted(async () => {
-  productList.value = (await getSimpleProductList()) || [];
-});
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
 
 import { computed, ref } from 'vue';
@@ -17,9 +17,7 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-const emit = defineEmits<{
-  success: [];
-}>();
+const emit = defineEmits(['success']);
 
 const formData = ref<IoTOtaFirmwareApi.Firmware>();
 
@@ -30,13 +28,15 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
-  schema: useFormSchema(),
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
   layout: 'horizontal',
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 

apps/web-antd/src/views/iot/ota/task/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
 
 import { ref } from 'vue';

apps/web-antd/src/views/iot/ota/task/modules/form.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -19,6 +19,8 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
   layout: 'horizontal',
   schema: useFormSchema(),

apps/web-antd/src/views/iot/ota/task/modules/info.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
 
 import { Card } from 'ant-design-vue';

apps/web-antd/src/views/iot/ota/task/modules/list.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
 
@@ -121,6 +121,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 label: '新增',
                 type: 'primary',
                 icon: ACTION_ICON.ADD,
+                auth: ['iot:ota-task:create'],
                 onClick: handleCreate,
               },
             ]"
@@ -134,6 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '详情',
               type: 'link',
               icon: ACTION_ICON.VIEW,
+              auth: ['iot:ota-task:query'],
               onClick: handleDetail.bind(null, row),
             },
             {
@@ -141,6 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:ota-task:cancel'],
               ifShow: row.status === IoTOtaTaskStatusEnum.IN_PROGRESS.value,
               popConfirm: {
                 title: '确认要取消该升级任务吗？',

apps/web-antd/src/views/iot/ota/task/modules/statistics.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';

apps/web-antd/src/views/iot/ota/task/record/modules/list.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IoTOtaTaskRecordApi } from '#/api/iot/ota/task/record';
 
@@ -19,9 +19,7 @@ const props = defineProps<{
   taskId: number | undefined;
 }>();
 
-const emit = defineEmits<{
-  cancelled: [];
-}>();
+const emit = defineEmits(['cancelled']);
 
 const activeTab = ref('');
 
@@ -119,6 +117,7 @@ defineExpose({ refresh: () => gridApi.query() });
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:ota-task-record:cancel'],
               ifShow: [
                 IoTOtaTaskRecordStatusEnum.PENDING.value,
                 IoTOtaTaskRecordStatusEnum.PUSHED.value,