fix: 边缘端映射

src/views/device/Instance/Detail/EdgeMap/MSelect.vue

@@ -1,21 +1,25 @@
 <template>
-    <j-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
+    <j-select
+        allowClear
+        v-model:value="_value"
+        @change="onChange"
+        placeholder="请选择"
+        style="width: 100%"
+    >
         <j-select-option
             v-for="item in list"
+            v-bind="item"
             :key="item.id"
             :value="item.id"
             :label="item.name"
-            :filter-option="filterOption"
+            showSearch
             >{{ item.name }}</j-select-option
         >
     </j-select>
 </template>
 
 <script lang="ts" setup>
-import {
+import queryDataList from './utils';
-    edgeCollector,
-    edgePoint,
-} from '@/api/device/instance';
 
 const _props = defineProps({
     modelValue: {
@@ -33,15 +37,17 @@ const _props = defineProps({
     edgeId: {
         type: String,
         default: '',
-    }
+    },
+    provider: {
+        type: String,
+        default: '',
+    },
 });
 
-const filterOption = (input: string, option: any) => {
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-};
-
 type Emits = {
     (e: 'update:modelValue', data: string | undefined): void;
+    (e: 'update:provider', data: string | undefined): void;
+    (e: 'change', data: string | undefined): void;
 };
 const emit = defineEmits<Emits>();
 
@@ -52,64 +58,16 @@ watchEffect(() => {
     _value.value = _props.modelValue;
 });
 
-const onChange = (_val: string) => {
+const onChange = (_val: string, _options: any) => {
     emit('update:modelValue', _val);
-};
+    emit('update:provider', _options?.provider);
-
+    emit('change', _val);
-const getCollector = async (_val: string) => {
-    if (!_val) {
-        return [];
-    } else {
-        const resp = await edgeCollector(_props.edgeId, {
-            terms: [
-                {
-                    terms: [
-                        {
-                            column: 'channelId',
-                            value: _val,
-                        },
-                    ],
-                },
-            ],
-        });
-        if (resp.status === 200) {
-            list.value = (resp.result as any[])?.[0] || []
-        }
-    }
-};
-
-const getPoint = async (_val: string) => {
-    if (!_val) {
-        return [];
-    } else {
-        const resp = await edgePoint(_props.edgeId, {
-            terms: [
-                {
-                    terms: [
-                        {
-                            column: 'collectorId',
-                            value: _val,
-                        },
-                    ],
-                },
-            ],
-        });
-        if (resp.status === 200) {
-            list.value = (resp.result as any[])?.[0] || []
-        }
-    }
 };
 
 watchEffect(() => {
-    if (_props.id) {
+    queryDataList(_props.id, _props.edgeId, _props.type).then((_data: any) => {
-        if (_props.type === 'POINT') {
+        list.value = _data;
-            getPoint(_props.id);
+    });
-        } else {
-            getCollector(_props.id);
-        }
-    } else {
-        list.value = [];
-    }
 });
 </script>
 

src/views/device/Instance/Detail/EdgeMap/index.vue

@@ -31,7 +31,9 @@
                                     v-model:value="record[column.dataIndex]"
                                     placeholder="请选择"
                                     allowClear
-                                    :filter-option="filterOption"
+                                    @change="
+                                        () => onChannelChange(index, 'channel')
+                                    "
                                 >
                                     <j-select-option
                                         v-for="item in channelList"
@@ -58,6 +60,10 @@
                                     :id="record.channelId"
                                     type="COLLECTOR"
                                     :edgeId="instanceStore.current.parentId"
+                                    v-model:provider="record.provider"
+                                    @change="
+                                        onChannelChange(index, 'collector')
+                                    "
                                 />
                             </j-form-item>
                         </template>
@@ -80,61 +86,84 @@
                             </j-form-item>
                         </template>
                         <template v-if="column.dataIndex === 'id'">
-                            <j-badge
+                            <template v-if="record[column.dataIndex]">
-                                v-if="record[column.dataIndex]"
+                                <j-badge
-                                status="success"
+                                    v-if="record.state.value === 'enabled'"
-                                text="已绑定"
+                                    status="success"
-                            />
+                                    text="在线"
+                                />
+                                <j-badge
+                                    v-else
+                                    status="warning"
+                                    text="离线"
+                                />
+                            </template>
                             <j-badge v-else status="error" text="未绑定" />
                         </template>
                         <template v-if="column.key === 'action'">
                             <j-space>
-                                <PermissionButton
+                                <j-tooltip
-                                    type="link"
+                                    :title="
-                                    :disabled="!record.id"
+                                        isPermission
-                                    :popConfirm="{
+                                            ? '解绑'
-                                        title: '确认解绑？',
+                                            : '暂无权限，请联系管理员'
-                                        onConfirm: unbind(record.id),
+                                    "
-                                    }"
-                                    style="padding: 0 5px"
-                                    hasPermission="device/Instance:update"
-                                    :tooltip="{
-                                        title: '解绑',
-                                    }"
                                 >
-                                    <AIcon type="icon-jiebang" />
+                                    <j-popconfirm
-                                </PermissionButton>
+                                        title="确认解绑？"
+                                        :disabled="!record.id || !isPermission"
+                                        @confirm="unbind(record.id)"
+                                    >
+                                        <j-button
+                                            type="link"
+                                            :disabled="
+                                                !record.id || !isPermission
+                                            "
+                                            style="padding: 0 5px"
+                                        >
+                                            <AIcon type="icon-jiebang" />
+                                        </j-button>
+                                    </j-popconfirm>
+                                </j-tooltip>
                                 <template v-if="record.id">
-                                    <PermissionButton
+                                    <j-tooltip
-                                        type="link"
+                                        :title="
-                                        :disabled="!record.id"
+                                            isPermission
-                                        style="padding: 0 5px"
+                                                ? record.state.value ===
-                                        :popConfirm="{
+                                                  'enabled'
-                                            title:
+                                                    ? '禁用'
+                                                    : '启用'
+                                                : '暂无权限，请联系管理员'
+                                        "
+                                    >
+                                        <j-popconfirm
+                                            :title="
                                                 record.state.value === 'enabled'
                                                     ? '确认禁用？'
-                                                    : '确认启用?',
+                                                    : '确认启用?'
-                                            onConfirm: onAction(record),
-                                        }"
-                                        hasPermission="device/Instance:update"
-                                        :tooltip="{
-                                            title:
-                                                record.state.value === 'enabled'
-                                                    ? '禁用'
-                                                    : '启用',
-                                        }"
-                                    >
-                                        <AIcon
-                                            v-if="
-                                                record.state.value === 'enabled'
                                             "
-                                            type="StopOutlined"
+                                            :disabled="!isPermission"
-                                        />
+                                            @confirm="onAction(record)"
-                                        <AIcon
+                                        >
-                                            v-else
+                                            <j-button
-                                            type="PlayCircleOutlined"
+                                                type="link"
-                                        />
+                                                style="padding: 0 5px"
-                                    </PermissionButton>
+                                                :disabled="!isPermission"
+                                            >
+                                                <AIcon
+                                                    v-if="
+                                                        record.state.value ===
+                                                        'enabled'
+                                                    "
+                                                    type="StopOutlined"
+                                                />
+                                                <AIcon
+                                                    v-else
+                                                    type="PlayCircleOutlined"
+                                                />
+                                            </j-button>
+                                        </j-popconfirm>
+                                    </j-tooltip>
                                 </template>
                             </j-space>
                         </template>
@@ -142,10 +171,10 @@
                 </j-table>
                 <div class="pagination">
                     <j-pagination
-                        @change="onPageChange"
                         v-model:pageSize="pageSize"
                         v-model:current="current"
                         :total="metadata?.properties?.length || 0"
+                        @change="onPageChange"
                     />
                 </div>
             </j-form>
@@ -175,6 +204,8 @@ import {
 import MSelect from './MSelect.vue';
 import PatchMapping from './PatchMapping.vue';
 import { onlyMessage } from '@/utils/comm';
+import { cloneDeep } from 'lodash-es';
+import { usePermissionStore } from '@/store/permission';
 
 const columns = [
     {
@@ -214,19 +245,22 @@ const columns = [
     },
 ];
 
-const current = ref<number>(1);
+const permissionStore = usePermissionStore();
-const pageSize = ref<number>(10);
 
-const filterOption = (input: string, option: any) => {
+const isPermission = permissionStore.hasPermission('device/Instance:update');
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+
-};
+const current = ref<number>(0);
+const pageSize = ref<number>(10);
 
 const instanceStore = useInstanceStore();
 const metadata = JSON.parse(instanceStore.current?.metadata || '{}');
 const loading = ref<boolean>(false);
 const channelList = ref<any[]>([]);
 
-const _properties = ref<any[]>([]);
+const _properties = computed(() => {
+    const _cur = current.value >= 1 ? current.value : 1;
+    return metadata.properties.slice((_cur - 1) * 10, _cur * 10);
+});
 
 const modelRef = reactive<{
     dataSource: any[];
@@ -250,18 +284,9 @@ const getChannel = async () => {
     }
 };
 
-const queryData = (cur: number) => {
+const handleSearch = async (_array: any[]) => {
-    _properties.value = metadata.properties.slice(
-        (cur > 0 ? cur - 1 : 0) * 10,
-        cur * 10,
-    );
-    handleSearch(_properties.value)
-};
-
-const handleSearch = async (array: any[]) => {
     loading.value = true;
-    getChannel();
+    const _metadata: any[] = _array.map((item: any) => ({
-    const _metadata: any[] = array.map((item: any) => ({
         metadataId: item.id,
         metadataName: `${item.name}(${item.id})`,
         metadataType: 'property',
@@ -297,11 +322,12 @@ const handleSearch = async (array: any[]) => {
 };
 
 const unbind = async (id: string) => {
-    if (id) {
+    const _deviceId = instanceStore.current.id;
+    if (id && _deviceId) {
         const resp = await removeEdgeMap(
             instanceStore.current?.parentId || '',
             {
-                deviceId: instanceStore.current.id,
+                deviceId: _deviceId,
                 idList: [id],
             },
         );
@@ -314,22 +340,31 @@ const unbind = async (id: string) => {
 
 const onPatchBind = () => {
     visible.value = false;
-    handleSearch(_properties.value);
+    onRefresh();
 };
 
-const onPageChange = (page: any) => {
+const onChannelChange = (_index: number, type: 'collector' | 'channel') => {
-    queryData(page)
+    if (type === 'channel') {
+        modelRef.dataSource[_index].collectorId = undefined;
+        modelRef.dataSource[_index].pointId = undefined;
+    } else {
+        modelRef.dataSource[_index].pointId = undefined;
+    }
 };
 
 onMounted(() => {
-    _properties.value = metadata.properties.slice(0, 10);
+    getChannel();
     handleSearch(_properties.value);
 });
 
+const onPageChange = () => {
+    handleSearch(_properties.value);
+};
+
 const onSave = () => {
     formRef.value
         .validate()
-        .then(async () => {
+        .then(async (_data: any) => {
             const arr = toRaw(modelRef).dataSource.filter(
                 (i: any) => i.channelId,
             );
@@ -345,7 +380,7 @@ const onSave = () => {
                 );
                 if (resp.status === 200) {
                     onlyMessage('操作成功！', 'success');
-                    handleSearch(_properties.value);
+                    onRefresh();
                 }
             }
         })
@@ -355,8 +390,9 @@ const onSave = () => {
 };
 
 const onAction = async (record: any) => {
-    const value = await formRef.value.validate();
+    const array = (modelRef.dataSource || [])?.filter(
-    const array = value.filter((item: any) => item.channelId);
+        (item: any) => item.channelId,
+    );
     const findArray = array.find((item: any) => item.id === record?.id);
     const arr = {
         ...findArray,
@@ -374,9 +410,42 @@ const onAction = async (record: any) => {
     );
     if (resp.status === 200) {
         onlyMessage('操作成功！', 'success');
-        handleSearch(_properties.value);
+        onRefresh();
     }
 };
+
+const onRefresh = async () => {
+    loading.value = true;
+    if (modelRef.dataSource && modelRef.dataSource.length) {
+        const resp: any = await getEdgeMap(
+            instanceStore.current?.parentId || '',
+            {
+                deviceId: instanceStore.current.id,
+                query: {},
+            },
+        ).catch(() => {
+            loading.value = false;
+        });
+        if (resp.status === 200) {
+            const arr = cloneDeep(modelRef.dataSource);
+            const array = resp.result?.[0].map((x: any) => {
+                const _item = arr.find(
+                    (item: any) => item.metadataId === x.metadataId,
+                );
+                if (_item) {
+                    return {
+                        ..._item,
+                        ...x,
+                    };
+                } else {
+                    return x;
+                }
+            });
+            modelRef.dataSource = array;
+        }
+    }
+    loading.value = false;
+};
 </script>
 
 <style lang="less" scoped>

src/views/device/Instance/Detail/EdgeMap/utils.ts

@@ -0,0 +1,48 @@
+import { edgeCollector, edgePoint } from "@/api/device/instance";
+
+const channelMap = new Map()
+const queryDataList = (_val: string, edgeId: string, type: string) => new Promise(async (resolve) => {
+    if (!_val || !edgeId || !type) {
+        resolve([])
+    } else {
+        if (channelMap.get(_val)) {
+            resolve(channelMap.get(_val))
+        } else {
+            let resp = undefined
+            if (type === 'POINT') {
+                resp = await edgePoint(edgeId, {
+                    terms: [
+                        {
+                            terms: [
+                                {
+                                    column: 'collectorId',
+                                    value: _val,
+                                },
+                            ],
+                        },
+                    ],
+                });
+            } else {
+                resp = await edgeCollector(edgeId, {
+                    terms: [
+                        {
+                            terms: [
+                                {
+                                    column: 'channelId',
+                                    value: _val,
+                                },
+                            ],
+                        },
+                    ],
+                });
+            }
+            if (resp && resp.status === 200) {
+                const _data = (resp.result as any[])?.[0] || []
+                channelMap.set(_val, _data)
+                resolve(_data)
+            }
+        }
+    }
+})
+
+export default queryDataList

src/views/device/Instance/index.vue

@@ -308,8 +308,8 @@ import dayjs from 'dayjs';
 import BadgeStatus from '@/components/BadgeStatus/index.vue';
 import BatchDropdown from '@/components/BatchDropdown/index.vue';
 import { BatchActionsType } from '@/components/BatchDropdown/types';
-import {useRouterParams} from "@/utils/hooks/useParams";
+import { useRouterParams } from '@/utils/hooks/useParams';
-import { accessConfigTypeFilter } from '@/utils/setting'
+import { accessConfigTypeFilter } from '@/utils/setting';
 
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
@@ -322,22 +322,22 @@ const operationVisible = ref<boolean>(false);
 const api = ref<string>('');
 const type = ref<string>('');
 const isCheck = ref<boolean>(false);
-const routerParams = useRouterParams()
+const routerParams = useRouterParams();
 const menuStory = useMenuStore();
 
 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 = [
     {
@@ -412,7 +412,7 @@ const columns = [
         hideInTable: true,
         search: {
             type: 'treeSelect',
-            rename: 'productId$product-info',
+            // rename: 'productId$product-info',
             options: () =>
                 new Promise((resolve) => {
                     queryTree({ paging: false }).then((resp: any) => {
@@ -429,22 +429,24 @@ const columns = [
         hideInTable: true,
         search: {
             type: 'select',
-            rename: 'productId$product-info',
+            // rename: 'productId$product-info',
             options: () =>
                 new Promise((resolve) => {
                     getProviders().then((resp: any) => {
-                      const data = resp.result || []
+                        const data = resp.result || [];
-                      resolve(accessConfigTypeFilter(data).map(item => ({
+                        resolve(
-                        ...item,
+                            accessConfigTypeFilter(data).map((item) => ({
-                        value: `accessProvider is ${item.id}`
+                                ...item,
-                      })))
+                                value: `accessProvider is ${item.id}`,
+                            })),
+                        );
                     });
                 }),
         },
     },
     {
-        key: 'productId$product-info',
+        key: 'accessId',
-        dataIndex: 'productId$product-info',
+        dataIndex: 'accessId',
         title: '接入方式',
         hideInTable: true,
         search: {
@@ -728,9 +730,9 @@ const syncDeviceStatus = () => {
 };
 
 const delSelectedDevice = async () => {
-    if(!_selectedRowKeys.value.length){
+    if (!_selectedRowKeys.value.length) {
-        message.error('请选择设备')
+        message.error('请选择设备');
-        return
+        return;
     }
     const resp = await batchDeleteDevice(_selectedRowKeys.value);
     if (resp.status === 200) {
@@ -754,9 +756,9 @@ const delSelectedDevice = async () => {
 // };
 
 const disabledSelectedDevice = async () => {
-    if(!_selectedRowKeys.value.length){
+    if (!_selectedRowKeys.value.length) {
-        message.error('请选择设备')
+        message.error('请选择设备');
-        return
+        return;
     }
     const resp = await batchUndeployDevice(_selectedRowKeys.value);
     if (resp.status === 200) {
@@ -842,7 +844,7 @@ const batchActions: BatchActionsType[] = [
             popConfirm: {
                 title: '确认禁用选中设备?',
                 onConfirm: disabledSelectedDevice,
-            }
+            },
         },
     },
 ];
@@ -853,7 +855,25 @@ const saveBtn = () => {
 };
 
 const handleSearch = (_params: any) => {
-    params.value = _params;
+    // params.value = _params;
+    const newParams = (_params?.terms as any[])?.map((item1) => {
+        item1.terms = item1.terms.map((item2: any) => {
+            if (
+                item2.column &&
+                ['classifiedId', 'accessId', 'accessProvider'].includes(
+                    item2.column,
+                )
+            ) {
+                return {
+                    ...item2,
+                    column: 'productId$product-info'
+                };
+            }
+            return item2;
+        });
+        return item1;
+    });
+    params.value = { terms: newParams || [] };
 };
 
 const onRefresh = () => {

src/views/media/Device/Save/SaveProduct.vue

@@ -70,9 +70,14 @@
                 <div class="gateway-box">
                     <div v-if="!gatewayList.length">
                         暂无数据，请先
-                        <j-button type="link">
+                        <PermissionButton
-                            添加{{ providerType[props.channel] }} 接入网关
+                            type="link"
-                        </j-button>
+                            style="padding: 0"
+                            hasPermission="link/AccessConfig:add"
+                            @click="onJump"
+                        >
+                            添加{{ providerType[props.channel] }}接入网关
+                        </PermissionButton>
                     </div>
                     <div
                         class="gateway-item"
@@ -156,6 +161,9 @@ import DeviceApi from '@/api/media/device';
 import { getImage } from '@/utils/comm';
 import { gatewayType } from '@/views/media/Device/typings';
 import { providerType } from '../const';
+import { useMenuStore } from '@/store/menu';
+
+const menuStory = useMenuStore();
 
 type Emits = {
     (e: 'update:visible', data: boolean): void;
@@ -234,8 +242,8 @@ watch(
         if (val) {
             getGatewayList();
         } else {
-            _selectedRowKeys.value = []
+            _selectedRowKeys.value = [];
-            extendFormItem.value = []
+            extendFormItem.value = [];
             emit('close');
         }
     },
@@ -290,6 +298,14 @@ const handleCancel = () => {
     _vis.value = false;
     formRef.value.resetFields();
 };
+
+const onJump = () => {
+    menuStory.jumpPage(
+        `link/AccessConfig/Detail`,
+        { id: ':id' },
+        { view: false },
+    );
+}
 </script>
 
 <style lang="less" scoped>

src/views/rule-engine/Scene/Save/action/Notify/variableItem/User.vue

@@ -43,6 +43,8 @@
                 :multiple="true"
                 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                 :value="relationData"
+                showSearch
+                treeNodeFilterProp="title"
             >
                 <template #title="{ key, username, title }">
                     <div
@@ -69,6 +71,8 @@
                 :tree-data="treeData"
                 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                 :value="relationData"
+                showSearch
+                treeNodeFilterProp="title"
             >
                 <template #title="{ key, username, title }">
                     <div
@@ -110,6 +114,7 @@
                 placeholder="请输入收件人邮箱,多个收件人用换行分隔"
                 :value="value?.value"
                 mode="tags"
+                max-tag-count="responsive"
                 @change="
                     (val) =>
                         onChange(