quick-admin-vue3-core
Version:
以快(计算机执行效率、开发效率)为核心的后台管理系统开发模板
2 lines (1 loc) • 11.4 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("./index-BC11nvhb.cjs"),x=require("./BaseIcon.vue_vue_type_style_index_0_scope_true_lang-Ch9TKsnl.cjs"),d=require("./platform-Dl0zaSyI.cjs"),q=require("./CustomPopover-4ykbEjb5.cjs"),A=require("./index-D8siRAAk.cjs"),B={class:"add-del-tags f-fs-fs-w"},C=e.defineComponent({__name:"AddDelTags",props:{modelValue:{default:()=>e.reactive([])},maxNum:{default:3},maxlength:{default:6}},emits:["update:modelValue"],setup(h,{emit:m}){const b={small:"default",default:"large",large:"large"},{formItem:o}=d.useFormItem(),v=h,t=m,c=e.ref(),r=e.ref(""),i=e.ref(v.modelValue),n=e.ref(!1);e.watch(i,l=>{t("update:modelValue",JSON.parse(JSON.stringify(l))),o==null||o.validate("change")},{deep:!0});function f(l,a){i.value.splice(a,1)}function s(){if(r.value===""){n.value=!1;return}if(i.value.find(l=>l===r.value))return d.showMessage(r.value+"已添加"),e.nextTick(()=>c.value.focus());i.value.push(r.value),n.value=!1,r.value=""}return(l,a)=>{const p=e.resolveComponent("el-tag"),_=e.resolveComponent("el-input"),y=e.resolveComponent("el-button"),g=e.resolveDirective("focus");return e.openBlock(),e.createElementBlock("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),(u,k)=>(e.openBlock(),e.createBlock(p,{class:"mr-h",size:b[e.unref(o).size],onClose:z=>f(u,k),key:u,closable:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u),1)]),_:2},1032,["size","onClose"]))),128)),e.unref(i).length<l.maxNum?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(n)?e.withDirectives((e.openBlock(),e.createBlock(_,{key:0,modelValue:e.unref(r),"onUpdate:modelValue":a[0]||(a[0]=u=>e.isRef(r)?r.value=u:null),style:e.normalizeStyle({width:l.maxlength+3+"em"}),closable:"",placeholder:"请输入",autofocus:"",clearable:"",maxlength:l.maxlength,onBlur:s,ref_key:"inpRef",ref:c},null,8,["modelValue","style","maxlength"])),[[g]]):(e.openBlock(),e.createBlock(y,{key:1,icon:e.unref(A.plus_default),type:"primary",plain:"",onClick:a[1]||(a[1]=u=>n.value=!0)},null,8,["icon"]))],64)):e.createCommentVNode("",!0)])}}}),V=[{value:"1",label:"Level one 1",children:[{value:"1-1",label:"Level two 1-1",children:[{value:"1-1-1",label:"Level three 1-1-1"}]}]},{value:"2",label:"Level one 2",children:[{value:"2-1",label:"Level two 2-1",children:[{value:"2-1-1",label:"Level three 2-1-1"}]},{value:"2-2",label:"Level two 2-2",children:[{value:"2-2-1",label:"Level three 2-2-1"}]}]},{value:"3",label:"Level one 3",children:[{value:"3-1",label:"Level two 3-1",children:[{value:"3-1-1",label:"Level three 3-1-1"}]},{value:"3-2",label:"Level two 3-2",children:[{value:"3-2-1",label:"Level three 3-2-1"}]}]}],L=[{label:"省1",value:"1",children:[{label:"市1-1",value:"1-1",children:[{label:"县1-1-1",value:"1-1-1"},{label:"县1-1-2",value:"1-1-2"}]},{label:"市1-2",value:"1-2",children:[{label:"县1-2-1",value:"1-2-1"},{label:"县1-2-2",value:"1-2-2"}]},{label:"市1-3",value:"1-3",children:[{label:"县1-3-1",value:"1-3-1"},{label:"县1-3-2",value:"1-3-2"}]}]},{label:"省2",value:"2",children:[{label:"市2-1",value:"2-1"},{label:"市2-2",value:"2-2"},{label:"市2-3",value:"2-3"}]}],T={class:"q-page-view"},N=e.defineComponent({name:"DemoCenterCompsFormBaseForm",__name:"index",setup(h){const m=[{prop:"one",label:"一",required:!0,labelWidth:"0",quickAttrs:{}},{prop:"two",label:"二",required:!0,labelWidth:"0",quickAttrs:{}}],b=[{prop:"one",label:"一",required:!0,labelWidth:"0",quickAttrs:{grid:12}},{prop:"two",label:"二",required:!0,labelWidth:"0",quickAttrs:{grid:12}}],o={activeText:"支持",inactiveText:"不支持",style:"width: 5em"},v=[{prop:"isSupportEmail",label:"邮箱认证",type:"switch",labelWidth:"6em",attrs:o},{prop:"isSupportPerson",label:"人工认证",type:"switch",labelWidth:"6em",attrs:o},{prop:"isSupportDingTalk",label:"钉钉认证",type:"switch",labelWidth:"6em",attrs:o},{prop:"isSupportFeiShu",label:"飞书认证",type:"switch",labelWidth:"6em",attrs:o}];let t=e.reactive({widget_size:d.defaultCommonSize,label_position:"right",inner_obj:{one:"嵌套对象必填项一",two:"嵌套对象必填项二"},inner_arr:[{one:"1",two:"2"}],user_name:"张三",phone:"18483221518",password:"abc123456",gender:1,time:["2023-04-02","2023-04-07"],diff_type:1,row_show_2:1,channel_source:[1,2],join_ways:2,num_min:1,num_max:2});const c=e.computed(()=>{const{diff_type:s}=t;return[{prop:"widget_size",label:"组件尺寸",type:"radio-group",attrs:{options:[{label:"大型",value:"large"},{label:"默认",value:"default"},{label:"小型",value:"small"}]}},{prop:"label_position",label:"标签所处位置",type:"radio-group",attrs:{options:[{label:"左侧",value:"left"},{label:"右侧",value:"right"},{label:"上方",value:"top"}]}},{prop:"inner_obj",label:"嵌套(对象)",type:"BaseAnyEleList",required:!0,attrs:{fields:m,hideLabel:!0}},{prop:"inner_arr",label:"嵌套(数组)",type:"BaseAddDelList",required:!0,attrs:{fields:b}},{prop:"inner_tags",label:"标签",type:"slot",quickAttrs:{tips:"最多添加3个标签"}},{prop:"user_name",label:"姓名",required:!0,quickAttrs:{tips:"最少传入prop,label两个属性;tips属性设置表单项下方提示信息;设置required: true, 设为必填;设置attrs属性,完全继承于ElementPlus的表单控件属性;"},attrs:{maxlength:30}},{prop:"gender",label:"性别",type:"select",attrs:{options:[{label:"男",value:1},{label:"女",value:2}]},quickAttrs:{explain:q.default,tips:["div",{style:"color:red;line-height:1.4;margin-top:0.5em;"},"自定义explain(鼠标放在左侧的问号图标上可查看自定义explain的效果);传入自定义tips,通过BaseRender渲染"]}},{prop:"rate",label:"评分",type:"rate",attrs:{}},{prop:"tree_select",label:"树形选择器",type:"tree-select",attrs:{data:V},quickAttrs:{tips:'<span style="color:blue;">支持html字符串渲染 <b>tips</b> 文本内容</span>'}},{tpl:"T_Identity",prop:"identity",label:"身份证号",quickAttrs:{tips:"explain设置弹出层提示;设置valid,内置身份证、密码等校验;添加example属性,拼接在placeholder后面,作为输入示例",explain:"这是explain提示",example:"这是拼接在placeholder后面的输入示例"}},{tpl:"T_Phone",prop:"phone",label:"电话号码",attrs:{placeholder:"电话号码(这是自定义的placeholder)",slots:{prefix:"Tel"}},quickAttrs:{tips:"prefix插槽插入图标(传入文本);内置电话号码校验;自定义placeholder"}},{tpl:"T_Password",prop:"password",label:"密码",attrs:{slots:{prefix:[x._sfc_main,{name:"Lock"}]}},quickAttrs:{tips:"prefix插槽插入图标(传入组件);内置密码校验;"}},{prop:"time",label:"日期(单prop)",type:"date-picker",quickAttrs:{tips:"默认类型是daterange;prop为字符串时,提交表单时是一个数组"}},{prop:["start_time","end_time"],label:"日期(双prop)",type:"date-picker",quickAttrs:{tips:"props传入数组,提交表单数据时,会被拆成两个字段"}},{prop:"birthday",label:"出生日期",type:"date-picker",attrs:{type:"date"}},{prop:"zdbqsrk",label:"自动补全输入框",type:"autocomplete",attrs:{}},{tpl:"T_Age",prop:"age",label:"年龄",rules:[{validator:i,trigger:"blur"}],quickAttrs:{tips:"tpl模板规则(最小值、最大值)和自定义校验规则(必须大于18岁)同时使用;设置after属性,往表单项后面添加内容【岁】(可以是文本或组件)"}},{tpl:"T_Number",quickAttrs:{tips:"输入框类型的数值"}},{prop:"height",label:"身高",type:"slider",attrs:{min:100,max:200}},{prop:"status",label:"是否启用",type:"switch",attrs:{},quickAttrs:{tips:"考虑【启用/禁用】用的多,故设为内置switch样式,可通过设置attrs覆盖内置默认样式"}},{prop:"channel_source",label:"渠道来源",type:"checkbox-group",attrs:{options:[{label:"来源1",value:1},{label:"来源2",value:2},{label:"来源3",value:3}]}},{prop:"is_remember",label:"是否记住我",type:"checkbox",attrs:{slots:"记住我"},quickAttrs:{tips:"用slots.default改变多选框右侧的文字(默认跟label一样)"}},{prop:"region",label:"省市区",type:"cascader",attrs:{options:L}},{prop:"join_ways",label:"参与方式",labelWidth:"15em",type:"radio-group",attrs:{type:"",options:[{label:"方式1",value:1},{label:"方式2",value:2},{label:"方式3",value:3}]},quickAttrs:{tips:"手动指定label宽度,覆盖自动计算宽度"}},{prop:"row_show_1",label:"并排展示1",quickAttrs:{grid:12,tips:"表单项禁用"},attrs:{disabled:!0}},{prop:"row_show_2",label:"并排展示2",type:"select",attrs:{options:[{label:"并排展示选项1",value:1},{label:"并排展示选项2",value:2}]},quickAttrs:{tips:"纯文本展示",grid:12,pureText:!0}},{prop:"remark",label:"备注",attrs:{type:"textarea"}},{prop:["num_min","num_max"],label:"内置常用组件",type:"BaseNumberRange",quickAttrs:{explain:"内置常用组件BaseNumberRange"}},{prop:"img",label:"上传图片",type:"BaseUpload"},{prop:"custom_slot",label:"自定义组件",type:"slot",quickAttrs:{tips:"只会自定义表单控件(被el-form-item包裹),设置type:'slot',通过插槽加入"}},{type:"custom",renderData:"这是完全自定义的表单项(不被el-form-item包裹)。设置type:'custom',然后通过插槽加入",attrs:{style:"font-weight:bolder;font-size:var(--font-size-heavy)"}},{prop:"open_time",label:"开幕时间",type:"time-picker"},{prop:"diff_type",label:"差异显示类型",type:"radio-group",attrs:{options:[{label:"认证方式有prop",value:1},{label:"认证方式无prop",value:2}]},quickAttrs:{tips:"radio-group控件,默认为button样式",explain:"点击提交按钮时,有prop,可看到提交参数多嵌套了一层并包裹在prop中,无prop,子级children散开在外层"}},{prop:"auth_ways",label:"认证方式",type:"BaseAnyEleList",attrs:{fields:v.slice(...s===1?[0,2]:[2])}}]});function r(s,l){l==="diff_type"&&(t.diff_type=s)}const i=(s,l,a)=>{l<18?a(new Error("年龄必须大于18岁")):a()};function n(s,l){const a={noValid:()=>f()};d.handleBtnNext(a,s)}function f(){d.ElMessage.warning("validateForm: false,不触发表单校验")}return(s,l)=>{const a=e.resolveComponent("BaseForm");return e.openBlock(),e.createElementBlock("div",T,[e.createVNode(a,{modelValue:e.unref(t),"onUpdate:modelValue":l[2]||(l[2]=p=>e.isRef(t)?t.value=p:t=p),style:{width:"600px"},fetch:e.unref(w.PostMockCommon),fields:e.unref(c),size:e.unref(t).widget_size,labelPosition:e.unref(t).label_position,pureText:!1,moreBtns:[{name:"reject",popconfirm:!1},{name:"noValid",text:"不触发表单校验",validateForm:!1,attrs:{type:"primary",plain:!0}},{name:"jump",text:"回到首页",to:{name:"home"},attrs:{type:"primary",link:!0}}],onMoreBtns:n,onChange:r},{inner_tags:e.withCtx(()=>[e.createVNode(C,{modelValue:e.unref(t).inner_tags,"onUpdate:modelValue":l[0]||(l[0]=p=>e.unref(t).inner_tags=p)},null,8,["modelValue"])]),custom_slot:e.withCtx(()=>[e.withDirectives(e.createElementVNode("input",{placeholder:"请输入(自定义组件示例)","onUpdate:modelValue":l[1]||(l[1]=p=>e.unref(t).custom_slot=p)},null,512),[[e.vModelText,e.unref(t).custom_slot]])]),custom_item:e.withCtx(()=>l[3]||(l[3]=[e.createTextVNode(" 完全自定义内容(不会渲染el-form-item) ")])),_:1},8,["modelValue","fetch","fields","size","labelPosition"])])}}});exports.default=N;