Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
jackhoo_98
commit
f878cffe82
|
|
@ -5,6 +5,7 @@ type DepartmentStateType = {
|
|||
productId: string;
|
||||
optType: string | undefined;
|
||||
crossPageKeys: string[];
|
||||
changedApis: any;
|
||||
}
|
||||
|
||||
export const useDepartmentStore = defineStore({
|
||||
|
|
@ -16,6 +17,7 @@ export const useDepartmentStore = defineStore({
|
|||
// 2. optType === ': 产品资产分配后, 自动弹出设备资产分配
|
||||
optType: '',
|
||||
crossPageKeys: [], // 表格跨页多选的keys
|
||||
changedApis: {},
|
||||
}),
|
||||
actions: {
|
||||
setProductId(value: string) {
|
||||
|
|
@ -27,6 +29,9 @@ export const useDepartmentStore = defineStore({
|
|||
setSelectedKeys(value: string[], type?: string) {
|
||||
// 分页保留选中项
|
||||
this.crossPageKeys = type === 'concat' ? [...new Set([...this.crossPageKeys, ...value])] : value;
|
||||
},
|
||||
setChangedApis(value: any) {
|
||||
this.changedApis = { ...this.changedApis, ...value };
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -57,7 +57,7 @@ import { getImage } from '@/utils/comm';
|
|||
|
||||
<style lang="less" scoped>
|
||||
.doc {
|
||||
height: 1000px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
|
|
|
|||
|
|
@ -1,371 +1,418 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-card>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="modelRef.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'regionId']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择服务地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
服务地址
|
||||
<j-tooltip
|
||||
title="阿里云内部给每台机器设置的唯一编号"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择服务地址"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.regionId
|
||||
"
|
||||
show-search
|
||||
@blur="productChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in regionsList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'instanceId']"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
实例ID
|
||||
<j-tooltip
|
||||
title="阿里云物联网平台中的实例ID,没有则不填"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入实例ID"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.instanceId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'accessKeyId']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入accessKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
accessKey
|
||||
<j-tooltip
|
||||
title="用于程序通知方式调用云服务API的用户标识"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入accessKey"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.accessKeyId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'accessSecret']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入accessSecret',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
accessSecret
|
||||
<j-tooltip
|
||||
title="用于程序通知方式调用云服务费API的秘钥标识"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入accessSecret"
|
||||
v-model:value="
|
||||
modelRef.accessConfig.accessSecret
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
name="bridgeProductKey"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择网桥产品',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
网桥产品
|
||||
<j-tooltip
|
||||
title="物联网平台对应的阿里云产品"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择网桥产品"
|
||||
v-model:value="
|
||||
modelRef.bridgeProductKey
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in aliyunProductList"
|
||||
:key="item.productKey"
|
||||
:value="item.productKey"
|
||||
:label="item.productName"
|
||||
>{{
|
||||
item.productName
|
||||
}}</j-select-option
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="modelRef.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="['accessConfig', 'regionId']"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择服务地址',
|
||||
},
|
||||
]"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>产品映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.mappings.length"
|
||||
:activeKey="activeKey"
|
||||
@change="onCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.mappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.productKey
|
||||
? (aliyunProductList.find(
|
||||
(i) =>
|
||||
i.productKey ===
|
||||
item.productKey,
|
||||
)?.productName || `产品映射${index + 1}`)
|
||||
: `产品映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delItem(index)"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="阿里云产品"
|
||||
:name="[
|
||||
'mappings',
|
||||
index,
|
||||
'productKey',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择阿里云产品',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择阿里云产品"
|
||||
v-model:value="
|
||||
item.productKey
|
||||
"
|
||||
show-search
|
||||
<template #label>
|
||||
<span>
|
||||
服务地址
|
||||
<j-tooltip
|
||||
title="阿里云内部给每台机器设置的唯一编号"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getAliyunProductList(
|
||||
item?.productKey || ''
|
||||
)"
|
||||
:key="i.productKey"
|
||||
:value="
|
||||
i.productKey
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
:label="
|
||||
i.productName
|
||||
"
|
||||
>{{
|
||||
i.productName
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="平台产品"
|
||||
:name="[
|
||||
'mappings',
|
||||
index,
|
||||
'productId',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择平台产品',
|
||||
}"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择服务地址"
|
||||
v-model:value="
|
||||
modelRef.accessConfig
|
||||
.regionId
|
||||
"
|
||||
show-search
|
||||
@blur="productChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in regionsList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择平台产品"
|
||||
v-model:value="
|
||||
item.productId
|
||||
"
|
||||
show-search
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'instanceId',
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
实例ID
|
||||
<j-tooltip
|
||||
title="阿里云物联网平台中的实例ID,没有则不填"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getPlatProduct(
|
||||
item.productId || ''
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i?.id"
|
||||
:label="i.name"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入实例ID"
|
||||
v-model:value="
|
||||
modelRef.accessConfig
|
||||
.instanceId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'accessKeyId',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入accessKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
accessKey
|
||||
<j-tooltip
|
||||
title="用于程序通知方式调用云服务API的用户标识"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入accessKey"
|
||||
v-model:value="
|
||||
modelRef.accessConfig
|
||||
.accessKeyId
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'accessConfig',
|
||||
'accessSecret',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
'请输入accessSecret',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
accessSecret
|
||||
<j-tooltip
|
||||
title="用于程序通知方式调用云服务费API的秘钥标识"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-input
|
||||
placeholder="请输入accessSecret"
|
||||
v-model:value="
|
||||
modelRef.accessConfig
|
||||
.accessSecret
|
||||
"
|
||||
@blur="productChange"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
name="bridgeProductKey"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择网桥产品',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
网桥产品
|
||||
<j-tooltip
|
||||
title="物联网平台对应的阿里云产品"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择网桥产品"
|
||||
v-model:value="
|
||||
modelRef.bridgeProductKey
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in aliyunProductList"
|
||||
:key="item.productKey"
|
||||
:value="item.productKey"
|
||||
:label="item.productName"
|
||||
>{{
|
||||
item.productName
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>产品映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.mappings.length"
|
||||
:activeKey="activeKey"
|
||||
@change="onCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.mappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.productKey
|
||||
? aliyunProductList.find(
|
||||
(i) =>
|
||||
i.productKey ===
|
||||
item.productKey,
|
||||
)?.productName ||
|
||||
`产品映射${index + 1}`
|
||||
: `产品映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delItem(index)"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="阿里云产品"
|
||||
:name="[
|
||||
'mappings',
|
||||
index,
|
||||
'productKey',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择阿里云产品',
|
||||
}"
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
@click="addItem"
|
||||
<j-select
|
||||
placeholder="请选择阿里云产品"
|
||||
v-model:value="
|
||||
item.productKey
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getAliyunProductList(
|
||||
item?.productKey ||
|
||||
'',
|
||||
)"
|
||||
:key="
|
||||
i.productKey
|
||||
"
|
||||
:value="
|
||||
i.productKey
|
||||
"
|
||||
:label="
|
||||
i.productName
|
||||
"
|
||||
>{{
|
||||
i.productName
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="平台产品"
|
||||
:name="[
|
||||
'mappings',
|
||||
index,
|
||||
'productId',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择平台产品',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择平台产品"
|
||||
v-model:value="
|
||||
item.productId
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getPlatProduct(
|
||||
item.productId ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="
|
||||
i?.id
|
||||
"
|
||||
:label="
|
||||
i.name
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addItem"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>添加
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin-top: 20px">
|
||||
<j-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
:rules="{
|
||||
max: 200,
|
||||
message: '最多输入200个字符',
|
||||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="
|
||||
modelRef.description
|
||||
"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div v-if="type === 'edit'">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="[
|
||||
'Northbound/AliCloud:add',
|
||||
'Northbound/AliCloud:update',
|
||||
]"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>添加
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin-top: 20px">
|
||||
<j-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
:rules="{
|
||||
max: 200,
|
||||
message: '最多输入200个字符',
|
||||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="modelRef.description"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div v-if="type === 'edit'">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="['Northbound/AliCloud:add', 'Northbound/AliCloud:update']"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<Doc />
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-card>
|
||||
<div class="right">
|
||||
<Doc />
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -489,14 +536,16 @@ const saveBtn = () => {
|
|||
.validate()
|
||||
.then(async (data: any) => {
|
||||
const product = (aliyunProductList.value || []).find(
|
||||
(item: any) =>
|
||||
item?.productKey === data?.bridgeProductKey,
|
||||
(item: any) => item?.productKey === data?.bridgeProductKey,
|
||||
);
|
||||
data.bridgeProductName = product?.productName || '';
|
||||
loading.value = true;
|
||||
const resp = await savePatch({...toRaw(modelRef), ...data}).finally(() => {
|
||||
const resp = await savePatch({
|
||||
...toRaw(modelRef),
|
||||
...data,
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
formRef.value.resetFields();
|
||||
|
|
@ -539,4 +588,23 @@ watch(
|
|||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
position: relative;
|
||||
.left {
|
||||
.left-content {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 33%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,119 +5,133 @@
|
|||
target="northbound-aliyun"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="Northbound/AliCloud:add"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="Northbound/AliCloud:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img :src="getImage('/northbound/aliyun.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
网桥产品
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>
|
||||
{{ slotProps?.bridgeProductName }}
|
||||
<template #img>
|
||||
<img :src="getImage('/northbound/aliyun.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
网桥产品
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
<label>说明</label>
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.description }}</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="item.tooltip"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'Northbound/AliCloud:' + item.key"
|
||||
<Ellipsis>
|
||||
<div>
|
||||
{{ slotProps?.bridgeProductName }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
<label>说明</label>
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.description }}</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="item.tooltip"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'Northbound/AliCloud:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="i.tooltip"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'Northbound/AliCloud:' + i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="i.tooltip"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'Northbound/AliCloud:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ import { getImage } from '@/utils/comm';
|
|||
|
||||
<style lang="less" scoped>
|
||||
.doc {
|
||||
height: 1000px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
|
|
|
|||
|
|
@ -1,437 +1,479 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-card>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="16">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
<FullPage>
|
||||
<j-card>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="left-content">
|
||||
<TitleComponent data="基本信息" />
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:model="modelRef"
|
||||
>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="modelRef.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="产品"
|
||||
name="id"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择产品',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-select
|
||||
:disabled="
|
||||
type !== 'edit' &&
|
||||
modelRef.id &&
|
||||
modelRef.id !== ':id'
|
||||
"
|
||||
placeholder="请选择产品"
|
||||
v-model:value="modelRef.id"
|
||||
show-search
|
||||
@change="productChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="applianceType"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择设备类型',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
设备类型
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的规范"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
margin-left: 2px;
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择设备类型"
|
||||
v-model:value="
|
||||
modelRef.applianceType
|
||||
"
|
||||
show-search
|
||||
@change="typeChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{
|
||||
item.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
name="productName"
|
||||
v-show="false"
|
||||
label="产品名称"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="
|
||||
modelRef.productName
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>动作映射</p>
|
||||
<j-collapse
|
||||
v-if="
|
||||
modelRef.actionMappings.length
|
||||
"
|
||||
:activeKey="actionActiveKey"
|
||||
@change="onActionCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.actionMappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.action
|
||||
? getTypesActions(
|
||||
item.action,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id ===
|
||||
item.action,
|
||||
)?.name
|
||||
: `动作映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delItem(index)"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'action',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择动作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
动作
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的设备类型具有的相关动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择动作"
|
||||
v-model:value="
|
||||
item.action
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getTypesActions(
|
||||
item.action ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
:label="
|
||||
i.name
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'actionType',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择操作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
操作
|
||||
<j-tooltip
|
||||
title="映射物联网平台中所选产品具备的动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择操作"
|
||||
v-model:value="
|
||||
item.actionType
|
||||
"
|
||||
show-search
|
||||
@change="
|
||||
() =>
|
||||
onActionTypeChange(
|
||||
index,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-select-option
|
||||
value="command"
|
||||
>下发指令</j-select-option
|
||||
>
|
||||
<j-select-option
|
||||
value="latestData"
|
||||
>获取历史数据</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="item.actionType"
|
||||
>
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'command',
|
||||
]"
|
||||
>
|
||||
<Command
|
||||
ref="command"
|
||||
:metadata="
|
||||
findProductMetadata
|
||||
"
|
||||
v-model:modelValue="
|
||||
item.command
|
||||
"
|
||||
:actionType="
|
||||
item.actionType
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addItem"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增动作
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p style="margin-top: 20px">属性映射</p>
|
||||
<j-collapse
|
||||
v-if="
|
||||
modelRef.propertyMappings.length
|
||||
"
|
||||
:activeKey="propertyActiveKey"
|
||||
@change="onPropertyCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.propertyMappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.source
|
||||
? getDuerOSProperties(
|
||||
item.source,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id ===
|
||||
item.source,
|
||||
)?.name
|
||||
: `属性映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="
|
||||
delPropertyItem(
|
||||
index,
|
||||
)
|
||||
"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="DuerOS属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
index,
|
||||
'source',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择DuerOS属性',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择DuerOS属性"
|
||||
v-model:value="
|
||||
item.source
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getDuerOSProperties(
|
||||
item.source ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="平台属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
index,
|
||||
'target',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择平台属性',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择平台属性"
|
||||
v-model:value="
|
||||
item.target
|
||||
"
|
||||
mode="tags"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getProductProperties(
|
||||
item.target,
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="
|
||||
i.id
|
||||
"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
"
|
||||
@click="addPropertyItem"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增属性
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin-top: 20px">
|
||||
<j-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
:rules="{
|
||||
max: 200,
|
||||
message: '最多输入200个字符',
|
||||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="
|
||||
modelRef.description
|
||||
"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div v-if="type === 'edit'">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="[
|
||||
'Northbound/DuerOS:add',
|
||||
'Northbound/DuerOS:update',
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="modelRef.name"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="产品"
|
||||
name="id"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择产品',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-select
|
||||
:disabled="
|
||||
type !== 'edit' &&
|
||||
modelRef.id &&
|
||||
modelRef.id !== ':id'
|
||||
"
|
||||
placeholder="请选择产品"
|
||||
v-model:value="modelRef.id"
|
||||
show-search
|
||||
@change="productChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="applianceType"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择设备类型',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
设备类型
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的规范"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择设备类型"
|
||||
v-model:value="modelRef.applianceType"
|
||||
show-search
|
||||
@change="typeChange"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
name="productName"
|
||||
v-show="false"
|
||||
label="产品名称"
|
||||
>
|
||||
<j-input
|
||||
v-model:value="modelRef.productName"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p>动作映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.actionMappings.length"
|
||||
:activeKey="actionActiveKey"
|
||||
@change="onActionCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.actionMappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.action
|
||||
? getTypesActions(
|
||||
item.action,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id === item.action,
|
||||
)?.name
|
||||
: `动作映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delItem(index)"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'action',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择动作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
动作
|
||||
<j-tooltip
|
||||
title="DuerOS平台拟定的设备类型具有的相关动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择动作"
|
||||
v-model:value="
|
||||
item.action
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getTypesActions(
|
||||
item.action ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
:label="i.name"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'actionType',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择操作',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<span>
|
||||
操作
|
||||
<j-tooltip
|
||||
title="映射物联网平台中所选产品具备的动作"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<j-select
|
||||
placeholder="请选择操作"
|
||||
v-model:value="
|
||||
item.actionType
|
||||
"
|
||||
show-search
|
||||
@change="
|
||||
() =>
|
||||
onActionTypeChange(
|
||||
index,
|
||||
)
|
||||
"
|
||||
>
|
||||
<j-select-option
|
||||
value="command"
|
||||
>下发指令</j-select-option
|
||||
>
|
||||
<j-select-option
|
||||
value="latestData"
|
||||
>获取历史数据</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="item.actionType"
|
||||
>
|
||||
<j-form-item
|
||||
:name="[
|
||||
'actionMappings',
|
||||
index,
|
||||
'command',
|
||||
]"
|
||||
>
|
||||
<Command
|
||||
ref="command"
|
||||
:metadata="
|
||||
findProductMetadata
|
||||
"
|
||||
v-model:modelValue="
|
||||
item.command
|
||||
"
|
||||
:actionType="
|
||||
item.actionType
|
||||
"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
@click="addItem"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增动作
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<p style="margin-top: 20px">属性映射</p>
|
||||
<j-collapse
|
||||
v-if="modelRef.propertyMappings.length"
|
||||
:activeKey="propertyActiveKey"
|
||||
@change="onPropertyCollChange"
|
||||
>
|
||||
<j-collapse-panel
|
||||
v-for="(
|
||||
item, index
|
||||
) in modelRef.propertyMappings"
|
||||
:key="index"
|
||||
:header="
|
||||
item.source
|
||||
? getDuerOSProperties(
|
||||
item.source,
|
||||
).find(
|
||||
(i) =>
|
||||
i.id === item.source,
|
||||
)?.name
|
||||
: `属性映射${index + 1}`
|
||||
"
|
||||
>
|
||||
<template #extra
|
||||
><AIcon
|
||||
type="DeleteOutlined"
|
||||
@click="delPropertyItem(index)"
|
||||
/></template>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="DuerOS属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
index,
|
||||
'source',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择DuerOS属性',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择DuerOS属性"
|
||||
v-model:value="
|
||||
item.source
|
||||
"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getDuerOSProperties(
|
||||
item.source ||
|
||||
'',
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="平台属性"
|
||||
:name="[
|
||||
'propertyMappings',
|
||||
index,
|
||||
'target',
|
||||
]"
|
||||
:rules="{
|
||||
required: true,
|
||||
message:
|
||||
'请选择平台属性',
|
||||
}"
|
||||
>
|
||||
<j-select
|
||||
placeholder="请选择平台属性"
|
||||
v-model:value="
|
||||
item.target
|
||||
"
|
||||
mode="tags"
|
||||
show-search
|
||||
>
|
||||
<j-select-option
|
||||
v-for="i in getProductProperties(
|
||||
item.target,
|
||||
)"
|
||||
:key="i.id"
|
||||
:value="i.id"
|
||||
>{{
|
||||
i.name
|
||||
}}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-collapse-panel>
|
||||
</j-collapse>
|
||||
<j-card v-else>
|
||||
<j-empty />
|
||||
</j-card>
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<j-button
|
||||
type="dashed"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
@click="addPropertyItem"
|
||||
>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>新增属性
|
||||
</j-button>
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin-top: 20px">
|
||||
<j-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
:rules="{
|
||||
max: 200,
|
||||
message: '最多输入200个字符',
|
||||
}"
|
||||
>
|
||||
<j-textarea
|
||||
v-model:value="modelRef.description"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div v-if="type === 'edit'">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="saveBtn"
|
||||
:hasPermission="[
|
||||
'Northbound/DuerOS:add',
|
||||
'Northbound/DuerOS:update',
|
||||
]"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<Doc />
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-card>
|
||||
<div class="right">
|
||||
<Doc />
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -504,7 +546,7 @@ const onActionTypeChange = (_index: number) => {
|
|||
properties: undefined,
|
||||
functionId: undefined,
|
||||
inputs: [],
|
||||
value: undefined
|
||||
value: undefined,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -720,4 +762,23 @@ watch(
|
|||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
position: relative;
|
||||
.left {
|
||||
.left-content {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 33%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,122 +5,138 @@
|
|||
target="northbound-dueros"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="Northbound/DuerOS:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img :src="getImage('/cloud/dueros.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">产品</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.productName }}</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.applianceType?.text }}</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'Northbound/DuerOS:' + item.key"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="Northbound/DuerOS:add"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #applianceType="slotProps">
|
||||
{{ slotProps.applianceType.text }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps.id)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'Northbound/DuerOS:' + i.key"
|
||||
<template #img>
|
||||
<img :src="getImage('/cloud/dueros.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 15px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>{{ slotProps?.productName }}</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<Ellipsis>
|
||||
<div>
|
||||
{{ slotProps?.applianceType?.text }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'Northbound/DuerOS:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #applianceType="slotProps">
|
||||
{{ slotProps.applianceType.text }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0 5px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'Northbound/DuerOS:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,61 +6,65 @@
|
|||
target="category"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="queryTree"
|
||||
model="TABLE"
|
||||
type="TREE"
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
:scroll="{ y: 550 }"
|
||||
:defaultParams="{
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
}"
|
||||
:params="params"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="device/Category:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="queryTree"
|
||||
model="TABLE"
|
||||
type="TREE"
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
:scroll="{ y: 550 }"
|
||||
:defaultParams="{
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
}"
|
||||
:params="params"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="device/Category:add"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:hasPermission="'device/Category:' + i.key"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:hasPermission="'device/Category:' + i.key"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增和编辑弹窗 -->
|
||||
<ModifyModal
|
||||
ref="modifyRef"
|
||||
|
|
|
|||
|
|
@ -1,114 +1,113 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<SaveChild
|
||||
v-if="childVisible"
|
||||
@close-child-save="closeChildSave"
|
||||
:childData="_current"
|
||||
<SaveChild
|
||||
v-if="childVisible"
|
||||
@close-child-save="closeChildSave"
|
||||
:childData="_current"
|
||||
/>
|
||||
<div v-else>
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="child-device"
|
||||
@search="handleSearch"
|
||||
class="device-child-device-search"
|
||||
/>
|
||||
<div v-else>
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="child-device"
|
||||
@search="handleSearch"
|
||||
class="child-device-search"
|
||||
/>
|
||||
<JProTable
|
||||
ref="childDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
terms: [
|
||||
{
|
||||
column: 'parentId',
|
||||
value: detail?.id || '',
|
||||
termType: 'eq',
|
||||
},
|
||||
],
|
||||
}"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
:model="'TABLE'"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<!-- <j-divider /> -->
|
||||
<JProTable
|
||||
ref="childDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:bodyStyle="{
|
||||
padding: 0
|
||||
}"
|
||||
:defaultParams="{
|
||||
terms: [
|
||||
{
|
||||
column: 'parentId',
|
||||
value: detail?.id || '',
|
||||
termType: 'eq',
|
||||
},
|
||||
],
|
||||
}"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="cancelSelect"
|
||||
:params="params"
|
||||
:model="'TABLE'"
|
||||
>
|
||||
<template #rightExtraRender>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
v-if="
|
||||
detail?.accessProvider === 'official-edge-gateway'
|
||||
"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="
|
||||
_current = {};
|
||||
childVisible = true;
|
||||
"
|
||||
>新增并绑定</PermissionButton
|
||||
>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="visible = true"
|
||||
hasPermission="device/Instance:update"
|
||||
>
|
||||
绑定</PermissionButton
|
||||
>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:popConfirm="{
|
||||
title: '确定解绑吗？',
|
||||
onConfirm: handleUnBind,
|
||||
}"
|
||||
>批量解除</PermissionButton
|
||||
>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #registryTime="slotProps">
|
||||
{{
|
||||
slotProps.registryTime
|
||||
? moment(slotProps.registryTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
v-if="
|
||||
detail?.accessProvider ===
|
||||
'official-edge-gateway'
|
||||
"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="
|
||||
_current = {};
|
||||
childVisible = true;
|
||||
"
|
||||
>新增并绑定</PermissionButton
|
||||
>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="visible = true"
|
||||
hasPermission="device/Instance:update"
|
||||
>
|
||||
绑定</PermissionButton
|
||||
>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:popConfirm="{
|
||||
title: '确定解绑吗？',
|
||||
onConfirm: handleUnBind,
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
>批量解除</PermissionButton
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'device/Instance:' + i.key"
|
||||
>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #registryTime="slotProps">
|
||||
{{
|
||||
slotProps.registryTime
|
||||
? moment(slotProps.registryTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state.text"
|
||||
:status="statusMap.get(slotProps.state.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'device/Instance:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<BindChildDevice v-if="visible" @change="closeBindDevice" />
|
||||
</div>
|
||||
</j-card>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<BindChildDevice v-if="visible" @change="closeBindDevice" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -147,10 +146,10 @@ const columns = [
|
|||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
search:{
|
||||
type:'string',
|
||||
defaultTermType: 'eq'
|
||||
}
|
||||
search: {
|
||||
type: 'string',
|
||||
defaultTermType: 'eq',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
|
|
@ -303,12 +302,8 @@ const closeChildSave = () => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.child-device-search {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(._jtable-body_1eyxz_1 ._jtable-body-header_1eyxz_6) {
|
||||
justify-content: flex-end;
|
||||
<style lang="less">
|
||||
.device-child-device-search {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,96 +1,84 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class="diagnose">
|
||||
<div
|
||||
class="diagnose-header"
|
||||
:style="{ background: headerColorMap.get(topState) }"
|
||||
>
|
||||
<div class="diagnose-top">
|
||||
<div class="diagnose-img">
|
||||
<div
|
||||
v-if="topState === 'loading'"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="headerImgMap.get(topState)"
|
||||
style="
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
"
|
||||
/>
|
||||
<img
|
||||
:src="getImage('/diagnose/loading-1.png')"
|
||||
class="diagnose-loading"
|
||||
style="height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="diagnose">
|
||||
<div
|
||||
class="diagnose-header"
|
||||
:style="{ background: headerColorMap.get(topState) }"
|
||||
>
|
||||
<div class="diagnose-top">
|
||||
<div class="diagnose-img">
|
||||
<div
|
||||
v-if="topState === 'loading'"
|
||||
style="width: 100%; height: 100%; position: relative"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:src="headerImgMap.get(topState)"
|
||||
style="height: 100%; position: absolute; z-index: 2"
|
||||
/>
|
||||
<img
|
||||
:src="getImage('/diagnose/loading-1.png')"
|
||||
class="diagnose-loading"
|
||||
style="height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="diagnose-text">
|
||||
<div class="diagnose-title">
|
||||
{{ headerTitleMap.get(topState) }}
|
||||
</div>
|
||||
<div class="diagnose-desc">
|
||||
<template v-if="topState !== 'loading'">{{
|
||||
headerDescMap.get(topState)
|
||||
}}</template>
|
||||
<template v-else>已诊断{{ count }}个</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diagnose-progress">
|
||||
<j-progress
|
||||
:percent="percent"
|
||||
:showInfo="false"
|
||||
size="small"
|
||||
:strokeColor="progressMap.get(topState)"
|
||||
style="width: 100%"
|
||||
<img
|
||||
v-else
|
||||
:src="headerImgMap.get(topState)"
|
||||
style="height: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="diagnose-radio">
|
||||
<div
|
||||
class="diagnose-radio-item"
|
||||
:class="
|
||||
item.key === 'message' && topState !== 'success'
|
||||
? 'disabled'
|
||||
: ''
|
||||
"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
:style="
|
||||
activeKey === item.key ? { ...activeStyle } : {}
|
||||
"
|
||||
@click="onTabChange(item.key)"
|
||||
>
|
||||
{{ item.text }}
|
||||
<div class="diagnose-text">
|
||||
<div class="diagnose-title">
|
||||
{{ headerTitleMap.get(topState) }}
|
||||
</div>
|
||||
<div class="diagnose-desc">
|
||||
<template v-if="topState !== 'loading'">{{
|
||||
headerDescMap.get(topState)
|
||||
}}</template>
|
||||
<template v-else>已诊断{{ count }}个</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="!first">
|
||||
<Message v-show="activeKey === 'message'" />
|
||||
</template>
|
||||
<template v-if="flag">
|
||||
<Status
|
||||
v-show="activeKey !== 'message'"
|
||||
:providerType="providerType"
|
||||
@countChange="countChange"
|
||||
@percentChange="percentChange"
|
||||
@stateChange="stateChange"
|
||||
/>
|
||||
</template>
|
||||
<div class="diagnose-progress">
|
||||
<j-progress
|
||||
:percent="percent"
|
||||
:showInfo="false"
|
||||
size="small"
|
||||
:strokeColor="progressMap.get(topState)"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="diagnose-radio">
|
||||
<div
|
||||
class="diagnose-radio-item"
|
||||
:class="
|
||||
item.key === 'message' && topState !== 'success'
|
||||
? 'disabled'
|
||||
: ''
|
||||
"
|
||||
v-for="item in tabList"
|
||||
:key="item.key"
|
||||
:style="activeKey === item.key ? { ...activeStyle } : {}"
|
||||
@click="onTabChange(item.key)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
<div>
|
||||
<template v-if="!first">
|
||||
<Message v-show="activeKey === 'message'" />
|
||||
</template>
|
||||
<template v-if="flag">
|
||||
<Status
|
||||
v-show="activeKey !== 'message'"
|
||||
:providerType="providerType"
|
||||
@countChange="countChange"
|
||||
@percentChange="percentChange"
|
||||
@stateChange="stateChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -160,7 +148,7 @@ const countChange = (num: number) => {
|
|||
};
|
||||
|
||||
const init = () => {
|
||||
flag.value = true
|
||||
flag.value = true;
|
||||
activeKey.value = 'status';
|
||||
const provider = instanceStore.current?.accessProvider;
|
||||
if (provider === 'fixed-media' || provider === 'gb28181-2016') {
|
||||
|
|
@ -175,16 +163,16 @@ const init = () => {
|
|||
providerType.value = 'network';
|
||||
}
|
||||
topState.value = 'loading';
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 500)
|
||||
init();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
flag.value = false
|
||||
flag.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<j-card :bordered="false" style="padding: 0">
|
||||
<template #extra>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
:edgeId="instanceStore.current.parentId"
|
||||
/>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<j-card v-else :bordered="false" style="padding: 0">
|
||||
<JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
|
||||
</j-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<j-empty
|
||||
v-if="!metadata || (metadata && !metadata.functions.length)"
|
||||
style="margin-top: 50px"
|
||||
>
|
||||
<template #description>
|
||||
请配置对应产品的
|
||||
<!-- <a @click="emits('onJump', 'Metadata')">物模型属性功能</a> -->
|
||||
<a @click="onJump">物模型属性功能</a>
|
||||
</template>
|
||||
</j-empty>
|
||||
<template v-else>
|
||||
<j-tabs v-model:activeKey="activeKey">
|
||||
<j-tab-pane key="Simple" tab="精简模式" />
|
||||
<j-tab-pane key="Advance" tab="高级模式" />
|
||||
</j-tabs>
|
||||
<component :is="tabs[activeKey]" />
|
||||
<j-empty
|
||||
v-if="!metadata || (metadata && !metadata.functions.length)"
|
||||
style="margin-top: 50px"
|
||||
>
|
||||
<template #description>
|
||||
请配置对应产品的
|
||||
<!-- <a @click="emits('onJump', 'Metadata')">物模型属性功能</a> -->
|
||||
<a @click="onJump">物模型属性功能</a>
|
||||
</template>
|
||||
</j-card>
|
||||
</j-empty>
|
||||
<template v-else>
|
||||
<j-tabs v-model:activeKey="activeKey">
|
||||
<j-tab-pane key="Simple" tab="精简模式" />
|
||||
<j-tab-pane key="Advance" tab="高级模式" />
|
||||
</j-tabs>
|
||||
<component :is="tabs[activeKey]" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,90 +1,88 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
设备信息
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="visible = true"
|
||||
hasPermission="device/Instance:update"
|
||||
>
|
||||
<template #icon><AIcon type="EditOutlined" /></template>
|
||||
编辑
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<j-descriptions-item label="设备ID">{{
|
||||
instanceStore.current?.id
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="产品名称">{{
|
||||
instanceStore.current?.productName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="产品分类">{{
|
||||
instanceStore.current?.classifiedName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="设备类型">{{
|
||||
instanceStore.current?.deviceType?.text
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="固件版本">{{
|
||||
instanceStore.current?.firmwareInfo?.version
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="连接协议">{{
|
||||
instanceStore.current?.transport
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="消息协议">{{
|
||||
instanceStore.current?.protocolName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
instanceStore.current?.createTime
|
||||
? moment(instanceStore.current?.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="注册时间">{{
|
||||
instanceStore.current?.registerTime
|
||||
? moment(instanceStore.current?.registerTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="最后上线时间">{{
|
||||
instanceStore.current?.onlineTime
|
||||
? moment(instanceStore.current?.onlineTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item
|
||||
label="父设备"
|
||||
v-if="
|
||||
instanceStore.current?.deviceType?.value === 'childrenDevice'
|
||||
"
|
||||
>{{ instanceStore.current?.parentId }}</j-descriptions-item
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
设备信息
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="visible = true"
|
||||
hasPermission="device/Instance:update"
|
||||
>
|
||||
<j-descriptions-item label="说明">{{
|
||||
instanceStore.current?.description
|
||||
}}</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
<Config />
|
||||
<Tags
|
||||
<template #icon><AIcon type="EditOutlined" /></template>
|
||||
编辑
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<j-descriptions-item label="设备ID">{{
|
||||
instanceStore.current?.id
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="产品名称">{{
|
||||
instanceStore.current?.productName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="产品分类">{{
|
||||
instanceStore.current?.classifiedName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="设备类型">{{
|
||||
instanceStore.current?.deviceType?.text
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="固件版本">{{
|
||||
instanceStore.current?.firmwareInfo?.version
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="连接协议">{{
|
||||
instanceStore.current?.transport
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="消息协议">{{
|
||||
instanceStore.current?.protocolName
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
instanceStore.current?.createTime
|
||||
? moment(instanceStore.current?.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="注册时间">{{
|
||||
instanceStore.current?.registerTime
|
||||
? moment(instanceStore.current?.registerTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="最后上线时间">{{
|
||||
instanceStore.current?.onlineTime
|
||||
? moment(instanceStore.current?.onlineTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item
|
||||
label="父设备"
|
||||
v-if="
|
||||
instanceStore.current?.tags &&
|
||||
instanceStore.current?.tags.length > 0
|
||||
instanceStore.current?.deviceType?.value === 'childrenDevice'
|
||||
"
|
||||
/>
|
||||
<Relation
|
||||
v-if="
|
||||
instanceStore.current?.relations &&
|
||||
instanceStore.current?.relations.length > 0
|
||||
"
|
||||
/>
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="instanceStore.current"
|
||||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
</j-card>
|
||||
>{{ instanceStore.current?.parentId }}</j-descriptions-item
|
||||
>
|
||||
<j-descriptions-item label="说明">{{
|
||||
instanceStore.current?.description
|
||||
}}</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
<Config />
|
||||
<Tags
|
||||
v-if="
|
||||
instanceStore.current?.tags &&
|
||||
instanceStore.current?.tags.length > 0
|
||||
"
|
||||
/>
|
||||
<Relation
|
||||
v-if="
|
||||
instanceStore.current?.relations &&
|
||||
instanceStore.current?.relations.length > 0
|
||||
"
|
||||
/>
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="instanceStore.current"
|
||||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,47 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="device-instance-log"
|
||||
@search="handleSearch"
|
||||
type="simple"
|
||||
class="search"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRefLog"
|
||||
:columns="columns"
|
||||
:request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
|
||||
model="TABLE"
|
||||
:defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
|
||||
:params="params"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps?.type?.text }}
|
||||
</template>
|
||||
<template #timestamp="slotProps">
|
||||
{{
|
||||
slotProps.timestamp
|
||||
? moment(slotProps.timestamp).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="device-instance-log"
|
||||
@search="handleSearch"
|
||||
type="simple"
|
||||
class="device-log-search"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRefLog"
|
||||
:columns="columns"
|
||||
:request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
|
||||
model="TABLE"
|
||||
:defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
|
||||
:params="params"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps?.type?.text }}
|
||||
</template>
|
||||
<template #timestamp="slotProps">
|
||||
{{
|
||||
slotProps.timestamp
|
||||
? moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<j-button
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
>
|
||||
<j-button
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</j-button>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-card>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</j-button>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -125,11 +121,7 @@ const getActions = (
|
|||
onClick: () => {
|
||||
let content = '';
|
||||
try {
|
||||
content = JSON.stringify(
|
||||
JSON.parse(data.content),
|
||||
null,
|
||||
2,
|
||||
);
|
||||
content = JSON.stringify(JSON.parse(data.content), null, 2);
|
||||
} catch (error) {
|
||||
content = data.content;
|
||||
}
|
||||
|
|
@ -139,7 +131,7 @@ const getActions = (
|
|||
content: h(Textarea, {
|
||||
bordered: false,
|
||||
rows: 15,
|
||||
value: content
|
||||
value: content,
|
||||
}),
|
||||
});
|
||||
},
|
||||
|
|
@ -152,8 +144,8 @@ const handleSearch = (_params: any) => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
<style lang="less">
|
||||
.device-log-search {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,187 +1,262 @@
|
|||
|
||||
<template>
|
||||
<j-card>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<div>
|
||||
<AIcon type="ExclamationCircleOutlined" />
|
||||
<template v-if="topTitle === 'rest'">
|
||||
当前数据解析内容已脱离产品影响，
|
||||
<PermissionButton type="link" hasPermission="device/Instance:update" @click="rest()">
|
||||
重置
|
||||
</PermissionButton>
|
||||
后将继承产品数据解析内容
|
||||
<div>
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<div>
|
||||
<AIcon type="ExclamationCircleOutlined" />
|
||||
<template v-if="topTitle === 'rest'">
|
||||
当前数据解析内容已脱离产品影响，
|
||||
<PermissionButton
|
||||
type="link"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="rest()"
|
||||
>
|
||||
重置
|
||||
</PermissionButton>
|
||||
后将继承产品数据解析内容
|
||||
</template>
|
||||
<template v-else>
|
||||
当前数据解析内容继承自产品,
|
||||
<PermissionButton
|
||||
type="link"
|
||||
hasPermission="device/Instance:update"
|
||||
@click="readOnly = false"
|
||||
:style="color"
|
||||
>
|
||||
修改
|
||||
</PermissionButton>
|
||||
后将脱离产品影响。
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select
|
||||
:defaultValue="'JavaScript'"
|
||||
style="width: 200px; margin-left: 5px"
|
||||
>
|
||||
<j-select-option value="JavaScript"
|
||||
>JavaScript(ECMAScript 5)</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
<AIcon
|
||||
type="ExpandOutlined"
|
||||
style="margin-left: 20px"
|
||||
@click="toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="el">
|
||||
<div
|
||||
v-show="readOnly"
|
||||
class="edit-only"
|
||||
@click="
|
||||
() => {
|
||||
message.warning({
|
||||
key: 1,
|
||||
content: () => '请点击上方修改字样,用以编辑脚本',
|
||||
style: {
|
||||
marginTop: '260px',
|
||||
},
|
||||
});
|
||||
}
|
||||
"
|
||||
></div>
|
||||
<j-monaco-editor
|
||||
language="javascript"
|
||||
style="height: 100%"
|
||||
theme="vs"
|
||||
v-model:modelValue="editorValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template
|
||||
v-if="instanceStore.current.transport === 'MQTT'"
|
||||
>
|
||||
<div style="margin-right: 5px">Topic:</div>
|
||||
<j-auto-complete
|
||||
placeholder="请输入Topic"
|
||||
style="width: 300px"
|
||||
:options="topicList"
|
||||
:allowClear="true"
|
||||
:filterOption="filterOption"
|
||||
v-model:value="topic"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
当前数据解析内容继承自产品,
|
||||
<PermissionButton type="link" hasPermission="device/Instance:update" @click="readOnly = false"
|
||||
:style="color">
|
||||
修改
|
||||
</PermissionButton>
|
||||
后将脱离产品影响。
|
||||
<div style="margin-right: 5px">URL:</div>
|
||||
<j-input
|
||||
placeholder="请输入URL"
|
||||
v-model:value="url"
|
||||
style="width: 300px"
|
||||
></j-input>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select :defaultValue="'JavaScript'" style="width: 200px;margin-left: 5px;">
|
||||
<j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
|
||||
</j-select>
|
||||
<AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
|
||||
</div>
|
||||
<j-textarea
|
||||
:rows="5"
|
||||
placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
|
||||
style="margin-top: 10px"
|
||||
v-model:value="simulation"
|
||||
/>
|
||||
</div>
|
||||
<div class="edit" ref="el">
|
||||
<div v-show="readOnly" class="edit-only" @click="() => {
|
||||
message.warning({
|
||||
key: 1,
|
||||
content: () => '请点击上方修改字样,用以编辑脚本',
|
||||
style: {
|
||||
marginTop: '260px'
|
||||
}
|
||||
|
||||
})
|
||||
}"></div>
|
||||
<j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%;">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template v-if="instanceStore.current.transport === 'MQTT'">
|
||||
<div style="margin-right: 5px;">Topic:</div>
|
||||
<j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
|
||||
:allowClear="true" :filterOption="filterOption" v-model:value="topic" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-right: 5px;">URL:</div>
|
||||
<j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
|
||||
v-model:value="simulation" />
|
||||
</div>
|
||||
<div style="width: 49.5%;">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea
|
||||
:autoSize="{ minRows: 5 }"
|
||||
:style="resStyle"
|
||||
v-model:value="result"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-left: 10px;">
|
||||
<PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
|
||||
:disabled="isDisabled" @click="debug()" :tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}">
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
|
||||
:style="{ marginLeft: '10px' }" :tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}">
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</j-card>
|
||||
</div>
|
||||
<div style="margin-top: 10px; margin-left: 10px">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="isDisabled"
|
||||
@click="debug()"
|
||||
:tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}"
|
||||
>
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="!isTest"
|
||||
@click="save()"
|
||||
:style="{ marginLeft: '10px' }"
|
||||
:tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name="Parsing">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||
// import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import {
|
||||
deviceCode,
|
||||
getProtocal,
|
||||
testCode,
|
||||
saveDeviceCode,
|
||||
delDeviceCode
|
||||
} from '@/api/device/instance'
|
||||
delDeviceCode,
|
||||
} from '@/api/device/instance';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
const defaultValue =
|
||||
'//解码函数\r\nfunction decode(context) {\r\n //原始报文\r\n var buffer = context.payload();\r\n // 转为json\r\n // var json = context.json();\r\n //mqtt 时通过此方法获取topic\r\n // var topic = context.topic();\r\n\r\n // 提取变量\r\n // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n //温度属性\r\n var temperature = buffer.getShort(3) * 10;\r\n //湿度属性\r\n var humidity = buffer.getShort(6) * 10;\r\n return {\r\n "temperature": temperature,\r\n "humidity": humidity\r\n };\r\n}\r\n';
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const { toggle } = useFullscreen(el)
|
||||
const el = ref<HTMLElement | null>(null);
|
||||
const { toggle } = useFullscreen(el);
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
|
||||
const topTitle = ref<string>('')
|
||||
const readOnly = ref<boolean>(true)
|
||||
const url = ref<string>('')
|
||||
const topic = ref<string>('')
|
||||
const topicList = ref([])
|
||||
const simulation = ref<string>('')
|
||||
const resultValue = ref<any>({})
|
||||
const loading = ref<boolean>(false)
|
||||
const isTest = ref<boolean>(false)
|
||||
const editorValue = ref<string>('')
|
||||
const topTitle = ref<string>('');
|
||||
const readOnly = ref<boolean>(true);
|
||||
const url = ref<string>('');
|
||||
const topic = ref<string>('');
|
||||
const topicList = ref([]);
|
||||
const simulation = ref<string>('');
|
||||
const resultValue = ref<any>({});
|
||||
const loading = ref<boolean>(false);
|
||||
const isTest = ref<boolean>(false);
|
||||
const editorValue = ref<string>('');
|
||||
|
||||
const color = computed(() => ({
|
||||
color: readOnly.value ? '#415ed1' : '#a6a6a6'
|
||||
}))
|
||||
const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red'
|
||||
} : {
|
||||
'margin-top': '10px',
|
||||
}))
|
||||
const filterOption = (inputValue: any, option: any) => option!.value.indexOf(inputValue) !== -1
|
||||
color: readOnly.value ? '#415ed1' : '#a6a6a6',
|
||||
}));
|
||||
const resStyle = computed(() =>
|
||||
isBoolean(resultValue.value.success)
|
||||
? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red',
|
||||
}
|
||||
: {
|
||||
'margin-top': '10px',
|
||||
},
|
||||
);
|
||||
const filterOption = (inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1;
|
||||
|
||||
const isDisabled = computed(() => simulation.value === '')
|
||||
const isDisabled = computed(() => simulation.value === '');
|
||||
|
||||
const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
|
||||
const result = computed(() =>
|
||||
resultValue.value.success
|
||||
? JSON.stringify(resultValue.value.outputs?.[0])
|
||||
: resultValue.value.reason,
|
||||
);
|
||||
|
||||
//重置
|
||||
const rest = async () => {
|
||||
const res = await delDeviceCode(instanceStore.current.productId, instanceStore.current.id)
|
||||
const res = await delDeviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
getDeviceCode();
|
||||
message.success('操作成功')
|
||||
message.success('操作成功');
|
||||
}
|
||||
};
|
||||
//获取topic
|
||||
const getTopic = async () => {
|
||||
const res: any = await getProtocal(instanceStore.current.protocol, instanceStore.current.transport)
|
||||
const res: any = await getProtocal(
|
||||
instanceStore.current.protocol,
|
||||
instanceStore.current.transport,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result.routes?.map((items: any) => ({
|
||||
value: items.topic,
|
||||
}));
|
||||
// setTopicList(item);
|
||||
topicList.value = item
|
||||
topicList.value = item;
|
||||
}
|
||||
};
|
||||
//获取设备解析规则
|
||||
const getDeviceCode = async () => {
|
||||
const res: any = await deviceCode(instanceStore.current.productId, instanceStore.current.id)
|
||||
const res: any = await deviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result?.configuration?.script ? res.result?.configuration?.script : defaultValue
|
||||
const item = res.result?.configuration?.script
|
||||
? res.result?.configuration?.script
|
||||
: defaultValue;
|
||||
if (res.result?.deviceId) {
|
||||
readOnly.value = false
|
||||
topTitle.value = 'rest'
|
||||
editorValue.value = item
|
||||
readOnly.value = false;
|
||||
topTitle.value = 'rest';
|
||||
editorValue.value = item;
|
||||
} else {
|
||||
readOnly.value = true
|
||||
topTitle.value = 'edit'
|
||||
editorValue.value = item
|
||||
readOnly.value = true;
|
||||
topTitle.value = 'edit';
|
||||
editorValue.value = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//调试
|
||||
const test = async (dataTest: any) => {
|
||||
loading.value = true
|
||||
const res = await testCode(dataTest)
|
||||
loading.value = true;
|
||||
const res = await testCode(dataTest);
|
||||
if (res.status === 200) {
|
||||
loading.value = false
|
||||
resultValue.value = res?.result
|
||||
loading.value = false;
|
||||
resultValue.value = res?.result;
|
||||
} else {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -193,15 +268,18 @@ const save = async () => {
|
|||
script: editorValue.value,
|
||||
lang: 'javascript',
|
||||
},
|
||||
}
|
||||
const res = await saveDeviceCode(instanceStore.current.productId, instanceStore.current.id, item)
|
||||
};
|
||||
const res = await saveDeviceCode(
|
||||
instanceStore.current.productId,
|
||||
instanceStore.current.id,
|
||||
item,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
message.success('保存成功');
|
||||
getDeviceCode();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const debug = () => {
|
||||
if (instanceStore.current.transport === 'MQTT') {
|
||||
if (topic.value !== '') {
|
||||
|
|
@ -215,8 +293,8 @@ const debug = () => {
|
|||
},
|
||||
provider: 'jsr223',
|
||||
payload: simulation.value,
|
||||
})
|
||||
isTest.value = true
|
||||
});
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入topic');
|
||||
}
|
||||
|
|
@ -233,19 +311,17 @@ const debug = () => {
|
|||
},
|
||||
payload: simulation.value,
|
||||
});
|
||||
isTest.value = true
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入url');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDeviceCode()
|
||||
getTopic()
|
||||
})
|
||||
|
||||
getDeviceCode();
|
||||
getTopic();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,31 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class="property-box">
|
||||
<div class="property-box-left">
|
||||
<j-input-search
|
||||
v-model:value="value"
|
||||
placeholder="请输入事件名称"
|
||||
style="width: 200px; margin-bottom: 10px"
|
||||
@search="onSearch"
|
||||
:allowClear="true"
|
||||
/>
|
||||
<j-tabs
|
||||
tab-position="left"
|
||||
style="height: 600px"
|
||||
v-if="tabList.length"
|
||||
v-model:activeKey="activeKey"
|
||||
:tabBarStyle="{ width: '200px' }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<j-tab-pane
|
||||
v-for="i in tabList"
|
||||
:key="i.key"
|
||||
:tab="i.tab"
|
||||
/>
|
||||
</j-tabs>
|
||||
<JEmpty v-else style="margin: 180px 0" />
|
||||
</div>
|
||||
<div class="property-box-right">
|
||||
<Event v-if="type === 'event'" :data="data" />
|
||||
<Property v-else-if="type === 'property'" :data="properties" />
|
||||
<JEmpty v-else style="margin: 220px 0" />
|
||||
</div>
|
||||
<div class="property-box">
|
||||
<div class="property-box-left">
|
||||
<j-input-search
|
||||
v-model:value="value"
|
||||
placeholder="请输入事件名称"
|
||||
style="width: 200px; margin-bottom: 10px"
|
||||
@search="onSearch"
|
||||
:allowClear="true"
|
||||
/>
|
||||
<j-tabs
|
||||
tab-position="left"
|
||||
style="height: 600px"
|
||||
v-if="tabList.length"
|
||||
v-model:activeKey="activeKey"
|
||||
:tabBarStyle="{ width: '200px' }"
|
||||
@change="tabChange"
|
||||
>
|
||||
<j-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
|
||||
</j-tabs>
|
||||
<JEmpty v-else style="margin: 180px 0" />
|
||||
</div>
|
||||
</j-card>
|
||||
<div class="property-box-right">
|
||||
<Event v-if="type === 'event'" :data="data" />
|
||||
<Property v-else-if="type === 'property'" :data="properties" />
|
||||
<JEmpty v-else style="margin: 220px 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -51,28 +45,32 @@ const tabList = ref<{ key: string; tab: string; type: 'property' | 'event' }[]>(
|
|||
],
|
||||
);
|
||||
const type = ref<string>('property');
|
||||
const data = ref<Record<string, any>>({})
|
||||
const data = ref<Record<string, any>>({});
|
||||
const value = ref<string>('');
|
||||
const instanceStore = useInstanceStore()
|
||||
const metadata = JSON.parse(instanceStore.current?.metadata || '{}')
|
||||
const properties = metadata.properties
|
||||
const events = metadata.events
|
||||
const instanceStore = useInstanceStore();
|
||||
const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
|
||||
const properties = metadata.properties;
|
||||
const events = metadata.events;
|
||||
|
||||
watch(() => events, (newVal) => {
|
||||
if(events && newVal.length){
|
||||
newVal.map((item: any) => {
|
||||
tabList.value.push({
|
||||
...item,
|
||||
key: item.id,
|
||||
tab: item.name,
|
||||
type: 'event',
|
||||
})
|
||||
})
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
watch(
|
||||
() => events,
|
||||
(newVal) => {
|
||||
if (events && newVal.length) {
|
||||
newVal.map((item: any) => {
|
||||
tabList.value.push({
|
||||
...item,
|
||||
key: item.id,
|
||||
tab: item.name,
|
||||
type: 'event',
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const onSearch = () => {
|
||||
const arr = [
|
||||
|
|
@ -87,33 +85,32 @@ const onSearch = () => {
|
|||
key: item.id,
|
||||
tab: item.name,
|
||||
type: 'event',
|
||||
}
|
||||
})
|
||||
]
|
||||
if(value.value){
|
||||
};
|
||||
}),
|
||||
];
|
||||
if (value.value) {
|
||||
const li = arr.filter((i: any) => {
|
||||
return i?.tab.indexOf(value.value) !== -1;
|
||||
})
|
||||
tabList.value = _.cloneDeep(li)
|
||||
});
|
||||
tabList.value = _.cloneDeep(li);
|
||||
} else {
|
||||
tabList.value = _.cloneDeep(arr)
|
||||
tabList.value = _.cloneDeep(arr);
|
||||
}
|
||||
const dt = tabList.value?.[0]
|
||||
const dt = tabList.value?.[0];
|
||||
if (dt) {
|
||||
data.value = dt
|
||||
data.value = dt;
|
||||
type.value = dt.type;
|
||||
} else {
|
||||
type.value = ''
|
||||
type.value = '';
|
||||
}
|
||||
};
|
||||
const tabChange = (key: string) => {
|
||||
const dt = tabList.value.find((i) => i.key === key);
|
||||
if (dt) {
|
||||
data.value = dt
|
||||
data.value = dt;
|
||||
type.value = dt.type;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading" v-if="metadata.properties.length">
|
||||
<j-card>
|
||||
<j-card :bordered="false" borderStyle="padding: 0">
|
||||
<template #extra>
|
||||
<j-space>
|
||||
<j-button @click="visible = true">批量映射</j-button>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
:metaData="modelRef.dataSource"
|
||||
/>
|
||||
</j-spin>
|
||||
<j-card v-else>
|
||||
<j-card v-else :bordered="false" borderStyle="padding: 0">
|
||||
<JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
|
||||
</j-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
<j-tooltip :title="instanceStore.current?.name">
|
||||
<div class="deviceDetailHead">{{ instanceStore.current?.name }}</div>
|
||||
<div class="deviceDetailHead">
|
||||
{{ instanceStore.current?.name }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
<j-divider type="vertical" />
|
||||
<j-space>
|
||||
|
|
@ -95,11 +97,15 @@
|
|||
style="margin-right: 20px; cursor: pointer"
|
||||
/>
|
||||
</template>
|
||||
<component
|
||||
:is="tabs[instanceStore.tabActiveKey]"
|
||||
v-bind="{ type: 'device' }"
|
||||
@onJump="onTabChange"
|
||||
/>
|
||||
<FullPage>
|
||||
<j-card :bordered="false">
|
||||
<component
|
||||
:is="tabs[instanceStore.tabActiveKey]"
|
||||
v-bind="{ type: 'device' }"
|
||||
@onJump="onTabChange"
|
||||
/>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -121,12 +127,12 @@ import { message } from 'jetlinks-ui-components';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import { getWebSocket } from '@/utils/websocket';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const route = useRoute();
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const statusMap = new Map();
|
||||
|
|
@ -266,18 +272,18 @@ const getDetail = () => {
|
|||
// );
|
||||
|
||||
const getDetailFn = async () => {
|
||||
const _id = route.params?.id
|
||||
if (_id) {
|
||||
await instanceStore.refresh(String(_id));
|
||||
getStatus(String(_id));
|
||||
list.value = [...initList];
|
||||
getDetail();
|
||||
}
|
||||
instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info';
|
||||
}
|
||||
const _id = route.params?.id;
|
||||
if (_id) {
|
||||
await instanceStore.refresh(String(_id));
|
||||
getStatus(String(_id));
|
||||
list.value = [...initList];
|
||||
getDetail();
|
||||
}
|
||||
instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetailFn()
|
||||
getDetailFn();
|
||||
});
|
||||
|
||||
const onBack = () => {
|
||||
|
|
|
|||
|
|
@ -5,37 +5,42 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:rowSelection="
|
||||
isCheck
|
||||
? {
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}
|
||||
: false
|
||||
"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="device/Instance:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<BatchDropdown
|
||||
v-model:isCheck="isCheck"
|
||||
:actions="batchActions"
|
||||
@change="onCheckChange"
|
||||
/>
|
||||
<!-- <j-dropdown>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:rowSelection="
|
||||
isCheck
|
||||
? {
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}
|
||||
: false
|
||||
"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="device/Instance:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<BatchDropdown
|
||||
v-model:isCheck="isCheck"
|
||||
:actions="batchActions"
|
||||
@change="onCheckChange"
|
||||
/>
|
||||
<!-- <j-dropdown>
|
||||
<j-button
|
||||
>批量操作 <AIcon type="DownOutlined"
|
||||
/></j-button>
|
||||
|
|
@ -141,116 +146,128 @@
|
|||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown> -->
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.productName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'device/Instance:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
slotProps?.createTime ? dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleClick"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'device/Instance:' + i.key
|
||||
"
|
||||
<template #img>
|
||||
<img
|
||||
:width="88"
|
||||
:height="88"
|
||||
:src="
|
||||
slotProps?.photoUrl ||
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.productName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'device/Instance:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
slotProps?.createTime
|
||||
? dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'device/Instance:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
<Import
|
||||
v-if="importVisible"
|
||||
|
|
@ -867,7 +884,7 @@ const handleSearch = (_params: any) => {
|
|||
) {
|
||||
return {
|
||||
...item2,
|
||||
column: 'productId$product-info'
|
||||
column: 'productId$product-info',
|
||||
};
|
||||
}
|
||||
return item2;
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
<!-- 配置信息 -->
|
||||
<template>
|
||||
<j-card style="min-height: 100%">
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
<div style="display: flex">
|
||||
<h3>配置信息</h3>
|
||||
<!-- <div style="margin: 0 0px 0 15px; color: #1d39c4">
|
||||
<j-descriptions bordered>
|
||||
<template #title>
|
||||
<div style="display: flex">
|
||||
<h3>配置信息</h3>
|
||||
<!-- <div style="margin: 0 0px 0 15px; color: #1d39c4">
|
||||
<AIcon type="EditOutlined" @click="editConfig" />
|
||||
</div> -->
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="editConfig"
|
||||
hasPermission="device/Product:update"
|
||||
>
|
||||
<template #icon><AIcon type="EditOutlined" /></template>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="editConfig"
|
||||
hasPermission="device/Product:update"
|
||||
>
|
||||
<template #icon><AIcon type="EditOutlined" /></template>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<j-descriptions-item label="ID">
|
||||
<Ellipsis>{{ productStore.current.id }}</Ellipsis>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="产品分类">
|
||||
<Ellipsis>{{ productStore.current.classifiedName }}</Ellipsis>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="设备类型">{{
|
||||
productStore.current.deviceType?.text
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="ID">
|
||||
<Ellipsis>{{ productStore.current.id }}</Ellipsis>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="产品分类">
|
||||
<Ellipsis>{{ productStore.current.classifiedName }}</Ellipsis>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="设备类型">{{
|
||||
productStore.current.deviceType?.text
|
||||
}}</j-descriptions-item>
|
||||
|
||||
<j-descriptions-item label="接入方式">
|
||||
<j-button type="link" @click="changeTables">{{
|
||||
<j-descriptions-item label="接入方式">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="changeTables"
|
||||
hasPermission="device/Product:update"
|
||||
>{{
|
||||
productStore.current.accessName
|
||||
? productStore.current.accessName
|
||||
: '配置接入方式'
|
||||
}}</j-button>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
dayjs(productStore.current.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="更新时间">{{
|
||||
dayjs(productStore.current.modifyTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</j-descriptions-item>
|
||||
}}</PermissionButton
|
||||
>
|
||||
</j-descriptions-item>
|
||||
<j-descriptions-item label="创建时间">{{
|
||||
dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="更新时间">{{
|
||||
dayjs(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</j-descriptions-item>
|
||||
|
||||
<j-descriptions-item label="说明" :span="3">
|
||||
{{ productStore.current.describe }}
|
||||
</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
|
||||
<j-descriptions-item label="说明" :span="3">
|
||||
{{ productStore.current.describe }}
|
||||
</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</j-card>
|
||||
<!-- 编辑 -->
|
||||
<Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
|
||||
</template>
|
||||
|
|
@ -60,6 +60,8 @@ import { useProductStore } from '@/store/product';
|
|||
import Save from '../../Save/index.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
const menuSotre = useMenuStore();
|
||||
const productStore = useProductStore();
|
||||
const route = useRoute();
|
||||
const saveRef = ref();
|
||||
|
|
|
|||
|
|
@ -1,138 +1,193 @@
|
|||
|
||||
<template>
|
||||
<j-card>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select :defaultValue="'JavaScript'" style="width: 200;margin-left: 5px;">
|
||||
<j-select-option value="JavaScript">JavaScript(ECMAScript 5)</j-select-option>
|
||||
</j-select>
|
||||
<AIcon type="ExpandOutlined" style="margin-left: 20px;" @click="toggle" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="el">
|
||||
<j-monaco-editor language="javascript" style="height: 100%;" theme="vs" v-model:modelValue="editorValue" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%;">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template v-if="productStore.current.transportProtocol === 'MQTT'">
|
||||
<div style="margin-right: 5px;">Topic:</div>
|
||||
<j-auto-complete placeholder="请输入Topic" style="width: 300px" :options="topicList"
|
||||
:allowClear="true" :filterOption="(inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1" v-model:value="topic" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-right: 5px;">URL:</div>
|
||||
<j-input placeholder="请输入URL" v-model:value="url" style="width: 300px"></j-input>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<j-textarea :rows="5" placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串" style="margin-top: 10px;"
|
||||
v-model:value="simulation" />
|
||||
</div>
|
||||
<div style="width: 49.5%;">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea :autoSize="{ minRows: 5 }" :style="resStyle" v-model:value="result" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div>
|
||||
脚本语言:
|
||||
<j-select
|
||||
:defaultValue="'JavaScript'"
|
||||
style="width: 200; margin-left: 5px"
|
||||
>
|
||||
<j-select-option value="JavaScript"
|
||||
>JavaScript(ECMAScript 5)</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
<AIcon
|
||||
type="ExpandOutlined"
|
||||
style="margin-left: 20px"
|
||||
@click="toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-left: 10px;">
|
||||
<PermissionButton type="primary" hasPermission="device/Instance:update" :loading="loading"
|
||||
:disabled="isDisabled" @click="debug()" :tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}">
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton hasPermission="device/Instance:update" :loading="loading" :disabled="!isTest" @click="save()"
|
||||
:style="{ marginLeft: '10px' }" :tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}">
|
||||
保存
|
||||
</PermissionButton>
|
||||
<div class="edit" ref="el">
|
||||
<j-monaco-editor
|
||||
language="javascript"
|
||||
style="height: 100%"
|
||||
theme="vs"
|
||||
v-model:modelValue="editorValue"
|
||||
/>
|
||||
</div>
|
||||
</j-card>
|
||||
<div class="bottom">
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">模拟输入</div>
|
||||
<div class="bottom-title-topic">
|
||||
<template
|
||||
v-if="
|
||||
productStore.current.transportProtocol ===
|
||||
'MQTT'
|
||||
"
|
||||
>
|
||||
<div style="margin-right: 5px">Topic:</div>
|
||||
<j-auto-complete
|
||||
placeholder="请输入Topic"
|
||||
style="width: 300px"
|
||||
:options="topicList"
|
||||
:allowClear="true"
|
||||
:filterOption="(inputValue: any, option: any) =>
|
||||
option!.value.indexOf(inputValue) !== -1"
|
||||
v-model:value="topic"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="margin-right: 5px">URL:</div>
|
||||
<j-input
|
||||
placeholder="请输入URL"
|
||||
v-model:value="url"
|
||||
style="width: 300px"
|
||||
></j-input>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<j-textarea
|
||||
:rows="5"
|
||||
placeholder="// 二进制数据以0x开头的十六进制输入，字符串数据输入原始字符串"
|
||||
style="margin-top: 10px"
|
||||
v-model:value="simulation"
|
||||
/>
|
||||
</div>
|
||||
<div style="width: 49.5%">
|
||||
<div class="bottom-title">
|
||||
<div class="bottom-title-text">运行结果</div>
|
||||
</div>
|
||||
<j-textarea
|
||||
:autoSize="{ minRows: 5 }"
|
||||
:style="resStyle"
|
||||
v-model:value="result"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; margin-left: 10px">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="isDisabled"
|
||||
@click="debug()"
|
||||
:tooltip="{
|
||||
title: '需输入脚本和模拟数据后再点击',
|
||||
}"
|
||||
>
|
||||
调试
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
hasPermission="device/Instance:update"
|
||||
:loading="loading"
|
||||
:disabled="!isTest"
|
||||
@click="save()"
|
||||
:style="{ marginLeft: '10px' }"
|
||||
:tooltip="{
|
||||
title: isTest ? '' : '请先调试',
|
||||
}"
|
||||
>
|
||||
保存
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name="DataAnalysis">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||
// import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { useProductStore } from '@/store/product';
|
||||
import {
|
||||
productCode,
|
||||
getProtocal,
|
||||
testCode,
|
||||
saveProductCode,
|
||||
} from '@/api/device/instance'
|
||||
} from '@/api/device/instance';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
const defaultValue =
|
||||
'//解码函数\r\nfunction decode(context) {\r\n //原始报文\r\n var buffer = context.payload();\r\n // 转为json\r\n // var json = context.json();\r\n //mqtt 时通过此方法获取topic\r\n // var topic = context.topic();\r\n\r\n // 提取变量\r\n // var topicVars = context.pathVars("/{deviceId}/**",topic)\r\n //温度属性\r\n var temperature = buffer.getShort(3) * 10;\r\n //湿度属性\r\n var humidity = buffer.getShort(6) * 10;\r\n return {\r\n "temperature": temperature,\r\n "humidity": humidity\r\n };\r\n}\r\n';
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const { toggle } = useFullscreen(el)
|
||||
const productStore = useProductStore()
|
||||
const el = ref<HTMLElement | null>(null);
|
||||
const { toggle } = useFullscreen(el);
|
||||
const productStore = useProductStore();
|
||||
|
||||
const url = ref<string>('');
|
||||
const topic = ref<string>('');
|
||||
const topicList = ref([]);
|
||||
const simulation = ref<string>('');
|
||||
const resultValue = ref<any>({});
|
||||
const loading = ref<boolean>(false);
|
||||
const isTest = ref<boolean>(false);
|
||||
const editorValue = ref<string>('');
|
||||
|
||||
const url = ref<string>('')
|
||||
const topic = ref<string>('')
|
||||
const topicList = ref([])
|
||||
const simulation = ref<string>('')
|
||||
const resultValue = ref<any>({})
|
||||
const loading = ref<boolean>(false)
|
||||
const isTest = ref<boolean>(false)
|
||||
const editorValue = ref<string>('')
|
||||
const resStyle = computed(() =>
|
||||
isBoolean(resultValue.value.success)
|
||||
? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red',
|
||||
}
|
||||
: {
|
||||
'margin-top': '10px',
|
||||
},
|
||||
);
|
||||
|
||||
const resStyle = computed(() => (isBoolean(resultValue.value.success) ? {
|
||||
'margin-top': '10px',
|
||||
'border-color': resultValue.value.success ? 'green' : 'red'
|
||||
} : {
|
||||
'margin-top': '10px',
|
||||
}))
|
||||
|
||||
const isDisabled = computed(() => simulation.value === '')
|
||||
|
||||
const result = computed(() => resultValue.value.success ? JSON.stringify(resultValue.value.outputs?.[0]) : resultValue.value.reason)
|
||||
const isDisabled = computed(() => simulation.value === '');
|
||||
|
||||
const result = computed(() =>
|
||||
resultValue.value.success
|
||||
? JSON.stringify(resultValue.value.outputs?.[0])
|
||||
: resultValue.value.reason,
|
||||
);
|
||||
|
||||
//获取topic
|
||||
const getTopic = async () => {
|
||||
const res: any = await getProtocal(productStore.current.messageProtocol, productStore.current.transportProtocol)
|
||||
const res: any = await getProtocal(
|
||||
productStore.current.messageProtocol,
|
||||
productStore.current.transportProtocol,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
const item = res.result.routes?.map((items: any) => ({
|
||||
value: items.topic,
|
||||
}));
|
||||
topicList.value = item
|
||||
topicList.value = item;
|
||||
}
|
||||
};
|
||||
//获取产品解析规则
|
||||
const getProductCode = async () => {
|
||||
const res: any = await productCode(productStore.current.id)
|
||||
const res: any = await productCode(productStore.current.id);
|
||||
if (res.status === 200) {
|
||||
if(res.result){
|
||||
editorValue.value = res.result?.configuration?.script
|
||||
}else{
|
||||
editorValue.value = defaultValue
|
||||
if (res.result) {
|
||||
editorValue.value = res.result?.configuration?.script;
|
||||
} else {
|
||||
editorValue.value = defaultValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//调试
|
||||
const test = async (dataTest: any) => {
|
||||
loading.value = true
|
||||
const res = await testCode(dataTest)
|
||||
loading.value = true;
|
||||
const res = await testCode(dataTest);
|
||||
if (res.status === 200) {
|
||||
loading.value = false
|
||||
resultValue.value = res?.result
|
||||
loading.value = false;
|
||||
resultValue.value = res?.result;
|
||||
} else {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -144,15 +199,14 @@ const save = async () => {
|
|||
script: editorValue.value,
|
||||
lang: 'javascript',
|
||||
},
|
||||
}
|
||||
const res = await saveProductCode(productStore.current.id, item)
|
||||
};
|
||||
const res = await saveProductCode(productStore.current.id, item);
|
||||
if (res.status === 200) {
|
||||
message.success('保存成功');
|
||||
getProductCode();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const debug = () => {
|
||||
if (productStore.current.transportProtocol === 'MQTT') {
|
||||
if (topic.value !== '') {
|
||||
|
|
@ -166,8 +220,8 @@ const debug = () => {
|
|||
},
|
||||
provider: 'jsr223',
|
||||
payload: simulation.value,
|
||||
})
|
||||
isTest.value = true
|
||||
});
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入topic');
|
||||
}
|
||||
|
|
@ -184,19 +238,17 @@ const debug = () => {
|
|||
},
|
||||
payload: simulation.value,
|
||||
});
|
||||
isTest.value = true
|
||||
isTest.value = true;
|
||||
} else {
|
||||
message.error('请输入url');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getProductCode()
|
||||
getTopic()
|
||||
})
|
||||
|
||||
getProductCode();
|
||||
getTopic();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,26 @@
|
|||
<!-- 设备接入 -->
|
||||
<template>
|
||||
<j-card style="min-height: 100%">
|
||||
<div v-if="productStore.current.accessId === undefined || null">
|
||||
<j-empty :image="simpleImage">
|
||||
<template #description>
|
||||
<span
|
||||
v-if="
|
||||
permissionStore.hasPermission(
|
||||
'device/Product:update',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:add',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:update',
|
||||
)
|
||||
"
|
||||
>
|
||||
请先<j-button type="link" @click="showModal"
|
||||
>选择</j-button
|
||||
>设备接入网关，用以提供设备接入能力
|
||||
</span>
|
||||
<span v-else>请联系管理员配置产品接入方式</span>
|
||||
</template>
|
||||
</j-empty>
|
||||
</div>
|
||||
<div v-else>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<Title data="接入方式">
|
||||
<template #extra>
|
||||
<!-- <j-tooltip
|
||||
<div v-if="productStore.current.accessId === undefined || null">
|
||||
<j-empty :image="simpleImage">
|
||||
<template #description>
|
||||
<span
|
||||
v-if="
|
||||
permissionStore.hasPermission('device/Product:update')
|
||||
"
|
||||
>
|
||||
请先<j-button type="link" @click="showModal">选择</j-button
|
||||
>设备接入网关，用以提供设备接入能力
|
||||
</span>
|
||||
<span v-else>请联系管理员配置产品接入方式</span>
|
||||
</template>
|
||||
</j-empty>
|
||||
</div>
|
||||
<div v-else>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<Title data="接入方式">
|
||||
<template #extra>
|
||||
<!-- <j-tooltip
|
||||
:title="
|
||||
productStore.current?.count &&
|
||||
productStore.current?.count > 0
|
||||
|
|
@ -51,269 +41,229 @@
|
|||
>更换</j-button
|
||||
>
|
||||
</j-tooltip> -->
|
||||
<PermissionButton
|
||||
style="margin: 0 0 0 20px"
|
||||
type="primary"
|
||||
size="small"
|
||||
:tooltip="{
|
||||
title:
|
||||
productStore.current?.count &&
|
||||
productStore.current?.count > 0
|
||||
? '产品下有设备实例时不能更换接入方式'
|
||||
: !(permissionStore.hasPermission(
|
||||
'device/Product:update',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:add',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:update',
|
||||
))
|
||||
? '暂无权限，请联系管理员'
|
||||
: '',
|
||||
}"
|
||||
:disabled="
|
||||
(productStore.current?.count &&
|
||||
productStore.current?.count > 0) ||
|
||||
!(
|
||||
permissionStore.hasPermission(
|
||||
'device/Product:update',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:add',
|
||||
) &&
|
||||
permissionStore.hasPermission(
|
||||
'link/AccessConfig:update',
|
||||
)
|
||||
)
|
||||
"
|
||||
ghost
|
||||
@click="showDevice"
|
||||
>
|
||||
更换
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</Title>
|
||||
<PermissionButton
|
||||
style="margin: 0 0 0 20px"
|
||||
type="primary"
|
||||
size="small"
|
||||
:tooltip="{
|
||||
title:
|
||||
productStore.current?.count &&
|
||||
productStore.current?.count > 0
|
||||
? '产品下有设备实例时不能更换接入方式'
|
||||
: '',
|
||||
}"
|
||||
:disabled="
|
||||
productStore.current?.count &&
|
||||
productStore.current?.count > 0
|
||||
"
|
||||
ghost
|
||||
@click="showDevice"
|
||||
hasPermission="device/Product:update"
|
||||
>
|
||||
更换
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</Title>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
{{ access?.name }}
|
||||
{{ access?.name }}
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
access?.description ||
|
||||
dataSource.find(
|
||||
(item) => item?.id === access?.provider,
|
||||
)?.description
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
<Title data="消息协议"></Title>
|
||||
<div>
|
||||
{{ access?.protocolDetail?.name }}
|
||||
</div>
|
||||
<!-- 显示md文件内容 -->
|
||||
<div v-if="config?.document" v-html="markdownToHtml"></div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
<Title data="连接信息"></Title>
|
||||
<div v-if="access?.channelInfo?.addresses.length > 0">
|
||||
<div
|
||||
v-for="item in access?.channelInfo?.addresses"
|
||||
:key="item.address"
|
||||
>
|
||||
<j-badge
|
||||
:color="item.health === -1 ? 'red' : 'green'"
|
||||
:text="item.address"
|
||||
>
|
||||
</j-badge>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div v-else>{{ '暂无连接信息' }}</div>
|
||||
</div>
|
||||
<Title
|
||||
v-if="metadata?.name"
|
||||
:data="metadata?.name"
|
||||
class="config"
|
||||
>
|
||||
<template #extra>
|
||||
<j-tooltip title="此配置来自于产品接入方式所选择的协议">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<j-form ref="formRef" :model="formData.data" layout="vertical">
|
||||
<j-form-item
|
||||
:name="item.property"
|
||||
v-for="item in metadata.properties"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:rules="[
|
||||
{
|
||||
required: !!item?.type?.expands?.required,
|
||||
message: `${
|
||||
item.type.type === 'enum'
|
||||
? '请选择'
|
||||
: '请输入'
|
||||
}${item.name}`,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'string'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input>
|
||||
<j-input-password
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'password'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input-password>
|
||||
<j-select
|
||||
placeholder="请选择"
|
||||
v-if="item.type.type === 'enum'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="el in item?.type?.type === 'enum' &&
|
||||
item?.type?.elements
|
||||
? item?.type?.elements
|
||||
: []"
|
||||
:key="el"
|
||||
:value="el.value"
|
||||
>
|
||||
{{ el.text }}
|
||||
</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<Title data="存储策略">
|
||||
<template #extra>
|
||||
<j-tooltip
|
||||
title="若修改存储策略,需要手动做数据迁移,平台只能搜索最新存储策略中的数据"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<j-form layout="vertical">
|
||||
<j-form-item>
|
||||
<j-select ref="select" v-model:value="form.storePolicy">
|
||||
<j-select-option
|
||||
v-for="(item, index) in storageList"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="submitDevice"
|
||||
hasPermission="device/Instance:update"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="config?.routes && config?.routes?.length > 0"
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
<div style="font-weight: 600; margin: 0 0 10 px 0">
|
||||
{{
|
||||
access?.description ||
|
||||
dataSource.find(
|
||||
(item) => item?.id === access?.provider,
|
||||
)?.description
|
||||
access?.provider === 'mqtt-server-gateway' ||
|
||||
access?.provider === 'mqtt-client-gateway'
|
||||
? 'topic'
|
||||
: 'URL信息'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
<Title data="消息协议"></Title>
|
||||
<div>
|
||||
{{ access?.protocolDetail?.name }}
|
||||
</div>
|
||||
<!-- 显示md文件内容 -->
|
||||
<div
|
||||
v-if="config?.document"
|
||||
v-html="markdownToHtml"
|
||||
></div>
|
||||
</div>
|
||||
<div class="item-style">
|
||||
<Title data="连接信息"></Title>
|
||||
<div v-if="access?.channelInfo?.addresses.length > 0">
|
||||
<div
|
||||
v-for="item in access?.channelInfo?.addresses"
|
||||
:key="item.address"
|
||||
>
|
||||
<j-badge
|
||||
:color="
|
||||
item.health === -1 ? 'red' : 'green'
|
||||
"
|
||||
:text="item.address"
|
||||
>
|
||||
</j-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ '暂无连接信息' }}</div>
|
||||
</div>
|
||||
<Title
|
||||
v-if="metadata?.name"
|
||||
:data="metadata?.name"
|
||||
class="config"
|
||||
>
|
||||
<template #extra>
|
||||
<j-tooltip
|
||||
title="此配置来自于产品接入方式所选择的协议"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<j-form
|
||||
ref="formRef"
|
||||
:model="formData.data"
|
||||
layout="vertical"
|
||||
>
|
||||
<j-form-item
|
||||
:name="item.property"
|
||||
v-for="item in metadata.properties"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:rules="[
|
||||
{
|
||||
required: !!item?.type?.expands?.required,
|
||||
message: `${
|
||||
item.type.type === 'enum'
|
||||
? '请选择'
|
||||
: '请输入'
|
||||
}${item.name}`,
|
||||
},
|
||||
]"
|
||||
<j-table
|
||||
:columns="
|
||||
config.id === 'MQTT' ? columnsMQTT : columnsHTTP
|
||||
"
|
||||
:data-source="config?.routes"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 500 }"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'string'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input>
|
||||
<j-input-password
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'password'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input-password>
|
||||
<j-select
|
||||
placeholder="请选择"
|
||||
v-if="item.type.type === 'enum'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="el in item?.type?.type === 'enum' &&
|
||||
item?.type?.elements
|
||||
? item?.type?.elements
|
||||
: []"
|
||||
:key="el"
|
||||
:value="el.value"
|
||||
>
|
||||
{{ el.text }}
|
||||
</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<Title data="存储策略">
|
||||
<template #extra>
|
||||
<j-tooltip
|
||||
title="若修改存储策略,需要手动做数据迁移,平台只能搜索最新存储策略中的数据"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<j-form layout="vertical">
|
||||
<j-form-item>
|
||||
<j-select
|
||||
ref="select"
|
||||
v-model:value="form.storePolicy"
|
||||
>
|
||||
<j-select-option
|
||||
v-for="(item, index) in storageList"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="submitDevice"
|
||||
hasPermission="device/Instance:update"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="config?.routes && config?.routes?.length > 0"
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
<div style="font-weight: 600; margin: 0 0 10 px 0">
|
||||
{{
|
||||
access?.provider ===
|
||||
'mqtt-server-gateway' ||
|
||||
access?.provider === 'mqtt-client-gateway'
|
||||
? 'topic'
|
||||
: 'URL信息'
|
||||
}}
|
||||
</div>
|
||||
<j-table
|
||||
:columns="
|
||||
config.id === 'MQTT'
|
||||
? columnsMQTT
|
||||
: columnsHTTP
|
||||
"
|
||||
:data-source="config?.routes"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 500 }"
|
||||
>
|
||||
<template #bodyCell="{ text, column, record }">
|
||||
<template v-if="column.key === 'topic'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'stream'">
|
||||
<div>{{ getStream(record) }}</div>
|
||||
</template>
|
||||
<template
|
||||
v-if="column.key === 'description'"
|
||||
<template #bodyCell="{ text, column, record }">
|
||||
<template v-if="column.key === 'topic'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'address'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'example'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</j-table>
|
||||
</div>
|
||||
<template v-if="column.key === 'stream'">
|
||||
<div>{{ getStream(record) }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'description'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'address'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'example'">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</j-table>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</j-card>
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
<!-- 选择设备 -->
|
||||
<j-modal
|
||||
title="设备接入配置"
|
||||
|
|
@ -349,8 +299,11 @@
|
|||
:gridColumns="[2]"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-button type="primary" @click="add"
|
||||
><plus-outlined />新增</j-button
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="link/AccessConfig:add"
|
||||
>新增</PermissionButton
|
||||
>
|
||||
</template>
|
||||
<template #deviceType="slotProps">
|
||||
|
|
@ -1010,7 +963,6 @@ const submitDevice = async () => {
|
|||
const result: any = {};
|
||||
flatObj(values, result);
|
||||
const { storePolicy, ...extra } = result;
|
||||
console.log({ ...extra });
|
||||
const id = productStore.current?.id;
|
||||
const resp = await modify(id || '', {
|
||||
id: id,
|
||||
|
|
@ -1046,7 +998,6 @@ const add = () => {
|
|||
if (url) {
|
||||
const tab: any = window.open(`${origin}/#${url}?view=false`);
|
||||
tab.onTabSaveSuccess = (value: any) => {
|
||||
console.log(value);
|
||||
if (value.status === 200) {
|
||||
tableRef.value.reload();
|
||||
handleClick(value.result);
|
||||
|
|
|
|||
|
|
@ -90,11 +90,19 @@
|
|||
>应用配置</PermissionButton
|
||||
>
|
||||
</template>
|
||||
<component
|
||||
:is="tabs[productStore.tabActiveKey]"
|
||||
:class="productStore.tabActiveKey === 'Metadata' ? 'metedata' : ''"
|
||||
v-bind="{ type: 'product' }"
|
||||
/>
|
||||
<FullPage>
|
||||
<j-card :bordered="false">
|
||||
<component
|
||||
:is="tabs[productStore.tabActiveKey]"
|
||||
:class="
|
||||
productStore.tabActiveKey === 'Metadata'
|
||||
? 'metedata'
|
||||
: ''
|
||||
"
|
||||
v-bind="{ type: 'product' }"
|
||||
/>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,152 +5,167 @@
|
|||
target="product-manage"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryProductList"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="device/Product:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton hasPermission="device/Product:import"
|
||||
>导入</PermissionButton
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryProductList"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="device/Product:add"
|
||||
>
|
||||
</j-upload>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #deviceType="slotProps">
|
||||
<div>{{ slotProps.deviceType.text }}</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state"
|
||||
@click="handleView(slotProps.id)"
|
||||
:statusText="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'processing',
|
||||
0: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
slotProps.photoUrl ||
|
||||
getImage('/device-product.png')
|
||||
"
|
||||
class="productImg"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)"
|
||||
><span
|
||||
style="font-weight: 600; font-size: 16px"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="device/Product:import"
|
||||
>导入</PermissionButton
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span></Ellipsis
|
||||
>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps?.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
接入方式
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{
|
||||
slotProps?.accessName
|
||||
? slotProps?.accessName
|
||||
: '未接入'
|
||||
}}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="item.key ==='view' ? true : 'device/Product:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:status="slotProps.state"
|
||||
:statusNames="{
|
||||
1: 'processing',
|
||||
0: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
</j-upload>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #deviceType="slotProps">
|
||||
<div>{{ slotProps.deviceType.text }}</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state"
|
||||
@click="handleView(slotProps.id)"
|
||||
:statusText="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'processing',
|
||||
0: 'error',
|
||||
}"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:hasPermission="i.key === 'view' ? true : 'device/Product:' + i.key"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
slotProps.photoUrl ||
|
||||
getImage('/device-product.png')
|
||||
"
|
||||
class="productImg"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)"
|
||||
><span
|
||||
style="font-weight: 600; font-size: 16px"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span></Ellipsis
|
||||
>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps?.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
接入方式
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{
|
||||
slotProps?.accessName
|
||||
? slotProps?.accessName
|
||||
: '未接入'
|
||||
}}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
item.key === 'view'
|
||||
? true
|
||||
: 'device/Product:' + item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:status="slotProps.state"
|
||||
:statusNames="{
|
||||
1: 'processing',
|
||||
0: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'device/Product:' + i.key
|
||||
"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
|
||||
</page-container>
|
||||
|
|
@ -181,8 +196,8 @@ import { typeOptions } from '@/components/Search/util';
|
|||
import Save from './Save/index.vue';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
import { useRoute } from 'vue-router';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { accessConfigTypeFilter } from '@/utils/setting'
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
import { accessConfigTypeFilter } from '@/utils/setting';
|
||||
/**
|
||||
* 表格数据
|
||||
*/
|
||||
|
|
@ -196,21 +211,21 @@ const columns = [
|
|||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
scopedSlots: true,
|
||||
width:200,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width:220,
|
||||
width: 220,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '接入方式',
|
||||
dataIndex: 'accessName',
|
||||
key: 'accessName',
|
||||
width:220,
|
||||
width: 220,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -219,7 +234,7 @@ const columns = [
|
|||
key: 'deviceType',
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
width:120,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -227,7 +242,7 @@ const columns = [
|
|||
key: 'state',
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
width:90,
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
|
|
@ -434,7 +449,7 @@ const query = reactive({
|
|||
key: 'id',
|
||||
search: {
|
||||
type: 'string',
|
||||
defaultTermType: 'eq'
|
||||
defaultTermType: 'eq',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -446,8 +461,8 @@ const query = reactive({
|
|||
options: () => {
|
||||
return new Promise((resolve) => {
|
||||
getProviders().then((resp: any) => {
|
||||
const data = resp.result || []
|
||||
resolve(accessConfigTypeFilter(data))
|
||||
const data = resp.result || [];
|
||||
resolve(accessConfigTypeFilter(data));
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -592,9 +607,9 @@ const saveRef = ref();
|
|||
const handleSearch = (e: any) => {
|
||||
params.value = e;
|
||||
};
|
||||
const routerParams = useRouterParams()
|
||||
const routerParams = useRouterParams();
|
||||
onMounted(() => {
|
||||
if(routerParams.params?.value.save){
|
||||
if (routerParams.params?.value.save) {
|
||||
add();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<j-card>
|
||||
<div class='device-detail-metadata' style="position: relative;">
|
||||
<div class="tips">
|
||||
<j-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
|
||||
|
|
@ -44,7 +43,6 @@
|
|||
<Import v-if="visible" v-model:visible="visible" :type="type" @close="visible = false" />
|
||||
<Cat v-model:visible="cat" @close="cat = false" :type="type" />
|
||||
</div>
|
||||
</j-card>
|
||||
</template>
|
||||
<script setup lang="ts" name="Metadata">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||
|
|
|
|||
|
|
@ -5,147 +5,166 @@
|
|||
target="edge-device"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="edgeDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="edge/Device:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
@click="importVisible = true"
|
||||
hasPermission="edge/Device:import"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="ImportOutlined"
|
||||
/></template>
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="font-size: 16px; font-weight: 600"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.productName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="edgeDeviceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'edge/Device:' + item.key"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="edge/Device:add"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
@click="importVisible = true"
|
||||
hasPermission="edge/Device:import"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="ImportOutlined"
|
||||
/></template>
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #registryTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.registryTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="i.key === 'view' ? true : 'edge/Device:' + i.key"
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="font-size: 16px; font-weight: 600"
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.productName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'edge/Device:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #registryTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.registryTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'edge/Device:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="current"
|
||||
@close="visible = false"
|
||||
@save="saveBtn"
|
||||
/>
|
||||
<Import @save="onRefresh" @close="importVisible = false" v-if="importVisible" type="official-edge-gateway" />
|
||||
<Import
|
||||
@save="onRefresh"
|
||||
@close="importVisible = false"
|
||||
v-if="importVisible"
|
||||
type="official-edge-gateway"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -192,18 +211,18 @@ const visible = ref<boolean>(false);
|
|||
const current = ref<Record<string, any>>({});
|
||||
|
||||
const transformData = (arr: any[]): any[] => {
|
||||
if(Array.isArray(arr) && arr.length){
|
||||
if (Array.isArray(arr) && arr.length) {
|
||||
return (arr || []).map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
id: `classifiedId is ${item.id}`,
|
||||
children: transformData(item.children)
|
||||
}
|
||||
})
|
||||
children: transformData(item.children),
|
||||
};
|
||||
});
|
||||
} else {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -471,9 +490,9 @@ const saveBtn = () => {
|
|||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
importVisible.value = false
|
||||
importVisible.value = false;
|
||||
edgeDeviceRef.value?.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -5,131 +5,141 @@
|
|||
target="edge-resource"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="edgeResourceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="getImage('/device/instance/device-card.png')"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通讯协议
|
||||
</div>
|
||||
<Ellipsis>{{
|
||||
options.find(
|
||||
(i) => i.value === slotProps.category,
|
||||
)?.label || slotProps.category
|
||||
}}</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
所属边缘网关
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.sourceName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'edge/Resource:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #sourceId="slotProps">
|
||||
{{ slotProps.sourceName }}
|
||||
</template>
|
||||
<template #category="slotProps">
|
||||
{{
|
||||
options.find((i) => i.value === slotProps.category)
|
||||
?.label || slotProps.category
|
||||
}}
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="edgeResourceRef"
|
||||
:columns="columns"
|
||||
:request="query"
|
||||
:defaultParams="defaultParams"
|
||||
:params="params"
|
||||
>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
@click="handleView(slotProps)"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'edge/Resource:' + i.key
|
||||
"
|
||||
<template #img>
|
||||
<img
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row style="margin-top: 20px">
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通讯协议
|
||||
</div>
|
||||
<Ellipsis>{{
|
||||
options.find(
|
||||
(i) =>
|
||||
i.value === slotProps.category,
|
||||
)?.label || slotProps.category
|
||||
}}</Ellipsis>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
所属边缘网关
|
||||
</div>
|
||||
<Ellipsis style="width: 100%">
|
||||
{{ slotProps.sourceName }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'edge/Resource:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #sourceId="slotProps">
|
||||
{{ slotProps.sourceName }}
|
||||
</template>
|
||||
<template #category="slotProps">
|
||||
{{
|
||||
options.find((i) => i.value === slotProps.category)
|
||||
?.label || slotProps.category
|
||||
}}
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
<span>{{
|
||||
dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}</span>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0 5px"
|
||||
:danger="i.key === 'delete'"
|
||||
:hasPermission="
|
||||
i.key === 'view'
|
||||
? true
|
||||
: 'edge/Resource:' + i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<Save
|
||||
v-if="visible"
|
||||
:data="current"
|
||||
|
|
|
|||
|
|
@ -264,6 +264,7 @@ const saveCurrentData = () => {
|
|||
port: modalForm.port,
|
||||
publicHost: modalForm.publicHost,
|
||||
publicPort: modalForm.publicPort,
|
||||
maxMessageSize:8192,
|
||||
},
|
||||
});
|
||||
// 保存协议
|
||||
|
|
|
|||
|
|
@ -652,7 +652,13 @@ const saveData = () => {
|
|||
|
||||
if (resp?.status === 200) {
|
||||
onlyMessage('操作成功', 'success');
|
||||
history.back();
|
||||
if (route.query.save) {
|
||||
// @ts-ignore
|
||||
window?.onSaveSuccess(resp.result);
|
||||
window.close();
|
||||
} else {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,149 +2,153 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<pro-search :columns="columns" target="media" @search="handleSearch" />
|
||||
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
model="table"
|
||||
:columns="columns"
|
||||
:request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'name', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="_selectedRowKeys = []"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<h3>通道列表</h3>
|
||||
</template>
|
||||
<template #rightExtraRender>
|
||||
<j-space>
|
||||
<j-button type="primary" @click="bindVis = true">
|
||||
绑定通道
|
||||
</j-button>
|
||||
<j-popconfirm
|
||||
title="确认解绑?"
|
||||
@confirm="handleMultipleUnbind"
|
||||
>
|
||||
<j-button> 批量解绑 </j-button>
|
||||
</j-popconfirm>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #gbChannelIdHeader="title">
|
||||
<j-tooltip
|
||||
title="国标级联有16位、20位两种格式。在当前页面修改不会修改视频设备-通道页面中的国标ID"
|
||||
>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
model="table"
|
||||
:columns="columns"
|
||||
:request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'name', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: _selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
@cancelSelect="_selectedRowKeys = []"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<h3>通道列表</h3>
|
||||
</template>
|
||||
<template #rightExtraRender>
|
||||
<j-space>
|
||||
<span>{{ title }}</span>
|
||||
<AIcon type="InfoCircleOutlined" />
|
||||
</j-space>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template #channelId="slotProps">
|
||||
<j-space>
|
||||
<Ellipsis style="width: 150px">
|
||||
{{ slotProps.gbChannelId }}
|
||||
</Ellipsis>
|
||||
<j-popover
|
||||
v-model:visible="slotProps.popVis"
|
||||
trigger="click"
|
||||
>
|
||||
<template #title>
|
||||
<div class="header">
|
||||
<span>编辑国标ID</span>
|
||||
<AIcon
|
||||
type="CloseOutlined"
|
||||
@click="handleClose(slotProps)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="simple-form">
|
||||
<j-input
|
||||
v-model:value="gbID"
|
||||
@change="validField(slotProps)"
|
||||
placeholder="请输入国标ID"
|
||||
/>
|
||||
<div
|
||||
class="error"
|
||||
v-if="valid && !valid?.passed"
|
||||
>
|
||||
<!-- {{ valid?.reason }} -->
|
||||
该国标ID在同一设备下已存在
|
||||
</div>
|
||||
</div>
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="handleSave(slotProps)"
|
||||
:loading="loading"
|
||||
style="width: 100%"
|
||||
>
|
||||
保存
|
||||
</j-button>
|
||||
</template>
|
||||
<j-button type="link" @click="slotProps.popVis = true">
|
||||
<AIcon type="EditOutlined" />
|
||||
<j-button type="primary" @click="bindVis = true">
|
||||
绑定通道
|
||||
</j-button>
|
||||
</j-popover>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<j-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
title="确认解绑?"
|
||||
@confirm="handleMultipleUnbind"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
<j-button> 批量解绑 </j-button>
|
||||
</j-popconfirm>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
</j-space>
|
||||
</template>
|
||||
<template #gbChannelIdHeader="title">
|
||||
<j-tooltip
|
||||
title="国标级联有16位、20位两种格式。在当前页面修改不会修改视频设备-通道页面中的国标ID"
|
||||
>
|
||||
<j-space>
|
||||
<span>{{ title }}</span>
|
||||
<AIcon type="InfoCircleOutlined" />
|
||||
</j-space>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template #channelId="slotProps">
|
||||
<j-space>
|
||||
<Ellipsis style="width: 150px">
|
||||
{{ slotProps.gbChannelId }}
|
||||
</Ellipsis>
|
||||
<j-popover
|
||||
v-model:visible="slotProps.popVis"
|
||||
trigger="click"
|
||||
>
|
||||
<template #title>
|
||||
<div class="header">
|
||||
<span>编辑国标ID</span>
|
||||
<AIcon
|
||||
type="CloseOutlined"
|
||||
@click="handleClose(slotProps)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="simple-form">
|
||||
<j-input
|
||||
v-model:value="gbID"
|
||||
@change="validField(slotProps)"
|
||||
placeholder="请输入国标ID"
|
||||
/>
|
||||
<div
|
||||
class="error"
|
||||
v-if="valid && !valid?.passed"
|
||||
>
|
||||
<!-- {{ valid?.reason }} -->
|
||||
该国标ID在同一设备下已存在
|
||||
</div>
|
||||
</div>
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="handleSave(slotProps)"
|
||||
:loading="loading"
|
||||
style="width: 100%"
|
||||
>
|
||||
保存
|
||||
</j-button>
|
||||
</template>
|
||||
<j-button
|
||||
type="link"
|
||||
@click="slotProps.popVis = true"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</j-button>
|
||||
</j-popover>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<j-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-popconfirm>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></j-button>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<BindChannel v-model:visible="bindVis" @submit="listRef.reload()" />
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -5,139 +5,146 @@
|
|||
target="media-cascade"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="(e:any) => lastValueFrom(e)"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="2"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Cascade:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" />新增</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:showStatus="true"
|
||||
:status="slotProps.status?.value"
|
||||
:statusText="slotProps.status?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getImage('/device/instance/device-card.png')
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<p>通道数量：{{ slotProps.count || 0 }}</p>
|
||||
<Ellipsis>
|
||||
<j-badge
|
||||
:text="`sip:${slotProps.sipConfigs[0]?.sipId}@${slotProps.sipConfigs[0]?.hostAndPort}`"
|
||||
:status="
|
||||
slotProps.status?.value === 'enabled'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'media/Cascade:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #sipId="slotProps">
|
||||
{{ slotProps.sipConfigs[0]?.sipId }}
|
||||
</template>
|
||||
<template #publicHost="slotProps">
|
||||
{{ slotProps.sipConfigs[0]?.publicHost }}
|
||||
</template>
|
||||
<template #count="slotProps">
|
||||
{{ slotProps.count || 0 }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.status?.text"
|
||||
:status="
|
||||
slotProps.status?.value === 'enabled'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #onlineStatus="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.onlineStatus?.text"
|
||||
:status="
|
||||
slotProps.onlineStatus?.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="(e:any) => lastValueFrom(e)"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="2"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Cascade:add"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'media/Cascade:' + i.key"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined" />新增</template
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:showStatus="true"
|
||||
:status="slotProps.status?.value"
|
||||
:statusText="slotProps.status?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getImage(
|
||||
'/device/instance/device-card.png',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<p>通道数量：{{ slotProps.count || 0 }}</p>
|
||||
<Ellipsis>
|
||||
<j-badge
|
||||
:text="`sip:${slotProps.sipConfigs[0]?.sipId}@${slotProps.sipConfigs[0]?.hostAndPort}`"
|
||||
:status="
|
||||
slotProps.status?.value === 'enabled'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'media/Cascade:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #sipId="slotProps">
|
||||
{{ slotProps.sipConfigs[0]?.sipId }}
|
||||
</template>
|
||||
<template #publicHost="slotProps">
|
||||
{{ slotProps.sipConfigs[0]?.publicHost }}
|
||||
</template>
|
||||
<template #count="slotProps">
|
||||
{{ slotProps.count || 0 }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.status?.text"
|
||||
:status="
|
||||
slotProps.status?.value === 'enabled'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #onlineStatus="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.onlineStatus?.text"
|
||||
:status="
|
||||
slotProps.onlineStatus?.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'media/Cascade:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<Publish v-model:visible="publishVis" :data="currentData" />
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -24,101 +24,109 @@
|
|||
target="channel"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
model="table"
|
||||
:columns="columns"
|
||||
:request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'notifyTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-tooltip
|
||||
v-if="route?.query.type === 'gb28181-2016'"
|
||||
title="接入方式为GB/T28281时，不支持新增"
|
||||
>
|
||||
<j-button type="primary" disabled> 新增 </j-button>
|
||||
</j-tooltip>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Device:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined" />新增</template
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
model="table"
|
||||
:columns="columns"
|
||||
:request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'notifyTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-tooltip
|
||||
v-if="route?.query.type === 'gb28181-2016'"
|
||||
title="接入方式为GB/T28281时，不支持新增"
|
||||
>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<j-button type="primary" disabled>
|
||||
新增
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
<PermissionButton
|
||||
v-else
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Device:add"
|
||||
>
|
||||
<PermissionButton
|
||||
v-if="
|
||||
i.key !== 'play' && i.key !== 'backPlay'
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'media/Device:' + i.key"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined" />新增</template
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
<!-- 回放/播放不要权限控制 -->
|
||||
<template v-else>
|
||||
<j-tooltip :key="i.key" v-bind="i.tooltip">
|
||||
<j-button
|
||||
style="padding: 0px"
|
||||
type="link"
|
||||
@click="
|
||||
i.onClick &&
|
||||
i.onClick(slotProps)
|
||||
"
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<j-space>
|
||||
<j-badge
|
||||
:status="
|
||||
slotProps.status.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="slotProps.status.text"
|
||||
></j-badge>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space>
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
v-if="
|
||||
i.key !== 'play' &&
|
||||
i.key !== 'backPlay'
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'media/Device:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
<!-- 回放/播放不要权限控制 -->
|
||||
<template v-else>
|
||||
<j-tooltip
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
style="padding: 0px"
|
||||
type="link"
|
||||
@click="
|
||||
i.onClick &&
|
||||
i.onClick(slotProps)
|
||||
"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
<j-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</j-button>
|
||||
</j-button>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,186 +1,191 @@
|
|||
<!-- 回放 -->
|
||||
<template>
|
||||
<page-container>
|
||||
<div class="playback-warp">
|
||||
<!-- 播放器/进度条 -->
|
||||
<div class="playback-left">
|
||||
<LivePlayer
|
||||
ref="player"
|
||||
autoplay
|
||||
:url="url"
|
||||
className="playback-media"
|
||||
:live="type === 'local'"
|
||||
:on-play="
|
||||
() => {
|
||||
isEnded = false;
|
||||
playStatus = 1;
|
||||
}
|
||||
"
|
||||
:on-pause="
|
||||
() => {
|
||||
playStatus = 2;
|
||||
}
|
||||
"
|
||||
:on-ended="
|
||||
() => {
|
||||
playStatus = 0;
|
||||
if (playTimeNode && isEnded) {
|
||||
isEnded = true;
|
||||
playTimeNode.onNextPlay();
|
||||
<FullPage>
|
||||
<div class="playback-warp">
|
||||
<!-- 播放器/进度条 -->
|
||||
<div class="playback-left">
|
||||
<LivePlayer
|
||||
ref="player"
|
||||
autoplay
|
||||
:url="url"
|
||||
className="playback-media"
|
||||
:live="type === 'local'"
|
||||
:on-play="
|
||||
() => {
|
||||
isEnded = false;
|
||||
playStatus = 1;
|
||||
}
|
||||
}
|
||||
"
|
||||
:on-error="
|
||||
() => {
|
||||
playStatus = 0;
|
||||
}
|
||||
"
|
||||
:on-time-update="
|
||||
(e: any) => {
|
||||
playTime = e;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<TimeLine
|
||||
ref="playTimeNode"
|
||||
:type="type"
|
||||
:data="historyList"
|
||||
:date-time="time"
|
||||
:on-change="handleTimeLineChange"
|
||||
:play-status="playStatus"
|
||||
:play-time="playNowTime + playTime * 1000"
|
||||
:local-to-server="cloudTime"
|
||||
/>
|
||||
</div>
|
||||
<div class="playback-right">
|
||||
<j-spin :spinning="loading">
|
||||
<j-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
<div>云端：存储在服务器中</div>
|
||||
<div>本地：存储在设备本地</div>
|
||||
</template>
|
||||
<div>类型: <AIcon type="QuestionCircleOutlined" /></div>
|
||||
</j-tooltip>
|
||||
<RadioCard
|
||||
layout="horizontal"
|
||||
:options="[
|
||||
{
|
||||
label: '云端',
|
||||
value: 'cloud',
|
||||
logo: getImage('/media/cloud.png'),
|
||||
},
|
||||
{
|
||||
label: '本地',
|
||||
value: 'local',
|
||||
logo: getImage('/local.png'),
|
||||
disabled: deviceType === 'fixed-media',
|
||||
},
|
||||
]"
|
||||
:checkStyle="true"
|
||||
v-model="type"
|
||||
"
|
||||
:on-pause="
|
||||
() => {
|
||||
playStatus = 2;
|
||||
}
|
||||
"
|
||||
:on-ended="
|
||||
() => {
|
||||
playStatus = 0;
|
||||
if (playTimeNode && isEnded) {
|
||||
isEnded = true;
|
||||
playTimeNode.onNextPlay();
|
||||
}
|
||||
}
|
||||
"
|
||||
:on-error="
|
||||
() => {
|
||||
playStatus = 0;
|
||||
}
|
||||
"
|
||||
:on-time-update="
|
||||
(e: any) => {
|
||||
playTime = e;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="playback-calendar">
|
||||
<j-calendar
|
||||
v-model:value="time"
|
||||
:fullscreen="false"
|
||||
:disabledDate="
|
||||
(currentDate: Dayjs) => currentDate > dayjs(new Date())
|
||||
"
|
||||
@change="handlePanelChange"
|
||||
<TimeLine
|
||||
ref="playTimeNode"
|
||||
:type="type"
|
||||
:data="historyList"
|
||||
:date-time="time"
|
||||
:on-change="handleTimeLineChange"
|
||||
:play-status="playStatus"
|
||||
:play-time="playNowTime + playTime * 1000"
|
||||
:local-to-server="cloudTime"
|
||||
/>
|
||||
</div>
|
||||
<div class="playback-right">
|
||||
<j-spin :spinning="loading">
|
||||
<j-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
<div>云端：存储在服务器中</div>
|
||||
<div>本地：存储在设备本地</div>
|
||||
</template>
|
||||
<div>
|
||||
类型: <AIcon type="QuestionCircleOutlined" />
|
||||
</div>
|
||||
</j-tooltip>
|
||||
<RadioCard
|
||||
layout="horizontal"
|
||||
:options="[
|
||||
{
|
||||
label: '云端',
|
||||
value: 'cloud',
|
||||
logo: getImage('/media/cloud.png'),
|
||||
},
|
||||
{
|
||||
label: '本地',
|
||||
value: 'local',
|
||||
logo: getImage('/local.png'),
|
||||
disabled: deviceType === 'fixed-media',
|
||||
},
|
||||
]"
|
||||
:checkStyle="true"
|
||||
v-model="type"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="playback-list"
|
||||
:class="{ 'no-list': !historyList.length }"
|
||||
>
|
||||
<j-empty
|
||||
v-if="!historyList.length"
|
||||
description="暂无数据"
|
||||
/>
|
||||
<j-list
|
||||
v-else
|
||||
class="playback-list-items"
|
||||
itemLayout="horizontal"
|
||||
:dataSource="historyList"
|
||||
<div class="playback-calendar">
|
||||
<j-calendar
|
||||
v-model:value="time"
|
||||
:fullscreen="false"
|
||||
:disabledDate="
|
||||
(currentDate: Dayjs) => currentDate > dayjs(new Date())
|
||||
"
|
||||
@change="handlePanelChange"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="playback-list"
|
||||
:class="{ 'no-list': !historyList.length }"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<j-list-item>
|
||||
<template #actions>
|
||||
<j-tooltip
|
||||
key="play-btn"
|
||||
:title="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? '暂停'
|
||||
: '播放'
|
||||
"
|
||||
>
|
||||
<a
|
||||
@click="
|
||||
handlePlay(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
)
|
||||
<j-empty
|
||||
v-if="!historyList.length"
|
||||
description="暂无数据"
|
||||
/>
|
||||
<j-list
|
||||
v-else
|
||||
class="playback-list-items"
|
||||
itemLayout="horizontal"
|
||||
:dataSource="historyList"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<j-list-item>
|
||||
<template #actions>
|
||||
<j-tooltip
|
||||
key="play-btn"
|
||||
:title="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? '暂停'
|
||||
: '播放'
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? 'PauseCircleOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
<a
|
||||
@click="
|
||||
handlePlay(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
)
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
(item.startTime ||
|
||||
item.mediaStartTime) ===
|
||||
playNowTime &&
|
||||
playStatus === 1
|
||||
? 'PauseCircleOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</j-tooltip>
|
||||
<j-tooltip
|
||||
key="download"
|
||||
:title="
|
||||
type !== 'local'
|
||||
? '下载录像文件'
|
||||
: item.isServer
|
||||
? '查看'
|
||||
: '下载到云端'
|
||||
"
|
||||
>
|
||||
<IconNode
|
||||
:type="type"
|
||||
:item="item"
|
||||
:on-cloud-view="cloudView"
|
||||
:on-down-load="
|
||||
() =>
|
||||
downloadClick(item)
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</j-tooltip>
|
||||
<j-tooltip
|
||||
key="download"
|
||||
:title="
|
||||
type !== 'local'
|
||||
? '下载录像文件'
|
||||
: item.isServer
|
||||
? '查看'
|
||||
: '下载到云端'
|
||||
"
|
||||
>
|
||||
<IconNode
|
||||
:type="type"
|
||||
:item="item"
|
||||
:on-cloud-view="cloudView"
|
||||
:on-down-load="
|
||||
() => downloadClick(item)
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
{{
|
||||
dayjs(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
~
|
||||
{{
|
||||
dayjs(
|
||||
item.endTime ||
|
||||
item.mediaEndTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
</div>
|
||||
</j-list-item>
|
||||
</template>
|
||||
<div></div>
|
||||
</j-list>
|
||||
</div>
|
||||
</j-spin>
|
||||
<div>
|
||||
{{
|
||||
dayjs(
|
||||
item.startTime ||
|
||||
item.mediaStartTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
~
|
||||
{{
|
||||
dayjs(
|
||||
item.endTime ||
|
||||
item.mediaEndTime,
|
||||
).format('HH:mm:ss')
|
||||
}}
|
||||
</div>
|
||||
</j-list-item>
|
||||
</template>
|
||||
<div></div>
|
||||
</j-list>
|
||||
</div>
|
||||
</j-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -216,7 +221,7 @@ const deviceType = ref('');
|
|||
|
||||
/**
|
||||
* 查询本地视频
|
||||
* @param date
|
||||
* @param date
|
||||
*/
|
||||
const queryLocalRecords = async (date: Dayjs) => {
|
||||
playStatus.value = 0;
|
||||
|
|
|
|||
|
|
@ -5,146 +5,159 @@
|
|||
target="notice-config"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="DeviceApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="4"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Device:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" />新增</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:showStatus="true"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{ online: 'processing', offline: 'error' }"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-media.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">厂商</div>
|
||||
<div>{{ slotProps.manufacturer }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通道数量
|
||||
</div>
|
||||
<div>{{ slotProps.channelNumber }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">型号</div>
|
||||
<div>{{ slotProps.model }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
接入方式
|
||||
</div>
|
||||
<div>
|
||||
{{ providerType[slotProps.provider] }}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'media/Device:' +
|
||||
(item.key !== 'updateChannel'
|
||||
? item.key
|
||||
: 'update')
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #channelNumber="slotProps">
|
||||
{{ slotProps.channelNumber || 0 }}
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
{{ providerType[slotProps.provider] }}
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
{{ getProductName(slotProps.productId) }}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state?.text"
|
||||
:status="
|
||||
slotProps.state?.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="listRef"
|
||||
:columns="columns"
|
||||
:request="DeviceApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="4"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="media/Device:add"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'media/Device:' +
|
||||
(i.key !== 'updateChannel' &&
|
||||
i.key !== 'viewDevice'
|
||||
? i.key
|
||||
: 'update')
|
||||
"
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined" />新增</template
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:showStatus="true"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-media.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
厂商
|
||||
</div>
|
||||
<div>{{ slotProps.manufacturer }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通道数量
|
||||
</div>
|
||||
<div>{{ slotProps.channelNumber }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
型号
|
||||
</div>
|
||||
<div>{{ slotProps.model }}</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
接入方式
|
||||
</div>
|
||||
<div>
|
||||
{{ providerType[slotProps.provider] }}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'media/Device:' +
|
||||
(item.key !== 'updateChannel'
|
||||
? item.key
|
||||
: 'update')
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #channelNumber="slotProps">
|
||||
{{ slotProps.channelNumber || 0 }}
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
{{ providerType[slotProps.provider] }}
|
||||
</template>
|
||||
<template #productId="slotProps">
|
||||
{{ getProductName(slotProps.productId) }}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<j-badge
|
||||
:text="slotProps.state?.text"
|
||||
:status="
|
||||
slotProps.state?.value === 'online'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'media/Device:' +
|
||||
(i.key !== 'updateChannel' &&
|
||||
i.key !== 'viewDevice'
|
||||
? i.key
|
||||
: 'update')
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<j-card class="splitScreen">
|
||||
<div class="split-screen">
|
||||
<LeftTree @onSelect="mediaStart" />
|
||||
<div class="right-content">
|
||||
<ScreenPlayer
|
||||
ref="player"
|
||||
:id="deviceId"
|
||||
:channelId="channelId"
|
||||
:onMouseUp="(id, cId) => channelApi.ptzStop(id, cId)"
|
||||
:onMouseDown="
|
||||
(id, cId, type) => channelApi.ptzTool(id, cId, type)
|
||||
"
|
||||
:historyHandle="(dId, cId) => getMediaUrl(dId, cId)"
|
||||
showScreen
|
||||
/>
|
||||
<FullPage>
|
||||
<j-card class="splitScreen">
|
||||
<div class="split-screen">
|
||||
<LeftTree @onSelect="mediaStart" />
|
||||
<div class="right-content">
|
||||
<ScreenPlayer
|
||||
ref="player"
|
||||
:id="deviceId"
|
||||
:channelId="channelId"
|
||||
:onMouseUp="
|
||||
(id, cId) => channelApi.ptzStop(id, cId)
|
||||
"
|
||||
:onMouseDown="
|
||||
(id, cId, type) =>
|
||||
channelApi.ptzTool(id, cId, type)
|
||||
"
|
||||
:historyHandle="(dId, cId) => getMediaUrl(dId, cId)"
|
||||
showScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
</j-card>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,8 +37,8 @@ const player = ref();
|
|||
|
||||
/**
|
||||
* 获取视频链接
|
||||
* @param dId
|
||||
* @param cId
|
||||
* @param dId
|
||||
* @param cId
|
||||
*/
|
||||
const getMediaUrl = (dId: string, cId: string): string => {
|
||||
return channelApi.ptzStart(dId, cId, 'mp4');
|
||||
|
|
@ -41,7 +46,7 @@ const getMediaUrl = (dId: string, cId: string): string => {
|
|||
|
||||
/**
|
||||
* 点击左侧摄像头, 播放对应视频
|
||||
* @param e
|
||||
* @param e
|
||||
*/
|
||||
const mediaStart = (e: { cId: string; dId: string }) => {
|
||||
channelId.value = e.cId;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
total: dataSource.length,
|
||||
current: current,
|
||||
pageSize: pageSize,
|
||||
pageSizeOptions: ['5', '10', '20', '50', '100'],
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
showSizeChanger: true,
|
||||
hideOnSinglePage: false,
|
||||
showTotal: (total: number, range: number) => `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`,
|
||||
|
|
@ -399,7 +399,7 @@ const getTableData = (terms?: any) => {
|
|||
* 前端分页
|
||||
*/
|
||||
const current = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const pageSize = ref(10);
|
||||
const handleTableChange = (pagination: any) => {
|
||||
current.value = pagination.current;
|
||||
pageSize.value = pagination.pageSize;
|
||||
|
|
|
|||
|
|
@ -6,185 +6,198 @@
|
|||
target="notice-config"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="configRef"
|
||||
:columns="columns"
|
||||
:request="ConfigApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="notice/Config:add"
|
||||
>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton hasPermission="notice/Config:import">
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
<j-popconfirm
|
||||
title="确认导出？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleExport"
|
||||
>
|
||||
<PermissionButton hasPermission="notice/Config:export">
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:statusNames="{}"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getLogo(slotProps.type, slotProps.provider)
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通知方式
|
||||
</div>
|
||||
<div>
|
||||
{{ getMethodTxt(slotProps.type) }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">说明</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
:hasPermission="`notice/Config:${o.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="o.icon" />
|
||||
</template>
|
||||
<span>{{ o.text }}</span>
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<j-popconfirm
|
||||
v-else-if="item.key === 'delete'"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:hasPermission="`notice/Config:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
<template v-else>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
:hasPermission="`notice/Config:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="item.icon" />
|
||||
</template>
|
||||
<span>{{ item.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span> {{ getMethodTxt(slotProps.type) }}</span>
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
<span>
|
||||
{{ getProviderTxt(slotProps.type, slotProps.provider) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #description="slotProps">
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="configRef"
|
||||
:columns="columns"
|
||||
:request="ConfigApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'notice/Config:' + i.key"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="notice/Config:add"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Config:import"
|
||||
>
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
<j-popconfirm
|
||||
title="确认导出？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleExport"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Config:export"
|
||||
>
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:statusNames="{}"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getLogo(
|
||||
slotProps.type,
|
||||
slotProps.provider,
|
||||
)
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通知方式
|
||||
</div>
|
||||
<div>
|
||||
{{ getMethodTxt(slotProps.type) }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
说明
|
||||
</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
:hasPermission="`notice/Config:${o.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="o.icon" />
|
||||
</template>
|
||||
<span>{{ o.text }}</span>
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<j-popconfirm
|
||||
v-else-if="item.key === 'delete'"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:hasPermission="`notice/Config:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
<template v-else>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
:hasPermission="`notice/Config:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="item.icon" />
|
||||
</template>
|
||||
<span>{{ item.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span> {{ getMethodTxt(slotProps.type) }}</span>
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
<span>
|
||||
{{ getProviderTxt(slotProps.type, slotProps.provider) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #description="slotProps">
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'notice/Config:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<Debug v-model:visible="debugVis" :data="currentConfig" />
|
||||
<Log v-model:visible="logVis" :data="currentConfig" />
|
||||
|
|
|
|||
|
|
@ -783,6 +783,7 @@ import { LocalStore } from '@/utils/comm';
|
|||
import { TOKEN_KEY } from '@/utils/variable';
|
||||
import { phoneRegEx } from '@/utils/validate';
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -1005,7 +1006,8 @@ const formRules = ref({
|
|||
trigger: 'change',
|
||||
validator(_rule: Rule, value: string) {
|
||||
if (!value) return Promise.resolve();
|
||||
if (!phoneRegEx(value)) return Promise.reject('该字段不是有效的手机号');
|
||||
if (!phoneRegEx(value))
|
||||
return Promise.reject('该字段不是有效的手机号');
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
|
|
@ -1028,78 +1030,19 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
formRules.value,
|
||||
);
|
||||
|
||||
// 钉钉机器人markdown标题变量提取
|
||||
// 字段提取变量
|
||||
watch(
|
||||
() => formData.value.template.markdown?.title,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
[
|
||||
() => formData.value.template.markdown?.title,
|
||||
() => formData.value.template.link?.title,
|
||||
() => formData.value.template.subject,
|
||||
() => formData.value.template.message,
|
||||
() => formData.value.template.ttsmessage,
|
||||
() => formData.value.template.body,
|
||||
],
|
||||
() => {
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// 钉钉机器人link标题变量提取
|
||||
watch(
|
||||
() => formData.value.template.link?.title,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// 邮件标题变量提取
|
||||
watch(
|
||||
() => formData.value.template.subject,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 模板内容变量提取
|
||||
watch(
|
||||
() => formData.value.template.message,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// 模板内容变量提取
|
||||
watch(
|
||||
() => formData.value.template.ttsmessage,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// webhook请求体变量提取
|
||||
watch(
|
||||
() => formData.value.template.body,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
formData.value.variableDefinitions = [];
|
||||
return;
|
||||
}
|
||||
variableReg();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -1176,7 +1119,7 @@ const handleMessageTypeChange = () => {
|
|||
content: formData.value.template.message as string,
|
||||
};
|
||||
}
|
||||
formData.value.variableDefinitions = [];
|
||||
// formData.value.variableDefinitions = [];
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1186,7 +1129,10 @@ const getDetail = async () => {
|
|||
if (route.params.id !== ':id') {
|
||||
const res = await templateApi.detail(route.params.id as string);
|
||||
// formData.value = res.result;
|
||||
Object.assign(formData.value, res.result);
|
||||
// Object.assign(formData.value, res.result);
|
||||
console.log('res.result: ', res.result);
|
||||
formData.value = cloneDeep(res.result);
|
||||
console.log('formData.value: ', formData.value);
|
||||
}
|
||||
};
|
||||
getDetail();
|
||||
|
|
|
|||
|
|
@ -6,189 +6,198 @@
|
|||
target="notice-config"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
ref="configRef"
|
||||
:columns="columns"
|
||||
:request="TemplateApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="notice/Template:add"
|
||||
>
|
||||
新增
|
||||
</PermissionButton>
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
ref="configRef"
|
||||
:columns="columns"
|
||||
:request="TemplateApi.list"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Template:import"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
hasPermission="notice/Template:add"
|
||||
>
|
||||
导入
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
<j-popconfirm
|
||||
title="确认导出？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleExport"
|
||||
<j-upload
|
||||
name="file"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Template:import"
|
||||
>
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
<j-popconfirm
|
||||
title="确认导出？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleExport"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Template:export"
|
||||
>
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:statusNames="{}"
|
||||
>
|
||||
<PermissionButton
|
||||
hasPermission="notice/Template:export"
|
||||
>
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:showStatus="false"
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:statusNames="{}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getLogo(slotProps.type, slotProps.provider)
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通知方式
|
||||
</div>
|
||||
<div>
|
||||
{{ getMethodTxt(slotProps.type) }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">说明</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getLogo(
|
||||
slotProps.type,
|
||||
slotProps.provider,
|
||||
)
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
通知方式
|
||||
</div>
|
||||
<div>
|
||||
{{ getMethodTxt(slotProps.type) }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
说明
|
||||
</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
:hasPermission="`notice/Template:${o.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="o.icon" />
|
||||
</template>
|
||||
<span>{{ o.text }}</span>
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<j-popconfirm
|
||||
v-else-if="item.key === 'delete'"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:hasPermission="`notice/Template:${item.key}`"
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
<template v-else>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
:hasPermission="`notice/Template:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
:hasPermission="`notice/Template:${o.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="o.icon" />
|
||||
</template>
|
||||
<span>{{ o.text }}</span>
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
<span>{{ item.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span> {{ getMethodTxt(slotProps.type) }}</span>
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
<span>
|
||||
{{ getProviderTxt(slotProps.type, slotProps.provider) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #description="slotProps">
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'notice/Template:' + i.key"
|
||||
</j-dropdown>
|
||||
<j-popconfirm
|
||||
v-else-if="item.key === 'delete'"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:hasPermission="`notice/Template:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</j-popconfirm>
|
||||
<template v-else>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
:hasPermission="`notice/Template:${item.key}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AIcon :type="item.icon" />
|
||||
</template>
|
||||
<span>{{ item.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span> {{ getMethodTxt(slotProps.type) }}</span>
|
||||
</template>
|
||||
<template #provider="slotProps">
|
||||
<span>
|
||||
{{ getProviderTxt(slotProps.type, slotProps.provider) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #description="slotProps">
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<PermissionButton
|
||||
:danger="i.key === 'delete'"
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'notice/Template:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
|
||||
<Debug v-model:visible="debugVis" :data="currentConfig" />
|
||||
<Log v-model:visible="logVis" :data="currentConfig" />
|
||||
|
|
|
|||
|
|
@ -1,58 +1,79 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
|
||||
<div v-if="tab=='config'">
|
||||
<page-container
|
||||
:tabList="list"
|
||||
@tabChange="onTabChange"
|
||||
:tabActiveKey="tab"
|
||||
>
|
||||
<div v-if="tab == 'config'">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<div class="alarm-level">
|
||||
<j-card
|
||||
:headStyle="{ borderBottom: 'none', padding: 0 }"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="alarmLevelTitle">告警级别配置</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, i) in levels"
|
||||
:key="i"
|
||||
class="alarmInputItem"
|
||||
<FullPage>
|
||||
<div class="alarm-level">
|
||||
<j-card
|
||||
:headStyle="{
|
||||
borderBottom: 'none',
|
||||
padding: 0,
|
||||
}"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
getImage(`/alarm/alarm${i + 1}.png`)
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span>{{ `级别${i + 1}` }}</span>
|
||||
<template #title>
|
||||
<div class="alarmLevelTitle">
|
||||
告警级别配置
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, i) in levels"
|
||||
:key="i"
|
||||
class="alarmInputItem"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
getImage(
|
||||
`/alarm/alarm${i + 1}.png`,
|
||||
)
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span>{{ `级别${i + 1}` }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<j-input
|
||||
type="text"
|
||||
v-model:value="item.title"
|
||||
:maxlength="64"
|
||||
></j-input>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<j-input
|
||||
type="text"
|
||||
v-model:value="item.title"
|
||||
:maxlength="64"
|
||||
></j-input>
|
||||
</div>
|
||||
</div>
|
||||
</j-card>
|
||||
<!-- <j-button
|
||||
</j-card>
|
||||
<!-- <j-button
|
||||
type="primary"
|
||||
size="middle"
|
||||
@click="handleSaveLevel"
|
||||
>保存</j-button
|
||||
> -->
|
||||
<PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton>
|
||||
</div>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
size="middle"
|
||||
@click="handleSaveLevel"
|
||||
hasPermission="rule-engine/Alarm/Config:update"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-col>
|
||||
<j-col :span="10">
|
||||
<div class="description">
|
||||
<h1>功能说明</h1>
|
||||
<div>
|
||||
1、告警级别用于描述告警的严重程度，请根据业务管理方式进行自定义。
|
||||
<FullPage>
|
||||
<div class="description">
|
||||
<h1>功能说明</h1>
|
||||
<div>
|
||||
1、告警级别用于描述告警的严重程度，请根据业务管理方式进行自定义。
|
||||
</div>
|
||||
<div>2、告警级别将会在告警配置中被引用。</div>
|
||||
<div>3、最多可配置5个级别。</div>
|
||||
</div>
|
||||
<div>2、告警级别将会在告警配置中被引用。</div>
|
||||
<div>3、最多可配置5个级别。</div>
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
|
|
@ -65,7 +86,7 @@ import { getImage } from '@/utils/comm';
|
|||
import { queryLevel, saveLevel } from '@/api/rule-engine/config';
|
||||
import { LevelItem } from './typing';
|
||||
import { message } from 'jetlinks-ui-components';
|
||||
import Io from './Io/index.vue'
|
||||
import Io from './Io/index.vue';
|
||||
const list = ref([
|
||||
{
|
||||
key: 'config',
|
||||
|
|
@ -77,7 +98,7 @@ const list = ref([
|
|||
},
|
||||
]);
|
||||
let levels = ref<LevelItem[]>([]);
|
||||
let tab = ref<'io'|'config'|string>('config');
|
||||
let tab = ref<'io' | 'config' | string>('config');
|
||||
const getAlarmLevel = () => {
|
||||
queryLevel().then((res: any) => {
|
||||
if (res.status == 200) {
|
||||
|
|
@ -133,9 +154,10 @@ const onTabChange = (e: string) => {
|
|||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;}
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,67 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<j-form layout="vertical" :rules="rule" :model="form" ref="formRef">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item label="名称" name="name">
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
></j-input> </j-form-item
|
||||
></j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item label="类型" name="targetType">
|
||||
<j-select
|
||||
:options="options"
|
||||
v-model:value="form.targetType"
|
||||
:disabled="selectDisable"
|
||||
></j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-form-item label="级别" name="level">
|
||||
<j-radio-group v-model:value="form.level" class="levelSelect">
|
||||
<j-radio-button
|
||||
v-for="(item, index) in levelOption"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
<FullPage>
|
||||
<div>
|
||||
<j-form layout="vertical" :rules="rule" :model="form" ref="formRef">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item label="名称" name="name">
|
||||
<j-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
></j-input> </j-form-item
|
||||
></j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item label="类型" name="targetType">
|
||||
<j-select
|
||||
:options="options"
|
||||
v-model:value="form.targetType"
|
||||
:disabled="selectDisable"
|
||||
></j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-form-item label="级别" name="level">
|
||||
<j-radio-group
|
||||
v-model:value="form.level"
|
||||
class="levelSelect"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
width: 90%;
|
||||
"
|
||||
<j-radio-button
|
||||
v-for="(item, index) in levelOption"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
<img
|
||||
:src="getImage(`/alarm/alarm${index + 1}.png`)"
|
||||
style="height: 40px"
|
||||
alt=""
|
||||
/>{{ item.label }}
|
||||
</div>
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
v-model:value="form.description"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
></j-textarea>
|
||||
</j-form-item>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave"
|
||||
:hasPermission="[
|
||||
'rule-engine/Alarm/Configuration:add',
|
||||
'rule-engine/Alarm/Configuration:update',
|
||||
]"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</j-form>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
width: 90%;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
getImage(`/alarm/alarm${index + 1}.png`)
|
||||
"
|
||||
style="height: 40px"
|
||||
alt=""
|
||||
/>{{ item.label }}
|
||||
</div>
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="description">
|
||||
<j-textarea
|
||||
v-model:value="form.description"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
></j-textarea>
|
||||
</j-form-item>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave"
|
||||
:hasPermission="[
|
||||
'rule-engine/Alarm/Configuration:add',
|
||||
'rule-engine/Alarm/Configuration:update',
|
||||
]"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</j-form>
|
||||
</div>
|
||||
</FullPage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,90 @@
|
|||
<template>
|
||||
<JProTable
|
||||
model="CARD"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms,
|
||||
}"
|
||||
ref="actionRef"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="showModal"
|
||||
hasPermission="rule-engine/Alarm/Configuration:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
>
|
||||
<template #type>
|
||||
<span
|
||||
><img
|
||||
:height="16"
|
||||
:src="typeMap.get(slotProps.triggerType)?.icon"
|
||||
style="margin-right: 5px"
|
||||
/>{{ typeMap.get(slotProps.triggerType)?.text }}</span
|
||||
>
|
||||
</template>
|
||||
<template #img>
|
||||
<img :src="typeMap.get(slotProps.triggerType)?.img" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<Ellipsis :lineClamp="2">
|
||||
<div class="subTitle">
|
||||
说明：{{
|
||||
slotProps?.description ||
|
||||
typeMap.get(slotProps.triggerType)?.tip
|
||||
}}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<FullPage>
|
||||
<JProTable
|
||||
model="CARD"
|
||||
:request="query"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms,
|
||||
}"
|
||||
ref="actionRef"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'rule-engine/Scene:' + item.key"
|
||||
type="primary"
|
||||
@click="showModal"
|
||||
hasPermission="rule-engine/Alarm/Configuration:add"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
>
|
||||
<template #type>
|
||||
<span
|
||||
><img
|
||||
:height="16"
|
||||
:src="typeMap.get(slotProps.triggerType)?.icon"
|
||||
style="margin-right: 5px"
|
||||
/>{{
|
||||
typeMap.get(slotProps.triggerType)?.text
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
<template #img>
|
||||
<img :src="typeMap.get(slotProps.triggerType)?.img" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-size: 16px; font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<Ellipsis :lineClamp="2">
|
||||
<div class="subTitle">
|
||||
说明：{{
|
||||
slotProps?.description ||
|
||||
typeMap.get(slotProps.triggerType)?.tip
|
||||
}}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'rule-engine/Scene:' + item.key"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<Save
|
||||
:id="id"
|
||||
:type="configurationData.current?.targetType"
|
||||
|
|
|
|||
|
|
@ -6,172 +6,182 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
:gridColumn="3"
|
||||
:gridColumns="[1, 2, 3]"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="rule-engine/Alarm/Configuration:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
menuStory.jumpPage(
|
||||
'rule-engine/Alarm/Configuration/Save',
|
||||
{},
|
||||
{ id: slotProps.id },
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/alarm/alarm-config.png')"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 600; font-size: 16px">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="content-des-title">
|
||||
关联场景联动
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{ (slotProps?.scene || []).map((item: any) => item?.name).join(',') || '' }}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="content-des-title">
|
||||
告警级别
|
||||
</div>
|
||||
<div>
|
||||
{{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level }}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
:gridColumn="3"
|
||||
:gridColumns="[1, 2, 3]"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{ ...item.tooltip }"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' +
|
||||
item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #targetType="slotProps">
|
||||
<span>{{ map[slotProps.targetType] }}</span>
|
||||
</template>
|
||||
<template #level="slotProps">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="(Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level"
|
||||
>
|
||||
<div class="ellipsis">
|
||||
{{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template #sceneId="slotProps">
|
||||
<span
|
||||
>{{(slotProps?.scene || []).map((item: any) => item?.name).join(',') || ''}}</span
|
||||
>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="
|
||||
slotProps.state?.value === 'enabled'
|
||||
? '正常'
|
||||
: '禁用'
|
||||
"
|
||||
:status="slotProps.state?.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' + i.key
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="rule-engine/Alarm/Configuration:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
menuStory.jumpPage(
|
||||
'rule-engine/Alarm/Configuration/Save',
|
||||
{},
|
||||
{ id: slotProps.id },
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="
|
||||
getImage('/alarm/alarm-config.png')
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="content-des-title">
|
||||
关联场景联动
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{ (slotProps?.scene || []).map((item: any) => item?.name).join(',') || '' }}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="content-des-title">
|
||||
告警级别
|
||||
</div>
|
||||
<div>
|
||||
{{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level }}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{ ...item.tooltip }"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' +
|
||||
item.key
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #targetType="slotProps">
|
||||
<span>{{ map[slotProps.targetType] }}</span>
|
||||
</template>
|
||||
<template #level="slotProps">
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="(Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level"
|
||||
>
|
||||
<div class="ellipsis">
|
||||
{{ (Store.get('default-level') || []).find((item: any) => item?.level === slotProps.level)?.title ||
|
||||
slotProps.level }}
|
||||
</div>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template #sceneId="slotProps">
|
||||
<span
|
||||
>{{(slotProps?.scene || []).map((item: any) => item?.name).join(',') || ''}}</span
|
||||
>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="
|
||||
slotProps.state?.value === 'enabled'
|
||||
? '正常'
|
||||
: '禁用'
|
||||
"
|
||||
:status="slotProps.state?.value"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' +
|
||||
i.key
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,48 +5,57 @@
|
|||
target="alarm-log-detail"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
model="TABLE"
|
||||
:request="queryList"
|
||||
:params="params"
|
||||
:defaultParams="{
|
||||
terms,
|
||||
sorts: [{ name: 'alarmTime', order: 'desc' }],
|
||||
}"
|
||||
>
|
||||
<template #alarmTime="slotProps">{{
|
||||
dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</template>
|
||||
<template #action="slotProps">
|
||||
<j-space
|
||||
><template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
model="TABLE"
|
||||
:request="queryList"
|
||||
:params="params"
|
||||
:defaultParams="{
|
||||
terms,
|
||||
sorts: [{ name: 'alarmTime', order: 'desc' }],
|
||||
}"
|
||||
>
|
||||
<template #alarmTime="slotProps">{{
|
||||
dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</template>
|
||||
<template #action="slotProps">
|
||||
<j-space
|
||||
><template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<template #icon><AIcon :type="i.icon"/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<Info v-if="visiable" :data="current" @close="close" :description="description"/>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<Info
|
||||
v-if="visiable"
|
||||
:data="current"
|
||||
@close="close"
|
||||
:description="description"
|
||||
/>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { detail, queryHistoryList } from '@/api/rule-engine/log';
|
||||
import { detail as configurationDetail} from '@/api/rule-engine/configuration'
|
||||
import { detail as configurationDetail } from '@/api/rule-engine/configuration';
|
||||
import { useRoute } from 'vue-router';
|
||||
import dayjs from 'dayjs';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
|
|
@ -54,10 +63,10 @@ import { message } from 'jetlinks-ui-components';
|
|||
import { useAlarmStore } from '@/store/alarm';
|
||||
import Info from './info.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
const route = useRoute();
|
||||
const id = route.params?.id;
|
||||
const { params: routerParams } = useRouterParams()
|
||||
const { params: routerParams } = useRouterParams();
|
||||
let visiable = ref(false);
|
||||
let description = ref<string>();
|
||||
const columns = [
|
||||
|
|
@ -170,11 +179,11 @@ watchEffect(async () => {
|
|||
key: 'targetName',
|
||||
});
|
||||
}
|
||||
configurationDetail(res.result?.alarmConfigId).then((res:any)=>{
|
||||
if(res.status === 200){
|
||||
configurationDetail(res.result?.alarmConfigId).then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
description.value = res.result?.description;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
const handleSearch = (_params: any) => {
|
||||
|
|
@ -185,15 +194,15 @@ const handleSearch = (_params: any) => {
|
|||
* 关闭模态弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visiable.value = false
|
||||
}
|
||||
visiable.value = false;
|
||||
};
|
||||
|
||||
watchEffect(()=>{
|
||||
watchEffect(() => {
|
||||
current.value = details.value;
|
||||
if(routerParams.value.detail && details.value){
|
||||
if (routerParams.value.detail && details.value) {
|
||||
visiable.value = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -5,39 +5,43 @@
|
|||
target="bind-channel"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms,
|
||||
}"
|
||||
:request="queryHandleHistory"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<h3>记录列表</h3>
|
||||
</template>
|
||||
<template #handleTime="slotsProps">
|
||||
<span>
|
||||
{{
|
||||
dayjs(slotsProps.handleTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #handleType="slotProps">
|
||||
<span>{{ slotProps.handleType.text }}</span>
|
||||
</template>
|
||||
<template #alarmTime="slotProps">
|
||||
<span>
|
||||
{{
|
||||
dayjs(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</JProTable>
|
||||
<FullPage>
|
||||
<JProTable
|
||||
model="TABLE"
|
||||
:columns="columns"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms,
|
||||
}"
|
||||
:request="queryHandleHistory"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<h3>记录列表</h3>
|
||||
</template>
|
||||
<template #handleTime="slotsProps">
|
||||
<span>
|
||||
{{
|
||||
dayjs(slotsProps.handleTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #handleType="slotProps">
|
||||
<span>{{ slotProps.handleType.text }}</span>
|
||||
</template>
|
||||
<template #alarmTime="slotProps">
|
||||
<span>
|
||||
{{
|
||||
dayjs(slotProps.alarmTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,113 +24,118 @@
|
|||
v-if="props.type === 'org'"
|
||||
@search="search"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="handleSearch"
|
||||
:params="params"
|
||||
:gridColumns="[1, 1, 2]"
|
||||
:gridColumn="2"
|
||||
model="CARD"
|
||||
ref="tableRef"
|
||||
>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
v-bind="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:statusText="
|
||||
data.defaultLevel.find(
|
||||
(i) => i.level === slotProps.level,
|
||||
)?.title || slotProps.level
|
||||
"
|
||||
:status="slotProps.level"
|
||||
:statusNames="{
|
||||
1: 'level1',
|
||||
2: 'level2',
|
||||
3: 'level3',
|
||||
4: 'level4',
|
||||
5: 'level5',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img :src="imgMap.get(slotProps.targetType)" alt="" />
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 500">
|
||||
{{ slotProps.alarmName }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="8" class="content-left">
|
||||
<div class="content-left-title">
|
||||
{{ titleMap.get(slotProps.targetType) }}
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{ slotProps?.targetName }}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="content-right-title">
|
||||
最近告警时间
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{
|
||||
dayjs(slotProps?.alarmTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="content-right-title">状态</div>
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:statusName="{
|
||||
warning: 'warning',
|
||||
normal: 'default',
|
||||
}"
|
||||
>
|
||||
</BadgeStatus
|
||||
><span
|
||||
:style="
|
||||
slotProps.state.value === 'warning'
|
||||
? 'color: #E50012'
|
||||
: 'color:black'
|
||||
"
|
||||
>
|
||||
{{ slotProps.state.text }}
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="handleSearch"
|
||||
:params="params"
|
||||
:gridColumns="[1, 1, 2]"
|
||||
:gridColumn="2"
|
||||
model="CARD"
|
||||
ref="tableRef"
|
||||
>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
v-bind="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
:statusText="
|
||||
data.defaultLevel.find(
|
||||
(i) => i.level === slotProps.level,
|
||||
)?.title || slotProps.level
|
||||
"
|
||||
:status="slotProps.level"
|
||||
:statusNames="{
|
||||
1: 'level1',
|
||||
2: 'level2',
|
||||
3: 'level3',
|
||||
4: 'level4',
|
||||
5: 'level5',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<img
|
||||
:src="imgMap.get(slotProps.targetType)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 500">
|
||||
{{ slotProps.alarmName }}
|
||||
</span>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="
|
||||
item.key === 'solve' &&
|
||||
slotProps.state.value === 'normal'
|
||||
"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
item.key == 'solve'
|
||||
? 'rule-engine/Alarm/Log:action'
|
||||
: 'rule-engine/Alarm/Log:view'
|
||||
"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</Ellipsis>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="8" class="content-left">
|
||||
<div class="content-left-title">
|
||||
{{ titleMap.get(slotProps.targetType) }}
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{ slotProps?.targetName }}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="content-right-title">
|
||||
最近告警时间
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{
|
||||
dayjs(
|
||||
slotProps?.alarmTime,
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</j-col>
|
||||
<j-col :span="8">
|
||||
<div class="content-right-title">状态</div>
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:statusName="{
|
||||
warning: 'warning',
|
||||
normal: 'default',
|
||||
}"
|
||||
>
|
||||
</BadgeStatus
|
||||
><span
|
||||
:style="
|
||||
slotProps.state.value === 'warning'
|
||||
? 'color: #E50012'
|
||||
: 'color:black'
|
||||
"
|
||||
>
|
||||
{{ slotProps.state.text }}
|
||||
</span>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="
|
||||
item.key === 'solve' &&
|
||||
slotProps.state.value === 'normal'
|
||||
"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="
|
||||
item.key == 'solve'
|
||||
? 'rule-engine/Alarm/Log:action'
|
||||
: 'rule-engine/Alarm/Log:view'
|
||||
"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<SolveComponent
|
||||
:data="data"
|
||||
v-if="data.solveVisible"
|
||||
|
|
|
|||
|
|
@ -6,127 +6,138 @@
|
|||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="rule-engine/Instance:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
@click="openRuleEditor"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-product.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span style="font-weight: 600; font-size: 16px">
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<Ellipsis>
|
||||
<div>
|
||||
{{ slotProps.description }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<FullPage>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
ref="tableRef"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
:hasPermission="
|
||||
'rule-engine/Instance:' + item.key
|
||||
"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="
|
||||
slotProps.state?.value === 'started'
|
||||
? '正常'
|
||||
: '禁用'
|
||||
"
|
||||
:status="slotProps.state?.value"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'rule-engine/Instance:' + i.key"
|
||||
:danger="i.key === 'delete'"
|
||||
type="primary"
|
||||
@click="add"
|
||||
hasPermission="rule-engine/Instance:add"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
><AIcon type="PlusOutlined"
|
||||
/></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</j-space>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
@click="openRuleEditor"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<span
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</span>
|
||||
</Ellipsis>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<Ellipsis>
|
||||
<div>
|
||||
{{ slotProps.description }}
|
||||
</div>
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
:hasPermission="
|
||||
'rule-engine/Instance:' + item.key
|
||||
"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:text="
|
||||
slotProps.state?.value === 'started'
|
||||
? '正常'
|
||||
: '禁用'
|
||||
"
|
||||
:status="slotProps.state?.value"
|
||||
:statusNames="{
|
||||
started: 'processing',
|
||||
disable: 'error',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
>
|
||||
<PermissionButton
|
||||
:disabled="i.disabled"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'rule-engine/Instance:' + i.key
|
||||
"
|
||||
:danger="i.key === 'delete'"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
</FullPage>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
:data="current"
|
||||
|
|
@ -151,11 +162,11 @@ import { getImage } from '@/utils/comm';
|
|||
import { message } from 'jetlinks-ui-components';
|
||||
import Save from './Save/index.vue';
|
||||
import { SystemConst } from '@/utils/consts';
|
||||
import {useRouterParams} from "@/utils/hooks/useParams";
|
||||
import { useRouterParams } from '@/utils/hooks/useParams';
|
||||
const params = ref<Record<string, any>>({});
|
||||
let visiable = ref(false);
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const { params: routeParams } = useRouterParams()
|
||||
const { params: routeParams } = useRouterParams();
|
||||
const query = {
|
||||
columns: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@ watch(
|
|||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ const TypeList = [
|
|||
},
|
||||
{
|
||||
label: '按变量',
|
||||
value: 'variable',
|
||||
value: 'context',
|
||||
image: getImage('/scene/device-variable.png'),
|
||||
tip: '选择设备ID为上游变量值的设备',
|
||||
},
|
||||
|
|
@ -236,7 +236,7 @@ const filterType = async (newVal: any) => {
|
|||
!props.parallel &&
|
||||
props.name !== 0
|
||||
) {
|
||||
const array = TypeList.filter((item) => item.value === 'variable');
|
||||
const array = TypeList.filter((item) => item.value === 'context');
|
||||
_list.push(...array);
|
||||
}
|
||||
list.value = _list;
|
||||
|
|
@ -246,7 +246,7 @@ const filterType = async (newVal: any) => {
|
|||
!props.parallel &&
|
||||
props.name !== 0
|
||||
) {
|
||||
const array = TypeList.filter((item) => item.value === 'variable');
|
||||
const array = TypeList.filter((item) => item.value === 'context');
|
||||
_list.push(...array);
|
||||
}
|
||||
list.value = _list;
|
||||
|
|
@ -287,7 +287,12 @@ const onTagChange = (val: any[], arr: any[]) => {
|
|||
modelRef.source = 'fixed';
|
||||
}
|
||||
const tagName = arr.map((i, _index) => {
|
||||
const _type = (_index !== 0 && _index !== (arr || []).length && i.type) ? (i.type === 'and' ? '并且' : '或者') : '';
|
||||
const _type =
|
||||
_index !== 0 && _index !== (arr || []).length && i.type
|
||||
? i.type === 'and'
|
||||
? '并且'
|
||||
: '或者'
|
||||
: '';
|
||||
return `${_type}${i.name}为${i.value}`;
|
||||
});
|
||||
emits('save', unref(modelRef), { tagName: tagName.join('') });
|
||||
|
|
@ -295,6 +300,8 @@ const onTagChange = (val: any[], arr: any[]) => {
|
|||
|
||||
const onVariableChange = (val: any, node: any) => {
|
||||
modelRef.deviceId = val;
|
||||
modelRef.source = 'upper';
|
||||
modelRef.upperKey = val;
|
||||
modelRef.selectorValues = [{ value: val, name: node.description }] as any;
|
||||
emits('save', unref(modelRef), { name: node.description });
|
||||
};
|
||||
|
|
@ -333,7 +340,7 @@ watch(
|
|||
return item.children.find((i: any) => i.id === param);
|
||||
});
|
||||
if (isVariable) {
|
||||
modelRef.selector = 'variable';
|
||||
modelRef.selector = 'context';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ const onProductChange = (_val: any, bol: boolean) => {
|
|||
JSON.parse(_val.metadata || '{}'),
|
||||
DeviceModel?.message,
|
||||
);
|
||||
console.log(flag)
|
||||
if (!flag) {
|
||||
DeviceModel.message = {
|
||||
messageType: 'INVOKE_FUNCTION',
|
||||
|
|
|
|||
|
|
@ -6,166 +6,176 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getApplyList_api"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="queryParams"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<div style="display: flex; align-items: center">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="primary"
|
||||
@click="() => table.toSave()"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<p style="margin: 0 0 0 30px; color: #0000008c">
|
||||
<AIcon
|
||||
type="ExclamationCircleOutlined"
|
||||
style="margin-right: 12px"
|
||||
/>
|
||||
应用管理将多个应用系统的登录简化为一次登录，实现多处访问、集中管控的业务场景。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="table.getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/apply.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
<Ellipsis>
|
||||
{{ slotProps.name }}
|
||||
</Ellipsis>
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
类型
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
table.getTypeLabel(
|
||||
slotProps.provider,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
说明
|
||||
</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getApplyList_api"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="queryParams"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<div style="display: flex; align-items: center">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="primary"
|
||||
@click="() => table.toSave()"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<j-button
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
>
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{ o.text }}</span>
|
||||
</j-button>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<PermissionButton
|
||||
v-else
|
||||
:hasPermission="item.permission"
|
||||
:tooltip="item.tooltip"
|
||||
:pop-confirm="item.popConfirm"
|
||||
@click="item.onClick"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span v-if="item.key !== 'delete'">{{
|
||||
item.text
|
||||
}}</span>
|
||||
</PermissionButton>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
|
||||
<template #mark>
|
||||
<AIcon
|
||||
type="EyeOutlined"
|
||||
style="font-size: 24px"
|
||||
@click="() => table.toSave(slotProps.id, true)"
|
||||
/>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #provider="slotProps">
|
||||
{{ table.getTypeLabel(slotProps.provider) }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i.disabled"
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<p style="margin: 0 0 0 30px; color: #0000008c">
|
||||
<AIcon
|
||||
type="ExclamationCircleOutlined"
|
||||
style="margin-right: 12px"
|
||||
/>
|
||||
应用管理将多个应用系统的登录简化为一次登录，实现多处访问、集中管控的业务场景。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="table.getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/apply.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
<Ellipsis>
|
||||
{{ slotProps.name }}
|
||||
</Ellipsis>
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
类型
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
table.getTypeLabel(
|
||||
slotProps.provider,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
说明
|
||||
</div>
|
||||
<Ellipsis>
|
||||
{{ slotProps.description }}
|
||||
</Ellipsis>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(
|
||||
o, i
|
||||
) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<j-button
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
>
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{
|
||||
o.text
|
||||
}}</span>
|
||||
</j-button>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<PermissionButton
|
||||
v-else
|
||||
:hasPermission="item.permission"
|
||||
:tooltip="item.tooltip"
|
||||
:pop-confirm="item.popConfirm"
|
||||
@click="item.onClick"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span v-if="item.key !== 'delete'">{{
|
||||
item.text
|
||||
}}</span>
|
||||
</PermissionButton>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
|
||||
<template #mark>
|
||||
<AIcon
|
||||
type="EyeOutlined"
|
||||
style="font-size: 24px"
|
||||
@click="
|
||||
() => table.toSave(slotProps.id, true)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #provider="slotProps">
|
||||
{{ table.getTypeLabel(slotProps.provider) }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
enabled: 'success',
|
||||
disabled: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(
|
||||
slotProps,
|
||||
'table',
|
||||
)"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
<div class="dialogs">
|
||||
<MenuDialog
|
||||
|
|
|
|||
|
|
@ -1,285 +1,313 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="basis-container">
|
||||
<j-form
|
||||
layout="vertical"
|
||||
ref="formRef"
|
||||
:rules="rulesFrom"
|
||||
:model="formValue"
|
||||
>
|
||||
<j-row :span="24" :gutter="24">
|
||||
<j-col :span="10">
|
||||
<j-form-item label="系统名称" name="title">
|
||||
<j-input
|
||||
v-model:value="formValue.title"
|
||||
placeholder="请输入系统名称"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="主题色" name="headerTheme">
|
||||
<j-select v-model:value="formValue.headerTheme">
|
||||
<j-select-option value="light">
|
||||
白色
|
||||
</j-select-option>
|
||||
<j-select-option value="dark">
|
||||
黑色
|
||||
</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>高德API Key</span>
|
||||
<j-tooltip
|
||||
title="配置后平台可调用高德地图GIS服务"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
v-model:value="formValue.apiKey"
|
||||
placeholder="请输入高德API Key"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item name="base-path">
|
||||
<template #label>
|
||||
<span>base-path</span>
|
||||
<j-tooltip title="系统后台访问的url">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
v-model:value="formValue['base-path']"
|
||||
placeholder="请输入高德API Key"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-row :gutter="24" :span="24">
|
||||
<j-col>
|
||||
<j-form-item label="系统logo">
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="
|
||||
uploader.beforeLogoUpload
|
||||
"
|
||||
@change="
|
||||
uploader.handleChangeLogo
|
||||
"
|
||||
:accept="uploader.imageTypes"
|
||||
<FullPage>
|
||||
<div class="basis-container">
|
||||
<j-form
|
||||
layout="vertical"
|
||||
ref="formRef"
|
||||
:rules="rulesFrom"
|
||||
:model="formValue"
|
||||
>
|
||||
<j-row :span="24" :gutter="24">
|
||||
<j-col :span="10">
|
||||
<j-form-item label="系统名称" name="title">
|
||||
<j-input
|
||||
v-model:value="formValue.title"
|
||||
placeholder="请输入系统名称"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item label="主题色" name="headerTheme">
|
||||
<j-select v-model:value="formValue.headerTheme">
|
||||
<j-select-option value="light">
|
||||
白色
|
||||
</j-select-option>
|
||||
<j-select-option value="dark">
|
||||
黑色
|
||||
</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>高德API Key</span>
|
||||
<j-tooltip
|
||||
title="配置后平台可调用高德地图GIS服务"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="
|
||||
getImage('/init-home/mark.png')
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
v-model:value="formValue.apiKey"
|
||||
placeholder="请输入高德API Key"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-form-item name="base-path">
|
||||
<template #label>
|
||||
<span>base-path</span>
|
||||
<j-tooltip title="系统后台访问的url">
|
||||
<img
|
||||
class="img-style"
|
||||
:src="
|
||||
getImage('/init-home/mark.png')
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<j-input
|
||||
v-model:value="formValue['base-path']"
|
||||
placeholder="请输入高德API Key"
|
||||
/>
|
||||
</j-form-item>
|
||||
<j-row :gutter="24" :span="24">
|
||||
<j-col>
|
||||
<j-form-item label="系统logo">
|
||||
<div class="upload-image-warp-logo">
|
||||
<div
|
||||
class="upload-image-border-logo"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-logo"
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="
|
||||
uploader.beforeLogoUpload
|
||||
"
|
||||
@change="
|
||||
uploader.handleChangeLogo
|
||||
"
|
||||
:accept="
|
||||
uploader.imageTypes
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="loading-logo"
|
||||
v-if="form.logoLoading"
|
||||
class="upload-image-content-logo"
|
||||
>
|
||||
<div
|
||||
class="loading-logo"
|
||||
v-if="
|
||||
form.logoLoading
|
||||
"
|
||||
>
|
||||
<AIcon
|
||||
type="LoadingOutlined"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
style="height: 100%"
|
||||
v-if="
|
||||
formValue.logo
|
||||
"
|
||||
:style="
|
||||
formValue.logo
|
||||
? `background-image: url(${formValue.logo});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="
|
||||
formValue.logo
|
||||
"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<AIcon
|
||||
:type="
|
||||
form.logoLoading
|
||||
? 'LoadingOutlined'
|
||||
: 'PlusOutlined'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
<div v-if="form.logoLoading">
|
||||
<div
|
||||
class="upload-loading-mask"
|
||||
>
|
||||
<AIcon
|
||||
type="LoadingOutlined"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
style="height: 100%"
|
||||
v-if="formValue.logo"
|
||||
:style="
|
||||
formValue.logo
|
||||
? `background-image: url(${formValue.logo});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="formValue.logo"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<AIcon
|
||||
:type="
|
||||
form.logoLoading
|
||||
? 'LoadingOutlined'
|
||||
: 'PlusOutlined'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
<div v-if="form.logoLoading">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-tips">
|
||||
推荐尺寸200*200
|
||||
</div>
|
||||
<div class="upload-tips">
|
||||
支持jpg,png,jfif,pjp,pjpeg,jpeg
|
||||
</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>浏览器页签</span>
|
||||
<j-tooltip
|
||||
title="浏览器tab页中显示的图片元素"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="
|
||||
getImage(
|
||||
'/init-home/mark.png',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div
|
||||
class="upload-image-border-logo"
|
||||
>
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="
|
||||
uploader.beforeIconUpload
|
||||
"
|
||||
@change="
|
||||
uploader.changeIconUpload
|
||||
"
|
||||
:accept="uploader.iconTypes"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-logo"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
form.iconLoading
|
||||
"
|
||||
class="loading-icon"
|
||||
>
|
||||
<AIcon
|
||||
type="LoadingOutlined"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image-icon"
|
||||
v-if="formValue.ico"
|
||||
:style="
|
||||
formValue.ico
|
||||
? `background-image: url(${formValue.ico});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="formValue.ico"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-tips">
|
||||
推荐尺寸64*64
|
||||
</div>
|
||||
<div class="upload-tips">
|
||||
支持ico格式
|
||||
</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-col>
|
||||
<j-col :span="14">
|
||||
<j-form-item label="登录背景图">
|
||||
<div class="upload-image-warp-back">
|
||||
<div class="upload-image-border-back">
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:beforeUpload="
|
||||
uploader.beforeLogoUpload
|
||||
"
|
||||
:showUploadList="false"
|
||||
@change="uploader.changeBackUpload"
|
||||
:accept="uploader.imageTypes"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-back"
|
||||
>
|
||||
<div
|
||||
class="upload-loading-mask"
|
||||
v-if="form.backLoading"
|
||||
class="loading-back"
|
||||
>
|
||||
<AIcon
|
||||
type="LoadingOutlined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-tips">
|
||||
推荐尺寸200*200
|
||||
</div>
|
||||
<div class="upload-tips">
|
||||
支持jpg,png,jfif,pjp,pjpeg,jpeg
|
||||
</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col>
|
||||
<j-form-item>
|
||||
<template #label>
|
||||
<span>浏览器页签</span>
|
||||
<j-tooltip
|
||||
title="浏览器tab页中显示的图片元素"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="
|
||||
getImage(
|
||||
'/init-home/mark.png',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="
|
||||
uploader.beforeIconUpload
|
||||
"
|
||||
@change="
|
||||
uploader.changeIconUpload
|
||||
"
|
||||
:accept="uploader.iconTypes"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-logo"
|
||||
class="upload-image"
|
||||
v-if="formValue.backgroud"
|
||||
:style="
|
||||
formValue.backgroud
|
||||
? `background-image: url(${formValue.backgroud});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="formValue.backgroud"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
<div
|
||||
v-if="form.iconLoading"
|
||||
class="loading-icon"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<AIcon
|
||||
type="LoadingOutlined"
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image-icon"
|
||||
v-if="formValue.ico"
|
||||
:style="
|
||||
formValue.ico
|
||||
? `background-image: url(${formValue.ico});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="formValue.ico"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
</div>
|
||||
|
||||
<div class="upload-tips">推荐尺寸64*64</div>
|
||||
<div class="upload-tips">支持ico格式</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-col>
|
||||
<j-col :span="14">
|
||||
<j-form-item label="登录背景图">
|
||||
<div class="upload-image-warp-back">
|
||||
<div class="upload-image-border-back">
|
||||
<j-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:beforeUpload="
|
||||
uploader.beforeLogoUpload
|
||||
"
|
||||
:showUploadList="false"
|
||||
@change="uploader.changeBackUpload"
|
||||
:accept="uploader.imageTypes"
|
||||
>
|
||||
<div class="upload-image-content-back">
|
||||
<div
|
||||
v-if="form.backLoading"
|
||||
class="loading-back"
|
||||
>
|
||||
<AIcon type="LoadingOutlined" />
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
v-if="formValue.backgroud"
|
||||
:style="
|
||||
formValue.backgroud
|
||||
? `background-image: url(${formValue.backgroud});`
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="formValue.backgroud"
|
||||
class="upload-image-mask"
|
||||
>
|
||||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<AIcon
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</j-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-tips">
|
||||
支持4M以内的图片:
|
||||
支持jpg,png,jfif,pjp,pjpeg,jpeg
|
||||
</div>
|
||||
<div class="upload-tips">建议尺寸1400x1080</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
<div class="upload-tips">
|
||||
支持4M以内的图片:
|
||||
支持jpg,png,jfif,pjp,pjpeg,jpeg
|
||||
</div>
|
||||
<div class="upload-tips">建议尺寸1400x1080</div>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="form.clickSave"
|
||||
:disabled="
|
||||
form.saveLoading ||
|
||||
form.logoLoading ||
|
||||
form.iconLoading ||
|
||||
form.backLoading
|
||||
"
|
||||
>
|
||||
保存
|
||||
</j-button>
|
||||
</div>
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="form.clickSave"
|
||||
:disabled="
|
||||
form.saveLoading ||
|
||||
form.logoLoading ||
|
||||
form.iconLoading ||
|
||||
form.backLoading
|
||||
"
|
||||
>
|
||||
保存
|
||||
</j-button>
|
||||
</div>
|
||||
</FullPage>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,133 +6,134 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getDataSourceList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog({})"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
</BadgeStatus>
|
||||
</template>
|
||||
<template #typeId="slotProps">
|
||||
{{
|
||||
(table.typeOptions.value.length &&
|
||||
table.getTypeLabel(slotProps.typeId)) ||
|
||||
''
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getDataSourceList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog({})"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:manage`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title:
|
||||
slotProps?.typeId === 'rabbitmq'
|
||||
? '暂不支持管理功能'
|
||||
: table.getRowStatus(slotProps)
|
||||
? '管理'
|
||||
: '请先启用数据源',
|
||||
}"
|
||||
@click="
|
||||
() =>
|
||||
router.push(
|
||||
`/system/DataSource/Management?id=${slotProps.id}`,
|
||||
)
|
||||
"
|
||||
:disabled="
|
||||
slotProps?.typeId === 'rabbitmq' ||
|
||||
!table.getRowStatus(slotProps)
|
||||
"
|
||||
>
|
||||
<AIcon type="icon-ziyuankuguanli" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确定要${
|
||||
table.getRowStatus(slotProps)
|
||||
? '禁用'
|
||||
: '启用'
|
||||
}吗？`,
|
||||
onConfirm: () =>
|
||||
table.clickChangeStatus(slotProps),
|
||||
}"
|
||||
:tooltip="{
|
||||
title: table.getRowStatus(slotProps)
|
||||
? '禁用'
|
||||
: '启用',
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state?.value"
|
||||
:text="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
enabled: 'processing',
|
||||
disabled: 'error',
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
table.getRowStatus(slotProps)
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
</BadgeStatus>
|
||||
</template>
|
||||
<template #typeId="slotProps">
|
||||
{{
|
||||
(table.typeOptions.value.length &&
|
||||
table.getTypeLabel(slotProps.typeId)) ||
|
||||
''
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:manage`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title:
|
||||
slotProps?.typeId === 'rabbitmq'
|
||||
? '暂不支持管理功能'
|
||||
: table.getRowStatus(slotProps)
|
||||
? '管理'
|
||||
: '请先启用数据源',
|
||||
}"
|
||||
@click="
|
||||
() =>
|
||||
router.push(
|
||||
`/system/DataSource/Management?id=${slotProps.id}`,
|
||||
)
|
||||
"
|
||||
/>
|
||||
<!-- <AIcon type="PlayCircleOutlined" /> -->
|
||||
</PermissionButton>
|
||||
:disabled="
|
||||
slotProps?.typeId === 'rabbitmq' ||
|
||||
!table.getRowStatus(slotProps)
|
||||
"
|
||||
>
|
||||
<AIcon type="icon-ziyuankuguanli" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确定要${
|
||||
table.getRowStatus(slotProps)
|
||||
? '禁用'
|
||||
: '启用'
|
||||
}吗？`,
|
||||
onConfirm: () =>
|
||||
table.clickChangeStatus(slotProps),
|
||||
}"
|
||||
:tooltip="{
|
||||
title: table.getRowStatus(slotProps)
|
||||
? '禁用'
|
||||
: '启用',
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
table.getRowStatus(slotProps)
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
<!-- <AIcon type="PlayCircleOutlined" /> -->
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: table.getRowStatus(slotProps)
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:danger="true"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="table.getRowStatus(slotProps)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: table.getRowStatus(slotProps)
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:danger="true"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="table.getRowStatus(slotProps)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<EditDialog
|
||||
v-if="dialog.visible"
|
||||
|
|
@ -283,13 +284,13 @@ const table = {
|
|||
// 刷新列表
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
dialog.visible = false
|
||||
dialog.selectItem = {}
|
||||
dialog.visible = false;
|
||||
dialog.selectItem = {};
|
||||
},
|
||||
cancel: () => {
|
||||
dialog.visible = false
|
||||
dialog.selectItem = {}
|
||||
}
|
||||
dialog.visible = false;
|
||||
dialog.selectItem = {};
|
||||
},
|
||||
};
|
||||
table.getTypeOption();
|
||||
|
||||
|
|
|
|||
|
|
@ -5,170 +5,175 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:request="table.requestFun"
|
||||
:gridColumn="2"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys.value,
|
||||
onChange:(keys:string[])=>table._selectedRowKeys.value = [...keys],
|
||||
onSelectNone: table.cancelSelect
|
||||
}"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
type="primary"
|
||||
@click="table.clickAdd('handle')"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否批量解除绑定`,
|
||||
onConfirm: () =>
|
||||
table.clickUnBind(),
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="table.clickEdit()"
|
||||
>
|
||||
<AIcon type="EditOutlined" />批量编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="[{ key: 1 }]"
|
||||
v-bind="slotProps"
|
||||
:active="
|
||||
table._selectedRowKeys.value.includes(slotProps.id)
|
||||
"
|
||||
@click="table.onSelectChange"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{
|
||||
table.permissionList.value.length &&
|
||||
table.getPermissLabel(
|
||||
slotProps.permission,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions>
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:request="table.requestFun"
|
||||
:gridColumn="2"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys.value,
|
||||
onChange:(keys:string[])=>table._selectedRowKeys.value = [...keys],
|
||||
onSelectNone: table.cancelSelect
|
||||
}"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="table.clickEdit(slotProps)"
|
||||
type="primary"
|
||||
@click="table.clickAdd('handle')"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否批量解除绑定`,
|
||||
onConfirm: () =>
|
||||
table.clickUnBind(),
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="table.clickEdit()"
|
||||
>
|
||||
<AIcon
|
||||
type="EditOutlined"
|
||||
/>批量编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否解除绑定`,
|
||||
onConfirm: () => table.clickUnBind(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DisconnectOutlined" />
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #permission="slotProps">
|
||||
{{
|
||||
table.permissionList.value.length &&
|
||||
table.getPermissLabel(slotProps.permission)
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i?.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i?.disabled"
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="[{ key: 1 }]"
|
||||
v-bind="slotProps"
|
||||
:active="
|
||||
table._selectedRowKeys.value.includes(slotProps.id)
|
||||
"
|
||||
@click="table.onSelectChange"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{
|
||||
table.permissionList.value.length &&
|
||||
table.getPermissLabel(
|
||||
slotProps.permission,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="table.clickEdit(slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否解除绑定`,
|
||||
onConfirm: () =>
|
||||
table.clickUnBind(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DisconnectOutlined" />
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #permission="slotProps">
|
||||
{{
|
||||
table.permissionList.value.length &&
|
||||
table.getPermissLabel(slotProps.permission)
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
notActive: 'warning',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i?.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i?.disabled"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDeviceOrProductDialog
|
||||
|
|
@ -471,7 +476,7 @@ const table = {
|
|||
},
|
||||
clickAdd: (type?: string) => {
|
||||
// 设备资产分配弹窗操作类型: type = 'handle': 手动点击资产分配按钮, !type产品资产分配后, 自动弹出设备资产分配
|
||||
departmentStore.setType(type)
|
||||
departmentStore.setType(type);
|
||||
dialogs.addShow = true;
|
||||
},
|
||||
clickEdit: (row?: any) => {
|
||||
|
|
|
|||
|
|
@ -5,193 +5,199 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:request="table.requestFun"
|
||||
:gridColumn="2"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: tableData._selectedRowKeys,
|
||||
onChange:(keys:string[])=>tableData._selectedRowKeys = [...keys],
|
||||
onSelectNone: table.cancelSelect
|
||||
}"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
type="primary"
|
||||
@click="dialogs.addShow = true"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否批量解除绑定`,
|
||||
onConfirm: () =>
|
||||
table.clickUnBind(),
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="() => table.clickEdit()"
|
||||
>
|
||||
<AIcon type="EditOutlined" />批量编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="table.getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="tableData._selectedRowKeys.includes(slotProps.id)"
|
||||
@click="table.onSelectChange"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
}"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{
|
||||
tableData.permissionList.length &&
|
||||
table.getPermissLabel(
|
||||
slotProps.permission,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:request="table.requestFun"
|
||||
:gridColumn="2"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: tableData._selectedRowKeys,
|
||||
onChange:(keys:string[])=>tableData._selectedRowKeys = [...keys],
|
||||
onSelectNone: table.cancelSelect
|
||||
}"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
type="primary"
|
||||
@click="dialogs.addShow = true"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否批量解除绑定`,
|
||||
onConfirm: () =>
|
||||
table.clickUnBind(),
|
||||
}"
|
||||
>
|
||||
<j-button
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
>
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{ o.text }}</span>
|
||||
</j-button>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<PermissionButton
|
||||
v-else
|
||||
:hasPermission="item.permission"
|
||||
:tooltip="item.tooltip"
|
||||
:pop-confirm="item.popConfirm"
|
||||
@click="item.onClick"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span v-if="item.key !== 'delete'">{{
|
||||
item.text
|
||||
}}</span>
|
||||
</PermissionButton>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<AIcon
|
||||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:assert`"
|
||||
@click="() => table.clickEdit()"
|
||||
>
|
||||
<AIcon
|
||||
type="EditOutlined"
|
||||
/>批量编辑
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<template #permission="slotProps">
|
||||
{{
|
||||
tableData.permissionList.length &&
|
||||
table.getPermissLabel(slotProps.permission)
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i?.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i?.disabled"
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
:value="slotProps"
|
||||
:actions="table.getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="
|
||||
tableData._selectedRowKeys.includes(slotProps.id)
|
||||
"
|
||||
@click="table.onSelectChange"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
}"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
:src="getImage('/device-product.png')"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
class="card-item-content-value"
|
||||
>
|
||||
{{
|
||||
tableData.permissionList.length &&
|
||||
table.getPermissLabel(
|
||||
slotProps.permission,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<j-button
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
>
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{ o.text }}</span>
|
||||
</j-button>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<PermissionButton
|
||||
v-else
|
||||
:hasPermission="item.permission"
|
||||
:tooltip="item.tooltip"
|
||||
:pop-confirm="item.popConfirm"
|
||||
@click="item.onClick"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<AIcon :type="item.icon" />
|
||||
<span v-if="item.key !== 'delete'">{{
|
||||
item.text
|
||||
}}</span>
|
||||
</PermissionButton>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
||||
<template #permission="slotProps">
|
||||
{{
|
||||
tableData.permissionList.length &&
|
||||
table.getPermissLabel(slotProps.permission)
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
online: 'processing',
|
||||
offline: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:hasPermission="i.permission"
|
||||
type="link"
|
||||
:tooltip="i?.tooltip"
|
||||
:pop-confirm="i.popConfirm"
|
||||
@click="i.onClick"
|
||||
:disabled="i?.disabled"
|
||||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDeviceOrProductDialog
|
||||
|
|
|
|||
|
|
@ -5,72 +5,74 @@
|
|||
target="category"
|
||||
@search="handleParams"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="table.requestFun"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys,
|
||||
onChange: table.onSelectChange,
|
||||
}"
|
||||
@cancelSelect="table.cancelSelect"
|
||||
model="TABLE"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:bind-user`"
|
||||
@click="dialogVisible = true"
|
||||
style="margin-right: 15px"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />绑定用户
|
||||
</PermissionButton>
|
||||
<div
|
||||
style="display: inline-block; width: 12px; height: 1px"
|
||||
></div>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否解除绑定`,
|
||||
onConfirm: () => table.unBind(),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DisconnectOutlined" />批量解绑
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="table.requestFun"
|
||||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys,
|
||||
onChange: table.onSelectChange,
|
||||
}"
|
||||
@cancelSelect="table.cancelSelect"
|
||||
model="TABLE"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:bind-user`"
|
||||
@click="dialogVisible = true"
|
||||
style="margin-right: 15px"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />绑定用户
|
||||
</PermissionButton>
|
||||
<div
|
||||
style="display: inline-block; width: 12px; height: 1px"
|
||||
></div>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否解除绑定`,
|
||||
onConfirm: () => table.unBind(slotProps),
|
||||
onConfirm: () => table.unBind(),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DisconnectOutlined" />
|
||||
<AIcon type="DisconnectOutlined" />批量解绑
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
title: `是否解除绑定`,
|
||||
onConfirm: () => table.unBind(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DisconnectOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddBindUserDialog
|
||||
|
|
@ -150,8 +152,8 @@ const columns = [
|
|||
const queryParams = ref({});
|
||||
|
||||
const handleParams = (params: any) => {
|
||||
queryParams.value = params
|
||||
}
|
||||
queryParams.value = params;
|
||||
};
|
||||
|
||||
// 表格
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
|
|
@ -174,7 +176,7 @@ const table = reactive({
|
|||
value: props.parentId,
|
||||
},
|
||||
],
|
||||
type: 'and'
|
||||
type: 'and',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,70 +6,73 @@
|
|||
target="category"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="table.getList"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
noPagination
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.toDetails({})"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<j-button
|
||||
style="margin-left: 12px"
|
||||
@click="router.push('/system/Menu/Setting')"
|
||||
>菜单配置</j-button
|
||||
>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
{{
|
||||
dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip>
|
||||
<template #title>查看</template>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.toDetails(slotProps)"
|
||||
>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="table.getList"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
noPagination
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
:tooltip="{ title: '新增子菜单' }"
|
||||
@click="table.addChildren(slotProps)"
|
||||
@click="table.toDetails({})"
|
||||
>
|
||||
<AIcon type="PlusCircleOutlined" />
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `是否删除该菜单`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
<j-button
|
||||
style="margin-left: 12px"
|
||||
@click="router.push('/system/Menu/Setting')"
|
||||
>菜单配置</j-button
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
{{
|
||||
dayjs(slotProps.createTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<j-tooltip>
|
||||
<template #title>查看</template>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.toDetails(slotProps)"
|
||||
>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:add`"
|
||||
:tooltip="{ title: '新增子菜单' }"
|
||||
@click="table.addChildren(slotProps)"
|
||||
>
|
||||
<AIcon type="PlusCircleOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `是否删除该菜单`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,134 +6,136 @@
|
|||
target="system-permission"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getPermission_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'id', order: 'asc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog(undefined)"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<j-upload
|
||||
name="file"
|
||||
action="#"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="table.clickImport"
|
||||
:disabled="
|
||||
!hasPermission(
|
||||
`${permission}:import`,
|
||||
)
|
||||
"
|
||||
>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:import`"
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getPermission_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'id', order: 'asc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog(undefined)"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<j-upload
|
||||
name="file"
|
||||
action="#"
|
||||
accept=".json"
|
||||
:showUploadList="false"
|
||||
:before-upload="table.clickImport"
|
||||
:disabled="
|
||||
!hasPermission(
|
||||
`${permission}:import`,
|
||||
)
|
||||
"
|
||||
>
|
||||
导入
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:import`"
|
||||
>
|
||||
导入
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:export`"
|
||||
:popConfirm="{
|
||||
title: `确认导出？`,
|
||||
onConfirm: () =>
|
||||
table.clickExport(),
|
||||
}"
|
||||
>
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-upload>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:export`"
|
||||
:popConfirm="{
|
||||
title: `确认导出？`,
|
||||
onConfirm: () =>
|
||||
table.clickExport(),
|
||||
}"
|
||||
>
|
||||
导出
|
||||
</PermissionButton>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '启用' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '启用' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确定要${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`,
|
||||
onConfirm: () => table.changeStatus(slotProps),
|
||||
}"
|
||||
:tooltip="{
|
||||
title: slotProps.status ? '禁用' : '启用',
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
slotProps.status
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确定要${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`,
|
||||
onConfirm: () =>
|
||||
table.changeStatus(slotProps),
|
||||
}"
|
||||
:tooltip="{
|
||||
title: slotProps.status ? '禁用' : '启用',
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
slotProps.status
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: slotProps.status
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: slotProps.status
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<EditDialog
|
||||
v-if="dialog.visible"
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@ import {
|
|||
} from '@/api/system/apiPage';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { modeType } from '../typing';
|
||||
import { useDepartmentStore } from '@/store/department';
|
||||
|
||||
const department = useDepartmentStore();
|
||||
const emits = defineEmits([
|
||||
'refresh',
|
||||
'update:clickApi',
|
||||
|
|
@ -64,11 +67,6 @@ const columns = [
|
|||
dataIndex: 'summary',
|
||||
key: 'summary',
|
||||
},
|
||||
// {
|
||||
// title: 'ID',
|
||||
// dataIndex: 'id',
|
||||
// key: 'id',
|
||||
// },
|
||||
];
|
||||
const rowSelection = {
|
||||
// onSelect: (record: any) => {
|
||||
|
|
@ -95,7 +93,7 @@ const rowSelection = {
|
|||
props.sourceKeys.includes(key),
|
||||
);
|
||||
// 除当前表格之外, 勾选上的数据
|
||||
const otherSelectedKeys = props.sourceKeys.filter(
|
||||
const otherSelectedKeys = department.crossPageKeys.filter(
|
||||
(key) => !currenTableKeys.includes(key),
|
||||
);
|
||||
|
||||
|
|
@ -103,6 +101,7 @@ const rowSelection = {
|
|||
const removeKeys = oldSelectedKeys.filter((key) => !keys.includes(key));
|
||||
// 新增选择的项
|
||||
const addKeys = keys.filter((key) => !oldSelectedKeys.includes(key));
|
||||
// 缓存当前表格和其他表格改变的数据
|
||||
emits('update:selectedRowKeys', [...otherSelectedKeys, ...keys]);
|
||||
|
||||
// 新增选中/取消选中的数据
|
||||
|
|
@ -111,37 +110,21 @@ const rowSelection = {
|
|||
changed[key] = props.tableData.find((f: any) => f.id === key);
|
||||
});
|
||||
if (props.mode === 'appManger') {
|
||||
emits('update:changedApis', changed);
|
||||
// 缓存当前表格和其他表格改变的数据
|
||||
emits('update:changedApis', {
|
||||
...department.changedApis,
|
||||
...changed,
|
||||
});
|
||||
}
|
||||
},
|
||||
selectedRowKeys: ref<string[]>([]),
|
||||
};
|
||||
const save = async () => {
|
||||
// fix: #bug10828
|
||||
// 当前节点表格数据id
|
||||
// const currenTableKeys = props.tableData.map((m: any) => m.id);
|
||||
// // 当前表格选中的id
|
||||
// const currentSelectedKeys = rowSelection.selectedRowKeys.value.filter(
|
||||
// (key: string) => currenTableKeys.includes(key),
|
||||
// );
|
||||
// // 当前表格, 原有选中的id
|
||||
// const oldSelectedKeys = currenTableKeys.filter((key) =>
|
||||
// props.sourceKeys.includes(key),
|
||||
// );
|
||||
|
||||
const keys = props.selectedRowKeys;
|
||||
// 移除的key
|
||||
const removeKeys = props.sourceKeys.filter((key) => !keys.includes(key));
|
||||
// 新选中的key
|
||||
const addKeys = keys.filter((key) => !props.sourceKeys.includes(key));
|
||||
// console.log('addKeys: ', addKeys);
|
||||
// console.log('removeKeys: ', removeKeys);
|
||||
// 取消选择的数据项
|
||||
// const removeKeys = oldSelectedKeys.filter(
|
||||
// (key) => !currentSelectedKeys.includes(key),
|
||||
// );
|
||||
// // 新增选择的项
|
||||
// const addKeys = currentSelectedKeys.filter(
|
||||
// (key) => !oldSelectedKeys.includes(key),
|
||||
// );
|
||||
|
||||
if (props.mode === 'api') {
|
||||
// 此时是api配置
|
||||
|
|
@ -163,14 +146,10 @@ const save = async () => {
|
|||
const removeItems = removeKeys.map((key) => ({
|
||||
id: key,
|
||||
permissions: props.changedApis[key]?.security,
|
||||
// permissions: props.tableData.find((f: any) => f.id === key)
|
||||
// ?.security,
|
||||
}));
|
||||
const addItems = addKeys.map((key) => ({
|
||||
id: key,
|
||||
permissions: props.changedApis[key]?.security,
|
||||
// permissions: props.tableData.find((f: any) => f.id === key)
|
||||
// ?.security,
|
||||
}));
|
||||
Promise.all([
|
||||
updateOperations_api(code, '_delete', { operations: removeItems }),
|
||||
|
|
|
|||
|
|
@ -76,6 +76,9 @@ import LeftTree from './components/LeftTree.vue';
|
|||
import ChooseApi from './components/ChooseApi.vue';
|
||||
import ApiDoes from './components/ApiDoes.vue';
|
||||
import ApiTest from './components/ApiTest.vue';
|
||||
import { useDepartmentStore } from '@/store/department';
|
||||
|
||||
const department = useDepartmentStore();
|
||||
|
||||
const props = defineProps<{
|
||||
mode: modeType;
|
||||
|
|
@ -157,12 +160,20 @@ function getSelectKeys() {
|
|||
}
|
||||
}
|
||||
|
||||
// watch(
|
||||
// () => changedApis.value,
|
||||
// (val: any) => {
|
||||
// console.log('changedApis: ', val);
|
||||
// },
|
||||
// );
|
||||
watch(
|
||||
() => selectedKeys.value,
|
||||
(val: any) => {
|
||||
// console.log('selectedKeys: ', val);
|
||||
department.setSelectedKeys(val);
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => changedApis.value,
|
||||
(val: any) => {
|
||||
// console.log('changedApis: ', val);
|
||||
department.setChangedApis(val);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -6,60 +6,61 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getRelationshipList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog(undefined)"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getRelationshipList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="table.openDialog(undefined)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
|
||||
<PermissionButton
|
||||
:danger="true"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<PermissionButton
|
||||
:danger="true"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
type="link"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<EditDialog
|
||||
v-if="dialog.visible"
|
||||
|
|
|
|||
|
|
@ -6,65 +6,66 @@
|
|||
target="category"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getRoleList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [
|
||||
{ name: 'createTime', order: 'desc' },
|
||||
{ name: 'id', order: 'desc' },
|
||||
],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="dialogVisible = true"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getRoleList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [
|
||||
{ name: 'createTime', order: 'desc' },
|
||||
{ name: 'id', order: 'desc' },
|
||||
],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="
|
||||
jumpPage(`system/Role/Detail`, {
|
||||
id: slotProps.id,
|
||||
})
|
||||
"
|
||||
type="primary"
|
||||
:hasPermission="`${permission}:add`"
|
||||
@click="dialogVisible = true"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确定要删除吗`,
|
||||
onConfirm: () => clickDel(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</template>
|
||||
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="
|
||||
jumpPage(`system/Role/Detail`, {
|
||||
id: slotProps.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{ title: '删除' }"
|
||||
:popConfirm="{
|
||||
title: `确定要删除吗`,
|
||||
onConfirm: () => clickDel(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,106 +6,111 @@
|
|||
target="category"
|
||||
@search="handleParams"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getUserList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="primary"
|
||||
@click="table.openDialog('add')"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps.type.name }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<FullPage>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getUserList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:defaultParams="{
|
||||
pageSize: 10,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog('edit', slotProps)"
|
||||
:hasPermission="`${permission}:add`"
|
||||
type="primary"
|
||||
@click="table.openDialog('add')"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: `${slotProps.status ? '禁用' : '启用'}`,
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
{{ slotProps.type.name }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '正常' : '禁用'"
|
||||
:statusNames="{
|
||||
1: 'success',
|
||||
0: 'error',
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确定${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`,
|
||||
onConfirm: () => table.changeStatus(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
slotProps.status
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '重置密码',
|
||||
}"
|
||||
@click="table.openDialog('reset', slotProps)"
|
||||
>
|
||||
<AIcon type="icon-zhongzhimima" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{
|
||||
title: slotProps.status
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () => table.clickDel(slotProps.id),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog('edit', slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:action`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: `${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}`,
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确定${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`,
|
||||
onConfirm: () =>
|
||||
table.changeStatus(slotProps),
|
||||
}"
|
||||
>
|
||||
<AIcon
|
||||
:type="
|
||||
slotProps.status
|
||||
? 'StopOutlined'
|
||||
: 'PlayCircleOutlined'
|
||||
"
|
||||
/>
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
:hasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '重置密码',
|
||||
}"
|
||||
@click="table.openDialog('reset', slotProps)"
|
||||
>
|
||||
<AIcon type="icon-zhongzhimima" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:hasPermission="`${permission}:delete`"
|
||||
:tooltip="{
|
||||
title: slotProps.status
|
||||
? '请先禁用，再删除'
|
||||
: '删除',
|
||||
}"
|
||||
:popConfirm="{
|
||||
title: `确认删除`,
|
||||
onConfirm: () =>
|
||||
table.clickDel(slotProps.id),
|
||||
}"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</FullPage>
|
||||
|
||||
<EditUserDialog
|
||||
v-if="dialog.visible"
|
||||
|
|
@ -263,22 +268,21 @@ type dictType = {
|
|||
};
|
||||
type modalType = '' | 'add' | 'edit' | 'reset';
|
||||
|
||||
const handleParams = (params: any)=> {
|
||||
|
||||
const newParams = (params?.terms as any[])?.map(item1 => {
|
||||
item1.terms = item1.terms.map((item2: any) => {
|
||||
if (['telephone', 'email'].includes(item2.column)) {
|
||||
return {
|
||||
column: 'id$user-detail',
|
||||
value: [item2]
|
||||
}
|
||||
}
|
||||
return item2
|
||||
})
|
||||
return item1
|
||||
})
|
||||
queryParams.value = { terms: newParams || [] }
|
||||
}
|
||||
const handleParams = (params: any) => {
|
||||
const newParams = (params?.terms as any[])?.map((item1) => {
|
||||
item1.terms = item1.terms.map((item2: any) => {
|
||||
if (['telephone', 'email'].includes(item2.column)) {
|
||||
return {
|
||||
column: 'id$user-detail',
|
||||
value: [item2],
|
||||
};
|
||||
}
|
||||
return item2;
|
||||
});
|
||||
return item1;
|
||||
});
|
||||
queryParams.value = { terms: newParams || [] };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue