refactory: handleSettingVarImage method

ww
1 parent 1ff96a3e
Showing 1 changed file with 16 additions and 106 deletions
src/main/webapp/js/grapheditor/Format.js
--- a/src/main/webapp/js/grapheditor/Format.js
View file @186acb7
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @186acb7
@@ -6045,6 +6045,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             DEFAULT_IMAGE_EL: 'defaultImageEl',
             /**
+             * @description 行预览
+             */
+            ROW_PREVIEW_IMG: 'rowPreviewImg',
+
+            /**
              * @description 默认图片filter
              */
             DEFAULT_IMAGE_FILTER: 'defaultImageFilter'
@@ -6059,8 +6064,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
-        const getColorPickerFilter = (rowNumber) => `${enumActionEl.COLOR_PICKER_FILTER}${rowNumber}`
-
         /**
          * @description 监听表格中的事件
          */
@@ -6068,47 +6071,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             createInputListener()
             createAddRowEvent()
             createDelRowEvent()
-            createSetImgEvent()
-            createDelPreviewImgEvent()
-            createSelectDefaultImageEvent()
-            createDelDefaultImageEvent()
-        }
-
-        /**
-         * @description 选择默认图片
-         */
-        function createSelectDefaultImageEvent() {
-            $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => {
-                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
-                generateUploadLayerComponent((imageState) => {
-                    $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
-                        .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-
-                    form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
-                        [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
-                        [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
-                        [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
-                    })
-
-                })
-            })
-        }
-
-        /**
-         * @description 删除默认图片
-         */
-        function createDelDefaultImageEvent() {
-            $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.DEL_PREVIEW_IMG}`, (event) => {
-                $(event.target)
-                    .parents(`div.${enumActionEl.PREVIEW_IMG_CONTAINER}`).find('img').attr('src', '')
-
-                form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
-                    [enumConst.IMAGE_ORIGIN]: null,
-                    [enumConst.IMAGE_GALLERY_CATEGORY]: null,
-                    [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
-                })
-
-            })
         }
         /**
@@ -6130,45 +6092,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
         /**
-         * @description 删除已选择的变量图片
-         */
-        function createDelPreviewImgEvent() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.DEL_PREVIEW_IMG}`, (event) => {
-                $(event.target)
-                    .parents(`div.${enumActionEl.PREVIEW_IMG_CONTAINER}`).find('img').attr('src', '')
-                const rowFilter = $(event.target).parents(`tr`).attr('lay-filter')
-                form.val(rowFilter, {
-                    [enumConst.IMAGE_ORIGIN]: null,
-                    [enumConst.IMAGE_GALLERY_CATEGORY]: null,
-                    [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
-                })
-            })
-        }
-
-        /**
-         * @description 选择图片
-         */
-        function createSetImgEvent() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
-                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
-                const rowFilter = $(event.target).parents('tr').attr('lay-filter')
-                // createUploadImgLayer(rowFilter)
-                generateUploadLayerComponent((imageState) => {
-
-                    $(`#${enumActionEl.TABLE_BODY_EL}`)
-                        .find(`tr[lay-filter="${rowFilter}"]`)
-                        .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-
-                    form.val(rowFilter, {
-                        [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
-                        [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
-                        [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
-                    })
-                })
-            })
-        }
-
-        /**
          * @description 创建输入验证
          */
         function createInputListener() {
@@ -6211,16 +6134,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     </div>
                 </td>
                 <td>
-                    <div class="${enumActionEl.SET_IMG_EL}">
-                        <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
-                        <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
-                        <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
-                        <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
-                            <img src="" alt="">
-                            <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
-                            <div class="add__button">+</div>
-                        </div>
-                    </div>
+                    <div class="${enumActionEl.ROW_PREVIEW_IMG}"></div>
                 </td>
                 <td style="text-align: center">
                   <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
@@ -6229,6 +6143,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             `
             $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
             form.render()
+            const el = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${rowFormFilter}"] .${enumActionEl.ROW_PREVIEW_IMG}`)
+            generateUploadImgContainer({ el })
             addRowNumber++
         }
@@ -6306,18 +6222,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function createLayerForm(type) {
             const content = `
-                <div id="${enumActionEl.DEFAULT_IMAGE_EL}" class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}">
-                    <div style="width: 60px; padding-left: 10px;">默认图片</div>
-                    <div class="${enumActionEl.SET_IMG_EL}">
-                        <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
-                        <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
-                        <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
-                        <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
-                            <img src="" alt="">
-                            <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
-                            <div class="add__button">+</div>
-                        </div>
-                    </div>
+                <div class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}" style="display: flex; align-items: center; padding-top: 10px;">
+                    <div style="width: 60px; padding: 9px 10px 9px 20px;">默认图片</div>
+                    <div id="${enumActionEl.DEFAULT_IMAGE_EL}" style="padding: 0;"></div>
                 </div>
 				<div style="width: 300px; padding: 0 0 0 20px;" id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
                 <div class="override__table" style="padding: 0 20px">
@@ -6365,6 +6272,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     })
                     const { component, echoDataSource, getValue } = generateDataSourceComponent()
                     getDataSourceValue = getValue
+
+                    const el = $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
+                    generateUploadImgContainer({ el })
+
                     $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
                     form.render()
                     const info = getLayerBindInfo('act', type)
@@ -7515,7 +7426,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         async function submit(callback) {
             const enableValue = form.val(enumActionEl.ENABLE_FILTER)
             const closeValue = form.val(enumActionEl.CLOSE_FILTER)
-            console.log({ enableValue, closeValue })
             const formVal = getDataSourceBindValue()
@@ -8166,7 +8076,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         }
         const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now() - Math.random()}`
- 
+
         function createTemplate() {
             return `
             <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">