feat: 升级设备的ota包

src/api/iot/ota.ts

@@ -16,11 +16,11 @@ export const getOtaPkgList = (params: IOT.API.OTA.QueryParams) => {
   })
 }
 
-export const addOtaPkg = (params: IOT.API.OTA.BodyParams) => {
+export const addOtaPkg = (data: IOT.API.OTA.BodyParams) => {
   return request<string>({
     url: '/otaPkg',
     method: 'POST',
-    params
+    data
   })
 }
 

src/components/MicroComponents/index.tsx

@@ -97,7 +97,7 @@ export const SelectTsx = defineComponent({
       default: () => {}
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:value'],
   setup (props, context) {
     const list = ref<{
       name: string,
@@ -113,10 +113,10 @@ export const SelectTsx = defineComponent({
       list.value = r
     })
 
-    const onInput = (value: string) => context.emit('update:modelValue', value)
+    const onInput = (value: string) => context.emit('update:value', value)
 
     return () => (
-      <a-select value={props.modelValue} onChange={(value: string) => onInput(value)}>
+      <a-select value={props.modelValue} allowClear onChange={(value: string) => onInput(value)}>
        {
         list.value.map(item => <a-select-option key={item.key} value={item.value}>{item.name}</a-select-option>)
        }

src/pages/Iot/device/components/ota.vue

@@ -1,14 +1,14 @@
 <template>
   <a-card>
-    <a-row  align="middle" style="width: 100%;height: 68px" class="title">
+    <a-row  align="middle" justify="space-between" style="width: 100%;height: 68px" class="title">
       <a-col>
         <a-space>
           <span>设备名称：{{state.otaDetail.otaPkgLabel}}</span>
           <span>设备版本：{{state.otaDetail.otaPkgVersion}}</span>
         </a-space>
       </a-col>
-      <a-col>
-        <a-button type="primary" >下发OTA程序包</a-button>
+      <a-col :span="2" >
+        <a-button type="primary" @click="openModal" >下发OTA程序包</a-button>
       </a-col>
     </a-row>
     <a-table
@@ -28,12 +28,36 @@
       </template>
     </a-table>
   </a-card>
+
+  <modal-pro
+    label="下发OTA程序包"
+    :open="state.visible"
+    @cancel="state.visible = false"
+    @ok="ok"
+  >
+  <a-form  :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
+    <a-form-item label="所属产品" v-bind="validateInfos.deviceId" >
+      <!-- 这个写法丑陋的一批 -->
+      <select-tsx
+        v-model:value="otaState.deviceId"
+        :request="async () => {
+          const { data } = await DeviceContriller.list()
+          return data.map(item => ({name: item.deviceLabel, value: item.id, key: item.id}))
+        }"
+      />
+      </a-form-item>
+      <a-form-item label="所属产品" v-bind="validateInfos.otaPkgId" >
+      </a-form-item>
+  </a-form>
+  </modal-pro>
 </template>
 
 <script setup lang="ts" >
 import { DeviceContriller } from '@/controller'
 import { onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
+import { Form } from 'ant-design-vue'
+import { SelectTsx } from '@/components/MicroComponents/index'
 
 const route = useRoute()
 
@@ -64,21 +88,47 @@ const queryState = reactive<IOT.API.DEVICE.OtaQueryParams & {total: number}>({
   pageSize: 10,
   deviceId: deviceId,
   otaLabel: '',
-  otaStatus: 'DELIVERED',
+  otaStatus: '',
   otaVersion: '',
   total: 0
 })
 
 const state = reactive<{
   loading: boolean,
+  visible: boolean
   dataSource: IOT.API.DEVICE.Ota[]
   otaDetail: Partial<IOT.API.DEVICE.Ota>
 }>({
   loading: false,
+  visible: false,
   dataSource: [],
   otaDetail: {}
 })
 
+const otaState = reactive({
+  deviceId: '',
+  otaPkgId: ''
+})
+
+const useForm = Form.useForm
+
+const { resetFields, validate, validateInfos } = useForm(otaState, {
+  deviceId: [{ required: true, message: '请选择设备' }],
+  otaPkgId: [{ required: true, message: '请选择OTA程序包' }]
+})
+
+const openModal = () => {
+  state.visible = true
+}
+
+const ok = () => {
+  validate().then(async () => {
+    await DeviceContriller.upgradationOtaByDeviceId(otaState)
+    state.visible = false
+    getOtaPkgByDeviceId()
+  })
+}
+
 const changePage = ({ current }) => {
   queryState.page = current
   getOtaPkgPageByDeviceId()

src/pages/Iot/ota/index.vue

@@ -1,10 +1,31 @@
 <template>
 <a-card title="ota包管理" >
-  <a-row>
-    <a-col>
-
+  <a-row justify="space-between" >
+    <a-col :span="16" >
+      <a-row :gutter="[8, 8]" >
+        <a-col>
+          包名：<a-input allowClear style="width: 170px;" v-model:value="queryState.label" ></a-input>
+        </a-col>
+        <a-col>
+          版本：<a-input allowClear style="width: 170px;" v-model:value="queryState.version" ></a-input>
+        </a-col>
+        <a-col>
+          包类型：<a-select style="width: 170px;" allowClear v-model:value="queryState.pkgType" >
+          <a-select-option
+              v-for="item in OtaController.pkgTypeList"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{item.label}}
+            </a-select-option>
+        </a-select>
+        </a-col>
+        <a-col>
+          <a-button type='primary' @click="getOtaPkgPage" > 搜索 </a-button>
+        </a-col>
+      </a-row>
     </a-col>
-    <a-col>
+    <a-col :span="2" >
       <a-button type="primary" @click="openModal('add', {})">新增</a-button>
     </a-col>
   </a-row>
@@ -17,9 +38,11 @@
       @change="changePage"
     >
       <template #bodyCell="{column, record}">
+        <template v-if="column.key == 'pkgType'" >
+          {{record.pkgType === PkgTypeEnum.FILE_URL ? '网络地址' : '压缩包' }}
+        </template>
         <template v-if="column.key === 'action'">
             <a-space>
-              <a href="#" @click="openModal('update', record)">编辑</a>
               <a-popconfirm
                   title="确实要删除吗？"
                   ok-text="确定"
@@ -89,7 +112,8 @@ const columns = [
   },
   {
     title: '包类型',
-    dataIndex: 'pkgType'
+    dataIndex: 'pkgType',
+    key: 'pkgType'
   },
   {
     title: '包地址',
@@ -169,6 +193,7 @@ const closeModal = async () => {
 const ok = () => {
   validate().then(async () => {
     await OtaController.add(otaPkgState)
+    getOtaPkgPage()
     state.visible = false
   })
 }

src/type/iot.d.ts

@@ -263,7 +263,7 @@ declare namespace IOT {
         deviceId: string
         otaLabel: string
         otaVersion: string
-        otaStatus: 'QUEUED' | 'SENT' | 'DELIVERED' | 'SUCCESSFUL' | 'TIMEOUT' | 'FAILED'
+        otaStatus: 'QUEUED' | 'SENT' | 'DELIVERED' | 'SUCCESSFUL' | 'TIMEOUT' | 'FAILED' | ''
       }
     }