AssetsMap/H5/bgcFormSubTableBtn/js/bgcSubTableBtn.js

(function () {
    // >>> step1. 定义控件唯一标识（命名空间）
    var scopeName = "field_88661234567890123656";

    // >>> step2. 实现自定义控件渲染及交互逻辑
    var BgcSubTableBtn = function (options) {
        this.customWidgetType = scopeName;
        this._create(options);
    };
    BgcSubTableBtn.prototype = {
        constructor: BgcSubTableBtn,
        _create: function (options) {
            this._options = options;
            this._widgetId = options.privateId;
            this._widgetProxy = options.adaptation;
            this._wrapper = document.getElementById(this._widgetId);
            this._field = this._widgetProxy.childrenGetData(this._widgetId);
            this._tunnelId = 'Event' + this._widgetId;
            if (!this._wrapper) return console.warn('没有找到组件渲染的容器');
            this.clicked = 0;
            this._update();
            console.log(this._widgetProxy);
        },
        _update: function (field) {
            if (field) this._field = field;
            this._destroy();
            this._buildRendering();
            this._postCreate();
        },

        _buildRendering: function () {
            var elemId = 'section-' + this._widgetId;
            var btnId = 'section-' + this._widgetId + '-btn';
            var tpl = '<section id="section-' + elemId + '">' +
                '<button id="' + btnId + '" style="display:block;border:1px solid blue;border-radius:5px;margin:8px 16px;padding:5px;line-height:24px;;text-align:center">' + this._field.display +
                '</button>' +
                '</section>';
            this._wrapper.innerHTML = tpl;
            this._el = this._wrapper.querySelector('#' + elemId);
            this._btnEl = this._wrapper.querySelector('#' + btnId);
        },
        _postCreate: function () {
            this._fieldElement = this._wrapper.querySelector('.' + this._widgetId + '__');

            if (this._fieldElement) {
                this._unbindTouchStart = this._bind(this._fieldElement, 'touchstart', this.onTouchStart.bind(this));
                this._unbindTouchEnd = this._bind(this._fieldElement, 'touchend', this.onTouchEnd.bind(this));
                this._unbindTouchMove = this._bind(this._fieldElement, 'touchmove', this.onTouchMove.bind(this));
            }

            this._unbindTap = this._bind(this._btnEl, 'click', this.onClick.bind(this)); // 改为 click
            this._unbindUpdate = this._listen(this._tunnelId, this._update.bind(this));
        },
        _destroy: function () {
            // 取消相关绑定事件
            if (this._fieldElement) {
                this._unbindTouchStart && this._unbindTouchStart();
                this._unbindTouchEnd && this._unbindTouchEnd();
                this._unbindTouchMove && this._unbindTouchMove();
            }
            this._unbindTap && this._unbindTap();
            this._unbindUpdate && this._unbindUpdate();
            this._el = this._btnEl = this._fieldElement = null;
        },
        _bind: function (el, evt, cb) {
            el.addEventListener(evt, cb, false);
            return function () {
                el.removeEventListener(evt, cb, false);
            }
        },
        _listen: function (evt, cb) {
            var hub = this._widgetProxy.ObserverEvent;
            hub.listen(evt, cb);
            return function () {
                hub.remove(evt, cb);
            }
        },
        onTouchStart: function () {
            if (this._fieldElement) {
                this._fieldElement.style.backgroundColor = "#005297";
            }
        },

        onTouchEnd: function () {
            if (this._fieldElement) {
                this._fieldElement.style.backgroundColor = "#008BFF";
            }
        },

        onTouchMove: function () {
            if (this._fieldElement) {
                this._fieldElement.style.backgroundColor = "#005297";
            }
        },
        onClick: function () {

            var tableName = this._options.formMessage.tableName;


            var formId = this._options.getData.formdata.rawData.content.contentDataId;
            var formsons = this._options.getData.formdata.formsons;
            var formmains = this._options.getData.formdata.formmains[tableName];

            var assetsNo = '';
            var mainTableMap = formmains.elements;
            var boundConfigs = []
            let subTableKeys = Object.keys(formsons)
            subTableKeys.forEach((key)=>{
                let formson = formsons[key]
                if (formson.display === '地块范围定位列表') {
                    let subTableList = formson.records;

                    for (let i = 0; i < subTableList.length; i++) {
                        let subTableMap = subTableList[i].elements

                        let subKeys = Object.keys(subTableMap)

                           let blockNum
                        let pathOrder
                        let lat
                        let lng
                        subKeys.forEach((k) => {
                            let display = subTableMap[k].display;
                            let value = subTableMap[k].value;
                            if (display === '地块序号') blockNum = value;
                            if (display === '线路顺序') pathOrder = value;

                            if (display === '地块定位纬度') lat = value;
                            if (display === '地块定位经度') lng = value;
                        });
                        boundConfigs.push({blockNum:blockNum,pathOrder:pathOrder,lat:lat,lng:lng})
                    }
                }
            })
            const keys = Object.keys(mainTableMap);
            keys.forEach((k) => {
                let display = mainTableMap[k].display;
                let value = mainTableMap[k].value;
                if (display === '资产编号') assetsNo = value;
            });


            const url = `${window.location.origin}/seeyon/rest/assetsRegion/reComputedBoundConfig`;
            const params = {
                subBoundConfigs: boundConfigs,
                fieldDisplay: "资产边界数据",
                formId: formId
            };

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                body: JSON.stringify(params)
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data.code)
                    if (data.code === 0) {
                      console.log(formmains.elements)
                        formmains.elements[data.data.targetField].value = data.data.updateData; // 请确认 field0249 是你实际的字段key
                    } else if (data.code === "500") {
                        alert(data.msg);
                    } else {
                        alert("生成失败，请联系管理员");
                    }
                })
                .catch((e) => {
                  console.log(e)
                    alert("出现异常,生成失败，请联系管理员");
                });


            this._update();
        }
    };

    // >>> step3. 实现开发规范约定的init及destroy接口
    var myWidgets = {};
    // 组件初始化
    BgcSubTableBtn.init = function (options) {
        var widget = new BgcSubTableBtn(options);
        myWidgets[widget._widgetId] = widget;
    };
    // 组件销毁
    BgcSubTableBtn.destroy = function (widgetId) {
        var widget = myWidgets[widgetId];
        if (widget) widget._destroy();
        delete myWidgets[widgetId];
    };

    // >>> step4. 注册组件实现到命名控件
    window[scopeName] = BgcSubTableBtn;
})();