feat: 拖拽布局-接口对接

demoHtml/flex/index.html

@@ -19,7 +19,7 @@
             rel="stylesheet"
             href="./css/index.css"
         />
-        <script src="./js/color.js"></script>
+        <script src="./js/utils.js"></script>
         <script src="./js/i18n.js"></script>
         <script src="./js/gridstack-all.js"></script>
         <script src="./js/jquery.min.js"></script>

demoHtml/flex/js/index.js

@@ -77,7 +77,7 @@
 
     /** 初始化 */
     var init = function (type, self) {
-        const initDataStorage = localStorage.getItem(`${type}Data`);
+        const initDataStorage = self['initData'];
         if (!initDataStorage) {
             self['initData'] = {
                 type: 'screen',
@@ -90,7 +90,6 @@
                 image: '', // 为画布添加image属性
             };
         } else {
-            self['initData'] = JSON.parse(initDataStorage);
             conputedInitData('init', self);
         }
         self['initData'].el = document.getElementById(`${type}-screen`);
@@ -581,6 +580,21 @@
             console.log(welcome.initData);
             localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
             localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
+
+            requestFN(
+                {
+                    type: 'POST',
+                    url: getQueryParam('id') ? 'update' : 'save',
+                    data: {
+                        name: $('#templateName').val(),
+                        content: JSON.stringify({
+                            mainData: conputedInitData('save', main),
+                            welcomeData: conputedInitData('save', welcome),
+                        }),
+                    },
+                },
+                function () {}
+            );
         });
     };
 
@@ -651,8 +665,8 @@
     var i18n = function () {
         return new Promise((resolve) => {
             setTimeout(() => {
-                // locale = 'zh-CN';
-                locale = 'en';
+                locale = 'zh-CN';
+                // locale = 'en';
                 // 设置语言
                 layui.i18n.set({
                     locale: locale,
@@ -671,11 +685,52 @@
         });
     };
 
+    var getImageData = function () {
+        requestFN({ url: 'listResourceByType', data: { type: 'image' } }, function () {});
+    };
+
+    var getMenuData = function () {
+        requestFN({ url: 'listResourceByType', data: { type: 'menu' } }, function () {});
+    };
+
+    var getComponentData = function () {
+        requestFN({ url: 'listResourceByType', data: { type: 'component' } }, function () {});
+    };
+
+    // 获取单个参数
+    var getQueryParam = function (param) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(param);
+    };
+
+    var getTemplateData = function () {
+        return new Promise((resolve) => {
+            let id = getQueryParam('id');
+            if (id) {
+                requestFN({ url: 'getById', data: { id } }, function (data) {
+                    $('#templateName').val(data.name);
+                    const { welcomeData, mainData } = JSON.parse(data.content);
+                    welcome.initData = welcomeData;
+                    main.initData = mainData;
+                    resolve();
+                });
+            } else {
+                resolve();
+            }
+        });
+    };
+
     /** 执行方法 */
     $(function () {
         (async function () {
+            getImageData();
+            getMenuData();
+            getComponentData();
+
             // 国际化
             await i18n();
+            // 获取模版数据
+            await getTemplateData();
             // 初始化
             initGridStack();
             init('welcome', welcome);

demoHtml/flex/js/utils.js

@@ -132,3 +132,24 @@ function rgbaToHexWithValidation(rgbaStr) {
 
     return hexColor;
 }
+
+var api = {
+    baseUrl: 'http://www.dtviptvott.com:20018',
+    preFix: '/template/',
+};
+
+var requestFN = function ({ type = 'GET', url, data = {} }, successCallback, errorCallback) {
+    $.ajax({
+        url: api.baseUrl + api.preFix + url,
+        type,
+        data: type === 'GET' ? data : JSON.stringify(data),
+        dataType: 'json',
+        contentType: 'application/json',
+        success: function (response) {
+            successCallback && successCallback(response.data);
+        },
+        error: function (xhr, status, error) {
+            errorCallback && errorCallback(error);
+        },
+    });
+};