简柏林 / thingskit-scada · Commits

Commit 1e7a7fa9634d8d058a5ef702edf2e76e8fb30c4f

Authored by ww
1 parent be102f67

feat: basic complete switch component data bind

Inline Side-by-side
Showing 4 changed files with 217 additions and 61 deletions
... ... @@ -57,8 +57,6 @@
57 57 loadStyleList = loadStyleList.map((item) => ({ ...item, path: OSS_Prefix + getFileNameFromPath(item.path) }))
58 58 }
59 59
60   - console.log(loadScriptList)
61   -
62 60 for (const { path } of loadStyleList) {
63 61 loadStyleLink(path)
64 62 }
... ...
... ... @@ -130,14 +130,12 @@ const createStorage = (
130 130 * @memberof Cache
131 131 */
132 132 get(key, def = null) {
133   - console.log(this.getKey(key))
134 133 const val = this.storage.getItem(this.getKey(key));
135 134 if (!val) return def;
136 135
137 136 try {
138 137 const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
139 138 const data = JSON.parse(decVal);
140   - console.log(data)
141 139 const { value, expire } = data;
142 140 // if (isNullOrUnDef(expire) || expire >= new Date().getTime()) {
143 141 // return value;
... ...
... ... @@ -313,7 +313,9 @@
313 313 /**
314 314 * @descrpiton 开关 状态设置
315 315 */
316   - SWITCH_STATE_SETTING: 'stateSetting'
  316 + SWITCH_STATE_SETTING: 'stateSetting',
  317 +
  318 +
317 319 }
318 320
319 321 /**
... ... @@ -679,9 +681,9 @@
679 681 this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE])
680 682 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
681 683 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
682   - this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
  684 + this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
683 685 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
684   - this.setComponentPermission(SWITCH, [SWITCH_STATE_SETTING])
  686 + this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
685 687
686 688 var thingskitEntries = [
687 689 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
... ...
... ... @@ -4964,6 +4964,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4964 4964 let currentNodeData = null
4965 4965
4966 4966 /**
  4967 + * @description 覆盖当前节点数据
  4968 + * @param {'act' | 'dataSources' | 'event'} key
  4969 + * @param {string}
  4970 + */
  4971 + function overrideCurrentData(key, uuid = 'id', value = {}) {
  4972 + if (!currentNodeData[key]) currentNodeData[key] = []
  4973 + const index = currentNodeData[key].findIndex(item => item[uuid] === value[uuid])
  4974 + ~index ? currentNodeData[key][index] = value : currentNodeData[key].push(value)
  4975 + }
  4976 +
  4977 + /**
4967 4978 * @description 保存页面信息
4968 4979 */
4969 4980 async function autoSaveGraphInfo() {
... ... @@ -5066,6 +5077,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5066 5077
5067 5078 /**
5068 5079 * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写
  5080 + * @return {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
5069 5081 */
5070 5082 function getDataSourceBindValue() {
5071 5083
... ... @@ -5165,19 +5177,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5165 5177 const event = currentNodeData.event ?? []
5166 5178 const actionType = {}
5167 5179 for (const item of act) {
5168   - if (!item.condition || !item.condition?.length) {
5169   - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)
5170   - } else {
5171   - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)
5172   - }
  5180 + const flag = !item.condition || !item.condition?.length
  5181 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
5173 5182 actionType[item.type] = item.enabled
5174 5183 }
5175 5184 for (const item of event) {
5176   - if (!item.content) {
5177   - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)
5178   - } else {
5179   - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)
5180   - }
  5185 + const flag = !item.content
  5186 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
5181 5187 actionType[item.type] = item.enabled
5182 5188 }
5183 5189 form.val(CONTAINER_FILTER, actionType)
... ... @@ -5219,7 +5225,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5219 5225
5220 5226
5221 5227 async function mount() {
5222   - const { component, echoDataSource, getValue } = generatorDataSourceComponent({ validate: false })
  5228 + const { component, echoDataSource, getValue } = generateDataSourceComponent({ validate: false })
5223 5229 $(fragment).append(title).append(component)
5224 5230 $(container).append(fragment)
5225 5231
... ... @@ -5382,7 +5388,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5382 5388 type: enumDynamicEffectType.SWITCH,
5383 5389 category: enumCategory.ACT,
5384 5390 })
  5391 + const singleClick = interactionList.find(item => item.type === enumInteractionType.SINGLE)
  5392 + interactionList.length = 0
  5393 + interactionList.push(singleClick)
5385 5394 createDynamicEffectPanel()
  5395 + createInteractionPanel()
5386 5396 }
5387 5397
5388 5398 /**
... ... @@ -5833,30 +5843,30 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5833 5843
5834 5844 function getValueOnSubmit(field) {
5835 5845 const basicAttr = sidebarInstance.enumCellBasicAttribute
5836   - const permissionKey = sidebarInstance.enumComponentType
5837   -
  5846 + const componentType = sidebarInstance.enumComponentType
5838 5847
5839 5848 const renderMapping = {
5840   - [permissionKey.VAR_IMAGE]: getSubmitValue,
5841   - [permissionKey.CHARTS]: getSubmitValue,
5842   - [permissionKey.TITLE]: getSubmitValue,
5843   - [permissionKey.VARIABLE]: getSubmitValue,
5844   - [permissionKey.LINE]: getSubmitValue,
5845   - [permissionKey.REAL_TIME]: getSubmitValue,
5846   - [permissionKey.LINE_CHART]: getSubmitValue,
5847   - [permissionKey.BAR_CHART]: getSubmitValue,
5848   - [permissionKey.DEFAULT]: getSubmitValue,
5849   - [permissionKey.VIDEO]: getVideoSubmitValue,
  5849 + [componentType.VAR_IMAGE]: getSubmitValue,
  5850 + [componentType.CHARTS]: getSubmitValue,
  5851 + [componentType.TITLE]: getSubmitValue,
  5852 + [componentType.VARIABLE]: getSubmitValue,
  5853 + [componentType.LINE]: getSubmitValue,
  5854 + [componentType.REAL_TIME]: getSubmitValue,
  5855 + [componentType.LINE_CHART]: getSubmitValue,
  5856 + [componentType.BAR_CHART]: getSubmitValue,
  5857 + [componentType.DEFAULT]: getSubmitValue,
  5858 + [componentType.VIDEO]: getVideoSubmitValue,
  5859 + [componentType.SWITCH]: getSwitchSubmitValue
5850 5860 }
5851 5861
5852 5862 const cell = vertices[0]
5853   - const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
  5863 + const type = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
  5864 + return renderMapping[type]?.(field) || {}
5854 5865
5855   - return renderMapping[permission]?.() || {}
5856   -
5857   - function getSubmitValue() {
  5866 + function getSubmitValue(field) {
5858 5867 const ENABLED_FLAG = 'on'
5859 5868 const additionalKey = HandleDataSource.enumConst
  5869 +
5860 5870 const value = {
5861 5871 configurationId,
5862 5872 contentId: currentPageId.id,
... ... @@ -5910,6 +5920,43 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5910 5920 }
5911 5921 return value
5912 5922 }
  5923 +
  5924 + /**
  5925 + * @description 处理开关组件的保存值
  5926 + * @returns
  5927 + */
  5928 + function getSwitchSubmitValue(field) {
  5929 + const dataSources = getDataSourceBindValue()
  5930 + const enableStatus = getEnableStatus(field)
  5931 + return { configurationId, contentId: currentPageId.id, nodeId: graphId, dataSources, ...enableStatus }
  5932 + }
  5933 +
  5934 +
  5935 + /**
  5936 + * @description 获取开启状态
  5937 + */
  5938 + function getEnableStatus(field = {}) {
  5939 + const ENABLED_FLAG = 'on'
  5940 + const value = {}
  5941 + const hasExistEl = $(`.layui-form[lay-filter="${CONTAINER_FILTER}"]`).find('input[type="checkbox"]')
  5942 +
  5943 + // 筛选页面中存在的数据动效事件交互复选框
  5944 + const allState = []
  5945 + $(hasExistEl).each((i) => {
  5946 + const state = $(hasExistEl[i]).attr('name')
  5947 + allState.push(state)
  5948 + })
  5949 + const allType = [...interactionList, ...dynamicEffectList].filter(item => allState.includes(item.type))
  5950 +
  5951 + for (const item of allType) {
  5952 + !value[item.category] && (value[item.category] = [])
  5953 + value[item.category].push({
  5954 + type: item.type,
  5955 + enabled: field[item.type] === ENABLED_FLAG,
  5956 + })
  5957 + }
  5958 + return value
  5959 + }
5913 5960 }
5914 5961
5915 5962 /**
... ... @@ -6024,7 +6071,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6024 6071 function createSelectDefaultImageEvent() {
6025 6072 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => {
6026 6073 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6027   - generatorUploadLayerComponent((imageState) => {
  6074 + generateUploadLayerComponent((imageState) => {
6028 6075 $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
6029 6076 .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
6030 6077
... ... @@ -6097,7 +6144,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6097 6144 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
6098 6145 const rowFilter = $(event.target).parents('tr').attr('lay-filter')
6099 6146 // createUploadImgLayer(rowFilter)
6100   - generatorUploadLayerComponent((imageState) => {
  6147 + generateUploadLayerComponent((imageState) => {
6101 6148
6102 6149 $(`#${enumActionEl.TABLE_BODY_EL}`)
6103 6150 .find(`tr[lay-filter="${rowFilter}"]`)
... ... @@ -6307,7 +6354,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6307 6354 'lay-submit': '',
6308 6355 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
6309 6356 })
6310   - const { component, echoDataSource, getValue } = generatorDataSourceComponent()
  6357 + const { component, echoDataSource, getValue } = generateDataSourceComponent()
6311 6358 getDataSourceValue = getValue
6312 6359 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
6313 6360 form.render()
... ... @@ -6797,6 +6844,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6797 6844 * @description 处理单击 or 双击事件
6798 6845 */
6799 6846 function handleClickOrDbClick(event) {
  6847 + const basicAttr = sidebarInstance.enumCellBasicAttribute
  6848 + const componentType = sidebarInstance.enumComponentType
  6849 + const currentNodeType = nodeInfo.getAttribute(basicAttr.COMPONENT_TYPE)
  6850 + const isControlComponent = [componentType.SWITCH].includes(currentNodeType)
6800 6851
6801 6852 const enumEventType = {
6802 6853 DOWN: "按下",
... ... @@ -6822,6 +6873,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6822 6873 PAGE: 'PAGE',
6823 6874 LINK: 'LINK',
6824 6875 PROPS: 'PROPS',
  6876 + PARAMS_SETTING: 'PARAMS_SETTING'
6825 6877 }
6826 6878
6827 6879 const enumGetValue = {
... ... @@ -6875,6 +6927,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6875 6927 if (content.type === enumActionType.PAGE) {
6876 6928 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
6877 6929 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  6930 + } else if (content.type === enumActionType.PARAMS_SETTING) {
  6931 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
  6932 + $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
6878 6933 }
6879 6934 form.val(enumActionEl.FORM_FILTER, val)
6880 6935 }
... ... @@ -6897,8 +6952,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6897 6952 },
6898 6953 }
6899 6954 await to(autoSaveGraphInfo())
6900   - const [err] = await to(ConfigurationNodeApi.updateNodeEvent(data))
  6955 + const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(data))
6901 6956 if (err) return
  6957 + isControlComponent && overrideCurrentData('event', 'type', res)
6902 6958 UseLayUi.successMsg()
6903 6959 callback()
6904 6960 }
... ... @@ -6910,6 +6966,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6910 6966 const options = [
6911 6967 { name: '打开链接', id: enumActionType.LINK },
6912 6968 { name: '打开页面', id: enumActionType.PAGE },
  6969 + ...(isControlComponent ? [{ name: '参数设置', id: enumActionType.PARAMS_SETTING }] : []),
6913 6970 { name: '给变量赋值', id: enumActionType.PROPS, disabled: true },
6914 6971 ]
6915 6972 return UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
... ... @@ -6932,6 +6989,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6932 6989 } else if (value === enumActionType.LINK) {
6933 6990 $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
6934 6991 $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
  6992 + } else if (value === enumActionType.PARAMS_SETTING) {
  6993 + $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
  6994 + $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
6935 6995 }
6936 6996 })
6937 6997 }
... ... @@ -6985,7 +7045,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6985 7045 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
6986 7046 submit(() => {
6987 7047 layer.close(index)
6988   - getNodeBindInfo()
  7048 + !isControlComponent && getNodeBindInfo()
6989 7049 })
6990 7050 })
6991 7051 },
... ... @@ -7286,7 +7346,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7286 7346 const {
7287 7347 component,
7288 7348 echoDataSource,
7289   - } = generatorDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
  7349 + } = generateDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
7290 7350 $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
7291 7351 form.render()
7292 7352
... ... @@ -7328,7 +7388,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7328 7388 function handleStateSetting(event) {
7329 7389
7330 7390 const enumActionEl = {
7331   - DATA_SOURCE_COMP_EL: 'stateDataSource',
7332 7391 TABLE_BODY_EL: 'stateTableBodyEl',
7333 7392 LAYER_SUBMIT_FILTER: 'stateSettingSubmitFilter',
7334 7393 ENABLE_FILTER: 'enableFilter',
... ... @@ -7373,12 +7432,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7373 7432 VALUE: 'value'
7374 7433 }
7375 7434
7376   - const {
7377   - component,
7378   - echoDataSource,
7379   - getValue,
7380   - } = generatorDataSourceComponent()
7381   -
7382 7435 const recordData = {
7383 7436 enabled: false
7384 7437 }
... ... @@ -7403,7 +7456,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7403 7456 if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
7404 7457 const rowFilter = $(event.target).parents('tr').attr('lay-filter')
7405 7458 // createUploadImgLayer(rowFilter)
7406   - generatorUploadLayerComponent((imageState) => {
  7459 + generateUploadLayerComponent((imageState) => {
7407 7460
7408 7461 $(`#${enumActionEl.TABLE_BODY_EL}`)
7409 7462 .find(`tr[lay-filter="${rowFilter}"]`)
... ... @@ -7426,7 +7479,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7426 7479 </td>
7427 7480 <td>
7428 7481 <div class="layui-form-item">
7429   - <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-filter="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" />
  7482 + <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" />
  7483 + <input class="layui-input" autocomplete="off" style="display: none;" name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required" />
7430 7484 </div>
7431 7485 </td>
7432 7486 <td>
... ... @@ -7449,7 +7503,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7449 7503 */
7450 7504 function echoData(info = {}) {
7451 7505 const { condition = [] } = info
7452   - echoDataSource(info)
7453 7506
7454 7507 condition.forEach(item => {
7455 7508 if (item[enumConst.TYPE] === enumConst.ENABLE_TYPE) {
... ... @@ -7473,12 +7526,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7473 7526 function setRowFormValue(formFilter, value = {}) {
7474 7527 form.val(formFilter, value)
7475 7528 $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${formFilter}"] .${enumActionEl.SET_IMG_EL} img`).attr('src', value[enumConst.IMAGE_GALLERY_IMAGE_PATH])
  7529 + form.render()
7476 7530 }
7477 7531
7478 7532 async function submit(callback) {
7479 7533 const enableValue = form.val(enumActionEl.ENABLE_FILTER)
7480 7534 const closeValue = form.val(enumActionEl.CLOSE_FILTER)
7481   - const formVal = getValue()
  7535 +
  7536 + const formVal = getDataSourceBindValue()
  7537 +
  7538 + if (![formVal.deviceId && formVal.orgId].every(Boolean)) {
  7539 + UseLayUi.topErrorMsg('请先选择数据源')
  7540 + return
  7541 + }
  7542 +
7482 7543 const formModel = {
7483 7544 configurationId,
7484 7545 contentId: currentPageId.id,
... ... @@ -7491,13 +7552,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7491 7552 await to(autoSaveGraphInfo())
7492 7553 const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
7493 7554 if (err) return
  7555 + overrideCurrentData('act', 'type', res)
7494 7556 UseLayUi.successMsg()
7495 7557 callback()
7496 7558 }
7497 7559
7498 7560 function createLayerForm(type) {
7499 7561 const content = `
7500   - <div id="${enumActionEl.DATA_SOURCE_COMP_EL}" style="width: 300px;"></div>
7501 7562 <table class="layui-table">
7502 7563 <colgroup>
7503 7564 <col width="150">
... ... @@ -7530,10 +7591,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7530 7591 'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
7531 7592 })
7532 7593
7533   - // render data source
7534   - $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
7535   - form.render()
7536   -
7537 7594 const info = getLayerBindInfo('act', type)
7538 7595 const { condition = [], enabled } = info
7539 7596 Object.assign(recordData, { enabled })
... ... @@ -7543,15 +7600,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7543 7600 initialData()
7544 7601 }
7545 7602
7546   -
7547 7603 generatorEventListenner()
7548   - initialData()
7549 7604 },
7550 7605 yes(index) {
7551 7606 form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
7552 7607 submit(() => {
7553 7608 layer.close(index)
7554   - getNodeBindInfo()
  7609 + // getNodeBindInfo()
7555 7610 })
7556 7611 })
7557 7612 },
... ... @@ -7570,7 +7625,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7570 7625 * @param {string} [options.overrideClass = ''] options.overrideClass
7571 7626 * @param {boolean} [options.validate = true ] options.validate
7572 7627 */
7573   - function generatorDataSourceComponent(options = {}) {
  7628 + function generateDataSourceComponent(options = {}) {
7574 7629 const { overrideClass = '', validate = true } = options
7575 7630 const componentFilter = `data-source__component-filter-${Date.now()}`
7576 7631 const componentId = `data-source__component-${Date.now()}`
... ... @@ -7778,6 +7833,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7778 7833 })
7779 7834 }
7780 7835
  7836 + /**
  7837 + *
  7838 + * @returns {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
  7839 + */
7781 7840 function getValue() {
7782 7841 return form.val(componentFilter)
7783 7842 }
... ... @@ -7788,7 +7847,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7788 7847 /**
7789 7848 * @description 生成上传弹出层组件
7790 7849 */
7791   - function generatorUploadLayerComponent(callback) {
  7850 + function generateUploadLayerComponent(callback) {
7792 7851
7793 7852 const enumActionEl = {
7794 7853 /**
... ... @@ -8076,6 +8135,95 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8076 8135 return { record: imageState }
8077 8136 }
8078 8137
  8138 +
  8139 + /**
  8140 + * @description TODO 图片上传容器
  8141 + * @param {} option
  8142 + * @param {} option.el
  8143 + */
  8144 + function generateUploadImgContainer({ el }) {
  8145 +
  8146 +
  8147 + const enumConst = {
  8148 + /**
  8149 + * @description 图片来源
  8150 + */
  8151 + IMAGE_ORIGIN: 'imageOrigin',
  8152 +
  8153 + /**
  8154 + * @description 图库图形类别
  8155 + */
  8156 + IMAGE_GALLERY_CATEGORY: 'category',
  8157 +
  8158 + /**
  8159 + * @description 图表图形路径
  8160 + */
  8161 + IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
  8162 + }
  8163 +
  8164 + const enumActionEl = {
  8165 +
  8166 + CONTAINER_FILTER: 'imgContainerFilter',
  8167 +
  8168 + /**
  8169 + * @description
  8170 + */
  8171 + SET_IMG_EL: 'variableImageTableSetImgEl',
  8172 +
  8173 + /**
  8174 + * @description 预览
  8175 + */
  8176 + PREVIEW_IMG_CONTAINER: 'img__container',
  8177 +
  8178 + /**
  8179 + * @description 删除
  8180 + */
  8181 + DEL_PREVIEW_IMG: 'img__delete',
  8182 + }
  8183 +
  8184 + const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now()}`
  8185 +
  8186 + function createTemplate() {
  8187 + return `
  8188 + <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
  8189 + <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
  8190 + <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
  8191 + <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
  8192 + <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
  8193 + <img src="" alt="">
  8194 + <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
  8195 + <div class="add__button">+</div>
  8196 + </div>
  8197 + </div>
  8198 + `
  8199 + }
  8200 +
  8201 + /**
  8202 + * @description 设置回显
  8203 + * @param {} value
  8204 + */
  8205 + function setValue(value = {}) {
  8206 + form.val(getFormFilter, value)
  8207 + }
  8208 +
  8209 + /**
  8210 + * @description 获取值
  8211 + * @returns
  8212 + */
  8213 + function getValue() {
  8214 + return form.val(getFormFilter) || {}
  8215 + }
  8216 +
  8217 + function mount() {
  8218 + if (!el) throw Error('mount element is required')
  8219 + $(el).append(createTemplate())
  8220 + }
  8221 +
  8222 + function generateEventLinstenner() {
  8223 + $(el)
  8224 + }
  8225 + }
  8226 +
8079 8227 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
8080 8228 setTimeout(() => {
8081 8229
... ... @@ -12316,6 +12464,16 @@ class UseLayUi {
12316 12464 static errorMsg(msg = '操作失败', options) {
12317 12465 UseLayUi.msg(msg, { ...options, icon: 5 })
12318 12466 }
  12467 +
  12468 + static topSuccessMsg(msg = '操作成功', options) {
  12469 + const { layer } = layui
  12470 + layer.msg(`<div style="padding: 20px; display: flex; align-items: center;"><i class="layui-layer-ico layui-layer-ico6" style="width: 30px;height: 30px;"></i><span style="margin-left: 5px">${msg}</span></div>`, { ...options, type: 1, icon: 6, time: 2000, })
  12471 + }
  12472 +
  12473 + static topErrorMsg(msg = '操作失败', options) {
  12474 + const { layer } = layui
  12475 + layer.msg(`<div style="padding: 20px; display: flex; align-items: center;"><i class="layui-layer-ico layui-layer-ico5" style="width: 30px;height: 30px;"></i><span style="margin-left: 5px">${msg}</span></div>`, { ...options, type: 1, icon: 5, time: 2000, })
  12476 + }
12319 12477 }
12320 12478
12321 12479
... ...