feat: 远程升级 升级任务列表/选择设备组件
This commit is contained in:
parent
67a2a42ae2
commit
13cba5d457
|
@ -51,3 +51,9 @@ export const queryDevice = () =>
|
||||||
|
|
||||||
export const validateVersion = (productId: string, versionOrder: number) =>
|
export const validateVersion = (productId: string, versionOrder: number) =>
|
||||||
server.get(`/firmware/${productId}/${versionOrder}/exists`);
|
server.get(`/firmware/${productId}/${versionOrder}/exists`);
|
||||||
|
|
||||||
|
export const queryDetailList = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/device-instance/detail/_query`, data);
|
||||||
|
|
||||||
|
export const queryDetailListNoPaging = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/device-instance/detail/_query/no-paging`, data);
|
||||||
|
|
|
@ -51,7 +51,8 @@ const iconKeys = [
|
||||||
'playCircleOutlined',
|
'playCircleOutlined',
|
||||||
'RightOutlined',
|
'RightOutlined',
|
||||||
'FileTextOutlined',
|
'FileTextOutlined',
|
||||||
'UploadOutlined'
|
'UploadOutlined',
|
||||||
|
'PauseOutlined'
|
||||||
]
|
]
|
||||||
|
|
||||||
const Icon = (props: {type: string}) => {
|
const Icon = (props: {type: string}) => {
|
||||||
|
|
|
@ -183,7 +183,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { message, Form } from 'ant-design-vue';
|
import { message, Form } from 'ant-design-vue';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import type { UploadChangeParam } from 'ant-design-vue';
|
|
||||||
import FileUpload from './FileUpload.vue';
|
import FileUpload from './FileUpload.vue';
|
||||||
import { save, update, queryProduct } from '@/api/device/firmware';
|
import { save, update, queryProduct } from '@/api/device/firmware';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
|
@ -260,7 +259,7 @@ const { resetFields, validate, validateInfos } = useForm(
|
||||||
{ required: true, message: '请输入版本号' },
|
{ required: true, message: '请输入版本号' },
|
||||||
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
|
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
|
||||||
],
|
],
|
||||||
versionOrder: [{ required: true, message: '请输入版本号' }],
|
versionOrder: [{ required: true, message: '请输入版本序号' }],
|
||||||
signMethod: [{ required: true, message: '请选择签名方式' }],
|
signMethod: [{ required: true, message: '请选择签名方式' }],
|
||||||
sign: [
|
sign: [
|
||||||
{ required: true, message: '请输入签名' },
|
{ required: true, message: '请输入签名' },
|
||||||
|
|
|
@ -0,0 +1,272 @@
|
||||||
|
<template lang="">
|
||||||
|
<a-input
|
||||||
|
placeholder="请选择设备"
|
||||||
|
v-model:value="checkLable"
|
||||||
|
:disabled="true"
|
||||||
|
>
|
||||||
|
<template #addonAfter>
|
||||||
|
<AIcon type="EditOutlined" @click="onVisible" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-modal
|
||||||
|
v-if="visible"
|
||||||
|
title="选择设备"
|
||||||
|
ok-text="确认"
|
||||||
|
cancel-text="取消"
|
||||||
|
:visible="true"
|
||||||
|
width="80%"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
@ok="handleOk"
|
||||||
|
>
|
||||||
|
<Search
|
||||||
|
:columns="columns"
|
||||||
|
target="search"
|
||||||
|
@search="handleSearch"
|
||||||
|
type="simple"
|
||||||
|
/>
|
||||||
|
<JTable
|
||||||
|
ref="tableRef"
|
||||||
|
model="TABLE"
|
||||||
|
:columns="columns"
|
||||||
|
:request="queryDetailList"
|
||||||
|
:defaultParams="defaultParams"
|
||||||
|
:rowSelection="{
|
||||||
|
selectedRowKeys: _selectedRowKeys,
|
||||||
|
onSelect: onSelectChange,
|
||||||
|
onSelectAll: onSelectAllChange,
|
||||||
|
}"
|
||||||
|
@cancelSelect="cancelSelect"
|
||||||
|
:params="params"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<a-checkbox
|
||||||
|
v-model:checked="state.checkAll"
|
||||||
|
:indeterminate="state.indeterminate"
|
||||||
|
@change="onCheckAllChange"
|
||||||
|
style="margin-left: 8px"
|
||||||
|
>
|
||||||
|
全选
|
||||||
|
</a-checkbox>
|
||||||
|
</template>
|
||||||
|
<template #productId="slotProps">
|
||||||
|
<span>{{ slotProps.productName }}</span>
|
||||||
|
</template>
|
||||||
|
<template #state="slotProps">
|
||||||
|
<a-badge
|
||||||
|
:text="slotProps.state?.text"
|
||||||
|
:status="statusMap.get(slotProps.state?.value)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #version="slotProps">
|
||||||
|
<span>{{ slotProps.firmwareInfo?.version || '' }}</span>
|
||||||
|
</template>
|
||||||
|
<template #registerTime="slotProps">
|
||||||
|
<span>{{
|
||||||
|
moment(slotProps.registerTime).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</JTable>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup name="SelectDevicesPage">
|
||||||
|
import {
|
||||||
|
queryDetailListNoPaging,
|
||||||
|
queryDetailList,
|
||||||
|
} from '@/api/device/firmware';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
type T = any;
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change']);
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
const visible = ref(false);
|
||||||
|
const _selectedRowKeys = ref<string[]>([]);
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
indeterminate: false,
|
||||||
|
checkAll: false,
|
||||||
|
checkedList: [],
|
||||||
|
});
|
||||||
|
let checkAllData: T[] = [];
|
||||||
|
const checkAllDataMap = new Map();
|
||||||
|
const checkLable = ref();
|
||||||
|
|
||||||
|
const defaultParams = {
|
||||||
|
context: {
|
||||||
|
includeTags: false,
|
||||||
|
includeBind: false,
|
||||||
|
includeRelations: false,
|
||||||
|
},
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
column: 'productId',
|
||||||
|
value: route.query.productId,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
type: 'and',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusMap = new Map();
|
||||||
|
statusMap.set('online', 'success');
|
||||||
|
statusMap.set('offline', 'error');
|
||||||
|
statusMap.set('notActive', 'warning');
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
key: 'id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
key: 'name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '固件版本',
|
||||||
|
dataIndex: 'version',
|
||||||
|
key: 'version',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
key: 'registerTime',
|
||||||
|
dataIndex: 'registerTime',
|
||||||
|
search: {
|
||||||
|
type: 'date',
|
||||||
|
},
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'state',
|
||||||
|
key: 'state',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{ label: '在线', value: 'online' },
|
||||||
|
{ label: '离线', value: 'offline' },
|
||||||
|
{ label: '禁用', value: 'notActive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const onCheckAllChange = (e: any) => {
|
||||||
|
Object.assign(state, {
|
||||||
|
checkedList: e.target.checked ? checkAllData : [],
|
||||||
|
indeterminate: false,
|
||||||
|
});
|
||||||
|
_selectedRowKeys.value = state.checkedList;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectChange = (record: T[], selected: boolean, selectedRows: T[]) => {
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value.filter((item: T) => item !== record?.id);
|
||||||
|
};
|
||||||
|
const onSelectAllChange = (
|
||||||
|
selected: boolean,
|
||||||
|
selectedRows: T[],
|
||||||
|
changeRows: T[],
|
||||||
|
) => {
|
||||||
|
const unRowsKeys = getSelectedRowsKey(changeRows);
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value
|
||||||
|
.concat(unRowsKeys)
|
||||||
|
.filter((item) => !unRowsKeys.includes(item));
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedRowsKey = (selectedRows: T[]) =>
|
||||||
|
selectedRows.map((item) => item?.id).filter((i) => !!i);
|
||||||
|
|
||||||
|
const getSetRowKey = (selectedRows: T[]) =>
|
||||||
|
new Set([..._selectedRowKeys.value, ...getSelectedRowsKey(selectedRows)]);
|
||||||
|
|
||||||
|
const cancelSelect = () => {
|
||||||
|
_selectedRowKeys.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOk = () => {
|
||||||
|
checkLable.value = _selectedRowKeys.value
|
||||||
|
.map((item) => checkAllDataMap.has(item) && checkAllDataMap.get(item))
|
||||||
|
.toString();
|
||||||
|
emit('update:modelValue', _selectedRowKeys.value);
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onVisible = () => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
visible.value = false;
|
||||||
|
cancelSelect();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
queryDetailListNoPaging({ ...defaultParams, paging: false }).then(
|
||||||
|
(resp: T) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
checkAllData = resp.result.map((item: T) => {
|
||||||
|
checkAllDataMap.set(item.id, item.name);
|
||||||
|
return item.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => _selectedRowKeys.value,
|
||||||
|
(val) => {
|
||||||
|
Object.assign(state, {
|
||||||
|
checkedList: val,
|
||||||
|
indeterminate: !!val.length && val.length < checkAllData.length,
|
||||||
|
checkAll:
|
||||||
|
!!checkAllData.length && val.length === checkAllData.length,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
params.value = e;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.form {
|
||||||
|
.form-submit {
|
||||||
|
background-color: @primary-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,277 @@
|
||||||
|
<template lang="">
|
||||||
|
<a-modal
|
||||||
|
:title="data.id ? '查看' : '新增' + '任务'"
|
||||||
|
ok-text="确认"
|
||||||
|
cancel-text="取消"
|
||||||
|
:visible="true"
|
||||||
|
width="700px"
|
||||||
|
:confirm-loading="loading"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
@ok="handleOk"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
class="form"
|
||||||
|
layout="vertical"
|
||||||
|
:model="formData"
|
||||||
|
name="basic"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<a-row :gutter="[24, 0]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item label="任务名称" v-bind="validateInfos.name">
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入任务名称"
|
||||||
|
v-model:value="formData.name"
|
||||||
|
/></a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24"
|
||||||
|
><a-form-item label="推送方式" v-bind="validateInfos.mode">
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.mode"
|
||||||
|
:options="[
|
||||||
|
{ label: '平台推送', value: 'push' },
|
||||||
|
{ label: '设备拉取', value: 'pull' },
|
||||||
|
]"
|
||||||
|
placeholder="请选择推送方式"
|
||||||
|
allowClear
|
||||||
|
show-search
|
||||||
|
:filter-option="filterOption"
|
||||||
|
@change="changeMode"
|
||||||
|
/> </a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="12" v-if="formData.mode === 'push'"
|
||||||
|
><a-form-item
|
||||||
|
label="响应超时时间"
|
||||||
|
v-bind="validateInfos.responseTimeoutSeconds"
|
||||||
|
>
|
||||||
|
<a-input-number
|
||||||
|
placeholder="请输入响应超时时间(秒)"
|
||||||
|
style="width: 100%"
|
||||||
|
:min="1"
|
||||||
|
:max="99999"
|
||||||
|
v-model:value="
|
||||||
|
formData.responseTimeoutSeconds
|
||||||
|
" /></a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col
|
||||||
|
:span="formData.mode === 'push' ? 12 : 24"
|
||||||
|
v-if="formData.mode === 'push' || formData.mode === 'pull'"
|
||||||
|
><a-form-item
|
||||||
|
label="升级超时时间"
|
||||||
|
v-bind="validateInfos.timeoutSeconds"
|
||||||
|
>
|
||||||
|
<a-input-number
|
||||||
|
placeholder="请输入升级超时时间(秒)"
|
||||||
|
style="width: 100%"
|
||||||
|
:min="1"
|
||||||
|
:max="99999"
|
||||||
|
v-model:value="
|
||||||
|
formData.timeoutSeconds
|
||||||
|
" /></a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="12" v-if="!!formData.mode"
|
||||||
|
><a-form-item
|
||||||
|
label="升级设备"
|
||||||
|
v-bind="validateInfos.releaseType"
|
||||||
|
>
|
||||||
|
<a-radio-group
|
||||||
|
v-model:value="formData.releaseType"
|
||||||
|
button-style="solid"
|
||||||
|
@change="changeShareCluster"
|
||||||
|
>
|
||||||
|
<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-form-item
|
||||||
|
label="选择设备"
|
||||||
|
v-bind="validateInfos.deviceId"
|
||||||
|
>
|
||||||
|
<SelectDevices
|
||||||
|
v-model:modelValue="formData.deviceId"
|
||||||
|
:data="devicesData"
|
||||||
|
></SelectDevices> </a-form-item
|
||||||
|
></a-col>
|
||||||
|
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="说明"
|
||||||
|
v-bind="validateInfos.description"
|
||||||
|
>
|
||||||
|
<a-textarea
|
||||||
|
placeholder="请输入说明"
|
||||||
|
v-model:value="formData.description"
|
||||||
|
:maxlength="200"
|
||||||
|
:rows="3"
|
||||||
|
showCount
|
||||||
|
/> </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 { getImage } from '@/utils/comm';
|
||||||
|
import { save, update, queryProduct } 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,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['change']);
|
||||||
|
|
||||||
|
const id = props.data.id;
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
name: '',
|
||||||
|
mode: undefined,
|
||||||
|
responseTimeoutSeconds: '',
|
||||||
|
timeoutSeconds: '',
|
||||||
|
releaseType: 'all',
|
||||||
|
deviceId: [],
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const extraValue = ref({});
|
||||||
|
|
||||||
|
const validatorSign = async (_: Record<string, any>, value: string) => {
|
||||||
|
// const { releaseType, url } = formData.value;
|
||||||
|
// if (value && !!releaseType && !!url && !extraValue.value) {
|
||||||
|
// return extraValue.value[releaseType] !== value
|
||||||
|
// ? Promise.reject('选择设备不一致,请检查文件是否上传正确')
|
||||||
|
// : Promise.resolve();
|
||||||
|
// } else {
|
||||||
|
// return Promise.resolve();
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
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()
|
||||||
|
.then(async (res) => {
|
||||||
|
// const product = productOptions.value.find(
|
||||||
|
// (item) => item.value === res.mode,
|
||||||
|
// );
|
||||||
|
// const productName = product.label || props.data?.url;
|
||||||
|
// const size = extraValue.value.length || props.data?.size;
|
||||||
|
// const params = {
|
||||||
|
// ...toRaw(formData.value),
|
||||||
|
// 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();
|
||||||
|
};
|
||||||
|
const handleCancel = () => {
|
||||||
|
emit('change', false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeSignMethod = () => {
|
||||||
|
formData.value.deviceId = '';
|
||||||
|
formData.value.url = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
queryProduct({
|
||||||
|
paging: false,
|
||||||
|
terms: [{ column: 'state', value: 1 }],
|
||||||
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
|
}).then((resp) => {
|
||||||
|
productOptions.value = resp.result.map((item) => ({
|
||||||
|
value: item.id,
|
||||||
|
label: item.name,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(value) => {
|
||||||
|
if (value.id) {
|
||||||
|
formData.value = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => extraValue.value,
|
||||||
|
() => validate('deviceId'),
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.form {
|
||||||
|
.form-submit {
|
||||||
|
background-color: @primary-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,256 @@
|
||||||
|
<template>
|
||||||
|
<page-container>
|
||||||
|
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||||
|
<JTable
|
||||||
|
ref="tableRef"
|
||||||
|
model="TABLE"
|
||||||
|
:columns="columns"
|
||||||
|
:request="task"
|
||||||
|
:defaultParams="{
|
||||||
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
|
terms: defaultParams,
|
||||||
|
}"
|
||||||
|
:params="params"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<a-button type="primary" @click="handlAdd"
|
||||||
|
><AIcon type="PlusOutlined" />新增</a-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template #mode="slotProps">
|
||||||
|
<span>{{ slotProps.mode.text }}</span>
|
||||||
|
</template>
|
||||||
|
<template #progress="slotProps">
|
||||||
|
<span>{{ slotProps.progress }}%</span>
|
||||||
|
</template>
|
||||||
|
<template #action="slotProps">
|
||||||
|
<a-space :size="16">
|
||||||
|
<a-tooltip
|
||||||
|
v-for="i in getActions(slotProps)"
|
||||||
|
:key="i.key"
|
||||||
|
v-bind="i.tooltip"
|
||||||
|
>
|
||||||
|
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||||
|
<a-button
|
||||||
|
:disabled="i.disabled"
|
||||||
|
style="padding: 0"
|
||||||
|
type="link"
|
||||||
|
><AIcon :type="i.icon"
|
||||||
|
/></a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-button
|
||||||
|
style="padding: 0"
|
||||||
|
type="link"
|
||||||
|
v-else
|
||||||
|
@click="i.onClick && i.onClick(slotProps)"
|
||||||
|
>
|
||||||
|
<a-button
|
||||||
|
:disabled="i.disabled"
|
||||||
|
style="padding: 0"
|
||||||
|
type="link"
|
||||||
|
><AIcon :type="i.icon"
|
||||||
|
/></a-button>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</JTable>
|
||||||
|
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||||
|
</page-container>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup name="CertificatePage">
|
||||||
|
import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
|
import { task, startTask, stopTask } from '@/api/device/firmware';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import Save from './Save/index.vue'
|
||||||
|
|
||||||
|
const tableRef = ref<Record<string, any>>({});
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const current = ref({});
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '任务名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
// scopedSlots: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '推送方式',
|
||||||
|
dataIndex: 'mode',
|
||||||
|
key: 'mode',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '设备拉取',
|
||||||
|
value: 'pull',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '平台推送',
|
||||||
|
value: 'push',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
scopedSlots: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '完成比例',
|
||||||
|
dataIndex: 'progress',
|
||||||
|
key: 'progress',
|
||||||
|
ellipsis: true,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultParams = [
|
||||||
|
{
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
column: 'firmwareId',
|
||||||
|
value: route.query.id,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
|
if (!data) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const stop = data.waiting > 0 && data?.state?.value === 'processing';
|
||||||
|
const pause = data?.state?.value === 'canceled';
|
||||||
|
|
||||||
|
const Actions = [
|
||||||
|
{
|
||||||
|
key: 'edit',
|
||||||
|
text: '详情',
|
||||||
|
tooltip: {
|
||||||
|
title: '详情',
|
||||||
|
},
|
||||||
|
icon: 'EditOutlined',
|
||||||
|
onClick: async () => {
|
||||||
|
handlEdit(data.id);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'eye',
|
||||||
|
text: '查看',
|
||||||
|
tooltip: {
|
||||||
|
title: '查看',
|
||||||
|
},
|
||||||
|
icon: 'EyeOutlined',
|
||||||
|
onClick: async () => {
|
||||||
|
handlEye(data);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (stop) {
|
||||||
|
Actions.push({
|
||||||
|
key: 'actions',
|
||||||
|
text: '停止',
|
||||||
|
tooltip: {
|
||||||
|
title: '停止',
|
||||||
|
},
|
||||||
|
onClick: async () => {
|
||||||
|
const res = await stopTask(data.id);
|
||||||
|
if (res.success) {
|
||||||
|
message.success('操作成功');
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: 'StopOutlined',
|
||||||
|
});
|
||||||
|
} else if (pause) {
|
||||||
|
Actions.push({
|
||||||
|
key: 'actions',
|
||||||
|
text: '继续升级',
|
||||||
|
tooltip: {
|
||||||
|
title: '继续升级',
|
||||||
|
},
|
||||||
|
onClick: async () => {
|
||||||
|
const res = await startTask(data.id, ['canceled']);
|
||||||
|
if (res.success) {
|
||||||
|
message.success('操作成功');
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: 'PauseOutlined',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return Actions;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlAdd = () => {
|
||||||
|
current.value = {};
|
||||||
|
visible.value = true;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlEye = (data: object) => {
|
||||||
|
current.value = toRaw(data);
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlEdit = (id: string) => {
|
||||||
|
// router.push({
|
||||||
|
// path: `/iot/link/certificate/detail/${id}`,
|
||||||
|
// query: { view: false },
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
const saveChange = (value: FormDataType) => {
|
||||||
|
visible.value = false;
|
||||||
|
current.value = {};
|
||||||
|
if (value) {
|
||||||
|
message.success('操作成功');
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
params.value = e;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.a {
|
||||||
|
// display: none;
|
||||||
|
visibility: 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -66,14 +66,17 @@
|
||||||
<Save v-if="visible" :data="current" @change="saveChange" />
|
<Save v-if="visible" :data="current" @change="saveChange" />
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup name="CertificatePage">
|
<script lang="ts" setup name="FirmwarePage">
|
||||||
import type { ActionsType } from '@/components/Table/index.vue';
|
import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
// import { save, query, remove } from '@/api/link/certificate';
|
|
||||||
import { query, queryProduct, remove } from '@/api/device/firmware';
|
import { query, queryProduct, remove } from '@/api/device/firmware';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import Save from './Save/index.vue';
|
import Save from './Save/index.vue';
|
||||||
|
import { useMenuStore } from 'store/menu';
|
||||||
|
import type { FormDataType } from './type';
|
||||||
|
|
||||||
|
const menuStory = useMenuStore();
|
||||||
|
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -178,7 +181,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
},
|
},
|
||||||
icon: 'FileTextOutlined',
|
icon: 'FileTextOutlined',
|
||||||
onClick: async () => {
|
onClick: async () => {
|
||||||
handlUpdate(data.id);
|
handlUpdate(data);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -208,23 +211,27 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
];
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlUpdate = (id: string) => {
|
const handlUpdate = (data: FormDataType) => {
|
||||||
// router.push({
|
menuStory.jumpPage(
|
||||||
// path: `/iot/link/certificate/detail/${id}`,
|
'device/Firmware/Task',
|
||||||
// query: { view: true },
|
{},
|
||||||
// });
|
{
|
||||||
|
id: data.id,
|
||||||
|
productId: data.productId,
|
||||||
|
},
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlAdd = () => {
|
const handlAdd = () => {
|
||||||
current.value = {};
|
current.value = {};
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
const handlEdit = (data: object) => {
|
const handlEdit = (data: FormDataType) => {
|
||||||
current.value = _.cloneDeep(data);
|
current.value = _.cloneDeep(data);
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveChange = (value: object) => {
|
const saveChange = (value: FormDataType) => {
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
current.value = {};
|
current.value = {};
|
||||||
if (value) {
|
if (value) {
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<a-button type="primary" @click="handlAdd"
|
||||||
><plus-outlined />新增</a-button
|
><AIcon type="PlusOutlined" />新增</a-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<a-button type="primary" @click="handlAdd"
|
||||||
><plus-outlined />新增</a-button
|
><AIcon type="PlusOutlined" />新增</a-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<template #type="slotProps">
|
<template #type="slotProps">
|
||||||
|
@ -72,6 +72,9 @@ const columns = [
|
||||||
title: '证书标准',
|
title: '证书标准',
|
||||||
dataIndex: 'type',
|
dataIndex: 'type',
|
||||||
key: 'type',
|
key: 'type',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
search: {
|
search: {
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: [
|
options: [
|
||||||
|
@ -87,6 +90,7 @@ const columns = [
|
||||||
title: '证书名称',
|
title: '证书名称',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
|
ellipsis: true,
|
||||||
search: {
|
search: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
|
@ -95,6 +99,7 @@ const columns = [
|
||||||
title: '说明',
|
title: '说明',
|
||||||
dataIndex: 'description',
|
dataIndex: 'description',
|
||||||
key: 'description',
|
key: 'description',
|
||||||
|
ellipsis: true,
|
||||||
search: {
|
search: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<a-button type="primary" @click="handlAdd"
|
||||||
><plus-outlined />新增</a-button
|
><AIcon type="PlusOutlined" />新增</a-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<a-button type="primary" @click="handlAdd"
|
||||||
><plus-outlined />新增</a-button
|
><AIcon type="PlusOutlined" />新增</a-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
|
|
Loading…
Reference in New Issue