feat: 远程升级 升级任务

src/components/AIcon/index.tsx

@@ -55,7 +55,8 @@ const iconKeys = [
     'LikeOutlined',
     'ArrowLeftOutlined',
     'DownloadOutlined',
-    'PauseOutlined'
+    'PauseOutlined',
+    'ControlOutlined',
 ]
 
 const Icon = (props: {type: string}) => {

src/views/device/Firmware/Task/Save/SelectDevices.vue

@@ -5,7 +5,11 @@
         :disabled="true"
     >
         <template #addonAfter>
-            <AIcon type="EditOutlined" @click="onVisible" />
+            <AIcon
+                :class="data.view ? 'disabled' : ''"
+                type="EditOutlined"
+                @click="onVisible"
+            />
         </template>
     </a-input>
     <a-modal
@@ -78,6 +82,13 @@ import moment from 'moment';
 type T = any;
 const emit = defineEmits(['update:modelValue', 'change']);
 
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
 const route = useRoute();
 const params = ref<Record<string, any>>({});
 const visible = ref(false);
@@ -212,15 +223,18 @@ const cancelSelect = () => {
 };
 
 const handleOk = () => {
-    checkLable.value = _selectedRowKeys.value
+    checkLable.value = updateSelect(_selectedRowKeys.value);
-        .map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
-        .toString();
     emit('update:modelValue', _selectedRowKeys.value);
     visible.value = false;
 };
 
+const updateSelect = (selectedRowKeys: T[]) =>
+    selectedRowKeys
+        .map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
+        .toString();
+
 const onVisible = () => {
-    visible.value = true;
+    !props.data.view && (visible.value = true);
 };
 
 const handleCancel = () => {
@@ -236,6 +250,10 @@ onMounted(() => {
                     checkAllDataMap.set(item.id, item.name);
                     return item.id;
                 });
+                if (props.data.id) {
+                    checkLable.value = updateSelect(props.data.deviceId);
+                    emit('update:modelValue', props.data.deviceId);
+                }
             }
         },
     );
@@ -264,9 +282,8 @@ const handleSearch = (e: any) => {
 </script>
 
 <style lang="less" scoped>
-.form {
+.disabled {
-    .form-submit {
+    pointer-events: auto !important;
-        background-color: @primary-color !important;
+    cursor: not-allowed !important;
-    }
 }
 </style>

src/views/device/Firmware/Task/Save/index.vue

@@ -15,17 +15,20 @@
             :model="formData"
             name="basic"
             autocomplete="off"
+            ref="formRef"
+            :rules="rules"
         >
             <a-row :gutter="[24, 0]">
                 <a-col :span="24">
-                    <a-form-item label="任务名称" v-bind="validateInfos.name">
+                    <a-form-item label="任务名称" name="name">
                         <a-input
                             placeholder="请输入任务名称"
                             v-model:value="formData.name"
+                            :disabled="view"
                     /></a-form-item>
                 </a-col>
                 <a-col :span="24"
-                    ><a-form-item label="推送方式" v-bind="validateInfos.mode">
+                    ><a-form-item label="推送方式" name="mode">
                         <a-select
                             v-model:value="formData.mode"
                             :options="[
@@ -37,18 +40,20 @@
                             show-search
                             :filter-option="filterOption"
                             @change="changeMode"
+                            :disabled="view"
                         /> </a-form-item
                 ></a-col>
                 <a-col :span="12" v-if="formData.mode === 'push'"
                     ><a-form-item
                         label="响应超时时间"
-                        v-bind="validateInfos.responseTimeoutSeconds"
+                        name="responseTimeoutSeconds"
                     >
                         <a-input-number
                             placeholder="请输入响应超时时间(秒)"
                             style="width: 100%"
                             :min="1"
                             :max="99999"
+                            :disabled="view"
                             v-model:value="
                                 formData.responseTimeoutSeconds
                             " /></a-form-item
@@ -56,79 +61,59 @@
                 <a-col
                     :span="formData.mode === 'push' ? 12 : 24"
                     v-if="formData.mode === 'push' || formData.mode === 'pull'"
-                    ><a-form-item
+                    ><a-form-item label="升级超时时间" name="timeoutSeconds">
-                        label="升级超时时间"
-                        v-bind="validateInfos.timeoutSeconds"
-                    >
                         <a-input-number
                             placeholder="请输入升级超时时间(秒)"
                             style="width: 100%"
                             :min="1"
                             :max="99999"
+                            :disabled="view"
                             v-model:value="
                                 formData.timeoutSeconds
                             " /></a-form-item
                 ></a-col>
                 <a-col :span="12" v-if="!!formData.mode"
-                    ><a-form-item
+                    ><a-form-item label="升级设备" name="releaseType">
-                        label="升级设备"
-                        v-bind="validateInfos.releaseType"
-                    >
                         <a-radio-group
                             v-model:value="formData.releaseType"
                             button-style="solid"
                             @change="changeShareCluster"
+                            :disabled="view"
                         >
                             <a-radio value="all">所有设备</a-radio>
                             <a-radio value="part">选择设备</a-radio>
                         </a-radio-group>
                     </a-form-item>
                 </a-col>
-                <a-col :span="12" v-if="formData.releaseType === 'part'"
+                <a-col :span="12" v-if="formData.releaseType === 'part'">
-                    ><a-form-item
+                    <a-form-item label="选择设备" name="deviceId">
-                        label="选择设备"
-                        v-bind="validateInfos.deviceId"
-                    >
                         <SelectDevices
                             v-model:modelValue="formData.deviceId"
-                            :data="devicesData"
+                            :data="data"
                         ></SelectDevices> </a-form-item
                 ></a-col>
-
                 <a-col :span="24">
-                    <a-form-item
+                    <a-form-item label="说明" name="description">
-                        label="说明"
-                        v-bind="validateInfos.description"
-                    >
                         <a-textarea
                             placeholder="请输入说明"
                             v-model:value="formData.description"
                             :maxlength="200"
                             :rows="3"
                             showCount
+                            :disabled="view"
                         /> </a-form-item
                 ></a-col>
             </a-row>
         </a-form>
     </a-modal>
-    <!-- <SelectDevices v-if="visible" @change="saveChange"></SelectDevices> -->
 </template>
 <script lang="ts" setup name="TaskPage">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
-import { save, update, queryProduct } from '@/api/device/firmware';
+import { queryProduct, saveTask } from '@/api/device/firmware';
 import type { FormInstance } from 'ant-design-vue';
-import type { Properties } from '../../type';
 import SelectDevices from './SelectDevices.vue';
 
-const route = useRoute();
-console.log(111, route.query);
-
-const loading = ref(false);
-const useForm = Form.useForm;
-const productOptions = ref([]);
-const visible = ref(false);
-const devicesData = ref()
 const props = defineProps({
     data: {
         type: Object,
@@ -136,9 +121,16 @@ const props = defineProps({
     },
 });
 
+const formRef = ref<FormInstance>();
+
+const route = useRoute();
+const loading = ref(false);
+const productOptions = ref([]);
 const emit = defineEmits(['change']);
 
-const id = props.data.id;
+const firmwareId = route.query.id;
+const productId = route.query.productId;
+const view = props.data.view;
 
 const formData = ref({
     name: '',
@@ -146,98 +138,48 @@ const formData = ref({
     responseTimeoutSeconds: '',
     timeoutSeconds: '',
     releaseType: 'all',
-    deviceId: [],
+    deviceId: undefined,
     description: '',
 });
 
-const extraValue = ref({});
+const rules = {
-
+    name: [
-const validatorSign = async (_: Record<string, any>, value: string) => {
+        { required: true, message: '请输入任务名称' },
-    // const { releaseType, url } = formData.value;
+        { max: 64, message: '最多可输入64个字符' },
-    // if (value && !!releaseType && !!url && !extraValue.value) {
+    ],
-    //     return extraValue.value[releaseType] !== value
+    mode: [{ required: true, message: '请选择推送方式' }],
-    //         ? Promise.reject('选择设备不一致，请检查文件是否上传正确')
+    responseTimeoutSeconds: [{ required: true, message: '请输入响应超时时间' }],
-    //         : Promise.resolve();
+    timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
-    // } else {
+    releaseType: [{ required: true }],
-    //     return Promise.resolve();
+    deviceId: [{ required: true, message: '请选择设备' }],
-    // }
+    description: [{ max: 200, message: '最多可输入200个字符' }],
 };
 
-const { resetFields, validate, validateInfos } = useForm(
-    formData,
-    reactive({
-        name: [
-            { required: true, message: '请输入任务名称' },
-            { max: 64, message: '最多可输入64个字符' },
-        ],
-        mode: [{ required: true, message: '请选择推送方式' }],
-        responseTimeoutSeconds: [
-            { required: true, message: '请输入响应超时时间' },
-        ],
-        timeoutSeconds: [{ required: true, message: '请输入升级超时时间' }],
-        releaseType: [{ required: true }],
-        deviceId: [
-            { required: true, message: '请选择设备' },
-            { validator: validatorSign },
-        ],
-        description: [{ max: 200, message: '最多可输入200个字符' }],
-    }),
-);
-
 const filterOption = (input: string, option: any) => {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
-const changeMode = (value) => {
-    console.log(111, value, formData.value);
-};
-
-const onChange = () => {
-    visible.value = true;
-};
-const saveChange = () => {
-    visible.value = false;
-};
-
 const onSubmit = async () => {
-    validate()
+    const params = await formRef.value?.validate();
-        .then(async (res) => {
+    loading.value = true;
-            // const product = productOptions.value.find(
+    const resp = await saveTask({
-            //     (item) => item.value === res.mode,
+        ...params,
-            // );
+        firmwareId,
-            // const productName = product.label || props.data?.url;
+        productId,
-            // const size = extraValue.value.length || props.data?.size;
+    });
-            // const params = {
+    loading.value = false;
-            //     ...toRaw(formData.value),
+    resp.success && emit('change', true);
-            //     properties: !!properties ? properties : [],
-            //     productName,
-            //     size,
-            // };
-            // loading.value = true;
-            // const response = !id
-            //     ? await save(params)
-            //     : await update({ ...props.data, ...params });
-            // if (response.status === 200) {
-            //     message.success('操作成功');
-            //     emit('change', true);
-            // }
-            // loading.value = false;
-        })
-        .catch((err) => {
-            loading.value = false;
-        });
 };
 
 const handleOk = () => {
-    onSubmit();
+    return view ? emit('change', false) : onSubmit();
 };
 const handleCancel = () => {
     emit('change', false);
 };
 
-const changeSignMethod = () => {
+const changeShareCluster = () => {
-    formData.value.deviceId = '';
+    formData.value.deviceId = undefined;
-    formData.value.url = '';
 };
 
 onMounted(() => {
@@ -256,16 +198,14 @@ watch(
     () => props.data,
     (value) => {
         if (value.id) {
-            formData.value = value;
+            formData.value = {
+                ...value,
+                releaseType: value?.deviceId ? 'part' : 'all',
+            };
         }
     },
     { immediate: true, deep: true },
 );
-watch(
-    () => extraValue.value,
-    () => validate('deviceId'),
-    { deep: true },
-);
 </script>
 
 <style lang="less" scoped>

src/views/device/Firmware/Task/index.vue

@@ -59,10 +59,10 @@
     </page-container>
 </template>
 <script lang="ts" setup name="CertificatePage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { task, startTask, stopTask } from '@/api/device/firmware';
 import { message } from 'ant-design-vue';
-import Save from './Save/index.vue'
+import Save from './Save/index.vue';
 
 const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
@@ -83,7 +83,6 @@ const columns = [
         search: {
             type: 'string',
         },
-        // scopedSlots: true,
     },
     {
         title: '推送方式',
@@ -153,14 +152,14 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 
     const Actions = [
         {
-            key: 'edit',
+            key: 'details',
             text: '详情',
             tooltip: {
                 title: '详情',
             },
-            icon: 'EditOutlined',
+            icon: 'icon-details',
             onClick: async () => {
-                handlEdit(data.id);
+                handlDetails(data.id);
             },
         },
         {
@@ -206,7 +205,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                     tableRef.value.reload();
                 }
             },
-            icon: 'PauseOutlined',
+            icon: 'ControlOutlined',
         });
     }
 
@@ -216,21 +215,20 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 const handlAdd = () => {
     current.value = {};
     visible.value = true;
-    
 };
 
 const handlEye = (data: object) => {
-    current.value = toRaw(data);
+    current.value = toRaw({ ...data, view: true });
     visible.value = true;
 };
 
-const handlEdit = (id: string) => {
+const handlDetails = (id: string) => {
     // router.push({
     //     path: `/iot/link/certificate/detail/${id}`,
     //     query: { view: false },
     // });
 };
-const saveChange = (value: FormDataType) => {
+const saveChange = (value: boolean) => {
     visible.value = false;
     current.value = {};
     if (value) {
@@ -248,9 +246,4 @@ const handleSearch = (e: any) => {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.a {
-    // display: none;
-    visibility: 0;
-}
-</style>

src/views/link/AccessConfig/index.vue

@@ -188,7 +188,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { getImage } from '@/utils/comm';
 import {
     list,

src/views/link/Certificate/index.vue

@@ -59,8 +59,8 @@
     </page-container>
 </template>
 <script lang="ts" setup name="CertificatePage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
-import { save, query, remove } from '@/api/link/certificate';
+import { query, remove } from '@/api/link/certificate';
 import { message } from 'ant-design-vue';
 
 const tableRef = ref<Record<string, any>>({});

src/views/link/Protocol/index.vue

@@ -31,7 +31,9 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <h3 class="card-item-content-title card-item-content-title-a">
+                                <h3
+                                    class="card-item-content-title card-item-content-title-a"
+                                >
                                     {{ slotProps.name }}
                                 </h3>
                                 <a-row class="card-item-content-box">
@@ -148,7 +150,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index';
 import { getImage } from '@/utils/comm';
 import { list, remove } from '@/api/link/protocol';
 import { message } from 'ant-design-vue';
@@ -156,7 +158,6 @@ import Save from './Save/index.vue';
 import _ from 'lodash';
 
 const tableRef = ref<Record<string, any>>({});
-const router = useRouter();
 const params = ref<Record<string, any>>({});
 
 const visible = ref(false);

src/views/link/Type/index.vue

@@ -186,7 +186,7 @@
     </page-container>
 </template>
 <script lang="ts" setup name="TypePage">
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/components/Table/index'
 import { getImage } from '@/utils/comm';
 import { supports, query, remove, start, shutdown } from '@/api/link/type';
 import { message } from 'ant-design-vue';