UNPKG

@tuoyuan/web-plus

Version:

基于arco-design-vue的配置化表格表单组件

2 lines (1 loc) 5.26 kB
"use strict";const e=require("vue");function B(t,o){let l;return function(...i){clearTimeout(l),l=setTimeout(()=>{t.apply(this,i)},o)}}function T(t,o=300){const l=e.ref(window.innerWidth),i=e.ref(window.innerHeight),u=B(()=>{l.value=window.innerWidth,i.value=window.innerHeight,t&&t({width:l.value,height:i.value})},o);return e.onMounted(()=>{u(),window.addEventListener("resize",u)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",u)}),{width:l,height:i}}function x(t,o,l){e.onMounted(()=>{const[i,s]=o.value,u=l.context[i],d=s.split(".");t.value=d.reduce((f,c)=>f&&f[c],u),t.addEventListener("input",f=>{const c=f.target.value;d.reduce((r,n,a)=>{if(a===d.length-1)r[n]=c;else return r[n]||l.context.$set(r,n,{}),r[n]},u)})})}function k(t){return t==null}function b(t){if(typeof t!="object"||t===null)return t;let o=Array.isArray(t)?[]:{};for(let l in t)t.hasOwnProperty(l)&&(o[l]=b(t[l]));return o}let M={a:1,b:{c:2}};b(M);const w=new Set;function y(){let t;do t=`${Date.now()}${Math.floor(Math.random()*1e6)}`;while(w.has(t));return w.add(t),t}const C={size:"small"},O={colGap:0,rowGap:0,span:8,marginTop:"2px",autoLabelWidth:!0,scrollToFirstError:!0,layout:"horizontal",gutter:10,labelAlign:"right",columns:[],justify:"start",align:"start",wrap:!0,submitBtn:!0,resetBtn:!0,menuBtn:!0,menu:!0,submitBtnText:"提交",resetBtnText:"重置",...C},N={pagePosition:"br",resizable:!1,calcHeight:20,align:"left",stripe:!1,drag:!1,rowKey:"id",scroll:{},submitBtn:!1,bordered:{cell:!0},columns:[],...C},V=t=>{const o=e.ref(t),l=e.reactive({});function i(n){n.columns&&n.columns.forEach(a=>{a._id=y()}),o.value=n}function s(n,a){Reflect.set(o.value,n,a)}function u(){o.value.columns=[]}function d(n,a){a?o.value.columns.splice(a,0,n):o.value.columns.push(n)}function f(n){o.value.columns.splice(n,1)}function c(n,a,p){const{found:m,config:v}=r(n,o.value);if(m)Reflect.set(v,a,p);else throw new Error("字段不存在")}function r(n,a){const p=a.columns.find(m=>m.field===n);if(p)return{found:!0,config:p};if(!a.groups)return{found:!1,config:null};for(const m of a.groups??[]){const v=m.columns.find(h=>h.field===n);if(v)return{found:!0,config:v,group:m.label}}return{found:!1,config:null}}return{option:o,formData:l,setColumn:c,addColumn:d,clearColumn:u,setOptionConfig:s,setOption:i,delColumn:f}},z={style:{display:"flex","justify-content":"space-between"}},_=e.defineComponent({name:"AModalForm",__name:"modal-form",props:e.mergeModels({option:{default:{}},loading:{type:Boolean,default:!1},onText:{default:"确定"},cancelText:{default:"取消"},title:{default:"表单"},footer:{type:Boolean,default:!0},default:{},cancelBtn:{type:Boolean,default:!0},maskClosable:{type:Boolean,default:!1}},{visible:{default:!0},visibleModifiers:{}}),emits:e.mergeModels(["submit","close"],["update:visible"]),setup(t,{emit:o}){e.ref(C.size);const l=t,i=o,s=e.ref(),u=e.computed(()=>Object.assign({span:12,menu:!1},l.option.value)),d=e.useModel(t,"visible");function f(){s.value.validate().then(n=>{n===void 0&&i("submit",r.value)})}function c(){i("close")}const r=e.ref(b(l.default));return(n,a)=>{const p=e.resolveComponent("a-form-plus"),m=e.resolveComponent("a-button"),v=e.resolveComponent("a-space"),h=e.resolveComponent("a-modal");return e.openBlock(),e.createBlock(h,{visible:d.value,"onUpdate:visible":a[1]||(a[1]=g=>d.value=g),"unmount-on-close":!0,maskClosable:n.maskClosable,title:n.title,"body-style":{maxHeight:"calc(100vh - 400px)"},onClose:c,onCancel:c,footer:n.footer},{footer:e.withCtx(g=>[e.createElementVNode("div",z,[a[2]||(a[2]=e.createElementVNode("div",null,null,-1)),e.createVNode(v,null,{default:e.withCtx(()=>[n.cancelBtn?(e.openBlock(),e.createBlock(m,{key:0,loading:n.loading,onClick:c},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.cancelText),1)]),_:1},8,["loading"])):e.createCommentVNode("",!0),e.createVNode(m,{loading:n.loading,type:"primary",onClick:f},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.onText),1)]),_:1},8,["loading"])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(p,{class:e.normalizeClass({"form-modal--view":!0}),disabled:n.loading,option:u.value,ref_key:"formRef",ref:s,modelValue:r.value,"onUpdate:modelValue":a[0]||(a[0]=g=>r.value=g)},null,8,["disabled","option","modelValue"])]),_:1},8,["visible","maskClosable","title","footer"])}}});function E(t){const o=e.getCurrentInstance(),l=o==null?void 0:o.appContext,i=e.reactive({visible:!1,loading:!1}),s=document.createElement("div"),u=()=>{i.loading=!1,i.visible=!1,e.render(null,s),document.body.removeChild(s)},d=e.ref(t==null?void 0:t.option);function f(){document.body.appendChild(s);const r=e.h(_,{title:t.title,default:(t==null?void 0:t.default)??{},okText:t.okText,cancelText:t.cancelText,cancelBtn:t.cancelBtn,width:t.width,option:d,visible:i.visible,loading:i.loading,"onUpdate:visible":n=>i.visible=n,onClose:()=>{t.close&&t.close(),u()},onSubmit:n=>{i.loading=!0,t.submit&&t.submit(n,u)}});l&&(r.appContext=l),e.render(r,s)}function c(){i.visible=!0,f()}return{show:c,close:u,option:d}}exports.deepCopy=b;exports.defaultFormOption=O;exports.defaultOption=C;exports.defaultTableOption=N;exports.useForm=V;exports.useModalForm=E;exports.useNestedModel=x;exports.useWindowResize=T;exports.uuid=y;exports.validataNull=k;