简柏林 / thingskit-scada · Commits

Commit 186acb75c7ea2906257210b202526646a8015099

Authored by ww
1 parent 1ff96a3e

refactory: handleSettingVarImage method

Inline Side-by-side
Showing 1 changed file with 16 additions and 106 deletions
... ... @@ -6045,6 +6045,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6045 6045 DEFAULT_IMAGE_EL: 'defaultImageEl',
6046 6046
6047 6047 /**
  6048 + * @description 行预览
  6049 + */
  6050 + ROW_PREVIEW_IMG: 'rowPreviewImg',
  6051 +
  6052 + /**
6048 6053 * @description 默认图片filter
6049 6054 */
6050 6055 DEFAULT_IMAGE_FILTER: 'defaultImageFilter'
... ... @@ -6059,8 +6064,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6059 6064
6060 6065 const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
6061 6066
6062   - const getColorPickerFilter = (rowNumber) => `${enumActionEl.COLOR_PICKER_FILTER}${rowNumber}`
6063   -
6064 6067 /**
6065 6068 * @description 监听表格中的事件
6066 6069 */
... ... @@ -6068,47 +6071,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6068 6071 createInputListener()
6069 6072 createAddRowEvent()
6070 6073 createDelRowEvent()
6071   - createSetImgEvent()
6072   - createDelPreviewImgEvent()
6073   - createSelectDefaultImageEvent()
6074   - createDelDefaultImageEvent()
6075   - }
6076   -
6077   - /**
6078   - * @description 选择默认图片
6079   - */
6080   - function createSelectDefaultImageEvent() {
6081   - $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => {
6082   - if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6083   - generateUploadLayerComponent((imageState) => {
6084   - $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
6085   - .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
6086   -
6087   - form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
6088   - [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
6089   - [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
6090   - [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
6091   - })
6092   -
6093   - })
6094   - })
6095   - }
6096   -
6097   - /**
6098   - * @description 删除默认图片
6099   - */
6100   - function createDelDefaultImageEvent() {
6101   - $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.DEL_PREVIEW_IMG}`, (event) => {
6102   - $(event.target)
6103   - .parents(`div.${enumActionEl.PREVIEW_IMG_CONTAINER}`).find('img').attr('src', '')
6104   -
6105   - form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
6106   - [enumConst.IMAGE_ORIGIN]: null,
6107   - [enumConst.IMAGE_GALLERY_CATEGORY]: null,
6108   - [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
6109   - })
6110   -
6111   - })
6112 6074 }
6113 6075
6114 6076 /**
... ... @@ -6130,45 +6092,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6130 6092 }
6131 6093
6132 6094 /**
6133   - * @description 删除已选择的变量图片
6134   - */
6135   - function createDelPreviewImgEvent() {
6136   - $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.DEL_PREVIEW_IMG}`, (event) => {
6137   - $(event.target)
6138   - .parents(`div.${enumActionEl.PREVIEW_IMG_CONTAINER}`).find('img').attr('src', '')
6139   - const rowFilter = $(event.target).parents(`tr`).attr('lay-filter')
6140   - form.val(rowFilter, {
6141   - [enumConst.IMAGE_ORIGIN]: null,
6142   - [enumConst.IMAGE_GALLERY_CATEGORY]: null,
6143   - [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
6144   - })
6145   - })
6146   - }
6147   -
6148   - /**
6149   - * @description 选择图片
6150   - */
6151   - function createSetImgEvent() {
6152   - $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
6153   - if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6154   - const rowFilter = $(event.target).parents('tr').attr('lay-filter')
6155   - // createUploadImgLayer(rowFilter)
6156   - generateUploadLayerComponent((imageState) => {
6157   -
6158   - $(`#${enumActionEl.TABLE_BODY_EL}`)
6159   - .find(`tr[lay-filter="${rowFilter}"]`)
6160   - .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
6161   -
6162   - form.val(rowFilter, {
6163   - [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
6164   - [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
6165   - [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
6166   - })
6167   - })
6168   - })
6169   - }
6170   -
6171   - /**
6172 6095 * @description 创建输入验证
6173 6096 */
6174 6097 function createInputListener() {
... ... @@ -6211,16 +6134,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6211 6134 </div>
6212 6135 </td>
6213 6136 <td>
6214   - <div class="${enumActionEl.SET_IMG_EL}">
6215   - <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
6216   - <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
6217   - <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
6218   - <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
6219   - <img src="" alt="">
6220   - <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
6221   - <div class="add__button">+</div>
6222   - </div>
6223   - </div>
  6137 + <div class="${enumActionEl.ROW_PREVIEW_IMG}"></div>
6224 6138 </td>
6225 6139 <td style="text-align: center">
6226 6140 <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) {
6229 6143 `
6230 6144 $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
6231 6145 form.render()
  6146 + const el = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${rowFormFilter}"] .${enumActionEl.ROW_PREVIEW_IMG}`)
  6147 + generateUploadImgContainer({ el })
6232 6148 addRowNumber++
6233 6149 }
6234 6150
... ... @@ -6306,18 +6222,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6306 6222
6307 6223 function createLayerForm(type) {
6308 6224 const content = `
6309   - <div id="${enumActionEl.DEFAULT_IMAGE_EL}" class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}">
6310   - <div style="width: 60px; padding-left: 10px;">默认图片</div>
6311   - <div class="${enumActionEl.SET_IMG_EL}">
6312   - <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
6313   - <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
6314   - <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
6315   - <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
6316   - <img src="" alt="">
6317   - <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
6318   - <div class="add__button">+</div>
6319   - </div>
6320   - </div>
  6225 + <div class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}" style="display: flex; align-items: center; padding-top: 10px;">
  6226 + <div style="width: 60px; padding: 9px 10px 9px 20px;">默认图片</div>
  6227 + <div id="${enumActionEl.DEFAULT_IMAGE_EL}" style="padding: 0;"></div>
6321 6228 </div>
6322 6229 <div style="width: 300px; padding: 0 0 0 20px;" id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
6323 6230 <div class="override__table" style="padding: 0 20px">
... ... @@ -6365,6 +6272,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6365 6272 })
6366 6273 const { component, echoDataSource, getValue } = generateDataSourceComponent()
6367 6274 getDataSourceValue = getValue
  6275 +
  6276 + const el = $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
  6277 + generateUploadImgContainer({ el })
  6278 +
6368 6279 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
6369 6280 form.render()
6370 6281 const info = getLayerBindInfo('act', type)
... ... @@ -7515,7 +7426,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7515 7426 async function submit(callback) {
7516 7427 const enableValue = form.val(enumActionEl.ENABLE_FILTER)
7517 7428 const closeValue = form.val(enumActionEl.CLOSE_FILTER)
7518   - console.log({ enableValue, closeValue })
7519 7429
7520 7430 const formVal = getDataSourceBindValue()
7521 7431
... ... @@ -8166,7 +8076,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8166 8076 }
8167 8077
8168 8078 const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now() - Math.random()}`
8169   -
  8079 +
8170 8080 function createTemplate() {
8171 8081 return `
8172 8082 <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
... ...