perf: state setting method

ww
1 parent d011bb44
Showing 2 changed files with 27 additions and 35 deletions
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/js/grapheditor/Format.js
View file @1ff96a3
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @1ff96a3
@@ -7400,6 +7400,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             SET_IMG_EL: 'variableImageTableSetImgEl',
             PREVIEW_IMG_CONTAINER: 'img__container',
             DEL_PREVIEW_IMG: 'img__delete',
+            PREVIEW_CONTAINER: 'previewContainer'
         }
         const enumConst = {
@@ -7456,24 +7457,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             }
         }
-        function generatorEventListenner() {
-            $(`#${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],
-                    })
-                })
-            })
+        function createUploadImgContainer(info) {
+            const enableEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.ENABLE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
+            const closeEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.CLOSE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
+            generateUploadImgContainer({ el: enableEl })
+            generateUploadImgContainer({ el: closeEl })
         }
         function addRecord(filter, state, defaultValue) {
@@ -7488,17 +7476,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         <input class="layui-input" autocomplete="off" style="display: none;" name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required" />
                     </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>
+                <td class=${enumActionEl.PREVIEW_CONTAINER}>
                 </td>
               </tr>`
         }
@@ -7537,6 +7515,7 @@ 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()
@@ -7595,17 +7574,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         'lay-submit': '',
                         'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
                     })
+                    createUploadImgContainer()
                     const info = getLayerBindInfo('act', type)
                     const { condition = [], enabled } = info
                     Object.assign(recordData, { enabled })
+
                     if (info && condition.length) {
                         echoData(info)
                     } else {
                         initialData()
                     }
-
-                    generatorEventListenner()
                 },
                 yes(index) {
                     form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
@@ -8186,8 +8165,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             DEL_PREVIEW_IMG: 'img__delete',
         }
-        const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now()}`
-
+        const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now() - Math.random()}`
+ 
         function createTemplate() {
             return `
             <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
@@ -8222,19 +8201,31 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function mount() {
             if (!el) throw Error('mount element is required')
             $(el).append(createTemplate())
+            generateEventLinstenner()
         }
         // TODO 生成容器监听事件
         function generateEventLinstenner() {
             $(el).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
-                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
+                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) {
+                    $(el).find(`div[lay-filter="${getFormFilter}"] img`).attr('src', '')
+                    form.val(getFormFilter, {
+                        [enumConst.IMAGE_ORIGIN]: null,
+                        [enumConst.IMAGE_GALLERY_CATEGORY]: null,
+                        [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
+                    })
+                    return
+                }
                 generateUploadLayerComponent((imageState) => {
-
                     $(el).find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
                     form.val(getFormFilter, imageState)
+                    console.log(form.val(getFormFilter))
                 })
             })
         }
+
+        mount()
+        return { getValue, setValue }
     }
     //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
--- a/src/main/webapp/styles/formatChange.css
View file @1ff96a3
+++ b/src/main/webapp/styles/formatChange.css
View file @1ff96a3
@@ -261,6 +261,7 @@
 }
 .variableImageTableSetImgEl .img__delete {
+  user-select: none;
   position: absolute;
   top: 0;
   width: 8px;