feat: 远程升级 列表/新增/编辑
This commit is contained in:
jackhoo_98
parent
58bbb1ac36
commit
906bc836ca
|
|
@ -0,0 +1,53 @@
|
||||||
|
import server from '@/utils/request';
|
||||||
|
import { BASE_API_PATH } from '@/utils/variable';
|
||||||
|
|
||||||
|
export const FIRMWARE_UPLOAD = `${BASE_API_PATH}/file/upload`;
|
||||||
|
|
||||||
|
export const save = (data: object) => server.post(`/firmware`, data);
|
||||||
|
|
||||||
|
export const update = (data: object) => server.patch(`/firmware`, data);
|
||||||
|
|
||||||
|
export const remove = (id: string) => server.remove(`/firmware/${id}`);
|
||||||
|
|
||||||
|
export const query = (data: object) => server.post(`/firmware/_query/`, data);
|
||||||
|
|
||||||
|
export const querySystemApi = (data?: object) =>
|
||||||
|
server.post(`/system/config/scopes`, data);
|
||||||
|
|
||||||
|
export const task = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/firmware/upgrade/task/detail/_query`, data);
|
||||||
|
|
||||||
|
export const taskById = (id: string) =>
|
||||||
|
server.get(`/firmware/upgrade/task/${id}`);
|
||||||
|
|
||||||
|
export const saveTask = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/firmware/upgrade/task`, data);
|
||||||
|
|
||||||
|
export const deleteTask = (id: string) =>
|
||||||
|
server.remove(`/firmware/upgrade/task/${id}`);
|
||||||
|
|
||||||
|
export const history = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/firmware/upgrade/history/_query`, data);
|
||||||
|
|
||||||
|
export const historyCount = (data: Record<string, unknown>) =>
|
||||||
|
server.post(`/firmware/upgrade/history/_count`, data);
|
||||||
|
|
||||||
|
export const startTask = (id: string, data: string[]) =>
|
||||||
|
server.post(`/firmware/upgrade/task/${id}/_start`, data);
|
||||||
|
|
||||||
|
export const stopTask = (id: string) =>
|
||||||
|
server.post(`/firmware/upgrade/task/${id}/_stop`);
|
||||||
|
|
||||||
|
export const startOneTask = (data: string[]) =>
|
||||||
|
server.post(`/firmware/upgrade/task/_start`, data);
|
||||||
|
|
||||||
|
// export const queryProduct = (data?: any) =>
|
||||||
|
// server.post(`/device-product/_query/no-paging`, data);
|
||||||
|
export const queryProduct = (data?: any) =>
|
||||||
|
server.post(`/device-product/detail/_query/no-paging`, data);
|
||||||
|
|
||||||
|
export const queryDevice = () =>
|
||||||
|
server.get(`/device/instance/_query/no-paging?paging=false`);
|
||||||
|
|
||||||
|
export const validateVersion = (productId: string, versionOrder: number) =>
|
||||||
|
server.get(`/firmware/${productId}/${versionOrder}/exists`);
|
||||||
|
|
@ -49,6 +49,8 @@ const iconKeys = [
|
||||||
'PartitionOutlined',
|
'PartitionOutlined',
|
||||||
'ShareAltOutlined',
|
'ShareAltOutlined',
|
||||||
'playCircleOutlined',
|
'playCircleOutlined',
|
||||||
|
'FileTextOutlined',
|
||||||
|
'UploadOutlined'
|
||||||
]
|
]
|
||||||
|
|
||||||
const Icon = (props: {type: string}) => {
|
const Icon = (props: {type: string}) => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<a-input
|
||||||
|
placeholder="请上传文件"
|
||||||
|
v-model:value="fileValue"
|
||||||
|
style="width: calc(100% - 110px)"
|
||||||
|
:disabled="true"
|
||||||
|
/>
|
||||||
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:multiple="true"
|
||||||
|
:action="FIRMWARE_UPLOAD"
|
||||||
|
:headers="{
|
||||||
|
[TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
|
||||||
|
}"
|
||||||
|
@change="handleChange"
|
||||||
|
:showUploadList="false"
|
||||||
|
class="upload-box"
|
||||||
|
>
|
||||||
|
<a-button type="primary">
|
||||||
|
<div>
|
||||||
|
<AIcon type="UploadOutlined" /><span class="upload-text"
|
||||||
|
>上传文件</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="FileUpload">
|
||||||
|
import { LocalStore } from '@/utils/comm';
|
||||||
|
import { TOKEN_KEY } from '@/utils/variable';
|
||||||
|
import { FIRMWARE_UPLOAD, querySystemApi } from '@/api/device/firmware';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||||
|
import { notification as Notification } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'update:extraValue', 'change']);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileValue = ref(props.modelValue);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const handleChange = async (info: UploadChangeParam) => {
|
||||||
|
loading.value = true;
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
loading.value = false;
|
||||||
|
const result = info.file.response?.result;
|
||||||
|
const api = await querySystemApi(['paths']);
|
||||||
|
const path = api.result[0]?.properties
|
||||||
|
? api.result[0]?.properties['base-path']
|
||||||
|
: '';
|
||||||
|
const f = `${path}/file/${result.id}?accessKey=${result.others.accessKey}`;
|
||||||
|
message.success('上传成功！');
|
||||||
|
fileValue.value = f;
|
||||||
|
emit('update:modelValue', f);
|
||||||
|
emit('update:extraValue', result);
|
||||||
|
} else {
|
||||||
|
if (info.file.error) {
|
||||||
|
Notification.error({
|
||||||
|
// key: '403',
|
||||||
|
message: '系统提示',
|
||||||
|
description: '系统未知错误，请反馈给管理员',
|
||||||
|
});
|
||||||
|
loading.value = false;
|
||||||
|
} else if (info.file.response) {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(value) => {
|
||||||
|
fileValue.value = value;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.upload-box {
|
||||||
|
:deep(.ant-btn) {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
.upload-text {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,388 @@
|
||||||
|
<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.productId"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.productId"
|
||||||
|
:options="productOptions"
|
||||||
|
placeholder="请选择所属产品"
|
||||||
|
allowClear
|
||||||
|
show-search
|
||||||
|
:filter-option="filterOption"
|
||||||
|
/> </a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="12"
|
||||||
|
><a-form-item label="版本号" v-bind="validateInfos.version">
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入版本号"
|
||||||
|
v-model:value="formData.version" /></a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="12"
|
||||||
|
><a-form-item
|
||||||
|
label="版本序号"
|
||||||
|
v-bind="validateInfos.versionOrder"
|
||||||
|
>
|
||||||
|
<a-input-number
|
||||||
|
placeholder="请输入版本序号"
|
||||||
|
style="width: 100%"
|
||||||
|
:min="1"
|
||||||
|
:max="99999"
|
||||||
|
v-model:value="
|
||||||
|
formData.versionOrder
|
||||||
|
" /></a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="12"
|
||||||
|
><a-form-item
|
||||||
|
label="签名方式"
|
||||||
|
v-bind="validateInfos.signMethod"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.signMethod"
|
||||||
|
:options="[
|
||||||
|
{ label: 'MD5', value: 'md5' },
|
||||||
|
{ label: 'SHA256', value: 'sha256' },
|
||||||
|
]"
|
||||||
|
placeholder="请选择签名方式"
|
||||||
|
allowClear
|
||||||
|
show-search
|
||||||
|
:filter-option="filterOption"
|
||||||
|
@change="changeSignMethod"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12"
|
||||||
|
><a-form-item label="签名" v-bind="validateInfos.sign">
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入签名"
|
||||||
|
v-model:value="formData.sign" /></a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item label="固件上传" v-bind="validateInfos.url">
|
||||||
|
<FileUpload
|
||||||
|
v-model:modelValue="formData.url"
|
||||||
|
v-model:extraValue="extraValue"
|
||||||
|
/> </a-form-item
|
||||||
|
></a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="其他配置"
|
||||||
|
v-bind="validateInfos.properties"
|
||||||
|
>
|
||||||
|
<a-form
|
||||||
|
:class="
|
||||||
|
dynamicValidateForm.properties.length !== 0 &&
|
||||||
|
'formRef'
|
||||||
|
"
|
||||||
|
ref="formRef"
|
||||||
|
name="dynamic_form_nest_item"
|
||||||
|
:model="dynamicValidateForm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="formRef-content"
|
||||||
|
v-for="(
|
||||||
|
propertie, index
|
||||||
|
) in dynamicValidateForm.properties"
|
||||||
|
:key="propertie.keyid"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
:label="index === 0 && 'Key'"
|
||||||
|
class="formRef-form-item"
|
||||||
|
:name="['properties', index, 'id']"
|
||||||
|
:rules="{
|
||||||
|
required: true,
|
||||||
|
message: '请输入KEY',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="propertie.id"
|
||||||
|
placeholder="请输入KEY"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
:label="index === 0 && 'Value'"
|
||||||
|
class="formRef-form-item"
|
||||||
|
:name="['properties', index, 'value']"
|
||||||
|
:rules="{
|
||||||
|
required: true,
|
||||||
|
message: '请输入VALUE',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="propertie.value"
|
||||||
|
placeholder="请输入VALUE"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
:label="index === 0 && '操作'"
|
||||||
|
class="formRef-form-item"
|
||||||
|
style="width: 10%"
|
||||||
|
>
|
||||||
|
<a-popconfirm
|
||||||
|
title="确认删除吗？"
|
||||||
|
ok-text="确认"
|
||||||
|
cancel-text="取消"
|
||||||
|
@confirm="removeUser(propertie)"
|
||||||
|
>
|
||||||
|
<AIcon type="DeleteOutlined" />
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<a-form-item class="formRef-form-item-add">
|
||||||
|
<a-button type="dashed" block @click="addUser">
|
||||||
|
<AIcon type="PlusOutlined" />
|
||||||
|
添加
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { message, Form } from 'ant-design-vue';
|
||||||
|
import { getImage } from '@/utils/comm';
|
||||||
|
import type { UploadChangeParam } from 'ant-design-vue';
|
||||||
|
import FileUpload from './FileUpload.vue';
|
||||||
|
import { save, update, queryProduct } from '@/api/device/firmware';
|
||||||
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
|
import type { Properties } from '../type';
|
||||||
|
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const dynamicValidateForm = reactive<{ properties: Properties[] }>({
|
||||||
|
properties: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeUser = (item: Properties) => {
|
||||||
|
let index = dynamicValidateForm.properties.indexOf(item);
|
||||||
|
if (index !== -1) {
|
||||||
|
dynamicValidateForm.properties.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const addUser = () => {
|
||||||
|
dynamicValidateForm.properties.push({
|
||||||
|
id: '',
|
||||||
|
value: '',
|
||||||
|
keyid: Date.now(),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
const productOptions = ref([]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['change']);
|
||||||
|
|
||||||
|
const id = props.data.id;
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
name: '',
|
||||||
|
productId: undefined,
|
||||||
|
version: '',
|
||||||
|
versionOrder: '',
|
||||||
|
signMethod: undefined,
|
||||||
|
sign: '',
|
||||||
|
url: '',
|
||||||
|
properties: [],
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const extraValue = ref({});
|
||||||
|
|
||||||
|
const validatorSign = async (_: Record<string, any>, value: string) => {
|
||||||
|
const { signMethod, url } = formData.value;
|
||||||
|
if (value && !!signMethod && !!url && !extraValue.value) {
|
||||||
|
return extraValue.value[signMethod] !== value
|
||||||
|
? Promise.reject('签名不一致，请检查文件是否上传正确')
|
||||||
|
: Promise.resolve();
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const { resetFields, validate, validateInfos } = useForm(
|
||||||
|
formData,
|
||||||
|
reactive({
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入名称' },
|
||||||
|
{ max: 64, message: '最多可输入64个字符' },
|
||||||
|
],
|
||||||
|
productId: [{ required: true, message: '请选择所属产品' }],
|
||||||
|
version: [
|
||||||
|
{ required: true, message: '请输入版本号' },
|
||||||
|
{ max: 64, message: '最多可输入64个字符', trigger: 'change' },
|
||||||
|
],
|
||||||
|
versionOrder: [{ required: true, message: '请输入版本号' }],
|
||||||
|
signMethod: [{ required: true, message: '请选择签名方式' }],
|
||||||
|
sign: [
|
||||||
|
{ required: true, message: '请输入签名' },
|
||||||
|
{ validator: validatorSign },
|
||||||
|
],
|
||||||
|
url: [{ required: true, message: '请上传文件' }],
|
||||||
|
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const filterOption = (input: string, option: any) => {
|
||||||
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
const { properties } = await formRef.value?.validate();
|
||||||
|
|
||||||
|
validate()
|
||||||
|
.then(async (res) => {
|
||||||
|
const product = productOptions.value.find(
|
||||||
|
(item) => item.value === res.productId,
|
||||||
|
);
|
||||||
|
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.sign = '';
|
||||||
|
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;
|
||||||
|
dynamicValidateForm.properties = value.properties;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => extraValue.value,
|
||||||
|
() => validate('sign'),
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.form {
|
||||||
|
.form-radio-button {
|
||||||
|
width: 148px;
|
||||||
|
height: 80px;
|
||||||
|
padding: 0;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-url-button {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.form-submit {
|
||||||
|
background-color: @primary-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.formRef {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
.formRef-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.formRef-content {
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.formRef-form-item {
|
||||||
|
width: 47%;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.formRef-form-item-add {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,268 @@
|
||||||
|
<template>
|
||||||
|
<page-container>
|
||||||
|
<div>
|
||||||
|
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||||
|
<JTable
|
||||||
|
ref="tableRef"
|
||||||
|
model="TABLE"
|
||||||
|
:columns="columns"
|
||||||
|
:request="query"
|
||||||
|
:defaultParams="{
|
||||||
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
|
}"
|
||||||
|
:params="params"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<a-button type="primary" @click="handlAdd"
|
||||||
|
><plus-outlined />新增</a-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template #productId="slotProps">
|
||||||
|
<span>{{ slotProps.productName }}</span>
|
||||||
|
</template>
|
||||||
|
<template #createTime="slotProps">
|
||||||
|
<span>{{
|
||||||
|
moment(slotProps.createTime).format(
|
||||||
|
'YYYY-MM-DD HH:mm:ss',
|
||||||
|
)
|
||||||
|
}}</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>
|
||||||
|
</div>
|
||||||
|
<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 { save, query, remove } from '@/api/link/certificate';
|
||||||
|
import { query, queryProduct, remove } from '@/api/device/firmware';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import moment from 'moment';
|
||||||
|
import _ from 'lodash';
|
||||||
|
import Save from './Save/index.vue';
|
||||||
|
|
||||||
|
const tableRef = ref<Record<string, any>>({});
|
||||||
|
const router = useRouter();
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const productOptions = ref([]);
|
||||||
|
const visible = ref(false);
|
||||||
|
const current = ref({});
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '固件名称',
|
||||||
|
key: 'name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '固件版本',
|
||||||
|
dataIndex: 'version',
|
||||||
|
key: 'version',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属产品',
|
||||||
|
dataIndex: 'productId',
|
||||||
|
key: 'productId',
|
||||||
|
ellipsis: true,
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: productOptions,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '签名方式',
|
||||||
|
dataIndex: 'signMethod',
|
||||||
|
key: 'signMethod',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: 'MD5',
|
||||||
|
value: 'md5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'SHA256',
|
||||||
|
value: 'sha256',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createTime',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
search: {
|
||||||
|
type: 'time',
|
||||||
|
},
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
ellipsis: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 200,
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
|
if (!data) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
key: 'FileTextOutlined',
|
||||||
|
text: '升级任务',
|
||||||
|
tooltip: {
|
||||||
|
title: '升级任务',
|
||||||
|
},
|
||||||
|
icon: 'FileTextOutlined',
|
||||||
|
onClick: async () => {
|
||||||
|
handlUpdate(data.id);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'edit',
|
||||||
|
text: '编辑',
|
||||||
|
tooltip: {
|
||||||
|
title: '编辑',
|
||||||
|
},
|
||||||
|
icon: 'EditOutlined',
|
||||||
|
onClick: async () => {
|
||||||
|
handlEdit(data);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
text: '删除',
|
||||||
|
popConfirm: {
|
||||||
|
title: '确认删除?',
|
||||||
|
okText: ' 确定',
|
||||||
|
cancelText: '取消',
|
||||||
|
onConfirm: async () => {
|
||||||
|
handlDelete(data.id);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlUpdate = (id: string) => {
|
||||||
|
// router.push({
|
||||||
|
// path: `/iot/link/certificate/detail/${id}`,
|
||||||
|
// query: { view: true },
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlAdd = () => {
|
||||||
|
current.value = {};
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
const handlEdit = (data: object) => {
|
||||||
|
current.value = _.cloneDeep(data);
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveChange = (value: object) => {
|
||||||
|
visible.value = false;
|
||||||
|
current.value = {};
|
||||||
|
if (value) {
|
||||||
|
message.success('操作成功');
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlDelete = async (id: string) => {
|
||||||
|
const res = await remove(id);
|
||||||
|
if (res.success) {
|
||||||
|
message.success('操作成功');
|
||||||
|
tableRef.value.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
queryProduct({
|
||||||
|
paging: false,
|
||||||
|
sorts: [{ name: 'name', order: 'desc' }],
|
||||||
|
}).then((resp) => {
|
||||||
|
const list = resp.result.filter((it) => {
|
||||||
|
return _.map(it?.features || [], 'id').includes('supportFirmware');
|
||||||
|
});
|
||||||
|
productOptions.value = list.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
params.value = e;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
export type FormDataType = {
|
||||||
|
description: string;
|
||||||
|
name: string;
|
||||||
|
productId: string | undefined;
|
||||||
|
version: undefined;
|
||||||
|
versionOrder: undefined;
|
||||||
|
signMethod: string | undefined;
|
||||||
|
sign: string;
|
||||||
|
url: string;
|
||||||
|
size: number;
|
||||||
|
properties: Array<Properties>;
|
||||||
|
id?: string;
|
||||||
|
format?: string;
|
||||||
|
mode?: object;
|
||||||
|
creatorId?: string;
|
||||||
|
createTime?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface Properties {
|
||||||
|
id: string;
|
||||||
|
value: any;
|
||||||
|
keyid: number;
|
||||||
|
}
|
||||||
|
|
@ -153,6 +153,7 @@ import { getImage } from '@/utils/comm';
|
||||||
import { list, remove } from '@/api/link/protocol';
|
import { list, remove } from '@/api/link/protocol';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import Save from './Save/index.vue';
|
import Save from './Save/index.vue';
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -261,7 +262,7 @@ const handlAdd = () => {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
const handlEdit = (data: object) => {
|
const handlEdit = (data: object) => {
|
||||||
current.value = data;
|
current.value = _.cloneDeep(data);
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue