general-basic-form 2.0.53 → 2.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +987 -0
  3. package/dist/index.umd.cjs +1 -0
  4. package/dist/style.css +1 -0
  5. package/package.json +14 -3
  6. package/README.assets/image-20210820173738506.png +0 -0
  7. package/script/link.ts +0 -36
  8. package/script/unlink.ts +0 -45
  9. package/src/Descriptions.vue +0 -106
  10. package/src/GeneralBasicForm.vue +0 -277
  11. package/src/InfiniteScrollList.vue +0 -170
  12. package/src/assets/image-20210820173037871.png +0 -0
  13. package/src/assets/logo.png +0 -0
  14. package/src/components/CustomCom/img-mask/index.vue +0 -79
  15. package/src/components/CustomCom/input-graphic-verification/index.vue +0 -82
  16. package/src/components/CustomCom/input-mobile-verification/index.vue +0 -52
  17. package/src/components/CustomCom/input-mobile-verification/verification-button.vue +0 -81
  18. package/src/components/VABasic/input/index.vue +0 -75
  19. package/src/components/VBasic/cascader/index.vue +0 -32
  20. package/src/components/VBasic/checkbox/index.vue +0 -37
  21. package/src/components/VBasic/date-picker/index.vue +0 -31
  22. package/src/components/VBasic/divider/index.vue +0 -53
  23. package/src/components/VBasic/input/index.vue +0 -67
  24. package/src/components/VBasic/input-number/index.vue +0 -31
  25. package/src/components/VBasic/radio/index.vue +0 -37
  26. package/src/components/VBasic/select/index.vue +0 -37
  27. package/src/components/setting.ts +0 -28
  28. package/src/index.ts +0 -30
  29. package/src/injectKey.ts +0 -2
  30. package/src/types/basicFrom.ts +0 -63
  31. package/src/types/componentType.ts +0 -6
  32. package/src/types/componentsProps.ts +0 -18
  33. package/tsconfig.json +0 -14
  34. package/vite.config.js +0 -123
  35. /package/{public → dist}/index.d.ts +0 -0
@@ -0,0 +1 @@
1
+ (function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.Index={},k.Vue,k["vue-router"]))})(this,function(k,e,j){"use strict";const $={placeholder:"请输入",style:"width: 200px",clearable:!0},F={style:"width: 227px","start-placeholder":"开始日期","end-placeholder":"结束日期",type:"daterange"},z={placeholder:"请选择",filterable:!0,clearable:!0,style:"width: 200px"},T=e.defineComponent({components:{InputArchive:t=>{const{templateEle:n}=t;return n()}},props:{item:null},setup(){const t=e.inject("queryParams",{}),n=e.inject("getList"),o=e.inject("size","default");return{queryParams:t,getList:n,size:o}},data(){return{inputSetting:{...$,...this.item.inputSetting,...this.item.setting}}},methods:{currentInputComponent(){return"input-archive"}}}),B=(t,n)=>{const o=t.__vccOpts||t;for(const[a,l]of n)o[a]=l;return o};function R(t,n,o,a,l,c){const s=e.resolveComponent("el-input");return e.openBlock(),e.createBlock(s,e.mergeProps({onKeydown:e.withKeys(t.getList,["enter"]),modelValue:t.queryParams[t.item.prop],"onUpdate:modelValue":n[0]||(n[0]=i=>t.queryParams[t.item.prop]=i),size:t.size},t.inputSetting),e.createSlots({_:2},[e.renderList(t.item.template,(i,r)=>({name:r,fn:e.withCtx(()=>[i?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.currentInputComponent()),{key:r,templateEle:i},null,8,["templateEle"])):e.createCommentVNode("",!0)])}))]),1040,["onKeydown","modelValue","size"])}const V=B(T,[["render",R]]),A=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...$,...t.item.inputSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-input-number");return e.openBlock(),e.createBlock(s,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=i=>e.unref(n)[l.item.prop]=i),size:e.unref(o)},a.value),null,16,["modelValue","size"])}}}),U=e.defineComponent({components:{InputArchive:t=>{const{templateEle:n}=t;return n()}},props:{item:null},setup(){const t=e.inject("queryParams",{}),n=e.inject("getList",()=>{}),o=e.inject("size","default"),l=e.inject("Form").useInjectFormItemContext();return{queryParams:t,getList:n,size:o,formItemContext:l}},data(){return{inputSetting:{...$,...this.item.inputSetting,...this.item.setting}}},methods:{currentInputComponent(){return"input-archive"},onInputChange(t){this.queryParams[this.item.prop]=t.target.value,this.formItemContext.onFieldChange()}}});function G(t,n,o,a,l,c){const s=e.resolveComponent("a-input");return e.openBlock(),e.createBlock(s,e.mergeProps({onKeydown:e.withKeys(t.getList,["enter"]),onChange:t.onInputChange,value:t.queryParams[t.item.prop],size:t.size},t.inputSetting),e.createSlots({_:2},[e.renderList(t.item.template,(i,r)=>({name:r,fn:e.withCtx(()=>[i?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.currentInputComponent()),{key:r,templateEle:i},null,8,["templateEle"])):e.createCommentVNode("",!0)])}))]),1040,["onKeydown","onChange","value","size"])}const x=B(U,[["render",G]]),q=Symbol(),M=e.defineComponent({__name:"index",props:{imgSrc:{}},setup(t){const n=e.ref();return e.onMounted(()=>{const o=new Image,a=[],l=8,c=8;let s=0,i=0;const r=300,m=n.value,f=m.getContext("2d");o.onload=function(){m.width=o.width,m.height=o.height,i=Math.floor(o.width/l),s=Math.floor(o.height/c),h(),_()},o.src=t.imgSrc;const h=()=>{for(let y=0;y<c;y++)for(let d=0;d<l;d++)a.push({x:i*d,y:s*y,offsetX:(Math.random()-.5)*r,offsetY:(Math.random()-.5)*r})},_=()=>{f.clearRect(0,0,m.width,m.height);let y=!0;a.forEach((d,b)=>{f.drawImage(o,d.x,d.y,i,s,d.x+d.offsetX,d.y+d.offsetY,i,s),Math.abs(d.offsetX)>.5&&(y=!1,d.offsetX*=.95),Math.abs(d.offsetY)>.5&&(d.offsetY*=.95,y=!1)}),y?setTimeout(()=>{h(),_()},300):requestAnimationFrame(_)}}),(o,a)=>(e.openBlock(),e.createElementBlock("canvas",{ref_key:"loadingCanvas",ref:n},null,512))}}),O={class:"input-graphic-verification"},K=["src","alt"],Q=e.defineComponent({__name:"index",props:{item:{},componentType:{default:"Element Plus"},loading:{type:Boolean,default:!1}},setup(t){const{graphicSrc:n="",graphicAlt:o="",getGraphic:a=()=>{},key:l}=t.item,{formLoading:c}=e.inject(q,!1),s=e.computed(()=>(c==null?void 0:c.value)||t.loading),i=async()=>{a&&!(s!=null&&s.value)&&await a()},r=e.shallowRef(V);switch(t.componentType){case"Element Plus":r.value=V;break;case"Ant Design Vue":r.value=x;break}return(m,f)=>(e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{item:m.item,class:"input"},null,8,["item"])),s.value?(e.openBlock(),e.createBlock(M,{key:0,class:"graphic",imgSrc:e.unref(n)},null,8,["imgSrc"])):(e.openBlock(),e.createElementBlock("img",{key:1,class:"graphic",onClick:i,src:e.unref(n),alt:e.unref(o)||`${e.unref(l)}`},null,8,K))]))}}),Be="",D=B(Q,[["__scopeId","data-v-f76fdd37"]]),S="获取验证码",X=60,Y=e.defineComponent({__name:"verification-button",props:{getSmscode:{type:Function},componentType:{default:"Element Plus"},item:{}},setup(t){const n=e.ref(S),o=e.ref(null),a=e.computed(()=>n.value===S),l=e.shallowRef("el-button");switch(t.componentType){case"Element Plus":l.value="el-button";break;case"Ant Design Vue":l.value="a-button";break}const c=()=>{o&&(clearInterval(o.value),o.value=null,n.value=S)},s=async()=>{if(n.value===S)if(n.value=X,o.value=setInterval(()=>{if(Number(n.value)<=0||!n.value){c();return}else n.value=Number(n.value)-1},1e3),t.getSmscode)await t.getSmscode()===!1&&c();else return};e.onBeforeUnmount(()=>{c()});const i={...t.item.buttonSetting};return(r,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),e.mergeProps({class:"verifiaction-button",style:{color:a.value?"var(--color-primary, #409EFF)":"var(--text-color-placeholder, #A8ABB2)",cursor:a.value?"pointer":"default"},onClick:s},i),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value?S:n.value+"s"),1)]),_:1},16,["style"]))}}),Ce="",L=B(Y,[["__scopeId","data-v-f5cd774b"]]),E=e.defineComponent({__name:"index",props:{item:{},componentType:{default:"Element Plus"}},setup(t){const n=t.item,o=e.shallowRef(V);switch(t.componentType){case"Element Plus":o.value=V,n.template={append:()=>e.h(L,{getSmscode:n.getSmscode,item:t.item})};break;case"Ant Design Vue":o.value=x,n.template={suffix:()=>e.h(L,{getSmscode:n.getSmscode,item:t.item})};break}return(a,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value),{item:e.unref(n),class:"input"},null,8,["item"]))}}),W=e.defineComponent({components:{slotArchive:t=>{const{templateEle:n}=t;return n()}},props:{item:null},setup(){},data(){return{dividerSetting:{...this.item.dividerSetting,...this.item.setting}}},methods:{currentInputComponent(){return"slot-archive"}}});function J(t,n,o,a,l,c){const s=e.resolveComponent("el-divider");return e.openBlock(),e.createBlock(s,e.normalizeProps(e.guardReactiveProps(t.dividerSetting)),e.createSlots({_:2},[e.renderList(t.item.template,(i,r)=>({name:r,fn:e.withCtx(()=>[i?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.currentInputComponent()),{key:r,templateEle:i},null,8,["templateEle"])):e.createCommentVNode("",!0)])}))]),1040)}const H=B(W,[["render",J]]),Z=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...t.item.radioGroupSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-radio"),i=e.resolveComponent("el-radio-group");return e.openBlock(),e.createBlock(i,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=r=>e.unref(n)[l.item.prop]=r),size:e.unref(o)},a.value),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.item.option||[],r=>(e.openBlock(),e.createBlock(s,e.mergeProps({size:e.unref(o),key:r.value,ref_for:!0},r),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.label),1)]),_:2},1040,["size"]))),128))]),_:1},16,["modelValue","size"])}}}),v=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...t.item.checkboxGroupSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-checkbox"),i=e.resolveComponent("el-checkbox-group");return e.openBlock(),e.createBlock(i,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=r=>e.unref(n)[l.item.prop]=r),size:e.unref(o)},a.value),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.item.option||[],r=>(e.openBlock(),e.createBlock(s,e.mergeProps({size:e.unref(o),key:r.value,ref_for:!0},r),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.label),1)]),_:2},1040,["size"]))),128))]),_:1},16,["modelValue","size"])}}}),ee=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...F,...t.item.datePackerSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-date-picker");return e.openBlock(),e.createBlock(s,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=i=>e.unref(n)[l.item.prop]=i),size:e.unref(o)},a.value),null,16,["modelValue","size"])}}}),te=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...z,...t.item.selectSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-option"),i=e.resolveComponent("el-select");return e.openBlock(),e.createBlock(i,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=r=>e.unref(n)[l.item.prop]=r),size:e.unref(o)},a.value),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.item.option||[],r=>(e.openBlock(),e.createBlock(s,e.mergeProps({key:r.value,ref_for:!0},r),null,16))),128))]),_:1},16,["modelValue","size"])}}}),ne=e.defineComponent({__name:"index",props:{item:{}},setup(t){const n=e.inject("queryParams",{}),o=e.inject("size"),a=e.ref({...z,...t.item.selectSetting,...t.item.setting});return(l,c)=>{const s=e.resolveComponent("el-cascader");return e.openBlock(),e.createBlock(s,e.mergeProps({modelValue:e.unref(n)[l.item.prop],"onUpdate:modelValue":c[0]||(c[0]=i=>e.unref(n)[l.item.prop]=i),size:e.unref(o),options:l.item.options||[]},a.value),null,16,["modelValue","size","options"])}}}),oe=e.defineComponent({name:"GeneralBasicForm",components:{Input:V,InputNumber:A,InputGraphicVerification:D,InputMobileVerification:E,Divider:H,Radio:Z,Checkbox:v,DatePicker:ee,Select:te,Cascader:ne},props:{showSearch:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},formOnly:{type:Boolean,default:!1},getList:{type:Function,default:()=>{}},afterReset:{type:Function,default:()=>{}},formItem:{type:Array,default:[]},size:{type:String,default:"default"},labelWidth:{type:String,default:"90px"},noUrlParameters:{type:Boolean,default:()=>!1},formData:{type:Object,default:()=>{}},noInputBlank:{type:Boolean,default:()=>!1}},data(){return{formLoading:this.loading||!1,trimRegex:/\S/}},setup(t){const{size:n,noUrlParameters:o,getList:a}=t,l=j.useRoute(),c=e.ref({...o?{}:l==null?void 0:l.query});return e.provide("queryParams",c),e.provide("size",n),e.provide("getList",a),{queryParams:c}},watch:{formData:{handler(t,n){JSON.stringify(t)!==JSON.stringify(n)&&(this.queryParams={...this.noUrlParameters?{}:this.queryParams,...t})},immediate:!0},queryParams:{handler(t){this.$emit("update:formData",t)},deep:!0},loading(t){this.formLoading!==t&&(this.formLoading=t)},formLoading(t){this.loading!==t&&this.$emit("update:loading",t)}},provide(){return{[q]:{formLoading:e.computed(()=>this.formLoading),updateFormLoading:t=>{this.formLoading=t}}}},methods:{handleQuery(){var o;const t={page:1,limit:10},n={...(o=this.$route)==null?void 0:o.query,...this.queryParams,...t};this.noUrlParameters||this.$router.push({query:{...n}}),this.getList({...n})},async resetQuery(){var n;this.$refs.queryFormRef.resetFields();const t={page:1};this.noUrlParameters||await this.$router.push({query:{...t}}),this.queryParams={...this.noUrlParameters?{}:(n=this.$route)==null?void 0:n.query},this.afterReset(),this.handleQuery()},getItemRules(t){const{type:n,rules:o=[]}=t,a=[...o];return this.noInputBlank&&n==="input"&&a.push({pattern:this.trimRegex,message:"请输入(不能仅输入空格)",trigger:"blur"}),a}}});function re(t,n,o,a,l,c){const s=e.resolveComponent("Input"),i=e.resolveComponent("Radio"),r=e.resolveComponent("Select"),m=e.resolveComponent("Divider"),f=e.resolveComponent("Cascader"),h=e.resolveComponent("Checkbox"),_=e.resolveComponent("DatePicker"),y=e.resolveComponent("InputNumber"),d=e.resolveComponent("InputMobileVerification"),b=e.resolveComponent("InputGraphicVerification"),C=e.resolveComponent("el-form-item"),P=e.resolveComponent("el-button"),w=e.resolveComponent("el-form"),u=e.resolveDirective("loading");return e.withDirectives((e.openBlock(),e.createBlock(w,e.mergeProps({model:t.queryParams,ref:"queryFormRef",inline:"","label-position":"left","label-width":t.labelWidth},t.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.formItem,p=>(e.openBlock(),e.createBlock(C,{label:p.label,prop:p.prop,key:p.prop,rules:t.getItemRules(p)},{default:e.withCtx(()=>[/^input$/i.test(p.type)?(e.openBlock(),e.createBlock(s,{key:0,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^radio$/i.test(p.type)?(e.openBlock(),e.createBlock(i,{key:1,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^select$/i.test(p.type)?(e.openBlock(),e.createBlock(r,{key:2,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^divider$/i.test(p.type)?(e.openBlock(),e.createBlock(m,{key:3,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^cascader$/i.test(p.type)?(e.openBlock(),e.createBlock(f,{key:4,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^checkbox$/i.test(p.type)?(e.openBlock(),e.createBlock(h,{key:5,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^date-picker$/i.test(p.type)?(e.openBlock(),e.createBlock(_,{key:6,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^input-number$/i.test(p.type)?(e.openBlock(),e.createBlock(y,{key:7,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^form-item-slot$/i.test(p.type)?e.renderSlot(t.$slots,p.name,{key:8}):e.createCommentVNode("",!0),/^input-mobile-verification$/i.test(p.type)?(e.openBlock(),e.createBlock(d,{key:9,item:p},null,8,["item"])):e.createCommentVNode("",!0),/^input-graphic-verification$/i.test(p.type)?(e.openBlock(),e.createBlock(b,{item:p,key:p.key},null,8,["item"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop","rules"]))),128)),e.renderSlot(t.$slots,"default"),t.formOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(C,{key:0},{default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createBlock(P,{type:"primary",size:t.size,onClick:t.handleQuery},{default:e.withCtx(()=>n[0]||(n[0]=[e.createTextVNode("查询")])),_:1},8,["size","onClick"])),[[u,t.formLoading]]),e.createVNode(P,{size:t.size,onClick:t.resetQuery},{default:e.withCtx(()=>n[1]||(n[1]=[e.createTextVNode("重置")])),_:1},8,["size","onClick"])]),_:1})),e.renderSlot(t.$slots,"behind-the-button")]),_:3},16,["model","label-width"])),[[e.vShow,t.showSearch]])}const le=B(oe,[["render",re]]),ie=["infinite-scroll-disabled"],se=["infinite-scroll-disabled"],ae={class:"checkbox"},ce=e.defineComponent({__name:"InfiniteScrollList",props:{search:{type:Function,required:!0},checkbox:{type:Boolean,required:!1},id:{type:String,required:!0},name:{type:String,required:!0},extra:{type:null,required:!1},defaultSelection:{type:Array,required:!1}},setup(t,{expose:n}){const o=t,{search:a,id:l,name:c,extra:s}=o,i=e.ref([]),r=e.ref(1),m=e.ref(!1),f=e.ref([]),h=e.ref(!1),_=(u,p)=>{const{i:I}=u;return s&&s!=="false"?s(I):""},y=u=>{f.value=u.map(p=>typeof p=="object"?p[l]:p)};e.watch(()=>o.defaultSelection,(u=[],p=[])=>{y(u)},{immediate:!0});const d=()=>{b(),f.value=[]},b=()=>{r.value=1,i.value=[],m.value=!1},C=async()=>{if(h.value||m.value)return;h.value=!0;const u=await a(r.value);u&&u.length>0?(i.value=[...i.value,...u],r.value+=1):m.value=!0,h.value=!1},P=()=>{b(),C()},w=e.computed(()=>i.value.filter(u=>f.value.includes(u[l])))||{};return n({reset:d,lowReset:b,loadList:C,selectInfo:w,list:i,ifbottom:m,refreshList:P}),(u,p)=>{const I=e.resolveComponent("el-checkbox"),ge=e.resolveComponent("el-checkbox-group"),N=e.resolveDirective("infinite-scroll"),_e=e.resolveDirective("loading");return o.checkbox?e.withDirectives((e.openBlock(),e.createBlock(ge,e.mergeProps({key:0,modelValue:f.value,"onUpdate:modelValue":p[0]||(p[0]=g=>f.value=g)},o),{default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("ul",{class:"list","infinite-scroll-disabled":m.value},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,g=>(e.openBlock(),e.createElementBlock("li",{key:g[e.unref(l)],class:"list-item"},[e.createVNode(I,{value:g[e.unref(l)],class:"checkbox"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(g[e.unref(c)])+" ",1),o.extra?(e.openBlock(),e.createBlock(_,{key:0,i:g},null,8,["i"])):e.createCommentVNode("",!0)]),_:2},1032,["value"])]))),128))],8,ie)),[[N,C]])]),_:1},16,["modelValue"])),[[_e,h.value]]):e.withDirectives((e.openBlock(),e.createElementBlock("ul",e.mergeProps({key:1,class:"list","infinite-scroll-disabled":m.value},o),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,g=>(e.openBlock(),e.createElementBlock("li",{key:g[e.unref(l)],class:"list-item"},[e.createElementVNode("div",ae,[e.createTextVNode(e.toDisplayString(g[e.unref(c)])+" ",1),o.extra?(e.openBlock(),e.createBlock(_,{key:0,i:g},null,8,["i"])):e.createCommentVNode("",!0)])]))),128))],16,se)),[[N,C]])}}}),be="",pe=B(ce,[["__scopeId","data-v-77737aab"]]),me={key:1},de=e.defineComponent({__name:"Descriptions",props:{formData:{type:Object,required:!0},formItem:{type:Array,required:!0},componentType:{type:String,default:"Element Plus"},strict:{type:Boolean,default:!1}},setup(t){const n=t,o=e.ref([]);e.watch(()=>[n.formData,n.formItem],([s={},i=[]])=>{let r=i;if(n.strict){console.log(s),console.log(r);for(const m in s)Object.prototype.hasOwnProperty.call(s,m)&&(s[m]||(r=r.filter(h=>h.prop!==m||h.render)))}console.log(r),o.value=r},{immediate:!0});const a=e.shallowRef("el-descriptions-item"),l=e.shallowRef("descriptions-item");switch(n.componentType){case"Element Plus":a.value="el-descriptions-item",l.value="el-descriptions-item";break;case"Ant Design Vue":a.value="a-descriptions",l.value="a-descriptions-item";break}const c=(s,i)=>{const{i:r,render:m,formData:f}=s;return m({row:f,$index:r})};return(s,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),e.mergeProps({column:1,border:"",class:"form-width"},s.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(r,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),e.mergeProps({key:r.prop,label:r.label,ref_for:!0},r.descriptionsItemProps),{default:e.withCtx(()=>[r.render?(e.openBlock(),e.createBlock(c,{key:0,i:m,render:r.render,formData:t.formData},null,8,["i","render","formData"])):(e.openBlock(),e.createElementBlock("span",me,e.toDisplayString(t.formData[r.prop]),1))]),_:2},1040,["label"]))),128))]),_:1},16))}}),fe=le,ue=pe,ke=de,he=D,ye=E;k.VDescriptions=ke,k.VGeneralBasicForm=fe,k.VInfiniteScrollList=ue,k.VInputGraphicVerification=he,k.VInputMobilecVerification=ye,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .input-graphic-verification[data-v-f76fdd37]{display:flex;gap:12px;width:100%}.input-graphic-verification .input[data-v-f76fdd37]{flex:auto}.input-graphic-verification .graphic[data-v-f76fdd37]{width:108px;height:43px;object-fit:fill;flex:none}.verifiaction-button[data-v-f5cd774b]{width:109px}.list[data-v-77737aab]{height:272px;overflow:auto;padding:8px 0}.list .checkbox[data-v-77737aab]{width:calc(100% - 32px);padding:0 16px}
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "general-basic-form",
3
- "version": "2.0.53",
3
+ "version": "2.0.55",
4
4
  "description": "",
5
- "main": "./src/index.ts",
5
+ "main": "./dist/index.umd.cjs",
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
@@ -46,5 +46,16 @@
46
46
  "vue": ">=3.3.4",
47
47
  "vue-router": ">=4.2.4"
48
48
  },
49
- "typings": "./publish/index.d.ts"
49
+ "typings": "./dist/index.d.ts",
50
+ "module": "./dist/index.js",
51
+ "exports": {
52
+ ".": {
53
+ "import": "./dist/index.js",
54
+ "require": "./dist/index.umd.cjs"
55
+ },
56
+ "./style": "./dist/style.css"
57
+ },
58
+ "files": [
59
+ "/dist"
60
+ ]
50
61
  }
package/script/link.ts DELETED
@@ -1,36 +0,0 @@
1
- /*
2
- * @Author: 陈德立*******419287484@qq.com
3
- * @Date: 2023-11-10 09:39:59
4
- * @LastEditTime: 2023-11-15 18:04:19
5
- * @LastEditors: 陈德立*******419287484@qq.com
6
- * @Github: https://github.com/Alan1034
7
- * @Description: link处理流程
8
- * @FilePath: \GeneralBasicForm\script\link.ts
9
- *
10
- */
11
- import path from "path";
12
- import fs from 'fs'
13
- import chalk from 'chalk'
14
- import { fileURLToPath } from 'url'
15
- const __filenameNew = fileURLToPath(import.meta.url)
16
- const __dirnameNew = path.dirname(__filenameNew)
17
- const updateMain = () => {
18
- try {
19
- const packageTxt = fs.readFileSync(path.join(__dirnameNew, '../package.json'), 'utf8');
20
- const packageJson = JSON.parse(packageTxt);
21
- const mainDir = "./src/index.ts"
22
- delete packageJson.files
23
- delete packageJson.module
24
- delete packageJson.exports
25
- packageJson.typings = "./publish/index.d.ts"
26
- packageJson.main = mainDir
27
- const versionData = JSON.stringify(packageJson, null, 2);
28
- fs.writeFileSync(path.join(__dirnameNew, '../package.json'), versionData, 'utf8');
29
- console.log(chalk.green.bold('修改入口配置成功!当前入口路径为为:' + mainDir));
30
- } catch (error) {
31
- console.log(chalk.red.bold('修改入口配置出错:', error.toString()));
32
- }
33
-
34
- }
35
-
36
- updateMain()
package/script/unlink.ts DELETED
@@ -1,45 +0,0 @@
1
- /*
2
- * @Author: 陈德立*******419287484@qq.com
3
- * @Date: 2023-11-10 09:39:59
4
- * @LastEditTime: 2023-11-16 15:09:53
5
- * @LastEditors: 陈德立*******419287484@qq.com
6
- * @Github: https://github.com/Alan1034
7
- * @Description: unlink处理流程
8
- * @FilePath: \GeneralBasicForm\script\unlink.ts
9
- *
10
- */
11
- import path from "path";
12
- import fs from 'fs'
13
- import chalk from 'chalk'
14
- import { fileURLToPath } from 'url'
15
- const __filenameNew = fileURLToPath(import.meta.url)
16
- const __dirnameNew = path.dirname(__filenameNew)
17
- const updateMain = () => {
18
- try {
19
- const packageTxt = fs.readFileSync(path.join(__dirnameNew, '../package.json'), 'utf8');
20
- const packageJson = JSON.parse(packageTxt);
21
- const umdDir = "./dist/index.umd.cjs"
22
- const esDir = "./dist/index.js"
23
- packageJson.main = umdDir
24
- packageJson.module = esDir
25
- packageJson.exports = {
26
- ".": {
27
- "import": esDir,
28
- "require": umdDir
29
- },
30
- "./style": "./dist/style.css"
31
- }
32
- packageJson.typings = "./dist/index.d.ts"
33
- packageJson.files = [
34
- "/dist"
35
- ]
36
- const versionData = JSON.stringify(packageJson, null, 2);
37
- fs.writeFileSync(path.join(__dirnameNew, '../package.json'), versionData, 'utf8');
38
- console.log(chalk.green.bold('修改入口配置成功!当前入口路径为为:' + umdDir));
39
- } catch (error) {
40
- console.log(chalk.red.bold('修改入口配置出错:', error.toString()));
41
- }
42
-
43
- }
44
-
45
- updateMain()
@@ -1,106 +0,0 @@
1
- <!--
2
- * @Author: 陈德立*******419287484@qq.com
3
- * @Date: 2023-12-08 17:45:01
4
- * @LastEditTime: 2024-09-25 18:01:50
5
- * @LastEditors: 陈德立*******419287484@qq.com
6
- * @Github: https://github.com/Alan1034
7
- * @Description: 对展示描述列表的封装
8
- * @FilePath: \GeneralBasicForm\src\Descriptions.vue
9
- *
10
- -->
11
- <template>
12
- <component :is="descriptions" :column="1" border class="form-width" v-bind="$attrs">
13
- <component :is="descriptionsItem" v-for="(item, i) in renderFormItem" :key="item.prop" :label="item.label"
14
- v-bind="item.descriptionsItemProps">
15
- <RenderComponent v-if="item.render" :i="i" :render="item.render" :formData="formData"></RenderComponent>
16
- <span v-else>
17
- {{ formData[item.prop] }}
18
- </span>
19
- </component>
20
- </component>
21
- </template>
22
-
23
- <script lang="ts" setup>
24
- import type { PropType, FunctionalComponent, VNode } from "vue";
25
- import { shallowRef, watch, ref } from "vue";
26
- import type { ComponentType } from "./types/componentType"
27
- import type { ItemType } from "./types/basicFrom";
28
- const props = defineProps({
29
- formData: {
30
- type: Object,
31
- required: true,
32
- },
33
- formItem: {
34
- type: Array as unknown as PropType<ItemType[]>,
35
- required: true,
36
- },
37
- componentType: {
38
- type: String as unknown as PropType<ComponentType>,
39
- default: "Element Plus"
40
- },
41
- strict: {
42
- // 使用strict参数后,如果formData内的某个字段没有值,对应的描述元素将不会展示(包括标签文字)
43
- type: Boolean,
44
- default: false
45
- },
46
- });
47
- const renderFormItem = ref<ItemType[]>([])
48
- watch(
49
- () => [props.formData, props.formItem],
50
- ([NewFormData = {}, NewFormItem = <any>[]]) => {
51
- let PhasedFormItem = NewFormItem
52
- if (props.strict) {
53
- // strict严格模式过滤formItem
54
- // console.log(NewFormData)
55
- // console.log(PhasedFormItem)
56
- for (const key in NewFormData) {
57
- if (Object.prototype.hasOwnProperty.call(NewFormData, key)) {
58
- const element = NewFormData[key];
59
- if (!element) {
60
- PhasedFormItem = PhasedFormItem.filter((item) => {
61
- return item.prop !== key
62
- })
63
- }
64
- }
65
- }
66
-
67
-
68
- }
69
- renderFormItem.value = PhasedFormItem
70
- },
71
- { immediate: true }
72
- );
73
- const descriptions = shallowRef("el-descriptions-item")
74
- const descriptionsItem = shallowRef("descriptions-item")
75
- switch (props.componentType) {
76
- case "Element Plus":
77
- descriptions.value = "el-descriptions-item"
78
- descriptionsItem.value = "el-descriptions-item"
79
- break;
80
- case "Ant Design Vue":
81
- descriptions.value = "a-descriptions"
82
- descriptionsItem.value = "a-descriptions-item"
83
- break;
84
- default:
85
- break;
86
- }
87
- type RenderComponentProps = {
88
- i: any;
89
- formData: Object;
90
- render: (item: any) => VNode | String;
91
- };
92
- type Events = {};
93
- // 函数直接返回VNode模板会识别成[object Promise],因此需要转换成函数式组件
94
- const RenderComponent: FunctionalComponent<RenderComponentProps, Events> = (
95
- props,
96
- context
97
- ) => {
98
- const { i, render, formData } = props;
99
- return render({
100
- row: formData,
101
- $index: i,
102
- });
103
- };
104
- </script>
105
-
106
- <style></style>
@@ -1,277 +0,0 @@
1
- <!--
2
- * @Author: 陈德立*******419287484@qq.com
3
- * @Date: 2021-08-20 17:14:53
4
- * @LastEditTime: 2024-09-04 17:18:32
5
- * @LastEditors: 陈德立*******419287484@qq.com
6
- * @Github: https://github.com/Alan1034
7
- * @Description:
8
- * @FilePath: \GeneralBasicForm\src\GeneralBasicForm.vue
9
- *
10
- -->
11
- /** 通用基本表单。用在表单页面搜索栏 */
12
-
13
- <template>
14
- <el-form
15
- :model="queryParams"
16
- ref="queryFormRef"
17
- v-show="showSearch"
18
- inline
19
- label-position="left"
20
- :label-width="labelWidth"
21
- v-bind="$attrs"
22
- >
23
- <el-form-item
24
- v-for="item in formItem"
25
- :label="item.label"
26
- :prop="item.prop"
27
- :key="item.prop"
28
- :rules="getItemRules(item)"
29
- >
30
- <Input v-if="/^input$/i.test(item.type)" :item="item" />
31
- <Radio v-if="/^radio$/i.test(item.type)" :item="item" />
32
- <Select v-if="/^select$/i.test(item.type)" :item="item" />
33
- <Divider v-if="/^divider$/i.test(item.type)" :item="item" />
34
- <Cascader v-if="/^cascader$/i.test(item.type)" :item="item" />
35
- <Checkbox v-if="/^checkbox$/i.test(item.type)" :item="item" />
36
- <DatePicker v-if="/^date-picker$/i.test(item.type)" :item="item" />
37
- <InputNumber v-if="/^input-number$/i.test(item.type)" :item="item" />
38
- <slot v-if="/^form-item-slot$/i.test(item.type)" :name="item.name"></slot>
39
- <InputMobileVerification
40
- v-if="/^input-mobile-verification$/i.test(item.type)"
41
- :item="item"
42
- />
43
- <InputGraphicVerification
44
- v-if="/^input-graphic-verification$/i.test(item.type)"
45
- :item="item"
46
- :key="item.key"
47
- />
48
- </el-form-item>
49
- <slot></slot>
50
- <el-form-item v-if="!formOnly">
51
- <el-button
52
- type="primary"
53
- :size="size"
54
- @click="handleQuery"
55
- v-loading="formLoading"
56
- >查询</el-button
57
- >
58
- <el-button :size="size" @click="resetQuery">重置</el-button>
59
- </el-form-item>
60
- <slot name="behind-the-button" />
61
- </el-form>
62
- </template>
63
-
64
- <script lang="ts">
65
- import { provide, ref, PropType, defineComponent, computed } from "vue";
66
- import type { ItemType } from "./types/basicFrom";
67
- import { useRoute } from "vue-router";
68
- import Input from "./components/VBasic/input/index.vue";
69
- import InputNumber from "./components/VBasic/input-number/index.vue";
70
- import InputGraphicVerification from "./components/CustomCom/input-graphic-verification/index.vue";
71
- import InputMobileVerification from "./components/CustomCom/input-mobile-verification/index.vue";
72
- import Divider from "./components/VBasic/divider/index.vue";
73
- import Radio from "./components/VBasic/radio/index.vue";
74
- import Checkbox from "./components/VBasic/checkbox/index.vue";
75
- import DatePicker from "./components/VBasic/date-picker/index.vue";
76
- import Select from "./components/VBasic/select/index.vue";
77
- import Cascader from "./components/VBasic/cascader/index.vue";
78
- import { formLoadingKey } from "./injectKey";
79
-
80
- export default defineComponent({
81
- name: "GeneralBasicForm",
82
- components: {
83
- Input,
84
- InputNumber,
85
- InputGraphicVerification,
86
- InputMobileVerification,
87
- Divider,
88
- Radio,
89
- Checkbox,
90
- DatePicker,
91
- Select,
92
- Cascader,
93
- },
94
- props: {
95
- showSearch: {
96
- // 是否展示所有元素
97
- type: Boolean,
98
- default: true,
99
- },
100
- loading: {
101
- // 加载动画
102
- type: Boolean,
103
- default: false,
104
- },
105
- formOnly: {
106
- // 是否只展示表单不展示按钮
107
- type: Boolean,
108
- default: false,
109
- },
110
- getList: {
111
- // 查找数据调用的函数
112
- type: Function,
113
- default: () => {},
114
- },
115
- afterReset: {
116
- // 在重置按钮点击完后但还没重新请求时触发的的函数
117
- type: Function,
118
- default: () => {},
119
- },
120
- formItem: {
121
- // 定义表单的数据
122
- type: Array as unknown as PropType<ItemType[]>,
123
- default: [],
124
- },
125
- size: {
126
- // 控制按钮大小
127
- type: String,
128
- default: "default",
129
- },
130
- labelWidth: {
131
- // 表单文字宽度
132
- type: String,
133
- default: "90px",
134
- },
135
- noUrlParameters: {
136
- // 不接受和不改变url的参数
137
- type: Boolean,
138
- default: () => false,
139
- },
140
- formData: {
141
- // 外部传入的表单数据,用于回填
142
- type: Object,
143
- default: () => {},
144
- },
145
- noInputBlank: {
146
- // 用于判断input框是否校验仅空格
147
- type: Boolean,
148
- default: () => false,
149
- },
150
- },
151
- data() {
152
- return {
153
- formLoading: this.loading || false,
154
- trimRegex: /\S/,
155
- };
156
- },
157
- setup(props) {
158
- const { size, noUrlParameters, getList } = props;
159
- const route = useRoute();
160
- const queryParams = ref({
161
- ...(noUrlParameters ? {} : route?.query),
162
- }); // form表单数据
163
- provide(/* 注入名 */ "queryParams", /* 值 */ queryParams);
164
- provide(/* 注入名 */ "size", /* 值 */ size);
165
- provide(/* 注入名 */ "getList", /* 值 */ getList);
166
- // const { formItem } = toRefs(props);
167
- // const { formItem } = props;
168
- // console.log(formItem);
169
- // const queryParams = {};
170
- // formItem.forEach((item) => {
171
- // queryParams[item.prop] = "";
172
- // });
173
- return {
174
- queryParams,
175
- };
176
- },
177
- watch: {
178
- formData: {
179
- handler(val, oldVal) {
180
- if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
181
- this.queryParams = {
182
- ...(this.noUrlParameters ? {} : this.queryParams),
183
- ...val,
184
- };
185
- }
186
- // console.log(this.queryParams);
187
- },
188
- // watch 默认是懒执行的:仅当数据源变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。举例来说,我们想请求一些初始数据,然后在相关状态更改时重新请求数据。
189
- // https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers
190
- immediate: true,
191
- // deep: true,
192
- },
193
- queryParams: {
194
- handler(val) {
195
- this.$emit("update:formData", val);
196
- },
197
- deep: true,
198
- },
199
- loading(val) {
200
- // console.log("loading", val);
201
- if (this.formLoading === val) {
202
- return;
203
- }
204
- this.formLoading = val;
205
- },
206
- formLoading(val) {
207
- // console.log("formLoading", val);
208
- if (this.loading === val) {
209
- return;
210
- }
211
- this.$emit("update:loading", val);
212
- },
213
- },
214
- provide() {
215
- return {
216
- // 显式提供一个计算属性
217
- [formLoadingKey]: {
218
- formLoading: computed(() => this.formLoading),
219
- updateFormLoading: (val) => {
220
- this.formLoading = val;
221
- },
222
- },
223
- };
224
- },
225
- methods: {
226
- /** 搜索按钮操作 */
227
- handleQuery() {
228
- const params = { page: 1, limit: 10 };
229
- const searchParams = {
230
- ...this.$route?.query,
231
- ...this.queryParams,
232
- ...params,
233
- };
234
- if (!this.noUrlParameters) {
235
- this.$router.push({
236
- query: { ...searchParams },
237
- });
238
- }
239
- this.getList({
240
- ...searchParams,
241
- });
242
- },
243
- /** 重置按钮操作 */
244
- async resetQuery() {
245
- this.$refs.queryFormRef.resetFields();
246
- const params = { page: 1 };
247
- if (!this.noUrlParameters) {
248
- await this.$router.push({
249
- query: { ...params },
250
- });
251
- }
252
- this.queryParams = {
253
- ...(this.noUrlParameters ? {} : this.$route?.query),
254
- };
255
- this.afterReset();
256
- this.handleQuery();
257
- },
258
- getItemRules(item: any) {
259
- const { type, rules = [] } = item;
260
- const newRules = [...rules];
261
- if (this.noInputBlank && type === "input") {
262
- newRules.push({
263
- pattern: this.trimRegex,
264
- message: "请输入(不能仅输入空格)",
265
- trigger: "blur",
266
- });
267
- return newRules;
268
- }
269
-
270
- return newRules;
271
- },
272
- },
273
- });
274
- </script>
275
-
276
- <style scoped>
277
- </style>