|
|
const e="e46b9366-f350-4130-8b74-b718deccc636",a="custom-form-input",n="表单输入框",t='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700615525422" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5042" xmlns:xlink="http://www.w3.org/1999/xlink" width="228.515625" height="200"><path d="M1024 128a39.862857 39.862857 0 0 1 36.571429 42.788571v682.422858a39.862857 39.862857 0 0 1-36.571429 42.788571H146.285714a39.862857 39.862857 0 0 1-36.571428-42.788571V170.788571A39.862857 39.862857 0 0 1 146.285714 128h877.714286M1024 0H146.285714C65.462857 0 0 76.434286 0 170.788571v682.422858C0 947.565714 65.462857 1024 146.285714 1024h877.714286c80.822857 0 146.285714-76.434286 146.285714-170.788571V170.788571C1170.285714 76.434286 1104.822857 0 1024 0z" fill="#4C4A58" p-id="5043"></path><path d="M310.857143 292.571429A54.857143 54.857143 0 0 0 256 347.428571v329.142858a54.857143 54.857143 0 0 0 109.714286 0v-329.142858A54.857143 54.857143 0 0 0 310.857143 292.571429z" fill="#51C75B" p-id="5044"></path><path d="M365.714286 292.571429H256a54.857143 54.857143 0 0 0 0 109.714285h109.714286a54.857143 54.857143 0 0 0 0-109.714285zM365.714286 621.714286H256a54.857143 54.857143 0 0 0 0 109.714285h109.714286a54.857143 54.857143 0 0 0 0-109.714285z" fill="#51C75B" p-id="5045"></path><path d="M556.251429 621.714286a54.857143 54.857143 0 1 0 54.857142 54.857143 54.857143 54.857143 0 0 0-54.857142-54.857143zM746.788571 621.714286a54.857143 54.857143 0 1 0 54.857143 54.857143 54.857143 54.857143 0 0 0-54.857143-54.857143z" fill="#4C4A58" p-id="5046"></path></svg>',l="svg",o="基础",i="常用",c=!1,u=!0,d="文字",s=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal",
"nodes": [ { "id": "62459966-2658-4f68-b00b-1cebd129d176", "type": "custom-form-input", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "62459966-2658-4f68-b00b-1cebd129d176", "width": 165, "height": 38, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "showConfirmBtn": true, "showSearchIcon": false, "confirmText": "确认", "confirmBack": "#1984eb", "confirmTextColor": "rgba(255, 255, 255, 1)", "confirmTextSize": 14, "confirmWidth": 50, "placeholder": "请输入文本...", "placeholderColor": "", "inputBackground": "rgba(155, 155, 155, 0.5)", "borderWidth": 1, "borderRadius": 2, "fontSize": 14, "showChangeDialog": false, "radios": "yes", "nodeAlias": "表单输入框", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "borderColor": "#1984eb", "borderStyle": "solid", "fontColor": "#1984eb", "fontFamily": "Microsoft Yahei", "inputTextAlign": "center", "fontStyle": "", "searchIconColor": "#1296db", "inputGradBack": "", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "change", "enable": false, "config": "", "users": "" } ] } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})const FormInput = { template: \`<div :style="getBorderStyle" @click="focus">
<span v-if="showSearchIcon" :style="getSearchIconStyle(fontSize, iconColor, inputBackground)" > <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70%" height="70%"> <path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" :fill="searchIconColor"></path> </svg> </span> <input ref="inputRef" v-model="inputValue" :style="getInputStyle" :placeholder="placeholder" class="scada-form-input" @change="changeDebounced" @input="inputHandler"/> <div v-if="showConfirmBtn" :style="getBtnStyle" @click="changeHandler">{{confirmText}}</div> </div>\`, props: { realValue: { type: String, default: '' }, fontColor: { type: String, default: '#ffffff' }, fontSize: { type: Number, default: 14 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, width: { type: Number, default: 80 }, height: { type: Number, default: 35 }, lineHeight: { type: Number, default: 35, }, showConfirmBtn: { type: Boolean, default: true, }, showChangeDialog: { type: Boolean, default: true, }, confirmText: { type: String, default: '确认' }, confirmBack: { type: String, default: '#1984eb' }, confirmWidth: { type: Number, default: 70 }, placeholder: { type: String, default: '请输入文本' }, placeholderColor: { type: String, default: '' }, inputBackground: { type: String, default: 'rgba(155, 155, 155, 0.5)' }, inputGradBack: { type: String, default: '' }, borderWidth: { type: Number, default: 1 }, borderRadius: { type: Number, default: 2 }, borderColor: { type: String, default: '#1984eb' }, borderStyle: { type: String, default: 'solid' }, confirmTextColor: { type: String, default: '#ffffff' }, inputTextAlign: { type: String, default: 'center' }, confirmTextSize: { type: Number, default: 14 }, showSearchIcon: { type: Boolean, default: false }, searchIconColor: { type: String, default: '#1296db' } }, emits: ["change"], computed: { getBorderStyle() { const { width, height, borderWidth, borderRadius, borderColor, borderStyle } = this return { width: width + 'px', height: height + 'px', "border-radius": borderRadius + 'px', "border-color": borderColor, "border-style": borderStyle, "border-width": borderWidth + 'px', "box-sizing": "border-box", "display": "flex" } }, getInputStyle() { const { width, confirmWidth, inputBackground, inputGradBack, placeholderColor, showConfirmBtn, fontColor, fontSize, fontFamily, fontStyle, inputTextAlign, showSearchIcon } = this; const style = {}; if (fontStyle) { if (fontStyle.includes('bold')) { style["font-weight"] = 'bolder'; } if (fontStyle.includes('italic')) { style["font-style"] = 'italic' } if (fontStyle.includes('underline,line-through')) { style["text-decoration"] = 'underline line-through' } else if (fontStyle.includes('line-through,underline')) { style["text-decoration"] = 'line-through underline' } else if (fontStyle.includes('underline')) { style["text-decoration"] = 'underline' } else if (fontStyle.includes('line-through')) { style["text-decoration"] = 'line-through' } } if (inputGradBack && !inputGradBack.includes('url')) { style.background = \`url(\${inputGradBack})\`;
style.backgroundSize = '100% 100%'; }
let w = width + "px"; if (showConfirmBtn && !showSearchIcon) { w = width - confirmWidth + "px"; } else if (showSearchIcon && !showConfirmBtn) { w = width - 30 + "px" } else if (showSearchIcon && showConfirmBtn) { w = width - confirmWidth - 30 + "px"; }
return { "width": w, "background-color": inputBackground, "outline": "none", "border": "none", "font-size": fontSize + "px", "color": fontColor, "font-family": fontFamily, "text-align": inputTextAlign, "text-indent": inputTextAlign === "left" ? "5px" : "0px", ...style, } }, getBtnStyle() { const { confirmWidth, height, confirmBack, confirmTextColor, fontSize, confirmTextSize } = this; return { "flex": "0 0 " + confirmWidth + "px", "color": confirmTextColor, "font-size": confirmTextSize + "px", "background-color": confirmBack, "text-align": "center", "line-height": height + "px", "cursor": "pointer", } }, getSearchIconStyle: () => (fontSize, iconColor, inputBackground) => { return { flex: '0 0 30px', display: 'flex', 'justify-content': 'center', 'align-items': 'center', 'font-size': fontSize + 'px', color: iconColor, background: inputBackground } } }, setup(props, { emit }) { const { ref, watch } = Vue; const inputValue = ref(null); const inputRef = ref(null); const isInputing = ref(false);
const changeCallback = (e) => { if (!props.showConfirmBtn) { emit("change", e.target.value); isInputing.value = false; } } const changeDebounced = window._.debounce(changeCallback, 1000); const changeHandler = () => { emit("change", inputValue.value); isInputing.value = false; }
watch(() => props.realValue, (val) => { if (isInputing.value) { return; } val && (inputValue.value = val); }, { immediate: true, })
watch(() => props.placeholderColor, (val) => { if (val) { const root = document.querySelector(':root'); root.style.setProperty('--scada-input-placeholder-color', val); } }, { immediate: true })
const focus = () => { setTimeout(() => { inputRef.value.focus(); }, 100) }
let timeOut = null; const inputHandler = () => { isInputing.value = true; if (!props.showConfirmBtn) { if (timeOut) { clearTimeout(timeOut) } timeOut = setTimeout(() => { isInputing.value = false; }, 5000) } }
return { changeDebounced, inputValue, changeHandler, inputRef, focus, inputHandler, } }}
class CustomFormInputNode extends HtmlResize.view { oldProperties = {}; instance = null;
setHtml(rootEl) { const { properties, width, height, } = this.props.model;
const { fontColor, fontSize, fontFamily, fontStyle, lineHeight, showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, showSearchIcon, searchIconColor, inputBackground, inputGradBack, placeholderColor, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize } = properties; const { model, graphModel } = this.props;
const { normalData, eventsData } = properties.dynamic || {}; let realValue = ""; if (normalData) { realValue = window.resolveScadaNewValue(normalData.defaultValue); }
const changeHandler = (e) => { const findChange = eventsData?.eventCombo.find( i => i.eventType === 'change'); const cacheToken = sessionStorage.getItem('v1@CacheToken'); if(!cacheToken) { return window.createLoginDialog(); } const tokenParsed = JSON.parse(cacheToken || '{}'); if (findChange.users && !findChange.users.includes(tokenParsed.userid)) { return messageFn('无用户权限') } graphModel.eventCenter.emit("node:change", { data: this.props.model, e, }); }
if (this.instance) { Object.assign(this.instance.component.props, { realValue, fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, showSearchIcon, searchIconColor, showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, placeholderColor, inputBackground, inputGradBack, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize, onChange: changeHandler }) return; }
const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(FormInput, { realValue, fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, showSearchIcon, searchIconColor, showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, placeholderColor, inputBackground, inputGradBack, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize, onChange: changeHandler }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); this.instance = instance; }
sameProps(properties) { const isSame = window._.isEqual(this.oldProperties, properties); if (isSame) return true; this.oldProperties = properties; return false }
// 生命周期 支持重写���容, 但格式需一致
shouldUpdate() { const { properties } = this.props.model; const propertiesBack = window._.cloneDeep(properties); // 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
delete propertiesBack.event; if (this.sameProps(propertiesBack)) { return false } return true; }}
class CustomFormInputModel extends HtmlResize.model { initNodeData(data) { // 自定义组件，需最开始重置一下text 。
data.text = { value: "", x: data.x, y: data.y, };
super.initNodeData(data); const { properties } = this; this.width = properties.width || 80; this.height = properties.height || 35; }
setAttributes() { // 自定义组件需重置 text
const { x, y, properties } = this; const { textHorizontalMove = 0, textVerticalMove = 0 } = properties; this.text = { ...this.text, x: x + textHorizontalMove, y: y + textVerticalMove, value: "", } }}
lf.register({ type: 'custom-form-input', view: CustomFormInputNode, model: CustomFormInputModel,})
`,css:`:root{\r --scada-input-placeholder-color: #999;\r}\rinput.scada-form-input::-webkit-input-placeholder{\r color: var(--scada-input-placeholder-color);\r}`,fakeData:""},m={id:e,name:a,aliasName:n,image:t,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:r};export{n as aliasName,s as config,m as default,r as files,o as groupName,i as groupType,e as id,t as image,l as imageType,u as isDefault,c as isRemote,a as name,d as sectionType};
|
