fix: bind data source use new fetch api

ww
1 parent b7006e3e
Showing 2 changed files with 152 additions and 126 deletions
src/main/webapp/js/api/index.js
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/api/index.js
View file @e027bfd
+++ b/src/main/webapp/js/api/index.js
View file @e027bfd
@@ -181,4 +181,32 @@ class ConfigurationNodeApi {
     static getDeviceAttribute(deviceProfileId, dataType) {
         return defHttp.get(`/yt/device/attributes/${deviceProfileId}`, { params: { dataType } })
     }
+
+    /**
+     * @description 获取产品
+     * @param {string} deviceType 
+     * @returns 
+     */
+    static getProduct(deviceType) {
+        return defHttp.get('/yt/device_profile/me/list', { params: { deviceType } })
+    }
+
+    /**
+     * @description 获取满足条件的设备
+     * @param {{deviceLabel: string, deviceProfileId: string, deviceType: string, organizationId: string }} params 
+     * @returns 
+     */
+    static getMeetConditionsDevice(params = {}) {
+        const { deviceLabel, deviceProfileId, deviceType, organizationId } = params
+        return defHttp.get('/yt/device/list', { params: { deviceLabel, deviceProfileId, deviceType, organizationId } })
+    }
+
+    /**
+     * @description 获取字典值
+     * @param {string} dictCode 
+     * @returns 
+     */
+    static getDictionaryValue(dictCode) {
+        return defHttp.post('/yt/dict_item/find', {dictCode})
+    }
 }
--- a/src/main/webapp/js/grapheditor/Format.js
View file @e027bfd
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @e027bfd
@@ -4952,12 +4952,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     let treeList = []
     /**
-     * @description 当前选中的组织树节点
-     * @type {null | string}
-     */
-    let currentCheckedOrgNode = null
-
-    /**
      * @description 当前节点绑定数据
      * @type {null | {act: [], event: [], dataSources: []}}
      */
@@ -5067,7 +5061,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         SLAVE_DEVICE_ID: 'slaveDeviceId',
         ATTR: 'attr',
         GATEWAY: 'GATEWAY',
-        ADDITIONAL: 'additional'
+        ADDITIONAL: 'additional',
+        DEVICE_PROFILE_ID: 'deviceProfileId',
+        DEVICE_TYPE: 'deviceType'
     }
     /**
@@ -5078,7 +5074,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
     /**
      * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写
-     * @return  {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
+     * @return  {{orgId: string, attr: string, deviceId: string, deviceType: string, deviceProfileId: string}}
      */
     function getDataSourceBindValue() {
@@ -5236,7 +5232,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         async function mount() {
-            const { component, echoDataSource, getValue } = generateDataSourceComponent({ validate: false })
+            const { component, echoDataSource, getValue } = generateDataSourceComponent({ validate: true })
             $(fragment).append(title).append(component)
             $(container).append(fragment)
@@ -5938,7 +5934,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const type = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
         return renderMapping[type]?.(field) || {}
-        function getSubmitValue(field) {
+        function getSubmitValue(field) { 
             const ENABLED_FLAG = 'on'
             const additionalKey = HandleDataSource.enumConst
             const value = {
@@ -5950,7 +5946,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 [enumCategory.DATA_SOURCE]: {
                     [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
                     [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
-                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
+                    [enumDataSourceConst.DEVICE_TYPE]: field[enumDataSourceConst.DEVICE_TYPE],
+                    [enumDataSourceConst.DEVICE_PROFILE_ID]: field[enumDataSourceConst.DEVICE_PROFILE_ID],
                     [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
                     [enumDataSourceConst.ADDITIONAL]: field[additionalKey.DATA_TYPE] ? {
                         [additionalKey.AGG]: field[additionalKey.AGG],
@@ -5994,7 +5991,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 [enumCategory.DATA_SOURCE]: {
                     [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
                     [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
-                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
+                    [enumDataSourceConst.DEVICE_TYPE]: field[enumDataSourceConst.DEVICE_TYPE],
+                    [enumDataSourceConst.DEVICE_PROFILE_ID]: field[enumDataSourceConst.DEVICE_PROFILE_ID],
                     [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
                     [enumDataSourceConst.ADDITIONAL]: {
                         [additionalKey.ORG_NAME]: field[additionalKey.ORG_NAME],
@@ -7765,13 +7763,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const enumDataSourceConst = {
             ORG_ID: 'orgId',
+            DEVICE_TYPE: 'deviceType',
+            DEVICE_PROFILE_ID: 'deviceProfileId',
             DEVICE_ID: 'deviceId',
-            SLAVE_DEVICE_ID: 'slaveDeviceId',
             ATTR: 'attr',
             GATEWAY: 'GATEWAY',
             ORG_NAME: 'orgName',
             DEVICE_NAME: 'deviceName',
-            SLAVE_DEVICE_NAME: 'slaveDeviceName',
             ATTR_NAME: 'attrName'
         }
@@ -7782,10 +7780,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         let deviceList = []
         /**
-        * @description
-        * @type {{id: string, deviceType: string, name: string, deviceProfileId: string}[]}
-        */
-        let slaveDeviceList = []
+         * @descrition
+         * @type {{deviceProfileId: string, id: string, organizationId: string, deviceType: string}}
+         */
+        let currentDataSource = {}
         const component = document.createElement('div')
@@ -7799,13 +7797,66 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         init()
         function init() {
-            generatorOrgTres()
+            generateDeviceTypeSelect()
+            generateProductSelect()
+            generatorOrgTrees()
             generatorDeviceSelect()
-            generatorSlaveDevice()
             generatorAttrSelect()
             generateDeviceNameInput()
         }
+        function generateDeviceTypeSelect() {
+            getDeviceType()
+
+            const deviceType = UseLayUi.createSelect({
+                label: '设备类型',
+                bindValueFiled: enumDataSourceConst.DEVICE_TYPE,
+                layFilter: `${componentFilter}--${enumDataSourceConst.DEVICE_TYPE}`,
+                className: 'data-source__component-select',
+                ...validateRule,
+                onClick(data) {
+                    const { value } = data
+                    form.val(componentFilter, {
+                        [enumDataSourceConst.DEVICE_PROFILE_ID]: null,
+                        [enumDataSourceConst.DEVICE_ID]: null,
+                        [enumDataSourceConst.DEVICE_NAME]: null,
+                        [enumDataSourceConst.DEVICE_ID]: null,
+                        [enumDataSourceConst.ATTR]: null,
+                        [enumDataSourceConst.ATTR_NAME]: null,
+                        [enumDataSourceConst.ORG_ID]: null
+                    })
+
+                    currentDataSource[enumDataSourceConst.DEVICE_TYPE] = value
+                    getMeetConditionsDevice(currentDataSource)
+                    getProduct(value)
+                },
+            })
+            $(component).append(deviceType)
+        }
+
+        function generateProductSelect() {
+            const productSelect = UseLayUi.createSelect({
+                label: '产品',
+                bindValueFiled: enumDataSourceConst.DEVICE_PROFILE_ID,
+                layFilter: `${componentFilter}--${enumDataSourceConst.DEVICE_PROFILE_ID}`,
+                className: 'data-source__component-select',
+                ...validateRule,
+                onClick(data) {
+                    const { value } = data
+                    form.val(componentFilter, {
+                        [enumDataSourceConst.DEVICE_NAME]: null,
+                        [enumDataSourceConst.DEVICE_ID]: null,
+                        [enumDataSourceConst.ATTR]: null,
+                        [enumDataSourceConst.ATTR_NAME]: null,
+                    })
+                    currentDataSource[enumDataSourceConst.DEVICE_PROFILE_ID] = value
+                    getMeetConditionsDevice(currentDataSource)
+                    getAttrByDeviceId(value)
+                },
+            })
+            $(component).append(productSelect)
+        }
+
         async function generateDeviceNameInput() {
             const template = `
                 <div class="layui-form-item" style="margin-bottom: 0">
@@ -7815,38 +7866,35 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     <input style="display: none" type="text" name="${enumDataSourceConst.DEVICE_NAME}" class="layui-input">
                 </div>
                 <div class="layui-form-item" style="margin-bottom: 0">
-                    <input style="display: none" type="text" name="${enumDataSourceConst.SLAVE_DEVICE_NAME}" class="layui-input">
-                </div>
-                <div class="layui-form-item" style="margin-bottom: 0">
                     <input style="display: none" type="text" name="${enumDataSourceConst.ATTR_NAME}" class="layui-input">
                 </div>
             `
             $(component).append(template)
         }
+        async function getDeviceType() {
+            const items = await ConfigurationNodeApi.getDictionaryValue('device_type')
+            $(`#${componentId} `).find(`select[name="${enumDataSourceConst.DEVICE_TYPE}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items, labelField: 'itemText', valueField: 'itemValue' }))
+            form.render('select', componentFilter)
+        }
-        /**
-         * @description 根据组织ID获取设备
-         */
-        async function getDevicesByOrgId(organizationId) {
-            if (organizationId) {
-                const items = deviceList = await ConfigurationNodeApi.getMasterDevice(organizationId);
-                $(`#${componentId} `).find(`select[name="${enumDataSourceConst.DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
-                form.render('select', componentFilter)
-            }
+        async function getProduct(deviceType) {
+            const items = productList = await ConfigurationNodeApi.getProduct(deviceType)
+            $(`#${componentId} `).find(`select[name="${enumDataSourceConst.DEVICE_PROFILE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items, labelField: 'name', valueField: 'id', alias: 'alias' }))
+            form.render('select', componentFilter)
         }
         /**
-         * @description 通过主设备ID获取从设备
+         * @description 根据组织ID获取设备
          */
-        async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
-            if (deviceId && currentCheckedOrgNode) {
-                const items = slaveDeviceList = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
-                $(`#${componentId} `).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
-                form.render('select', componentFilter)
-            }
+        async function getMeetConditionsDevice(params) {
+            if (!params.organizationId) return
+            const items = await ConfigurationNodeApi.getMeetConditionsDevice(params);
+            $(`#${componentId} `).find(`select[name="${enumDataSourceConst.DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items, valueField: 'tbDeviceId', labelField: 'name' }))
+            form.render('select', componentFilter)
         }
+
         /**
          * @description 根据设备ID获取属性
          */
@@ -7862,7 +7910,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         /**
          * @description 生成组织选择
          */
-        async function generatorOrgTres() {
+        async function generatorOrgTrees() {
             const orgContainerId = `data-source__component--org-${Date.now()}`
             const orgContainer = `<div id="${orgContainerId}"></div>`
             $(component).append(orgContainer)
@@ -7881,18 +7929,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                 treeProps: {
                     data: treeList,
                     onlyIconControl: true,
-                    click(node) {
-                        currentCheckedOrgNode = node?.data?.id
+
+                    click(node) { 
                         form.val(componentFilter, {
                             [enumDataSourceConst.ORG_NAME]: node?.data?.title,
                             [enumDataSourceConst.DEVICE_ID]: null,
-                            [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
-                            [enumDataSourceConst.ATTR]: null,
                             [enumDataSourceConst.DEVICE_NAME]: null,
-                            [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
-                            [enumDataSourceConst.ATTR_NAME]: null,
                         })
-                        getDevicesByOrgId(node.data.id)
+                        currentDataSource.organizationId = node?.data?.id
+                        getMeetConditionsDevice(currentDataSource)
                     },
                 },
             })
@@ -7914,50 +7959,15 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     if (!selected) return
                     form.val(componentFilter, {
                         [enumDataSourceConst.DEVICE_NAME]: selected?.name,
-                        [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
                         [enumDataSourceConst.ATTR]: null,
-                        [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
                         [enumDataSourceConst.ATTR_NAME]: null,
                     })
-                    if (selected.deviceType === enumDataSourceConst.GATEWAY) {
-                        $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`)
-                            .attr('lay-verify', 'required').attr('lay-verType', 'tips')
-                            .parentsUntil(`#${componentId}`).show()
-                        getSlaveDeviceByMasterDeviceId(currentCheckedOrgNode, selected.id)
-                    } else {
-                        $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`)
-                            .attr('lay-verify', '').attr('lay-verType', 'tips')
-                            .parentsUntil(`#${componentId}`).hide()
-                        console.log(selected)
-                        getAttrByDeviceId(selected.deviceProfileId)
-                    }
                 },
             })
             $(component).append(deviceSelect)
         }
-        /**
-         * @description 生成从设备选择器
-         */
-        function generatorSlaveDevice() {
-            const slaveDeviceSelect = UseLayUi.createSelect({
-                label: '子设备',
-                bindValueFiled: enumDataSourceConst.SLAVE_DEVICE_ID,
-                layFilter: `${componentFilter}--${enumDataSourceConst.SLAVE_DEVICE_ID}`,
-                className: 'data-source__component-select',
-                onClick(data) {
-                    const { value } = data
-                    const selected = slaveDeviceList.find(item => item.id === value)
-                    form.val(componentFilter, {
-                        [enumDataSourceConst.SLAVE_DEVICE_NAME]: selected?.name,
-                        [enumDataSourceConst.ATTR]: null,
-                        [enumDataSourceConst.ATTR_NAME]: null,
-                    })
-                    getAttrByDeviceId(selected.deviceProfileId)
-                },
-            })
-            $(component).append(slaveDeviceSelect)
-        }
+
         /**
          * @description 生成属性选择器
@@ -7984,36 +7994,32 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          * @param {{orgId: string, deviceId: string, slaveDeviceId?: string, attr: string}} dataSource
          */
         function echoDataSource(dataSource = {}) {
-            const { orgId, deviceId, slaveDeviceId, attr } = dataSource
+            const { orgId, deviceId, deviceProfileId, deviceType, attr } = dataSource
             const queue = []
-            if (orgId) {
-                currentCheckedOrgNode = orgId
-                queue.push(getDevicesByOrgId(orgId))
-            }
-            if (slaveDeviceId) {
-                queue.push(getSlaveDeviceByMasterDeviceId(orgId, deviceId))
-                $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).parentsUntil(`#${componentId}`).show()
-                queue.push(getAttrByDeviceId(slaveDeviceId))
-            } else {
-                $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).parentsUntil(`#${componentId}`).hide()
-                queue.push(getAttrByDeviceId(deviceId))
-            }
+            currentDataSource = { organizationId: orgId, deviceProfileId, deviceType }
+            queue.push(getProduct(deviceType))
+            queue.push(getMeetConditionsDevice({ organizationId: orgId, deviceProfileId, deviceType }))
+            queue.push(getAttrByDeviceId(deviceProfileId)) 
             Promise.all(queue)
                 .finally(() => {
-                    const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)
-                    $(`#${componentId} input[name="${enumDataSourceConst.ORG_ID}"]`).parent().find('span').html(orgNode?.name)
+                    const orgNode = UseLayUi.findTreeObjectByField(treeList, orgId)
+
+                    $(`#${componentId} input[name="${enumDataSourceConst.ORG_ID}"]`).val(orgNode?.id).parent().find('span').html(orgNode?.name)
+                    
                     form.val(componentFilter, {
                         orgId,
                         deviceId,
-                        slaveDeviceId,
+                        deviceProfileId,
+                        deviceType,
                         attr,
                     })
+
                 })
         }
         /**
          * 
-         * @returns  {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
+         * @returns  {{orgId: string, attr: string, deviceId: string, devi}}
          */
         function getValue() {
             return form.val(componentFilter)
@@ -8445,13 +8451,14 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function proxyFn(fn) {
             return (...args) => {
                 const currentDataSource = getDataSourceBindValue() || {}
-
-                to(ConfigurationNodeApi.updateNodeInfo({
-                    configurationId,
-                    contentId: currentPageId.id,
-                    nodeId: graphId,
-                    [enumCategory.DATA_SOURCE]: currentDataSource
-                }))
+                if (currentDataSource.deviceProfileId && currentDataSource.deviceType && currentDataSource.orgId) {
+                    to(ConfigurationNodeApi.updateNodeInfo({
+                        configurationId,
+                        contentId: currentPageId.id,
+                        nodeId: graphId,
+                        [enumCategory.DATA_SOURCE]: currentDataSource
+                    }))
+                }
                 fn.apply(null, args)
             }
         }
@@ -12303,14 +12310,15 @@ class UseLayUi {
      * @param {boolean} [addPlaceholderOption = true]  options.addPlaceholderOption
      * @param {string} [labelField = 'name']  options.labelField
      * @param {string} [valueField = 'name']  options.valueField
+     * @param {string} [alias]  options.alias
      * @returns {*}
      */
     static generateOptionTemplate(options) {
-        const { dataSource = [], addPlaceholderOption = true, labelField = 'name', valueField = 'id' } = options
+        const { dataSource = [], addPlaceholderOption = true, labelField = 'name', valueField = 'id', alias } = options
         let { renderFn } = options
         renderFn = renderFn || ((record) => {
             if (typeof record === 'object') {
-                return `<option value="${record[valueField]}" ${record.disabled ? 'disabled=""' : ''}>${record[labelField]}</option>`
+                return `<option value="${record[valueField]}" ${record.disabled ? 'disabled=""' : ''}>${alias && record[alias] ? record[alias] : record[labelField]}</option>`
             } else {
                 return `<option value="${record}">${record}</option>`
             }
@@ -12456,6 +12464,7 @@ class UseLayUi {
      * @param {boolean} [options.autoFormatDataSource = true] options.autoFormatDataSource
      * @param {string} [options.layVerify] options.layVerify
      * @param {string} [options.layVerType] options.layVerType
+     * @param {boolean} [options.addPlaceholderOption] options.addPlaceholderOption
      * @param {Function} [options.treeProps.onReady] options.treeProps.onReady
      */
     static createTreeSelect(options) {
@@ -12477,6 +12486,7 @@ class UseLayUi {
             childrenField = 'children',
             layVerify,
             layVerType,
+            addPlaceholderOption
         } = options
         let { data = [], click, onReady } = treeProps
@@ -12518,12 +12528,12 @@ class UseLayUi {
         function mount() {
             // mount select container
             $(elem).html(template)
-
-            // mount tree
-            // UseLayUi.nextTick(() => {
+            const treeData = UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField)
+            if (addPlaceholderOption) treeData.unshift({ title: '请选择', id: undefined })
+            // mount tree 
             tree.render({
                 ...treeProps,
-                ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
+                ...(autoFormatDataSource ? { data: treeData } : {}),
                 elem: $(elem).find('.tree-select__tree-mount'),
                 click(node) {
                     setValue(node.data)
@@ -12545,22 +12555,10 @@ class UseLayUi {
                     layui.stope(e);
                 })
-            // blur
-            // $(document)
-            // 	.on("click", function (e) {
-            // 		const target = e.target
-            // 		const parentNode = $(`.${CLASS_NAME} .tree-select__tree-mount`)
-            // 		if (!parentNode) return
-            // 		console.log($.contains(parentNode, target))
-            // 		// const showClose = UseLayUi.isInNode(parentNode, target, true)
-            // 		// if (showClose) return
-            // 		// $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
-            // 	});
-
             if (UseLayUi.isFunction(onReady)) {
                 onReady(setValue)
             }
-            // })
+
             form.render()
         }