Commit 1ff96a3e19246990d98fdd01a565e5269487d901

Authored by ww
1 parent d011bb44

perf: state setting method

... ... @@ -7400,6 +7400,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7400 7400 SET_IMG_EL: 'variableImageTableSetImgEl',
7401 7401 PREVIEW_IMG_CONTAINER: 'img__container',
7402 7402 DEL_PREVIEW_IMG: 'img__delete',
  7403 + PREVIEW_CONTAINER: 'previewContainer'
7403 7404 }
7404 7405
7405 7406 const enumConst = {
... ... @@ -7456,24 +7457,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7456 7457 }
7457 7458 }
7458 7459
7459   - function generatorEventListenner() {
7460   - $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
7461   - if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
7462   - const rowFilter = $(event.target).parents('tr').attr('lay-filter')
7463   - // createUploadImgLayer(rowFilter)
7464   - generateUploadLayerComponent((imageState) => {
7465   -
7466   - $(`#${enumActionEl.TABLE_BODY_EL}`)
7467   - .find(`tr[lay-filter="${rowFilter}"]`)
7468   - .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
7469   -
7470   - form.val(rowFilter, {
7471   - [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
7472   - [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
7473   - [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
7474   - })
7475   - })
7476   - })
  7460 + function createUploadImgContainer(info) {
  7461 + const enableEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.ENABLE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
  7462 + const closeEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.CLOSE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
  7463 + generateUploadImgContainer({ el: enableEl })
  7464 + generateUploadImgContainer({ el: closeEl })
7477 7465 }
7478 7466
7479 7467 function addRecord(filter, state, defaultValue) {
... ... @@ -7488,17 +7476,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7488 7476 <input class="layui-input" autocomplete="off" style="display: none;" name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required" />
7489 7477 </div>
7490 7478 </td>
7491   - <td>
7492   - <div class="${enumActionEl.SET_IMG_EL}">
7493   - <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
7494   - <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
7495   - <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
7496   - <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
7497   - <img src="" alt="">
7498   - <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
7499   - <div class="add__button">+</div>
7500   - </div>
7501   - </div>
  7479 + <td class=${enumActionEl.PREVIEW_CONTAINER}>
7502 7480 </td>
7503 7481 </tr>`
7504 7482 }
... ... @@ -7537,6 +7515,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7537 7515 async function submit(callback) {
7538 7516 const enableValue = form.val(enumActionEl.ENABLE_FILTER)
7539 7517 const closeValue = form.val(enumActionEl.CLOSE_FILTER)
  7518 + console.log({ enableValue, closeValue })
7540 7519
7541 7520 const formVal = getDataSourceBindValue()
7542 7521
... ... @@ -7595,17 +7574,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7595 7574 'lay-submit': '',
7596 7575 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
7597 7576 })
  7577 + createUploadImgContainer()
7598 7578
7599 7579 const info = getLayerBindInfo('act', type)
7600 7580 const { condition = [], enabled } = info
7601 7581 Object.assign(recordData, { enabled })
  7582 +
7602 7583 if (info && condition.length) {
7603 7584 echoData(info)
7604 7585 } else {
7605 7586 initialData()
7606 7587 }
7607   -
7608   - generatorEventListenner()
7609 7588 },
7610 7589 yes(index) {
7611 7590 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
... ... @@ -8186,8 +8165,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8186 8165 DEL_PREVIEW_IMG: 'img__delete',
8187 8166 }
8188 8167
8189   - const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now()}`
8190   -
  8168 + const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now() - Math.random()}`
  8169 +
8191 8170 function createTemplate() {
8192 8171 return `
8193 8172 <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
... ... @@ -8222,19 +8201,31 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8222 8201 function mount() {
8223 8202 if (!el) throw Error('mount element is required')
8224 8203 $(el).append(createTemplate())
  8204 + generateEventLinstenner()
8225 8205 }
8226 8206
8227 8207 // TODO 生成容器监听事件
8228 8208 function generateEventLinstenner() {
8229 8209 $(el).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
8230   - if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
  8210 + if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) {
  8211 + $(el).find(`div[lay-filter="${getFormFilter}"] img`).attr('src', '')
  8212 + form.val(getFormFilter, {
  8213 + [enumConst.IMAGE_ORIGIN]: null,
  8214 + [enumConst.IMAGE_GALLERY_CATEGORY]: null,
  8215 + [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
  8216 + })
  8217 + return
  8218 + }
8231 8219 generateUploadLayerComponent((imageState) => {
8232   -
8233 8220 $(el).find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
8234 8221 form.val(getFormFilter, imageState)
  8222 + console.log(form.val(getFormFilter))
8235 8223 })
8236 8224 })
8237 8225 }
  8226 +
  8227 + mount()
  8228 + return { getValue, setValue }
8238 8229 }
8239 8230
8240 8231 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
... ...
... ... @@ -261,6 +261,7 @@
261 261 }
262 262
263 263 .variableImageTableSetImgEl .img__delete {
  264 + user-select: none;
264 265 position: absolute;
265 266 top: 0;
266 267 width: 8px;
... ...