692 changed files with 23412 additions and 873 deletions
@ -0,0 +1 @@ |
|||
import{d as b,r as s,G as y,o as C,a5 as k,a as r,g as w,w as d,b as c,c as B,j as g,l as h,x,m as u,B as T,a6 as N}from"./index-ea7eee8a.js";const E=["innerHTML"],M=["id"],j={class:"dialog-footer"},H=b({__name:"aceDrawer",props:{modelValue:{type:Boolean},title:null,direction:null,content:{default:""},id:{default:"editJson"},codeType:null},emits:["beforeClose","confirm","update:modelValue"],setup(e,{emit:n}){const a=e,t=s({}),l=s(!1);y(()=>a.modelValue,o=>{l.value=o,o&&m()});const m=()=>{T(()=>{t.value=N(a.content,a.id,a.codeType)})},f=()=>{const o=t.value.getValue();n("confirm",o)},p=()=>{n("update:modelValue",!1),n("beforeClose")};return C(()=>{}),k(()=>{Object.keys(t.value).length!==0&&(t.value.destroy(),t.value.container.remove())}),(o,i)=>{const v=u("el-button"),V=u("el-drawer");return r(),w(V,{modelValue:l.value,"onUpdate:modelValue":i[0]||(i[0]=_=>l.value=_),size:"60%",title:e.title,direction:e.direction||"ltr",class:"ace-dialog","append-to-body":!0,"before-close":p},{header:d(()=>[c("div",{innerHTML:e.title},null,8,E)]),default:d(()=>[l.value?(r(),B("div",{key:0,id:e.id},null,8,M)):g("",!0),c("div",j,[h(v,{type:"primary",size:"small",onClick:f},{default:d(()=>[x(" 确定 ")]),_:1})])]),_:1},8,["modelValue","title","direction"])}}});export{H as _}; |
|||
@ -0,0 +1 @@ |
|||
import{d as b,r as s,G as y,b as C,a5 as h,h as i,o as r,f as k,w as n,l as c,c as w,j as B,m as T,x as g,B as N,a6 as E}from"./index-3679850f.js";const M=["innerHTML"],j=["id"],x={class:"dialog-footer"},H=b({__name:"aceDrawer",props:{modelValue:{type:Boolean},title:{},direction:{default:"ltr"},content:{default:""},id:{default:"editJson"},codeType:{}},emits:["beforeClose","confirm","update:modelValue"],setup(u,{emit:l}){const t=u,o=s({}),a=s(!1);y(()=>t.modelValue,e=>{a.value=e,e&&m()});const m=()=>{N(()=>{o.value=E(t.content,t.id,t.codeType)})},f=()=>{const e=o.value.getValue();l("confirm",e)},p=()=>{l("update:modelValue",!1),l("beforeClose")};return C(()=>{}),h(()=>{Object.keys(o.value).length!==0&&(o.value.destroy(),o.value.container.remove())}),(e,d)=>{const _=i("el-button"),v=i("el-drawer");return r(),k(v,{modelValue:a.value,"onUpdate:modelValue":d[0]||(d[0]=V=>a.value=V),size:"60%",title:e.title,direction:e.direction,class:"ace-dialog","append-to-body":!0,"before-close":p},{header:n(()=>[c("div",{innerHTML:e.title},null,8,M)]),default:n(()=>[a.value?(r(),w("div",{key:0,id:e.id},null,8,j)):B("",!0),c("div",x,[T(_,{type:"primary",size:"small",onClick:f},{default:n(()=>[g(" 确定 ")]),_:1})])]),_:1},8,["modelValue","title","direction"])}}});export{H as _}; |
|||
@ -0,0 +1 @@ |
|||
import{a1 as r,d as h,I as l,N as d,a as i,c as f,ai as p}from"./index-ea7eee8a.js";const n=h({components:{},setup(c){const o=[],e=l({});return{toggleCode:a=>{const t="vdpv_"+a;e[t+"Height"]===0?e[t+"Height"]=(o[a].value?o[a].value.offsetHeight:0)||0:e[t+"Height"]=0},...d(e)}}});n.$vd={matter:{},toc:[{content:"API 接口",anchor:"api-接口",level:1},{content:"数据源设计",anchor:"数据源设计",level:2},{content:"表单设计",anchor:"表单设计",level:2},{content:"列表页设计",anchor:"列表页设计",level:2},{content:"数据统计",anchor:"数据统计",level:2},{content:"数据大屏",anchor:"数据大屏",level:2},{content:"流程设计",anchor:"流程设计",level:2}]};const u=n,v={class:"vuedoc"},_=p('<h1 id="api-接口" data-source-line="1"><a class="markdownIt-Anchor" href="#api-接口">#</a> API 接口</h1><h2 id="数据源设计" data-source-line="3"><a class="markdownIt-Anchor" href="#数据源设计">#</a> 数据源设计</h2><h2 id="表单设计" data-source-line="5"><a class="markdownIt-Anchor" href="#表单设计">#</a> 表单设计</h2><h2 id="列表页设计" data-source-line="7"><a class="markdownIt-Anchor" href="#列表页设计">#</a> 列表页设计</h2><h2 id="数据统计" data-source-line="9"><a class="markdownIt-Anchor" href="#数据统计">#</a> 数据统计</h2><h2 id="数据大屏" data-source-line="11"><a class="markdownIt-Anchor" href="#数据大屏">#</a> 数据大屏</h2><h2 id="流程设计" data-source-line="13"><a class="markdownIt-Anchor" href="#流程设计">#</a> 流程设计</h2>',7),m=[_];function I(c,o,e,s,a,t){return i(),f("div",v,m)}const A=r(u,[["render",I]]);export{A as default}; |
|||
@ -0,0 +1 @@ |
|||
/* empty css */import{o as t,c as e,ai as h}from"./index-3679850f.js";const i={class:"marked-body"},o=h('<h1 id="api-接口">API 接口</h1><h2 id="数据源设计">数据源设计</h2><h2 id="表单设计">表单设计</h2><h2 id="列表页设计">列表页设计</h2><h2 id="数据统计">数据统计</h2><h2 id="数据大屏">数据大屏</h2><h2 id="流程设计">流程设计</h2>',7),a=[o],n={__name:"api",setup(s){return(c,d)=>(t(),e("div",i,a))}};export{n as default}; |
|||
@ -0,0 +1 @@ |
|||
import{C as s,r as t,h as c,o as p,c as i,m as u}from"./index-3679850f.js";const d={__name:"applyed",setup(m){const a=s(),l=t(),o=t({list:[{type:"input",control:{modelValue:"",placeholder:"请输入审批标题"},config:{},name:"title",item:{label:"审批标题"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{},name:"button1682087269238"},{type:"button",control:{label:"重置"},config:{}}],form:{size:"default"},config:{}}),r=t({columns:[{prop:"title",label:"审批标题"},{prop:"creatTime",label:"发起时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"endTime",label:"完成时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"name",label:"审批人"},{prop:"status",label:"流程状态"},{prop:"__control",label:"操作"}],operateBtn:[{label:"修改",click:e=>{a.push({path:"/task/apply/start",query:{flowId:e.flowId,id:e.id}})}},{label:"撤回"}],config:{requestUrl:"flowList",expand:!0}});return(e,f)=>{const n=c("ak-list");return p(),i("div",null,[u(n,{ref_key:"tableListEl",ref:l,requestUrl:"flowList",searchData:o.value,tableData:r.value},null,8,["searchData","tableData"])])}}};export{d as default}; |
|||
@ -0,0 +1 @@ |
|||
import{r as t,a as s,c,l as p,C as i,m as u}from"./index-ea7eee8a.js";const d={__name:"applyed",setup(m){const a=i(),l=t(),o=t({list:[{type:"input",control:{modelValue:"",placeholder:"请输入审批标题"},config:{},name:"title",item:{label:"审批标题"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{},name:"button1682087269238"},{type:"button",control:{label:"重置"},config:{}}],form:{size:"default"},config:{}}),r=t({columns:[{prop:"title",label:"审批标题"},{prop:"creatTime",label:"发起时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"endTime",label:"完成时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"name",label:"审批人"},{prop:"status",label:"流程状态"},{prop:"__control",label:"操作"}],operateBtn:[{label:"修改",click:e=>{a.push({path:"/task/apply/start",query:{flowId:e.flowId,id:e.id}})}},{label:"撤回"}],config:{requestUrl:"flowList",expand:!0}});return(e,f)=>{const n=u("ak-list");return s(),c("div",null,[p(n,{ref_key:"tableListEl",ref:l,requestUrl:"flowList",searchData:o.value,tableData:r.value},null,8,["searchData","tableData"])])}}};export{d as default}; |
|||
@ -0,0 +1 @@ |
|||
.doc-preview[data-v-9a44e667]{border:1px solid #eee}.doc-preview .component[data-v-9a44e667]{padding:10px}.doc-preview .toolbar[data-v-9a44e667]{align-items:center;border-top:1px solid #eee;color:#333;display:flex;justify-content:flex-end;padding:5px 10px}.doc-preview .item[data-v-9a44e667]{cursor:pointer;margin-left:5px}.doc-preview .item[data-v-9a44e667]:hover{opacity:.6}.doc-preview .code[data-v-9a44e667]{border-top:1px solid #eee;padding:0}.doc-preview pre[data-v-9a44e667]{border-radius:0;margin:0} |
|||
@ -0,0 +1 @@ |
|||
import{d as O,u as R,r as c,I as y,a as h,ah as S,G as M,b as N,h as n,D as W,z,o as u,c as G,f as p,j as _,w as A,m as H,S as b,q as C,E as f,W as I,B as m}from"./index-3679850f.js";const P=O({__name:"content",setup(J){const g=R(),i=c(),D=c(!0),a=y({searchData:[],tableData:[],dict:{},visible:!0,source:""}),v=h(()=>g.query.id),k=()=>{if(!v.value)return b.error("非法操作..."),!1;const e={id:v.value};C("designById",e).then(s=>{const o=s.data;o&&Object.keys(o).length&&(a.searchData=f(o.data),a.tableData=f(o.listData),a.dict=I(o.dict),a.source=o.source,m(()=>{i.value.getListData(),D.value=!1}),w())})};S(()=>{B()});const B=M(()=>g.query.id,()=>{k()},{}),l=c(),t=y({visible:!1,title:"",formType:1,formData:{},width:"",dict:{},editId:""}),r=h(()=>{var e;return a.source&&((e=a.tableData.config)==null?void 0:e.openType)==="dialog"}),w=()=>{var e;r.value&&(t.width=(e=a.tableData.config)==null?void 0:e.dialogWidth,C("designById",{id:a.source}).then(s=>{const o=s.data;o&&Object.keys(o).length&&(t.formData=f(o.data),t.dict=I(o.dict))}).catch(s=>{b.error(s.message||"非法操作.")}))},E=(e,s)=>{var o;(e.key==="add"||e.key==="edit")&&r.value&&(t.visible=!0,t.title=e.key==="add"?"新增":"编辑",t.formType=e.key==="add"?1:2,t.editId=s&&s.id,e.key==="add"&&((o=t.formData.config)!=null&&o.addLoad)&&m(()=>{l.value.getData({formId:a.source})}),e.key==="edit"&&m(()=>{l.value.getData({formId:a.source,id:s.id})}))},L=e=>(e.formId=a.source,e.id=t.editId,e),q=e=>{e==="success"&&(d(),i.value.getListData())},T=e=>{(e==="reset"||e==="cancel")&&d()},U=e=>{d(),e&&e()},d=()=>{t.visible=!1,t.editId=""};return N(()=>{k()}),(e,s)=>{const o=n("ak-list"),j=n("ak-form"),x=n("el-dialog"),F=W("loading");return z((u(),G("div",null,[a.visible?(u(),p(o,{key:0,ref_key:"listEl",ref:i,searchData:a.searchData,tableData:a.tableData,dict:a.dict,formId:a.source,requestUrl:"getContentList",deleteUrl:"delFormContent",autoLoad:!1,onBtnClick:E},null,8,["searchData","tableData","dict","formId"])):_("",!0),r.value?(u(),p(x,{key:1,"destroy-on-close":"",modelValue:t.visible,"onUpdate:modelValue":s[0]||(s[0]=V=>t.visible=V),title:t.title,width:t.width||"600px","before-close":U},{default:A(()=>[H(j,{ref_key:"formEl",ref:l,formData:t.formData,dict:t.dict,type:t.formType,requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent",beforeSubmit:L,afterSubmit:q,onBtnClick:T},null,8,["formData","dict","type"])]),_:1},8,["modelValue","title","width"])):_("",!0)])),[[F,D.value]])}}});export{P as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as O,r as n,I as y,e as h,ah as R,G as S,o as M,z as N,a as c,c as z,g as p,j as _,u as G,w as W,l as A,S as b,q as C,D as u,V as I,B as f,m,E as H,h as J}from"./index-ea7eee8a.js";const Q=O({__name:"content",setup(K){const g=J(),i=n(),D=n(!0),a=y({searchData:[],tableData:[],dict:{},visible:!0,source:""}),v=h(()=>g.query.id),k=()=>{if(!v.value)return b.error("非法操作..."),!1;const e={id:v.value};C("designById",e).then(s=>{const o=s.data;o&&Object.keys(o).length&&(a.searchData=u(o.data),a.tableData=u(o.listData),a.dict=I(o.dict),a.source=o.source,f(()=>{i.value.getListData(),D.value=!1}),w())})};R(()=>{B()});const B=S(()=>g.query.id,()=>{k()},{}),l=n(),t=y({visible:!1,title:"",formType:1,formData:{},width:"",dict:{},editId:""}),r=h(()=>{var e;return a.source&&((e=a.tableData.config)==null?void 0:e.openType)==="dialog"}),w=()=>{var e;r.value&&(t.width=(e=a.tableData.config)==null?void 0:e.dialogWidth,C("designById",{id:a.source}).then(s=>{const o=s.data;o&&Object.keys(o).length&&(t.formData=u(o.data),t.dict=I(o.dict))}).catch(s=>{b.error(s.message||"非法操作.")}))},E=(e,s)=>{var o;(e.key==="add"||e.key==="edit")&&r.value&&(t.visible=!0,t.title=e.key==="add"?"新增":"编辑",t.formType=e.key==="add"?1:2,t.editId=s&&s.id,e.key==="add"&&((o=t.formData.config)!=null&&o.addLoad)&&f(()=>{l.value.getData({formId:a.source})}),e.key==="edit"&&f(()=>{l.value.getData({formId:a.source,id:s.id})}))},L=e=>(e.formId=a.source,e.id=t.editId,e),q=e=>{e==="success"&&(d(),i.value.getListData())},T=e=>{(e==="reset"||e==="cancel")&&d()},U=e=>{d(),e&&e()},d=()=>{t.visible=!1,t.editId=""};return M(()=>{k()}),(e,s)=>{const o=m("ak-list"),V=m("ak-form"),j=m("el-dialog"),x=H("loading");return N((c(),z("div",null,[a.visible?(c(),p(o,{key:0,ref_key:"listEl",ref:i,searchData:a.searchData,tableData:a.tableData,dict:a.dict,formId:a.source,requestUrl:"getContentList",deleteUrl:"delFormContent",autoLoad:!1,onBtnClick:E},null,8,["searchData","tableData","dict","formId"])):_("",!0),G(r)?(c(),p(j,{key:1,"destroy-on-close":"",modelValue:t.visible,"onUpdate:modelValue":s[0]||(s[0]=F=>t.visible=F),title:t.title,width:t.width||"600px","before-close":U},{default:W(()=>[A(V,{ref_key:"formEl",ref:l,formData:t.formData,dict:t.dict,type:t.formType,requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent",beforeSubmit:L,afterSubmit:q,onBtnClick:T},null,8,["formData","dict","type"])]),_:1},8,["modelValue","title","width"])):_("",!0)])),[[x,D.value]])}}});export{Q as default}; |
|||
@ -0,0 +1 @@ |
|||
import{a1 as e,a as c,c as r}from"./index-ea7eee8a.js";const o={};function t(a,n){return c(),r("div")}const _=e(o,[["render",t]]);export{_ as default}; |
|||
@ -0,0 +1 @@ |
|||
import{_ as e,o as c,c as o}from"./index-3679850f.js";const r={};function t(n,s){return c(),o("div")}const a=e(r,[["render",t]]);export{a as default}; |
|||
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 29 KiB |
@ -0,0 +1 @@ |
|||
import{d as V,r as n,I,a as T,c as x,l as p,w as E,m as d,B as u}from"./index-ea7eee8a.js";const C=V({__name:"dept",setup(B){const m=n(),s=n(),f=n([]),y=n({list:[{type:"input",control:{modelValue:"",placeholder:"请输入部门名称"},config:{},name:"name",item:{label:"部门名称"}},{type:"select",control:{modelValue:""},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),g=n({tableProps:{rowKey:"id"},columns:[{label:"部门名称",prop:"name"},{label:"排序",prop:"sort"},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",2:"info"}}},{label:"操作",prop:"__control"}],controlBtn:[{label:"新增",type:"primary",size:"small",icon:"plus",click:()=>{t.visible=!0,t.title="新增部门",t.formType=1,r()}}],operateBtn:[{label:"新增",click:e=>{t.visible=!0,t.title="新增部门",t.formType=1,u(()=>{s.value.setValue({parentId:e.id})}),r()}},{label:"编辑",click:e=>{t.visible=!0,t.title="编辑部门",t.formType=2,t.editId=e.id,e.parentId===0&&(e.parentId=""),u(()=>{s.value.setValue(e)}),r()}},{label:"删除",key:"del"}],config:{fixedBottomScroll:!1}}),t=I({visible:!1,title:"",formType:1,editId:""}),v=n({list:[{type:"treeSelect",control:{modelValue:"",data:[],renderAfterExpand:!1,props:{label:"name"},checkStrictly:!0,placeholder:"请选择上级部门"},config:{optionsType:0},name:"parentId",item:{label:"上级部门"}},{type:"input",control:{modelValue:"",placeholder:"请输入部门名称"},config:{},name:"name",item:{label:"部门名称"},customRules:[{type:"required",message:"部门名称不能为空",trigger:"blur"}]},{type:"inputNumber",control:{modelValue:0,controlsPosition:"right"},config:{},name:"sort",item:{label:"排序"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"100px",size:"default"},config:{}}),k=e=>(t.formType===2&&(e.id=t.editId),e),_=e=>{t.visible=!1,e==="success"&&m.value.getListData()},h=e=>{e==="reset"&&(t.visible=!1)},D=e=>{const a=e.list;let o=[];return b(a,0,o),f.value=o,o},b=(e,a,o)=>{e.forEach(l=>{if(l.value=l.id,l.parentId===a){const i=e.filter(c=>c.parentId===l.id);i!=null&&i.length&&(l.children=[],b(e,l.id,l.children)),o.push(l)}})},r=()=>{u(()=>{s.value.setOptions({parentId:f.value})})};return(e,a)=>{const o=d("ak-list"),l=d("ak-form"),i=d("el-dialog");return T(),x("div",null,[p(o,{ref_key:"tableListEl",ref:m,requestUrl:"deptList",deleteUrl:"deptDelete",searchData:y.value,tableData:g.value,afterResponse:D},null,8,["searchData","tableData"]),p(i,{modelValue:t.visible,"onUpdate:modelValue":a[0]||(a[0]=c=>t.visible=c),title:t.title,width:"400px","destroy-on-close":""},{default:E(()=>[p(l,{ref_key:"formNameEl",ref:s,type:t.formType,formData:v.value,addUrl:"deptSave",editUrl:"deptEdit",beforeSubmit:k,afterSubmit:_,onBtnClick:h},null,8,["type","formData"])]),_:1},8,["modelValue","title"])])}}});export{C as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as V,r as n,I,h as p,o as T,c as x,m as d,w as E,B as u}from"./index-3679850f.js";const C=V({__name:"dept",setup(B){const m=n(),i=n(),f=n([]),y=n({list:[{type:"input",control:{modelValue:"",placeholder:"请输入部门名称"},config:{},name:"name",item:{label:"部门名称"}},{type:"select",control:{modelValue:""},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),g=n({tableProps:{rowKey:"id"},columns:[{label:"部门名称",prop:"name"},{label:"排序",prop:"sort"},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",2:"info"}}},{label:"操作",prop:"__control"}],controlBtn:[{label:"新增",type:"primary",size:"small",icon:"plus",click:()=>{t.visible=!0,t.title="新增部门",t.formType=1,r()}}],operateBtn:[{label:"新增",click:e=>{t.visible=!0,t.title="新增部门",t.formType=1,u(()=>{i.value.setValue({parentId:e.id})}),r()}},{label:"编辑",click:e=>{t.visible=!0,t.title="编辑部门",t.formType=2,t.editId=e.id,e.parentId===0&&(e.parentId=""),u(()=>{i.value.setValue(e)}),r()}},{label:"删除",key:"del"}],config:{fixedBottomScroll:!1}}),t=I({visible:!1,title:"",formType:1,editId:""}),v=n({list:[{type:"treeSelect",control:{modelValue:"",data:[],renderAfterExpand:!1,props:{label:"name"},checkStrictly:!0,placeholder:"请选择上级部门"},config:{optionsType:0},name:"parentId",item:{label:"上级部门"}},{type:"input",control:{modelValue:"",placeholder:"请输入部门名称"},config:{},name:"name",item:{label:"部门名称"},customRules:[{type:"required",message:"部门名称不能为空",trigger:"blur"}]},{type:"inputNumber",control:{modelValue:0,controlsPosition:"right"},config:{},name:"sort",item:{label:"排序"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"100px",size:"default"},config:{}}),k=e=>(t.formType===2&&(e.id=t.editId),e),_=e=>{t.visible=!1,e==="success"&&m.value.getListData()},h=e=>{e==="reset"&&(t.visible=!1)},D=e=>{const a=e.list,o=[];return b(a,0,o),f.value=o,o},b=(e,a,o)=>{e.forEach(l=>{if(l.value=l.id,l.parentId===a){const s=e.filter(c=>c.parentId===l.id);s!=null&&s.length&&(l.children=[],b(e,l.id,l.children)),o.push(l)}})},r=()=>{u(()=>{i.value.setOptions({parentId:f.value})})};return(e,a)=>{const o=p("ak-list"),l=p("ak-form"),s=p("el-dialog");return T(),x("div",null,[d(o,{ref_key:"tableListEl",ref:m,requestUrl:"deptList",deleteUrl:"deptDelete",searchData:y.value,tableData:g.value,afterResponse:D},null,8,["searchData","tableData"]),d(s,{modelValue:t.visible,"onUpdate:modelValue":a[0]||(a[0]=c=>t.visible=c),title:t.title,width:"400px","destroy-on-close":""},{default:E(()=>[d(l,{ref_key:"formNameEl",ref:i,type:t.formType,formData:v.value,addUrl:"deptSave",editUrl:"deptEdit",beforeSubmit:k,afterSubmit:_,onBtnClick:h},null,8,["type","formData"])]),_:1},8,["modelValue","title"])])}}});export{C as default}; |
|||
@ -0,0 +1,2 @@ |
|||
import{d as D,r as a,I as y,h as r,o as V,c as B,m as o,w as g,B as s}from"./index-3679850f.js";const S=D({__name:"dict",setup(E){const c=a(),d=a(),p=a(),t=y({visible:!1,type:1,editId:"",formData:{list:[{type:"input",control:{modelValue:"",placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"},customRules:[{type:"required",message:"请输入字典名称",trigger:"blur"}]},{type:"input",control:{modelValue:"",placeholder:"请输入字典标识"},config:{editDisabled:!0},name:"type",item:{label:"字典标识"},customRules:[{type:"required",message:"请输入字典标识",trigger:"blur"}]},{type:"radio",control:{modelValue:1},options:[{label:"正常",value:1},{label:"停用",value:0}],config:{optionsType:0},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"说明描述"}},{type:"button",control:{label:"保存",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}],form:{labelWidth:"",size:"default"},config:{}}}),l=y({visible:!1,editId:"",formData:{list:[{type:"input",control:{modelValue:"",disabled:!0,placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"}},{type:"flex",list:[{type:"input",control:{modelValue:"",placeholder:"显示的标签名称"},config:{},name:"label",item:{label:"字典标签"}},{type:"input",control:{modelValue:""},config:{},name:"value",item:{label:"键值"}}],tableData:[],control:{},config:{addBtnText:"添加一行",delBtnText:"删除"},name:"children"},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"保存",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"",size:"default"},config:{style:`.flex-item{display:flex}
|
|||
.flex-item .el-form-item{ margin-right:10px}`}}}),v=a({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"字典名称",prop:"name"},{label:"字典标识",prop:"type"},{label:"状态",prop:"status",config:{tagList:{0:"info",1:"success"},dictKey:"status"}},{label:"更新时间",prop:"updateTime",width:170,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:180}],controlBtn:[{label:"新增",type:"primary",size:"small",icon:"plus",click:()=>{t.visible=!0,t.type=1,t.editId="",s(()=>{})}},{label:"批量删除",type:"danger",size:"small",icon:"delete",key:"del"}],operateBtn:[{label:"设置",click:e=>{l.visible=!0,l.type=1,l.editId=e.id,s(()=>{p.value.setValue({name:e.name,children:e.children?JSON.parse(e.children):[]})})}},{label:"编辑",icon:"edit",click:e=>{t.visible=!0,t.type=2,t.editId=e.id,s(()=>{d.value.setValue(e)})}},{label:"删除",key:"del",icon:"delete",visible:"$.isSystem!==1"}],config:{expand:!0}}),k=a({list:[{type:"input",control:{modelValue:"",placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[{label:"正常",value:"1"},{label:"停用",value:"0"}],config:{optionsType:0},item:{label:"状态"}},{type:"button",control:{label:"查询",type:"primary",key:"submit",icon:"search"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),h=e=>(e.id=t.editId,e),_=e=>(e.id=l.editId,e),m=()=>{t.visible=!1,l.visible=!1,c.value.getListData()},u=e=>{e==="reset"&&(t.visible=!1,l.visible=!1)};return(e,i)=>{const x=r("ak-list"),b=r("ak-form"),f=r("el-dialog");return V(),B("div",null,[o(x,{ref_key:"tableListEl",ref:c,requestUrl:"dictList",deleteUrl:"dictDelete",searchData:k.value,tableData:v.value},null,8,["searchData","tableData"]),o(f,{modelValue:t.visible,"onUpdate:modelValue":i[0]||(i[0]=n=>t.visible=n),title:"添加字典",width:"400px","destroy-on-close":""},{default:g(()=>[o(b,{ref_key:"formEl",ref:d,formData:t.formData,type:t.type,addUrl:"dictSave",editUrl:"dictEdit",beforeSubmit:h,afterSubmit:m,onBtnClick:u},null,8,["formData","type"])]),_:1},8,["modelValue"]),o(f,{modelValue:l.visible,"onUpdate:modelValue":i[1]||(i[1]=n=>l.visible=n),title:"设置字典数据",width:"400px","destroy-on-close":""},{default:g(()=>[o(b,{ref_key:"formEl2",ref:p,formData:l.formData,type:2,editUrl:"dictEdit",beforeSubmit:_,afterSubmit:m,onBtnClick:u},null,8,["formData"])]),_:1},8,["modelValue"])])}}});export{S as default};
|
|||
@ -0,0 +1,2 @@ |
|||
import{d as D,r as a,I as y,a as V,c as B,l as i,w as g,m as r,B as s}from"./index-ea7eee8a.js";const S=D({__name:"dict",setup(E){const c=a(),d=a(),p=a(),t=y({visible:!1,type:1,editId:"",formData:{list:[{type:"input",control:{modelValue:"",placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"},customRules:[{type:"required",message:"请输入字典名称",trigger:"blur"}]},{type:"input",control:{modelValue:"",placeholder:"请输入字典标识"},config:{editDisabled:!0},name:"type",item:{label:"字典标识"},customRules:[{type:"required",message:"请输入字典标识",trigger:"blur"}]},{type:"radio",control:{modelValue:1},options:[{label:"正常",value:1},{label:"停用",value:0}],config:{optionsType:0},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"说明描述"}},{type:"button",control:{label:"保存",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}],form:{labelWidth:"",size:"default"},config:{}}}),l=y({visible:!1,editId:"",formData:{list:[{type:"input",control:{modelValue:"",disabled:!0,placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"}},{type:"flex",list:[{type:"input",control:{modelValue:"",placeholder:"显示的标签名称"},config:{},name:"label",item:{label:"字典标签"}},{type:"input",control:{modelValue:""},config:{},name:"value",item:{label:"键值"}}],tableData:[],control:{},config:{addBtnText:"添加一行",delBtnText:"删除"},name:"children"},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"保存",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"",size:"default"},config:{style:`.flex-item{display:flex}
|
|||
.flex-item .el-form-item{ margin-right:10px}`}}}),v=a({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"字典名称",prop:"name"},{label:"字典标识",prop:"type"},{label:"状态",prop:"status",config:{tagList:{0:"info",1:"success"},dictKey:"status"}},{label:"更新时间",prop:"updateTime",width:170,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:180}],controlBtn:[{label:"新增",type:"primary",size:"small",icon:"plus",click:()=>{t.visible=!0,t.type=1,t.editId="",s(()=>{})}},{label:"批量删除",type:"danger",size:"small",icon:"delete",key:"del"}],operateBtn:[{label:"设置",click:e=>{l.visible=!0,l.type=1,l.editId=e.id,s(()=>{p.value.setValue({name:e.name,children:e.children?JSON.parse(e.children):[]})})}},{label:"编辑",icon:"edit",click:e=>{t.visible=!0,t.type=2,t.editId=e.id,s(()=>{d.value.setValue(e)})}},{label:"删除",key:"del",icon:"delete",visible:"$.isSystem!==1"}],config:{expand:!0}}),k=a({list:[{type:"input",control:{modelValue:"",placeholder:"请输入字典名称"},config:{},name:"name",item:{label:"字典名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[{label:"正常",value:"1"},{label:"停用",value:"0"}],config:{optionsType:0},item:{label:"状态"}},{type:"button",control:{label:"查询",type:"primary",key:"submit",icon:"search"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),h=e=>(e.id=t.editId,e),_=e=>(e.id=l.editId,e),m=()=>{t.visible=!1,l.visible=!1,c.value.getListData()},u=e=>{e==="reset"&&(t.visible=!1,l.visible=!1)};return(e,o)=>{const x=r("ak-list"),b=r("ak-form"),f=r("el-dialog");return V(),B("div",null,[i(x,{ref_key:"tableListEl",ref:c,requestUrl:"dictList",deleteUrl:"dictDelete",searchData:k.value,tableData:v.value},null,8,["searchData","tableData"]),i(f,{modelValue:t.visible,"onUpdate:modelValue":o[0]||(o[0]=n=>t.visible=n),title:"添加字典",width:"400px","destroy-on-close":""},{default:g(()=>[i(b,{ref_key:"formEl",ref:d,formData:t.formData,type:t.type,addUrl:"dictSave",editUrl:"dictEdit",beforeSubmit:h,afterSubmit:m,onBtnClick:u},null,8,["formData","type"])]),_:1},8,["modelValue"]),i(f,{modelValue:l.visible,"onUpdate:modelValue":o[1]||(o[1]=n=>l.visible=n),title:"设置字典数据",width:"400px","destroy-on-close":""},{default:g(()=>[i(b,{ref_key:"formEl2",ref:p,formData:l.formData,type:2,editUrl:"dictEdit",beforeSubmit:_,afterSubmit:m,onBtnClick:u},null,8,["formData"])]),_:1},8,["modelValue"])])}}});export{S as default};
|
|||
@ -0,0 +1 @@ |
|||
import{a1 as e,a as c,c as n}from"./index-ea7eee8a.js";const o={};function r(t,a){return c(),n("div")}const _=e(o,[["render",r]]);export{_ as default}; |
|||
@ -0,0 +1 @@ |
|||
import{_ as e,o as c,c as o}from"./index-3679850f.js";const n={};function r(t,s){return c(),o("div")}const a=e(n,[["render",r]]);export{a as default}; |
|||
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
@ -0,0 +1,90 @@ |
|||
/* empty css */import{o as s,c as a,ai as t}from"./index-3679850f.js";const n={class:"marked-body"},l=t(`<h1 id="akform-表单">AKForm 表单</h1><p>适用于导出vue文件</p><h2 id="使用方式">使用方式</h2><pre class="language-html"><code class="hljs">
|
|||
<span class="hljs-tag"><<span class="hljs-name">ak-form</span> <span class="hljs-attr">:formData</span>=<span class="hljs-string">"formData"</span>></span><span class="hljs-tag"></<span class="hljs-name">ak-form</span>></span></code></pre><h2 id="api">API</h2><h3 id="props">Props</h3><table><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>formData</td><td>object</td><td>设计的生成表单数据</td></tr><tr><td>type</td><td>number/1</td><td>表单展示模式，1新增；2修改；3查看（表单模式） ；4查看； 5设计</td></tr><tr><td>disabled</td><td>boolean/false</td><td>表单禁用模式，类似于表单模式查看</td></tr><tr><td>requestUrl</td><td>string/boolean</td><td>表单编辑初始数据加载。适用于导出vue文件</td></tr><tr><td>beforeRequest</td><td>function (params,route)</td><td>请求编辑数据前参数处理方法，可对请求参数处理。适用于导出vue文件，<code>return false</code>时不请求</td></tr><tr><td>afterResponse</td><td>function/string</td><td>请求编辑数据完成后数据处理方法。适用于导出vue文件，<code>return false</code>阻止事件运行</td></tr><tr><td>addUrl</td><td>string</td><td>表单数据新增提交保存url</td></tr><tr><td>editUrl</td><td>string</td><td>表单数据修改保存提交url</td></tr><tr><td>beforeSubmit</td><td>function (params,route)/string</td><td>表单提交前数据处理。适用于导出vue文件，<code>return false</code>时不发送请求</td></tr><tr><td>afterSubmit</td><td>function(type,res)</td><td>表单提交后，默认提示提交结果，可return false阻止提示。res接口返回参数,type提交结果类型success/fail/validate。validate表单没通过校验时</td></tr><tr><td>value</td><td>object</td><td>表单初始值，同setValue</td></tr><tr><td>options</td><td>object</td><td>表单选项数据，同setOptions，不管选项配置如何配置，这里设置都会生效</td></tr><tr><td>dict</td><td>object</td><td>用于匹配的字典数据，一般不设置，从接口获取</td></tr></tbody></table><h3 id="events">Events</h3><table><thead><tr><th>事件名</th><th>说明</th></tr></thead><tbody><tr><td>btnClick</td><td>按钮组件点击事件</td></tr><tr><td>change</td><td>表单组件值发生变化事件(key,value,model,data,tProp)。key：组件的name值，value：组件当前的值，model:当前表单的值，tProp:表格内组件才会有值,data当前组件所在的list数据</td></tr></tbody></table><h3 id="methods">Methods</h3><table><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>validate</td><td>表单校验方法</td></tr><tr><td>getValue</td><td>用于获取表单的值</td></tr><tr><td>setValue</td><td>对表单设置初始值(model,filter:boolean) filter=true时将会过滤掉model中不属于当前表单的字段</td></tr><tr><td>setOptions</td><td>对表单选择项快速设置</td></tr><tr><td>resetFields</td><td>重置表单方法</td></tr><tr><td>getData</td><td>加载表单初始数据(params:any)</td></tr><tr><td>submit</td><td>表单提交</td></tr></tbody></table><p> 两个全局特殊方法</p><table><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>get[formName]ControlByName</td><td>用于根据name值获取formData中的数据项(name:string)</td></tr><tr><td>get[formName]ValueByName</td><td>用于根据name值获取formData中的数据项的值(name:string)</td></tr></tbody></table><h3 id="slot">Slot</h3><table><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>-</td></tr></tbody></table><h3 id="formdata">formData</h3><p>代码编辑输入框可支持<code>json</code>或<code>javascript</code>，初始使用时可通过修改<code>/src/utils/form.ts</code>里的<code>EDITTYPE</code>的值</p><pre class="language-javascript"><code class="hljs">formData = { |
|||
<span class="hljs-attr">list</span>: [ |
|||
{ |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"input1660637151831"</span>, <span class="hljs-comment">// 表单元素唯一标识</span> |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"input"</span>, <span class="hljs-comment">// 表单元素类型</span> |
|||
<span class="hljs-attr">control</span>: <span class="hljs-comment">// 当前控件类型的所有\`props\`参数，详见\`element-plus\`对应的\`props\`参数</span>
|
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span> |
|||
}, |
|||
<span class="hljs-attr">config</span>: <span class="hljs-comment">// 其他一些扩展配置信息</span> |
|||
{ |
|||
<span class="hljs-attr">linkKey</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 开启联动</span> |
|||
<span class="hljs-attr">linkValue</span>: <span class="hljs-string">"$.name===1"</span>, <span class="hljs-comment">// 联动表达式，即当表单中字段标识为\`name\`的控件值为\`1\`时，当前控件才显示</span> |
|||
<span class="hljs-attr">editDisabled</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// 编辑状态下禁用，即表单部分字段只能添加，不允许编辑时可使用此设置</span> |
|||
}, |
|||
<span class="hljs-attr">customRules</span>: [], <span class="hljs-comment">// 使用快速方法添加的校验规则，会自动合并到\`item.rules\`</span>
|
|||
<span class="hljs-attr">item</span>:<span class="hljs-comment">// 组件el-form-item的参数配置</span> |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"单行文本"</span>, |
|||
<span class="hljs-attr">rules</span>: [] <span class="hljs-comment">// 校验规则</span> |
|||
} |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"select1660637154631"</span>, |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [<span class="hljs-comment">// 单选多选下拉的\`option\`选项数据</span> |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"标签1"</span>, |
|||
<span class="hljs-attr">value</span>: <span class="hljs-string">"value1"</span> |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"标签2"</span>, |
|||
<span class="hljs-attr">value</span>: <span class="hljs-string">"value2"</span> |
|||
}], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>:<span class="hljs-number">0</span>, <span class="hljs-comment">// 0固定选项 1数据源 2字典</span> |
|||
<span class="hljs-attr">optioinsFun</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 接口url、方法名、字典key</span> |
|||
<span class="hljs-attr">method</span>: <span class="hljs-string">"get"</span>, <span class="hljs-comment">// optionsType=1时的数据请求方式，默认post</span> |
|||
<span class="hljs-attr">value</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 指定value的属性,仅optionsType＝1有效</span> |
|||
<span class="hljs-attr">label</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 指定label的属性,仅optionsType＝1有效</span> |
|||
<span class="hljs-attr">debug</span>:<span class="hljs-literal">true</span> <span class="hljs-comment">// optionsType＝1时会将请求结束保存在sessionStorage,减少不必要的请求，debug=true时不保存方便调试</span> |
|||
}, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"下拉选择框"</span> |
|||
} |
|||
}], |
|||
<span class="hljs-attr">form</span>:<span class="hljs-comment">// 表单配置信息</span> |
|||
{ |
|||
<span class="hljs-attr">labelWidth</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">class</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">size</span>: <span class="hljs-string">"default"</span>, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"form1660637148435"</span> |
|||
}, |
|||
<span class="hljs-attr">config</span>: { |
|||
<span class="hljs-attr">addUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 表单提交保存接口url</span> |
|||
<span class="hljs-attr">editUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 表单修改保存接口url</span> |
|||
<span class="hljs-attr">requestUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 获取表单初始数据url</span> |
|||
<span class="hljs-attr">style</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 表单css样式，相当于scope</span> |
|||
<span class="hljs-attr">hideField</span>: [], <span class="hljs-comment">// 使用v-if隐藏的字段，用于交互。仅在导出vue时可通过自定义方法修改，组件需设置name值</span> |
|||
<span class="hljs-attr">addLoad</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 新增表单时是否从接口加载默认数据</span> |
|||
}, |
|||
<span class="hljs-attr">events</span>: { <span class="hljs-comment">// 同props事件</span> |
|||
<span class="hljs-attr">beforeRequest</span>: <span class="hljs-function">(<span class="hljs-params">data, route</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> data |
|||
}, |
|||
<span class="hljs-attr">afterResponse</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> res |
|||
}, |
|||
<span class="hljs-comment">// afterResponse:'formatTest', // 也可以是字符串，将执行/utils/formatResutl里的方法，值为方法里的key</span>
|
|||
<span class="hljs-attr">beforeSubmit</span>: <span class="hljs-function">(<span class="hljs-params">data, route</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> data |
|||
}, |
|||
<span class="hljs-attr">afterSubmit</span>: <span class="hljs-function">(<span class="hljs-params">type,res</span>) =></span> { |
|||
<span class="hljs-comment">// type=success/fail</span>
|
|||
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res) |
|||
}, |
|||
<span class="hljs-attr">change</span>: <span class="hljs-function">(<span class="hljs-params">name, model</span>) =></span> { |
|||
<span class="hljs-comment">// name当前组件的name,model当前表单的值</span>
|
|||
<span class="hljs-keyword">return</span> model |
|||
} |
|||
} |
|||
}</code></pre>`,18),p=[l],h={__name:"form",setup(e){return(r,o)=>(s(),a("div",n,p))}};export{h as default}; |
|||
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,92 @@ |
|||
import{a1 as r,d as o,I as c,N as d,a as h,c as u,ai as m}from"./index-ea7eee8a.js";const l=o({components:{},setup(e){const n=[],s=c({});return{toggleCode:a=>{const t="vdpv_"+a;s[t+"Height"]===0?s[t+"Height"]=(n[a].value?n[a].value.offsetHeight:0)||0:s[t+"Height"]=0},...d(s)}}});l.$vd={matter:{},toc:[{content:"AKForm 表单",anchor:"akform-表单",level:1},{content:"使用方式",anchor:"使用方式",level:2},{content:"API",anchor:"api",level:2},{content:"Props",anchor:"props",level:3},{content:"Events",anchor:"events",level:3},{content:"Methods",anchor:"methods",level:3},{content:"Slot",anchor:"slot",level:3},{content:"formData",anchor:"formdata",level:3}]};const i=l,j={class:"vuedoc"},f=m(`<h1 id="akform-表单" data-source-line="1"><a class="markdownIt-Anchor" href="#akform-表单">#</a> AKForm 表单</h1><p data-source-line="3">适用于导出vue文件</p><h2 id="使用方式" data-source-line="5"><a class="markdownIt-Anchor" href="#使用方式">#</a> 使用方式</h2><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-html hljs--one-dark"><code>
|
|||
<span class="hljs-tag"><<span class="hljs-name">ak-form</span> <span class="hljs-attr">:formData</span>=<span class="hljs-string">"formData"</span>></span><span class="hljs-tag"></<span class="hljs-name">ak-form</span>></span> |
|||
</code></pre><h2 id="api" data-source-line="12"><a class="markdownIt-Anchor" href="#api">#</a> API</h2><h3 id="props" data-source-line="14"><a class="markdownIt-Anchor" href="#props">#</a> Props</h3><table data-source-line="16"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>formData</td><td>object</td><td>设计的生成表单数据</td></tr><tr><td>type</td><td>number/1</td><td>表单展示模式，1新增；2修改；3查看（表单模式） ；4查看； 5设计</td></tr><tr><td>disabled</td><td>boolean/false</td><td>表单禁用模式，类似于表单模式查看</td></tr><tr><td>requestUrl</td><td>string/boolean</td><td>表单编辑初始数据加载。适用于导出vue文件</td></tr><tr><td>beforeRequest</td><td>function (params,route)</td><td>请求编辑数据前参数处理方法，可对请求参数处理。适用于导出vue文件，<code>return false</code>时不请求</td></tr><tr><td>afterResponse</td><td>function/string</td><td>请求编辑数据完成后数据处理方法。适用于导出vue文件，<code>return false</code>阻止事件运行</td></tr><tr><td>addUrl</td><td>string</td><td>表单数据新增提交保存url</td></tr><tr><td>editUrl</td><td>string</td><td>表单数据修改保存提交url</td></tr><tr><td>beforeSubmit</td><td>function (params,route)/string</td><td>表单提交前数据处理。适用于导出vue文件，<code>return false</code>时不发送请求</td></tr><tr><td>afterSubmit</td><td>function(type,res)</td><td>表单提交后，默认提示提交结果，可return false阻止提示。res接口返回参数,type提交结果类型success/fail/validate。validate表单没通过校验时</td></tr><tr><td>value</td><td>object</td><td>表单初始值，同setValue</td></tr><tr><td>options</td><td>object</td><td>表单选项数据，同setOptions，不管选项配置如何配置，这里设置都会生效</td></tr><tr><td>dict</td><td>object</td><td>用于匹配的字典数据，一般不设置，从接口获取</td></tr></tbody></table><h3 id="events" data-source-line="31"><a class="markdownIt-Anchor" href="#events">#</a> Events</h3><table data-source-line="32"><thead><tr><th>事件名</th><th>说明</th></tr></thead><tbody><tr><td>btnClick</td><td>按钮组件点击事件</td></tr><tr><td>change</td><td>表单组件值发生变化事件(key,value,model,data,tProp)。key：组件的name值，value：组件当前的值，model:当前表单的值，tProp:表格内组件才会有值,data当前组件所在的list数据</td></tr></tbody></table><h3 id="methods" data-source-line="36"><a class="markdownIt-Anchor" href="#methods">#</a> Methods</h3><table data-source-line="38"><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>validate</td><td>表单校验方法</td></tr><tr><td>getValue</td><td>用于获取表单的值</td></tr><tr><td>setValue</td><td>对表单设置初始值(model,filter:boolean) filter=true时将会过滤掉model中不属于当前表单的字段</td></tr><tr><td>setOptions</td><td>对表单选择项快速设置</td></tr><tr><td>resetFields</td><td>重置表单方法</td></tr><tr><td>getData</td><td>加载表单初始数据(params:any)</td></tr><tr><td>submit</td><td>表单提交</td></tr></tbody></table><p data-source-line="48">两个全局特殊方法</p><table data-source-line="50"><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>get[formName]ControlByName</td><td>用于根据name值获取formData中的数据项(name:string)</td></tr><tr><td>get[formName]ValueByName</td><td>用于根据name值获取formData中的数据项的值(name:string)</td></tr></tbody></table><h3 id="slot" data-source-line="56"><a class="markdownIt-Anchor" href="#slot">#</a> Slot</h3><table data-source-line="58"><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>-</td></tr></tbody></table><h3 id="formdata" data-source-line="63"><a class="markdownIt-Anchor" href="#formdata">#</a> formData</h3><p data-source-line="65">代码编辑输入框可支持<code>json</code>或<code>javascript</code>，初始使用时可通过修改<code>/src/utils/form.ts</code>里的<code>EDITTYPE</code>的值</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>formData = { |
|||
<span class="hljs-attr">list</span>: [ |
|||
{ |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"input1660637151831"</span>, <span class="hljs-comment">// 表单元素唯一标识</span> |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"input"</span>, <span class="hljs-comment">// 表单元素类型</span> |
|||
<span class="hljs-attr">control</span>: <span class="hljs-comment">// 当前控件类型的所有\`props\`参数，详见\`element-plus\`对应的\`props\`参数</span>
|
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span> |
|||
}, |
|||
<span class="hljs-attr">config</span>: <span class="hljs-comment">// 其他一些扩展配置信息</span> |
|||
{ |
|||
<span class="hljs-attr">linkKey</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 开启联动</span> |
|||
<span class="hljs-attr">linkValue</span>: <span class="hljs-string">"$.name===1"</span>, <span class="hljs-comment">// 联动表达式，即当表单中字段标识为\`name\`的控件值为\`1\`时，当前控件才显示</span> |
|||
<span class="hljs-attr">editDisabled</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// 编辑状态下禁用，即表单部分字段只能添加，不允许编辑时可使用此设置</span> |
|||
}, |
|||
<span class="hljs-attr">customRules</span>: [], <span class="hljs-comment">// 使用快速方法添加的校验规则，会自动合并到\`item.rules\`</span>
|
|||
<span class="hljs-attr">item</span>:<span class="hljs-comment">// 组件el-form-item的参数配置</span> |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"单行文本"</span>, |
|||
<span class="hljs-attr">rules</span>: [] <span class="hljs-comment">// 校验规则</span> |
|||
} |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"select1660637154631"</span>, |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [<span class="hljs-comment">// 单选多选下拉的\`option\`选项数据</span> |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"标签1"</span>, |
|||
<span class="hljs-attr">value</span>: <span class="hljs-string">"value1"</span> |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"标签2"</span>, |
|||
<span class="hljs-attr">value</span>: <span class="hljs-string">"value2"</span> |
|||
}], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>:<span class="hljs-number">0</span>, <span class="hljs-comment">// 0固定选项 1数据源 2字典</span> |
|||
<span class="hljs-attr">optioinsFun</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 接口url、方法名、字典key</span> |
|||
<span class="hljs-attr">method</span>: <span class="hljs-string">"get"</span>, <span class="hljs-comment">// optionsType=1时的数据请求方式，默认post</span> |
|||
<span class="hljs-attr">value</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 指定value的属性,仅optionsType＝1有效</span> |
|||
<span class="hljs-attr">label</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">// 指定label的属性,仅optionsType＝1有效</span> |
|||
<span class="hljs-attr">debug</span>:<span class="hljs-literal">true</span> <span class="hljs-comment">// optionsType＝1时会将请求结束保存在sessionStorage,减少不必要的请求，debug=true时不保存方便调试</span> |
|||
}, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"下拉选择框"</span> |
|||
} |
|||
}], |
|||
<span class="hljs-attr">form</span>:<span class="hljs-comment">// 表单配置信息</span> |
|||
{ |
|||
<span class="hljs-attr">labelWidth</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">class</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">size</span>: <span class="hljs-string">"default"</span>, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"form1660637148435"</span> |
|||
}, |
|||
<span class="hljs-attr">config</span>: { |
|||
<span class="hljs-attr">addUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 表单提交保存接口url</span> |
|||
<span class="hljs-attr">editUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 表单修改保存接口url</span> |
|||
<span class="hljs-attr">requestUrl</span>: <span class="hljs-string">""</span>, <span class="hljs-comment">// 获取表单初始数据url</span> |
|||
<span class="hljs-attr">style</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 表单css样式，相当于scope</span> |
|||
<span class="hljs-attr">hideField</span>: [], <span class="hljs-comment">// 使用v-if隐藏的字段，用于交互。仅在导出vue时可通过自定义方法修改，组件需设置name值</span> |
|||
<span class="hljs-attr">addLoad</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 新增表单时是否从接口加载默认数据</span> |
|||
}, |
|||
<span class="hljs-attr">events</span>: { <span class="hljs-comment">// 同props事件</span> |
|||
<span class="hljs-attr">beforeRequest</span>: <span class="hljs-function">(<span class="hljs-params">data, route</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> data |
|||
}, |
|||
<span class="hljs-attr">afterResponse</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> res |
|||
}, |
|||
<span class="hljs-comment">// afterResponse:'formatTest', // 也可以是字符串，将执行/utils/formatResutl里的方法，值为方法里的key</span>
|
|||
<span class="hljs-attr">beforeSubmit</span>: <span class="hljs-function">(<span class="hljs-params">data, route</span>) =></span> { |
|||
<span class="hljs-keyword">return</span> data |
|||
}, |
|||
<span class="hljs-attr">afterSubmit</span>: <span class="hljs-function">(<span class="hljs-params">type,res</span>) =></span> { |
|||
<span class="hljs-comment">// type=success/fail</span>
|
|||
<span class="hljs-built_in">console</span>.log(res) |
|||
}, |
|||
<span class="hljs-attr">change</span>: <span class="hljs-function">(<span class="hljs-params">name, model</span>) =></span> { |
|||
<span class="hljs-comment">// name当前组件的name,model当前表单的值</span>
|
|||
<span class="hljs-keyword">return</span> model |
|||
} |
|||
} |
|||
} |
|||
</code></pre>`,20),g=[f];function b(e,n,s,p,a,t){return h(),u("div",j,g)}const v=r(i,[["render",b]]);export{v as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as g,v as _,h as p,r as D,I as h,e as v,o as y,z as I,a as b,c as k,l as C,u as B,S as i,q as E,D as S,V as q,B as x,m as F,E as j,C as R}from"./index-ea7eee8a.js";const T={style:{"min-height":"300px"}},M=g({__name:"form",setup(U){const d=_(),r=p().query,c=R(),n=D(),e=h({formData:{list:[],form:{},config:{}},dict:{},formId:r.form,id:r.id,loading:!0}),f=v(()=>r.id?2:1),m=()=>{if(!e.formId)return i.error("非法操作."),!1;const t={id:e.formId};E("designById",t).then(a=>{var s;const o=a.data;o&&Object.keys(o).length&&(e.formData=S(o.data),e.dict=q(o.dict),(r.id||(s=e.formData.config)!=null&&s.addLoad)&&n.value.getData({formId:e.formId,id:r.id}),d.changeBreadcrumb([{label:"内容管理"},{label:o.name}])),x(()=>{e.loading=!1})}).catch(a=>{e.loading=!1,i.error(a.message||"非法操作..")})},l=t=>(t.formId=e.formId,t.id=r.id,t),u=t=>{t==="success"&&c.go(-1)};return y(()=>{m()}),(t,a)=>{const o=F("ak-form"),s=j("loading");return I((b(),k("div",T,[C(o,{ref_key:"formEl",ref:n,formData:e.formData,type:B(f),dict:e.dict,requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent",beforeSubmit:l,afterSubmit:u},null,8,["formData","type","dict"])])),[[s,e.loading]])}}});export{M as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as g,v as _,u as p,C as v,r as D,I as h,a as y,b,h as I,D as k,z as C,o as B,c as E,m as S,S as i,q,E as x,W as F,B as j}from"./index-3679850f.js";const R={style:{"min-height":"300px"}},L=g({__name:"form",setup(T){const d=_(),r=p().query,c=v(),n=D(),e=h({formData:{list:[],form:{},config:{}},dict:{},formId:r.form,id:r.id,loading:!0}),f=y(()=>r.id?2:1),m=()=>{if(!e.formId)return i.error("非法操作."),!1;const t={id:e.formId};q("designById",t).then(a=>{var s;const o=a.data;o&&Object.keys(o).length&&(e.formData=x(o.data),e.dict=F(o.dict),(r.id||(s=e.formData.config)!=null&&s.addLoad)&&n.value.getData({formId:e.formId,id:r.id}),d.changeBreadcrumb([{label:"内容管理"},{label:o.name}])),j(()=>{e.loading=!1})}).catch(a=>{e.loading=!1,i.error(a.message||"非法操作..")})},l=t=>(t.formId=e.formId,t.id=r.id,t),u=t=>{t==="success"&&c.go(-1)};return b(()=>{m()}),(t,a)=>{const o=I("ak-form"),s=k("loading");return C((B(),E("div",R,[S(o,{ref_key:"formEl",ref:n,formData:e.formData,type:f.value,dict:e.dict,requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent",beforeSubmit:l,afterSubmit:u},null,8,["formData","type","dict"])])),[[s,e.loading]])}}});export{L as default}; |
|||
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1 @@ |
|||
import{q as g,D as m,a9 as u,S as f,aa as y}from"./index-ea7eee8a.js";const h=n=>new Promise((t,a)=>{if(!n)return a();g("designById",{id:n}).then(e=>{var r;const o=e.data,s=m(o.data);(r=s.config)!=null&&r.style&&u("screenStyle",s.config.style,!0),t(s)}).catch(e=>{f.error(e.message||"加载异常"),a()})}),p=(n,t,a,e)=>new Promise((o,s)=>{let r={};typeof a=="function"&&(r=a({})),g(n,r,{method:e}).then(c=>{const i=c.data;let l;t&&(typeof t=="function"?l=t(i):l=y(t,i)),o(l||i)}).catch(c=>{f.error(c.message||"加载异常"),s()})});export{p as a,h as g}; |
|||
@ -0,0 +1 @@ |
|||
import{q as g,E as m,a9 as u,S as f,ab as y}from"./index-3679850f.js";const h=n=>new Promise((t,e)=>{if(!n)return e();g("designById",{id:n}).then(a=>{var r;const o=a.data,s=m(o.data);(r=s.config)!=null&&r.style&&u("screenStyle",s.config.style,!0),t(s)}).catch(a=>{f.error(a.message||"加载异常"),e()})}),p=(n,t,e,a)=>new Promise((o,s)=>{let r={};typeof e=="function"&&(r=e({})),g(n,r,{method:a}).then(c=>{const i=c.data;let l;t&&(typeof t=="function"?l=t(i):l=y(t,i)),o(l||i)}).catch(c=>{f.error(c.message||"加载异常"),s()})});export{p as a,h as g}; |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
import{d as B,v as C,r as u,u as E,C as S,a as y,b as q,h as r,o as D,c as N,l as I,m as n,w as c,x as L,a1 as R,X as U,E as j,B as F,S as M}from"./index-3679850f.js";const z={class:"design-flow-container"},O={class:"tools"},X=B({__name:"index",setup(P){C().changeBreadcrumb([{label:"系统工具"},{label:"流程设计"}]);const f=u(),i=u(),d=E(),m=S(),s=u(d.query.tabs||"info"),g=u({list:[{type:"input",control:{modelValue:"",placeholder:"请输入流程名称"},config:{},name:"name",item:{label:"流程名称"},customRules:[{type:"required",message:"请输入流程名称",trigger:"blur"}]},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"designList",method:"post",debug:!0,label:"name",value:"id",beforeRequest:e=>(e.type=1,e)},name:"source",item:{label:"流程表单",rules:[{required:!0,message:"请选择流程表单",trigger:"blur"}]}},{type:"switch",control:{modelValue:1,activeValue:1,inactiveValue:0},options:[],config:{optionsType:2},name:"status",item:{label:"状态"}},{type:"component",control:{modelValue:"",colorPicker:!0},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"流程图标"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"flow"},name:"category",item:{label:"所在分组"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",label:"name",value:"id"},name:"roleId",item:{label:"角色权限",showLabel:!1}},{type:"textarea",control:{modelValue:""},config:{span:24},name:"remark",item:{label:"备注说明",showLabel:!1}}],form:{class:"form-row-2",labelWidth:"110px",size:"default"}}),l=y(()=>d.query.id),_=y(()=>l.value?2:1),v=e=>{e.paneName},V=()=>{f.value.submit()},w=e=>{var t,o,a;return l.value&&(e.id=l.value),e.icon&&(e.icon=(t=e.icon)==null?void 0:t.join(",")),e.type=3,(o=i.value)!=null&&o.getValue&&(e.data=U((a=i.value)==null?void 0:a.getValue())),e},h=e=>(e.icon&&(e.icon=e.icon.split(",")),i.value.setValue(j(e.data)),e),k=(e,t)=>{if(e==="success")if(s.value==="info"){if(s.value="flow",!l.value){const o=t.data.insertId;m.push({path:"/design/flow",query:{id:o,tabs:"flow"}}),F(()=>{p()})}}else m.push({path:"/design/flow/list"});if(e==="validate"&&s.value==="flow"){let o;try{for(const a in t)if(!o){o=t[a][0].message;break}M.error(o)}catch{}}},p=()=>{l.value&&f.value.getData({id:l.value})};return q(()=>{p()}),(e,t)=>{const o=r("el-button"),a=r("ak-form"),b=r("el-tab-pane"),T=r("el-tabs");return D(),N("div",z,[I("div",O,[n(o,{type:"primary",onClick:V},{default:c(()=>[L("保存")]),_:1})]),n(T,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=x=>s.value=x),class:"flow-tabs",onTabClick:v},{default:c(()=>[n(b,{label:"基础信息",name:"info",class:"tabs-info"},{default:c(()=>[n(a,{ref_key:"formEl",ref:f,formData:g.value,type:_.value,addUrl:"designSave",editUrl:"designEdit",requestUrl:"designById",beforeSubmit:w,afterSubmit:k,afterResponse:h},null,8,["formData","type"])]),_:1}),n(b,{label:"审批流程",name:"flow"},{default:c(()=>[n(R,{ref_key:"flowEl",ref:i},null,512)]),_:1})]),_:1},8,["modelValue"])])}}});export{X as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as B,v as C,r as u,e as y,o as S,a as q,c as D,b as E,l as n,w as r,x as N,u as I,a0 as L,h as R,W as U,D as j,B as F,S as M,m as c,C as W}from"./index-ea7eee8a.js";const z={class:"design-flow-container"},O={class:"tools"},A=B({__name:"index",setup(P){C().changeBreadcrumb([{label:"系统工具"},{label:"流程设计"}]);const f=u(),i=u(),d=R(),m=W(),s=u(d.query.tabs||"info"),g=u({list:[{type:"input",control:{modelValue:"",placeholder:"请输入流程名称"},config:{},name:"name",item:{label:"流程名称"},customRules:[{type:"required",message:"请输入流程名称",trigger:"blur"}]},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"designList",method:"post",debug:!0,label:"name",value:"id",beforeRequest:e=>(e.type=1,e)},name:"source",item:{label:"流程表单",rules:[{required:!0,message:"请选择流程表单",trigger:"blur"}]}},{type:"switch",control:{modelValue:1,activeValue:1,inactiveValue:0},options:[],config:{optionsType:2},name:"status",item:{label:"状态"}},{type:"component",control:{modelValue:"",colorPicker:!0},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"流程图标"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"flow"},name:"category",item:{label:"所在分组"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",label:"name",value:"id"},name:"roleId",item:{label:"角色权限",showLabel:!1}},{type:"textarea",control:{modelValue:""},config:{span:24},name:"remark",item:{label:"备注说明",showLabel:!1}}],form:{class:"form-row-2",labelWidth:"110px",size:"default"}}),l=y(()=>d.query.id),_=y(()=>l.value?2:1),v=e=>{e.paneName},V=()=>{f.value.submit()},w=e=>{var t,o,a;return l.value&&(e.id=l.value),e.icon&&(e.icon=(t=e.icon)==null?void 0:t.join(",")),e.type=3,(o=i.value)!=null&&o.getValue&&(e.data=U((a=i.value)==null?void 0:a.getValue())),e},h=e=>(e.icon&&(e.icon=e.icon.split(",")),i.value.setValue(j(e.data)),e),k=(e,t)=>{if(e==="success")if(s.value==="info"){if(s.value="flow",!l.value){const o=t.data.insertId;m.push({path:"/design/flow",query:{id:o,tabs:"flow"}}),F(()=>{p()})}}else m.push({path:"/design/flow/list"});if(e==="validate"&&s.value==="flow"){let o;try{for(const a in t)if(!o){o=t[a][0].message;break}M.error(o)}catch{}}},p=()=>{l.value&&f.value.getData({id:l.value})};return S(()=>{p()}),(e,t)=>{const o=c("el-button"),a=c("ak-form"),b=c("el-tab-pane"),T=c("el-tabs");return q(),D("div",z,[E("div",O,[n(o,{type:"primary",onClick:V},{default:r(()=>[N("保存")]),_:1})]),n(T,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=x=>s.value=x),class:"flow-tabs",onTabClick:v},{default:r(()=>[n(b,{label:"基础信息",name:"info",class:"tabs-info"},{default:r(()=>[n(a,{ref_key:"formEl",ref:f,formData:g.value,type:I(_),addUrl:"designSave",editUrl:"designEdit",requestUrl:"designById",beforeSubmit:w,afterSubmit:k,afterResponse:h},null,8,["formData","type"])]),_:1}),n(b,{label:"审批流程",name:"flow"},{default:r(()=>[n(L,{ref_key:"flowEl",ref:i},null,512)]),_:1})]),_:1},8,["modelValue"])])}}});export{A as default}; |
|||
@ -0,0 +1,26 @@ |
|||
import{a1 as d,d as r,I as l,N as i,a as p,c as h,ai as u}from"./index-ea7eee8a.js";const a=r({components:{},setup(t){const s=[],e=l({});return{toggleCode:n=>{const o="vdpv_"+n;e[o+"Height"]===0?e[o+"Height"]=(s[n].value?s[n].value.offsetHeight:0)||0:e[o+"Height"]=0},...i(e)}}});a.$vd={matter:{},toc:[{content:"开发指南",anchor:"开发指南",level:1},{content:"目录结构",anchor:"目录结构",level:2},{content:"快速上手",anchor:"快速上手",level:2},{content:"nodejs模拟接口",anchor:"nodejs模拟接口",level:2},{content:"代码模式",anchor:"代码模式",level:2}]};const f=a,j={class:"vuedoc"},m=u(`<h1 id="开发指南" data-source-line="1"><a class="markdownIt-Anchor" href="#开发指南">#</a> 开发指南</h1><p data-source-line="3">欢迎有兴趣的同学参与完善文档</p><h2 id="目录结构" data-source-line="5"><a class="markdownIt-Anchor" href="#目录结构">#</a> 目录结构</h2><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-text hljs--one-dark"><code>nodejs // 模拟后端接口
|
|||
public |
|||
├─mock // 模拟数据
|
|||
├─static // 静态资源
|
|||
├─ iconfont icon图标 |
|||
└─ plugins 表单设计编辑器及富文本编辑器相关js |
|||
src |
|||
├─api // 数据请求接口
|
|||
├─assets // scss及图片
|
|||
├─components // 框架布局组件
|
|||
├─docs // 使用说明文档
|
|||
└─views // 页面
|
|||
├─design // 表单设计主程序组件
|
|||
├─components // 表单表格设计公共组件
|
|||
├─dataList // 列表设计
|
|||
├─dataScreen // 数据可视化大屏设计
|
|||
├─dataSource // 数据源设计
|
|||
├─form // 表单设计
|
|||
└─index.vue 设计首页 |
|||
├─ system 系统管理相关页面 |
|||
</code></pre><h2 id="快速上手" data-source-line="30"><a class="markdownIt-Anchor" href="#快速上手">#</a> 快速上手</h2><p data-source-line="32">进入项目安装依赖包</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-text hljs--one-dark"><code>git clone https://github.com/337547038/vue-form-design.git |
|||
yarn install |
|||
yarn run dev |
|||
</code></pre><h2 id="nodejs模拟接口" data-source-line="40"><a class="markdownIt-Anchor" href="#nodejs模拟接口">#</a> nodejs模拟接口</h2><p data-source-line="42">体验完整的流程可启动nodejs模拟接口数据，使用mock/json数据只能查看；</p><p data-source-line="44">先将<code>/nodejs/akform.sql</code>导入到mysql数据库里，在db.js里修改数据库连接配置</p><p data-source-line="46">进入nodejs目录安装依赖</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-text hljs--one-dark"><code>yarn install |
|||
yarn dev |
|||
</code></pre><p data-source-line="53">浏览器进入 <a href="http://localhost:3000">http://localhost:3000</a> 开始体验</p><h2 id="代码模式" data-source-line="55"><a class="markdownIt-Anchor" href="#代码模式">#</a> 代码模式</h2><p data-source-line="57">代码编辑输入框可支持<code>json</code>或<code>javascript</code>两种模式，初始使用时可通过修改<code>/src/utils/form.ts</code>里的<code>EDITTYPE</code>的值</p>`,18),v=[m];function _(t,s,e,c,n,o){return p(),h("div",j,v)}const k=d(f,[["render",_]]);export{k as default}; |
|||
@ -0,0 +1 @@ |
|||
.header-avatar{display:flex;align-items:center}.header-avatar .avatar,.header-avatar .name{align-self:center}.header-avatar .avatar{margin-right:8px}.header-avatar .name{font-weight:500}.avatar-menu{width:150px}.avatar-menu .title{margin-left:10px}.avatar-menu li{height:35px;line-height:35px} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
import{d as h,r as k,e as v,o as C,a as o,c as n,F as p,f as d,b as l,t as m,u as w,k as D,n as S,j as q,q as x,C as B}from"./index-ea7eee8a.js";const E={class:"task-apply"},F={class:"list"},I=["onClick"],b=h({__name:"index",setup(L){const g=B(),u=k({}),c=(e,s)=>e?e.split(",")[s]:"",f=v(()=>{const e=window.localStorage.getItem("akFormDict");let s={};return e&&(s=JSON.parse(e)),s.flow||{}}),_=()=>{x("designList",{type:3}).then(s=>{const r=s.data.list,a=[];r.forEach(t=>{a.includes(t.category)||a.push(t.category)}),a.forEach(t=>{u.value[t]=r.filter(i=>i.category===t)})})},y=e=>{g.push({path:"/task/apply/start",query:{flowId:e.id}})};return C(()=>{_()}),(e,s)=>(o(),n("div",E,[(o(!0),n(p,null,d(u.value,(r,a)=>(o(),n("div",{class:"item",key:a},[l("h3",null,m(w(f)[a]||"未分组"),1),l("div",F,[(o(!0),n(p,null,d(r,t=>(o(),n("div",{key:t.id,onClick:i=>y(t)},[c(t.icon,0)?(o(),n("i",{key:0,class:D(["icon",c(t.icon,0)]),style:S({background:c(t.icon,1)})},null,6)):q("",!0),l("span",null,m(t.name),1)],8,I))),128))])]))),128))]))}});export{b as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as _,r as a,G as C,b as B,h as d,o as h,f as T,C as L,H as w,I,c as E,m as f,w as R,B as y}from"./index-3679850f.js";const S=_({__name:"content",props:{modelValue:{}},emits:["update:modelValue"],setup(b,{emit:u}){const l=b,n=a(),i=a([]),p={children:"children",label:"name"},c=()=>{const o=n.value.getCheckedKeys(!1);u("update:modelValue",o.join(","))},t=()=>{const o=window.sessionStorage.getItem("formMenuList");o&&(i.value=JSON.parse(o))};return C(()=>l.modelValue,()=>{l.modelValue&&n.value.setCheckedKeys(l.modelValue.split(","),!1)}),B(()=>{t()}),(o,k)=>{const m=d("el-tree");return h(),T(m,{ref_key:"treeRef",ref:n,data:i.value,"show-checkbox":"","node-key":"id","highlight-current":"",props:p,onCheckChange:c},null,8,["data"])}}}),z=_({__name:"index",setup(b){const u=L(),l=a(),n=a(),i=a({list:[{type:"input",control:{modelValue:"",placeholder:"请输入角色名称"},config:{},name:"name",item:{label:"角色名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,addAll:"全部",optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"},config:{}}),p=a({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"角色名称",prop:"name"},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",0:"info"}}},{label:"操作",prop:"__control"}],config:{expand:!0,openType:"dialog"},operateBtn:[{label:"分配用户",click:e=>{u.push({path:"/system/user",query:{role:e.id}})}},{label:"编辑",key:"edit",click:e=>{y(()=>{console.log(e)})}},{label:"删除",key:"del"}],controlBtn:[{label:"新增",key:"add",type:"primary",size:"small",icon:"plus"},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}]}),c=a({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"角色名称"},customRules:[{type:"required",message:"角色名称不能为空",trigger:"blur"}]},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"component",control:{modelValue:""},config:{componentName:w(S)},name:"menuId",item:{label:"菜单权限"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"none"},config:{span:0}}]}],form:{labelWidth:80,size:"default"},config:{}}),t=I({visible:!1,title:"",formType:1,dict:{},editId:""}),o=(e,s)=>{var r;(e.key==="add"||e.key==="edit")&&(t.visible=!0,t.title=e.key==="add"?"新增":"编辑",t.formType=e.key==="add"?1:2,t.editId=s&&s.id,e.key==="add"&&((r=c.value.config)!=null&&r.addLoad)&&y(()=>{l.value.getData()}),e.key==="edit"&&y(()=>{l.value.setValue(s)}))},k=e=>(t.formType===2&&(e.id=t.editId),e),m=e=>{e==="success"&&(g(),n.value.getListData())},g=()=>{t.visible=!1,t.editId=""},v=e=>{e==="none"&&g()};return(e,s)=>{const r=d("ak-list"),V=d("ak-form"),D=d("el-dialog");return h(),E("div",null,[f(r,{ref_key:"tableListEl",ref:n,requestUrl:"roleList",deleteUrl:"roleDelete",searchData:i.value,tableData:p.value,onBtnClick:o},null,8,["searchData","tableData"]),f(D,{"destroy-on-close":"",modelValue:t.visible,"onUpdate:modelValue":s[0]||(s[0]=x=>t.visible=x),title:t.title,width:"420px"},{default:R(()=>[f(V,{ref_key:"formEl",ref:l,formData:c.value,dict:t.dict,type:t.formType,addUrl:"roleSave",editUrl:"roleEdit",beforeSubmit:k,afterSubmit:m,onBtnClick:v},null,8,["formData","dict","type"])]),_:1},8,["modelValue","title"])])}}});export{z as default}; |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
import{d as h,C as k,r as v,a as C,b as w,o,c as n,F as p,e as d,l,t as m,k as D,n as S,j as q,q as x}from"./index-3679850f.js";const B={class:"task-apply"},E={class:"list"},F=["onClick"],N=h({__name:"index",setup(I){const g=k(),i=v({}),c=(e,s)=>e?e.split(",")[s]:"",_=C(()=>{const e=window.localStorage.getItem("akFormDict");let s={};return e&&(s=JSON.parse(e)),s.flow||{}}),f=()=>{x("designList",{type:3}).then(s=>{const r=s.data.list,a=[];r.forEach(t=>{a.includes(t.category)||a.push(t.category)}),a.forEach(t=>{i.value[t]=r.filter(u=>u.category===t)})})},y=e=>{g.push({path:"/task/apply/start",query:{flowId:e.id}})};return w(()=>{f()}),(e,s)=>(o(),n("div",B,[(o(!0),n(p,null,d(i.value,(r,a)=>(o(),n("div",{class:"item",key:a},[l("h3",null,m(_.value[a]||"未分组"),1),l("div",E,[(o(!0),n(p,null,d(r,t=>(o(),n("div",{key:t.id,onClick:u=>y(t)},[c(t.icon,0)?(o(),n("i",{key:0,class:D(["icon",c(t.icon,0)]),style:S({background:c(t.icon,1)})},null,6)):q("",!0),l("span",null,m(t.name),1)],8,F))),128))])]))),128))]))}});export{N as default}; |
|||
@ -0,0 +1 @@ |
|||
.design-index{text-align:center;padding:40px 0!important}.design-index h2{font-size:16px}.design-index .content{padding:40px 100px;display:flex;flex-wrap:wrap}.design-index .content .item{cursor:pointer;background:#fff;padding:10px;border-radius:10px;min-width:240px;margin:0 15px 30px}.design-index .content img{width:80px;display:block;margin:0 auto 20px}.design-index .content h3{font-size:14px;margin-bottom:5px}.design-index .content p{font-size:12px;color:#999}.design-index .info-box{display:flex;justify-content:center;background:#fff}.design-index .info{text-align:left;padding:20px 0;line-height:30px;font-size:15px}.design-index .info h3{text-align:center} |
|||
@ -0,0 +1 @@ |
|||
import{a1 as i,a as l,c as r,l as d,w as _,x as a,b as t,ai as c,m as u}from"./index-ea7eee8a.js";const p=""+new URL("form-205f4b99.png",import.meta.url).href,h=""+new URL("form-list-25ddc077.png",import.meta.url).href,m=""+new URL("echarts-6a211074.png",import.meta.url).href,v=""+new URL("data-924d86fd.png",import.meta.url).href,f=""+new URL("flow-699c1896.png",import.meta.url).href;const g={},b={class:"bg-none design-index"},$=t("h2",null,"开始创建一个页面",-1),k={class:"content"},w=t("img",{src:p,alt:""},null,-1),C=t("h3",null,"表单设计",-1),L=t("p",null,"快速信息搜集",-1),V=[w,C,L],x=t("img",{src:h,alt:""},null,-1),y=t("h3",null,"列表页设计",-1),R=t("p",null,"展示管理数据",-1),U=[x,y,R],N=t("img",{src:m,alt:""},null,-1),B=t("h3",null,"数据统计",-1),E=t("p",null,"展示数据报表",-1),P=[N,B,E],S=t("img",{src:v,alt:""},null,-1),T=t("h3",null,"数据大屏",-1),A=t("p",null,"业务数据统计展示",-1),I=[S,T,A],j=t("img",{src:f,alt:""},null,-1),q=t("h3",null,"流程设计",-1),z=t("p",null,"快速信息搜集",-1),D=[j,q,z],F=c('<div class="info-box"><div class="info"><h3>ak-form基于 Vue3 的可视化低代码快速开发平台</h3><br><div> • 使用基于 Vue 3.0 的桌面端组件库 Elemnet-Plus ，使用广泛，扩展方便 <br> • 通过可视化的操作，快速完成表单页面、表格列表、列表筛选页面的创建<br> • 表格列表页集成常用的时间格式化、字典匹配、Tag标签显示等等<br> • 提供功能强大的各类组件，可适用在各种复杂的场景中<br> • 丰富的API接口，方便快速的生成表单，验证和获取表单数据<br> • 代码简洁、易于二次开发 用于学习研究，欢迎交流，微信：<span style="color:red;">337547038</span><br> • 如果项目对你有所帮助，请留个赞，以表支持<br> • 如果你对该项目感兴趣，欢迎加入项目建设中来<br> • 如果你有任何建议，请联系我或在评论区留言 </div><div><br></div></div></div>',1);function G(e,s){const n=u("el-button");return l(),r("div",b,[$,d(n,{type:"primary",link:"",onClick:s[0]||(s[0]=o=>e.$router.push({path:"/docs"}))},{default:_(()=>[a("如何使用？")]),_:1}),t("div",k,[t("div",{class:"item",onClick:s[1]||(s[1]=o=>e.$router.push({path:"/design/form"}))},V),t("div",{class:"item",onClick:s[2]||(s[2]=o=>e.$router.push({path:"/design/dataList"}))},U),t("div",{class:"item",onClick:s[3]||(s[3]=o=>e.$router.push({path:"/design/echarts"}))},P),t("div",{class:"item",onClick:s[4]||(s[4]=o=>e.$router.push({path:"/design/dataScreen"}))},I),t("div",{class:"item",onClick:s[5]||(s[5]=o=>e.$router.push({path:"/design/flow"}))},D)]),F])}const J=i(g,[["render",G]]);export{J as default}; |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
import{d as _,r as a,G as C,o as B,a as h,g as T,m as d,H as L,I as w,c as I,l as f,w as E,B as y,C as R}from"./index-ea7eee8a.js";const S=_({__name:"content",props:{modelValue:null},emits:["update:modelValue"],setup(g,{emit:u}){const l=g,n=a(),i=a([]),p={children:"children",label:"name"},c=()=>{const o=n.value.getCheckedKeys(!1);u("update:modelValue",o.join(","))},t=()=>{const o=window.sessionStorage.getItem("formMenuList");o&&(i.value=JSON.parse(o))};return C(()=>l.modelValue,()=>{l.modelValue&&n.value.setCheckedKeys(l.modelValue.split(","),!1)}),B(()=>{t()}),(o,k)=>{const m=d("el-tree");return h(),T(m,{ref_key:"treeRef",ref:n,data:i.value,"show-checkbox":"","node-key":"id","highlight-current":"",props:p,onCheckChange:c},null,8,["data"])}}}),z=_({__name:"index",setup(g){const u=R(),l=a(),n=a(),i=a({list:[{type:"input",control:{modelValue:"",placeholder:"请输入角色名称"},config:{},name:"name",item:{label:"角色名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,addAll:"全部",optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"},config:{}}),p=a({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"角色名称",prop:"name"},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",0:"info"}}},{label:"操作",prop:"__control"}],config:{expand:!0,openType:"dialog"},operateBtn:[{label:"分配用户",click:e=>{u.push({path:"/system/user",query:{role:e.id}})}},{label:"编辑",key:"edit",click:e=>{y(()=>{console.log(e)})}},{label:"删除",key:"del"}],controlBtn:[{label:"新增",key:"add",type:"primary",size:"small",icon:"plus"},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}]}),c=a({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"角色名称"},customRules:[{type:"required",message:"角色名称不能为空",trigger:"blur"}]},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"component",control:{modelValue:""},config:{componentName:L(S)},name:"menuId",item:{label:"菜单权限"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"none"},config:{span:0}}]}],form:{labelWidth:80,size:"default"},config:{}}),t=w({visible:!1,title:"",formType:1,dict:{},editId:""}),o=(e,s)=>{var r;(e.key==="add"||e.key==="edit")&&(t.visible=!0,t.title=e.key==="add"?"新增":"编辑",t.formType=e.key==="add"?1:2,t.editId=s&&s.id,e.key==="add"&&((r=c.value.config)!=null&&r.addLoad)&&y(()=>{l.value.getData()}),e.key==="edit"&&y(()=>{l.value.setValue(s)}))},k=e=>(t.formType===2&&(e.id=t.editId),e),m=e=>{e==="success"&&(b(),n.value.getListData())},b=()=>{t.visible=!1,t.editId=""},v=e=>{e==="none"&&b()};return(e,s)=>{const r=d("ak-list"),V=d("ak-form"),D=d("el-dialog");return h(),I("div",null,[f(r,{ref_key:"tableListEl",ref:n,requestUrl:"roleList",deleteUrl:"roleDelete",searchData:i.value,tableData:p.value,onBtnClick:o},null,8,["searchData","tableData"]),f(D,{"destroy-on-close":"",modelValue:t.visible,"onUpdate:modelValue":s[0]||(s[0]=x=>t.visible=x),title:t.title,width:"420px"},{default:E(()=>[f(V,{ref_key:"formEl",ref:l,formData:c.value,dict:t.dict,type:t.formType,addUrl:"roleSave",editUrl:"roleEdit",beforeSubmit:k,afterSubmit:m,onBtnClick:v},null,8,["formData","dict","type"])]),_:1},8,["modelValue","title"])])}}});export{z as default}; |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
.img-list ul[data-v-7ebb50b6]{display:flex;flex-wrap:wrap;max-height:500px;overflow-y:auto}.img-list li[data-v-7ebb50b6]{width:115px;height:88px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:3px;overflow:hidden;margin:5px}.img-list li img[data-v-7ebb50b6]{display:block;cursor:pointer;max-width:100%;max-height:100%}.screen-ruler{overflow:hidden;cursor:col-resize;position:sticky;top:0;height:20px;background:rgb(48,65,86) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iNjdENjhGQ0FBRDUxRDU3NTFDQzY1NjEzNkFBODQ4QjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mjc3RDQ0MEJEREFGMTFFRDgyNTU4MUQxRjg5NzM0RTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mjc3RDQ0MEFEREFGMTFFRDgyNTU4MUQxRjg5NzM0RTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MmNlNGZlMWQtMWU4My0wZTQ3LWFhYTQtMzQwMDg2ZTFiYzk2IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDk2YzEwYjctZTcxYS04MTRlLWE1NjgtY2M5YTQyZThhMzA4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+m5WPdgAAAKlJREFUeNrsmN0KgCAMhTN8Vt9JX3bpTVCQLX/AxXeuEkac7exPnYhsYB3shABBAILYgU8pSQjBlUP+NkM8c1bZreSThjMVQssC1Za1QvlaapWzW6z/+sO34P0l0Fo/7oHu9dnFGB+HukbVXgLazJmF1fh7qxl8C+SZVAx1gCAIAhCEe0h9cGqfVy7DtWI72q5p+I/gVzZVxdamXjqoEFoWQBAEAa04BBgA2p5O+e4bVSMAAAAASUVORK5CYII=) repeat-x left top;z-index:11}.screen-ruler .ruler-box{height:20px;position:absolute;width:2200px;display:flex}.screen-ruler .ruler-box span{width:100px;font-size:12px;color:#999;transform-origin:left top;padding-left:3px;user-select:none}.screen-ruler.ruler-v{position:absolute;cursor:row-resize;transform:rotate(90deg);transform-origin:left top;top:20px}.ruler-line{position:absolute;z-index:10;cursor:col-resize;height:100%;width:5px;top:20px}.ruler-line:after{content:"";width:0;border-left:1px solid #409eff;position:absolute;left:2px;height:1080px}.ruler-line span{position:absolute;left:10px;top:0;color:#fff;background:#409eff;padding:2px 3px;border-radius:3px;font-size:12px}.ruler-line.dotted:after{border-left:1px dotted #409eff}.ruler-line.line-v{width:1920px;height:5px;cursor:row-resize}.ruler-line.line-v:after{width:100%;height:5px;left:auto;top:2px;border-left:0;border-top:1px solid #409eff}.ruler-line.line-v.dotted:after{border-top:1px dotted #409eff} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
import{_ as i,h as l,o as r,c as d,m as _,w as a,x as c,l as t,ai as u}from"./index-3679850f.js";const p=""+new URL("form-205f4b99.png",import.meta.url).href,h=""+new URL("form-list-25ddc077.png",import.meta.url).href,m=""+new URL("echarts-6a211074.png",import.meta.url).href,v=""+new URL("data-924d86fd.png",import.meta.url).href,f=""+new URL("flow-699c1896.png",import.meta.url).href;const g={},b={class:"bg-none design-index"},$=t("h2",null,"开始创建一个页面",-1),k={class:"content"},w=t("img",{src:p,alt:""},null,-1),C=t("h3",null,"表单设计",-1),L=t("p",null,"快速信息搜集",-1),V=[w,C,L],x=t("img",{src:h,alt:""},null,-1),y=t("h3",null,"列表页设计",-1),R=t("p",null,"展示管理数据",-1),U=[x,y,R],N=t("img",{src:m,alt:""},null,-1),B=t("h3",null,"数据统计",-1),E=t("p",null,"展示数据报表",-1),P=[N,B,E],S=t("img",{src:v,alt:""},null,-1),T=t("h3",null,"数据大屏",-1),A=t("p",null,"业务数据统计展示",-1),I=[S,T,A],j=t("img",{src:f,alt:""},null,-1),q=t("h3",null,"流程设计",-1),z=t("p",null,"快速信息搜集",-1),D=[j,q,z],F=u('<div class="info-box"><div class="info"><h3>ak-design基于 Vue3 的可视化低代码快速开发平台</h3><br><div> • 使用基于 Vue 3.0 的桌面端组件库 Elemnet-Plus ，使用广泛，扩展方便 <br> • 通过可视化的操作，快速完成表单页面、表格列表、列表筛选页面的创建<br> • 表格列表页集成常用的时间格式化、字典匹配、Tag标签显示等等<br> • 提供功能强大的各类组件，可适用在各种复杂的场景中<br> • 丰富的API接口，方便快速的生成表单，验证和获取表单数据<br> • 代码简洁、易于二次开发 用于学习研究，欢迎交流，微信：<span style="color:red;">337547038</span><br> • 如果项目对你有所帮助，请留个赞，以表支持<br> • 如果你对该项目感兴趣，欢迎加入项目建设中来<br> • 如果你有任何建议，请联系我或在评论区留言 </div><div><br></div></div></div>',1);function G(e,s){const n=l("el-button");return r(),d("div",b,[$,_(n,{type:"primary",link:"",onClick:s[0]||(s[0]=o=>e.$router.push({path:"/docs"}))},{default:a(()=>[c("如何使用？")]),_:1}),t("div",k,[t("div",{class:"item",onClick:s[1]||(s[1]=o=>e.$router.push({path:"/design/form"}))},V),t("div",{class:"item",onClick:s[2]||(s[2]=o=>e.$router.push({path:"/design/dataList"}))},U),t("div",{class:"item",onClick:s[3]||(s[3]=o=>e.$router.push({path:"/design/echarts"}))},P),t("div",{class:"item",onClick:s[4]||(s[4]=o=>e.$router.push({path:"/design/dataScreen"}))},I),t("div",{class:"item",onClick:s[5]||(s[5]=o=>e.$router.push({path:"/design/flow"}))},D)]),F])}const J=i(g,[["render",G]]);export{J as default}; |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
.img-list ul[data-v-b06a5e4b]{display:flex;flex-wrap:wrap;max-height:500px;overflow-y:auto}.img-list li[data-v-b06a5e4b]{width:115px;height:88px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:3px;overflow:hidden;margin:5px}.img-list li img[data-v-b06a5e4b]{display:block;cursor:pointer;max-width:100%;max-height:100%}.screen-ruler{overflow:hidden;cursor:col-resize;position:sticky;top:0;height:20px;background:rgb(48,65,86) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iNjdENjhGQ0FBRDUxRDU3NTFDQzY1NjEzNkFBODQ4QjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mjc3RDQ0MEJEREFGMTFFRDgyNTU4MUQxRjg5NzM0RTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mjc3RDQ0MEFEREFGMTFFRDgyNTU4MUQxRjg5NzM0RTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MmNlNGZlMWQtMWU4My0wZTQ3LWFhYTQtMzQwMDg2ZTFiYzk2IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDk2YzEwYjctZTcxYS04MTRlLWE1NjgtY2M5YTQyZThhMzA4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+m5WPdgAAAKlJREFUeNrsmN0KgCAMhTN8Vt9JX3bpTVCQLX/AxXeuEkac7exPnYhsYB3shABBAILYgU8pSQjBlUP+NkM8c1bZreSThjMVQssC1Za1QvlaapWzW6z/+sO34P0l0Fo/7oHu9dnFGB+HukbVXgLazJmF1fh7qxl8C+SZVAx1gCAIAhCEe0h9cGqfVy7DtWI72q5p+I/gVzZVxdamXjqoEFoWQBAEAa04BBgA2p5O+e4bVSMAAAAASUVORK5CYII=) repeat-x left top;z-index:11}.screen-ruler .ruler-box{height:20px;position:absolute;width:2200px;display:flex}.screen-ruler .ruler-box span{width:100px;font-size:12px;color:#999;transform-origin:left top;padding-left:3px;user-select:none}.screen-ruler.ruler-v{position:absolute;cursor:row-resize;transform:rotate(90deg);transform-origin:left top;top:20px}.ruler-line{position:absolute;z-index:10;cursor:col-resize;height:100%;width:5px;top:20px}.ruler-line:after{content:"";width:0;border-left:1px solid #409eff;position:absolute;left:2px;height:1080px}.ruler-line span{position:absolute;left:10px;top:0;color:#fff;background:#409eff;padding:2px 3px;border-radius:3px;font-size:12px}.ruler-line.dotted:after{border-left:1px dotted #409eff}.ruler-line.line-v{width:1920px;height:5px;cursor:row-resize}.ruler-line.line-v:after{width:100%;height:5px;left:auto;top:2px;border-left:0;border-top:1px solid #409eff}.ruler-line.line-v.dotted:after{border-top:1px dotted #409eff} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,23 @@ |
|||
/* empty css */import{o as e,c as s,ai as n}from"./index-3679850f.js";const o={class:"marked-body"},c=n(`<h1 id="开发指南">开发指南</h1><p>欢迎有兴趣的同学参与完善文档</p><h2 id="目录结构">目录结构</h2><pre class="language-text"><code class="hljs">nodejs // 模拟后端接口
|
|||
public |
|||
├─mock // 模拟数据
|
|||
├─static // 静态资源
|
|||
├─ iconfont icon图标 |
|||
└─ plugins 表单设计编辑器及富文本编辑器相关js |
|||
src |
|||
├─api // 数据请求接口
|
|||
├─assets // scss及图片
|
|||
├─components // 框架布局组件
|
|||
├─docs // 使用说明文档
|
|||
└─views // 页面
|
|||
├─design // 表单设计主程序组件
|
|||
├─components // 表单表格设计公共组件
|
|||
├─dataList // 列表设计
|
|||
├─dataScreen // 数据可视化大屏设计
|
|||
├─dataSource // 数据源设计
|
|||
├─form // 表单设计
|
|||
└─index.vue 设计首页 |
|||
├─ system 系统管理相关页面</code></pre><h2 id="快速上手">快速上手</h2><p>进入项目安装依赖包</p><pre class="language-text"><code class="hljs">git clone https://github.com/337547038/vue-form-design.git |
|||
pnpm install |
|||
pnpm run dev</code></pre><h2 id="nodejs模拟接口">nodejs模拟接口</h2><p>体验完整的流程可启动nodejs模拟接口数据，使用mock/json数据只能查看；</p><p>先将<code>/nodejs/akform.sql</code>导入到mysql数据库里，在db.js里修改数据库连接配置</p><p>进入nodejs目录安装依赖</p><pre class="language-text"><code class="hljs">pnpm install |
|||
pnpm dev</code></pre><p>浏览器进入 <a href="http://localhost:3000">http://localhost:3000</a> 开始体验</p><h2 id="代码模式">代码模式</h2><p>代码编辑输入框可支持<code>json</code>或<code>javascript</code>两种模式，初始使用时可通过修改<code>/src/utils/form.ts</code>里的<code>EDITTYPE</code>的值</p>`,15),t=[c],r={__name:"index",setup(d){return(a,p)=>(e(),s("div",o,t))}};export{r as default}; |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,10 @@ |
|||
a{text-decoration:none}.index-page{padding:100px 0 0;width:600px;margin:0 auto}.index-page .intro{line-height:28px;font-size:16px;margin-bottom:30px}.index-page .btn .title{font-size:16px;margin-bottom:20px}.index-page .btn .title h4{font-size:15px;padding-top:5px}.index-page .btn .row{margin-bottom:30px;display:flex}.index-page .btn .row a{display:block;margin-left:15px}.index-page .btn .row a:first-child{margin-left:0}.index-page .docs{margin-bottom:20px}.form-list-page,.add-form-demo{padding:20px}.form-list-page h3,.add-form-demo h3{margin-bottom:20px}.layout-docs{background:#f7f8fa;display:flex}.layout-docs .nav{position:fixed;right:20px;top:0;border-bottom:0;background:#f7f8fa}.layout-docs .nav .el-menu-item{padding:0 10px}.layout-docs .sidebar{width:0;background:#fff;height:100vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 8px 12px #ebedf0;transition:all .3s;padding-top:20px}.layout-docs .sidebar a{display:block;margin:0;padding:4px 0;color:#455a64;font-size:14px;transition:color .2s;text-decoration:none}.layout-docs .sidebar a:hover{color:#4fc08d}.layout-docs .sidebar.show{width:180px;padding-left:20px}.layout-docs .main-content{flex:2;padding:10px 30px 30px;overflow-x:hidden;overflow-y:auto;height:100vh}.layout-docs .main-content .markdownIt-Anchor{display:none}.layout-docs .main-content .row{margin-bottom:15px}.layout-docs .main-content h1{padding:30px 0 20px;margin:0}.layout-docs .main-content h2{padding:30px 0 10px;margin:0}.layout-docs .main-content h3{padding:20px 0 10px;margin:0}.layout-docs .main-content .vuedoc-demo{margin-bottom:20px}.layout-docs .main-content p{padding:6px 0;line-height:22px;color:#455a64}.layout-docs .main-content p strong{color:#333}.layout-docs .main-content p code,.layout-docs .main-content table code{color:#444;background-color:#eeffde;margin:0 4px;display:inline-block;padding:3px 7px;border-radius:3px;font-size:14px;line-height:20px}.layout-docs .main-content .vuedoc__code{line-height:22px}.layout-docs .main-content .vuedoc-demo__footer:hover{color:#07c160}.layout-docs .main-content .language-json,.layout-docs .main-content .language-javascript,.layout-docs .main-content .language-js{margin-bottom:30px}.layout-docs .main-content img{max-width:100%;display:block}.layout-docs .vuedoc>table{width:100%;border-spacing:0;border-collapse:collapse;border:1px solid #eaeefb;margin-bottom:20px;background:#fff}.layout-docs .vuedoc>table th,.layout-docs .vuedoc>table td{border:1px solid #eaeefb;color:#314659;text-align:left;padding:10px 15px}.layout-docs .left-fade-leave-active,.layout-docs .left-fade-enter-active{transition:all .3s}.layout-docs .left-fade-enter-active{opacity:0;transform:translate(-30px)}.layout-docs .left-fade-enter-to{transform:translate(0);opacity:1}.layout-docs .left-fade-leave-active{opacity:0;transform:translate(30px)}.marked-body{font-size:14px}.marked-body h1{margin-bottom:30px}.marked-body h2{margin-bottom:20px}.marked-body h3{margin-bottom:10px}.marked-body p code,.marked-body table code{color:#444;background-color:#eeffde;margin:0 4px;display:inline-block;padding:3px 7px;border-radius:3px;font-size:14px;line-height:20px}.marked-body .language-json,.marked-body .language-javascript,.marked-body .language-js{margin-bottom:30px}.marked-body table{width:100%;border-spacing:0;border-collapse:collapse;border:1px solid #eaeefb;margin-bottom:20px}.marked-body table th,.marked-body table td{border:1px solid #eaeefb;color:#314659;text-align:left;padding:10px 15px;background:#fff}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! |
|||
Theme: GitHub Dark |
|||
Description: Dark theme as seen on github.com |
|||
Author: github.com |
|||
Maintainer: @Hirse |
|||
Updated: 2021-05-15 |
|||
|
|||
Outdated base version: https://github.com/primer/github-syntax-dark |
|||
Current colors taken from GitHub's CSS |
|||
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c} |
|||
@ -0,0 +1 @@ |
|||
import{d as V,C as $,r as c,B as z,b as A,h as r,o as t,c as a,l as C,F as d,e as v,k as q,m as h,w as s,n as D,t as u,f as m,x as k,T as F,i as M}from"./index-3679850f.js";const R={class:"layout-docs"},j=["onClick"],J=V({__name:"layout",setup(G){const T=$(),_=c(),i=c([]);T.afterEach(()=>{x()});const x=()=>{z(()=>{setTimeout(()=>{if(_.value){const n=_.value.querySelectorAll("h2,h3"),o=Array.from(n).filter(l=>!!l.innerText.trim());o.length||(i.value=[]),i.value=o.map(l=>({title:l.id,lineIndex:l.getAttribute("data-source-line"),indent:parseInt(l.tagName.replace(/h/gi,""))}))}},500)})},b=n=>{const o=document.querySelector(`[data-source-line="${n.lineIndex}"]`);o&&o.scrollIntoView({behavior:"smooth",block:"start"})},S=c([{title:"开发指南",to:"/docs"},{title:"组件",children:[{title:"ak-form",to:"/docs/form"},{title:"ak-list",to:"/docs/list"}]},{title:"接口文档",to:"/docs/api",children:[{title:"数据源设计",to:"/docs/api"},{title:"表单设计",to:"/docs/api"},{title:"列表页设计",to:"/docs/api"},{title:"数据统计",to:"/docs/api"},{title:"数据大屏",to:"/docs/api"},{title:"流程设计",to:"/docs/api"}]},{title:"使用手册",to:"/docs/use",children:[{title:"快速开始",to:"/docs/use-start"},{title:"数据源",to:"/docs/use-dataSource"},{title:"ak-form",to:"/docs/use-form"},{title:"ak-list",to:"/docs/use-list"},{title:"可视化数据大屏",to:"/docs/use-screen"}]}]),w=c("/docs"),B=(n,o)=>{console.log(n,o)};return A(()=>{x()}),(n,o)=>{var y;const l=r("el-menu-item"),I=r("el-sub-menu"),E=r("el-menu"),L=r("router-view");return t(),a("div",R,[C("div",{class:q(["sidebar",{show:(y=i.value)==null?void 0:y.length}])},[(t(!0),a(d,null,v(i.value,(e,f)=>(t(),a("a",{style:D([{cursor:"pointer"},{paddingLeft:`${(e.indent-2)*15}px`}]),onClick:p=>b(e),key:f},u(e.title),13,j))),128))],2),h(E,{"default-active":w.value,class:"nav",mode:"horizontal",router:"","active-color":"#409eff",ellipsis:!1,onSelect:B},{default:s(()=>[(t(!0),a(d,null,v(S.value,(e,f)=>{var p;return t(),a(d,{key:f},[(p=e.children)!=null&&p.length?(t(),m(I,{key:0,index:e.to||e.title},{title:s(()=>[k(u(e.title),1)]),default:s(()=>[(t(!0),a(d,null,v(e.children,(g,N)=>(t(),m(l,{index:g.to,key:N},{default:s(()=>[k(u(g.title),1)]),_:2},1032,["index"]))),128))]),_:2},1032,["index"])):(t(),m(l,{key:1,index:e.to},{default:s(()=>[k(u(e.title),1)]),_:2},1032,["index"]))],64)}),128))]),_:1},8,["default-active"]),C("div",{class:"main-content",ref_key:"articleEl",ref:_},[h(L,null,{default:s(({Component:e})=>[h(F,{name:"left-fade",mode:"out-in"},{default:s(()=>[(t(),m(M(e)))]),_:2},1024)]),_:1})],512)])}}});export{J as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as V,r as c,B as $,o as z,a as t,c as a,b as C,F as r,f as v,k as A,l as h,w as s,C as q,m as d,n as D,t as u,g as m,x as k,T as F,i as M}from"./index-ea7eee8a.js";const R={class:"layout-docs"},j=["onClick"],J=V({__name:"layout",setup(G){const T=q(),_=c(),i=c([]);T.afterEach(()=>{x()});const x=()=>{$(()=>{setTimeout(()=>{if(_.value){const n=_.value.querySelectorAll("h2,h3"),o=Array.from(n).filter(l=>!!l.innerText.trim());o.length||(i.value=[]),i.value=o.map(l=>({title:l.id,lineIndex:l.getAttribute("data-source-line"),indent:parseInt(l.tagName.replace(/h/gi,""))}))}},500)})},b=n=>{const o=document.querySelector(`[data-source-line="${n.lineIndex}"]`);o&&o.scrollIntoView({behavior:"smooth",block:"start"})},S=c([{title:"开发指南",to:"/docs"},{title:"组件",children:[{title:"ak-form",to:"/docs/form"},{title:"ak-list",to:"/docs/list"}]},{title:"接口文档",to:"/docs/api",children:[{title:"数据源设计",to:"/docs/api"},{title:"表单设计",to:"/docs/api"},{title:"列表页设计",to:"/docs/api"},{title:"数据统计",to:"/docs/api"},{title:"数据大屏",to:"/docs/api"},{title:"流程设计",to:"/docs/api"}]},{title:"使用手册",to:"/docs/use",children:[{title:"快速开始",to:"/docs/use-start"},{title:"数据源",to:"/docs/use-dataSource"},{title:"ak-form",to:"/docs/use-form"},{title:"ak-list",to:"/docs/use-list"},{title:"可视化数据大屏",to:"/docs/use-screen"}]}]),w=c("/docs"),B=(n,o)=>{console.log(n,o)};return z(()=>{x()}),(n,o)=>{var y;const l=d("el-menu-item"),I=d("el-sub-menu"),E=d("el-menu"),L=d("router-view");return t(),a("div",R,[C("div",{class:A(["sidebar",{show:(y=i.value)==null?void 0:y.length}])},[(t(!0),a(r,null,v(i.value,(e,f)=>(t(),a("a",{style:D([{cursor:"pointer"},{paddingLeft:`${(e.indent-2)*15}px`}]),onClick:p=>b(e),key:f},u(e.title),13,j))),128))],2),h(E,{"default-active":w.value,class:"nav",mode:"horizontal",router:"","active-color":"#409eff",ellipsis:!1,onSelect:B},{default:s(()=>[(t(!0),a(r,null,v(S.value,(e,f)=>{var p;return t(),a(r,{key:f},[(p=e.children)!=null&&p.length?(t(),m(I,{key:0,index:e.to||e.title},{title:s(()=>[k(u(e.title),1)]),default:s(()=>[(t(!0),a(r,null,v(e.children,(g,N)=>(t(),m(l,{index:g.to,key:N},{default:s(()=>[k(u(g.title),1)]),_:2},1032,["index"]))),128))]),_:2},1032,["index"])):(t(),m(l,{key:1,index:e.to},{default:s(()=>[k(u(e.title),1)]),_:2},1032,["index"]))],64)}),128))]),_:1},8,["default-active"]),C("div",{class:"main-content",ref_key:"articleEl",ref:_},[h(L,null,{default:s(({Component:e})=>[h(F,{name:"left-fade",mode:"out-in"},{default:s(()=>[(t(),m(M(e)))]),_:2},1024)]),_:1})],512)])}}});export{J as default}; |
|||
@ -0,0 +1 @@ |
|||
/* empty css */import{o as t,c as d,ai as e}from"./index-3679850f.js";const r={class:"marked-body"},a=e('<h1 id="aklist-内容列表">AKList 内容列表</h1><pre class="language-html"><code class="hljs"><span class="hljs-tag"><<span class="hljs-name">ak-list</span> <span class="hljs-attr">:tableData</span>=<span class="hljs-string">"tableData"</span>></span><span class="hljs-tag"></<span class="hljs-name">ak-list</span>></span></code></pre><h2 id="api">API</h2><h3 id="props">Props</h3><table><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>tableData</td><td>object</td><td>设计表格配置数据</td></tr><tr><td>searchData</td><td>object</td><td>列表页条件筛选表单数据，同表单的<code>formData</code></td></tr><tr><td>beforeRequest</td><td>function(params,route)</td><td>请求列表前参数处理方法，可对请求参数处理</td></tr><tr><td>afterResponse</td><td>function/string</td><td>请求完成后列表数据处理方法</td></tr><tr><td>beforeDelete</td><td>function(params,route)</td><td>删除请求前事件</td></tr><tr><td>showPage</td><td>boolean/true</td><td>是否显示分页信息</td></tr><tr><td>requestUrl</td><td>string</td><td>请求的api接口方法</td></tr><tr><td>deleteUrl</td><td>string</td><td>删除的api接口方法</td></tr><tr><td>dict</td><td>object</td><td>用于匹配的字典数据，一般不设置，从接口获取</td></tr><tr><td>fixedBottomScroll</td><td>boolean/true</td><td>横向滚动条固定在浏览器底部</td></tr><tr><td>autoLoad</td><td>boolean/true</td><td>初始时是否自动请求加载数据</td></tr><tr><td>treeData</td><td>object</td><td>列表左侧栏树数据</td></tr></tbody></table><h3 id="methods">Methods</h3><table><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>getListData</td><td>列表请求方法，可手动调用</td></tr><tr><td>delClick</td><td>数据删除</td></tr><tr><td>table</td><td>表格方法</td></tr><tr><td>setSearchFormValue</td><td>设置查询条件表单初始值。可根据url参数先设置查询表单初始值再加载列表请求方法</td></tr></tbody></table><h3 id="slot">Slot</h3><table><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>位于筛选表单和表格列表间，可用于存放添加删除数据的按钮或其他操作</td></tr><tr><td>controlBtn</td><td>位于筛列表可配置新增删除按钮后面</td></tr><tr><td>searchForm</td><td>位于条件筛选表单内部</td></tr><tr><td>-</td><td>columns对应的props</td></tr></tbody></table><h3 id="tabledata">tableData</h3><table><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>tableProps</td><td>Object</td><td>表格配置</td></tr><tr><td>columns</td><td>Array</td><td>表格列配置</td></tr><tr><td>controlBtn</td><td>Array</td><td>列表上方按钮，如新增/删除</td></tr><tr><td>operateBtn</td><td>Array</td><td>操作拦按钮设置，仅对props='__control'列</td></tr><tr><td>events.beforeRequest</td><td>Function</td><td>同<code>props.beforeRequest</code></td></tr><tr><td>events.afterResponse</td><td>Function/string</td><td>同<code>props.afterResponse</code></td></tr><tr><td>events.beforeDelete</td><td>Function</td><td>同<code>props.beforeDelete</code></td></tr></tbody></table><h3 id="tree">tree</h3><table><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>show</td><td>boolean</td><td>是否显示</td></tr><tr><td>name</td><td>string</td><td>唯一标识，查询条件参数值</td></tr><tr><td>method</td><td>string</td><td>数据接口请求方式，get/post默认post</td></tr><tr><td>requestUrl</td><td>string</td><td>数据接口请求地址，必填</td></tr><tr><td>beforeRequest</td><td>Function(data,route)</td><td>接口请求前数据参数处理方式</td></tr><tr><td>afterResponse</td><td>Function/string</td><td>接口请求后数据参数处理方式</td></tr><tr><td>treeProps</td><td>object</td><td>组件tree对应props</td></tr></tbody></table>',13),o=[a],p={__name:"list",setup(s){return(h,l)=>(t(),d("div",r,o))}};export{p as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as f,r as o,a as b,c as y,l as a,w as s,x as _,t as n,m as r,C as g}from"./index-ea7eee8a.js";const x=f({__name:"list",setup(k){const l=g(),c=o(),i=o({list:[{type:"input",control:{modelValue:"",placeholder:"请输入流程名称"},config:{},name:"name",item:{label:"流程名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:""},name:"flow",item:{label:"流程分类"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"},config:{}}),p=o({columns:[{label:"多选",type:"selection"},{label:"流程名称",prop:"name"},{label:"流程表单",prop:"sourceName"},{label:"分类",prop:"category",config:{dictKey:"flow"}},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{label:"操作",prop:"__control"}],config:{},controlBtn:[{label:"新增流程",type:"primary",size:"small",icon:"plus",click:()=>{l.push({path:"/design/flow"})}},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{l.push({path:"/design/flow",query:{id:e.id}})}},{label:"删除",key:"del"}]}),u=e=>(e.type=3,e);return(e,h)=>{const d=r("router-link"),m=r("ak-list");return b(),y("div",null,[a(m,{ref_key:"tableListEl",ref:c,requestUrl:"designList",deleteUrl:"designDelete",searchData:i.value,tableData:p.value,beforeRequest:u},{sourceName:s(({row:t})=>[a(d,{to:`/design/form?id=${t.source}`},{default:s(()=>[_(n(t.sourceName)+"/"+n(t.source),1)]),_:2},1032,["to"])]),_:1},8,["searchData","tableData"])])}}});export{x as default}; |
|||
@ -0,0 +1 @@ |
|||
import{a1 as t,a as e,c as o}from"./index-ea7eee8a.js";const s={name:"List",components:{},props:{},data(){return{}},computed:{},mounted(){},methods:{}};function n(a,c,r,p,d,m){return e(),o("div")}const i=t(s,[["render",n]]);export{i as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as w,I as x,r as l,a as B,c as L,l as a,w as s,x as N,t as d,m as i,C as T,B as C}from"./index-ea7eee8a.js";const F=w({__name:"list",setup(q){const n=T(),t=x({visible:!1,row:{}}),u=l(),r=l(),m=l({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"名称",width:"150px"},{prop:"sourceName",label:"表单名称/ID",width:150},{prop:"category",label:"分类",config:{dictKey:"list"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"110px",fixed:"right"}],controlBtn:[{label:"新增列表",icon:"plus",type:"primary",size:"small",click:()=>{c({})}},{label:"删除",key:"del",size:"small",type:"danger",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{c(e)}},{label:"设置",click:e=>{t.visible=!0,C(()=>{t.row=e})}},{label:"搜索设置",click:e=>{n.push({path:"/design/form",query:{type:"search",id:e.id,redirect:"/design/dataList/list"}})}},{label:"查看",click:e=>{n.push({path:"/design/dataList/content",query:{id:e.id}})}},{label:"删除",key:"del"}],config:{operateDropdown:!0}}),c=e=>{n.push({path:"/design/dataList",query:{id:e.id}})},b=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入列表名称"},config:{},name:"name",item:{label:"名称"}},{type:"input",control:{modelValue:"",placeholder:"请输入表单名称"},config:{},name:"sourceName",item:{label:"表单名称"}},{type:"button",control:{icon:"search",label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"}}),f=l({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"list"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"component",control:{modelValue:""},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"icon图标"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"switch",control:{modelValue:1,activeValue:1,inactiveValue:0},config:{},name:"showMenu",item:{label:"是否在菜单中显示"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"},config:{source:""}}),y=e=>{e==="success"&&(t.visible=!1,t.row={},r.value.getListData())},g=e=>(e.id=t.row.id,e),h=e=>{e==="reset"&&(t.visible=!1)},_=e=>(e.type=2,e);return(e,p)=>{const k=i("router-link"),v=i("ak-list"),D=i("ak-form"),V=i("el-dialog");return B(),L("div",null,[a(v,{ref_key:"tableListEl",ref:r,requestUrl:"designList",deleteUrl:"designDelete",searchData:b.value,tableData:m.value,beforeRequest:_},{sourceName:s(({row:o})=>[a(k,{to:`/design/form?id=${o.source}`},{default:s(()=>[N(d(o.sourceName)+"/"+d(o.source),1)]),_:2},1032,["to"])]),_:1},8,["searchData","tableData"]),a(V,{modelValue:t.visible,"onUpdate:modelValue":p[0]||(p[0]=o=>t.visible=o),title:"设置",width:"480px","destroy-on-close":""},{default:s(()=>[a(D,{ref_key:"formEl",ref:u,formData:f.value,type:2,value:t.row,editUrl:"designChange",afterSubmit:y,beforeSubmit:g,onBtnClick:h},null,8,["formData","value"])]),_:1},8,["modelValue"])])}}});export{F as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as x,C as V,I as w,r as l,h as a,o as B,c as T,m as s,w as m,l as C,t as u,B as L}from"./index-3679850f.js";const q=x({__name:"list",setup(N){const i=V(),t=w({visible:!1,row:{}}),n=l(),r=l(),d=l({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"表单名称",width:"150px"},{prop:"sourceName",label:"数据源名称/ID",width:"150px"},{prop:"category",label:"分类",config:{dictKey:"form"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"220px",fixed:"right"}],controlBtn:[{label:"新增",type:"primary",size:"small",click:()=>{c({})}},{label:"删除",key:"del",size:"small"}],operateBtn:[{label:"设置",key:"set",click:e=>{t.visible=!0,L(()=>{t.row=e,n.value.setValue(e)})}},{label:"创建列表",click:e=>{i.push({path:"/design/dataList",query:{form:e.id}})}},{label:"编辑",click:e=>{c(e)}},{label:"删除",key:"del"}],config:{expand:!0}}),c=e=>{i.push({path:"/design/form",query:{id:e.id}})},f=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入表单名称"},config:{},name:"name",item:{label:"表单名称"}},{type:"input",control:{modelValue:"",placeholder:"请输入数据源名称"},config:{},name:"sourceName",item:{label:"数据源名称"}},{type:"select",control:{modelValue:"",placeholder:"请选择表单分类"},config:{optionsType:2,optionsFun:"form"},name:"category",item:{label:"分类"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),b=l({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"表单名称"},customRules:[{type:"required",message:"请输入表单名称",trigger:"blur"}]},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"form"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"}}),y=e=>{e==="success"&&(t.visible=!1,t.row={},r.value.getListData())},g=e=>(e.id=t.row.id,e),h=e=>{e==="reset"&&(t.visible=!1)},k=e=>(e.type=1,e);return(e,p)=>{const _=a("ak-list"),v=a("ak-form"),D=a("el-dialog");return B(),T("div",null,[s(_,{ref_key:"tableListEl",ref:r,requestUrl:"designList",deleteUrl:"designDelete",searchData:f.value,tableData:d.value,beforeRequest:k},{sourceName:m(({row:o})=>[C("div",null,u(o.sourceName)+"/"+u(o.source),1)]),_:1},8,["searchData","tableData"]),s(D,{modelValue:t.visible,"onUpdate:modelValue":p[0]||(p[0]=o=>t.visible=o),title:"设置",width:"480px","destroy-on-close":""},{default:m(()=>[s(v,{ref_key:"formEl",ref:n,formData:b.value,type:2,editUrl:"designChange",afterSubmit:y,beforeSubmit:g,onBtnClick:h},null,8,["formData"])]),_:1},8,["modelValue"])])}}});export{q as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as f,C as b,r as o,h as a,o as y,c as _,m as s,w as n,x as g,t as r}from"./index-3679850f.js";const x=f({__name:"list",setup(k){const l=b(),c=o(),i=o({list:[{type:"input",control:{modelValue:"",placeholder:"请输入流程名称"},config:{},name:"name",item:{label:"流程名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:""},name:"flow",item:{label:"流程分类"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"},config:{}}),p=o({columns:[{label:"多选",type:"selection"},{label:"流程名称",prop:"name"},{label:"流程表单",prop:"sourceName"},{label:"分类",prop:"category",config:{dictKey:"flow"}},{label:"状态",prop:"status",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{label:"操作",prop:"__control"}],config:{},controlBtn:[{label:"新增流程",type:"primary",size:"small",icon:"plus",click:()=>{l.push({path:"/design/flow"})}},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{l.push({path:"/design/flow",query:{id:e.id}})}},{label:"删除",key:"del"}]}),u=e=>(e.type=3,e);return(e,h)=>{const d=a("router-link"),m=a("ak-list");return y(),_("div",null,[s(m,{ref_key:"tableListEl",ref:c,requestUrl:"designList",deleteUrl:"designDelete",searchData:i.value,tableData:p.value,beforeRequest:u},{sourceName:n(({row:t})=>[s(d,{to:`/design/form?id=${t.source}`},{default:n(()=>[g(r(t.sourceName)+"/"+r(t.source),1)]),_:2},1032,["to"])]),_:1},8,["searchData","tableData"])])}}});export{x as default}; |
|||
@ -0,0 +1 @@ |
|||
import{_ as t,o as e,c as o}from"./index-3679850f.js";const s={name:"List",components:{},props:{},data(){return{}},computed:{},mounted(){},methods:{}};function n(c,r,a,p,d,m){return e(),o("div")}const i=t(s,[["render",n]]);export{i as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as w,C as x,I as B,r as l,h as a,o as L,c as N,m as i,w as s,x as T,t as d,B as C}from"./index-3679850f.js";const F=w({__name:"list",setup(q){const n=x(),t=B({visible:!1,row:{}}),u=l(),r=l(),m=l({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"名称",width:"150px"},{prop:"sourceName",label:"表单名称/ID",width:150},{prop:"category",label:"分类",config:{dictKey:"list"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"110px",fixed:"right"}],controlBtn:[{label:"新增列表",icon:"plus",type:"primary",size:"small",click:()=>{c({})}},{label:"删除",key:"del",size:"small",type:"danger",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{c(e)}},{label:"设置",click:e=>{t.visible=!0,C(()=>{t.row=e})}},{label:"搜索设置",click:e=>{n.push({path:"/design/form",query:{type:"search",id:e.id,redirect:"/design/dataList/list"}})}},{label:"查看",click:e=>{n.push({path:"/design/dataList/content",query:{id:e.id}})}},{label:"删除",key:"del"}],config:{operateDropdown:!0}}),c=e=>{n.push({path:"/design/dataList",query:{id:e.id}})},b=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入列表名称"},config:{},name:"name",item:{label:"名称"}},{type:"input",control:{modelValue:"",placeholder:"请输入表单名称"},config:{},name:"sourceName",item:{label:"表单名称"}},{type:"button",control:{icon:"search",label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"}}),f=l({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"list"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"component",control:{modelValue:""},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"icon图标"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"switch",control:{modelValue:1,activeValue:1,inactiveValue:0},config:{},name:"showMenu",item:{label:"是否在菜单中显示"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"},config:{source:""}}),y=e=>{e==="success"&&(t.visible=!1,t.row={},r.value.getListData())},g=e=>(e.id=t.row.id,e),h=e=>{e==="reset"&&(t.visible=!1)},_=e=>(e.type=2,e);return(e,p)=>{const k=a("router-link"),v=a("ak-list"),D=a("ak-form"),V=a("el-dialog");return L(),N("div",null,[i(v,{ref_key:"tableListEl",ref:r,requestUrl:"designList",deleteUrl:"designDelete",searchData:b.value,tableData:m.value,beforeRequest:_},{sourceName:s(({row:o})=>[i(k,{to:`/design/form?id=${o.source}`},{default:s(()=>[T(d(o.sourceName)+"/"+d(o.source),1)]),_:2},1032,["to"])]),_:1},8,["searchData","tableData"]),i(V,{modelValue:t.visible,"onUpdate:modelValue":p[0]||(p[0]=o=>t.visible=o),title:"设置",width:"480px","destroy-on-close":""},{default:s(()=>[i(D,{ref_key:"formEl",ref:u,formData:f.value,type:2,value:t.row,editUrl:"designChange",afterSubmit:y,beforeSubmit:g,onBtnClick:h},null,8,["formData","value"])]),_:1},8,["modelValue"])])}}});export{F as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as v,C as w,I as D,r as o,h as a,o as x,c as B,m as n,w as V,B as C}from"./index-3679850f.js";const E=v({__name:"list",setup(T){const i=w(),t=D({visible:!1,row:{}}),c=o(),s=o(),p=o({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"名称",width:"150px"},{prop:"category",label:"分类",config:{dictKey:"list"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"180px",fixed:"right"}],controlBtn:[{label:"新增大屏",icon:"plus",type:"primary",click:()=>{r({})}},{label:"删除",key:"del",type:"danger",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{r(e)}},{label:"设置",click:e=>{t.visible=!0,C(()=>{t.row=e})}},{label:"查看",click:e=>{const{href:l}=i.resolve({path:"/design/dataScreen/show/"+e.id});window.open(l)}},{label:"删除",key:"del",type:"danger"}],config:{}}),r=e=>{i.push({path:"/design/dataScreen",query:{id:e.id}})},d=o({list:[{type:"input",control:{modelValue:"",placeholder:"请输入大屏名称"},config:{},name:"name",item:{label:"名称"}},{type:"button",control:{icon:"search",label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"}}),u=o({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"screen"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"},config:{source:""}}),m=e=>{e==="success"&&(t.visible=!1,t.row={},s.value.getListData())},b=e=>(e.id=t.row.id,e),f=e=>{e==="reset"&&(t.visible=!1)},y=e=>(e.type=4,e);return(e,l)=>{const g=a("ak-list"),h=a("ak-form"),k=a("el-dialog");return x(),B("div",null,[n(g,{ref_key:"tableListEl",ref:s,requestUrl:"designList",deleteUrl:"designDelete",searchData:d.value,tableData:p.value,beforeRequest:y},null,8,["searchData","tableData"]),n(k,{modelValue:t.visible,"onUpdate:modelValue":l[0]||(l[0]=_=>t.visible=_),title:"设置",width:"480px","destroy-on-close":""},{default:V(()=>[n(h,{ref_key:"formEl",ref:c,formData:u.value,type:2,value:t.row,editUrl:"designChange",afterSubmit:m,beforeSubmit:b,onBtnClick:f},null,8,["formData","value"])]),_:1},8,["modelValue"])])}}});export{E as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as x,I as V,r as l,a as w,c as B,l as a,w as m,b as T,t as u,m as s,C,B as L}from"./index-ea7eee8a.js";const q=x({__name:"list",setup(N){const i=C(),t=V({visible:!1,row:{}}),n=l(),r=l(),d=l({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"表单名称",width:"150px"},{prop:"sourceName",label:"数据源名称/ID",width:"150px"},{prop:"category",label:"分类",config:{dictKey:"form"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"220px",fixed:"right"}],controlBtn:[{label:"新增",type:"primary",size:"small",click:()=>{c({})}},{label:"删除",key:"del",size:"small"}],operateBtn:[{label:"设置",key:"set",click:e=>{t.visible=!0,L(()=>{t.row=e,n.value.setValue(e)})}},{label:"创建列表",click:e=>{i.push({path:"/design/dataList",query:{form:e.id}})}},{label:"编辑",click:e=>{c(e)}},{label:"删除",key:"del"}],config:{expand:!0}}),c=e=>{i.push({path:"/design/form",query:{id:e.id}})},b=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入表单名称"},config:{},name:"name",item:{label:"表单名称"}},{type:"input",control:{modelValue:"",placeholder:"请输入数据源名称"},config:{},name:"sourceName",item:{label:"数据源名称"}},{type:"select",control:{modelValue:"",placeholder:"请选择表单分类"},config:{optionsType:2,optionsFun:"form"},name:"category",item:{label:"分类"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),f=l({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"表单名称"},customRules:[{type:"required",message:"请输入表单名称",trigger:"blur"}]},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"form"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"}}),y=e=>{e==="success"&&(t.visible=!1,t.row={},r.value.getListData())},g=e=>(e.id=t.row.id,e),h=e=>{e==="reset"&&(t.visible=!1)},k=e=>(e.type=1,e);return(e,p)=>{const _=s("ak-list"),v=s("ak-form"),D=s("el-dialog");return w(),B("div",null,[a(_,{ref_key:"tableListEl",ref:r,requestUrl:"designList",deleteUrl:"designDelete",searchData:b.value,tableData:d.value,beforeRequest:k},{sourceName:m(({row:o})=>[T("div",null,u(o.sourceName)+"/"+u(o.source),1)]),_:1},8,["searchData","tableData"]),a(D,{modelValue:t.visible,"onUpdate:modelValue":p[0]||(p[0]=o=>t.visible=o),title:"设置",width:"480px","destroy-on-close":""},{default:m(()=>[a(v,{ref_key:"formEl",ref:n,formData:f.value,type:2,editUrl:"designChange",afterSubmit:y,beforeSubmit:g,onBtnClick:h},null,8,["formData"])]),_:1},8,["modelValue"])])}}});export{q as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as v,I as w,r as l,a as D,c as x,l as a,w as B,m as n,C as V,B as C}from"./index-ea7eee8a.js";const E=v({__name:"list",setup(T){const i=V(),t=w({visible:!1,row:{}}),c=l(),s=l(),p=l({columns:[{label:"勾选",type:"selection"},{prop:"id",label:"ID",width:"60px"},{prop:"name",label:"名称",width:"150px"},{prop:"category",label:"分类",config:{dictKey:"list"}},{prop:"status",label:"状态",config:{dictKey:"status",tagList:{0:"info",1:"success"}}},{prop:"creatName",label:"创建人"},{prop:"creatDate",label:"创建时间",width:200,config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"操作",prop:"__control",width:"180px",fixed:"right"}],controlBtn:[{label:"新增大屏",icon:"plus",type:"primary",click:()=>{r({})}},{label:"删除",key:"del",type:"danger",icon:"delete"}],operateBtn:[{label:"编辑",click:e=>{r(e)}},{label:"设置",click:e=>{t.visible=!0,C(()=>{t.row=e})}},{label:"查看",click:e=>{const{href:o}=i.resolve({path:"/design/dataScreen/show/"+e.id});window.open(o)}},{label:"删除",key:"del",type:"danger"}],config:{}}),r=e=>{i.push({path:"/design/dataScreen",query:{id:e.id}})},d=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入大屏名称"},config:{},name:"name",item:{label:"名称"}},{type:"button",control:{icon:"search",label:"查询",key:"submit",type:"primary"}},{type:"button",control:{label:"重置",key:"reset"}}],form:{labelWidth:"",class:"",size:"default"}}),u=l({list:[{type:"input",control:{modelValue:""},config:{},name:"name",item:{label:"名称"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"screen"},name:"category",item:{label:"分类"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:1,optionsFun:"roleList",method:"post",label:"name",value:"id",help:"哪些角色可以查看"},name:"roleId",item:{label:"权限角色"}},{type:"select",control:{modelValue:"",appendToBody:!0},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"启用状态"}},{type:"div",control:{},config:{textAlign:"center"},list:[{type:"button",control:{label:"修改",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{labelWidth:"140px",class:"",size:"default",name:"formDialog"},config:{source:""}}),m=e=>{e==="success"&&(t.visible=!1,t.row={},s.value.getListData())},b=e=>(e.id=t.row.id,e),f=e=>{e==="reset"&&(t.visible=!1)},y=e=>(e.type=4,e);return(e,o)=>{const g=n("ak-list"),h=n("ak-form"),k=n("el-dialog");return D(),x("div",null,[a(g,{ref_key:"tableListEl",ref:s,requestUrl:"designList",deleteUrl:"designDelete",searchData:d.value,tableData:p.value,beforeRequest:y},null,8,["searchData","tableData"]),a(k,{modelValue:t.visible,"onUpdate:modelValue":o[0]||(o[0]=_=>t.visible=_),title:"设置",width:"480px","destroy-on-close":""},{default:B(()=>[a(h,{ref_key:"formEl",ref:c,formData:u.value,type:2,value:t.row,editUrl:"designChange",afterSubmit:m,beforeSubmit:b,onBtnClick:f},null,8,["formData","value"])]),_:1},8,["modelValue"])])}}});export{E as default}; |
|||
@ -0,0 +1,2 @@ |
|||
import{a1 as n,d as l,I as c,N as h,a as i,c as p,ai as u}from"./index-ea7eee8a.js";const a=l({components:{},setup(o){const r=[],t=c({});return{toggleCode:d=>{const e="vdpv_"+d;t[e+"Height"]===0?t[e+"Height"]=(r[d].value?r[d].value.offsetHeight:0)||0:t[e+"Height"]=0},...h(t)}}});a.$vd={matter:{},toc:[{content:"AKList 内容列表",anchor:"aklist-内容列表",level:1},{content:"API",anchor:"api",level:2},{content:"Props",anchor:"props",level:3},{content:"Methods",anchor:"methods",level:3},{content:"Slot",anchor:"slot",level:3},{content:"tableData",anchor:"tabledata",level:3},{content:"tree",anchor:"tree",level:3}]};const b=a,f={class:"vuedoc"},m=u(`<h1 id="aklist-内容列表" data-source-line="1"><a class="markdownIt-Anchor" href="#aklist-内容列表">#</a> AKList 内容列表</h1><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-html hljs--one-dark"><code><span class="hljs-tag"><<span class="hljs-name">ak-list</span> <span class="hljs-attr">:tableData</span>=<span class="hljs-string">"tableData"</span>></span><span class="hljs-tag"></<span class="hljs-name">ak-list</span>></span>
|
|||
</code></pre><h2 id="api" data-source-line="7"><a class="markdownIt-Anchor" href="#api">#</a> API</h2><h3 id="props" data-source-line="9"><a class="markdownIt-Anchor" href="#props">#</a> Props</h3><table data-source-line="11"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>tableData</td><td>object</td><td>设计表格配置数据</td></tr><tr><td>searchData</td><td>object</td><td>列表页条件筛选表单数据，同表单的<code>formData</code></td></tr><tr><td>beforeRequest</td><td>function(params,route)</td><td>请求列表前参数处理方法，可对请求参数处理</td></tr><tr><td>afterResponse</td><td>function/string</td><td>请求完成后列表数据处理方法</td></tr><tr><td>beforeDelete</td><td>function(params,route)</td><td>删除请求前事件</td></tr><tr><td>showPage</td><td>boolean/true</td><td>是否显示分页信息</td></tr><tr><td>requestUrl</td><td>string</td><td>请求的api接口方法</td></tr><tr><td>deleteUrl</td><td>string</td><td>删除的api接口方法</td></tr><tr><td>dict</td><td>object</td><td>用于匹配的字典数据，一般不设置，从接口获取</td></tr><tr><td>fixedBottomScroll</td><td>boolean/true</td><td>横向滚动条固定在浏览器底部</td></tr><tr><td>autoLoad</td><td>boolean/true</td><td>初始时是否自动请求加载数据</td></tr><tr><td>treeData</td><td>object</td><td>列表左侧栏树数据</td></tr></tbody></table><h3 id="methods" data-source-line="26"><a class="markdownIt-Anchor" href="#methods">#</a> Methods</h3><table data-source-line="28"><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>getListData</td><td>列表请求方法，可手动调用</td></tr><tr><td>delClick</td><td>数据删除</td></tr><tr><td>table</td><td>表格方法</td></tr><tr><td>setSearchFormValue</td><td>设置查询条件表单初始值。可根据url参数先设置查询表单初始值再加载列表请求方法</td></tr></tbody></table><h3 id="slot" data-source-line="35"><a class="markdownIt-Anchor" href="#slot">#</a> Slot</h3><table data-source-line="37"><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>default</td><td>位于筛选表单和表格列表间，可用于存放添加删除数据的按钮或其他操作</td></tr><tr><td>controlBtn</td><td>位于筛列表可配置新增删除按钮后面</td></tr><tr><td>searchForm</td><td>位于条件筛选表单内部</td></tr><tr><td>-</td><td>columns对应的props</td></tr></tbody></table><h3 id="tabledata" data-source-line="44"><a class="markdownIt-Anchor" href="#tabledata">#</a> tableData</h3><table data-source-line="46"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>tableProps</td><td>Object</td><td>表格配置</td></tr><tr><td>columns</td><td>Array</td><td>表格列配置</td></tr><tr><td>controlBtn</td><td>Array</td><td>列表上方按钮，如新增/删除</td></tr><tr><td>operateBtn</td><td>Array</td><td>操作拦按钮设置，仅对props='__control’列</td></tr><tr><td>events.beforeRequest</td><td>Function</td><td>同<code>props.beforeRequest</code></td></tr><tr><td>events.afterResponse</td><td>Function/string</td><td>同<code>props.afterResponse</code></td></tr><tr><td>events.beforeDelete</td><td>Function</td><td>同<code>props.beforeDelete</code></td></tr></tbody></table><h3 id="tree" data-source-line="56"><a class="markdownIt-Anchor" href="#tree">#</a> tree</h3><table data-source-line="58"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>show</td><td>boolean</td><td>是否显示</td></tr><tr><td>name</td><td>string</td><td>唯一标识，查询条件参数值</td></tr><tr><td>method</td><td>string</td><td>数据接口请求方式，get/post默认post</td></tr><tr><td>requestUrl</td><td>string</td><td>数据接口请求地址，必填</td></tr><tr><td>beforeRequest</td><td>Function(data,route)</td><td>接口请求前数据参数处理方式</td></tr><tr><td>afterResponse</td><td>Function/string</td><td>接口请求后数据参数处理方式</td></tr><tr><td>treeProps</td><td>object</td><td>组件tree对应props</td></tr></tbody></table>`,14),g=[m];function v(o,r,t,s,d,e){return i(),p("div",f,g)}const k=n(b,[["render",v]]);export{k as default}; |
|||
@ -0,0 +1 @@ |
|||
import{r as e,a as r,c as n,l as s,m as c}from"./index-ea7eee8a.js";const b={__name:"log",setup(i){const t=e(),l=e({list:[{type:"input",control:{modelValue:"",placeholder:"请输入用户名"},config:{},name:"userName",item:{label:"用户名"}},{type:"input",control:{modelValue:"",placeholder:"请输入登录ip地址"},config:{},name:"ip",item:{label:"登录IP"}},{type:"datePicker",control:{modelValue:"",type:"date",placeholder:"请输入登录时间"},config:{},name:"dateTime",item:{label:"登录时间"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),a=e({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"用户名称",prop:"userName"},{label:"登录地址",prop:"ip"},{label:"登录状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",2:"warning"}}},{label:"操作信息",prop:"remark"},{label:"登录时间",prop:"time",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}}],config:{columnsSetting:!1}});return(p,m)=>{const o=c("ak-list");return r(),n("div",null,[s(o,{ref_key:"tableListEl",ref:t,requestUrl:"",deleteUrl:"",searchData:l.value,tableData:a.value},null,8,["searchData","tableData"])])}}};export{b as default}; |
|||
@ -0,0 +1 @@ |
|||
import{r as e,h as r,o as n,c as s,m as c}from"./index-3679850f.js";const b={__name:"log",setup(i){const t=e(),l=e({list:[{type:"input",control:{modelValue:"",placeholder:"请输入用户名"},config:{},name:"userName",item:{label:"用户名"}},{type:"input",control:{modelValue:"",placeholder:"请输入登录ip地址"},config:{},name:"ip",item:{label:"登录IP"}},{type:"datePicker",control:{modelValue:"",type:"date",placeholder:"请输入登录时间"},config:{},name:"dateTime",item:{label:"登录时间"}},{type:"button",control:{label:"查询",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"清空",key:"reset"},config:{}}],form:{labelWidth:"",class:"",size:"default"},config:{}}),a=e({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:"70px"},{label:"用户名称",prop:"userName"},{label:"登录地址",prop:"ip"},{label:"登录状态",prop:"status",config:{dictKey:"status",tagList:{1:"success",2:"warning"}}},{label:"操作信息",prop:"remark"},{label:"登录时间",prop:"time",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}}],config:{columnsSetting:!1}});return(p,m)=>{const o=r("ak-list");return n(),s("div",null,[c(o,{ref_key:"tableListEl",ref:t,requestUrl:"",deleteUrl:"",searchData:l.value,tableData:a.value},null,8,["searchData","tableData"])])}}};export{b as default}; |
|||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1 @@ |
|||
import{d as D,C as x,r as l,I,h as s,o as m,c as B,f as C,w as d,l as E,k as w,j as L,m as f,B as r}from"./index-3679850f.js";const U=D({__name:"menu",setup(N){const b=x(),c=l(),o=l(),p={menuType:{1:"菜单",2:"按钮"}},a=l(!0),y=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入菜单名称"},config:{},name:"name",item:{label:"菜单名称"}},{type:"select",control:{modelValue:""},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"搜索",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"}}),n=l({tableProps:{rowKey:"id",defaultExpandAll:!1},columns:[{label:"菜单名称",prop:"name"},{label:"地址",prop:"path"},{label:"图标",prop:"icon",width:60},{label:"排序",prop:"sort",width:60},{label:"类型",prop:"type",width:70,config:{dictKey:"menuType",tagList:{1:"success",2:"info"}}},{label:"状态",prop:"status",width:70,config:{dictKey:"status",tagList:{1:"success",2:"info"}}},{label:"操作",prop:"__control",width:140}],controlBtn:[{label:"新增",type:"primary",icon:"plus",click:()=>{e.visible=!0,e.title="新增菜单",e.formType=1}},{label:"展开折叠",click:()=>{n.value.tableProps.defaultExpandAll=!n.value.tableProps.defaultExpandAll,a.value=!1,r(()=>{a.value=!0})}}],operateBtn:[{visible:"$.parentId!==1",label:"新增",click:t=>{e.visible=!0,e.title="新增菜单",e.formType=1,r(()=>{o.value.setValue({parentId:t.id})})}},{label:"编辑",click:t=>{if(t.parentId===1){b.push({path:"/design/dataList/list"});return}e.visible=!0,e.title="编辑菜单",e.formType=2,e.editId=t.id,r(()=>{o.value.setValue(t,!0)})}},{label:"删除",key:"del",visible:"$.parentId!==0&&$.parentId!==1"}],config:{pageSize:100,fixedBottomScroll:!1}}),e=I({visible:!1,title:"",formType:1,editId:""}),g=l({list:[{type:"input",control:{modelValue:"",disabled:!0,placeholder:"父级"},config:{},name:"parentId",item:{label:"父级ID"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"menuType"},name:"type",item:{label:"类型"}},{type:"input",control:{modelValue:"",placeholder:"请输入菜单名称"},config:{},name:"name",item:{label:"菜单名称"},customRules:[{type:"required",message:"菜单名称不能为空",trigger:"blur"}]},{type:"input",control:{modelValue:"",placeholder:"请输入访问地址/类型标识"},config:{},name:"path",item:{label:"访问地址"}},{type:"component",control:{modelValue:""},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"icon图标"}},{type:"inputNumber",control:{modelValue:0,controlsPosition:"right"},config:{},name:"sort",item:{label:"排序"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{span:24},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center",span:24},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{class:"form-row-2",labelWidth:"100px",size:"default"},config:{}}),v=t=>(e.formType===2&&(t.id=e.editId),t),k=t=>{e.visible=!1,t==="success"&&c.value.getListData()},h=t=>{t==="reset"&&(e.visible=!1)};return(t,u)=>{const _=s("ak-list"),V=s("ak-form"),T=s("el-dialog");return m(),B("div",null,[a.value?(m(),C(_,{key:0,ref_key:"tableListEl",ref:c,requestUrl:"menuList",deleteUrl:"menuDelete",searchData:y.value,tableData:n.value,afterResponse:"transformDataToChild",dict:p},{icon:d(({row:i})=>[E("i",{class:w(i.icon)},null,2)]),_:1},8,["searchData","tableData"])):L("",!0),f(T,{modelValue:e.visible,"onUpdate:modelValue":u[0]||(u[0]=i=>e.visible=i),title:e.title,width:"680px","destroy-on-close":""},{default:d(()=>[f(V,{ref_key:"formNameEl",ref:o,type:e.formType,formData:g.value,addUrl:"menuSave",editUrl:"menuEdit",beforeSubmit:v,afterSubmit:k,onBtnClick:h,dict:p},null,8,["type","formData"])]),_:1},8,["modelValue","title"])])}}});export{U as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as D,r as l,I as x,a as m,c as I,g as B,w as d,b as C,k as E,j as w,l as f,m as s,C as L,B as r}from"./index-ea7eee8a.js";const U=D({__name:"menu",setup(N){const b=L(),c=l(),o=l(),p={menuType:{1:"菜单",2:"按钮"}},a=l(!0),y=l({list:[{type:"input",control:{modelValue:"",placeholder:"请输入菜单名称"},config:{},name:"name",item:{label:"菜单名称"}},{type:"select",control:{modelValue:""},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"button",control:{label:"搜索",key:"submit",type:"primary"},config:{}},{type:"button",control:{label:"重置",key:"reset"},config:{}}],form:{size:"default"}}),n=l({tableProps:{rowKey:"id",defaultExpandAll:!1},columns:[{label:"菜单名称",prop:"name"},{label:"地址",prop:"path"},{label:"图标",prop:"icon",width:60},{label:"排序",prop:"sort",width:60},{label:"类型",prop:"type",width:70,config:{dictKey:"menuType",tagList:{1:"success",2:"info"}}},{label:"状态",prop:"status",width:70,config:{dictKey:"status",tagList:{1:"success",2:"info"}}},{label:"操作",prop:"__control",width:140}],controlBtn:[{label:"新增",type:"primary",icon:"plus",click:()=>{e.visible=!0,e.title="新增菜单",e.formType=1}},{label:"展开折叠",click:()=>{n.value.tableProps.defaultExpandAll=!n.value.tableProps.defaultExpandAll,a.value=!1,r(()=>{a.value=!0})}}],operateBtn:[{visible:"$.parentId!==1",label:"新增",click:t=>{e.visible=!0,e.title="新增菜单",e.formType=1,r(()=>{o.value.setValue({parentId:t.id})})}},{label:"编辑",click:t=>{if(t.parentId===1){b.push({path:"/design/dataList/list"});return}e.visible=!0,e.title="编辑菜单",e.formType=2,e.editId=t.id,r(()=>{o.value.setValue(t,!0)})}},{label:"删除",key:"del",visible:"$.parentId!==0&&$.parentId!==1"}],config:{pageSize:100,fixedBottomScroll:!1}}),e=x({visible:!1,title:"",formType:1,editId:""}),g=l({list:[{type:"input",control:{modelValue:"",disabled:!0,placeholder:"父级"},config:{},name:"parentId",item:{label:"父级ID"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"menuType"},name:"type",item:{label:"类型"}},{type:"input",control:{modelValue:"",placeholder:"请输入菜单名称"},config:{},name:"name",item:{label:"菜单名称"},customRules:[{type:"required",message:"菜单名称不能为空",trigger:"blur"}]},{type:"input",control:{modelValue:"",placeholder:"请输入访问地址/类型标识"},config:{},name:"path",item:{label:"访问地址"}},{type:"component",control:{modelValue:""},config:{componentName:"DiyIconfont"},name:"icon",item:{label:"icon图标"}},{type:"inputNumber",control:{modelValue:0,controlsPosition:"right"},config:{},name:"sort",item:{label:"排序"}},{type:"radio",control:{modelValue:1},options:[],config:{optionsType:2,optionsFun:"status"},name:"status",item:{label:"状态"}},{type:"textarea",control:{modelValue:""},config:{span:24},name:"remark",item:{label:"备注"}},{type:"div",control:{},config:{textAlign:"center",span:24},list:[{type:"button",control:{label:"确定",type:"primary",key:"submit"},config:{span:0}},{type:"button",control:{label:"取消",key:"reset"},config:{span:0}}]}],form:{class:"form-row-2",labelWidth:"100px",size:"default"},config:{}}),v=t=>(e.formType===2&&(t.id=e.editId),t),k=t=>{e.visible=!1,t==="success"&&c.value.getListData()},h=t=>{t==="reset"&&(e.visible=!1)};return(t,u)=>{const _=s("ak-list"),V=s("ak-form"),T=s("el-dialog");return m(),I("div",null,[a.value?(m(),B(_,{key:0,ref_key:"tableListEl",ref:c,requestUrl:"menuList",deleteUrl:"menuDelete",searchData:y.value,tableData:n.value,afterResponse:"transformDataToChild",dict:p},{icon:d(({row:i})=>[C("i",{class:E(i.icon)},null,2)]),_:1},8,["searchData","tableData"])):w("",!0),f(T,{modelValue:e.visible,"onUpdate:modelValue":u[0]||(u[0]=i=>e.visible=i),title:e.title,width:"680px","destroy-on-close":""},{default:d(()=>[f(V,{ref_key:"formNameEl",ref:o,type:e.formType,formData:g.value,addUrl:"menuSave",editUrl:"menuEdit",beforeSubmit:v,afterSubmit:k,onBtnClick:h,dict:p},null,8,["type","formData"])]),_:1},8,["modelValue","title"])])}}});export{U as default}; |
|||
@ -0,0 +1 @@ |
|||
import{r as e,a as o,c as r,l as s,m as n}from"./index-ea7eee8a.js";const b={__name:"post",setup(p){const a=e({}),l=e({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:70},{label:"岗位名称",prop:"name"},{label:"状态",prop:"status"},{label:"创建时间",prop:"updateTime"},{label:"操作",prop:"__control"}],config:{expand:!0},controlBtn:[{label:"添加",key:"add",type:"primary",size:"small",icon:"plus"},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}],operateBtn:[{label:"编辑",key:"edit"},{label:"删除",key:"del"}]});return(c,i)=>{const t=n("ak-list");return o(),r("div",null,[s(t,{ref:"tableListEl",requestUrl:"",deleteUrl:"",searchData:a.value,tableData:l.value},null,8,["searchData","tableData"])])}}};export{b as default}; |
|||
@ -0,0 +1 @@ |
|||
import{r as e,h as o,o as r,c as s,m as n}from"./index-3679850f.js";const b={__name:"post",setup(p){const a=e({}),l=e({columns:[{label:"多选",type:"selection"},{label:"序号",type:"index",width:70},{label:"岗位名称",prop:"name"},{label:"状态",prop:"status"},{label:"创建时间",prop:"updateTime"},{label:"操作",prop:"__control"}],config:{expand:!0},controlBtn:[{label:"添加",key:"add",type:"primary",size:"small",icon:"plus"},{label:"批量删除",key:"del",type:"danger",size:"small",icon:"delete"}],operateBtn:[{label:"编辑",key:"edit"},{label:"删除",key:"del"}]});return(c,i)=>{const t=o("ak-list");return r(),s("div",null,[n(t,{ref:"tableListEl",requestUrl:"",deleteUrl:"",searchData:a.value,tableData:l.value},null,8,["searchData","tableData"])])}}};export{b as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as p,r as o,e as v,o as _,a as r,c as u,F as h,f as b,n as k,u as y,g as D,h as S,p as B,_ as R}from"./index-ea7eee8a.js";import{g as q,a as w}from"./getData-8e3ed6b9.js";const C=p({__name:"show",setup(x){const i=S(),l=o(!0),c=o({});B("globalScreen",c);const s=o({list:[],config:{}}),f=v(()=>{const{width:n,height:e,background:a,primary:t}=s.value.config;return{width:n,height:e,background:a,color:t,position:"relative"}}),d=()=>{q(i.params.id).then(n=>{l.value=!1,s.value=n;const{requestUrl:e,afterResponse:a,beforeRequest:t,method:g}=s.value.config;e&&w(e,a,t,g).then(m=>{c.value=m})}).catch(()=>{l.value=!1})};return _(()=>{d()}),(n,e)=>(r(),u("div",{style:k(y(f)),class:"design-canvas"},[(r(!0),u(h,null,b(s.value.list,(a,t)=>(r(),D(R,{key:t,data:a},null,8,["data"]))),128))],4))}});export{C as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as p,u as v,r as o,p as _,a as h,b,o as r,c as u,F as k,e as y,n as D,f as S,g as B}from"./index-3679850f.js";import{g as R,a as q}from"./getData-b87e5deb.js";const z=p({__name:"show",setup(w){const i=v(),l=o(!0),c=o({});_("globalScreen",c);const s=o({list:[],config:{}}),d=h(()=>{const{width:n,height:e,background:a,primary:t}=s.value.config;return{width:n,height:e,background:a,color:t,position:"relative"}}),f=()=>{R(i.params.id).then(n=>{l.value=!1,s.value=n;const{requestUrl:e,afterResponse:a,beforeRequest:t,method:g}=s.value.config;e&&q(e,a,t,g).then(m=>{c.value=m})}).catch(()=>{l.value=!1})};return b(()=>{f()}),(n,e)=>(r(),u("div",{style:D(d.value),class:"design-canvas"},[(r(!0),u(k,null,y(s.value.list,(a,t)=>(r(),S(B,{key:t,data:a},null,8,["data"]))),128))],4))}});export{z as default}; |
|||
@ -0,0 +1 @@ |
|||
.container-apply-start .flow-box{position:relative}.container-apply-start .status{position:absolute;left:0;top:0}.container-apply-start .status li{padding:5px}.container-apply-start .status .s1{color:#20b2aa}.container-apply-start .status .s2{color:#1890ff}.container-apply-start .status .s3{color:#909399}.container-apply-start .status .s4{color:#fc653f}.container-apply-start .status .s5{color:#d9db9b} |
|||
@ -0,0 +1 @@ |
|||
import{d as D,v as B,u as C,C as x,r as n,a as E,b as S,h as c,D as T,z as F,o as R,c as U,m as r,w as d,l as a,q as i,E as v,B as V}from"./index-3679850f.js";const N={class:"container-apply-start"},j=a("div",{class:"status"},[a("ul",null,[a("li",{class:"s1"},"● 已完成"),a("li",{class:"s2"},"● 进行中"),a("li",{class:"s3"},"● 未进行"),a("li",{class:"s4"},"● 已拒绝"),a("li",{class:"s5"},"● 跳过")])],-1),O=D({__name:"start",setup(z){B().changeBreadcrumb([{label:"工作台"},{label:"发起流程"}]);const t=C(),f=x(),_=n(),m=n(),p=n({list:[],form:{}}),y=n(!0),b=E(()=>t.query.id?2:1),u=n(),h=()=>{const e={id:t.query.flowId};i("designById",e).then(o=>{_.value.setValue(v(o.data.data)),u.value=o.data.source,i("designById",{id:o.data.source}).then(l=>{p.value=v(l.data.data),V(()=>{y.value=!1})});const s=t.query.id;s&&m.value.getData({formId:u.value,id:s})})},g=e=>(e.formId=u.value,t.query.id&&(e.id=t.query.id),e),w=(e,o)=>{if(e==="success"){if(t.query.id){f.push({path:"/task/applyed"});return}const s={userId:0,flowId:t.query.flowId,formId:o.data.insertId,title:"user的请假审批",creatTime:new Date};i("flowSave",s).then(()=>{f.push({path:"/task/applyed"})}).catch(l=>{console.log(l)})}else console.log("提交失败")};return S(()=>{h()}),(e,o)=>{const s=c("ak-form"),l=c("el-tab-pane"),I=c("ak-flow"),k=c("el-tabs"),q=T("loading");return F((R(),U("div",N,[r(k,null,{default:d(()=>[r(l,{label:"表单信息"},{default:d(()=>[r(s,{ref_key:"formEl",ref:m,formData:p.value,beforeSubmit:g,afterSubmit:w,type:b.value,requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent"},null,8,["formData","type"])]),_:1}),r(l,{label:"流程图",name:"flow",class:"flow-box"},{default:d(()=>[j,r(I,{type:1,ref_key:"flowEl",ref:_},null,512)]),_:1})]),_:1})])),[[q,y.value]])}}});export{O as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as D,v as B,r as n,e as C,o as x,z as E,a as S,c as T,l as r,w as d,u as F,b as a,q as i,D as v,B as R,m as c,E as U,h as V,C as N}from"./index-ea7eee8a.js";const j={class:"container-apply-start"},z=a("div",{class:"status"},[a("ul",null,[a("li",{class:"s1"},"● 已完成"),a("li",{class:"s2"},"● 进行中"),a("li",{class:"s3"},"● 未进行"),a("li",{class:"s4"},"● 已拒绝"),a("li",{class:"s5"},"● 跳过")])],-1),A=D({__name:"start",setup(L){B().changeBreadcrumb([{label:"工作台"},{label:"发起流程"}]);const t=V(),f=N(),_=n(),m=n(),p=n({list:[],form:{}}),y=n(!0),b=C(()=>t.query.id?2:1),u=n(),h=()=>{const e={id:t.query.flowId};i("designById",e).then(o=>{_.value.setValue(v(o.data.data)),u.value=o.data.source,i("designById",{id:o.data.source}).then(l=>{p.value=v(l.data.data),R(()=>{y.value=!1})});const s=t.query.id;s&&m.value.getData({formId:u.value,id:s})})},g=e=>(e.formId=u.value,t.query.id&&(e.id=t.query.id),e),w=(e,o)=>{if(e==="success"){if(t.query.id){f.push({path:"/task/applyed"});return}const s={userId:0,flowId:t.query.flowId,formId:o.data.insertId,title:"user的请假审批",creatTime:new Date};i("flowSave",s).then(()=>{f.push({path:"/task/applyed"})}).catch(l=>{console.log(l)})}else console.log("提交失败")};return x(()=>{h()}),(e,o)=>{const s=c("ak-form"),l=c("el-tab-pane"),I=c("ak-flow"),k=c("el-tabs"),q=U("loading");return E((S(),T("div",j,[r(k,null,{default:d(()=>[r(l,{label:"表单信息"},{default:d(()=>[r(s,{ref_key:"formEl",ref:m,formData:p.value,beforeSubmit:g,afterSubmit:w,type:F(b),requestUrl:"getFormContent",addUrl:"saveFormContent",editUrl:"editFormContent"},null,8,["formData","type"])]),_:1}),r(l,{label:"流程图",name:"flow",class:"flow-box"},{default:d(()=>[z,r(I,{type:1,ref_key:"flowEl",ref:_},null,512)]),_:1})]),_:1})])),[[q,y.value]])}}});export{A as default}; |
|||
@ -0,0 +1 @@ |
|||
import{o as n,a as c,c as a,b as d}from"./index-ea7eee8a.js";const i={class:"container",ref:"container"},l=d("div",{id:"box",style:{position:"absolute",top:"0",left:"0"}},"Move me with arrow keys!",-1),r=[l],p={__name:"test",setup(_){return n(()=>{const t=document.getElementById("box");let o=0,s=0;document.addEventListener("keydown",function(e){console.log(e),e.keyCode===37?o--:e.keyCode===38?s--:e.keyCode===39?o++:e.keyCode===40&&s++,t.style.left=o+"px",t.style.top=s+"px"})}),(t,o)=>(c(),a("div",i,r,512))}};export{p as default}; |
|||
@ -0,0 +1 @@ |
|||
import{_ as e,o as c,c as t}from"./index-3679850f.js";const o={},s={class:"container"};function n(r,_){return c(),t("div",s)}const f=e(o,[["render",n]]);export{f as default}; |
|||
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
@ -0,0 +1 @@ |
|||
import{d as B,I as j,r as n,a as b,g as T,w as l,b as t,l as e,x as c,z as R,c as q,B as x,q as C,D as I,m as s,E as A,t as V,j as G}from"./index-ea7eee8a.js";const H={class:"flow-detail-drawer"},J={class:"header"},K=t("div",{class:"face"},[t("i",{class:"icon-user"})],-1),M=t("div",{class:"name"},"张三总",-1),P={class:"button"},Q={class:"form-info"},W=t("div",{class:"flow-list"},null,-1),X=t("div",{class:"status"},[t("ul",null,[t("li",{class:"s1"},"● 已完成"),t("li",{class:"s2"},"● 进行中"),t("li",{class:"s3"},"● 未进行"),t("li",{class:"s4"},"● 已拒绝"),t("li",{class:"s5"},"● 跳过")])],-1),Y=B({__name:"drawerCom",setup(L,{expose:g}){const a=j({visible:!1,formId:"",id:"",loading:!0}),y=o=>{a.visible=!0,a.id=o.formId,x(()=>{h(o)})},d=n(),m=n(),f=n({list:[],form:{}}),w=o=>(o.formId=a.formId,o.id=a.id,o),v=()=>{},h=o=>{const i={id:o.flowId};C("designById",i).then(u=>{d.value.setValue(I(u.data.data)),a.formId=u.data.source,C("designById",{id:u.data.source}).then(_=>{f.value=I(_.data.data),x(()=>{a.loading=!1})}),m.value.getData({formId:a.formId,id:a.id})})},p=n(),r=n({list:[{type:"divider",control:{},config:{},item:{label:"审批意见"}},{type:"select",control:{modelValue:"",appendToBody:!0,placeholder:"请选择常用审批意见"},options:[{label:"同意",value:1},{label:"不同意",value:2}],config:{optionsType:0,span:8},name:"type",item:{label:"快选审批意见"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"审批意见",rules:[{required:!0,message:"请输入审批意见",trigger:"change"}]}}],form:{size:"default"},config:{}}),D=({key:o,value:i})=>{o==="type"&&p.value.setValue({remark:i===1?"同意":"不同意"})},N=n({columns:[{label:"节点名称",prop:"nodeName"},{label:"处理人",prop:"name"},{label:"任务状态",prop:"status",config:{}},{label:"开始时间",prop:"startTime",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"结束时间",prop:"endTime",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"审批意见",prop:"remark"}],config:{columnsSetting:!1}});return g({open:y}),(o,i)=>{const u=s("el-tag"),_=s("el-button"),E=s("ak-form"),k=s("el-tab-pane"),U=s("ak-flow"),z=s("ak-list"),O=s("el-tabs"),S=s("el-drawer"),F=A("loading");return b(),T(S,{modelValue:a.visible,"onUpdate:modelValue":i[0]||(i[0]=$=>a.visible=$),"destroy-on-close":"","with-header":!1,size:"1200px"},{default:l(()=>[t("div",H,[t("div",J,[K,t("div",null,[M,e(u,null,{default:l(()=>[c("总裁助理审批中")]),_:1})]),t("div",P,[e(_,{type:"success"},{default:l(()=>[c("同意")]),_:1}),e(_,{type:"danger"},{default:l(()=>[c("拒绝")]),_:1}),e(_,{type:"primary"},{default:l(()=>[c("流转")]),_:1})])]),e(O,null,{default:l(()=>[e(k,{label:"表单信息"},{default:l(()=>[R((b(),q("div",Q,[e(E,{ref_key:"formEl",ref:m,formData:f.value,beforeSubmit:w,afterSubmit:v,type:2,requestUrl:"getFormContent",editUrl:"editFormContent"},null,8,["formData"]),e(E,{ref_key:"formOptionsEl",ref:p,formData:r.value,type:1,onChange:D},null,8,["formData"]),W])),[[F,a.loading]])]),_:1}),e(k,{label:"流程图",name:"flow",class:"flow-box"},{default:l(()=>[X,e(U,{type:1,ref_key:"flowEl",ref:d},null,512)]),_:1}),e(k,{label:"流转记录"},{default:l(()=>[e(z,{ref:"tableListEl",tableData:N.value},null,8,["tableData"])]),_:1})]),_:1})])]),_:1},8,["modelValue"])}}});const ee=B({__name:"todo",setup(L){const g=n(),a=n({list:[{type:"input",control:{modelValue:"",placeholder:"请输入审批标题"},config:{},name:"title",item:{label:"审批标题"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置"},config:{}}],form:{size:"default"},config:{}}),y=n({columns:[{prop:"title",label:"审批标题"},{prop:"creatTime",label:"发起时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"a",label:"流程节点"},{prop:"status",label:"流程状态"}],config:{requestUrl:"flowList",expand:!0}}),d=n(),m=f=>{d.value.open(f)};return(f,w)=>{const v=s("el-tag"),h=s("el-button"),p=s("ak-list");return b(),q("div",null,[e(p,{ref_key:"tableListEl",ref:g,requestUrl:"flowList",searchData:a.value,tableData:y.value},{status:l(({row:r})=>[r.status?(b(),T(v,{key:0},{default:l(()=>[c(V(r.status),1)]),_:2},1024)):G("",!0)]),title:l(({row:r})=>[e(h,{link:"",type:"primary",onClick:D=>m(r)},{default:l(()=>[c(V(r.title),1)]),_:2},1032,["onClick"])]),_:1},8,["searchData","tableData"]),e(Y,{ref_key:"drawerEl",ref:d},null,512)])}}});export{ee as default}; |
|||
@ -0,0 +1 @@ |
|||
import{d as B,I as j,r as n,h as s,D as R,o as b,f as T,w as l,l as t,m as e,x as c,z as A,c as q,B as E,q as C,E as I,t as V,j as G}from"./index-3679850f.js";const H={class:"flow-detail-drawer"},J={class:"header"},K=t("div",{class:"face"},[t("i",{class:"icon-user"})],-1),M=t("div",{class:"name"},"张三总",-1),P={class:"button"},Q={class:"form-info"},W=t("div",{class:"flow-list"},null,-1),X=t("div",{class:"status"},[t("ul",null,[t("li",{class:"s1"},"● 已完成"),t("li",{class:"s2"},"● 进行中"),t("li",{class:"s3"},"● 未进行"),t("li",{class:"s4"},"● 已拒绝"),t("li",{class:"s5"},"● 跳过")])],-1),Y=B({__name:"drawerCom",setup(L,{expose:g}){const a=j({visible:!1,formId:"",id:"",loading:!0}),y=o=>{a.visible=!0,a.id=o.formId,E(()=>{h(o)})},d=n(),m=n(),f=n({list:[],form:{}}),w=o=>(o.formId=a.formId,o.id=a.id,o),v=()=>{},h=o=>{const i={id:o.flowId};C("designById",i).then(u=>{d.value.setValue(I(u.data.data)),a.formId=u.data.source,C("designById",{id:u.data.source}).then(_=>{f.value=I(_.data.data),E(()=>{a.loading=!1})}),m.value.getData({formId:a.formId,id:a.id})})},p=n(),r=n({list:[{type:"divider",control:{},config:{},item:{label:"审批意见"}},{type:"select",control:{modelValue:"",appendToBody:!0,placeholder:"请选择常用审批意见"},options:[{label:"同意",value:1},{label:"不同意",value:2}],config:{optionsType:0,span:8},name:"type",item:{label:"快选审批意见"}},{type:"textarea",control:{modelValue:""},config:{},name:"remark",item:{label:"审批意见",rules:[{required:!0,message:"请输入审批意见",trigger:"change"}]}}],form:{size:"default"},config:{}}),D=({key:o,value:i})=>{o==="type"&&p.value.setValue({remark:i===1?"同意":"不同意"})},N=n({columns:[{label:"节点名称",prop:"nodeName"},{label:"处理人",prop:"name"},{label:"任务状态",prop:"status",config:{}},{label:"开始时间",prop:"startTime",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"结束时间",prop:"endTime",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{label:"审批意见",prop:"remark"}],config:{columnsSetting:!1}});return g({open:y}),(o,i)=>{const u=s("el-tag"),_=s("el-button"),x=s("ak-form"),k=s("el-tab-pane"),U=s("ak-flow"),z=s("ak-list"),O=s("el-tabs"),S=s("el-drawer"),F=R("loading");return b(),T(S,{modelValue:a.visible,"onUpdate:modelValue":i[0]||(i[0]=$=>a.visible=$),"destroy-on-close":"","with-header":!1,size:"1200px"},{default:l(()=>[t("div",H,[t("div",J,[K,t("div",null,[M,e(u,null,{default:l(()=>[c("总裁助理审批中")]),_:1})]),t("div",P,[e(_,{type:"success"},{default:l(()=>[c("同意")]),_:1}),e(_,{type:"danger"},{default:l(()=>[c("拒绝")]),_:1}),e(_,{type:"primary"},{default:l(()=>[c("流转")]),_:1})])]),e(O,null,{default:l(()=>[e(k,{label:"表单信息"},{default:l(()=>[A((b(),q("div",Q,[e(x,{ref_key:"formEl",ref:m,formData:f.value,beforeSubmit:w,afterSubmit:v,type:2,requestUrl:"getFormContent",editUrl:"editFormContent"},null,8,["formData"]),e(x,{ref_key:"formOptionsEl",ref:p,formData:r.value,type:1,onChange:D},null,8,["formData"]),W])),[[F,a.loading]])]),_:1}),e(k,{label:"流程图",name:"flow",class:"flow-box"},{default:l(()=>[X,e(U,{type:1,ref_key:"flowEl",ref:d},null,512)]),_:1}),e(k,{label:"流转记录"},{default:l(()=>[e(z,{ref:"tableListEl",tableData:N.value},null,8,["tableData"])]),_:1})]),_:1})])]),_:1},8,["modelValue"])}}});const ee=B({__name:"todo",setup(L){const g=n(),a=n({list:[{type:"input",control:{modelValue:"",placeholder:"请输入审批标题"},config:{},name:"title",item:{label:"审批标题"}},{type:"button",control:{label:"查询",type:"primary",key:"submit"},config:{}},{type:"button",control:{label:"重置"},config:{}}],form:{size:"default"},config:{}}),y=n({columns:[{prop:"title",label:"审批标题"},{prop:"creatTime",label:"发起时间",config:{formatter:"{y}-{m}-{d} {h}:{i}:{s}"}},{prop:"a",label:"流程节点"},{prop:"status",label:"流程状态"}],config:{requestUrl:"flowList",expand:!0}}),d=n(),m=f=>{d.value.open(f)};return(f,w)=>{const v=s("el-tag"),h=s("el-button"),p=s("ak-list");return b(),q("div",null,[e(p,{ref_key:"tableListEl",ref:g,requestUrl:"flowList",searchData:a.value,tableData:y.value},{status:l(({row:r})=>[r.status?(b(),T(v,{key:0},{default:l(()=>[c(V(r.status),1)]),_:2},1024)):G("",!0)]),title:l(({row:r})=>[e(h,{link:"",type:"primary",onClick:D=>m(r)},{default:l(()=>[c(V(r.title),1)]),_:2},1032,["onClick"])]),_:1},8,["searchData","tableData"]),e(Y,{ref_key:"drawerEl",ref:d},null,512)])}}});export{ee as default}; |
|||
@ -0,0 +1 @@ |
|||
.flow-detail-drawer .header{padding:16px 24px;border-bottom:1px solid #f0f0f0;margin-bottom:20px;display:flex}.flow-detail-drawer .header .face{background:#f0f0f0;width:40px;height:40px;display:flex;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;font-size:40px;margin-right:10px}.flow-detail-drawer .header .face img{display:block;width:100%;height:100%}.flow-detail-drawer .header .name{margin-bottom:5px}.flow-detail-drawer .header .button{flex:2;text-align:center}.flow-detail-drawer .flow-box{position:relative}.flow-detail-drawer .status{position:absolute;left:0;top:0}.flow-detail-drawer .status li{padding:5px}.flow-detail-drawer .status .s1{color:#20b2aa}.flow-detail-drawer .status .s2{color:#1890ff}.flow-detail-drawer .status .s3{color:#909399}.flow-detail-drawer .status .s4{color:#fc653f}.flow-detail-drawer .status .s5{color:#d9db9b} |
|||
@ -0,0 +1 @@ |
|||
/* empty css */import{o as t,c as e,ai as s}from"./index-3679850f.js";const o=""+new URL("data-source1-0b746423.png",import.meta.url).href,a={class:"marked-body"},p=s('<h1 id="数据源">数据源</h1><p>即mysql数据表，用于存储表单提交的数据，因此在设计一个表单前应先为该表单创建一个数据源</p><h2 id="设计入口">设计入口</h2><p><a href="https://337547038.github.io/vue-form-design/#/design/dataSource">https://337547038.github.io/vue-form-design/#/design/dataSource</a></p><p><img src="'+o+'" alt=""></p><p>数据表名即mysql数据库表名；</p><h4 id="数据库表字段：">数据库表字段：</h4><p>标题：表单显示的标签名称</p><p>其他表名字类型长度值等对应mysql</p>',9),r=[p],m={__name:"use-dataSource",setup(i){return(c,d)=>(t(),e("div",a,r))}};export{m as default}; |
|||
@ -0,0 +1 @@ |
|||
import{a1 as r,d as i,I as d,N as l,a as p,c as h,ai as u}from"./index-ea7eee8a.js";const f=""+new URL("data-source1-0b746423.png",import.meta.url).href,s=i({components:{},setup(c){const o=[],e=d({});return{toggleCode:t=>{const a="vdpv_"+t;e[a+"Height"]===0?e[a+"Height"]=(o[t].value?o[t].value.offsetHeight:0)||0:e[a+"Height"]=0},...l(e)}}});s.$vd={matter:{},toc:[{content:"数据源",anchor:"数据源",level:1},{content:"设计入口",anchor:"设计入口",level:2},{content:"数据库表字段：",anchor:"数据库表字段",level:4}]};const m=s,_={class:"vuedoc"},g=u('<h1 id="数据源" data-source-line="1"><a class="markdownIt-Anchor" href="#数据源">#</a> 数据源</h1><p data-source-line="3">即mysql数据表，用于存储表单提交的数据，因此在设计一个表单前应先为该表单创建一个数据源</p><h2 id="设计入口" data-source-line="5"><a class="markdownIt-Anchor" href="#设计入口">#</a> 设计入口</h2><p data-source-line="6"><a href="https://337547038.github.io/vue-form-design/#/design/dataSource">https://337547038.github.io/vue-form-design/#/design/dataSource</a></p><p data-source-line="8"><img src="'+f+'" alt=""></p><p data-source-line="10">数据表名即mysql数据库表名；</p><h4 id="数据库表字段" data-source-line="12"><a class="markdownIt-Anchor" href="#数据库表字段">#</a> 数据库表字段：</h4><p data-source-line="13">标题：表单显示的标签名称</p><p data-source-line="15">其他表名字类型长度值等对应mysql</p>',9),v=[g];function k(c,o,e,n,t,a){return p(),h("div",_,v)}const w=r(m,[["render",k]]);export{w as default}; |
|||
@ -0,0 +1,96 @@ |
|||
/* empty css */import{o as s,c as a,ai as n}from"./index-3679850f.js";const p=""+new URL("use-form4-3c4c3b8a.png",import.meta.url).href,t=""+new URL("use-form3-566535e7.png",import.meta.url).href,e=""+new URL("use-form1-08d01fcf.png",import.meta.url).href,l=""+new URL("use-form2-c95c310f.png",import.meta.url).href,o={class:"marked-body"},r=n(`<h1 id="表单设计">表单设计</h1><h2 id="基础字段">基础字段</h2><p>表单设计基本常用组件，直接拖动设计区域，设置好相应的属性配置即可，各组件使用见系统管理各栏目</p><p><strong>•树形控件</strong></p><p>使用方法详见<a href="/#/design/dataSource">系统管理部门管理</a> 新增弹窗</p><h2 id="高级字段">高级字段</h2><p><strong>•子表：</strong></p><p>使用方法详见<a href="/#/design/dataSource">新增表单数据源</a></p><p><strong>•自定义组件</strong></p><p>自定义组件需全局注册，<code>导出vue文件</code>使用可使用当前页面导入的。组件需要v-model才级实现更新</p><p>引入当前页面组件时建议使用markRaw，如：</p><pre class="language-javascript"><code class="hljs"><span class="hljs-comment">// import component from 'xxx.vue'</span>
|
|||
<span class="hljs-attr">config</span>: { |
|||
<span class="hljs-attr">componentName</span>: <span class="hljs-title function_">markRaw</span>(component) |
|||
}</code></pre><p>使用方法详见：</p><p><a href="/#/design/dataList/list">列表页设计管理</a> 设置弹窗</p><p><a href="/#/system/role">系统管理-角色管理</a> 新增编辑角色菜单权限</p><p><img src="`+p+'" alt=""></p><h2 id="布局字段">布局字段</h2><p><strong>•弹性布局</strong></p><p>使用方法详见<a href="/#/system/dict">字典管理</a></p><p><img src="'+t+`" alt=""></p><h2 id="使用模板">使用模板</h2><p>可通用使用模板快速创建表单</p><p><strong>创建新模板</strong></p><p>src/views/design/form/template目录下新建ts文件，将设计生成的json/javascript代码复制保存即可新增模板，格式如下：</p><pre class="language-javascript"><code class="hljs"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> imgPath = <span class="hljs-string">'demo.png'</span> <span class="hljs-comment">// 预览图</span> |
|||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> title = <span class="hljs-string">'标题'</span> <span class="hljs-comment">// 标题</span> |
|||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> formData = {} <span class="hljs-comment">// 生成的代码</span></code></pre><h2 id="预览">预览</h2><p>可快速查看当前设计的表单，样式和实际可能存在差异。</p><h2 id="生成脚本预览">生成脚本预览</h2><p>除了预览，同时可以修改编辑，支持更多参数</p><pre class="language-text"><code class="hljs">{ |
|||
list:[ |
|||
type:'input', |
|||
control:{ |
|||
// 这里对应的当前组件所有props参数，可见elementUi组件
|
|||
} |
|||
] |
|||
}</code></pre><h2 id="导出vue文件">导出vue文件</h2><p>支持更多个性化设置，可导出vue文件到本地目录，配置好路由即可。此方法更灵活。更多用法详见系统管理下所有栏目使用</p><h2 id="保存">保存</h2><p>将设计生成的表单保存到服务端，也可通过<code>导出vue文件</code>单独使用</p><h2 id="字段配置">字段配置</h2><h3 id="通用属性">通用属性</h3><p><strong>•字段标识</strong></p><p>表单控件唯一标识，即表单控件元素的name值。在提交表单时根据此标识提交。如用户名标识为name，则提交表单为{name:'xx'}。其中get[formName]ControlByName(name) 中的name即为此标识，可快速根据此标识查找到当前组件。若不需提交表单和查找等，可为空</p><p><strong>•帮助信息</strong></p><p>用于对当前字段加以说明提示的帮助信息，会在label后面显示一个小问号，鼠标滑过提示。</p><p><strong>•设为Input输入框的前/后缀</strong></p><p>此功能可将select输入框作为input组件的前后缀使用。步骤：</p><p>1.选择select组件 => 设为Input输入框前/后缀为true => 复制当前字段标识，如下图</p><p><img src="`+e+'" alt=""></p><p>2.选择文本输入框设置前后缀为<code>key:粘贴前面复制的字段标识</code>，如下图</p><p><img src="'+l+`" alt=""></p><p><strong>•联动条件</strong></p><p>编写联动条件表达式，可使用&&和||等运算符，当满足条件时可将该组件设置为显示/隐藏或者是启用/禁用。其中<code>$</code> 表示当前表单的值。例如表单中有name=sex的单选值及name=age的文本输入，即当sex选中了1和age输入框的值大于20时条件成立</p><pre class="language-text"><code class="hljs">$.sex===1&&$.age>20</code></pre><h3 id="选项配置">选项配置</h3><p><strong>1.固定选项</strong></p><p>即可选择的值为固定值，由前端页面在设计时固定，不能修改。点击<code>新增</code>按钮，输入标签和值即可，可添加多个</p><p><strong>2.数据源</strong></p><p>当前组件选项通过指定的URL来获取。URL可以为完整的地址，也可以是api里设定的key</p><p><strong>指定label/value属性值</strong></p><p>选项数据需要的数据格式为label/value值形式，很多时候接口返回的数据并不是我们想要的，如:</p><pre class="language-javascript"><code class="hljs"><span class="hljs-comment">// 接口返回为name/id形式时，可设置label="name",value="id"</span> |
|||
<span class="hljs-keyword">const</span> result =[{<span class="hljs-attr">name</span>:<span class="hljs-string">'name'</span>,<span class="hljs-attr">id</span>:<span class="hljs-string">'1'</span>}] |
|||
<span class="hljs-comment">// 转换后的数据</span>
|
|||
<span class="hljs-keyword">const</span> format =[{<span class="hljs-attr">label</span>:<span class="hljs-string">'name'</span>,<span class="hljs-attr">value</span>:<span class="hljs-string">'1'</span>}]</code></pre><p>注意：设置了<code>afterResponse</code>时这三个参数无效</p><p><strong>尝试转换value数据类型</strong></p><p>当表单组件对应的值的数字时，这里回显则会异常，这时可以尝试将value转为string或number形式</p><p>可通过配置<code>beforeRequest</code>来添加指定请求参数配置，同时可使用<code>afterResponse</code>事件编辑方法对获取到的数据进行处理，最后再return回去。这两方法同表单配置的<code>beforeRequest</code> 和<code>afterResponse</code>。</p><pre class="language-javascript"><code class="hljs"><span class="hljs-comment">// beforeRequest</span> |
|||
opt = <span class="hljs-function">(<span class="hljs-params">data, route, form</span>) =></span> { |
|||
<span class="hljs-comment">// data表求的数据 route 页面路由信息 form当前表单值</span>
|
|||
<span class="hljs-keyword">return</span> data |
|||
}</code></pre><p>当选择为数据源时，数据源接口URL optionsFun可带一个动态参数，如/api?id=\${key}，key可以是当前表单任意name=key的组件，并且当该组件值发生改变时会重新请求；可实现联动功能，如：</p><pre class="language-javascript"><code class="hljs">[ |
|||
{ |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>: <span class="hljs-number">0</span> |
|||
}, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"province"</span>, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"省份"</span> |
|||
} |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>: <span class="hljs-number">1</span>, |
|||
<span class="hljs-attr">optionsFun</span>: <span class="hljs-string">"/api/getCity?id=\${province}"</span>, <span class="hljs-comment">// 当province组件改变时，重新请求。返回数据必须为[{label:'x',value:'xx'}]格式，否则需进行转换</span> |
|||
<span class="hljs-attr">method</span>: <span class="hljs-string">"get"</span> |
|||
}, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"city"</span>, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"城市"</span> |
|||
} |
|||
}]</code></pre><p>使用可见表单设计或列表设计页的权限角色<a href="/#/design/dataList/list">权限角色</a></p><p><strong>3.方法函数</strong></p><p>该方法适合于将当前表单<code>导出为vue文件</code>格式，通过在页面中编写代码将选项值传给当前组件。也可使用<a href="/#/docs/form">setOptions</a>方法设置。在导出时会自动生成示例代码，如：</p><pre class="language-javascript"><code class="hljs"><span class="hljs-title function_">provide</span>(<span class="hljs-string">'methodsName'</span>, {<span class="hljs-attr">label</span>: <span class="hljs-string">'x'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'xx'</span>})</code></pre><p><strong>4.接口字典</strong></p><p>当复杂表单中存在大量需要配置选项的组件时，每个组件都从指定URL获取，这是不太现实的，一大堆的请求会让你怀疑人生不说，还浪费服务器资源。对此可以设计表单时预设一些固定的选项值或者在接口里返回。可以<code>表单配置-设置字典数据</code>配置</p><h3 id="校验设置">校验设置</h3><p><strong>1.快速添加：</strong></p><p>1.可快速选择添加多个校验规则，输入对应提示语即可，非常简单方便。</p><p>2.自定义正则：则需要填写正则表达式</p><p>3.自定义方法：仅支持<code>导出vue文件</code>模式，如方法名称为myFn，在导出文件时则会生成示例代码，如:</p><pre class="language-javascript"><code class="hljs"><span class="hljs-title function_">provide</span>(<span class="hljs-string">"myFn"</span>, <span class="hljs-function">(<span class="hljs-params">rule, value, callback</span>) =></span> { |
|||
<span class="hljs-keyword">if</span> (value === <span class="hljs-string">''</span>) { |
|||
<span class="hljs-title function_">callback</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">'Please input the password again'</span>)) |
|||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (value !== <span class="hljs-string">'abc'</span>) { |
|||
<span class="hljs-title function_">callback</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">"Two inputs don't match!"</span>)) |
|||
} <span class="hljs-keyword">else</span> { |
|||
<span class="hljs-title function_">callback</span>() |
|||
} |
|||
})</code></pre><p>4.除系统内置的校验规则，还可通过可./design/form/components/validate.ts扩展，添加常用校验规则</p><p><strong>2.编写校验规则：</strong> 除了快速选择之外，还可以在弹出的窗口里通过编辑校验规则来实现，详情可参考UI组件的校验规则。可在弹出框输入代码，如：</p><pre class="language-javascript"><code class="hljs">opt = [ |
|||
{<span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'age is required'</span>}, |
|||
{<span class="hljs-attr">type</span>: <span class="hljs-string">'number'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'age must be a number'</span>} |
|||
]</code></pre><p>*除input文本输入框外，其他可输入组件如select、checkbox只有必选项，输入对应提示语即可</p><h3 id="其他属性">其他属性</h3><p>字段属性里只是列了一些比较常用的prop，如还需要其他属性，可通过添加属性窗口来编写，每个组件都有不同的prop，可参考UI当前组件prop</p><h2 id="表单配置">表单配置</h2><p><strong>•表单名称</strong>：保存时的名称</p><p><strong>•数据源</strong>：</p><p>注意：此接口数据会缓存本地，防频繁请求加载</p><p>设计的表单提交数据保存时，默认根据选择的数据源保存在对应的mysql数据表中；可选择已有数据源，也可通过配置接口数据事件url，提交到指定的url；数据源创建可见 <a href="/#/docs/use-dataSource">使用手册－数据源</a></p><p><strong>•表单标识：</strong></p><p>当前表单唯一标识，get[formName]ControlByName和get[formName]ValueByName中的formName值，根据此标识查找。若都没使用以上方法则可留空</p><p><strong>•表单标签宽度：</strong></p><p>即FormItem的属性label-width</p><p><strong>•表单样式名称：</strong></p><p>为当前表单额外添加的css样式名，可用于个性化调整。对应样式可以是全局的，或者在编辑表单样式中输入</p><p><strong>•添加时获取请求：</strong></p><p>当表单添加新数据内容时可请求接口url，获取新增初始值以及所需字典数据等等</p><p><strong>•编辑表单样式：</strong></p><p>编写有样式时会在当前页面head中插入style脚本，作用范围为当前页面。类似于.vue文件中的style scoped中的样式。在弹出编辑框中可编写css样式</p><p><strong>•设置数据字典：</strong></p><p>当前表单的数据字典，可为单选多选和checkbox等提供初始选项。此类组件在选项配置时，只需设计 <code>动态选项－接口字典</code> 输入对应的key即可。字典配置格式如下：</p><pre class="language-json"><code class="hljs"><span class="hljs-punctuation">{</span> |
|||
<span class="hljs-attr">"sex"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> |
|||
<span class="hljs-attr">"0"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"男"</span><span class="hljs-punctuation">,</span> |
|||
<span class="hljs-attr">"1"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"女"</span> |
|||
<span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span> |
|||
<span class="hljs-attr">"status"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> |
|||
<span class="hljs-attr">"1"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"启用"</span><span class="hljs-punctuation">,</span> |
|||
<span class="hljs-attr">"0"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"禁用"</span> |
|||
<span class="hljs-punctuation">}</span> |
|||
<span class="hljs-punctuation">}</span></code></pre><h3 id="接口数据事件">接口数据事件</h3><p><strong>1.新增数据保存url：</strong></p><p>默认会根据所选数据源提交到对应的url，某些特殊情况或是作为<code>导出vue文件</code>单独使用时可设置，同props.addUrl。<strong>这里设置优先于数据源</strong>。</p><p><strong>2.修改数据保存url：</strong></p><p>同理于新增url，同props.editUrl</p><p><strong>3.获取表单数据url：</strong></p><p>同理于新增url，同props.requestUrl</p><p><strong>4.beforeRequest：</strong></p><p>在请求获取表单数据前事件，同props.beforeRequest，如：</p><pre class="language-javascript"><code class="hljs"><span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeRequest</span> = (<span class="hljs-params">params, route</span>) => { |
|||
<span class="hljs-comment">// 此处可对请求参数params进行修改处理后返回，route为当前路由信息</span>
|
|||
<span class="hljs-comment">// 如当路由参数name为true时，添加id参数</span>
|
|||
<span class="hljs-keyword">if</span> (route.<span class="hljs-property">query</span>.<span class="hljs-property">name</span>) { |
|||
params.<span class="hljs-property">id</span> = route.<span class="hljs-property">query</span>.<span class="hljs-property">name</span> |
|||
} |
|||
<span class="hljs-keyword">return</span> params <span class="hljs-comment">// return false时将发不请求</span> |
|||
}</code></pre><p><strong>5.afterResponse：</strong></p><p>同props.afterResponse，即<code>requestUrl</code>请求结果返回时。可对返回的数据进行处理，如</p><pre class="language-javascript"><code class="hljs"><span class="hljs-keyword">const</span> <span class="hljs-title function_">afterResponse</span> = (<span class="hljs-params">result</span>) => { |
|||
<span class="hljs-comment">// 这里是处理逻辑</span>
|
|||
<span class="hljs-keyword">return</span> result <span class="hljs-comment">// return false时不处理请求结果</span> |
|||
}</code></pre><p>当处理逻辑比较复杂时，通过在线编辑器编辑<code>afterResponse</code>处理逻辑明显是不适合的，此时可设置为字符串格式，即设置一个key。则会自执行本地<code>/utils/formatResult</code>方法，如：</p><pre class="language-javascript"><code class="hljs"><span class="hljs-comment">// const afterResponse = 'formatTest'</span> |
|||
<span class="hljs-keyword">const</span> <span class="hljs-title function_">formatResult</span> = (<span class="hljs-params">res: any, key: string</span>) => { |
|||
<span class="hljs-comment">// key即为formatTest，可根据设置的key设置不同的处理方法</span>
|
|||
<span class="hljs-keyword">return</span> res |
|||
}</code></pre><p>使用实例可见用户管理部门侧栏等</p><p><strong>6.beforeSubmit：</strong></p><p>同props.beforeSubmit。表单提交前处理事件，方法跟beforeRequest一样</p><p><strong>7.afterSubmit：</strong></p><p>同props.afterSubmit。表单提交后返回处理事件，方法跟afterResponse一样</p><p><strong>8.表单组件改变事件change:</strong></p><p>同props.change，类似于其他事件也支持本地<code>/utils/formChangeValue</code>方法</p><pre class="language-javascript"><code class="hljs">opt=<span class="hljs-function">(<span class="hljs-params">key,model</span>) =></span> { |
|||
<span class="hljs-comment">// name当前改变组件的值,model表单的值</span>
|
|||
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'onChange'</span>,key) |
|||
<span class="hljs-keyword">return</span> model |
|||
}</code></pre><h3 id="全局方法">全局方法</h3><p><strong>get[formName]ControlByName</strong></p><p> formName 为设计表单时表单配置-表单标识。注意：使用此方法必须设置表单标识</p><p> 根据name值获取formData中的数据项(name:string)</p><p><strong>get[formName]ValueByName</strong></p><p>根据name值获取当前表单对应的值</p><p>实例可参考<a href="/#/system/user">系统工具-用户管理密码校验</a></p>`,130),c=[r],m={__name:"use-form",setup(h){return(u,i)=>(s(),a("div",o,c))}};export{m as default}; |
|||
@ -0,0 +1,111 @@ |
|||
import{a1 as f,d as y,I as v,N as k,a as _,c as q,b as s,x as p,l as t,w as r,ai as c,m as o}from"./index-ea7eee8a.js";const w=""+new URL("use-form4-3c4c3b8a.png",import.meta.url).href,b=""+new URL("use-form3-566535e7.png",import.meta.url).href,x=""+new URL("use-form1-08d01fcf.png",import.meta.url).href,R=""+new URL("use-form2-c95c310f.png",import.meta.url).href,d=y({components:{},setup(u){const l=[],a=v({});return{toggleCode:n=>{const e="vdpv_"+n;a[e+"Height"]===0?a[e+"Height"]=(l[n].value?l[n].value.offsetHeight:0)||0:a[e+"Height"]=0},...k(a)}}});d.$vd={matter:{},toc:[{content:"表单设计",anchor:"表单设计",level:1},{content:"基础字段",anchor:"基础字段",level:2},{content:"高级字段",anchor:"高级字段",level:2},{content:"布局字段",anchor:"布局字段",level:2},{content:"使用模板",anchor:"使用模板",level:2},{content:"预览",anchor:"预览",level:2},{content:"生成脚本预览",anchor:"生成脚本预览",level:2},{content:"导出vue文件",anchor:"导出vue文件",level:2},{content:"保存",anchor:"保存",level:2},{content:"字段配置",anchor:"字段配置",level:2},{content:"通用属性",anchor:"通用属性",level:3},{content:"选项配置",anchor:"选项配置",level:3},{content:"校验设置",anchor:"校验设置",level:3},{content:"其他属性",anchor:"其他属性",level:3},{content:"表单配置",anchor:"表单配置",level:2},{content:"接口数据事件",anchor:"接口数据事件",level:3},{content:"全局方法",anchor:"全局方法",level:3}]};const I=d,N={class:"vuedoc"},A=c(`<h1 id="表单设计" data-source-line="1"><a class="markdownIt-Anchor" href="#表单设计">#</a> 表单设计</h1><h2 id="基础字段" data-source-line="3"><a class="markdownIt-Anchor" href="#基础字段">#</a> 基础字段</h2><p data-source-line="5">表单设计基本常用组件，直接拖动设计区域，设置好相应的属性配置即可，各组件使用见系统管理各栏目</p><p data-source-line="7"><strong>•树形控件</strong></p><p data-source-line="9">使用方法详见<a href="/#/design/dataSource">系统管理部门管理</a> 新增弹窗</p><h2 id="高级字段" data-source-line="11"><a class="markdownIt-Anchor" href="#高级字段">#</a> 高级字段</h2><p data-source-line="13"><strong>•子表：</strong></p><p data-source-line="15">使用方法详见<a href="/#/design/dataSource">新增表单数据源</a></p><p data-source-line="17"><strong>•自定义组件</strong></p><p data-source-line="19">自定义组件需全局注册，<code>导出vue文件</code>使用可使用当前页面导入的。组件需要v-model才级实现更新</p><p data-source-line="21">引入当前页面组件时建议使用markRaw，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-comment">// import component from 'xxx.vue'</span>
|
|||
<span class="hljs-attr">config</span>: { |
|||
<span class="hljs-attr">componentName</span>: markRaw(component) |
|||
} |
|||
</code></pre><p data-source-line="30">使用方法详见：</p><p data-source-line="32"><a href="/#/design/dataList/list">列表页设计管理</a> 设置弹窗</p><p data-source-line="34"><a href="/#/system/role">系统管理-角色管理</a> 新增编辑角色菜单权限</p><p data-source-line="36"><img src="`+w+'" alt=""></p><h2 id="布局字段" data-source-line="38"><a class="markdownIt-Anchor" href="#布局字段">#</a> 布局字段</h2><p data-source-line="40"><strong>•弹性布局</strong></p><p data-source-line="42">使用方法详见<a href="/#/system/dict">字典管理</a></p><p data-source-line="44"><img src="'+b+`" alt=""></p><h2 id="使用模板" data-source-line="46"><a class="markdownIt-Anchor" href="#使用模板">#</a> 使用模板</h2><p data-source-line="48">可通用使用模板快速创建表单</p><p data-source-line="50"><strong>创建新模板</strong></p><p data-source-line="52">src/views/design/form/template目录下新建ts文件，将设计生成的json/javascript代码复制保存即可新增模板，格式如下：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> imgPath = <span class="hljs-string">'demo.png'</span> <span class="hljs-comment">// 预览图</span> |
|||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> title = <span class="hljs-string">'标题'</span> <span class="hljs-comment">// 标题</span> |
|||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> formData = {} <span class="hljs-comment">// 生成的代码</span> |
|||
</code></pre><h2 id="预览" data-source-line="60"><a class="markdownIt-Anchor" href="#预览">#</a> 预览</h2><p data-source-line="62">可快速查看当前设计的表单，样式和实际可能存在差异。</p><h2 id="生成脚本预览" data-source-line="64"><a class="markdownIt-Anchor" href="#生成脚本预览">#</a> 生成脚本预览</h2><p data-source-line="66">除了预览，同时可以修改编辑，支持更多参数</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-text hljs--one-dark"><code>{ |
|||
list:[ |
|||
type:'input', |
|||
control:{ |
|||
// 这里对应的当前组件所有props参数，可见elementUi组件
|
|||
} |
|||
] |
|||
} |
|||
</code></pre><h2 id="导出vue文件" data-source-line="79"><a class="markdownIt-Anchor" href="#导出vue文件">#</a> 导出vue文件</h2><p data-source-line="81">支持更多个性化设置，可导出vue文件到本地目录，配置好路由即可。此方法更灵活。更多用法详见系统管理下所有栏目使用</p><h2 id="保存" data-source-line="83"><a class="markdownIt-Anchor" href="#保存">#</a> 保存</h2><p data-source-line="85">将设计生成的表单保存到服务端，也可通过<code>导出vue文件</code>单独使用</p><h2 id="字段配置" data-source-line="87"><a class="markdownIt-Anchor" href="#字段配置">#</a> 字段配置</h2><h3 id="通用属性" data-source-line="89"><a class="markdownIt-Anchor" href="#通用属性">#</a> 通用属性</h3><p data-source-line="91"><strong>•字段标识</strong></p><p data-source-line="93">表单控件唯一标识，即表单控件元素的name值。在提交表单时根据此标识提交。如用户名标识为name，则提交表单为{name:‘xx’}。其中get[formName]ControlByName(name) 中的name即为此标识，可快速根据此标识查找到当前组件。若不需提交表单和查找等，可为空</p><p data-source-line="96"><strong>•帮助信息</strong></p><p data-source-line="98">用于对当前字段加以说明提示的帮助信息，会在label后面显示一个小问号，鼠标滑过提示。</p><p data-source-line="100"><strong>•设为Input输入框的前/后缀</strong></p><p data-source-line="102">此功能可将select输入框作为input组件的前后缀使用。步骤：</p><p data-source-line="104">1.选择select组件 => 设为Input输入框前/后缀为true => 复制当前字段标识，如下图</p><p data-source-line="106"><img src="`+x+'" alt=""></p><p data-source-line="108">2.选择文本输入框设置前后缀为<code>key:粘贴前面复制的字段标识</code>，如下图</p><p data-source-line="110"><img src="'+R+'" alt=""></p><p data-source-line="112"><strong>•联动条件</strong></p>',50),U={"data-source-line":"114"},C={class:"katex"},B={class:"katex-mathml"},L=s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"strut",style:{height:"0em"}}),s("span",{class:"strut bottom",style:{height:"0em","vertical-align":"0em"}}),s("span",{class:"base"})],-1),V=c(`<pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-text hljs--one-dark"><code>$.sex===1&&$.age>20 |
|||
</code></pre><h3 id="选项配置" data-source-line="121"><a class="markdownIt-Anchor" href="#选项配置">#</a> 选项配置</h3><p data-source-line="123"><strong>1.固定选项</strong></p><p data-source-line="125">即可选择的值为固定值，由前端页面在设计时固定，不能修改。点击<code>新增</code>按钮，输入标签和值即可，可添加多个</p><p data-source-line="127"><strong>2.数据源</strong></p><p data-source-line="129">当前组件选项通过指定的URL来获取。URL可以为完整的地址，也可以是api里设定的key</p><p data-source-line="131"><strong>指定label/value属性值</strong></p><p data-source-line="133">选项数据需要的数据格式为label/value值形式，很多时候接口返回的数据并不是我们想要的，如:</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-comment">// 接口返回为name/id形式时，可设置label="name",value="id"</span> |
|||
<span class="hljs-keyword">const</span> result =[{<span class="hljs-attr">name</span>:<span class="hljs-string">'name'</span>,<span class="hljs-attr">id</span>:<span class="hljs-string">'1'</span>}] |
|||
<span class="hljs-comment">// 转换后的数据</span>
|
|||
<span class="hljs-keyword">const</span> format =[{<span class="hljs-attr">label</span>:<span class="hljs-string">'name'</span>,<span class="hljs-attr">value</span>:<span class="hljs-string">'1'</span>}] |
|||
</code></pre><p data-source-line="141">注意：设置了<code>afterResponse</code>时这三个参数无效</p><p data-source-line="143"><strong>尝试转换value数据类型</strong></p><p data-source-line="145">当表单组件对应的值的数字时，这里回显则会异常，这时可以尝试将value转为string或number形式</p><p data-source-line="148">可通过配置<code>beforeRequest</code>来添加指定请求参数配置，同时可使用<code>afterResponse</code>事件编辑方法对获取到的数据进行处理，最后再return回去。这两方法同表单配置的<code>beforeRequest</code> 和<code>afterResponse</code>。</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-comment">// beforeRequest</span> |
|||
opt = <span class="hljs-function">(<span class="hljs-params">data, route, form</span>) =></span> { |
|||
<span class="hljs-comment">// data表求的数据 route 页面路由信息 form当前表单值</span>
|
|||
<span class="hljs-keyword">return</span> data |
|||
} |
|||
</code></pre><p data-source-line="159">当选择为数据源时，数据源接口URL optionsFun可带一个动态参数，如/api?id=\${key}，key可以是当前表单任意name=key的组件，并且当该组件值发生改变时会重新请求；可实现联动功能，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>[ |
|||
{ |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>: <span class="hljs-number">0</span> |
|||
}, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"province"</span>, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"省份"</span> |
|||
} |
|||
}, |
|||
{ |
|||
<span class="hljs-attr">type</span>: <span class="hljs-string">"select"</span>, |
|||
<span class="hljs-attr">control</span>: |
|||
{ |
|||
<span class="hljs-attr">modelValue</span>: <span class="hljs-string">""</span>, |
|||
<span class="hljs-attr">appendToBody</span>: <span class="hljs-literal">true</span> |
|||
}, |
|||
<span class="hljs-attr">options</span>: [], |
|||
<span class="hljs-attr">config</span>: |
|||
{ |
|||
<span class="hljs-attr">optionsType</span>: <span class="hljs-number">1</span>, |
|||
<span class="hljs-attr">optionsFun</span>: <span class="hljs-string">"/api/getCity?id=\${province}"</span>, <span class="hljs-comment">// 当province组件改变时，重新请求。返回数据必须为[{label:'x',value:'xx'}]格式，否则需进行转换</span> |
|||
<span class="hljs-attr">method</span>: <span class="hljs-string">"get"</span> |
|||
}, |
|||
<span class="hljs-attr">name</span>: <span class="hljs-string">"city"</span>, |
|||
<span class="hljs-attr">item</span>: |
|||
{ |
|||
<span class="hljs-attr">label</span>: <span class="hljs-string">"城市"</span> |
|||
} |
|||
}] |
|||
</code></pre><p data-source-line="203">使用可见表单设计或列表设计页的权限角色<a href="/#/design/dataList/list">权限角色</a></p><p data-source-line="205"><strong>3.方法函数</strong></p><p data-source-line="207">该方法适合于将当前表单<code>导出为vue文件</code>格式，通过在页面中编写代码将选项值传给当前组件。也可使用<a href="/#/docs/form">setOptions</a>方法设置。在导出时会自动生成示例代码，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>provide(<span class="hljs-string">'methodsName'</span>, {<span class="hljs-attr">label</span>: <span class="hljs-string">'x'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'xx'</span>}) |
|||
</code></pre><p data-source-line="213"><strong>4.接口字典</strong></p><p data-source-line="215">当复杂表单中存在大量需要配置选项的组件时，每个组件都从指定URL获取，这是不太现实的，一大堆的请求会让你怀疑人生不说，还浪费服务器资源。对此可以设计表单时预设一些固定的选项值或者在接口里返回。可以<code>表单配置-设置字典数据</code>配置</p><h3 id="校验设置" data-source-line="217"><a class="markdownIt-Anchor" href="#校验设置">#</a> 校验设置</h3><p data-source-line="219"><strong>1.快速添加：</strong></p><p data-source-line="221">1.可快速选择添加多个校验规则，输入对应提示语即可，非常简单方便。</p><p data-source-line="223">2.自定义正则：则需要填写正则表达式</p><p data-source-line="225">3.自定义方法：仅支持<code>导出vue文件</code>模式，如方法名称为myFn，在导出文件时则会生成示例代码，如:</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>provide(<span class="hljs-string">"myFn"</span>, <span class="hljs-function">(<span class="hljs-params">rule, value, callback</span>) =></span> { |
|||
<span class="hljs-keyword">if</span> (value === <span class="hljs-string">''</span>) { |
|||
callback(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Please input the password again'</span>)) |
|||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (value !== <span class="hljs-string">'abc'</span>) { |
|||
callback(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">"Two inputs don't match!"</span>)) |
|||
} <span class="hljs-keyword">else</span> { |
|||
callback() |
|||
} |
|||
}) |
|||
</code></pre><p data-source-line="239">4.除系统内置的校验规则，还可通过可./design/form/components/validate.ts扩展，添加常用校验规则</p><p data-source-line="241"><strong>2.编写校验规则：</strong> 除了快速选择之外，还可以在弹出的窗口里通过编辑校验规则来实现，详情可参考UI组件的校验规则。可在弹出框输入代码，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>opt = [ |
|||
{<span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'age is required'</span>}, |
|||
{<span class="hljs-attr">type</span>: <span class="hljs-string">'number'</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">'age must be a number'</span>} |
|||
] |
|||
</code></pre><p data-source-line="251">*除input文本输入框外，其他可输入组件如select、checkbox只有必选项，输入对应提示语即可</p><h3 id="其他属性" data-source-line="253"><a class="markdownIt-Anchor" href="#其他属性">#</a> 其他属性</h3><p data-source-line="255">字段属性里只是列了一些比较常用的prop，如还需要其他属性，可通过添加属性窗口来编写，每个组件都有不同的prop，可参考UI当前组件prop</p><h2 id="表单配置" data-source-line="257"><a class="markdownIt-Anchor" href="#表单配置">#</a> 表单配置</h2><p data-source-line="259"><strong>•表单名称</strong>：保存时的名称</p><p data-source-line="261"><strong>•数据源</strong>：</p><p data-source-line="263">注意：此接口数据会缓存本地，防频繁请求加载</p><p data-source-line="265">设计的表单提交数据保存时，默认根据选择的数据源保存在对应的mysql数据表中；可选择已有数据源，也可通过配置接口数据事件url，提交到指定的url；数据源创建可见 <a href="/#/docs/use-dataSource">使用手册－数据源</a></p><p data-source-line="267"><strong>•表单标识：</strong></p><p data-source-line="269">当前表单唯一标识，get[formName]ControlByName和get[formName]ValueByName中的formName值，根据此标识查找。若都没使用以上方法则可留空</p><p data-source-line="271"><strong>•表单标签宽度：</strong></p><p data-source-line="273">即FormItem的属性label-width</p><p data-source-line="275"><strong>•表单样式名称：</strong></p><p data-source-line="277">为当前表单额外添加的css样式名，可用于个性化调整。对应样式可以是全局的，或者在编辑表单样式中输入</p><p data-source-line="279"><strong>•添加时获取请求：</strong></p><p data-source-line="281">当表单添加新数据内容时可请求接口url，获取新增初始值以及所需字典数据等等</p><p data-source-line="283"><strong>•编辑表单样式：</strong></p><p data-source-line="285">编写有样式时会在当前页面head中插入style脚本，作用范围为当前页面。类似于.vue文件中的style scoped中的样式。在弹出编辑框中可编写css样式</p><p data-source-line="287"><strong>•设置数据字典：</strong></p><p data-source-line="289">当前表单的数据字典，可为单选多选和checkbox等提供初始选项。此类组件在选项配置时，只需设计 <code>动态选项－接口字典</code> 输入对应的key即可。字典配置格式如下：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-json hljs--one-dark"><code>{ |
|||
<span class="hljs-attr">"sex"</span>: { |
|||
<span class="hljs-attr">"0"</span>: <span class="hljs-string">"男"</span>, |
|||
<span class="hljs-attr">"1"</span>: <span class="hljs-string">"女"</span> |
|||
}, |
|||
<span class="hljs-attr">"status"</span>: { |
|||
<span class="hljs-attr">"1"</span>: <span class="hljs-string">"启用"</span>, |
|||
<span class="hljs-attr">"0"</span>: <span class="hljs-string">"禁用"</span> |
|||
} |
|||
} |
|||
</code></pre><h3 id="接口数据事件" data-source-line="304"><a class="markdownIt-Anchor" href="#接口数据事件">#</a> 接口数据事件</h3><p data-source-line="306"><strong>1.新增数据保存url：</strong></p><p data-source-line="308">默认会根据所选数据源提交到对应的url，某些特殊情况或是作为<code>导出vue文件</code>单独使用时可设置，同props.addUrl。<strong>这里设置优先于数据源</strong>。</p><p data-source-line="310"><strong>2.修改数据保存url：</strong></p><p data-source-line="312">同理于新增url，同props.editUrl</p><p data-source-line="314"><strong>3.获取表单数据url：</strong></p><p data-source-line="316">同理于新增url，同props.requestUrl</p><p data-source-line="318"><strong>4.beforeRequest：</strong></p><p data-source-line="320">在请求获取表单数据前事件，同props.beforeRequest，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-keyword">const</span> beforeRequest = <span class="hljs-function">(<span class="hljs-params">params, route</span>) =></span> { |
|||
<span class="hljs-comment">// 此处可对请求参数params进行修改处理后返回，route为当前路由信息</span>
|
|||
<span class="hljs-comment">// 如当路由参数name为true时，添加id参数</span>
|
|||
<span class="hljs-keyword">if</span> (route.query.name) { |
|||
params.id = route.query.name |
|||
} |
|||
<span class="hljs-keyword">return</span> params <span class="hljs-comment">// return false时将发不请求</span> |
|||
} |
|||
</code></pre><p data-source-line="333"><strong>5.afterResponse：</strong></p><p data-source-line="335">同props.afterResponse，即<code>requestUrl</code>请求结果返回时。可对返回的数据进行处理，如</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-keyword">const</span> afterResponse = <span class="hljs-function">(<span class="hljs-params">result</span>) =></span> { |
|||
<span class="hljs-comment">// 这里是处理逻辑</span>
|
|||
<span class="hljs-keyword">return</span> result <span class="hljs-comment">// return false时不处理请求结果</span> |
|||
} |
|||
</code></pre><p data-source-line="344">当处理逻辑比较复杂时，通过在线编辑器编辑<code>afterResponse</code>处理逻辑明显是不适合的，此时可设置为字符串格式，即设置一个key。则会自执行本地<code>/utils/formatResult</code>方法，如：</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code><span class="hljs-comment">// const afterResponse = 'formatTest'</span> |
|||
<span class="hljs-keyword">const</span> formatResult = <span class="hljs-function">(<span class="hljs-params">res: any, key: string</span>) =></span> { |
|||
<span class="hljs-comment">// key即为formatTest，可根据设置的key设置不同的处理方法</span>
|
|||
<span class="hljs-keyword">return</span> res |
|||
} |
|||
</code></pre><p data-source-line="354">使用实例可见用户管理部门侧栏等</p><p data-source-line="356"><strong>6.beforeSubmit：</strong></p><p data-source-line="358">同props.beforeSubmit。表单提交前处理事件，方法跟beforeRequest一样</p><p data-source-line="360"><strong>7.afterSubmit：</strong></p><p data-source-line="362">同props.afterSubmit。表单提交后返回处理事件，方法跟afterResponse一样</p><p data-source-line="364"><strong>8.表单组件改变事件change:</strong></p><p data-source-line="366">同props.change，类似于其他事件也支持本地<code>/utils/formChangeValue</code>方法</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>opt=<span class="hljs-function">(<span class="hljs-params">key,model</span>) =></span> { |
|||
<span class="hljs-comment">// name当前改变组件的值,model表单的值</span>
|
|||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'onChange'</span>,key) |
|||
<span class="hljs-keyword">return</span> model |
|||
} |
|||
</code></pre><h3 id="全局方法" data-source-line="376"><a class="markdownIt-Anchor" href="#全局方法">#</a> 全局方法</h3><p data-source-line="378"><strong>get[formName]ControlByName</strong></p><p data-source-line="380">formName 为设计表单时表单配置-表单标识。注意：使用此方法必须设置表单标识</p><p data-source-line="382">根据name值获取formData中的数据项(name:string)</p><p data-source-line="384"><strong>get[formName]ValueByName</strong></p><p data-source-line="386">根据name值获取当前表单对应的值</p><p data-source-line="388">实例可参考<a href="/#/system/user">系统工具-用户管理密码校验</a></p>`,94);function $(u,l,a,i,n,e){const h=o("mrow"),m=o("annotation"),g=o("semantics"),j=o("math");return _(),q("div",N,[A,s("p",U,[p("编写联动条件表达式，可使用&&和||等运算符，当满足条件时可将该组件设置为显示/隐藏或者是启用/禁用。其中"),s("span",C,[s("span",B,[t(j,null,{default:r(()=>[t(g,null,{default:r(()=>[t(h),t(m,{encoding:"application/x-tex"})]),_:1})]),_:1})]),L]),p(" 表示当前表单的值。例如表单中有name=sex的单选值及name=age的文本输入，即当sex选中了1和age输入框的值大于20时条件成立")]),V])}const T=f(I,[["render",$]]);export{T as default}; |
|||
|
After Width: | Height: | Size: 14 KiB |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue