UNPKG

krco

Version:

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

2 lines (1 loc) 5.32 kB
"use strict";const t=require("vue");function T(e,o){let l;return function(...a){clearTimeout(l),l=setTimeout(()=>{e.apply(this,a)},o)}}function _(e,o=300){const l=t.ref(window.innerWidth),a=t.ref(window.innerHeight),r=T(()=>{l.value=window.innerWidth,a.value=window.innerHeight,e&&e({width:l.value,height:a.value})},o);return t.onMounted(()=>{r(),window.addEventListener("resize",r)}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",r)}),{width:l,height:a}}function x(e,o,l){t.onMounted(()=>{const[a,u]=o.value,r=l.context[a],d=u.split(".");e.value=d.reduce((f,c)=>f&&f[c],r),e.addEventListener("input",f=>{const c=f.target.value;d.reduce((s,n,i)=>{if(i===d.length-1)s[n]=c;else return s[n]||l.context.$set(s,n,{}),s[n]},r)})})}function k(e){return e==null}function b(e){if(typeof e!="object"||e===null)return e;let o=Array.isArray(e)?[]:{};for(let l in e)e.hasOwnProperty(l)&&(o[l]=b(e[l]));return o}let O={a:1,b:{c:2}};b(O);const h=new Set;function y(){let e;do e=`${Date.now()}${Math.floor(Math.random()*1e6)}`;while(h.has(e));return h.add(e),e}const C={size:"small"},M={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=e=>{const o=t.ref(e),l=t.ref({});function a(n){n.columns&&n.columns.forEach(i=>{i._id=y()}),o.value=n}function u(n,i){Reflect.set(o.value,n,i)}function r(){o.value.columns=[]}function d(n,i){i?o.value.columns.splice(i,0,n):o.value.columns.push(n)}function f(n){o.value.columns.splice(n,1)}function c(n,i,p){const{found:m,config:v}=s(n,o.value);if(m)Reflect.set(v,i,p);else throw new Error("字段不存在")}function s(n,i){const p=i.columns.find(m=>m.field===n);if(p)return{found:!0,config:p};if(!i.groups)return{found:!1,config:null};for(const m of i.groups??[]){const v=m.columns.find(w=>w.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:r,setOptionConfig:u,setOption:a,delColumn:f}},z={style:{display:"flex","justify-content":"space-between"}},E=t.defineComponent({__name:"modal-form",props:t.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:t.mergeModels(["submit","close"],["update:visible"]),setup(e,{emit:o}){t.ref(C.size);const l=e,a=o,u=t.ref(),r=t.computed(()=>Object.assign({span:12,menu:!1},l.option.value)),d=t.useModel(e,"visible");function f(){u.value.validate().then(n=>{n===void 0&&a("submit",s.value)})}function c(){a("close")}const s=t.ref(b(l.default));return(n,i)=>{const p=t.resolveComponent("a-form-plus"),m=t.resolveComponent("a-button"),v=t.resolveComponent("a-space"),w=t.resolveComponent("a-modal");return t.openBlock(),t.createBlock(w,{visible:d.value,"onUpdate:visible":i[1]||(i[1]=g=>d.value=g),"unmount-on-close":!0,maskClosable:n.maskClosable,title:n.title,onClose:c,onCancel:c,footer:n.footer},{footer:t.withCtx(g=>[t.createElementVNode("div",z,[i[2]||(i[2]=t.createElementVNode("div",null,null,-1)),t.createVNode(v,null,{default:t.withCtx(()=>[n.cancelBtn?(t.openBlock(),t.createBlock(m,{key:0,loading:n.loading,onClick:c},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(n.cancelText),1)]),_:1},8,["loading"])):t.createCommentVNode("",!0),t.createVNode(m,{loading:n.loading,type:"primary",onClick:f},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(n.onText),1)]),_:1},8,["loading"])]),_:1})])]),default:t.withCtx(()=>[t.createVNode(p,{class:t.normalizeClass({"form-modal--view":!0}),disabled:n.loading,option:r.value,ref_key:"formRef",ref:u,modelValue:s.value,"onUpdate:modelValue":i[0]||(i[0]=g=>s.value=g)},null,8,["disabled","option","modelValue"])]),_:1},8,["visible","maskClosable","title","footer"])}}}),B=(e,o)=>{const l=e.__vccOpts||e;for(const[a,u]of o)l[a]=u;return l},F=B(E,[["__scopeId","data-v-0fdccaba"]]);function S(e){const o=t.getCurrentInstance(),l=o==null?void 0:o.appContext,a=t.reactive({visible:!1,loading:!1}),u=document.createElement("div"),r=()=>{a.loading=!1,a.visible=!1,t.render(null,u),document.body.removeChild(u)},d=t.ref(e==null?void 0:e.option);function f(){document.body.appendChild(u);const s=t.h(F,{title:e.title,default:(e==null?void 0:e.default)??{},okText:e.okText,cancelText:e.cancelText,cancelBtn:e.cancelBtn,width:e.width,option:d,visible:a.visible,loading:a.loading,"onUpdate:visible":n=>a.visible=n,onClose:()=>{e.close&&e.close(),r()},onSubmit:n=>{a.loading=!0,e.submit&&e.submit(n,r)}});l&&(s.appContext=l),t.render(s,u)}function c(){a.visible=!0,f()}return{show:c,close:r,option:d}}exports._export_sfc=B;exports.deepCopy=b;exports.defaultFormOption=M;exports.defaultOption=C;exports.defaultTableOption=N;exports.useForm=V;exports.useModalForm=S;exports.useNestedModel=x;exports.useWindowResize=_;exports.uuid=y;exports.validataNull=k;