Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
jackhoo_98
commit
a70749f5e9
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
|
@ -10,7 +10,10 @@
|
|||
:maxCount="1"
|
||||
:showUploadList="false"
|
||||
@change="uploadChange"
|
||||
:accept="props?.file?.fileType ? `.${props?.file?.fileType}` : '.xlsx'"
|
||||
:accept="
|
||||
props?.file?.fileType ? `.${props?.file?.fileType}` : '.xlsx'
|
||||
"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<j-button>
|
||||
<template #icon><AIcon type="UploadOutlined" /></template>
|
||||
|
|
@ -36,7 +39,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { TOKEN_KEY } from '@/utils/variable';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { LocalStore, onlyMessage } from '@/utils/comm';
|
||||
import { downloadFile, downloadFileByUrl } from '@/utils/utils';
|
||||
import {
|
||||
deviceImport,
|
||||
|
|
@ -87,6 +90,19 @@ const downFile = async (type: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (_file: any) => {
|
||||
const fileType = props?.file?.fileType === 'csv' ? 'csv' : 'xlsx';
|
||||
const isCsv = _file.type === 'text/csv';
|
||||
const isXlsx = _file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||||
if (!isCsv && fileType !== 'xlsx') {
|
||||
onlyMessage('请上传.csv格式文件', 'warning');
|
||||
}
|
||||
if (!isXlsx && fileType !== 'csv') {
|
||||
onlyMessage('请上传.xlsx格式文件', 'warning');
|
||||
}
|
||||
return (isCsv && fileType !== 'xlsx') || (isXlsx && fileType !== 'csv');
|
||||
};
|
||||
|
||||
const submitData = async (fileUrl: string) => {
|
||||
if (!!fileUrl) {
|
||||
count.value = 0;
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ const Status = defineComponent({
|
|||
}, time);
|
||||
} else {
|
||||
let _item: ListProps | undefined = undefined
|
||||
if (!unref(gateway)) {
|
||||
if (!unref(gateway)?.id) {
|
||||
const accessId = unref(device)?.accessId
|
||||
if (accessId) {
|
||||
const response: Record<string, any> = await queryGatewayState(accessId)
|
||||
|
|
@ -463,7 +463,7 @@ const Status = defineComponent({
|
|||
})
|
||||
|
||||
// 网关父设备
|
||||
const diagnoseParentDevice = new Promise(async (resolve) => {
|
||||
const diagnoseParentDevice = () => new Promise(async (resolve) => {
|
||||
if (unref(device).state.value === 'online') {
|
||||
setTimeout(() => {
|
||||
list.value = modifyArrayList(unref(list), {
|
||||
|
|
|
|||
|
|
@ -78,13 +78,15 @@
|
|||
<template v-if="!first">
|
||||
<Message v-show="activeKey === 'message'" />
|
||||
</template>
|
||||
<Status
|
||||
v-show="activeKey !== 'message'"
|
||||
:providerType="providerType"
|
||||
@countChange="countChange"
|
||||
@percentChange="percentChange"
|
||||
@stateChange="stateChange"
|
||||
/>
|
||||
<template v-if="flag">
|
||||
<Status
|
||||
v-show="activeKey !== 'message'"
|
||||
:providerType="providerType"
|
||||
@countChange="countChange"
|
||||
@percentChange="percentChange"
|
||||
@stateChange="stateChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
|
|
@ -127,13 +129,15 @@ const providerType = ref();
|
|||
|
||||
const first = ref<boolean>(true);
|
||||
|
||||
const flag = ref<boolean>(false); // 处理数据不更新的情况
|
||||
|
||||
provide('topState', topState);
|
||||
|
||||
const onTabChange = (key: 'status' | 'message') => {
|
||||
if (topState.value === 'success') {
|
||||
activeKey.value = key;
|
||||
}
|
||||
first.value = false
|
||||
first.value = false;
|
||||
};
|
||||
|
||||
const percentChange = (num: number) => {
|
||||
|
|
@ -154,7 +158,9 @@ const countChange = (num: number) => {
|
|||
count.value = num;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const init = () => {
|
||||
flag.value = true
|
||||
activeKey.value = 'status';
|
||||
const provider = instanceStore.current?.accessProvider;
|
||||
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
|
||||
providerType.value = 'media';
|
||||
|
|
@ -168,11 +174,22 @@ onMounted(() => {
|
|||
providerType.value = 'network';
|
||||
}
|
||||
topState.value = 'loading';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 500)
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
flag.value = false
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.diagnose {
|
||||
min-height: 600px;
|
||||
.diagnose-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
</j-space>
|
||||
</template>
|
||||
<j-form ref="formRef" :model="modelRef">
|
||||
<j-table :dataSource="modelRef.dataSource" :columns="columns">
|
||||
<j-table
|
||||
:dataSource="modelRef.dataSource"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'collectorId'">
|
||||
采集器
|
||||
|
|
@ -136,6 +140,14 @@
|
|||
</template>
|
||||
</template>
|
||||
</j-table>
|
||||
<div class="pagination">
|
||||
<j-pagination
|
||||
@change="onPageChange"
|
||||
v-model:pageSize="pageSize"
|
||||
v-model:current="current"
|
||||
:total="metadata?.properties?.length || 0"
|
||||
/>
|
||||
</div>
|
||||
</j-form>
|
||||
</j-card>
|
||||
<PatchMapping
|
||||
|
|
@ -202,6 +214,9 @@ const columns = [
|
|||
},
|
||||
];
|
||||
|
||||
const current = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
|
@ -211,7 +226,11 @@ const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
|
|||
const loading = ref<boolean>(false);
|
||||
const channelList = ref<any[]>([]);
|
||||
|
||||
const modelRef = reactive({
|
||||
const _properties = ref<any[]>([]);
|
||||
|
||||
const modelRef = reactive<{
|
||||
dataSource: any[];
|
||||
}>({
|
||||
dataSource: [],
|
||||
});
|
||||
|
||||
|
|
@ -231,16 +250,23 @@ const getChannel = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleSearch = async () => {
|
||||
const queryData = (cur: number) => {
|
||||
_properties.value = metadata.properties.slice(
|
||||
(cur > 0 ? cur - 1 : 0) * 10,
|
||||
cur * 10,
|
||||
);
|
||||
handleSearch(_properties.value)
|
||||
};
|
||||
|
||||
const handleSearch = async (array: any[]) => {
|
||||
loading.value = true;
|
||||
getChannel();
|
||||
const _metadata = metadata.properties.map((item: any) => ({
|
||||
const _metadata: any[] = array.map((item: any) => ({
|
||||
metadataId: item.id,
|
||||
metadataName: `${item.name}(${item.id})`,
|
||||
metadataType: 'property',
|
||||
name: item.name,
|
||||
}));
|
||||
console.log(metadata);
|
||||
if (_metadata && _metadata.length) {
|
||||
const resp: any = await getEdgeMap(
|
||||
instanceStore.current?.parentId || '',
|
||||
|
|
@ -281,18 +307,23 @@ const unbind = async (id: string) => {
|
|||
);
|
||||
if (resp.status === 200) {
|
||||
onlyMessage('操作成功！', 'success');
|
||||
handleSearch();
|
||||
handleSearch(_properties.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPatchBind = () => {
|
||||
visible.value = false;
|
||||
handleSearch();
|
||||
handleSearch(_properties.value);
|
||||
};
|
||||
|
||||
const onPageChange = (page: any) => {
|
||||
queryData(page)
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
_properties.value = metadata.properties.slice(0, 10);
|
||||
handleSearch(_properties.value);
|
||||
});
|
||||
|
||||
const onSave = () => {
|
||||
|
|
@ -314,7 +345,7 @@ const onSave = () => {
|
|||
);
|
||||
if (resp.status === 200) {
|
||||
onlyMessage('操作成功！', 'success');
|
||||
handleSearch();
|
||||
handleSearch(_properties.value);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -343,7 +374,7 @@ const onAction = async (record: any) => {
|
|||
);
|
||||
if (resp.status === 200) {
|
||||
onlyMessage('操作成功！', 'success');
|
||||
handleSearch();
|
||||
handleSearch(_properties.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -352,4 +383,11 @@ const onAction = async (record: any) => {
|
|||
:deep(.ant-form-item) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,9 @@
|
|||
>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
{{ instanceStore.current?.name }}
|
||||
<j-tooltip :title="instanceStore.current?.name">
|
||||
<div class="deviceDetailHead">{{ instanceStore.current?.name }}</div>
|
||||
</j-tooltip>
|
||||
<j-divider type="vertical" />
|
||||
<j-space>
|
||||
<span style="font-size: 14px; color: rgba(0, 0, 0, 0.85)">
|
||||
|
|
@ -323,3 +325,13 @@ onUnmounted(() => {
|
|||
statusRef.value && statusRef.value.unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.deviceDetailHead {
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<j-row type="flex">
|
||||
<j-col flex="180px">
|
||||
<j-form-item name="photoUrl">
|
||||
<JProUpload accept="image/jpg,image/png,image/jfif,image/pjp,image/pjpeg,image/jpeg" v-model="modelRef.photoUrl" />
|
||||
<JProUpload accept="image/jpeg,image/png" v-model="modelRef.photoUrl" />
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col flex="auto">
|
||||
|
|
|
|||
|
|
@ -1020,7 +1020,8 @@ nextTick(() => {
|
|||
getData();
|
||||
});
|
||||
watch(()=>productStore.current,()=>{
|
||||
getData()
|
||||
getData();
|
||||
formData.data = productStore.current?.configuration || {}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
type="primary"
|
||||
:popConfirm="{
|
||||
title: `确定应用配置?`,
|
||||
placement: 'bottomRight',
|
||||
onConfirm: handleDeploy,
|
||||
}"
|
||||
:disabled="productStore.current?.state === 0"
|
||||
|
|
@ -111,16 +112,16 @@ import {
|
|||
getProtocolDetail,
|
||||
} from '@/api/device/product';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { getImage, handleParamsToString } from '@/utils/comm'
|
||||
import { getImage, handleParamsToString } from '@/utils/comm';
|
||||
import encodeQuery from '@/utils/encodeQuery';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const route = useRoute();
|
||||
const checked = ref<boolean>(true);
|
||||
const productStore = useProductStore();
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
const searchParams = ref({
|
||||
terms1: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<j-row type="flex">
|
||||
<j-col flex="180px">
|
||||
<j-form-item name="photoUrl">
|
||||
<JProUpload accept="image/jpg,image/png,image/jfif,image/pjp,image/pjpeg,image/jpeg" v-model="modelRef.photoUrl" />
|
||||
<JProUpload accept="image/jpeg,image/png" v-model="modelRef.photoUrl" />
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col flex="auto">
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ const columns = [
|
|||
search: {
|
||||
type: 'select',
|
||||
rename: 'productId',
|
||||
first: true,
|
||||
options: () =>
|
||||
new Promise((resolve) => {
|
||||
queryNoPagingPost({ paging: false }).then((resp: any) => {
|
||||
|
|
@ -141,6 +142,9 @@ const columns = [
|
|||
ellipsis: true,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
|
|
|
|||
|
|
@ -193,31 +193,31 @@ const opsStepDetails: recommendList[] = [
|
|||
title: '协议管理',
|
||||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Protocol',
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Certificate',
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/Frame 4529.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Type',
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/Frame 4528(1).png',
|
||||
iconUrl: '/images/home/Frame4528(1).png',
|
||||
linkUrl: 'link/AccessConfig',
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'Log',
|
||||
params: {
|
||||
tab: 'system',
|
||||
|
|
|
|||
|
|
@ -53,31 +53,31 @@ const opsStepDetails: recommendList[] = [
|
|||
title: '协议管理',
|
||||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Protocol',
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Certificate',
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/Frame 4529.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'link/Type',
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/Frame 4528(1).png',
|
||||
iconUrl: '/images/home/Frame4528(1).png',
|
||||
linkUrl: 'link/AccessConfig',
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/Frame 4528.png',
|
||||
iconUrl: '/images/home/Frame4528.png',
|
||||
linkUrl: 'Log',
|
||||
params: {
|
||||
tab: 'system',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<span class="status-label-container">
|
||||
<!-- <span class="status-label-container">
|
||||
<i class="circle" :style="{ background: bjColor }"></i>
|
||||
<span>{{ props.statusLabel }}</span>
|
||||
</span>
|
||||
</span> -->
|
||||
<j-badge :text="statusLabel" :status="status" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -11,14 +12,14 @@ const props = defineProps<{
|
|||
statusLabel: string;
|
||||
}>();
|
||||
|
||||
const bjColor = computed(() => {
|
||||
const status = computed(() => {
|
||||
switch (props.statusValue) {
|
||||
case 'online':
|
||||
return '#52c41a';
|
||||
return 'processing';
|
||||
case 'offline':
|
||||
return '#ff4d4f';
|
||||
return 'error';
|
||||
case 'notActive':
|
||||
return '#1890ff';
|
||||
return 'warning';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -105,12 +105,13 @@
|
|||
</j-select>
|
||||
</j-col>
|
||||
<j-col :span="2" v-if="!route.query.id">
|
||||
<j-button
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="saveProductVis = true"
|
||||
hasPermission="device/Product:add"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
</j-button>
|
||||
</PermissionButton>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form-item>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<j-card>
|
||||
<j-tabs :activeKey="activeKey" @change="changeTabs">
|
||||
<j-tab-pane key="1" tab="基础配置">
|
||||
<Base />
|
||||
<Base v-if="activeKey === '1'" />
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="2" tab="关联场景联动">
|
||||
<Scene></Scene>
|
||||
|
|
|
|||
|
|
@ -1,269 +1,292 @@
|
|||
<template>
|
||||
<pro-search
|
||||
:columns='columns'
|
||||
type='simple'
|
||||
@search='handleSearch'
|
||||
class='scene-search'
|
||||
target='scene-trigger-device-product'
|
||||
/>
|
||||
<j-divider style='margin: 0' />
|
||||
<j-pro-table
|
||||
ref='actionRef'
|
||||
model='CARD'
|
||||
:columns='columns'
|
||||
:params='params'
|
||||
:request='productQuery'
|
||||
:gridColumn='2'
|
||||
:bodyStyle='{
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
type="simple"
|
||||
@search="handleSearch"
|
||||
class="scene-search"
|
||||
target="scene-trigger-device-product"
|
||||
/>
|
||||
<j-divider style="margin: 0" />
|
||||
<j-pro-table
|
||||
ref="actionRef"
|
||||
model="CARD"
|
||||
:columns="columns"
|
||||
:params="params"
|
||||
:request="productQuery"
|
||||
:gridColumn="2"
|
||||
:bodyStyle="{
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
}'
|
||||
>
|
||||
<template #card='slotProps'>
|
||||
<CardBox
|
||||
:value='slotProps'
|
||||
:active='rowKey === slotProps.id'
|
||||
:status='String(slotProps.state)'
|
||||
:statusText="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:statusNames="{ '1': 'processing', '0': 'error' }"
|
||||
@click='handleClick(slotProps)'
|
||||
>
|
||||
<template #img>
|
||||
<slot name='img'>
|
||||
<img
|
||||
:width='88'
|
||||
:height='88'
|
||||
:src="
|
||||
}"
|
||||
>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:active="rowKey === slotProps.id"
|
||||
:status="String(slotProps.state)"
|
||||
:statusText="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:statusNames="{ '1': 'processing', '0': 'error' }"
|
||||
@click="handleClick(slotProps)"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:width="88"
|
||||
:height="88"
|
||||
:src="
|
||||
slotProps.photoUrl ||
|
||||
getImage('/device-product.png')
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div style='width: calc(100% - 100px)'>
|
||||
<Ellipsis>
|
||||
<span style='font-size: 16px; font-weight: 600'>
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<div style="width: calc(100% - 100px)">
|
||||
<Ellipsis>
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
</div>
|
||||
<j-row>
|
||||
<j-col :span='12'>
|
||||
<div class='card-item-content-text'>设备类型</div>
|
||||
<Ellipsis>{{ slotProps.deviceType?.text }}</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span='12'>
|
||||
<div class='card-item-content-text'>接入方式</div>
|
||||
<Ellipsis>{{ slotProps?.accessName || '未接入' }}</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</Ellipsis>
|
||||
</div>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">设备类型</div>
|
||||
<Ellipsis>{{
|
||||
slotProps.deviceType?.text
|
||||
}}</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">接入方式</div>
|
||||
<Ellipsis>{{
|
||||
slotProps?.accessName || '未接入'
|
||||
}}</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</j-pro-table>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='Product'>
|
||||
import {
|
||||
getProviders,
|
||||
queryGatewayList,
|
||||
queryProductList
|
||||
} from '@/api/device/product'
|
||||
import { queryTree } from '@/api/device/category'
|
||||
import { getTreeData_api } from '@/api/system/department'
|
||||
import { isNoCommunity } from '@/utils/utils'
|
||||
import { getImage } from '@/utils/comm'
|
||||
import { accessConfigTypeFilter } from '@/utils/setting'
|
||||
getProviders,
|
||||
queryGatewayList,
|
||||
queryProductList,
|
||||
detail
|
||||
} from '@/api/device/product';
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { getTreeData_api } from '@/api/system/department';
|
||||
import { isNoCommunity } from '@/utils/utils';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { accessConfigTypeFilter } from '@/utils/setting';
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:rowKey', data: string): void;
|
||||
(e: 'update:detail', data: string): void;
|
||||
(e: 'change', data: string): void;
|
||||
};
|
||||
(e: 'update:rowKey', data: string): void;
|
||||
(e: 'update:detail', data: any): void;
|
||||
(e: 'change', data: any, bol?: boolean): void;
|
||||
}; // bol判断是否为第一次
|
||||
|
||||
const actionRef = ref()
|
||||
const params = ref({})
|
||||
const actionRef = ref();
|
||||
const params = ref({});
|
||||
const props = defineProps({
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
const emit = defineEmits<Emit>();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
width: 300,
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
first: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '网关类型',
|
||||
dataIndex: 'accessProvider',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: () =>
|
||||
getProviders().then((resp: any) => {
|
||||
const data = resp.result || []
|
||||
return accessConfigTypeFilter(data)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
dataIndex: 'accessName',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: () =>
|
||||
queryGatewayList().then((resp: any) =>
|
||||
resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}))
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'deviceType',
|
||||
width: 150,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '直连设备', value: 'device' },
|
||||
{ label: '网关子设备', value: 'childrenDevice' },
|
||||
{ label: '网关设备', value: 'gateway' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
width: '90px',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '禁用', value: 0 },
|
||||
{ label: '正常', value: 1 }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
ellipsis: true,
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
dataIndex: 'classifiedId',
|
||||
title: '分类',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'treeSelect',
|
||||
options: () => {
|
||||
return new Promise((res => {
|
||||
queryTree({ paging: false }).then(resp => {
|
||||
res(resp.result)
|
||||
})
|
||||
}))
|
||||
},
|
||||
componentProps: {
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'id$dim-assets',
|
||||
title: '所属组织',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'treeSelect',
|
||||
options: () => new Promise((resolve) => {
|
||||
getTreeData_api({ paging: false }).then((resp: any) => {
|
||||
const formatValue = (list: any[]) => {
|
||||
return list.map((item: any) => {
|
||||
if (item.children) {
|
||||
item.children = formatValue(item.children)
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
value: JSON.stringify({
|
||||
assetType: 'product',
|
||||
targets: [
|
||||
{
|
||||
type: 'org',
|
||||
id: item.id
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
resolve(formatValue(resp.result) || [])
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
width: 300,
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
first: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '网关类型',
|
||||
dataIndex: 'accessProvider',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: () =>
|
||||
getProviders().then((resp: any) => {
|
||||
const data = resp.result || [];
|
||||
return accessConfigTypeFilter(data);
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
dataIndex: 'accessName',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: () =>
|
||||
queryGatewayList().then((resp: any) =>
|
||||
resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'deviceType',
|
||||
width: 150,
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '直连设备', value: 'device' },
|
||||
{ label: '网关子设备', value: 'childrenDevice' },
|
||||
{ label: '网关设备', value: 'gateway' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
width: '90px',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '禁用', value: 0 },
|
||||
{ label: '正常', value: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
ellipsis: true,
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
dataIndex: 'classifiedId',
|
||||
title: '分类',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'treeSelect',
|
||||
options: () => {
|
||||
return new Promise((res) => {
|
||||
queryTree({ paging: false }).then((resp) => {
|
||||
res(resp.result);
|
||||
});
|
||||
});
|
||||
},
|
||||
componentProps: {
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'id$dim-assets',
|
||||
title: '所属组织',
|
||||
hideInTable: true,
|
||||
search: {
|
||||
type: 'treeSelect',
|
||||
options: () =>
|
||||
new Promise((resolve) => {
|
||||
getTreeData_api({ paging: false }).then((resp: any) => {
|
||||
const formatValue = (list: any[]) => {
|
||||
return list.map((item: any) => {
|
||||
if (item.children) {
|
||||
item.children = formatValue(item.children);
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
value: JSON.stringify({
|
||||
assetType: 'product',
|
||||
targets: [
|
||||
{
|
||||
type: 'org',
|
||||
id: item.id,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
});
|
||||
};
|
||||
resolve(formatValue(resp.result) || []);
|
||||
});
|
||||
}),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleSearch = (p: any) => {
|
||||
params.value = p
|
||||
}
|
||||
params.value = p;
|
||||
};
|
||||
|
||||
const productQuery = (p: any) => {
|
||||
const sorts: any = []
|
||||
const sorts: any = [];
|
||||
|
||||
if (props.rowKey) {
|
||||
sorts.push({
|
||||
name: 'id',
|
||||
value: props.rowKey
|
||||
if (props.rowKey) {
|
||||
sorts.push({
|
||||
name: 'id',
|
||||
value: props.rowKey,
|
||||
});
|
||||
}
|
||||
sorts.push({ name: 'createTime', order: 'desc' });
|
||||
p.sorts = sorts;
|
||||
return queryProductList(p);
|
||||
};
|
||||
|
||||
const handleClick = (_detail: any) => {
|
||||
if (props?.rowKey === _detail.id) {
|
||||
emit('update:rowKey', '');
|
||||
emit('update:detail', {});
|
||||
emit('change', {});
|
||||
} else {
|
||||
emit('update:rowKey', _detail.id);
|
||||
emit('update:detail', _detail);
|
||||
emit('change', _detail);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if(props.rowKey){
|
||||
detail(props.rowKey).then(resp => {
|
||||
if(resp.status === 200){
|
||||
emit('update:detail', resp.result);
|
||||
emit('change', resp.result, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
sorts.push({ name: 'createTime', order: 'desc' })
|
||||
p.sorts = sorts
|
||||
return queryProductList(p)
|
||||
}
|
||||
|
||||
const handleClick = (detail: any) => {
|
||||
emit('update:rowKey', detail.id)
|
||||
emit('update:detail', detail)
|
||||
emit('change', detail)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
.search {
|
||||
margin-bottom: 0;
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -173,7 +173,7 @@ const onValueChange = () => {
|
|||
const newValue = _data.map((item: any) => {
|
||||
return {
|
||||
column: item.id,
|
||||
type: item?.type,
|
||||
type: item?.valueType,
|
||||
value: item?.value,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -165,16 +165,20 @@ const onSave = (_data: any) => {
|
|||
_options.propertiesValue =
|
||||
(typeof _options?.propertiesValue === 'object'
|
||||
? JSON.stringify(_options?.propertiesValue)
|
||||
: `${_options?.propertiesValue}`) || DeviceModel?.selectorValues?.[0]?.value;
|
||||
: `${_options?.propertiesValue}`) ||
|
||||
DeviceModel?.selectorValues?.[0]?.value;
|
||||
}
|
||||
emit('save', item, _options);
|
||||
};
|
||||
|
||||
const onProductChange = (_val: any) => {
|
||||
DeviceModel.selectorValues = undefined;
|
||||
DeviceModel.message = {
|
||||
messageType: 'INVOKE_FUNCTION',
|
||||
};
|
||||
const onProductChange = (_val: any, bol: boolean) => {
|
||||
if (!bol) {
|
||||
DeviceModel.selectorValues = undefined;
|
||||
DeviceModel.message = {
|
||||
messageType: 'INVOKE_FUNCTION',
|
||||
};
|
||||
}
|
||||
productDetail.value = _val
|
||||
DeviceOptions.value.productName = _val?.name;
|
||||
};
|
||||
|
||||
|
|
@ -231,14 +235,7 @@ const saveClick = () => save();
|
|||
watch(
|
||||
() => props.value,
|
||||
(newValue) => {
|
||||
Object.assign(DeviceModel, {...newValue});
|
||||
if (newValue?.productId) {
|
||||
detail(newValue.productId).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
productDetail.value = resp.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
Object.assign(DeviceModel, newValue);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1675,9 +1675,23 @@ function init() {
|
|||
if (!form.data.id) {
|
||||
// 新增时, 切换应用类型, 清空公用字段的值
|
||||
form.data.page.baseUrl = '';
|
||||
form.data.page.parameters = [];
|
||||
form.data.apiClient.baseUrl = '';
|
||||
form.data.page.parameters = [];
|
||||
form.data.apiClient.parameters = [];
|
||||
form.data.apiClient.authConfig.oauth2.authorizationUrl = '';
|
||||
form.data.sso.configuration.oauth2.authorizationUrl = '';
|
||||
form.data.apiClient.authConfig.oauth2.clientId = '';
|
||||
form.data.sso.configuration.oauth2.clientId = '';
|
||||
form.data.apiClient.authConfig.oauth2.clientSecret = '';
|
||||
form.data.sso.configuration.oauth2.clientSecret = '';
|
||||
form.data.apiClient.headers = [];
|
||||
form.data.apiServer.roleIdList = [];
|
||||
form.data.apiServer.orgIdList = [];
|
||||
form.data.description = '';
|
||||
form.data.apiServer.redirectUri = '';
|
||||
form.data.sso.configuration.appSecret = '';
|
||||
|
||||
// formRef.value?.resetFields();
|
||||
}
|
||||
emit('changeApplyType', n);
|
||||
if (routeQuery.id) return;
|
||||
|
|
|
|||
Loading…
Reference in New Issue