form-designer-xinyi
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 10.7 kB
JavaScript
;var A=Object.defineProperty;var M=(s,e,t)=>e in s?A(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var a=(s,e,t)=>M(s,typeof e!="symbol"?e+"":e,t);const c=require("vue"),h=(s,e)=>c.defineAsyncComponent({loader:s,loadingComponent:e,delay:80});function g(s=10){return Math.random().toString(36).substring(2,2+s)}function k(s){return s.charAt(0).toUpperCase()+s.slice(1)}function m(s,e=new WeakMap){if(typeof s!="object"||s===null)return s;if(e.has(s))return e.get(s);if(Array.isArray(s)){const i=s.map(n=>m(n,e));return e.set(s,i),i}const t={};return e.set(s,t),Object.keys(s).forEach(i=>{t[i]=m(s[i],e)}),t}function F(s){const[e]=b([m(s)],t=>{var n,o;const i={...t,id:`${t.type}_${g(8)}`};return(i.field||i.input)&&!((o=(n=G.getComponentConfingByType(i.type))==null?void 0:n.editConstraints)!=null&&o.fixedField)&&(i.field=i.id),i});return e}function C(s,e){for(const[t,i]of Object.entries(e)){const n=s==null?void 0:s[t];n&&i&&typeof n=="object"&&typeof i=="object"?C(n,i):s[t]=i}Object.keys(s).reverse().forEach(t=>{e.hasOwnProperty(t)||(Array.isArray(e)?s.splice(t,1):delete s[t])})}function O(s,e,t=[],i=new WeakMap){const n=o=>{if(Array.isArray(o))return o.map(n);if(typeof o=="object"&&o!==null){if(i.has(o))return"[Circular]";i.set(o,!0);const r=Object.keys(o).sort(),l={};return r.forEach(u=>{t.includes(u)||(l[u]=n(o[u]))}),i.delete(o),l}else return o};return JSON.stringify(n(s))===JSON.stringify(n(e))}function R(s,e){const t=[];let i=!1;function n(o){if(t.push(o),o.id===e&&(i=!0),!i&&o.children!=null&&o.children.length>0)for(let r=0;r<o.children.length&&(n(o.children[r]),!i);r++);if(!i&&o.slots)for(let r in o.slots)for(let l=0;l<o.slots[r].length&&(n(o.slots[r][l]),!i);l++);i||t.pop()}return s.forEach(n),i||console.error(`没有查询到id为${e}的节点`),t}function B(s,e){const t=s.split(".");let i=e;for(let n=0;n<t.length;n++)if(i=i[t[n]],typeof i>"u")return;return i}function L(s,e,t){const i=e.split(".");let n=t;i.forEach((o,r)=>{if(r===i.length-1){n[o]=s;return}n=n[o]??(n[o]={})})}function T(s,e="default"){return w(s,e).map(i=>i.field)}function w(s,e="default"){const t=d(s,n=>{var o;return n.type==="form"&&(((o=n.componentProps)==null?void 0:o.name)??n.name===e)},!0);return d((t==null?void 0:t.children)??[],n=>!!n.input,!1,n=>n.type!=="subform")}function d(s,e,t=!1,i){const n=[],o=[...s];for(;o.length;){const r=o.pop();if(r!=null&&r.children&&(!i||i(r))&&o.push(...r.children),r!=null&&r.slots&&(!i||i(r)))for(let l in r.slots)o.push(...r.slots[l]);if(e(r)&&(n.push(r),t))return r}return t?!1:n}function b(s,e,t){const i=[...s];for(;i.length;){const n=i.pop();if(n!=null&&n.children&&(!t||t(n))&&i.push(...n.children),n!=null&&n.slots&&(!t||t(n)))for(let o in n.slots)i.push(...n.slots[o]);C(n,e(n))}return s}function V(s,e){const t=d(s,i=>i.id===e,!0);if(!t)throw new Error(`没有查询到id为${e}的节点`);return t}function z(s,e){const t=[{type:"",children:s}];let i=0,n=null;if(d(t,o=>{if(n=o.children??null,!n){if(o!=null&&o.slots)for(let r in o.slots){n=o.slots[r];for(let l=0;l<n.length;l++)if(n[l].id===e)return i=l,!0}return!1}for(let r=0;r<n.length;r++)if(n[r].id===e)return i=r,!0;return!1},!0),!n)throw new Error(`没有查询到id为${e}的节点`);return{list:n,schema:n[i],index:i}}function E(s){const e={schemas:[{type:"page",id:"root",label:"页面",children:[{label:"表单",type:"form",icon:"epic-icon-daibanshixiang",labelWidth:s.config.labelWidth||100,name:"default",componentProps:{layout:s.config.layout||"horizontal",labelWidth:s.config.labelWidth||100,labelLayout:s.config.labelLayout==="flex"?"fixed":"flex",labelCol:s.config.labelCol||{span:5},wrapperCol:s.config.wrapperCol||{span:19},hideRequiredMark:s.config.hideRequiredMark||!1,colon:s.config.colon||!0,labelAlign:s.config.labelAlign||"right",size:s.config.size||"middle"},children:[],id:"form_"+g()}],componentProps:{style:{padding:"16px"}}}],script:s.script||""};return e.schemas[0].children[0].children=p(s.list),e}function p(s,e){return s.map(t=>{var u,f,S;let i=t.type??"";const n=t.options??{},o=(v,y)=>{i===v&&(i=y,n.defaultValue&&(n.defaultValue=JSON.parse(n.defaultValue)))};if(o("uploadImg","upload-image"),o("uploadFile","upload-file"),i==="date"&&n.range&&(n.type="daterange",delete n.range),(i==="date"||i==="time")&&(n.valueFormat=n.format),i==="textarea"){const{minRows:v,maxRows:y}=n;n.autoSize={minRows:v,maxRows:y},delete n.minRows,delete n.maxRows}i==="number"&&!n.precision&&delete n.precision,n.width&&(n.style={width:n.width},delete n.width),i==="grid"&&(i="row"),e&&e.type==="grid"&&(i="col",n.span=t.span,t.key=g());const r={label:t.label,type:i,icon:t.icon||"",field:t.model,componentProps:n,id:t.key};return(n.noFormItem||!n.showLabel)&&(r.noFormItem=!0,delete n.noFormItem,delete n.showLabel),n.clearable&&(n.allowClear=!0,delete n.clearable),["input","textarea","number","password","select","cascader","checkbox","radio","date","time","slider","switch","color-picker","upload-file","upload-image"].includes(i)&&(r.input=!0,((f=(u=t.rules)==null?void 0:u[0])==null?void 0:f.required)===!1&&t.rules.shift(),((S=t.rules)==null?void 0:S.length)>0&&(r.rules=t.rules)),t.list&&(r.children=p(t.list,t)),t.columns&&(r.children=p(t.columns,t)),t.trs&&(r.children=p(t.trs,t)),t.tds&&(r.children=p(t.tds,t)),r})}class x{constructor(){a(this,"initialized",c.ref(!1));a(this,"components",{});a(this,"componentConfigs",{});a(this,"baseComponentTypes",[]);a(this,"componentSchemaGroups",c.ref([]));a(this,"hiddenComponents",[]);a(this,"componentGroupNameMap",{});a(this,"sortedGroups",["表单","布局"]);a(this,"viewsContainers",{activitybars:c.shallowRef([]),rightSidebars:c.shallowRef([])});a(this,"publicMethods",{})}component(e,t){typeof t=="function"&&(t=h(t)),this.components[e]=t}registerComponent(e){this.component(e.defaultSchema.type,e.component),e.defaultSchema.input&&(e.config.action||(e.config.action=[]),e.config.action.unshift({type:"setValue",describe:"设置值",argsConfigs:[{...e.defaultSchema,label:"设置数据",field:"0"}]},{type:"getValue",describe:"获取值"})),this.componentConfigs[e.defaultSchema.type]=e,this.computedComponentSchemaGroups()}removeComponent(e){delete this.componentConfigs[e],delete this.components[e]}setBaseComponentTypes(e){this.baseComponentTypes=e}addBaseComponentTypes(e){this.baseComponentTypes.push(e)}removeBaseComponents(){this.baseComponentTypes.forEach(e=>{this.removeComponent(e)}),this.setBaseComponentTypes([]),this.computedComponentSchemaGroups()}getComponents(){return this.components}getComponent(e){return this.components[e]}registerActivitybar(e){typeof e.component=="function"&&(e.component=h(e.component)),typeof e.visible>"u"&&(e.visible=!0);const t=this.viewsContainers.activitybars.value.findIndex(i=>i.id===e.id);t!==-1?this.viewsContainers.activitybars.value[t]=e:this.viewsContainers.activitybars.value.push(e)}getActivitybars(){return this.viewsContainers.activitybars.value}hideActivitybar(e,t="title"){const i=this.viewsContainers.activitybars.value.findIndex(n=>n[t]===e);i!==-1&&(this.viewsContainers.activitybars.value[i].visible=!1)}showActivitybar(e,t="title"){const i=this.viewsContainers.activitybars.value.findIndex(n=>n[t]===e);i!==-1&&(this.viewsContainers.activitybars.value[i].visible=!0)}registerRightSidebar(e){typeof e.component=="function"&&(e.component=h(e.component)),typeof e.visible>"u"&&(e.visible=!0);const t=this.viewsContainers.rightSidebars.value.findIndex(i=>i.id===e.id);t!==-1?this.viewsContainers.rightSidebars.value[t]=e:this.viewsContainers.rightSidebars.value.push(e)}getRightSidebars(){return this.viewsContainers.rightSidebars.value}hideRightSidebar(e,t="title"){const i=this.viewsContainers.rightSidebars.value.findIndex(n=>n[t]===e);i!==-1&&(this.viewsContainers.rightSidebars.value[i].visible=!1)}showRightSidebar(e,t="title"){const i=this.viewsContainers.rightSidebars.value.findIndex(n=>n[t]===e);i!==-1&&(this.viewsContainers.rightSidebars.value[i].visible=!0)}getComponentConfings(){return this.componentConfigs}getComponentConfingByType(e){return this.componentConfigs[e]}computedComponentSchemaGroups(){const e=[];Object.values(this.componentConfigs).forEach(t=>{if(!this.hiddenComponents.includes(t.defaultSchema.type)&&t.groupName){const i=this.componentGroupNameMap[t.groupName]??t.groupName;let n=e.findIndex(r=>r.title===i);n===-1&&(e.push({title:i,list:[]}),n=e.length-1);let o=e[n].list.findIndex(r=>r.type===t.defaultSchema.type);o!==-1?e[n].list[o]=t.defaultSchema:e[n].list.push(t.defaultSchema)}}),e.sort((t,i)=>{const n=this.sortedGroups.indexOf(t.title),o=this.sortedGroups.indexOf(i.title);return n===-1?1:o===-1?-1:n-o}),this.componentSchemaGroups.value=e}getComponentSchemaGroups(){return this.componentSchemaGroups}setComponentGroupNameMap(e,t){this.componentGroupNameMap[e]=t}clearComponentGroupNameMap(){this.componentGroupNameMap={}}setSortedGroups(e){this.sortedGroups=e,this.computedComponentSchemaGroups()}clearSortedGroups(){this.sortedGroups=[],this.computedComponentSchemaGroups()}hideComponent(e){this.hiddenComponents.push(e),this.computedComponentSchemaGroups()}showComponent(e){this.hiddenComponents=this.hiddenComponents.filter(t=>t!==e),this.computedComponentSchemaGroups()}setHideComponents(e){this.hiddenComponents=e,this.computedComponentSchemaGroups()}setInitialized(e){this.initialized.value=e}addPublicMethod(e){const t=e.methodName??e.name,i=e.method??e.handler;this.publicMethods[t]={...e,name:t,handler:i}}removePublicMethod(e){delete this.publicMethods[e]}}const G=new x;function I(){const s=c.ref([]),e=c.ref([]),t=c.ref(null);let i=0;function n(l,u="插入组件"){const f=Date.now();i+150>f||(i=f,t.value!=null&&(s.value.push(t.value),e.value.splice(0,e.value.length)),t.value={type:u,componentSchema:JSON.stringify(l)},s.value.length>20&&s.value.unshift())}function o(){if(s.value.length===0)return!1;const l=s.value.pop();return t.value!=null&&e.value.push(t.value),t.value=l,JSON.parse(l.componentSchema)}function r(){if(e.value.length===0)return!1;const l=e.value.pop();return t.value!=null&&s.value.push(t.value),t.value=l,JSON.parse(l.componentSchema)}return{recordList:s,undoList:e,currentRecord:t,push:n,undo:o,redo:r}}const P=I();exports.PluginManager=x;exports.capitalizeFirstLetter=k;exports.convertKFormData=E;exports.deepClone=m;exports.deepCompareAndModify=C;exports.deepEqual=O;exports.findSchemaById=V;exports.findSchemaInfoById=z;exports.findSchemas=d;exports.generateNewSchema=F;exports.getAttributeValue=B;exports.getFormFields=T;exports.getFormSchemas=w;exports.getMatchedById=R;exports.getUUID=g;exports.loadAsyncComponent=h;exports.mapSchemas=b;exports.pluginManager=G;exports.recursionConvertedNode=p;exports.revoke=P;exports.setAttributeValue=L;exports.useRevoke=I;