@robot-admin/naive-ui-components 0.16.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -0
- package/README.md +12 -9
- package/README_EN.md +12 -9
- package/dist/C_ActionBar.css +56 -48
- package/dist/C_ActionBar2.cjs +1 -1
- package/dist/C_ActionBar2.js +1 -1
- package/dist/C_AntV2.cjs +1 -1
- package/dist/C_AntV2.js +3 -3
- package/dist/C_Barcode.css +6 -6
- package/dist/C_Barcode2.cjs +1 -1
- package/dist/C_Barcode2.js +1 -1
- package/dist/C_Chat.css +269 -185
- package/dist/C_Chat2.cjs +1 -1
- package/dist/C_Chat2.js +1 -1
- package/dist/C_Code.css +26 -26
- package/dist/C_Code2.cjs +1 -1
- package/dist/C_Code2.js +1 -1
- package/dist/C_Draggable2.cjs +1 -1
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_FilePreview.css +96 -57
- package/dist/C_FilePreview2.cjs +1 -1
- package/dist/C_FilePreview2.js +1 -1
- package/dist/C_Form.base.css +295 -277
- package/dist/C_Form.css +295 -277
- package/dist/C_Form.d.cts +2 -1
- package/dist/C_Form.d.ts +2 -1
- package/dist/C_FormModal.css +10 -10
- package/dist/C_FormModal2.cjs +1 -1
- package/dist/C_FormModal2.js +1 -1
- package/dist/C_FormSearch.css +67 -68
- package/dist/C_FormSearch.d.cts +2 -1
- package/dist/C_FormSearch.d.ts +2 -1
- package/dist/C_FormSearch2.cjs +1 -1
- package/dist/C_FormSearch2.js +1 -1
- package/dist/C_FullCalendar2.cjs +1 -1
- package/dist/C_FullCalendar2.js +1 -1
- package/dist/C_GlobalSearch.css +140 -118
- package/dist/C_GlobalSearch2.cjs +1 -1
- package/dist/C_GlobalSearch2.js +1 -1
- package/dist/C_ImageCropper.css +12 -10
- package/dist/C_ImageCropper2.cjs +1 -1
- package/dist/C_ImageCropper2.js +1 -1
- package/dist/C_Login.css +79 -79
- package/dist/C_Login2.cjs +1 -1
- package/dist/C_Login2.js +1 -1
- package/dist/C_Map.css +10 -10
- package/dist/C_Map2.cjs +1 -1
- package/dist/C_Map2.js +1 -1
- package/dist/C_OrgChart.css +28 -4
- package/dist/C_OrgChart2.cjs +1 -1
- package/dist/C_OrgChart2.js +1 -1
- package/dist/C_QRCode2.cjs +1 -1
- package/dist/C_QRCode2.js +1 -1
- package/dist/C_Signature.css +15 -15
- package/dist/C_Signature2.cjs +1 -1
- package/dist/C_Signature2.js +1 -1
- package/dist/C_SplitPane.cjs +1 -1
- package/dist/C_SplitPane.css +251 -109
- package/dist/C_SplitPane.js +1 -1
- package/dist/C_SplitPane2.cjs +1 -1
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_Table.base.css +491 -563
- package/dist/C_Table.cjs +1 -1
- package/dist/C_Table.css +491 -563
- package/dist/C_Table.d.cts +3 -2
- package/dist/C_Table.d.ts +4 -2
- package/dist/C_Table.js +1 -1
- package/dist/C_TagsView2.cjs +1 -1
- package/dist/C_TagsView2.js +1 -1
- package/dist/C_Transfer.css +93 -84
- package/dist/C_Transfer2.cjs +1 -1
- package/dist/C_Transfer2.js +1 -1
- package/dist/C_Tree.css +72 -125
- package/dist/C_Tree.d.cts +3 -2
- package/dist/C_Tree.d.ts +15 -2
- package/dist/C_Tree2.cjs +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Upload.css +5 -5
- package/dist/C_Upload2.cjs +1 -1
- package/dist/C_Upload2.js +1 -1
- package/dist/C_VideoPlayer2.cjs +4 -3
- package/dist/C_VideoPlayer2.js +4 -3
- package/dist/C_VtableGantt.css +29 -28
- package/dist/C_VtableGantt2.cjs +1 -1
- package/dist/C_VtableGantt2.js +1 -1
- package/dist/C_WaterFall.css +29 -29
- package/dist/C_WaterFall2.cjs +1 -1
- package/dist/C_WaterFall2.js +1 -1
- package/dist/C_WorkFlow2.cjs +1 -1
- package/dist/C_WorkFlow2.js +1 -1
- package/dist/Card.cjs +1 -1
- package/dist/Card.js +1 -1
- package/dist/Custom.cjs +1 -1
- package/dist/Custom.js +1 -1
- package/dist/Dynamic.cjs +1 -1
- package/dist/Dynamic.js +1 -1
- package/dist/Steps.cjs +1 -1
- package/dist/Steps.js +1 -1
- package/dist/Tabs.cjs +1 -1
- package/dist/Tabs.js +1 -1
- package/dist/constants.d.cts +2 -2
- package/dist/constants.d.ts +2 -2
- package/dist/constants2.d.cts +2 -2
- package/dist/constants2.d.ts +2 -2
- package/dist/constants3.d.cts +2 -2
- package/dist/constants3.d.ts +2 -2
- package/dist/constants4.d.cts +4 -4
- package/dist/constants4.d.ts +4 -4
- package/dist/constants5.d.cts +3 -7
- package/dist/constants5.d.ts +3 -7
- package/dist/data.d.cts +10 -10
- package/dist/data.d.ts +10 -10
- package/dist/density.cjs +1 -0
- package/dist/density.d.cts +15 -0
- package/dist/density.d.ts +15 -0
- package/dist/density.js +1 -0
- package/dist/helpers.cjs +1 -1
- package/dist/helpers.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +1 -1
- package/dist/index.vue.d.cts +5 -5
- package/dist/index.vue.d.ts +5 -5
- package/dist/index10.vue.d.cts +5 -5
- package/dist/index10.vue.d.ts +3 -3
- package/dist/index11.vue.d.cts +3 -3
- package/dist/index11.vue.d.ts +5 -5
- package/dist/index12.vue.d.cts +5 -5
- package/dist/index13.vue.d.ts +5 -5
- package/dist/index14.vue.d.cts +5 -5
- package/dist/index14.vue.d.ts +9 -9
- package/dist/index15.vue.d.cts +9 -9
- package/dist/index15.vue.d.ts +3 -3
- package/dist/index16.vue.d.cts +3 -3
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.cts +1 -1
- package/dist/index18.vue.d.ts +7 -7
- package/dist/index19.vue.d.cts +7 -7
- package/dist/index19.vue.d.ts +5 -5
- package/dist/index2.vue.d.cts +2 -2
- package/dist/index2.vue.d.ts +2 -2
- package/dist/index20.vue.d.cts +6 -2
- package/dist/index20.vue.d.ts +6 -2
- package/dist/index21.vue.d.cts +2 -2
- package/dist/index21.vue.d.ts +2 -2
- package/dist/index22.vue.d.cts +2 -2
- package/dist/index22.vue.d.ts +2 -2
- package/dist/index23.vue.d.cts +2 -2
- package/dist/index23.vue.d.ts +2 -2
- package/dist/index25.vue.d.cts +5 -5
- package/dist/index25.vue.d.ts +5 -5
- package/dist/index27.vue.d.cts +2 -2
- package/dist/index27.vue.d.ts +2 -2
- package/dist/index28.vue.d.cts +7 -3
- package/dist/index28.vue.d.ts +7 -3
- package/dist/index3.vue.d.cts +3 -3
- package/dist/index3.vue.d.ts +3 -3
- package/dist/index4.vue.d.cts +5 -5
- package/dist/index5.vue.d.ts +2 -2
- package/dist/index6.vue.d.cts +2 -2
- package/dist/index6.vue.d.ts +7 -4
- package/dist/index7.vue.d.cts +7 -4
- package/dist/index7.vue.d.ts +2 -2
- package/dist/index8.vue.d.cts +2 -2
- package/dist/index8.vue.d.ts +4 -6
- package/dist/index9.vue.d.cts +4 -6
- package/dist/index9.vue.d.ts +5 -5
- package/dist/mapUtils.d.cts +4 -4
- package/dist/mapUtils.d.ts +4 -4
- package/dist/presets.d.cts +4 -1
- package/dist/presets.d.ts +4 -1
- package/dist/style.css +1763 -1566
- package/dist/useCalendarEvents.d.cts +10 -9
- package/dist/useCalendarEvents.d.ts +10 -9
- package/dist/useCollapsePanel.d.cts +3 -3
- package/dist/useCollapsePanel.d.ts +3 -3
- package/dist/useCropperCore.d.cts +9 -9
- package/dist/useCropperCore.d.ts +9 -9
- package/dist/useDraggableLayout.d.cts +15 -13
- package/dist/useDraggableLayout.d.ts +15 -13
- package/dist/useDynamicFormState.d.cts +5 -2
- package/dist/useDynamicFormState.d.ts +5 -2
- package/dist/useEdgeInteraction.d.cts +3 -3
- package/dist/useEdgeInteraction.d.ts +3 -3
- package/dist/useFullscreen.d.cts +4 -0
- package/dist/useFullscreen.d.ts +4 -0
- package/dist/useGlobalSearch.d.cts +9 -4
- package/dist/useGlobalSearch.d.ts +9 -4
- package/dist/useInfiniteScroll.d.cts +4 -1
- package/dist/useInfiniteScroll.d.ts +4 -1
- package/dist/useQRCode.d.cts +3 -3
- package/dist/useQRCode.d.ts +3 -3
- package/dist/useSearchState.d.cts +8 -6
- package/dist/useSearchState.d.ts +8 -6
- package/dist/useSignatureHistory.d.cts +7 -7
- package/dist/useSignatureHistory.d.ts +7 -7
- package/dist/useSplitResize.d.cts +50 -61
- package/dist/useSplitResize.d.ts +50 -61
- package/dist/useTableQuery.cjs +3 -3
- package/dist/useTableQuery.d.cts +237 -13
- package/dist/useTableQuery.d.ts +237 -13
- package/dist/useTableQuery.js +3 -3
- package/dist/useTimeSelection.d.cts +2 -2
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useWorkflowValidation.d.cts +3 -3
- package/dist/useWorkflowValidation.d.ts +3 -3
- package/dist/verification.d.cts +5 -5
- package/dist/verification.d.ts +5 -5
- package/docs/component-review-20261019.md +55 -0
- package/docs/guides/form-density.en.md +42 -0
- package/docs/guides/form-density.md +59 -0
- package/docs/guides/runtime-performance.md +38 -0
- package/docs/guides/split-pane.en.md +103 -0
- package/docs/guides/split-pane.md +126 -0
- package/docs/guides/table-density.md +87 -0
- package/docs/guides/transfer.md +11 -0
- package/docs/guides/tree.md +157 -0
- package/docs/guides/usage.en.md +2 -0
- package/docs/guides/usage.md +2 -0
- package/docs/runtime-review-20261019.md +41 -0
- package/docs/wl-ui-produce-coverage.md +62 -0
- package/package.json +4 -2
- package/dist/useTreeOperations.d.cts +0 -185
- package/dist/useTreeOperations.d.ts +0 -185
package/dist/C_WorkFlow2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./feedback.js";import{t}from"./C_Icon2.js";import{t as n}from"./export-helper.js";import{a as r,t as i}from"./data.js";import{Fragment as a,Teleport as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,inject as h,isRef as g,markRaw as _,nextTick as v,normalizeClass as y,normalizeStyle as b,onBeforeUnmount as x,onMounted as S,openBlock as C,provide as w,ref as T,renderList as E,toDisplayString as D,unref as O,vShow as ee,watch as k,withCtx as A,withDirectives as j}from"vue";import{NAvatar as M,NButton as N,NCard as P,NDrawer as F,NDrawerContent as I,NInput as L,NModal as te,NRadio as ne,NRadioGroup as re,NSelect as R,NSpace as ie,NTag as ae,NTree as z}from"naive-ui";import{VueFlow as B}from"@vue-flow/core";const oe=[{type:`approval`,label:`审批人`,icon:`mdi:account-check`,iconClass:`approval-icon`},{type:`copy`,label:`抄送人`,icon:`mdi:email-outline`,iconClass:`copy-icon`},{type:`condition`,label:`条件分支`,icon:`mdi:source-branch`,iconClass:`condition-icon`}],se=[{value:`any`,label:`或签`,desc:`任意一人同意即可通过`},{value:`all`,label:`会签`,desc:`所有人都同意才能通过`},{value:`sequence`,label:`顺序审批`,desc:`按选择顺序依次审批`}],ce=[{label:`申请金额`,value:`amount`},{label:`申请人部门`,value:`department`},{label:`申请类型`,value:`type`},{label:`紧急程度`,value:`priority`}],V=[{label:`等于`,value:`equals`},{label:`大于`,value:`greater_than`},{label:`小于`,value:`less_than`},{label:`包含`,value:`contains`},{label:`不等于`,value:`not_equals`}],H={start:`发起人`,approval:`审批人`,copy:`抄送人`,condition:`条件分支`},U={approval:`审批人设置`,copy:`抄送人设置`,condition:`条件分支设置`},W={approvers:`审批人`,conditions:`条件配置`,connection:`节点连接`,copyUsers:`抄送人`},G={required:`必填`,incomplete:`不完整`,warning:`警告`,error:`错误`},K={id:`start-1`,type:`start`,position:{x:150,y:100},data:{title:`发起人`,status:`active`,initiators:[]}},q=e=>{let t=Array.from(e.trim()).slice(0,2).join(``).toUpperCase()||`?`,n=`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><rect width="80" height="80" rx="40" fill="hsl(${Array.from(e).reduce((e,t)=>(e*31+(t.codePointAt(0)??0))%360,210)} 55% 46%)"/><text x="40" y="48" text-anchor="middle" font-family="sans-serif" font-size="28" fill="white">${t.replace(/[&<>"']/g,e=>({"&":`&`,"<":`<`,">":`>`,'"':`"`,"'":`'`})[e])}</text></svg>`;return`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(n)}`};let J=0;const Y=e=>typeof crypto<`u`&&`randomUUID`in crypto?`${e}-${crypto.randomUUID()}`:`${e}-${Date.now()}-${++J}`,X=()=>Y(`condition`),Z=(e,t)=>`edge-${e}-${t}`,le=()=>({id:X(),name:``,field:``,operator:`equals`,value:``}),ue={key:0,class:`max-h-60vh overflow-y-auto`},Q={class:`config-section`},de={class:`flex items-center gap-2 mb-4 text-base font-semibold`,style:{color:`var(--n-text-color-1)`}},fe={class:`border rounded-lg p-3 mb-4 max-h-50 overflow-y-auto`,style:{borderColor:`var(--n-border-color)`,background:`var(--n-color-embedded)`}},pe={key:0,class:`rounded-lg p-4 mb-4 border`,style:{borderColor:`var(--n-border-color)`,background:`var(--n-color-embedded)`}},me={class:`mb-2 text-sm font-medium`,style:{color:`var(--n-text-color-1)`}},he={class:`flex flex-wrap gap-3`},ge={class:`flex items-center gap-2`},_e={class:`font-medium text-sm`},ve={class:`text-xs px-1.5 py-0.5 rounded`,style:{color:`var(--n-text-color-3)`,background:`var(--n-color-embedded)`}},ye={key:0,class:`mt-4`},be={class:`flex flex-col gap-1`},xe={class:`text-sm`},Se={class:`text-xs`,style:{color:`var(--n-text-color-3)`}},Ce={class:`max-h-60vh overflow-y-auto`},we={class:`config-section`},Te={class:`flex items-center gap-2 mb-4 text-base font-semibold`,style:{color:`var(--n-text-color-1)`}},Ee={class:`space-y-3`},De={class:`flex items-center gap-3 flex-nowrap min-h-10 p-2`};var Oe=n(m({__name:`NodeConfigModal`,props:{show:{type:Boolean,default:!1},currentNode:{default:null},users:{default:()=>[]},departments:{default:()=>[]}},emits:[`update:show`,`save`,`cancel`],setup(n,{emit:r}){let o=n,m=r,h=e(),g=T(``),_=T([]),v=T([]),y=T(`any`),b=T(!1),x=T([]),S=s({get:()=>o.show,set:e=>m(`update:show`,e)}),w=s(()=>o.currentNode?.type===`start`?`发起人设置`:U[o.currentNode?.type]||`节点设置`),ee=s(()=>{let e=[],t=new Map;return o.departments?.forEach(e=>{t.has(e.id)||t.set(e.id,{key:`dept-${e.id}`,label:`${e.name} ${e.manager?`(负责人: ${e.manager})`:``}`,children:[],isLeaf:!1,disabled:!0})}),(o.users?.filter(e=>!g.value||e.name.includes(g.value)||e.department.includes(g.value))||[]).forEach(e=>{let n=o.departments?.find(t=>t.name===e.department);n&&t.has(n.id)&&t.get(n.id).children.push({key:e.id,label:`${e.name}${e.role?`(${e.role})`:``}`,isLeaf:!0,user:e})}),t.forEach(t=>{t.children.length>0&&e.push(t)}),e}),j=s(()=>o.users?.filter(e=>_.value.includes(e.id))||[]),F=s(()=>o.users?.filter(e=>v.value.includes(e.id))||[]),I=s(()=>o.users?.filter(e=>_.value.includes(e.id))||[]),B=e=>{_.value=e.filter(e=>!e.startsWith(`dept-`))},oe=e=>{v.value=e.filter(e=>!e.startsWith(`dept-`))},H=e=>{_.value=_.value.filter(t=>t!==e)},W=e=>{v.value=v.value.filter(t=>t!==e)},G=e=>{_.value=_.value.filter(t=>t!==e)},K=()=>x.value.push(le()),J=e=>x.value.splice(e,1),Y=e=>{let{initiators:t}=e.data;_.value=t?t.map(e=>e.id):[]},X=e=>{_.value=(e.data.approvers||[]).map(e=>e.id),y.value=e.data.approvalMode||`any`},Z=e=>{v.value=(e.data.copyUsers||[]).map(e=>e.id)},Oe=e=>{x.value=i(e.data.conditions||[])},ke=async()=>{if(_.value.length===0)return h.error(`请选择发起人`),!1;let e=I.value;return m(`save`,{initiators:e}),h.success(`已设置 ${e.length} 个发起人`),!0},Ae=async()=>{if(_.value.length===0)return h.error(`请至少选择一个审批人`),!1;let e=j.value;return m(`save`,{approvers:e,approvalMode:y.value}),h.success(`已设置 ${e.length} 个审批人`),!0},je=async()=>{let e=F.value;return m(`save`,{copyUsers:e}),h.success(`已设置 ${e.length} 个抄送人`),!0},Me=async()=>x.value.length===0?(h.error(`请至少添加一个条件分支`),!1):x.value.some(e=>!e.name?.trim()||!e.field||!e.operator||!e.value?.trim())?(h.error(`请完善所有条件配置`),!1):(m(`save`,{conditions:i(x.value)}),h.success(`已设置 ${x.value.length} 个条件分支`),!0),Ne=async()=>{if(!o.currentNode)return!1;b.value=!0;try{let e={start:ke,approval:Ae,copy:je,condition:Me}[o.currentNode.type];return e?await e():!1}catch(e){return h.error(`保存配置失败`,e),!1}finally{b.value=!1}},Pe=()=>{m(`cancel`)};k(()=>o.currentNode,e=>{if(e){g.value=``;let t={start:Y,approval:X,copy:Z,condition:Oe}[e.type];t&&t(e)}},{immediate:!0});let Fe=s(()=>[`start`,`approval`,`copy`].includes(o.currentNode?.type||``)),$=s(()=>{let e=o.currentNode?.type;return e===`start`?{icon:`mdi:account-star`,title:`选择发起人`,checkedKeys:_.value,onSelect:B,selectedUsers:I.value,selectedLabel:`已选择发起人`,tagType:`primary`,onRemove:G}:e===`approval`?{icon:`mdi:account-check`,title:`选择审批人`,checkedKeys:_.value,onSelect:B,selectedUsers:j.value,selectedLabel:`已选择审批人`,tagType:`info`,onRemove:H}:e===`copy`?{icon:`mdi:email-outline`,title:`选择抄送人`,checkedKeys:v.value,onSelect:oe,selectedUsers:F.value,selectedLabel:`已选择抄送人`,tagType:`success`,onRemove:W}:{icon:``,title:``,checkedKeys:[],onSelect:()=>{},selectedUsers:[],selectedLabel:``,tagType:`default`,onRemove:()=>{}}});return(e,n)=>(C(),c(O(te),{show:S.value,"onUpdate:show":n[2]||=e=>S.value=e,style:{width:`900px`},"mask-closable":!1,preset:`dialog`,title:w.value,"positive-text":`确定`,"negative-text":`取消`,loading:b.value,onPositiveClick:Ne,onNegativeClick:Pe},{default:A(()=>[l(` 公共选择面板 `),Fe.value?(C(),u(`div`,ue,[d(`div`,Q,[d(`h4`,de,[$.value.icon?(C(),c(O(t),{key:0,name:$.value.icon,size:16},null,8,[`name`])):l(`v-if`,!0),f(` `+D($.value.title),1)]),p(O(L),{value:g.value,"onUpdate:value":n[0]||=e=>g.value=e,placeholder:`搜索用户姓名或部门`,clearable:``,class:`mb-4`},{prefix:A(()=>[p(O(t),{name:`mdi:magnify`,size:16})]),_:1},8,[`value`]),d(`div`,fe,[p(O(z),{data:ee.value,"checked-keys":$.value.checkedKeys,selectable:!1,checkable:``,cascade:``,"virtual-scroll":!0,style:{"max-height":`300px`},"onUpdate:checkedKeys":$.value.onSelect},null,8,[`data`,`checked-keys`,`onUpdate:checkedKeys`])]),$.value.selectedUsers.length>0?(C(),u(`div`,pe,[d(`h5`,me,D($.value.selectedLabel)+` (`+D($.value.selectedUsers.length)+`) `,1),d(`div`,he,[(C(!0),u(a,null,E($.value.selectedUsers,e=>(C(),c(O(ae),{key:e.id,closable:``,type:$.value.tagType,onClose:t=>$.value.onRemove(e.id)},{default:A(()=>[d(`div`,ge,[p(O(M),{src:e.avatar,"fallback-src":O(q)(e.name),size:`small`},null,8,[`src`,`fallback-src`]),d(`span`,_e,D(e.name),1),d(`span`,ve,D(e.department),1)])]),_:2},1032,[`type`,`onClose`]))),128))])])):l(`v-if`,!0)]),l(` 审批节点时附带审批模式 `),o.currentNode?.type===`approval`?(C(),u(`div`,ye,[n[3]||=d(`h5`,{class:`mb-3 text-sm font-medium`,style:{color:`var(--n-text-color-1)`}},` 审批模式 `,-1),p(O(re),{value:y.value,"onUpdate:value":n[1]||=e=>y.value=e},{default:A(()=>[p(O(ie),{vertical:``},{default:A(()=>[(C(!0),u(a,null,E(O(se),e=>(C(),c(O(ne),{key:e.value,value:e.value},{default:A(()=>[d(`div`,be,[d(`strong`,xe,D(e.label),1),d(`span`,Se,D(e.desc),1)])]),_:2},1032,[`value`]))),128))]),_:1})]),_:1},8,[`value`])])):l(`v-if`,!0)])):o.currentNode?.type===`condition`?(C(),u(a,{key:1},[l(` 条件节点配置 `),d(`div`,Ce,[d(`div`,we,[d(`h4`,Te,[p(O(t),{name:`mdi:source-branch`,size:16}),n[4]||=f(` 条件分支设置 `,-1)]),d(`div`,Ee,[(C(!0),u(a,null,E(x.value,(e,n)=>(C(),u(`div`,{key:e.id,class:`condition-item`},[p(O(P),{size:`small`,class:`border border-gray-200 hover:border-gray-300 transition-colors`},{default:A(()=>[d(`div`,De,[p(O(L),{value:e.name,"onUpdate:value":t=>e.name=t,placeholder:`分支名称`,style:{width:`150px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`]),p(O(R),{value:e.field,"onUpdate:value":t=>e.field=t,placeholder:`选择字段`,options:O(ce),style:{width:`120px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`,`options`]),p(O(R),{value:e.operator,"onUpdate:value":t=>e.operator=t,placeholder:`操作符`,options:O(V),style:{width:`100px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`,`options`]),p(O(L),{value:e.value,"onUpdate:value":t=>e.value=t,placeholder:`值`,style:{width:`120px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`]),p(O(N),{quaternary:``,type:`error`,onClick:e=>J(n),class:`flex-shrink-0 ml-auto`},{icon:A(()=>[p(O(t),{name:`mdi:delete`,size:16})]),_:1},8,[`onClick`])])]),_:2},1024)]))),128)),p(O(N),{dashed:``,block:``,onClick:K,class:`w-full`},{icon:A(()=>[p(O(t),{name:`mdi:plus`,size:16})]),default:A(()=>[n[5]||=f(` 添加条件 `,-1)]),_:1})])])])],2112)):l(`v-if`,!0)]),_:1},8,[`show`,`title`,`loading`]))}}),[[`__scopeId`,`data-v-df36c1fc`]]);const ke={class:`start-node`},Ae={class:`node-content`},je={class:`node-info`},Me={class:`node-text`},Ne={key:0,class:`initiator-name`},Pe={key:1,class:`placeholder-text`};var Fe=n(m({__name:`StartNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=s(()=>{let{initiators:e}=n.data;return!e||!Array.isArray(e)||e.length===0?``:e.map(e=>e?.name||`未知用户`).join(`、`)}),a=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)};return(n,r)=>(C(),u(`div`,ke,[l(` 主要内容区域 `),d(`div`,Ae,[r[0]||=d(`div`,{class:`node-icon`},`🚀`,-1),d(`div`,je,[d(`div`,Me,D(e.data.title),1),i.value?(C(),u(`div`,Ne,D(i.value),1)):(C(),u(`div`,Pe,`点击设置发起人`))])]),l(` 添加节点按钮 `),d(`button`,{type:`button`,class:`add-node-btn`,onClick:a,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-6fb2df95`]]);const $={class:`approval-node`},Ie={class:`node-card`},Le={class:`node-header`},Re={class:`node-icon`},ze={class:`node-title`},Be={key:0,class:`node-badge`},Ve={key:1,class:`approval-mode-badge`},He={class:`node-content`},Ue={key:0,class:`approvers-list`},We={class:`approver-info`},Ge={class:`approver-avatar`},Ke={class:`approver-details`},qe={class:`approver-name`},Je={class:`approver-dept`},Ye={class:`approver-role`},Xe={key:0,class:`more-count`},Ze={key:1,class:`placeholder`};var Qe=n(m({__name:`ApprovalNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.approvers??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,3)),m=s(()=>Math.max(0,c.value-3)),g=e=>({any:`或签`,all:`会签`,sequence:`顺序`})[e]||``,_=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},v=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,$,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:v,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,Ie,[d(`div`,Le,[d(`div`,Re,[p(O(t),{name:`mdi:account`,size:12,color:`white`})]),d(`span`,ze,D(e.data.title),1),c.value>0?(C(),u(`div`,Be,D(c.value),1)):l(`v-if`,!0),e.data.approvalMode?(C(),u(`div`,Ve,D(g(e.data.approvalMode)),1)):l(`v-if`,!0)]),d(`div`,He,[c.value>0?(C(),u(`div`,Ue,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`approver-tag`},[d(`div`,We,[d(`div`,Ge,[p(O(M),{src:e.avatar,"fallback-src":O(q)(e.name),size:`small`},null,8,[`src`,`fallback-src`])]),d(`div`,Ke,[d(`span`,qe,D(e.name),1),d(`span`,Je,D(e.department),1),d(`span`,Ye,D(e.role),1)])])]))),128)),m.value>0?(C(),u(`div`,Xe,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,Ze,[p(O(t),{name:`mdi:account-plus`,size:24,color:`#9ca3af`}),r[0]||=d(`span`,null,`请设置审批人`,-1)]))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:_,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-e6968a42`]]);const $e={class:`copy-node`},et={class:`node-card`},tt={class:`node-header`},nt={class:`node-title`},rt={key:0,class:`node-badge`},it={class:`node-content`},at={key:0,class:`copy-users-list`},ot={key:0,class:`more-count`},st={key:1,class:`placeholder`};var ct=n(m({__name:`CopyNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.copyUsers??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,3)),m=s(()=>Math.max(0,c.value-3)),g=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},_=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,$e,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:_,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,et,[d(`div`,tt,[r[0]||=d(`div`,{class:`node-icon`},`📋`,-1),d(`span`,nt,D(e.data.title),1),c.value>0?(C(),u(`div`,rt,D(c.value),1)):l(`v-if`,!0)]),d(`div`,it,[c.value>0?(C(),u(`div`,at,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`copy-user-tag`},D(e.name),1))),128)),m.value>0?(C(),u(`div`,ot,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,st,`请设置抄送人`))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:g,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-010e7ec8`]]);const lt={class:`condition-node`},ut={class:`node-card`},dt={class:`node-header`},ft={class:`node-title`},pt={key:0,class:`node-badge`},mt={class:`node-content`},ht={key:0,class:`conditions-list`},gt={key:0,class:`more-count`},_t={key:1,class:`placeholder`};var vt=n(m({__name:`ConditionNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.conditions??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,2)),m=s(()=>Math.max(0,c.value-2)),g=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},_=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,lt,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:_,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,ut,[d(`div`,dt,[r[0]||=d(`div`,{class:`node-icon`},`🔀`,-1),d(`span`,ft,D(e.data.title),1),c.value>0?(C(),u(`div`,pt,D(c.value),1)):l(`v-if`,!0)]),d(`div`,mt,[c.value>0?(C(),u(`div`,ht,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`condition-tag`},[r[1]||=d(`span`,{class:`condition-icon`},`→`,-1),d(`span`,null,D(e.name||`条件`+(f.value.indexOf(e)+1)),1)]))),128)),m.value>0?(C(),u(`div`,gt,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,_t,`请设置分支条件`))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:g,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-5ede8782`]]);const yt={start:_(Fe),approval:_(Qe),copy:_(ct),condition:_(vt)};function bt(t,n,a){let o=e(),c=T(i(t.modelValue?.nodes??[K])),l=T(i(t.modelValue?.edges??[])),u=T(t.modelValue?i(t.modelValue.config):{version:`1.0`,createdAt:new Date().toISOString()}),d=T(!1),f=T({x:0,y:0}),p=T(!1),m=T(null),h=T(null),g=new Set,_=!1,y=(e,t)=>{let n=setTimeout(()=>{g.delete(n),_||e()},t);g.add(n)},b=s(()=>yt),C=s(()=>{let e={totalNodes:c.value.length,approvalNodes:0,copyNodes:0,conditionNodes:0};return c.value.forEach(t=>{t.type===`approval`?e.approvalNodes++:t.type===`copy`?e.copyNodes++:t.type===`condition`&&e.conditionNodes++}),e}),E=()=>({nodes:i(c.value),edges:i(l.value),...u.value!==void 0&&{config:i(u.value)}}),D=()=>{let e=E();n(`update:modelValue`,e),n(`change`,e)},O=(e=60,t=400)=>{v(()=>{_||y(()=>{a.value?.fitView?.({padding:e,duration:t})},100)})},ee=(e,n)=>{t.readonly||(f.value={x:typeof e.x==`number`?e.x:0,y:typeof e.y==`number`?e.y:0},h.value=n||null,d.value=!0)},A=()=>{d.value=!1},j=e=>{if(t.readonly)return;let n=c.value.findIndex(t=>t.id===e);if(n===-1)return;if(c.value[n].type===`start`){o.warning(`不能删除开始节点`);return}let r=l.value.filter(t=>t.target===e),i=l.value.filter(t=>t.source===e);c.value.splice(n,1),l.value=l.value.filter(t=>t.source!==e&&t.target!==e),r.forEach(e=>{i.forEach(t=>{l.value.push({id:Z(e.source,t.target),source:e.source,target:t.target,animated:!0,type:`default`})})}),c.value.forEach((e,t)=>{t>=n&&(e.position.y-=180)}),D(),o.success(`节点已删除`),O()};w(`showAddMenu`,ee),w(`deleteNode`,j);let M=()=>{let e=c.value.length-1,t=c.value[e];if(h.value){let n=c.value.findIndex(e=>e.id===h.value);n!==-1&&(e=n,t=c.value[e])}return{targetNodeIndex:e,targetNode:t}},N=(e,t)=>({id:Y(e),type:e,position:{x:t?.position.x??150,y:(t?.position.y??130)+180},data:{title:H[e],status:`pending`,...e===`approval`&&{approvers:[],approvalMode:`any`},...e===`copy`&&{copyUsers:[]},...e===`condition`&&{conditions:[]}}}),P=(e,t)=>{let n=l.value.filter(t=>t.source===e.id);l.value=l.value.filter(t=>t.source!==e.id),l.value.push({id:Z(e.id,t.id),source:e.id,target:t.id,animated:!0,type:`default`}),n.forEach(e=>{l.value.push({id:Z(t.id,e.target),source:t.id,target:e.target,animated:!0,type:`default`})})};return k(()=>t.modelValue,e=>{e&&(r(e.nodes??[],c.value)&&r(e.edges??[],l.value)&&r(e.config,u.value)||(c.value=i(e.nodes??[]),l.value=i(e.edges??[]),u.value=i(e.config)))},{deep:!0}),S(()=>{_=!1,v(()=>{_||y(()=>{a.value?.fitView?.({padding:80,includeHiddenNodes:!1,minZoom:.8,maxZoom:1.2,duration:600})},300)})}),x(()=>{_=!0,g.forEach(e=>clearTimeout(e)),g.clear()}),{nodes:c,edges:l,showAddMenu:d,menuPosition:f,showNodeConfig:p,currentNode:m,nodeTypes:b,workflowStats:C,addNode:e=>{if(!t.readonly)try{let{targetNodeIndex:t,targetNode:n}=M(),r=N(e,n);c.value.splice(t+1,0,r);for(let e=t+2;e<c.value.length;e++)c.value[e].position.y+=180;n&&P(n,r),d.value=!1,h.value=null,D(),O()}catch(e){o.error(`添加节点失败,请重试`,e)}},onNodeClick:e=>{let r=c.value.find(t=>t.id===e.node.id);r&&(t.readonly||(m.value=r,p.value=!0),n(`node-click`,i(r)))},closeAddMenu:A,handleConfigSave:e=>{if(t.readonly||!m.value)return;let n=c.value.findIndex(e=>e.id===m.value.id);if(n!==-1){let t={...c.value[n],data:{...c.value[n].data,...i(e)}};c.value.splice(n,1,t),m.value=t}D(),p.value=!1,o.success(`节点配置已保存`)},resetNodes:()=>{t.readonly||(c.value=i([K]),l.value=[],D(),O(80,600),o.success(`画布已清空`))},getCurrentWorkflowData:E,fitView:()=>{if(!a.value?.fitView){o.warning(`画布未准备就绪,请稍后重试`);return}v(()=>{a.value.fitView({padding:50,includeHiddenNodes:!1,minZoom:.5,maxZoom:1.5,duration:800})}),o.success(`已适应窗口大小`)},deleteNode:j}}function xt(t,n,r,i){let a=e(),o=T([]),s=T(!1),c,l=()=>{let e=[];t.value.forEach(t=>{if(t.type===`approval`&&(t.data.approvers||[]).length===0&&e.push({nodeId:t.id,nodeName:t.data.title,field:`approvers`,message:`审批节点必须设置至少一个审批人,否则流程无法正常运行`,type:`required`}),t.type===`condition`){let n=t.data.conditions||[];if(n.length===0)e.push({nodeId:t.id,nodeName:t.data.title,field:`conditions`,message:`条件分支节点必须配置至少一个分支条件,否则无法进行条件判断`,type:`required`});else{let r=n.filter(e=>!e.name||!e.field||!e.operator||!e.value);r.length>0&&e.push({nodeId:t.id,nodeName:t.data.title,field:`conditions`,message:`有 ${r.length} 个条件分支配置不完整,请完善所有必填字段`,type:`incomplete`})}}});let r=new Set;return n.value.forEach(e=>{r.add(e.source),r.add(e.target)}),t.value.forEach(t=>{t.type!==`start`&&!r.has(t.id)&&e.push({nodeId:t.id,nodeName:t.data.title,field:`connection`,message:`此节点未与其他节点连接,可能导致流程中断`,type:`warning`})}),e};return x(()=>{c&&clearTimeout(c)}),{validationErrors:o,showValidationErrors:s,validateWorkflow:l,validateCurrentWorkflow:()=>{let e=l();o.value=e,e.length===0?(a.success(`工作流验证通过!所有节点配置正确`),s.value=!1):(a.error(`发现 ${e.length} 个问题,请查看详细错误`),s.value=!0,i?.onValidateError?.(e))},jumpToErrorNode:e=>{let n=t.value.find(t=>t.id===e);!n||!r.value||(r.value.setCenter(n.position.x,n.position.y,{zoom:1.2,duration:800}),c&&clearTimeout(c),c=setTimeout(()=>{c=void 0,i?.onShowNodeConfig?.(n),s.value=!1},900),a.info(`已定位到节点:${n.data.title}`))},getFieldDisplayName:e=>W[e]||e,getErrorTypeText:e=>G[e]||e,resetValidation:()=>{o.value=[],s.value=!1}}}const St={start:{label:`发起人`,icon:`mdi:play-circle`,colorClass:`start`},approval:{label:`审批节点`,icon:`mdi:account-check`,colorClass:`approval`},copy:{label:`抄送节点`,icon:`mdi:email-outline`,colorClass:`copy`},condition:{label:`条件分支`,icon:`mdi:source-branch`,colorClass:`condition`}},Ct={any:`或签(任一审批人通过即可)`,all:`会签(所有审批人必须通过)`,sequence:`顺序审批(按顺序依次审批)`},wt={equals:`等于`,not_equals:`不等于`,greater_than:`大于`,less_than:`小于`,contains:`包含`};function Tt(e,t){let n=T(!1),r=T([]),i=T({totalNodes:0,approvalNodes:0,copyNodes:0,conditionNodes:0,totalEdges:0}),a={start:e=>{let t=e.initiators||[];return t.length>0?[{type:`users`,label:`发起人`,users:t}]:[{type:`text`,label:`发起人`,value:`所有人`}]},approval:e=>{let t=e.approvalMode||`any`,n=e.approvers||[],r=[{type:`mode`,label:`审批方式`,value:Ct[t]||t,modeKey:t}];return n.length>0?r.push({type:`users`,label:`审批人`,users:n}):r.push({type:`warning`,label:`审批人`,value:`未设置`}),r},copy:e=>{let t=e.copyUsers||[];return t.length>0?[{type:`users`,label:`抄送人`,users:t}]:[{type:`text`,label:`抄送人`,value:`未设置`}]},condition:e=>{let t=e.conditions||[];return t.length===0?[{type:`warning`,label:`条件分支`,value:`未配置`}]:t.map((e,t)=>{let n=wt[e.operator]||e.operator;return{type:`text`,label:`分支 ${t+1}`,value:`${e.name||`未命名`} — ${e.field||`?`} ${n} ${e.value||`?`}`}})}},o=e=>{let t=a[e.type||`start`];return t?t(e.data):[]},s=()=>{let n=new Map;e.value.forEach(e=>n.set(e.id,e));let r=new Map,i=new Map;e.value.forEach(e=>{r.set(e.id,[]),i.set(e.id,0)}),t.value.forEach(e=>{r.get(e.source)?.push(e.target),i.set(e.target,(i.get(e.target)||0)+1)});let a=[];i.forEach((e,t)=>{e===0&&a.push(t)});let o=[],s=new Set;for(;a.length>0;){let e=a.shift();if(s.has(e))continue;s.add(e);let t=n.get(e);t&&o.push(t);let c=r.get(e)||[];for(let e of c){let t=(i.get(e)||1)-1;i.set(e,t),t<=0&&!s.has(e)&&a.push(e)}}return e.value.forEach(e=>{s.has(e.id)||o.push(e)}),o},c=()=>s().map((e,t)=>{let n=St[e.type||`start`]||St.start;return{order:t+1,node:e,nodeTypeLabel:n.label,icon:n.icon,colorClass:n.colorClass,details:o(e)}}),l=()=>{let n={totalNodes:e.value.length,approvalNodes:0,copyNodes:0,conditionNodes:0,totalEdges:t.value.length};return e.value.forEach(e=>{e.type===`approval`?n.approvalNodes++:e.type===`copy`?n.copyNodes++:e.type===`condition`&&n.conditionNodes++}),n};return{showPreview:n,previewSteps:r,previewStats:i,openPreview:()=>{r.value=c(),i.value=l(),n.value=!0},closePreview:()=>{n.value=!1}}}const Et={class:`approval-workflow-container`},Dt={class:`floating-toolbar`},Ot={class:`add-menu-content`},kt=[`onClick`],At={class:`menu-text`},jt={key:0,class:`validation-success`},Mt={class:`success-icon`},Nt={key:1,class:`validation-errors`},Pt={class:`error-summary`},Ft={class:`error-icon`},It={class:`error-list`},Lt={class:`error-header`},Rt={class:`error-number`},zt={class:`error-info`},Bt={class:`error-node`},Vt={class:`error-field`},Ht={class:`error-message`},Ut={class:`error-actions`},Wt={class:`validation-footer`},Gt={class:`preview-stats`},Kt={class:`stat-item`},qt={class:`stat-value`},Jt={class:`stat-item approval`},Yt={class:`stat-value`},Xt={class:`stat-item copy`},Zt={class:`stat-value`},Qt={class:`stat-item condition`},$t={class:`stat-value`},en={class:`stat-item edge`},tn={class:`stat-value`},nn={class:`preview-timeline`},rn={class:`step-connector`},an={class:`step-dot`},on={key:0,class:`step-line`},sn={class:`step-content`},cn={class:`step-header`},ln={class:`step-order`},un={class:`step-type-badge`},dn={class:`step-title`},fn={key:0,class:`step-details`},pn={class:`detail-label`},mn={class:`warning-text`},hn={key:0,class:`preview-empty`},gn={class:`preview-footer`};var _n=n(m({name:`C_WorkFlow`,__name:`index`,props:{users:{default:()=>[]},roles:{default:()=>[]},departments:{default:()=>[]},modelValue:{},readonly:{type:Boolean,default:!1},theme:{default:`light`}},emits:[`update:modelValue`,`change`,`node-click`,`edge-click`,`save`,`validate-error`],setup(n,{expose:r,emit:i}){let s=n,m=i,h=e(),_=T(),{nodes:v,edges:x,showAddMenu:S,menuPosition:w,showNodeConfig:k,currentNode:M,nodeTypes:P,workflowStats:L,addNode:te,onNodeClick:ne,closeAddMenu:re,handleConfigSave:R,resetNodes:ie,getCurrentWorkflowData:z,fitView:se,deleteNode:ce}=bt(s,m,_),{validationErrors:V,showValidationErrors:H,validateWorkflow:U,validateCurrentWorkflow:W,jumpToErrorNode:G,getFieldDisplayName:K,getErrorTypeText:q,resetValidation:J}=xt(v,x,_,{onShowNodeConfig:e=>{s.readonly||(M.value=e,k.value=!0)},onValidateError:e=>m(`validate-error`,e)}),{showPreview:Y,previewSteps:X,previewStats:Z,openPreview:le,closePreview:ue}=Tt(v,x),Q=()=>{if(s.readonly)return;let e=U();if(e.length>0){h.error(`工作流验证失败: ${e[0].message}`),H.value=!0;return}m(`save`,z()),h.success(`工作流保存成功`)},de=()=>{le()},fe=()=>{ue(),Q()},pe=()=>{s.readonly||(ie(),J())};return r({validateWorkflow:U,getCurrentWorkflowData:z,saveWorkflow:Q,previewWorkflow:de,deleteNode:ce,stats:L}),(e,r)=>(C(),u(`div`,Et,[l(` 浮动工具栏 `),d(`div`,Dt,[p(O(N),{size:`small`,type:`primary`,disabled:n.readonly,onClick:Q},{icon:A(()=>[p(O(t),{name:`mdi:content-save`,size:16})]),default:A(()=>[r[7]||=f(` 保存 `,-1)]),_:1},8,[`disabled`]),p(O(N),{size:`small`,onClick:de},{icon:A(()=>[p(O(t),{name:`mdi:eye`,size:16})]),default:A(()=>[r[8]||=f(` 预览 `,-1)]),_:1}),p(O(N),{size:`small`,onClick:O(W),title:`检查工作流配置是否正确`},{icon:A(()=>[p(O(t),{name:`mdi:check-circle`,size:16})]),default:A(()=>[r[9]||=f(` 验证流程 `,-1)]),_:1},8,[`onClick`]),r[10]||=d(`div`,{class:`toolbar-divider`},null,-1),p(O(N),{size:`small`,onClick:O(se),title:`适应窗口`},{icon:A(()=>[p(O(t),{name:`mdi:fit-to-screen`,size:16})]),_:1},8,[`onClick`]),p(O(N),{size:`small`,type:`error`,disabled:n.readonly,onClick:pe,title:`清空画布`},{icon:A(()=>[p(O(t),{name:`mdi:delete-sweep`,size:16})]),_:1},8,[`disabled`])]),l(` Vue Flow 画布 `),p(O(B),{ref_key:`vueFlowRef`,ref:_,nodes:O(v),"onUpdate:nodes":r[0]||=e=>g(v)?v.value=e:null,edges:O(x),"onUpdate:edges":r[1]||=e=>g(x)?x.value=e:null,"node-types":O(P),class:`workflow-canvas`,"default-viewport":{zoom:1,x:0,y:0},"min-zoom":.5,"max-zoom":2,"fit-view-on-init":!0,"nodes-draggable":!n.readonly,"nodes-connectable":!n.readonly,"edges-updatable":!n.readonly,"delete-key-code":n.readonly?null:void 0,"elements-selectable":!0,onNodeClick:O(ne),onPaneClick:O(re)},null,8,[`nodes`,`edges`,`node-types`,`nodes-draggable`,`nodes-connectable`,`edges-updatable`,`delete-key-code`,`onNodeClick`,`onPaneClick`]),l(` 节点添加菜单 `),(C(),c(o,{to:`body`},[j(d(`div`,{class:`add-node-menu`,style:b({left:O(w).x+`px`,top:O(w).y+`px`})},[d(`div`,Ot,[(C(!0),u(a,null,E(O(oe),e=>(C(),u(`button`,{key:e.type,type:`button`,class:`add-menu-item`,onClick:t=>O(te)(e.type)},[d(`div`,{class:y([`menu-icon`,e.iconClass])},[p(O(t),{name:e.icon,size:16},null,8,[`name`])],2),d(`span`,At,D(e.label),1)],8,kt))),128))])],4),[[ee,O(S)]])])),l(` 节点配置弹窗 - 拆分到独立组件 `),p(Oe,{show:O(k),"onUpdate:show":r[2]||=e=>g(k)?k.value=e:null,"current-node":O(M),users:n.users,departments:n.departments,onSave:O(R),onCancel:r[3]||=e=>k.value=!1},null,8,[`show`,`current-node`,`users`,`departments`,`onSave`]),l(` 验证错误日志抽屉 `),p(O(F),{show:O(H),"onUpdate:show":r[5]||=e=>g(H)?H.value=e:null,width:450,placement:`right`},{default:A(()=>[p(O(I),{title:`流程验证结果`,closable:``},{footer:A(()=>[d(`div`,Wt,[p(O(N),{onClick:r[4]||=e=>H.value=!1},{default:A(()=>[...r[16]||=[f(`关闭`,-1)]]),_:1}),p(O(N),{type:`primary`,onClick:O(W)},{icon:A(()=>[p(O(t),{name:`mdi:refresh`,size:16})]),default:A(()=>[r[17]||=f(` 重新验证 `,-1)]),_:1},8,[`onClick`])])]),default:A(()=>[O(V).length===0?(C(),u(`div`,jt,[d(`div`,Mt,[p(O(t),{name:`mdi:check-circle`,size:32,color:`#52c41a`})]),r[11]||=d(`h3`,null,`验证通过`,-1),r[12]||=d(`p`,null,`工作流配置正确,所有节点都已正确设置!`,-1)])):(C(),u(`div`,Nt,[d(`div`,Pt,[d(`div`,Ft,[p(O(t),{name:`mdi:alert-circle`,size:24,color:`#ff4d4f`})]),d(`h3`,null,`发现 `+D(O(V).length)+` 个问题`,1),r[13]||=d(`p`,null,`请修复以下问题后重新验证:`,-1)]),d(`div`,It,[(C(!0),u(a,null,E(O(V),(e,n)=>(C(),u(`div`,{key:e.nodeId,class:`error-item`},[d(`div`,Lt,[d(`span`,Rt,D(n+1),1),d(`div`,zt,[d(`strong`,Bt,D(e.nodeName),1),d(`span`,Vt,D(O(K)(e.field)),1)]),d(`div`,{class:y([`error-type`,e.type])},D(O(q)(e.type)),3)]),d(`div`,Ht,D(e.message),1),d(`div`,Ut,[p(O(N),{size:`small`,type:`primary`,onClick:t=>O(G)(e.nodeId)},{icon:A(()=>[p(O(t),{name:`mdi:target`,size:16})]),default:A(()=>[r[14]||=f(` 定位节点 `,-1)]),_:1},8,[`onClick`])])]))),128))]),r[15]||=d(`div`,{class:`validation-tips`},[d(`h4`,null,`💡 常见问题解决方案:`),d(`ul`,null,[d(`li`,null,[d(`strong`,null,`审批人未设置:`),f(`点击审批节点,在弹窗中选择审批人员 `)]),d(`li`,null,[d(`strong`,null,`条件分支未配置:`),f(`点击条件节点,添加至少一个条件分支 `)]),d(`li`,null,[d(`strong`,null,`节点连接断开:`),f(` 检查节点之间的连线是否正确 `)])])],-1)]))]),_:1})]),_:1},8,[`show`]),l(` 流程预览抽屉 `),p(O(F),{show:O(Y),"onUpdate:show":r[6]||=e=>g(Y)?Y.value=e:null,width:520,placement:`right`},{default:A(()=>[p(O(I),{title:`流程预览`,closable:``},{footer:A(()=>[d(`div`,gn,[p(O(N),{onClick:O(ue)},{default:A(()=>[...r[24]||=[f(`关闭`,-1)]]),_:1},8,[`onClick`]),p(O(N),{type:`primary`,onClick:fe},{icon:A(()=>[p(O(t),{name:`mdi:content-save`,size:16})]),default:A(()=>[r[25]||=f(` 确认并保存 `,-1)]),_:1})])]),default:A(()=>[d(`div`,Gt,[d(`div`,Kt,[d(`span`,qt,D(O(Z).totalNodes),1),r[18]||=d(`span`,{class:`stat-label`},`总节点`,-1)]),d(`div`,Jt,[d(`span`,Yt,D(O(Z).approvalNodes),1),r[19]||=d(`span`,{class:`stat-label`},`审批`,-1)]),d(`div`,Xt,[d(`span`,Zt,D(O(Z).copyNodes),1),r[20]||=d(`span`,{class:`stat-label`},`抄送`,-1)]),d(`div`,Qt,[d(`span`,$t,D(O(Z).conditionNodes),1),r[21]||=d(`span`,{class:`stat-label`},`条件`,-1)]),d(`div`,en,[d(`span`,tn,D(O(Z).totalEdges),1),r[22]||=d(`span`,{class:`stat-label`},`连线`,-1)])]),d(`div`,nn,[(C(!0),u(a,null,E(O(X),(e,n)=>(C(),u(`div`,{key:e.node.id,class:y([`preview-step`,e.colorClass])},[l(` 时间线连接线 `),d(`div`,rn,[d(`div`,an,[p(O(t),{name:e.icon,size:16},null,8,[`name`])]),n<O(X).length-1?(C(),u(`div`,on)):l(`v-if`,!0)]),l(` 步骤内容 `),d(`div`,sn,[d(`div`,cn,[d(`span`,ln,`步骤 `+D(e.order),1),d(`span`,un,D(e.nodeTypeLabel),1)]),d(`div`,dn,D(e.node.data.title),1),e.details.length>0?(C(),u(`div`,fn,[(C(!0),u(a,null,E(e.details,(e,n)=>(C(),u(`div`,{key:n,class:y([`step-detail-item`,{"is-warning":e.type===`warning`}])},[d(`span`,pn,D(e.label)+`:`,1),l(` 审批方式 badge `),e.type===`mode`?(C(),u(`span`,{key:0,class:y([`mode-badge`,e.modeKey])},D(e.value),3)):e.type===`users`?(C(),u(a,{key:1},[l(` 人员 tags `),(C(!0),u(a,null,E(e.users,e=>(C(),c(O(ae),{key:e.name,size:`small`,bordered:!1,round:``,class:`user-tag`},{icon:A(()=>[p(O(t),{name:`mdi:account`,size:12})]),default:A(()=>[f(` `+D(e.name),1)]),_:2},1024))),128))],64)):e.type===`warning`?(C(),u(a,{key:2},[l(` 警告文案 `),d(`span`,mn,` ⚠️ `+D(e.value),1)],2112)):(C(),u(a,{key:3},[l(` 普通文本 `),d(`span`,null,D(e.value),1)],2112))],2))),128))])):l(`v-if`,!0)])],2))),128))]),O(X).length===0?(C(),u(`div`,hn,[p(O(t),{name:`mdi:file-document-outline`,size:48,color:`#d1d5db`}),r[23]||=d(`p`,null,`暂无流程节点`,-1)])):l(`v-if`,!0)]),_:1})]),_:1},8,[`show`])]))}}),[[`__scopeId`,`data-v-ffd6fa87`]]);export{bt as i,Tt as n,xt as r,_n as t};
|
|
1
|
+
import{t as e}from"./feedback.js";import{t}from"./C_Icon2.js";import{t as n}from"./export-helper.js";import{a as r,t as i}from"./data.js";import{Fragment as a,Teleport as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,inject as h,isRef as g,markRaw as _,nextTick as v,normalizeClass as y,normalizeStyle as b,onBeforeUnmount as x,onMounted as S,openBlock as C,provide as w,ref as T,renderList as E,toDisplayString as D,unref as O,vShow as ee,watch as k,withCtx as A,withDirectives as j}from"vue";import{NAvatar as M,NButton as N,NCard as P,NDrawer as F,NDrawerContent as I,NInput as L,NModal as te,NRadio as ne,NRadioGroup as re,NSelect as R,NSpace as ie,NTag as ae,NTree as z}from"naive-ui";import{VueFlow as B}from"@vue-flow/core";const oe=[{type:`approval`,label:`审批人`,icon:`mdi:account-check`,iconClass:`approval-icon`},{type:`copy`,label:`抄送人`,icon:`mdi:email-outline`,iconClass:`copy-icon`},{type:`condition`,label:`条件分支`,icon:`mdi:source-branch`,iconClass:`condition-icon`}],se=[{value:`any`,label:`或签`,desc:`任意一人同意即可通过`},{value:`all`,label:`会签`,desc:`所有人都同意才能通过`},{value:`sequence`,label:`顺序审批`,desc:`按选择顺序依次审批`}],ce=[{label:`申请金额`,value:`amount`},{label:`申请人部门`,value:`department`},{label:`申请类型`,value:`type`},{label:`紧急程度`,value:`priority`}],V=[{label:`等于`,value:`equals`},{label:`大于`,value:`greater_than`},{label:`小于`,value:`less_than`},{label:`包含`,value:`contains`},{label:`不等于`,value:`not_equals`}],H={start:`发起人`,approval:`审批人`,copy:`抄送人`,condition:`条件分支`},U={approval:`审批人设置`,copy:`抄送人设置`,condition:`条件分支设置`},W={approvers:`审批人`,conditions:`条件配置`,connection:`节点连接`,copyUsers:`抄送人`},G={required:`必填`,incomplete:`不完整`,warning:`警告`,error:`错误`},K={id:`start-1`,type:`start`,position:{x:150,y:100},data:{title:`发起人`,status:`active`,initiators:[]}},q=e=>{let t=Array.from(e.trim()).slice(0,2).join(``).toUpperCase()||`?`,n=`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><rect width="80" height="80" rx="40" fill="hsl(${Array.from(e).reduce((e,t)=>(e*31+(t.codePointAt(0)??0))%360,210)} 55% 46%)"/><text x="40" y="48" text-anchor="middle" font-family="sans-serif" font-size="28" fill="white">${t.replace(/[&<>"']/g,e=>({"&":`&`,"<":`<`,">":`>`,'"':`"`,"'":`'`})[e])}</text></svg>`;return`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(n)}`};let J=0;const Y=e=>typeof crypto<`u`&&`randomUUID`in crypto?`${e}-${crypto.randomUUID()}`:`${e}-${Date.now()}-${++J}`,X=()=>Y(`condition`),Z=(e,t)=>`edge-${e}-${t}`,le=()=>({id:X(),name:``,field:``,operator:`equals`,value:``}),ue={key:0,class:`max-h-60vh overflow-y-auto`},Q={class:`config-section`},de={class:`flex items-center gap-2 mb-4 text-base font-semibold`,style:{color:`var(--n-text-color-1)`}},fe={class:`border rounded-lg p-3 mb-4 max-h-50 overflow-y-auto`,style:{borderColor:`var(--n-border-color)`,background:`var(--n-color-embedded)`}},pe={key:0,class:`rounded-lg p-4 mb-4 border`,style:{borderColor:`var(--n-border-color)`,background:`var(--n-color-embedded)`}},me={class:`mb-2 text-sm font-medium`,style:{color:`var(--n-text-color-1)`}},he={class:`flex flex-wrap gap-3`},ge={class:`flex items-center gap-2`},_e={class:`font-medium text-sm`},ve={class:`text-xs px-1.5 py-0.5 rounded`,style:{color:`var(--n-text-color-3)`,background:`var(--n-color-embedded)`}},ye={key:0,class:`mt-4`},be={class:`flex flex-col gap-1`},xe={class:`text-sm`},Se={class:`text-xs`,style:{color:`var(--n-text-color-3)`}},Ce={class:`max-h-60vh overflow-y-auto`},we={class:`config-section`},Te={class:`flex items-center gap-2 mb-4 text-base font-semibold`,style:{color:`var(--n-text-color-1)`}},Ee={class:`space-y-3`},De={class:`flex items-center gap-3 flex-nowrap min-h-10 p-2`};var Oe=n(m({__name:`NodeConfigModal`,props:{show:{type:Boolean,default:!1},currentNode:{default:null},users:{default:()=>[]},departments:{default:()=>[]}},emits:[`update:show`,`save`,`cancel`],setup(n,{emit:r}){let o=n,m=r,h=e(),g=T(``),_=T([]),v=T([]),y=T(`any`),b=T(!1),x=T([]),S=s({get:()=>o.show,set:e=>m(`update:show`,e)}),w=s(()=>o.currentNode?.type===`start`?`发起人设置`:U[o.currentNode?.type]||`节点设置`),ee=s(()=>{let e=[],t=new Map;return o.departments?.forEach(e=>{t.has(e.id)||t.set(e.id,{key:`dept-${e.id}`,label:`${e.name} ${e.manager?`(负责人: ${e.manager})`:``}`,children:[],isLeaf:!1,disabled:!0})}),(o.users?.filter(e=>!g.value||e.name.includes(g.value)||e.department.includes(g.value))||[]).forEach(e=>{let n=o.departments?.find(t=>t.name===e.department);n&&t.has(n.id)&&t.get(n.id).children.push({key:e.id,label:`${e.name}${e.role?`(${e.role})`:``}`,isLeaf:!0,user:e})}),t.forEach(t=>{t.children.length>0&&e.push(t)}),e}),j=s(()=>o.users?.filter(e=>_.value.includes(e.id))||[]),F=s(()=>o.users?.filter(e=>v.value.includes(e.id))||[]),I=s(()=>o.users?.filter(e=>_.value.includes(e.id))||[]),B=e=>{_.value=e.filter(e=>!e.startsWith(`dept-`))},oe=e=>{v.value=e.filter(e=>!e.startsWith(`dept-`))},H=e=>{_.value=_.value.filter(t=>t!==e)},W=e=>{v.value=v.value.filter(t=>t!==e)},G=e=>{_.value=_.value.filter(t=>t!==e)},K=()=>x.value.push(le()),J=e=>x.value.splice(e,1),Y=e=>{let{initiators:t}=e.data;_.value=t?t.map(e=>e.id):[]},X=e=>{_.value=(e.data.approvers||[]).map(e=>e.id),y.value=e.data.approvalMode||`any`},Z=e=>{v.value=(e.data.copyUsers||[]).map(e=>e.id)},Oe=e=>{x.value=i(e.data.conditions||[])},ke=async()=>{if(_.value.length===0)return h.error(`请选择发起人`),!1;let e=I.value;return m(`save`,{initiators:e}),h.success(`已设置 ${e.length} 个发起人`),!0},Ae=async()=>{if(_.value.length===0)return h.error(`请至少选择一个审批人`),!1;let e=j.value;return m(`save`,{approvers:e,approvalMode:y.value}),h.success(`已设置 ${e.length} 个审批人`),!0},je=async()=>{let e=F.value;return m(`save`,{copyUsers:e}),h.success(`已设置 ${e.length} 个抄送人`),!0},Me=async()=>x.value.length===0?(h.error(`请至少添加一个条件分支`),!1):x.value.some(e=>!e.name?.trim()||!e.field||!e.operator||!e.value?.trim())?(h.error(`请完善所有条件配置`),!1):(m(`save`,{conditions:i(x.value)}),h.success(`已设置 ${x.value.length} 个条件分支`),!0),Ne=async()=>{if(!o.currentNode)return!1;b.value=!0;try{let e={start:ke,approval:Ae,copy:je,condition:Me}[o.currentNode.type];return e?await e():!1}catch(e){return h.error(`保存配置失败`,e),!1}finally{b.value=!1}},Pe=()=>{m(`cancel`)};k(()=>o.currentNode,e=>{if(e){g.value=``;let t={start:Y,approval:X,copy:Z,condition:Oe}[e.type];t&&t(e)}},{immediate:!0});let Fe=s(()=>[`start`,`approval`,`copy`].includes(o.currentNode?.type||``)),$=s(()=>{let e=o.currentNode?.type;return e===`start`?{icon:`mdi:account-star`,title:`选择发起人`,checkedKeys:_.value,onSelect:B,selectedUsers:I.value,selectedLabel:`已选择发起人`,tagType:`primary`,onRemove:G}:e===`approval`?{icon:`mdi:account-check`,title:`选择审批人`,checkedKeys:_.value,onSelect:B,selectedUsers:j.value,selectedLabel:`已选择审批人`,tagType:`info`,onRemove:H}:e===`copy`?{icon:`mdi:email-outline`,title:`选择抄送人`,checkedKeys:v.value,onSelect:oe,selectedUsers:F.value,selectedLabel:`已选择抄送人`,tagType:`success`,onRemove:W}:{icon:``,title:``,checkedKeys:[],onSelect:()=>{},selectedUsers:[],selectedLabel:``,tagType:`default`,onRemove:()=>{}}});return(e,n)=>(C(),c(O(te),{show:S.value,"onUpdate:show":n[2]||=e=>S.value=e,style:{width:`900px`},"mask-closable":!1,preset:`dialog`,title:w.value,"positive-text":`确定`,"negative-text":`取消`,loading:b.value,onPositiveClick:Ne,onNegativeClick:Pe},{default:A(()=>[l(` 公共选择面板 `),Fe.value?(C(),u(`div`,ue,[d(`div`,Q,[d(`h4`,de,[$.value.icon?(C(),c(O(t),{key:0,name:$.value.icon,size:16},null,8,[`name`])):l(`v-if`,!0),f(` `+D($.value.title),1)]),p(O(L),{value:g.value,"onUpdate:value":n[0]||=e=>g.value=e,placeholder:`搜索用户姓名或部门`,clearable:``,class:`mb-4`},{prefix:A(()=>[p(O(t),{name:`mdi:magnify`,size:16})]),_:1},8,[`value`]),d(`div`,fe,[p(O(z),{data:ee.value,"checked-keys":$.value.checkedKeys,selectable:!1,checkable:``,cascade:``,"virtual-scroll":!0,style:{"max-height":`300px`},"onUpdate:checkedKeys":$.value.onSelect},null,8,[`data`,`checked-keys`,`onUpdate:checkedKeys`])]),$.value.selectedUsers.length>0?(C(),u(`div`,pe,[d(`h5`,me,D($.value.selectedLabel)+` (`+D($.value.selectedUsers.length)+`) `,1),d(`div`,he,[(C(!0),u(a,null,E($.value.selectedUsers,e=>(C(),c(O(ae),{key:e.id,closable:``,type:$.value.tagType,onClose:t=>$.value.onRemove(e.id)},{default:A(()=>[d(`div`,ge,[p(O(M),{src:e.avatar,"fallback-src":O(q)(e.name),size:`small`},null,8,[`src`,`fallback-src`]),d(`span`,_e,D(e.name),1),d(`span`,ve,D(e.department),1)])]),_:2},1032,[`type`,`onClose`]))),128))])])):l(`v-if`,!0)]),l(` 审批节点时附带审批模式 `),o.currentNode?.type===`approval`?(C(),u(`div`,ye,[n[3]||=d(`h5`,{class:`mb-3 text-sm font-medium`,style:{color:`var(--n-text-color-1)`}},` 审批模式 `,-1),p(O(re),{value:y.value,"onUpdate:value":n[1]||=e=>y.value=e},{default:A(()=>[p(O(ie),{vertical:``},{default:A(()=>[(C(!0),u(a,null,E(O(se),e=>(C(),c(O(ne),{key:e.value,value:e.value},{default:A(()=>[d(`div`,be,[d(`strong`,xe,D(e.label),1),d(`span`,Se,D(e.desc),1)])]),_:2},1032,[`value`]))),128))]),_:1})]),_:1},8,[`value`])])):l(`v-if`,!0)])):o.currentNode?.type===`condition`?(C(),u(a,{key:1},[l(` 条件节点配置 `),d(`div`,Ce,[d(`div`,we,[d(`h4`,Te,[p(O(t),{name:`mdi:source-branch`,size:16}),n[4]||=f(` 条件分支设置 `,-1)]),d(`div`,Ee,[(C(!0),u(a,null,E(x.value,(e,n)=>(C(),u(`div`,{key:e.id,class:`condition-item`},[p(O(P),{size:`small`,class:`border border-gray-200 hover:border-gray-300 transition-colors`},{default:A(()=>[d(`div`,De,[p(O(L),{value:e.name,"onUpdate:value":t=>e.name=t,placeholder:`分支名称`,style:{width:`150px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`]),p(O(R),{value:e.field,"onUpdate:value":t=>e.field=t,placeholder:`选择字段`,options:O(ce),style:{width:`120px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`,`options`]),p(O(R),{value:e.operator,"onUpdate:value":t=>e.operator=t,placeholder:`操作符`,options:O(V),style:{width:`100px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`,`options`]),p(O(L),{value:e.value,"onUpdate:value":t=>e.value=t,placeholder:`值`,style:{width:`120px`},class:`flex-shrink-0`},null,8,[`value`,`onUpdate:value`]),p(O(N),{quaternary:``,type:`error`,onClick:e=>J(n),class:`flex-shrink-0 ml-auto`},{icon:A(()=>[p(O(t),{name:`mdi:delete`,size:16})]),_:1},8,[`onClick`])])]),_:2},1024)]))),128)),p(O(N),{dashed:``,block:``,onClick:K,class:`w-full`},{icon:A(()=>[p(O(t),{name:`mdi:plus`,size:16})]),default:A(()=>[n[5]||=f(` 添加条件 `,-1)]),_:1})])])])],2112)):l(`v-if`,!0)]),_:1},8,[`show`,`title`,`loading`]))}}),[[`__scopeId`,`data-v-df36c1fc`]]);const ke={class:`start-node`},Ae={class:`node-content`},je={class:`node-info`},Me={class:`node-text`},Ne={key:0,class:`initiator-name`},Pe={key:1,class:`placeholder-text`};var Fe=n(m({__name:`StartNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=s(()=>{let{initiators:e}=n.data;return!e||!Array.isArray(e)||e.length===0?``:e.map(e=>e?.name||`未知用户`).join(`、`)}),a=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)};return(n,r)=>(C(),u(`div`,ke,[l(` 主要内容区域 `),d(`div`,Ae,[r[0]||=d(`div`,{class:`node-icon`},`🚀`,-1),d(`div`,je,[d(`div`,Me,D(e.data.title),1),i.value?(C(),u(`div`,Ne,D(i.value),1)):(C(),u(`div`,Pe,`点击设置发起人`))])]),l(` 添加节点按钮 `),d(`button`,{type:`button`,class:`add-node-btn`,onClick:a,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-6fb2df95`]]);const $={class:`approval-node`},Ie={class:`node-card`},Le={class:`node-header`},Re={class:`node-icon`},ze={class:`node-title`},Be={key:0,class:`node-badge`},Ve={key:1,class:`approval-mode-badge`},He={class:`node-content`},Ue={key:0,class:`approvers-list`},We={class:`approver-info`},Ge={class:`approver-avatar`},Ke={class:`approver-details`},qe={class:`approver-name`},Je={class:`approver-dept`},Ye={class:`approver-role`},Xe={key:0,class:`more-count`},Ze={key:1,class:`placeholder`};var Qe=n(m({__name:`ApprovalNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.approvers??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,3)),m=s(()=>Math.max(0,c.value-3)),g=e=>({any:`或签`,all:`会签`,sequence:`顺序`})[e]||``,_=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},v=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,$,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:v,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,Ie,[d(`div`,Le,[d(`div`,Re,[p(O(t),{name:`mdi:account`,size:12,color:`white`})]),d(`span`,ze,D(e.data.title),1),c.value>0?(C(),u(`div`,Be,D(c.value),1)):l(`v-if`,!0),e.data.approvalMode?(C(),u(`div`,Ve,D(g(e.data.approvalMode)),1)):l(`v-if`,!0)]),d(`div`,He,[c.value>0?(C(),u(`div`,Ue,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`approver-tag`},[d(`div`,We,[d(`div`,Ge,[p(O(M),{src:e.avatar,"fallback-src":O(q)(e.name),size:`small`},null,8,[`src`,`fallback-src`])]),d(`div`,Ke,[d(`span`,qe,D(e.name),1),d(`span`,Je,D(e.department),1),d(`span`,Ye,D(e.role),1)])])]))),128)),m.value>0?(C(),u(`div`,Xe,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,Ze,[p(O(t),{name:`mdi:account-plus`,size:24,color:`#9ca3af`}),r[0]||=d(`span`,null,`请设置审批人`,-1)]))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:_,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-e6968a42`]]);const $e={class:`copy-node`},et={class:`node-card`},tt={class:`node-header`},nt={class:`node-title`},rt={key:0,class:`node-badge`},it={class:`node-content`},at={key:0,class:`copy-users-list`},ot={key:0,class:`more-count`},st={key:1,class:`placeholder`};var ct=n(m({__name:`CopyNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.copyUsers??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,3)),m=s(()=>Math.max(0,c.value-3)),g=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},_=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,$e,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:_,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,et,[d(`div`,tt,[r[0]||=d(`div`,{class:`node-icon`},`📋`,-1),d(`span`,nt,D(e.data.title),1),c.value>0?(C(),u(`div`,rt,D(c.value),1)):l(`v-if`,!0)]),d(`div`,it,[c.value>0?(C(),u(`div`,at,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`copy-user-tag`},D(e.name),1))),128)),m.value>0?(C(),u(`div`,ot,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,st,`请设置抄送人`))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:g,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-010e7ec8`]]);const lt={class:`condition-node`},ut={class:`node-card`},dt={class:`node-header`},ft={class:`node-title`},pt={key:0,class:`node-badge`},mt={class:`node-content`},ht={key:0,class:`conditions-list`},gt={key:0,class:`more-count`},_t={key:1,class:`placeholder`};var vt=n(m({__name:`ConditionNode`,props:{id:{},data:{}},setup(e){let n=e,r=h(`showAddMenu`),i=h(`deleteNode`),o=s(()=>n.data.conditions??[]),c=s(()=>o.value.length),f=s(()=>o.value.slice(0,2)),m=s(()=>Math.max(0,c.value-2)),g=e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();r&&r({x:t.left+t.width/2,y:t.bottom+10},n.id)},_=e=>{e.stopPropagation(),i&&i(n.id)};return(n,r)=>(C(),u(`div`,lt,[d(`div`,{class:y([`status-indicator`,e.data.status])},null,2),l(` 删除按钮 `),d(`button`,{type:`button`,class:`delete-btn`,onClick:_,title:`删除节点`},[p(O(t),{name:`mdi:close`,size:12})]),d(`div`,ut,[d(`div`,dt,[r[0]||=d(`div`,{class:`node-icon`},`🔀`,-1),d(`span`,ft,D(e.data.title),1),c.value>0?(C(),u(`div`,pt,D(c.value),1)):l(`v-if`,!0)]),d(`div`,mt,[c.value>0?(C(),u(`div`,ht,[(C(!0),u(a,null,E(f.value,e=>(C(),u(`div`,{key:e.id,class:`condition-tag`},[r[1]||=d(`span`,{class:`condition-icon`},`→`,-1),d(`span`,null,D(e.name||`条件`+(f.value.indexOf(e)+1)),1)]))),128)),m.value>0?(C(),u(`div`,gt,`+`+D(m.value),1)):l(`v-if`,!0)])):(C(),u(`div`,_t,`请设置分支条件`))])]),d(`button`,{type:`button`,class:`add-node-btn`,onClick:g,title:`添加下一个节点`},[p(O(t),{name:`mdi:plus`,size:16})])]))}}),[[`__scopeId`,`data-v-5ede8782`]]);const yt={start:_(Fe),approval:_(Qe),copy:_(ct),condition:_(vt)};function bt(t,n,a){let o=e(),c=T(i(t.modelValue?.nodes??[K])),l=T(i(t.modelValue?.edges??[])),u=T(t.modelValue?i(t.modelValue.config):{version:`1.0`,createdAt:new Date().toISOString()}),d=T(!1),f=T({x:0,y:0}),p=T(!1),m=T(null),h=T(null),g=new Set,_=!1,y=(e,t)=>{let n=setTimeout(()=>{g.delete(n),_||e()},t);g.add(n)},b=s(()=>yt),C=s(()=>{let e={totalNodes:c.value.length,approvalNodes:0,copyNodes:0,conditionNodes:0};return c.value.forEach(t=>{t.type===`approval`?e.approvalNodes++:t.type===`copy`?e.copyNodes++:t.type===`condition`&&e.conditionNodes++}),e}),E=()=>({nodes:i(c.value),edges:i(l.value),...u.value!==void 0&&{config:i(u.value)}}),D=()=>{let e=E();n(`update:modelValue`,e),n(`change`,e)},O=(e=60,t=400)=>{v(()=>{_||y(()=>{a.value?.fitView?.({padding:e,duration:t})},100)})},ee=(e,n)=>{t.readonly||(f.value={x:typeof e.x==`number`?e.x:0,y:typeof e.y==`number`?e.y:0},h.value=n||null,d.value=!0)},A=()=>{d.value=!1},j=e=>{if(t.readonly)return;let n=c.value.findIndex(t=>t.id===e);if(n===-1)return;if(c.value[n].type===`start`){o.warning(`不能删除开始节点`);return}let r=l.value.filter(t=>t.target===e),i=l.value.filter(t=>t.source===e);c.value.splice(n,1),l.value=l.value.filter(t=>t.source!==e&&t.target!==e),r.forEach(e=>{i.forEach(t=>{l.value.push({id:Z(e.source,t.target),source:e.source,target:t.target,animated:!0,type:`default`})})}),c.value.forEach((e,t)=>{t>=n&&(e.position.y-=180)}),D(),o.success(`节点已删除`),O()};w(`showAddMenu`,ee),w(`deleteNode`,j);let M=()=>{let e=c.value.length-1,t=c.value[e];if(h.value){let n=c.value.findIndex(e=>e.id===h.value);n!==-1&&(e=n,t=c.value[e])}return{targetNodeIndex:e,targetNode:t}},N=(e,t)=>({id:Y(e),type:e,position:{x:t?.position.x??150,y:(t?.position.y??130)+180},data:{title:H[e],status:`pending`,...e===`approval`&&{approvers:[],approvalMode:`any`},...e===`copy`&&{copyUsers:[]},...e===`condition`&&{conditions:[]}}}),P=(e,t)=>{let n=l.value.filter(t=>t.source===e.id);l.value=l.value.filter(t=>t.source!==e.id),l.value.push({id:Z(e.id,t.id),source:e.id,target:t.id,animated:!0,type:`default`}),n.forEach(e=>{l.value.push({id:Z(t.id,e.target),source:t.id,target:e.target,animated:!0,type:`default`})})};return k(()=>t.modelValue,e=>{e&&(r(e.nodes??[],c.value)&&r(e.edges??[],l.value)&&r(e.config,u.value)||(c.value=i(e.nodes??[]),l.value=i(e.edges??[]),u.value=i(e.config)))},{deep:!0}),S(()=>{_=!1,v(()=>{_||y(()=>{a.value?.fitView?.({padding:80,includeHiddenNodes:!1,minZoom:.8,maxZoom:1.2,duration:600})},300)})}),x(()=>{_=!0,g.forEach(e=>clearTimeout(e)),g.clear()}),{nodes:c,edges:l,showAddMenu:d,menuPosition:f,showNodeConfig:p,currentNode:m,nodeTypes:b,workflowStats:C,addNode:e=>{if(!t.readonly)try{let{targetNodeIndex:t,targetNode:n}=M(),r=N(e,n);c.value.splice(t+1,0,r);for(let e=t+2;e<c.value.length;e++)c.value[e].position.y+=180;n&&P(n,r),d.value=!1,h.value=null,D(),O()}catch(e){o.error(`添加节点失败,请重试`,e)}},onNodeClick:e=>{let r=c.value.find(t=>t.id===e.node.id);r&&(t.readonly||(m.value=r,p.value=!0),n(`node-click`,i(r)))},closeAddMenu:A,handleConfigSave:e=>{if(t.readonly||!m.value)return;let n=c.value.findIndex(e=>e.id===m.value.id);if(n!==-1){let t={...c.value[n],data:{...c.value[n].data,...i(e)}};c.value.splice(n,1,t),m.value=t}D(),p.value=!1,o.success(`节点配置已保存`)},resetNodes:()=>{t.readonly||(c.value=i([K]),l.value=[],D(),O(80,600),o.success(`画布已清空`))},getCurrentWorkflowData:E,fitView:()=>{let e=a.value;if(!e?.fitView){o.warning(`画布未准备就绪,请稍后重试`);return}v(()=>{_||a.value!==e||e.fitView({padding:50,includeHiddenNodes:!1,minZoom:.5,maxZoom:1.5,duration:800})}),o.success(`已适应窗口大小`)},deleteNode:j}}function xt(t,n,r,i){let a=e(),o=T([]),s=T(!1),c,l=()=>{let e=[];t.value.forEach(t=>{if(t.type===`approval`&&(t.data.approvers||[]).length===0&&e.push({nodeId:t.id,nodeName:t.data.title,field:`approvers`,message:`审批节点必须设置至少一个审批人,否则流程无法正常运行`,type:`required`}),t.type===`condition`){let n=t.data.conditions||[];if(n.length===0)e.push({nodeId:t.id,nodeName:t.data.title,field:`conditions`,message:`条件分支节点必须配置至少一个分支条件,否则无法进行条件判断`,type:`required`});else{let r=n.filter(e=>!e.name||!e.field||!e.operator||!e.value);r.length>0&&e.push({nodeId:t.id,nodeName:t.data.title,field:`conditions`,message:`有 ${r.length} 个条件分支配置不完整,请完善所有必填字段`,type:`incomplete`})}}});let r=new Set;return n.value.forEach(e=>{r.add(e.source),r.add(e.target)}),t.value.forEach(t=>{t.type!==`start`&&!r.has(t.id)&&e.push({nodeId:t.id,nodeName:t.data.title,field:`connection`,message:`此节点未与其他节点连接,可能导致流程中断`,type:`warning`})}),e};return x(()=>{c&&clearTimeout(c)}),{validationErrors:o,showValidationErrors:s,validateWorkflow:l,validateCurrentWorkflow:()=>{let e=l();o.value=e,e.length===0?(a.success(`工作流验证通过!所有节点配置正确`),s.value=!1):(a.error(`发现 ${e.length} 个问题,请查看详细错误`),s.value=!0,i?.onValidateError?.(e))},jumpToErrorNode:e=>{let n=t.value.find(t=>t.id===e);!n||!r.value||(r.value.setCenter(n.position.x,n.position.y,{zoom:1.2,duration:800}),c&&clearTimeout(c),c=setTimeout(()=>{c=void 0,t.value.includes(n)&&(i?.onShowNodeConfig?.(n),s.value=!1)},900),a.info(`已定位到节点:${n.data.title}`))},getFieldDisplayName:e=>W[e]||e,getErrorTypeText:e=>G[e]||e,resetValidation:()=>{c&&clearTimeout(c),c=void 0,o.value=[],s.value=!1}}}const St={start:{label:`发起人`,icon:`mdi:play-circle`,colorClass:`start`},approval:{label:`审批节点`,icon:`mdi:account-check`,colorClass:`approval`},copy:{label:`抄送节点`,icon:`mdi:email-outline`,colorClass:`copy`},condition:{label:`条件分支`,icon:`mdi:source-branch`,colorClass:`condition`}},Ct={any:`或签(任一审批人通过即可)`,all:`会签(所有审批人必须通过)`,sequence:`顺序审批(按顺序依次审批)`},wt={equals:`等于`,not_equals:`不等于`,greater_than:`大于`,less_than:`小于`,contains:`包含`};function Tt(e,t){let n=T(!1),r=T([]),i=T({totalNodes:0,approvalNodes:0,copyNodes:0,conditionNodes:0,totalEdges:0}),a={start:e=>{let t=e.initiators||[];return t.length>0?[{type:`users`,label:`发起人`,users:t}]:[{type:`text`,label:`发起人`,value:`所有人`}]},approval:e=>{let t=e.approvalMode||`any`,n=e.approvers||[],r=[{type:`mode`,label:`审批方式`,value:Ct[t]||t,modeKey:t}];return n.length>0?r.push({type:`users`,label:`审批人`,users:n}):r.push({type:`warning`,label:`审批人`,value:`未设置`}),r},copy:e=>{let t=e.copyUsers||[];return t.length>0?[{type:`users`,label:`抄送人`,users:t}]:[{type:`text`,label:`抄送人`,value:`未设置`}]},condition:e=>{let t=e.conditions||[];return t.length===0?[{type:`warning`,label:`条件分支`,value:`未配置`}]:t.map((e,t)=>{let n=wt[e.operator]||e.operator;return{type:`text`,label:`分支 ${t+1}`,value:`${e.name||`未命名`} — ${e.field||`?`} ${n} ${e.value||`?`}`}})}},o=e=>{let t=a[e.type||`start`];return t?t(e.data):[]},s=()=>{let n=new Map;e.value.forEach(e=>n.set(e.id,e));let r=new Map,i=new Map;e.value.forEach(e=>{r.set(e.id,[]),i.set(e.id,0)}),t.value.forEach(e=>{r.get(e.source)?.push(e.target),i.set(e.target,(i.get(e.target)||0)+1)});let a=[];i.forEach((e,t)=>{e===0&&a.push(t)});let o=[],s=new Set;for(;a.length>0;){let e=a.shift();if(s.has(e))continue;s.add(e);let t=n.get(e);t&&o.push(t);let c=r.get(e)||[];for(let e of c){let t=(i.get(e)||1)-1;i.set(e,t),t<=0&&!s.has(e)&&a.push(e)}}return e.value.forEach(e=>{s.has(e.id)||o.push(e)}),o},c=()=>s().map((e,t)=>{let n=St[e.type||`start`]||St.start;return{order:t+1,node:e,nodeTypeLabel:n.label,icon:n.icon,colorClass:n.colorClass,details:o(e)}}),l=()=>{let n={totalNodes:e.value.length,approvalNodes:0,copyNodes:0,conditionNodes:0,totalEdges:t.value.length};return e.value.forEach(e=>{e.type===`approval`?n.approvalNodes++:e.type===`copy`?n.copyNodes++:e.type===`condition`&&n.conditionNodes++}),n};return{showPreview:n,previewSteps:r,previewStats:i,openPreview:()=>{r.value=c(),i.value=l(),n.value=!0},closePreview:()=>{n.value=!1}}}const Et={class:`approval-workflow-container`},Dt={class:`floating-toolbar`},Ot={class:`add-menu-content`},kt=[`onClick`],At={class:`menu-text`},jt={key:0,class:`validation-success`},Mt={class:`success-icon`},Nt={key:1,class:`validation-errors`},Pt={class:`error-summary`},Ft={class:`error-icon`},It={class:`error-list`},Lt={class:`error-header`},Rt={class:`error-number`},zt={class:`error-info`},Bt={class:`error-node`},Vt={class:`error-field`},Ht={class:`error-message`},Ut={class:`error-actions`},Wt={class:`validation-footer`},Gt={class:`preview-stats`},Kt={class:`stat-item`},qt={class:`stat-value`},Jt={class:`stat-item approval`},Yt={class:`stat-value`},Xt={class:`stat-item copy`},Zt={class:`stat-value`},Qt={class:`stat-item condition`},$t={class:`stat-value`},en={class:`stat-item edge`},tn={class:`stat-value`},nn={class:`preview-timeline`},rn={class:`step-connector`},an={class:`step-dot`},on={key:0,class:`step-line`},sn={class:`step-content`},cn={class:`step-header`},ln={class:`step-order`},un={class:`step-type-badge`},dn={class:`step-title`},fn={key:0,class:`step-details`},pn={class:`detail-label`},mn={class:`warning-text`},hn={key:0,class:`preview-empty`},gn={class:`preview-footer`};var _n=n(m({name:`C_WorkFlow`,__name:`index`,props:{users:{default:()=>[]},roles:{default:()=>[]},departments:{default:()=>[]},modelValue:{},readonly:{type:Boolean,default:!1},theme:{default:`light`}},emits:[`update:modelValue`,`change`,`node-click`,`edge-click`,`save`,`validate-error`],setup(n,{expose:r,emit:i}){let s=n,m=i,h=e(),_=T(),{nodes:v,edges:x,showAddMenu:S,menuPosition:w,showNodeConfig:k,currentNode:M,nodeTypes:P,workflowStats:L,addNode:te,onNodeClick:ne,closeAddMenu:re,handleConfigSave:R,resetNodes:ie,getCurrentWorkflowData:z,fitView:se,deleteNode:ce}=bt(s,m,_),{validationErrors:V,showValidationErrors:H,validateWorkflow:U,validateCurrentWorkflow:W,jumpToErrorNode:G,getFieldDisplayName:K,getErrorTypeText:q,resetValidation:J}=xt(v,x,_,{onShowNodeConfig:e=>{s.readonly||(M.value=e,k.value=!0)},onValidateError:e=>m(`validate-error`,e)}),{showPreview:Y,previewSteps:X,previewStats:Z,openPreview:le,closePreview:ue}=Tt(v,x),Q=()=>{if(s.readonly)return;let e=U();if(e.length>0){h.error(`工作流验证失败: ${e[0].message}`),H.value=!0;return}m(`save`,z()),h.success(`工作流保存成功`)},de=()=>{le()},fe=()=>{ue(),Q()},pe=()=>{s.readonly||(ie(),J())};return r({validateWorkflow:U,getCurrentWorkflowData:z,saveWorkflow:Q,previewWorkflow:de,deleteNode:ce,stats:L}),(e,r)=>(C(),u(`div`,Et,[l(` 浮动工具栏 `),d(`div`,Dt,[p(O(N),{size:`small`,type:`primary`,disabled:n.readonly,onClick:Q},{icon:A(()=>[p(O(t),{name:`mdi:content-save`,size:16})]),default:A(()=>[r[7]||=f(` 保存 `,-1)]),_:1},8,[`disabled`]),p(O(N),{size:`small`,onClick:de},{icon:A(()=>[p(O(t),{name:`mdi:eye`,size:16})]),default:A(()=>[r[8]||=f(` 预览 `,-1)]),_:1}),p(O(N),{size:`small`,onClick:O(W),title:`检查工作流配置是否正确`},{icon:A(()=>[p(O(t),{name:`mdi:check-circle`,size:16})]),default:A(()=>[r[9]||=f(` 验证流程 `,-1)]),_:1},8,[`onClick`]),r[10]||=d(`div`,{class:`toolbar-divider`},null,-1),p(O(N),{size:`small`,onClick:O(se),title:`适应窗口`},{icon:A(()=>[p(O(t),{name:`mdi:fit-to-screen`,size:16})]),_:1},8,[`onClick`]),p(O(N),{size:`small`,type:`error`,disabled:n.readonly,onClick:pe,title:`清空画布`},{icon:A(()=>[p(O(t),{name:`mdi:delete-sweep`,size:16})]),_:1},8,[`disabled`])]),l(` Vue Flow 画布 `),p(O(B),{ref_key:`vueFlowRef`,ref:_,nodes:O(v),"onUpdate:nodes":r[0]||=e=>g(v)?v.value=e:null,edges:O(x),"onUpdate:edges":r[1]||=e=>g(x)?x.value=e:null,"node-types":O(P),class:`workflow-canvas`,"default-viewport":{zoom:1,x:0,y:0},"min-zoom":.5,"max-zoom":2,"fit-view-on-init":!0,"nodes-draggable":!n.readonly,"nodes-connectable":!n.readonly,"edges-updatable":!n.readonly,"delete-key-code":n.readonly?null:void 0,"elements-selectable":!0,onNodeClick:O(ne),onPaneClick:O(re)},null,8,[`nodes`,`edges`,`node-types`,`nodes-draggable`,`nodes-connectable`,`edges-updatable`,`delete-key-code`,`onNodeClick`,`onPaneClick`]),l(` 节点添加菜单 `),(C(),c(o,{to:`body`},[j(d(`div`,{class:`add-node-menu`,style:b({left:O(w).x+`px`,top:O(w).y+`px`})},[d(`div`,Ot,[(C(!0),u(a,null,E(O(oe),e=>(C(),u(`button`,{key:e.type,type:`button`,class:`add-menu-item`,onClick:t=>O(te)(e.type)},[d(`div`,{class:y([`menu-icon`,e.iconClass])},[p(O(t),{name:e.icon,size:16},null,8,[`name`])],2),d(`span`,At,D(e.label),1)],8,kt))),128))])],4),[[ee,O(S)]])])),l(` 节点配置弹窗 - 拆分到独立组件 `),p(Oe,{show:O(k),"onUpdate:show":r[2]||=e=>g(k)?k.value=e:null,"current-node":O(M),users:n.users,departments:n.departments,onSave:O(R),onCancel:r[3]||=e=>k.value=!1},null,8,[`show`,`current-node`,`users`,`departments`,`onSave`]),l(` 验证错误日志抽屉 `),p(O(F),{show:O(H),"onUpdate:show":r[5]||=e=>g(H)?H.value=e:null,width:450,placement:`right`},{default:A(()=>[p(O(I),{title:`流程验证结果`,closable:``},{footer:A(()=>[d(`div`,Wt,[p(O(N),{onClick:r[4]||=e=>H.value=!1},{default:A(()=>[...r[16]||=[f(`关闭`,-1)]]),_:1}),p(O(N),{type:`primary`,onClick:O(W)},{icon:A(()=>[p(O(t),{name:`mdi:refresh`,size:16})]),default:A(()=>[r[17]||=f(` 重新验证 `,-1)]),_:1},8,[`onClick`])])]),default:A(()=>[O(V).length===0?(C(),u(`div`,jt,[d(`div`,Mt,[p(O(t),{name:`mdi:check-circle`,size:32,color:`#52c41a`})]),r[11]||=d(`h3`,null,`验证通过`,-1),r[12]||=d(`p`,null,`工作流配置正确,所有节点都已正确设置!`,-1)])):(C(),u(`div`,Nt,[d(`div`,Pt,[d(`div`,Ft,[p(O(t),{name:`mdi:alert-circle`,size:24,color:`#ff4d4f`})]),d(`h3`,null,`发现 `+D(O(V).length)+` 个问题`,1),r[13]||=d(`p`,null,`请修复以下问题后重新验证:`,-1)]),d(`div`,It,[(C(!0),u(a,null,E(O(V),(e,n)=>(C(),u(`div`,{key:e.nodeId,class:`error-item`},[d(`div`,Lt,[d(`span`,Rt,D(n+1),1),d(`div`,zt,[d(`strong`,Bt,D(e.nodeName),1),d(`span`,Vt,D(O(K)(e.field)),1)]),d(`div`,{class:y([`error-type`,e.type])},D(O(q)(e.type)),3)]),d(`div`,Ht,D(e.message),1),d(`div`,Ut,[p(O(N),{size:`small`,type:`primary`,onClick:t=>O(G)(e.nodeId)},{icon:A(()=>[p(O(t),{name:`mdi:target`,size:16})]),default:A(()=>[r[14]||=f(` 定位节点 `,-1)]),_:1},8,[`onClick`])])]))),128))]),r[15]||=d(`div`,{class:`validation-tips`},[d(`h4`,null,`💡 常见问题解决方案:`),d(`ul`,null,[d(`li`,null,[d(`strong`,null,`审批人未设置:`),f(`点击审批节点,在弹窗中选择审批人员 `)]),d(`li`,null,[d(`strong`,null,`条件分支未配置:`),f(`点击条件节点,添加至少一个条件分支 `)]),d(`li`,null,[d(`strong`,null,`节点连接断开:`),f(` 检查节点之间的连线是否正确 `)])])],-1)]))]),_:1})]),_:1},8,[`show`]),l(` 流程预览抽屉 `),p(O(F),{show:O(Y),"onUpdate:show":r[6]||=e=>g(Y)?Y.value=e:null,width:520,placement:`right`},{default:A(()=>[p(O(I),{title:`流程预览`,closable:``},{footer:A(()=>[d(`div`,gn,[p(O(N),{onClick:O(ue)},{default:A(()=>[...r[24]||=[f(`关闭`,-1)]]),_:1},8,[`onClick`]),p(O(N),{type:`primary`,onClick:fe},{icon:A(()=>[p(O(t),{name:`mdi:content-save`,size:16})]),default:A(()=>[r[25]||=f(` 确认并保存 `,-1)]),_:1})])]),default:A(()=>[d(`div`,Gt,[d(`div`,Kt,[d(`span`,qt,D(O(Z).totalNodes),1),r[18]||=d(`span`,{class:`stat-label`},`总节点`,-1)]),d(`div`,Jt,[d(`span`,Yt,D(O(Z).approvalNodes),1),r[19]||=d(`span`,{class:`stat-label`},`审批`,-1)]),d(`div`,Xt,[d(`span`,Zt,D(O(Z).copyNodes),1),r[20]||=d(`span`,{class:`stat-label`},`抄送`,-1)]),d(`div`,Qt,[d(`span`,$t,D(O(Z).conditionNodes),1),r[21]||=d(`span`,{class:`stat-label`},`条件`,-1)]),d(`div`,en,[d(`span`,tn,D(O(Z).totalEdges),1),r[22]||=d(`span`,{class:`stat-label`},`连线`,-1)])]),d(`div`,nn,[(C(!0),u(a,null,E(O(X),(e,n)=>(C(),u(`div`,{key:e.node.id,class:y([`preview-step`,e.colorClass])},[l(` 时间线连接线 `),d(`div`,rn,[d(`div`,an,[p(O(t),{name:e.icon,size:16},null,8,[`name`])]),n<O(X).length-1?(C(),u(`div`,on)):l(`v-if`,!0)]),l(` 步骤内容 `),d(`div`,sn,[d(`div`,cn,[d(`span`,ln,`步骤 `+D(e.order),1),d(`span`,un,D(e.nodeTypeLabel),1)]),d(`div`,dn,D(e.node.data.title),1),e.details.length>0?(C(),u(`div`,fn,[(C(!0),u(a,null,E(e.details,(e,n)=>(C(),u(`div`,{key:n,class:y([`step-detail-item`,{"is-warning":e.type===`warning`}])},[d(`span`,pn,D(e.label)+`:`,1),l(` 审批方式 badge `),e.type===`mode`?(C(),u(`span`,{key:0,class:y([`mode-badge`,e.modeKey])},D(e.value),3)):e.type===`users`?(C(),u(a,{key:1},[l(` 人员 tags `),(C(!0),u(a,null,E(e.users,e=>(C(),c(O(ae),{key:e.name,size:`small`,bordered:!1,round:``,class:`user-tag`},{icon:A(()=>[p(O(t),{name:`mdi:account`,size:12})]),default:A(()=>[f(` `+D(e.name),1)]),_:2},1024))),128))],64)):e.type===`warning`?(C(),u(a,{key:2},[l(` 警告文案 `),d(`span`,mn,` ⚠️ `+D(e.value),1)],2112)):(C(),u(a,{key:3},[l(` 普通文本 `),d(`span`,null,D(e.value),1)],2112))],2))),128))])):l(`v-if`,!0)])],2))),128))]),O(X).length===0?(C(),u(`div`,hn,[p(O(t),{name:`mdi:file-document-outline`,size:48,color:`#d1d5db`}),r[23]||=d(`p`,null,`暂无流程节点`,-1)])):l(`v-if`,!0)]),_:1})]),_:1},8,[`show`])]))}}),[[`__scopeId`,`data-v-ffd6fa87`]]);export{bt as i,Tt as n,xt as r,_n as t};
|
package/dist/Card.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`),n=require(`./data.cjs`);let r=require(`vue`),i=require(`naive-ui`);const a={class:`c-form-card`},o={class:`flex items-center gap-2`},s={class:`config-controls`},c={class:`config-item`},l={class:`flex items-center gap-2`},u={class:`text-xs min-w-12`},d={class:`config-item`},f={class:`config-item`},p={class:`config-item`},m={class:`flex items-center gap-3`},h={class:`card-header`},g={class:`header-info`},_={class:`header-text`},v={key:0},y={class:`header-actions`},b={class:`field-stats`},x={class:`card-content`},S={key:0,class:`progress-section`},ee={class:`action-content`},te={class:`status-summary`},C={class:`status-item`},w={class:`progress-display`},T={class:`text-sm min-w-12`},E={class:`action-buttons`},D=(0,r.defineComponent)({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},formData:{default:()=>({})}},setup(t){let D=t,O=(0,r.ref)(20),k=(0,r.ref)(!0),A=(0,r.ref)(!0),j=(0,r.ref)(!0),M=(0,r.ref)(`vertical`),N=(0,r.ref)({}),P=(0,r.computed)(()=>D.layoutConfig?.card?.groups||[]),F=(0,r.computed)(()=>P.value.length>0),I=(0,r.computed)(()=>D.layoutConfig?.card?.showLayoutConfig??!0),L=(0,r.computed)(()=>D.layoutConfig?.card?.showActionPanel??!0),R=(0,r.computed)(()=>F.value?`layout-${M.value}`:`layout-single`),z=(0,r.computed)(()=>{if(!F.value)return[];let e=new Map;return P.value.forEach(t=>{e.set(t.key,[])}),D.formItems.forEach((t,n)=>{let r=(D.options?.[n])?.layout?.group||P.value[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),P.value.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),B=(0,r.computed)(()=>{let e=Object.keys(N.value);return e.length>0&&e.every(e=>N.value[e])}),V=(0,r.computed)(()=>{if(!D.options||D.options.length===0)return 0;let e=D.options.filter(e=>H(n.r(D.formData,e.prop))).length;return Math.round(e/D.options.length*100)}),H=e=>e==null?!1:Array.isArray(e)?e.length>0:typeof e==`string`?e.trim()!==``:!0,U=e=>D.options?D.options.filter(t=>t.layout?.group===e.config.key).filter(e=>H(n.r(D.formData,e.prop))).length:0,W=e=>{if(e.items.length===0)return 0;let t=U(e);return Math.round(t/e.items.length*100)},G=e=>{let t={basic:`mdi:account`,contact:`mdi:phone`,preferences:`mdi:cog`,settings:`mdi:cog`,info:`mdi:information`,default:`mdi:form-select`};return t[e]||t.default},K=e=>{N.value[e]=!N.value[e]},q=()=>{let e=!B.value;P.value.forEach(t=>{N.value[t.key]=e})};return(0,r.onMounted)(()=>{let e=D.layoutConfig?.card;e?.spacing!==void 0&&(O.value=e.spacing),e?.direction&&(M.value=e.direction),e?.showProgress!==void 0&&(j.value=e.showProgress),P.value.forEach(e=>{N.value[e.key]=e.collapsed??e.defaultExpanded===!1})}),(n,D)=>{let P=i.NSlider,H=i.NSwitch,J=i.NRadio,Y=i.NRadioGroup,X=i.NCard,Z=i.NBadge,Q=i.NButton,$=i.NProgress;return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createCommentVNode)(` 布局配置面板 `),F.value&&I.value?((0,r.openBlock)(),(0,r.createBlock)(X,{key:0,class:`layout-config-panel`,bordered:!1},{header:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,o,[(0,r.createVNode)(e.t,{name:`mdi:cog`,size:18}),D[4]||=(0,r.createElementVNode)(`span`,null,`布局配置`,-1)])]),default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,s,[(0,r.createElementVNode)(`div`,c,[D[5]||=(0,r.createElementVNode)(`span`,null,`卡片间距`,-1),(0,r.createElementVNode)(`div`,l,[(0,r.createVNode)(P,{value:O.value,"onUpdate:value":D[0]||=e=>O.value=e,min:12,max:32,step:4,class:`w-24`},null,8,[`value`]),(0,r.createElementVNode)(`span`,u,(0,r.toDisplayString)(O.value)+`px`,1)])]),(0,r.createElementVNode)(`div`,d,[D[6]||=(0,r.createElementVNode)(`span`,null,`显示图标`,-1),(0,r.createVNode)(H,{value:k.value,"onUpdate:value":D[1]||=e=>k.value=e,size
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`),n=require(`./data.cjs`);let r=require(`vue`),i=require(`naive-ui`);const a={class:`c-form-card`},o={class:`flex items-center gap-2`},s={class:`config-controls`},c={class:`config-item`},l={class:`flex items-center gap-2`},u={class:`text-xs min-w-12`},d={class:`config-item`},f={class:`config-item`},p={class:`config-item`},m={class:`flex items-center gap-3`},h={class:`card-header`},g={class:`header-info`},_={class:`header-text`},v={key:0},y={class:`header-actions`},b={class:`field-stats`},x={class:`card-content`},S={key:0,class:`progress-section`},ee={class:`action-content`},te={class:`status-summary`},C={class:`status-item`},w={class:`progress-display`},T={class:`text-sm min-w-12`},E={class:`action-buttons`},D=(0,r.defineComponent)({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},formData:{default:()=>({})}},setup(t){let D=t,O=(0,r.ref)(20),k=(0,r.ref)(!0),A=(0,r.ref)(!0),j=(0,r.ref)(!0),M=(0,r.ref)(`vertical`),N=(0,r.ref)({});(0,r.watch)(()=>D.layoutConfig?.card?.spacing,e=>{O.value=e??20},{immediate:!0});let P=(0,r.computed)(()=>D.layoutConfig?.card?.groups||[]),F=(0,r.computed)(()=>P.value.length>0),I=(0,r.computed)(()=>D.layoutConfig?.card?.showLayoutConfig??!0),L=(0,r.computed)(()=>D.layoutConfig?.card?.showActionPanel??!0),R=(0,r.computed)(()=>F.value?`layout-${M.value}`:`layout-single`),z=(0,r.computed)(()=>{if(!F.value)return[];let e=new Map;return P.value.forEach(t=>{e.set(t.key,[])}),D.formItems.forEach((t,n)=>{let r=(D.options?.[n])?.layout?.group||P.value[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),P.value.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),B=(0,r.computed)(()=>{let e=Object.keys(N.value);return e.length>0&&e.every(e=>N.value[e])}),V=(0,r.computed)(()=>{if(!D.options||D.options.length===0)return 0;let e=D.options.filter(e=>H(n.r(D.formData,e.prop))).length;return Math.round(e/D.options.length*100)}),H=e=>e==null?!1:Array.isArray(e)?e.length>0:typeof e==`string`?e.trim()!==``:!0,U=e=>D.options?D.options.filter(t=>t.layout?.group===e.config.key).filter(e=>H(n.r(D.formData,e.prop))).length:0,W=e=>{if(e.items.length===0)return 0;let t=U(e);return Math.round(t/e.items.length*100)},G=e=>{let t={basic:`mdi:account`,contact:`mdi:phone`,preferences:`mdi:cog`,settings:`mdi:cog`,info:`mdi:information`,default:`mdi:form-select`};return t[e]||t.default},K=e=>{N.value[e]=!N.value[e]},q=()=>{let e=!B.value;P.value.forEach(t=>{N.value[t.key]=e})};return(0,r.onMounted)(()=>{let e=D.layoutConfig?.card;e?.spacing!==void 0&&(O.value=e.spacing),e?.direction&&(M.value=e.direction),e?.showProgress!==void 0&&(j.value=e.showProgress),P.value.forEach(e=>{N.value[e.key]=e.collapsed??e.defaultExpanded===!1})}),(n,D)=>{let P=i.NSlider,H=i.NSwitch,J=i.NRadio,Y=i.NRadioGroup,X=i.NCard,Z=i.NBadge,Q=i.NButton,$=i.NProgress;return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createCommentVNode)(` 布局配置面板 `),F.value&&I.value?((0,r.openBlock)(),(0,r.createBlock)(X,{key:0,class:`layout-config-panel`,bordered:!1},{header:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,o,[(0,r.createVNode)(e.t,{name:`mdi:cog`,size:18}),D[4]||=(0,r.createElementVNode)(`span`,null,`布局配置`,-1)])]),default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,s,[(0,r.createElementVNode)(`div`,c,[D[5]||=(0,r.createElementVNode)(`span`,null,`卡片间距`,-1),(0,r.createElementVNode)(`div`,l,[(0,r.createVNode)(P,{value:O.value,"onUpdate:value":D[0]||=e=>O.value=e,min:12,max:32,step:4,class:`w-24`},null,8,[`value`]),(0,r.createElementVNode)(`span`,u,(0,r.toDisplayString)(O.value)+`px`,1)])]),(0,r.createElementVNode)(`div`,d,[D[6]||=(0,r.createElementVNode)(`span`,null,`显示图标`,-1),(0,r.createVNode)(H,{value:k.value,"onUpdate:value":D[1]||=e=>k.value=e,size:t.controlSize??`small`},null,8,[`value`,`size`])]),(0,r.createElementVNode)(`div`,f,[D[7]||=(0,r.createElementVNode)(`span`,null,`可折叠`,-1),(0,r.createVNode)(H,{value:A.value,"onUpdate:value":D[2]||=e=>A.value=e,size:t.controlSize??`small`},null,8,[`value`,`size`])]),(0,r.createElementVNode)(`div`,p,[D[10]||=(0,r.createElementVNode)(`span`,null,`布局方向`,-1),(0,r.createVNode)(Y,{value:M.value,"onUpdate:value":D[3]||=e=>M.value=e,size:t.controlSize??`small`},{default:(0,r.withCtx)(()=>[(0,r.createVNode)(J,{value:`vertical`},{default:(0,r.withCtx)(()=>[...D[8]||=[(0,r.createTextVNode)(`垂直`,-1)]]),_:1}),(0,r.createVNode)(J,{value:`horizontal`},{default:(0,r.withCtx)(()=>[...D[9]||=[(0,r.createTextVNode)(`水平`,-1)]]),_:1})]),_:1},8,[`value`,`size`])])])]),_:1})):(0,r.createCommentVNode)(`v-if`,!0),(0,r.createCommentVNode)(` 表单内容区域 `),(0,r.createElementVNode)(`div`,{class:(0,r.normalizeClass)([`form-content`,R.value]),style:(0,r.normalizeStyle)({gap:`${O.value}px`})},[(0,r.createCommentVNode)(` 无分组时的单卡片模式 `),F.value?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:1},[(0,r.createCommentVNode)(` 有分组时的多卡片模式 `),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(z.value,n=>((0,r.openBlock)(),(0,r.createBlock)(X,{key:n.config.key,class:(0,r.normalizeClass)([`group-card`,[`${n.config.key}-card`,{collapsed:A.value&&N.value[n.config.key]}]]),bordered:t.layoutConfig.card?.bordered,hoverable:``},{header:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,h,[(0,r.createElementVNode)(`div`,g,[k.value&&n.config.icon?((0,r.openBlock)(),(0,r.createBlock)(e.t,{key:0,name:n.config.icon,size:20,class:`card-icon`},null,8,[`name`])):k.value?((0,r.openBlock)(),(0,r.createBlock)(e.t,{key:1,name:G(n.config.key),size:20,class:`card-icon`},null,8,[`name`])):(0,r.createCommentVNode)(`v-if`,!0),(0,r.createElementVNode)(`div`,_,[(0,r.createElementVNode)(`h3`,null,(0,r.toDisplayString)(n.config.title),1),n.config.description?((0,r.openBlock)(),(0,r.createElementBlock)(`p`,v,(0,r.toDisplayString)(n.config.description),1)):(0,r.createCommentVNode)(`v-if`,!0)])]),(0,r.createElementVNode)(`div`,y,[(0,r.createCommentVNode)(` 统计信息 `),(0,r.createElementVNode)(`div`,b,[(0,r.createVNode)(Z,{value:n.items.length,type:`info`,"show-zero":``},null,8,[`value`]),(0,r.createVNode)(Z,{value:`${U(n)}/${n.items.length}`,type:U(n)===n.items.length?`success`:`warning`},null,8,[`value`,`type`])]),(0,r.createCommentVNode)(` 折叠按钮 `),A.value?((0,r.openBlock)(),(0,r.createBlock)(Q,{key:0,quaternary:``,circle:``,size:t.controlSize??`small`,onClick:e=>K(n.config.key)},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:N.value[n.config.key]?`mdi:chevron-down`:`mdi:chevron-up`,size:18},null,8,[`name`])]),_:2},1032,[`size`,`onClick`])):(0,r.createCommentVNode)(`v-if`,!0)])])]),default:(0,r.withCtx)(()=>[(0,r.withDirectives)((0,r.createElementVNode)(`div`,x,[(0,r.createCommentVNode)(` 进度指示器 `),j.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,S,[(0,r.createVNode)($,{percentage:W(n),color:W(n)===100?`#52c41a`:`#1890ff`,"show-indicator":!1,class:`mb-4`},null,8,[`percentage`,`color`])])):(0,r.createCommentVNode)(`v-if`,!0),(0,r.createCommentVNode)(` 表单项 `),((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(n.items,(e,t)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(e),{key:e.key??t}))),128))],512),[[r.vShow,!N.value[n.config.key]]])]),_:2},1032,[`bordered`,`class`]))),128))],64)):((0,r.openBlock)(),(0,r.createBlock)(X,{key:0,class:`single-card`,bordered:t.layoutConfig.card?.bordered,hoverable:``},{header:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,m,[k.value?((0,r.openBlock)(),(0,r.createBlock)(e.t,{key:0,name:`mdi:form-select`,size:18,style:{color:`#3b82f6`}})):(0,r.createCommentVNode)(`v-if`,!0),D[11]||=(0,r.createElementVNode)(`span`,null,`表单信息`,-1)])]),default:(0,r.withCtx)(()=>[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.formItems,(e,t)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(e),{key:e.key??t}))),128))]),_:1},8,[`bordered`]))],6),(0,r.createCommentVNode)(` 统一操作面板 `),F.value&&L.value?((0,r.openBlock)(),(0,r.createBlock)(X,{key:1,class:`action-panel`,bordered:!1},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,ee,[(0,r.createElementVNode)(`div`,te,[(0,r.createElementVNode)(`div`,C,[D[12]||=(0,r.createElementVNode)(`span`,{class:`label`},`完成进度:`,-1),(0,r.createElementVNode)(`div`,w,[(0,r.createVNode)($,{percentage:V.value,"show-indicator":!1,color:V.value===100?`#52c41a`:`#1890ff`,class:`flex-1`},null,8,[`percentage`,`color`]),(0,r.createElementVNode)(`span`,T,(0,r.toDisplayString)(V.value)+`%`,1)])])]),(0,r.createElementVNode)(`div`,E,[A.value?((0,r.openBlock)(),(0,r.createBlock)(Q,{key:0,size:t.controlSize,onClick:q},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:B.value?`mdi:unfold-more-horizontal`:`mdi:unfold-less-horizontal`,size:18},null,8,[`name`])]),default:(0,r.withCtx)(()=>[(0,r.createTextVNode)(` `+(0,r.toDisplayString)(B.value?`展开全部`:`折叠全部`),1)]),_:1},8,[`size`])):(0,r.createCommentVNode)(`v-if`,!0)])])]),_:1})):(0,r.createCommentVNode)(`v-if`,!0)])}}});var O=t.t(D,[[`__scopeId`,`data-v-7818d397`]]);exports.default=O;
|
package/dist/Card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{r as n}from"./data.js";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,normalizeStyle as ee,onMounted as p,openBlock as m,ref as h,renderList as g,resolveComponent as _,resolveDynamicComponent as v,toDisplayString as y,vShow as te,
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{r as n}from"./data.js";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,normalizeStyle as ee,onMounted as p,openBlock as m,ref as h,renderList as g,resolveComponent as _,resolveDynamicComponent as v,toDisplayString as y,vShow as te,watch as b,withCtx as x,withDirectives as ne}from"vue";import{NBadge as re,NButton as ie,NCard as ae,NProgress as oe,NRadio as se,NRadioGroup as S,NSlider as ce,NSwitch as le}from"naive-ui";const ue={class:`c-form-card`},de={class:`flex items-center gap-2`},fe={class:`config-controls`},pe={class:`config-item`},me={class:`flex items-center gap-2`},C={class:`text-xs min-w-12`},w={class:`config-item`},T={class:`config-item`},E={class:`config-item`},D={class:`flex items-center gap-3`},O={class:`card-header`},k={class:`header-info`},A={class:`header-text`},j={key:0},M={class:`header-actions`},N={class:`field-stats`},P={class:`card-content`},F={key:0,class:`progress-section`},I={class:`action-content`},L={class:`status-summary`},R={class:`status-item`},z={class:`progress-display`},he={class:`text-sm min-w-12`},ge={class:`action-buttons`};var B=t(d({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},formData:{default:()=>({})}},setup(t){let d=t,_=h(20),B=h(!0),V=h(!0),H=h(!0),U=h(`vertical`),W=h({});b(()=>d.layoutConfig?.card?.spacing,e=>{_.value=e??20},{immediate:!0});let G=i(()=>d.layoutConfig?.card?.groups||[]),K=i(()=>G.value.length>0),_e=i(()=>d.layoutConfig?.card?.showLayoutConfig??!0),ve=i(()=>d.layoutConfig?.card?.showActionPanel??!0),ye=i(()=>K.value?`layout-${U.value}`:`layout-single`),be=i(()=>{if(!K.value)return[];let e=new Map;return G.value.forEach(t=>{e.set(t.key,[])}),d.formItems.forEach((t,n)=>{let r=(d.options?.[n])?.layout?.group||G.value[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),G.value.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),q=i(()=>{let e=Object.keys(W.value);return e.length>0&&e.every(e=>W.value[e])}),J=i(()=>{if(!d.options||d.options.length===0)return 0;let e=d.options.filter(e=>Y(n(d.formData,e.prop))).length;return Math.round(e/d.options.length*100)}),Y=e=>e==null?!1:Array.isArray(e)?e.length>0:typeof e==`string`?e.trim()!==``:!0,X=e=>d.options?d.options.filter(t=>t.layout?.group===e.config.key).filter(e=>Y(n(d.formData,e.prop))).length:0,Z=e=>{if(e.items.length===0)return 0;let t=X(e);return Math.round(t/e.items.length*100)},xe=e=>{let t={basic:`mdi:account`,contact:`mdi:phone`,preferences:`mdi:cog`,settings:`mdi:cog`,info:`mdi:information`,default:`mdi:form-select`};return t[e]||t.default},Se=e=>{W.value[e]=!W.value[e]},Ce=()=>{let e=!q.value;G.value.forEach(t=>{W.value[t.key]=e})};return p(()=>{let e=d.layoutConfig?.card;e?.spacing!==void 0&&(_.value=e.spacing),e?.direction&&(U.value=e.direction),e?.showProgress!==void 0&&(H.value=e.showProgress),G.value.forEach(e=>{W.value[e.key]=e.collapsed??e.defaultExpanded===!1})}),(n,i)=>{let d=ce,p=le,h=se,b=S,G=ae,Y=re,Q=ie,$=oe;return m(),s(`div`,ue,[o(` 布局配置面板 `),K.value&&_e.value?(m(),a(G,{key:0,class:`layout-config-panel`,bordered:!1},{header:x(()=>[c(`div`,de,[u(e,{name:`mdi:cog`,size:18}),i[4]||=c(`span`,null,`布局配置`,-1)])]),default:x(()=>[c(`div`,fe,[c(`div`,pe,[i[5]||=c(`span`,null,`卡片间距`,-1),c(`div`,me,[u(d,{value:_.value,"onUpdate:value":i[0]||=e=>_.value=e,min:12,max:32,step:4,class:`w-24`},null,8,[`value`]),c(`span`,C,y(_.value)+`px`,1)])]),c(`div`,w,[i[6]||=c(`span`,null,`显示图标`,-1),u(p,{value:B.value,"onUpdate:value":i[1]||=e=>B.value=e,size:t.controlSize??`small`},null,8,[`value`,`size`])]),c(`div`,T,[i[7]||=c(`span`,null,`可折叠`,-1),u(p,{value:V.value,"onUpdate:value":i[2]||=e=>V.value=e,size:t.controlSize??`small`},null,8,[`value`,`size`])]),c(`div`,E,[i[10]||=c(`span`,null,`布局方向`,-1),u(b,{value:U.value,"onUpdate:value":i[3]||=e=>U.value=e,size:t.controlSize??`small`},{default:x(()=>[u(h,{value:`vertical`},{default:x(()=>[...i[8]||=[l(`垂直`,-1)]]),_:1}),u(h,{value:`horizontal`},{default:x(()=>[...i[9]||=[l(`水平`,-1)]]),_:1})]),_:1},8,[`value`,`size`])])])]),_:1})):o(`v-if`,!0),o(` 表单内容区域 `),c(`div`,{class:f([`form-content`,ye.value]),style:ee({gap:`${_.value}px`})},[o(` 无分组时的单卡片模式 `),K.value?(m(),s(r,{key:1},[o(` 有分组时的多卡片模式 `),(m(!0),s(r,null,g(be.value,n=>(m(),a(G,{key:n.config.key,class:f([`group-card`,[`${n.config.key}-card`,{collapsed:V.value&&W.value[n.config.key]}]]),bordered:t.layoutConfig.card?.bordered,hoverable:``},{header:x(()=>[c(`div`,O,[c(`div`,k,[B.value&&n.config.icon?(m(),a(e,{key:0,name:n.config.icon,size:20,class:`card-icon`},null,8,[`name`])):B.value?(m(),a(e,{key:1,name:xe(n.config.key),size:20,class:`card-icon`},null,8,[`name`])):o(`v-if`,!0),c(`div`,A,[c(`h3`,null,y(n.config.title),1),n.config.description?(m(),s(`p`,j,y(n.config.description),1)):o(`v-if`,!0)])]),c(`div`,M,[o(` 统计信息 `),c(`div`,N,[u(Y,{value:n.items.length,type:`info`,"show-zero":``},null,8,[`value`]),u(Y,{value:`${X(n)}/${n.items.length}`,type:X(n)===n.items.length?`success`:`warning`},null,8,[`value`,`type`])]),o(` 折叠按钮 `),V.value?(m(),a(Q,{key:0,quaternary:``,circle:``,size:t.controlSize??`small`,onClick:e=>Se(n.config.key)},{icon:x(()=>[u(e,{name:W.value[n.config.key]?`mdi:chevron-down`:`mdi:chevron-up`,size:18},null,8,[`name`])]),_:2},1032,[`size`,`onClick`])):o(`v-if`,!0)])])]),default:x(()=>[ne(c(`div`,P,[o(` 进度指示器 `),H.value?(m(),s(`div`,F,[u($,{percentage:Z(n),color:Z(n)===100?`#52c41a`:`#1890ff`,"show-indicator":!1,class:`mb-4`},null,8,[`percentage`,`color`])])):o(`v-if`,!0),o(` 表单项 `),(m(!0),s(r,null,g(n.items,(e,t)=>(m(),a(v(e),{key:e.key??t}))),128))],512),[[te,!W.value[n.config.key]]])]),_:2},1032,[`bordered`,`class`]))),128))],64)):(m(),a(G,{key:0,class:`single-card`,bordered:t.layoutConfig.card?.bordered,hoverable:``},{header:x(()=>[c(`div`,D,[B.value?(m(),a(e,{key:0,name:`mdi:form-select`,size:18,style:{color:`#3b82f6`}})):o(`v-if`,!0),i[11]||=c(`span`,null,`表单信息`,-1)])]),default:x(()=>[(m(!0),s(r,null,g(t.formItems,(e,t)=>(m(),a(v(e),{key:e.key??t}))),128))]),_:1},8,[`bordered`]))],6),o(` 统一操作面板 `),K.value&&ve.value?(m(),a(G,{key:1,class:`action-panel`,bordered:!1},{default:x(()=>[c(`div`,I,[c(`div`,L,[c(`div`,R,[i[12]||=c(`span`,{class:`label`},`完成进度:`,-1),c(`div`,z,[u($,{percentage:J.value,"show-indicator":!1,color:J.value===100?`#52c41a`:`#1890ff`,class:`flex-1`},null,8,[`percentage`,`color`]),c(`span`,he,y(J.value)+`%`,1)])])]),c(`div`,ge,[V.value?(m(),a(Q,{key:0,size:t.controlSize,onClick:Ce},{icon:x(()=>[u(e,{name:q.value?`mdi:unfold-more-horizontal`:`mdi:unfold-less-horizontal`,size:18},null,8,[`name`])]),default:x(()=>[l(` `+y(q.value?`展开全部`:`折叠全部`),1)]),_:1},8,[`size`])):o(`v-if`,!0)])])]),_:1})):o(`v-if`,!0)])}}}),[[`__scopeId`,`data-v-7818d397`]]);export{B as default};
|
package/dist/Custom.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`naive-ui`),r=require(`vue-draggable-plus`);const i={class:`custom-layout`},a={class:`toolbar-content`},o={class:`mode-section`},s={class:`stats-section`},c={class:`stat-item`},l={class:`stat-value`},u={class:`stat-item`},d={class:`stat-value`},f={class:`actions-section`},p={class:`design-tools`},m={class:`tool-group`},h={key:0,class:`canvas-hint`},g={class:`areas-container`},_={class:`area-header`},v={class:`area-info`},y=[`onClick`],b={class:`area-controls`},x={class:`field-preview`},S={class:`field-label`},C={class:`field-type`},w={key:0,class:`area-drop-zone`},T={class:`field-name`},E={class:`field-type-tag`},D={key:0,class:`empty-layout`},O={key:1,class:`form-container`},k={class:`form-areas`},A=(0,t.defineComponent)({__name:`index`,props:{options:{default:()=>[]},formItems:{default:()=>[]},formData:{default:()=>({})}},emits:[`fields-change`,`export-data`],setup(e,{emit:A}){let j=e,M=A,N=(0,t.ref)(!0),P=(0,t.ref)([]),F=(0,t.ref)([]),I=(0,t.ref)(``),L=(0,t.computed)(()=>j.options?.length>0?j.options:j.formItems?.map(e=>{let t=e.props;return{prop:t?.path||``,label:t?.label||t?.path||``,type:`input`,show:!0}}).filter(e=>e.prop)||[]),R=(0,t.computed)(()=>P.value.reduce((e,t)=>e+t.fields.length,0)),z=()=>`${Date.now()}-${Math.random().toString(36).substring(2,11)}`,B=e=>({input:`输入框`,select:`下拉框`,radio:`单选框`,checkbox:`复选框`,textarea:`文本域`,date:`日期`,number:`数字`})[e]||e,V=e=>j.formItems?.find(t=>t.props?.path===e.prop)||null,H=e=>{let t={id:z(),title:`${e===`horizontal`?`水平`:e===`vertical`?`垂直`:`网格`}区域`,type:e,fields:[]};P.value.push(t)},U=e=>{let t=P.value.findIndex(t=>t.id===e);t!==-1&&P.value.splice(t,1)},W=e=>({...e,id:`${e.prop}-${z()}`}),G=(e,t)=>{let n=P.value.find(t=>t.id===e);if(n){let e=n.fields.findIndex(e=>e.id===t);e!==-1&&n.fields.splice(e,1)}},K=()=>{let e=JSON.stringify(P.value,null,2),t=new Blob([e],{type:`application/json`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`layout-config-${Date.now()}.json`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)},q=()=>{P.value=[]},J=()=>{M(`export-data`,{layout:P.value,formData:j.formData,timestamp:new Date().toISOString()})};return(0,t.watchEffect)(()=>{let e=new Set(P.value.flatMap(e=>e.fields.map(e=>e.prop)));F.value=L.value.filter(t=>!e.has(t.prop)).map(e=>({...e,id:e.prop}))}),(0,t.watch)(()=>P.value,()=>{M(`fields-change`,P.value.flatMap(e=>e.fields.map(e=>({...e,id:void 0}))))},{deep:!0}),(e,A)=>{let j=n.NButton,M=n.NButtonGroup,L=n.NCard,z=n.NInput,Y=n.NTag,X=n.NEmpty;return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,i,[(0,t.createCommentVNode)(` 顶部工具栏 `),(0,t.createVNode)(L,{bordered:!1,class:`toolbar-card`},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,a,[(0,t.createCommentVNode)(` 模式切换 `),(0,t.createElementVNode)(`div`,o,[A[12]||=(0,t.createElementVNode)(`span`,{class:`section-label`},`自定义模式:`,-1),(0,t.createVNode)(M,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)(j,{type:N.value?`primary`:`default`,onClick:A[0]||=e=>N.value=!0,size:`small`},{default:(0,t.withCtx)(()=>[...A[10]||=[(0,t.createTextVNode)(` 🎨 设计模式 `,-1)]]),_:1},8,[`type`]),(0,t.createVNode)(j,{type:N.value?`default`:`primary`,onClick:A[1]||=e=>N.value=!1,size:`small`},{default:(0,t.withCtx)(()=>[...A[11]||=[(0,t.createTextVNode)(` 📝 填写模式 `,-1)]]),_:1},8,[`type`])]),_:1})]),(0,t.createCommentVNode)(` 统计信息 `),(0,t.createElementVNode)(`div`,s,[(0,t.createElementVNode)(`div`,c,[(0,t.createElementVNode)(`div`,l,(0,t.toDisplayString)(P.value.length),1),A[13]||=(0,t.createElementVNode)(`div`,{class:`stat-label`},`自定义区域`,-1)]),(0,t.createElementVNode)(`div`,u,[(0,t.createElementVNode)(`div`,d,(0,t.toDisplayString)(R.value),1),A[14]||=(0,t.createElementVNode)(`div`,{class:`stat-label`},`字段总数`,-1)])]),(0,t.createCommentVNode)(` 操作按钮 `),(0,t.createElementVNode)(`div`,f,[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createVNode)(j,{secondary:``,onClick:K,size:`small`},{default:(0,t.withCtx)(()=>[...A[15]||=[(0,t.createTextVNode)(` 💾 保存布局 `,-1)]]),_:1}),(0,t.createVNode)(j,{secondary:``,onClick:q,size:`small`},{default:(0,t.withCtx)(()=>[...A[16]||=[(0,t.createTextVNode)(` 🔄 重置布局 `,-1)]]),_:1})],64)):((0,t.openBlock)(),(0,t.createBlock)(j,{key:1,secondary:``,onClick:J,size:`small`},{default:(0,t.withCtx)(()=>[...A[17]||=[(0,t.createTextVNode)(` 📊 导出数据 `,-1)]]),_:1}))])])]),_:1}),(0,t.createCommentVNode)(` 设计模式工具面板 `),N.value?((0,t.openBlock)(),(0,t.createBlock)(L,{key:0,class:`design-panel`,title:`🎨 设计工具`},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,p,[(0,t.createElementVNode)(`div`,m,[A[21]||=(0,t.createElementVNode)(`span`,{class:`group-label`},`添加区域:`,-1),(0,t.createVNode)(j,{onClick:A[2]||=e=>H(`horizontal`),size:`small`},{default:(0,t.withCtx)(()=>[...A[18]||=[(0,t.createTextVNode)(` ➡️ 水平区域 `,-1)]]),_:1}),(0,t.createVNode)(j,{onClick:A[3]||=e=>H(`vertical`),size:`small`},{default:(0,t.withCtx)(()=>[...A[19]||=[(0,t.createTextVNode)(` ⬇️ 垂直区域 `,-1)]]),_:1}),(0,t.createVNode)(j,{onClick:A[4]||=e=>H(`grid`),size:`small`},{default:(0,t.withCtx)(()=>[...A[20]||=[(0,t.createTextVNode)(` ⚏ 网格区域 `,-1)]]),_:1})])])]),_:1})):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createCommentVNode)(` 主画布区域 `),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`layout-canvas`,{"design-mode":N.value}])},[(0,t.createCommentVNode)(` 设计模式 `),N.value?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[P.value.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,h,[...A[22]||=[(0,t.createElementVNode)(`div`,{class:`hint-content`},[(0,t.createElementVNode)(`h3`,null,`🎨 开始自定义你的布局`),(0,t.createElementVNode)(`p`,null,`点击上方按钮添加区域`)],-1)]])):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` 区域列表 `),(0,t.createElementVNode)(`div`,g,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(P.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,class:(0,t.normalizeClass)([`custom-area`,`area-${e.type}`])},[(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`div`,v,[I.value===e.id?((0,t.openBlock)(),(0,t.createBlock)(z,{key:0,value:e.title,"onUpdate:value":t=>e.title=t,size:`small`,onBlur:A[5]||=e=>I.value=``,onKeyup:A[6]||=(0,t.withKeys)(e=>I.value=``,[`enter`]),class:`title-input`},null,8,[`value`,`onUpdate:value`])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:1,class:`area-title`,onClick:t=>I.value=e.id},(0,t.toDisplayString)(e.title),9,y)),(0,t.createVNode)(Y,{size:`small`},{default:(0,t.withCtx)(()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.fields.length)+` 字段`,1)]),_:2},1024)]),(0,t.createElementVNode)(`div`,b,[(0,t.createVNode)(j,{text:``,onClick:t=>U(e.id),size:`tiny`,type:`error`,title:`删除区域`},{default:(0,t.withCtx)(()=>[...A[23]||=[(0,t.createTextVNode)(` 🗑️ `,-1)]]),_:1},8,[`onClick`])])]),(0,t.createCommentVNode)(` 字段容器(可拖入) `),(0,t.createVNode)((0,t.unref)(r.VueDraggable),{modelValue:e.fields,"onUpdate:modelValue":t=>e.fields=t,class:`area-fields`,group:{name:`form-fields`,pull:!0,put:!0},animation:200,"ghost-class":`field-ghost`,"item-key":`id`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.fields,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n.id,class:`field-item`},[(0,t.createElementVNode)(`div`,x,[A[25]||=(0,t.createElementVNode)(`span`,{class:`drag-handle`},`⠿`,-1),(0,t.createElementVNode)(`span`,S,(0,t.toDisplayString)(n.label||n.prop),1),(0,t.createElementVNode)(`span`,C,(0,t.toDisplayString)(B(n.type)),1),(0,t.createVNode)(j,{text:``,size:`tiny`,type:`error`,onClick:t=>G(e.id,n.id),title:`移出字段`},{default:(0,t.withCtx)(()=>[...A[24]||=[(0,t.createTextVNode)(` ✕ `,-1)]]),_:1},8,[`onClick`])])]))),128))]),_:2},1032,[`modelValue`,`onUpdate:modelValue`]),e.fields.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,w,` 从下方字段池拖拽字段到这里 `)):(0,t.createCommentVNode)(`v-if`,!0)],2))),128))])],2112)),(0,t.createCommentVNode)(` 字段池(可拖出) `),(0,t.createVNode)(L,{class:`field-pool`,title:`📦 可用字段`},{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(r.VueDraggable),{modelValue:F.value,"onUpdate:modelValue":A[7]||=e=>F.value=e,class:`pool-fields-grid`,group:{name:`form-fields`,pull:`clone`,put:!0},animation:200,sort:!1,"ghost-class":`field-ghost`,"item-key":`id`,clone:W},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(F.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,class:`pool-field`},[A[26]||=(0,t.createElementVNode)(`span`,{class:`drag-handle`},`⠿`,-1),(0,t.createElementVNode)(`span`,T,(0,t.toDisplayString)(e.label||e.prop),1),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(B(e.type)),1)]))),128))]),_:1},8,[`modelValue`])]),_:1})],64)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` 填写模式 `),P.value.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,D,[(0,t.createVNode)(X,{description:`尚未设计布局`},{extra:(0,t.withCtx)(()=>[(0,t.createVNode)(j,{onClick:A[8]||=e=>N.value=!0,type:`primary`},{default:(0,t.withCtx)(()=>[...A[27]||=[(0,t.createTextVNode)(` 🎨 开始设计 `,-1)]]),_:1})]),_:1})])):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,O,[(0,t.createElementVNode)(`div`,k,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(P.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,class:(0,t.normalizeClass)([`form-area`,`area-${e.type}`])},[e.fields.length>0?((0,t.openBlock)(),(0,t.createBlock)(L,{key:0,title:e.title},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`area-form-items`,`layout-${e.type}`])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.fields,e=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(V(e)),{key:e.prop}))),128))],2)]),_:2},1032,[`title`])):((0,t.openBlock)(),(0,t.createBlock)(X,{key:1,description:`此区域暂无字段`,size:`small`},{extra:(0,t.withCtx)(()=>[(0,t.createVNode)(j,{onClick:A[9]||=e=>N.value=!0,size:`small`,secondary:``},{default:(0,t.withCtx)(()=>[...A[28]||=[(0,t.createTextVNode)(` 🎨 添加字段 `,-1)]]),_:1})]),_:1}))],2))),128))])]))],64))],2)])}}});var j=e.t(A,[[`__scopeId`,`data-v-858beb3e`]]);exports.default=j;
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`naive-ui`),r=require(`vue-draggable-plus`);const i={class:`custom-layout`},a={class:`toolbar-content`},o={class:`mode-section`},s={class:`stats-section`},c={class:`stat-item`},l={class:`stat-value`},u={class:`stat-item`},d={class:`stat-value`},f={class:`actions-section`},p={class:`design-tools`},m={class:`tool-group`},h={key:0,class:`canvas-hint`},g={class:`areas-container`},_={class:`area-header`},v={class:`area-info`},y=[`onClick`],b={class:`area-controls`},x={class:`field-preview`},S={class:`field-label`},C={class:`field-type`},w={key:0,class:`area-drop-zone`},T={class:`field-name`},E={class:`field-type-tag`},D={key:0,class:`empty-layout`},O={key:1,class:`form-container`},k={class:`form-areas`},A=(0,t.defineComponent)({__name:`index`,props:{controlSize:{},options:{default:()=>[]},formItems:{default:()=>[]},formData:{default:()=>({})}},emits:[`fields-change`,`export-data`],setup(e,{emit:A}){let j=e,M=A,N=(0,t.ref)(!0),P=(0,t.ref)([]),F=(0,t.ref)([]),I=(0,t.ref)(``),L=(0,t.computed)(()=>j.options?.length>0?j.options:j.formItems?.map(e=>{let t=e.props;return{prop:t?.path||``,label:t?.label||t?.path||``,type:`input`,show:!0}}).filter(e=>e.prop)||[]),R=(0,t.computed)(()=>P.value.reduce((e,t)=>e+t.fields.length,0)),z=()=>`${Date.now()}-${Math.random().toString(36).substring(2,11)}`,B=e=>({input:`输入框`,select:`下拉框`,radio:`单选框`,checkbox:`复选框`,textarea:`文本域`,date:`日期`,number:`数字`})[e]||e,V=e=>j.formItems?.find(t=>t.props?.path===e.prop)||null,H=e=>{let t={id:z(),title:`${e===`horizontal`?`水平`:e===`vertical`?`垂直`:`网格`}区域`,type:e,fields:[]};P.value.push(t)},U=e=>{let t=P.value.findIndex(t=>t.id===e);t!==-1&&P.value.splice(t,1)},W=e=>({...e,id:`${e.prop}-${z()}`}),G=(e,t)=>{let n=P.value.find(t=>t.id===e);if(n){let e=n.fields.findIndex(e=>e.id===t);e!==-1&&n.fields.splice(e,1)}},K=()=>{let e=JSON.stringify(P.value,null,2),t=new Blob([e],{type:`application/json`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`layout-config-${Date.now()}.json`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)},q=()=>{P.value=[]},J=()=>{M(`export-data`,{layout:P.value,formData:j.formData,timestamp:new Date().toISOString()})};return(0,t.watchEffect)(()=>{let e=new Set(P.value.flatMap(e=>e.fields.map(e=>e.prop)));F.value=L.value.filter(t=>!e.has(t.prop)).map(e=>({...e,id:e.prop}))}),(0,t.watch)(()=>P.value,()=>{M(`fields-change`,P.value.flatMap(e=>e.fields.map(e=>({...e,id:void 0}))))},{deep:!0}),(A,j)=>{let M=n.NButton,L=n.NButtonGroup,z=n.NCard,Y=n.NInput,X=n.NTag,Z=n.NEmpty;return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,i,[(0,t.createCommentVNode)(` 顶部工具栏 `),(0,t.createVNode)(z,{bordered:!1,class:`toolbar-card`},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,a,[(0,t.createCommentVNode)(` 模式切换 `),(0,t.createElementVNode)(`div`,o,[j[12]||=(0,t.createElementVNode)(`span`,{class:`section-label`},`自定义模式:`,-1),(0,t.createVNode)(L,null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)(M,{type:N.value?`primary`:`default`,onClick:j[0]||=e=>N.value=!0,size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[10]||=[(0,t.createTextVNode)(` 🎨 设计模式 `,-1)]]),_:1},8,[`type`,`size`]),(0,t.createVNode)(M,{type:N.value?`default`:`primary`,onClick:j[1]||=e=>N.value=!1,size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[11]||=[(0,t.createTextVNode)(` 📝 填写模式 `,-1)]]),_:1},8,[`type`,`size`])]),_:1})]),(0,t.createCommentVNode)(` 统计信息 `),(0,t.createElementVNode)(`div`,s,[(0,t.createElementVNode)(`div`,c,[(0,t.createElementVNode)(`div`,l,(0,t.toDisplayString)(P.value.length),1),j[13]||=(0,t.createElementVNode)(`div`,{class:`stat-label`},`自定义区域`,-1)]),(0,t.createElementVNode)(`div`,u,[(0,t.createElementVNode)(`div`,d,(0,t.toDisplayString)(R.value),1),j[14]||=(0,t.createElementVNode)(`div`,{class:`stat-label`},`字段总数`,-1)])]),(0,t.createCommentVNode)(` 操作按钮 `),(0,t.createElementVNode)(`div`,f,[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createVNode)(M,{secondary:``,onClick:K,size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[15]||=[(0,t.createTextVNode)(` 💾 保存布局 `,-1)]]),_:1},8,[`size`]),(0,t.createVNode)(M,{secondary:``,onClick:q,size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[16]||=[(0,t.createTextVNode)(` 🔄 重置布局 `,-1)]]),_:1},8,[`size`])],64)):((0,t.openBlock)(),(0,t.createBlock)(M,{key:1,secondary:``,onClick:J,size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[17]||=[(0,t.createTextVNode)(` 📊 导出数据 `,-1)]]),_:1},8,[`size`]))])])]),_:1}),(0,t.createCommentVNode)(` 设计模式工具面板 `),N.value?((0,t.openBlock)(),(0,t.createBlock)(z,{key:0,class:`design-panel`,title:`🎨 设计工具`},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,p,[(0,t.createElementVNode)(`div`,m,[j[21]||=(0,t.createElementVNode)(`span`,{class:`group-label`},`添加区域:`,-1),(0,t.createVNode)(M,{onClick:j[2]||=e=>H(`horizontal`),size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[18]||=[(0,t.createTextVNode)(` ➡️ 水平区域 `,-1)]]),_:1},8,[`size`]),(0,t.createVNode)(M,{onClick:j[3]||=e=>H(`vertical`),size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[19]||=[(0,t.createTextVNode)(` ⬇️ 垂直区域 `,-1)]]),_:1},8,[`size`]),(0,t.createVNode)(M,{onClick:j[4]||=e=>H(`grid`),size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[...j[20]||=[(0,t.createTextVNode)(` ⚏ 网格区域 `,-1)]]),_:1},8,[`size`])])])]),_:1})):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createCommentVNode)(` 主画布区域 `),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`layout-canvas`,{"design-mode":N.value}])},[(0,t.createCommentVNode)(` 设计模式 `),N.value?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[P.value.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,h,[...j[22]||=[(0,t.createElementVNode)(`div`,{class:`hint-content`},[(0,t.createElementVNode)(`h3`,null,`🎨 开始自定义你的布局`),(0,t.createElementVNode)(`p`,null,`点击上方按钮添加区域`)],-1)]])):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` 区域列表 `),(0,t.createElementVNode)(`div`,g,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(P.value,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n.id,class:(0,t.normalizeClass)([`custom-area`,`area-${n.type}`])},[(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`div`,v,[I.value===n.id?((0,t.openBlock)(),(0,t.createBlock)(Y,{key:0,value:n.title,"onUpdate:value":e=>n.title=e,size:e.controlSize??`small`,onBlur:j[5]||=e=>I.value=``,onKeyup:j[6]||=(0,t.withKeys)(e=>I.value=``,[`enter`]),class:`title-input`},null,8,[`value`,`onUpdate:value`,`size`])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:1,class:`area-title`,onClick:e=>I.value=n.id},(0,t.toDisplayString)(n.title),9,y)),(0,t.createVNode)(X,{size:e.controlSize??`small`},{default:(0,t.withCtx)(()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.fields.length)+` 字段`,1)]),_:2},1032,[`size`])]),(0,t.createElementVNode)(`div`,b,[(0,t.createVNode)(M,{text:``,onClick:e=>U(n.id),size:`tiny`,type:`error`,title:`删除区域`},{default:(0,t.withCtx)(()=>[...j[23]||=[(0,t.createTextVNode)(` 🗑️ `,-1)]]),_:1},8,[`onClick`])])]),(0,t.createCommentVNode)(` 字段容器(可拖入) `),(0,t.createVNode)((0,t.unref)(r.VueDraggable),{modelValue:n.fields,"onUpdate:modelValue":e=>n.fields=e,class:`area-fields`,group:{name:`form-fields`,pull:!0,put:!0},animation:200,"ghost-class":`field-ghost`,"item-key":`id`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(n.fields,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,class:`field-item`},[(0,t.createElementVNode)(`div`,x,[j[25]||=(0,t.createElementVNode)(`span`,{class:`drag-handle`},`⠿`,-1),(0,t.createElementVNode)(`span`,S,(0,t.toDisplayString)(e.label||e.prop),1),(0,t.createElementVNode)(`span`,C,(0,t.toDisplayString)(B(e.type)),1),(0,t.createVNode)(M,{text:``,size:`tiny`,type:`error`,onClick:t=>G(n.id,e.id),title:`移出字段`},{default:(0,t.withCtx)(()=>[...j[24]||=[(0,t.createTextVNode)(` ✕ `,-1)]]),_:1},8,[`onClick`])])]))),128))]),_:2},1032,[`modelValue`,`onUpdate:modelValue`]),n.fields.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,w,` 从下方字段池拖拽字段到这里 `)):(0,t.createCommentVNode)(`v-if`,!0)],2))),128))])],2112)),(0,t.createCommentVNode)(` 字段池(可拖出) `),(0,t.createVNode)(z,{class:`field-pool`,title:`📦 可用字段`},{default:(0,t.withCtx)(()=>[(0,t.createVNode)((0,t.unref)(r.VueDraggable),{modelValue:F.value,"onUpdate:modelValue":j[7]||=e=>F.value=e,class:`pool-fields-grid`,group:{name:`form-fields`,pull:`clone`,put:!0},animation:200,sort:!1,"ghost-class":`field-ghost`,"item-key":`id`,clone:W},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(F.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,class:`pool-field`},[j[26]||=(0,t.createElementVNode)(`span`,{class:`drag-handle`},`⠿`,-1),(0,t.createElementVNode)(`span`,T,(0,t.toDisplayString)(e.label||e.prop),1),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(B(e.type)),1)]))),128))]),_:1},8,[`modelValue`])]),_:1})],64)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createCommentVNode)(` 填写模式 `),P.value.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,D,[(0,t.createVNode)(Z,{description:`尚未设计布局`},{extra:(0,t.withCtx)(()=>[(0,t.createVNode)(M,{onClick:j[8]||=e=>N.value=!0,type:`primary`},{default:(0,t.withCtx)(()=>[...j[27]||=[(0,t.createTextVNode)(` 🎨 开始设计 `,-1)]]),_:1})]),_:1})])):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,O,[(0,t.createElementVNode)(`div`,k,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(P.value,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n.id,class:(0,t.normalizeClass)([`form-area`,`area-${n.type}`])},[n.fields.length>0?((0,t.openBlock)(),(0,t.createBlock)(z,{key:0,title:n.title},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`area-form-items`,`layout-${n.type}`])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(n.fields,e=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(V(e)),{key:e.prop}))),128))],2)]),_:2},1032,[`title`])):((0,t.openBlock)(),(0,t.createBlock)(Z,{key:1,description:`此区域暂无字段`,size:e.controlSize??`small`},{extra:(0,t.withCtx)(()=>[(0,t.createVNode)(M,{onClick:j[9]||=e=>N.value=!0,size:e.controlSize??`small`,secondary:``},{default:(0,t.withCtx)(()=>[...j[28]||=[(0,t.createTextVNode)(` 🎨 添加字段 `,-1)]]),_:1},8,[`size`])]),_:1},8,[`size`]))],2))),128))])]))],64))],2)])}}});var j=e.t(A,[[`__scopeId`,`data-v-97b155a2`]]);exports.default=j;
|
package/dist/Custom.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,normalizeClass as u,openBlock as d,ref as f,renderList as p,resolveComponent as m,resolveDynamicComponent as ee,toDisplayString as h,unref as g,watch as _,watchEffect as v,withCtx as y,withKeys as te}from"vue";import{NButton as ne,NButtonGroup as re,NCard as ie,NEmpty as ae,NInput as oe,NTag as se}from"naive-ui";import{VueDraggable as b}from"vue-draggable-plus";const ce={class:`custom-layout`},
|
|
1
|
+
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,normalizeClass as u,openBlock as d,ref as f,renderList as p,resolveComponent as m,resolveDynamicComponent as ee,toDisplayString as h,unref as g,watch as _,watchEffect as v,withCtx as y,withKeys as te}from"vue";import{NButton as ne,NButtonGroup as re,NCard as ie,NEmpty as ae,NInput as oe,NTag as se}from"naive-ui";import{VueDraggable as b}from"vue-draggable-plus";const ce={class:`custom-layout`},le={class:`toolbar-content`},x={class:`mode-section`},S={class:`stats-section`},C={class:`stat-item`},w={class:`stat-value`},T={class:`stat-item`},E={class:`stat-value`},D={class:`actions-section`},O={class:`design-tools`},k={class:`tool-group`},A={key:0,class:`canvas-hint`},j={class:`areas-container`},M={class:`area-header`},N={class:`area-info`},P=[`onClick`],F={class:`area-controls`},I={class:`field-preview`},L={class:`field-label`},R={class:`field-type`},z={key:0,class:`area-drop-zone`},B={class:`field-name`},ue={class:`field-type-tag`},V={key:0,class:`empty-layout`},H={key:1,class:`form-container`},U={class:`form-areas`};var W=e(l({__name:`index`,props:{controlSize:{},options:{default:()=>[]},formItems:{default:()=>[]},formData:{default:()=>({})}},emits:[`fields-change`,`export-data`],setup(e,{emit:l}){let m=e,W=l,G=f(!0),K=f([]),q=f([]),J=f(``),Y=n(()=>m.options?.length>0?m.options:m.formItems?.map(e=>{let t=e.props;return{prop:t?.path||``,label:t?.label||t?.path||``,type:`input`,show:!0}}).filter(e=>e.prop)||[]),de=n(()=>K.value.reduce((e,t)=>e+t.fields.length,0)),X=()=>`${Date.now()}-${Math.random().toString(36).substring(2,11)}`,Z=e=>({input:`输入框`,select:`下拉框`,radio:`单选框`,checkbox:`复选框`,textarea:`文本域`,date:`日期`,number:`数字`})[e]||e,fe=e=>m.formItems?.find(t=>t.props?.path===e.prop)||null,Q=e=>{let t={id:X(),title:`${e===`horizontal`?`水平`:e===`vertical`?`垂直`:`网格`}区域`,type:e,fields:[]};K.value.push(t)},pe=e=>{let t=K.value.findIndex(t=>t.id===e);t!==-1&&K.value.splice(t,1)},me=e=>({...e,id:`${e.prop}-${X()}`}),he=(e,t)=>{let n=K.value.find(t=>t.id===e);if(n){let e=n.fields.findIndex(e=>e.id===t);e!==-1&&n.fields.splice(e,1)}},ge=()=>{let e=JSON.stringify(K.value,null,2),t=new Blob([e],{type:`application/json`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`layout-config-${Date.now()}.json`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)},$=()=>{K.value=[]},_e=()=>{W(`export-data`,{layout:K.value,formData:m.formData,timestamp:new Date().toISOString()})};return v(()=>{let e=new Set(K.value.flatMap(e=>e.fields.map(e=>e.prop)));q.value=Y.value.filter(t=>!e.has(t.prop)).map(e=>({...e,id:e.prop}))}),_(()=>K.value,()=>{W(`fields-change`,K.value.flatMap(e=>e.fields.map(e=>({...e,id:void 0}))))},{deep:!0}),(n,l)=>{let f=ne,m=re,_=ie,v=oe,W=se,Y=ae;return d(),a(`div`,ce,[i(` 顶部工具栏 `),c(_,{bordered:!1,class:`toolbar-card`},{default:y(()=>[o(`div`,le,[i(` 模式切换 `),o(`div`,x,[l[12]||=o(`span`,{class:`section-label`},`自定义模式:`,-1),c(m,null,{default:y(()=>[c(f,{type:G.value?`primary`:`default`,onClick:l[0]||=e=>G.value=!0,size:e.controlSize??`small`},{default:y(()=>[...l[10]||=[s(` 🎨 设计模式 `,-1)]]),_:1},8,[`type`,`size`]),c(f,{type:G.value?`default`:`primary`,onClick:l[1]||=e=>G.value=!1,size:e.controlSize??`small`},{default:y(()=>[...l[11]||=[s(` 📝 填写模式 `,-1)]]),_:1},8,[`type`,`size`])]),_:1})]),i(` 统计信息 `),o(`div`,S,[o(`div`,C,[o(`div`,w,h(K.value.length),1),l[13]||=o(`div`,{class:`stat-label`},`自定义区域`,-1)]),o(`div`,T,[o(`div`,E,h(de.value),1),l[14]||=o(`div`,{class:`stat-label`},`字段总数`,-1)])]),i(` 操作按钮 `),o(`div`,D,[G.value?(d(),a(t,{key:0},[c(f,{secondary:``,onClick:ge,size:e.controlSize??`small`},{default:y(()=>[...l[15]||=[s(` 💾 保存布局 `,-1)]]),_:1},8,[`size`]),c(f,{secondary:``,onClick:$,size:e.controlSize??`small`},{default:y(()=>[...l[16]||=[s(` 🔄 重置布局 `,-1)]]),_:1},8,[`size`])],64)):(d(),r(f,{key:1,secondary:``,onClick:_e,size:e.controlSize??`small`},{default:y(()=>[...l[17]||=[s(` 📊 导出数据 `,-1)]]),_:1},8,[`size`]))])])]),_:1}),i(` 设计模式工具面板 `),G.value?(d(),r(_,{key:0,class:`design-panel`,title:`🎨 设计工具`},{default:y(()=>[o(`div`,O,[o(`div`,k,[l[21]||=o(`span`,{class:`group-label`},`添加区域:`,-1),c(f,{onClick:l[2]||=e=>Q(`horizontal`),size:e.controlSize??`small`},{default:y(()=>[...l[18]||=[s(` ➡️ 水平区域 `,-1)]]),_:1},8,[`size`]),c(f,{onClick:l[3]||=e=>Q(`vertical`),size:e.controlSize??`small`},{default:y(()=>[...l[19]||=[s(` ⬇️ 垂直区域 `,-1)]]),_:1},8,[`size`]),c(f,{onClick:l[4]||=e=>Q(`grid`),size:e.controlSize??`small`},{default:y(()=>[...l[20]||=[s(` ⚏ 网格区域 `,-1)]]),_:1},8,[`size`])])])]),_:1})):i(`v-if`,!0),i(` 主画布区域 `),o(`div`,{class:u([`layout-canvas`,{"design-mode":G.value}])},[i(` 设计模式 `),G.value?(d(),a(t,{key:0},[K.value.length===0?(d(),a(`div`,A,[...l[22]||=[o(`div`,{class:`hint-content`},[o(`h3`,null,`🎨 开始自定义你的布局`),o(`p`,null,`点击上方按钮添加区域`)],-1)]])):(d(),a(t,{key:1},[i(` 区域列表 `),o(`div`,j,[(d(!0),a(t,null,p(K.value,n=>(d(),a(`div`,{key:n.id,class:u([`custom-area`,`area-${n.type}`])},[o(`div`,M,[o(`div`,N,[J.value===n.id?(d(),r(v,{key:0,value:n.title,"onUpdate:value":e=>n.title=e,size:e.controlSize??`small`,onBlur:l[5]||=e=>J.value=``,onKeyup:l[6]||=te(e=>J.value=``,[`enter`]),class:`title-input`},null,8,[`value`,`onUpdate:value`,`size`])):(d(),a(`span`,{key:1,class:`area-title`,onClick:e=>J.value=n.id},h(n.title),9,P)),c(W,{size:e.controlSize??`small`},{default:y(()=>[s(h(n.fields.length)+` 字段`,1)]),_:2},1032,[`size`])]),o(`div`,F,[c(f,{text:``,onClick:e=>pe(n.id),size:`tiny`,type:`error`,title:`删除区域`},{default:y(()=>[...l[23]||=[s(` 🗑️ `,-1)]]),_:1},8,[`onClick`])])]),i(` 字段容器(可拖入) `),c(g(b),{modelValue:n.fields,"onUpdate:modelValue":e=>n.fields=e,class:`area-fields`,group:{name:`form-fields`,pull:!0,put:!0},animation:200,"ghost-class":`field-ghost`,"item-key":`id`},{default:y(()=>[(d(!0),a(t,null,p(n.fields,e=>(d(),a(`div`,{key:e.id,class:`field-item`},[o(`div`,I,[l[25]||=o(`span`,{class:`drag-handle`},`⠿`,-1),o(`span`,L,h(e.label||e.prop),1),o(`span`,R,h(Z(e.type)),1),c(f,{text:``,size:`tiny`,type:`error`,onClick:t=>he(n.id,e.id),title:`移出字段`},{default:y(()=>[...l[24]||=[s(` ✕ `,-1)]]),_:1},8,[`onClick`])])]))),128))]),_:2},1032,[`modelValue`,`onUpdate:modelValue`]),n.fields.length===0?(d(),a(`div`,z,` 从下方字段池拖拽字段到这里 `)):i(`v-if`,!0)],2))),128))])],2112)),i(` 字段池(可拖出) `),c(_,{class:`field-pool`,title:`📦 可用字段`},{default:y(()=>[c(g(b),{modelValue:q.value,"onUpdate:modelValue":l[7]||=e=>q.value=e,class:`pool-fields-grid`,group:{name:`form-fields`,pull:`clone`,put:!0},animation:200,sort:!1,"ghost-class":`field-ghost`,"item-key":`id`,clone:me},{default:y(()=>[(d(!0),a(t,null,p(q.value,e=>(d(),a(`div`,{key:e.id,class:`pool-field`},[l[26]||=o(`span`,{class:`drag-handle`},`⠿`,-1),o(`span`,B,h(e.label||e.prop),1),o(`span`,ue,h(Z(e.type)),1)]))),128))]),_:1},8,[`modelValue`])]),_:1})],64)):(d(),a(t,{key:1},[i(` 填写模式 `),K.value.length===0?(d(),a(`div`,V,[c(Y,{description:`尚未设计布局`},{extra:y(()=>[c(f,{onClick:l[8]||=e=>G.value=!0,type:`primary`},{default:y(()=>[...l[27]||=[s(` 🎨 开始设计 `,-1)]]),_:1})]),_:1})])):(d(),a(`div`,H,[o(`div`,U,[(d(!0),a(t,null,p(K.value,n=>(d(),a(`div`,{key:n.id,class:u([`form-area`,`area-${n.type}`])},[n.fields.length>0?(d(),r(_,{key:0,title:n.title},{default:y(()=>[o(`div`,{class:u([`area-form-items`,`layout-${n.type}`])},[(d(!0),a(t,null,p(n.fields,e=>(d(),r(ee(fe(e)),{key:e.prop}))),128))],2)]),_:2},1032,[`title`])):(d(),r(Y,{key:1,description:`此区域暂无字段`,size:e.controlSize??`small`},{extra:y(()=>[c(f,{onClick:l[9]||=e=>G.value=!0,size:e.controlSize??`small`,secondary:``},{default:y(()=>[...l[28]||=[s(` 🎨 添加字段 `,-1)]]),_:1},8,[`size`])]),_:1},8,[`size`]))],2))),128))])]))],64))],2)])}}}),[[`__scopeId`,`data-v-97b155a2`]]);export{W as default};
|
package/dist/Dynamic.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`),n=require(`./useDynamicFormState.cjs`);let r=require(`vue`),i=require(`naive-ui`);const a={class:`c-form-dynamic`},o={key:0,class:`dynamic-controls`},s={class:`max-fields-config`},c={class:`dynamic-stats`},l={class:`dynamic-controls-fallback`},u={class:`dynamic-form-items`},d=(0,r.defineComponent)({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},dynamicFormState:{default:null}},emits:[`field-add`,`field-remove`,`fields-clear`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,r.inject)(n.t,null),g=(0,r.computed)(()=>p.dynamicFormState||h),_=(0,r.computed)(()=>!!g.value),v=(0,r.computed)(()=>p.layoutConfig?.dynamic?.grid?.cols??24),y=(0,r.computed)(()=>p.layoutConfig?.dynamic?.grid?.gutter??16),b=(0,r.computed)(()=>p.layoutConfig?.dynamic?.controls?.showControls!==!1),x=(0,r.computed)(()=>g.value?.state.config.maxFields??p.layoutConfig?.dynamic?.dynamic?.maxFields??50),S=(0,r.computed)(()=>g.value?.dynamicFieldsCount.value??0),C=(0,r.computed)(()=>g.value?.canAddMoreFields.value??!1),w=(0,r.computed)(()=>p.formItems.length),T=()=>{let e=g.value?.addField();e&&m(`field-add`,e)},E=()=>{let e=g.value?.removeField();e&&m(`field-remove`,e.prop)},D=()=>{(g.value?.clearDynamicFields()??0)>0&&m(`fields-clear`)},O=e=>{e!==null&&g.value?.updateConfig({maxFields:e})},k=(e,t)=>e.key?.toString()||e.props?.path?.toString()||`dynamic-item-${t}`,A=e=>{let t=p.options?.[e]?.layout?.span;return typeof t==`number`&&t>0&&t<=v.value?t:Math.min(12,v.value)},j=e=>{if(!g.value)return!1;let t=e.props?.path?.toString()||e.key?.toString()||``;return g.value.state.dynamicFields.some(e=>e.prop===t)};return d({addField:()=>g.value?.addField(),removeField:()=>g.value?.removeField(),clearAllDynamic:()=>g.value?.clearDynamicFields(),isDynamicStateAvailable:_,dynamicState:g}),(n,d)=>{let f=i.NBadge,p=i.NButton,m=i.NSpace,h=i.NInputNumber,g=i.NTag,M=i.NCard,N=i.NAlert,P=i.NGridItem,F=i.NGrid;return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createCommentVNode)(` 动态控制面板 `),b.value&&_.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,o,[(0,r.createVNode)(M,{size
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`),n=require(`./useDynamicFormState.cjs`);let r=require(`vue`),i=require(`naive-ui`);const a={class:`c-form-dynamic`},o={key:0,class:`dynamic-controls`},s={class:`max-fields-config`},c={class:`dynamic-stats`},l={class:`dynamic-controls-fallback`},u={class:`dynamic-form-items`},d=(0,r.defineComponent)({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},dynamicFormState:{default:null}},emits:[`field-add`,`field-remove`,`fields-clear`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,r.inject)(n.t,null),g=(0,r.computed)(()=>p.dynamicFormState||h),_=(0,r.computed)(()=>!!g.value),v=(0,r.computed)(()=>p.layoutConfig?.dynamic?.grid?.cols??24),y=(0,r.computed)(()=>p.layoutConfig?.dynamic?.grid?.gutter??16),b=(0,r.computed)(()=>p.layoutConfig?.dynamic?.controls?.showControls!==!1),x=(0,r.computed)(()=>g.value?.state.config.maxFields??p.layoutConfig?.dynamic?.dynamic?.maxFields??50),S=(0,r.computed)(()=>g.value?.dynamicFieldsCount.value??0),C=(0,r.computed)(()=>g.value?.canAddMoreFields.value??!1),w=(0,r.computed)(()=>p.formItems.length),T=()=>{let e=g.value?.addField();e&&m(`field-add`,e)},E=()=>{let e=g.value?.removeField();e&&m(`field-remove`,e.prop)},D=()=>{(g.value?.clearDynamicFields()??0)>0&&m(`fields-clear`)},O=e=>{e!==null&&g.value?.updateConfig({maxFields:e})},k=(e,t)=>e.key?.toString()||e.props?.path?.toString()||`dynamic-item-${t}`,A=e=>{let t=p.options?.[e]?.layout?.span;return typeof t==`number`&&t>0&&t<=v.value?t:Math.min(12,v.value)},j=e=>{if(!g.value)return!1;let t=e.props?.path?.toString()||e.key?.toString()||``;return g.value.state.dynamicFields.some(e=>e.prop===t)};return d({addField:()=>g.value?.addField(),removeField:()=>g.value?.removeField(),clearAllDynamic:()=>g.value?.clearDynamicFields(),isDynamicStateAvailable:_,dynamicState:g}),(n,d)=>{let f=i.NBadge,p=i.NButton,m=i.NSpace,h=i.NInputNumber,g=i.NTag,M=i.NCard,N=i.NAlert,P=i.NGridItem,F=i.NGrid;return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createCommentVNode)(` 动态控制面板 `),b.value&&_.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,o,[(0,r.createVNode)(M,{size:t.controlSize??`small`,title:`动态表单控制`,bordered:!1},{"header-extra":(0,r.withCtx)(()=>[(0,r.createVNode)(f,{value:S.value,type:`warning`},{default:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:`mdi:layers`,size:16})]),_:1},8,[`value`])]),default:(0,r.withCtx)(()=>[(0,r.createVNode)(m,{justify:`space-between`,align:`center`},{default:(0,r.withCtx)(()=>[(0,r.createVNode)(m,null,{default:(0,r.withCtx)(()=>[(0,r.createVNode)(p,{size:t.controlSize??`small`,type:`primary`,disabled:!C.value,onClick:T},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:`mdi:plus`,size:14})]),default:(0,r.withCtx)(()=>[(0,r.createTextVNode)(` 添加字段 (`+(0,r.toDisplayString)(S.value)+`/`+(0,r.toDisplayString)(x.value)+`) `,1)]),_:1},8,[`size`,`disabled`]),(0,r.createVNode)(p,{size:t.controlSize??`small`,type:`warning`,disabled:S.value===0,onClick:E},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:`mdi:minus`,size:14})]),default:(0,r.withCtx)(()=>[d[0]||=(0,r.createTextVNode)(` 移除字段 `,-1)]),_:1},8,[`size`,`disabled`]),(0,r.createVNode)(p,{size:t.controlSize??`small`,type:`error`,disabled:S.value===0,onClick:D},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:`mdi:delete-sweep`,size:14})]),default:(0,r.withCtx)(()=>[d[1]||=(0,r.createTextVNode)(` 清空动态 `,-1)]),_:1},8,[`size`,`disabled`])]),_:1}),(0,r.createCommentVNode)(` 最大字段数配置 `),(0,r.createElementVNode)(`div`,s,[d[2]||=(0,r.createElementVNode)(`span`,null,`最大字段数:`,-1),(0,r.createVNode)(h,{value:x.value,"onUpdate:value":O,min:5,max:50,size:t.controlSize??`small`,style:{width:`100px`}},null,8,[`value`,`size`])])]),_:1}),(0,r.createElementVNode)(`div`,c,[(0,r.createVNode)(m,null,{default:(0,r.withCtx)(()=>[(0,r.createVNode)(g,{type:`info`},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)(`总字段: `+(0,r.toDisplayString)(w.value),1)]),_:1}),(0,r.createVNode)(g,{type:`warning`},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)(`动态: `+(0,r.toDisplayString)(S.value),1)]),_:1})]),_:1})])]),_:1},8,[`size`])])):b.value&&!_.value?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:1},[(0,r.createCommentVNode)(` 状态不可用时的提示 `),(0,r.createElementVNode)(`div`,l,[(0,r.createVNode)(M,{size:t.controlSize??`small`,title:`动态表单控制 (静态模式)`,bordered:!1},{default:(0,r.withCtx)(()=>[(0,r.createVNode)(N,{type:`info`,"show-icon":``},{icon:(0,r.withCtx)(()=>[(0,r.createVNode)(e.t,{name:`mdi:information-outline`,size:16})]),default:(0,r.withCtx)(()=>[d[3]||=(0,r.createTextVNode)(` 当前为静态模式,如需动态功能请在父组件中提供动态表单状态。 `,-1)]),_:1})]),_:1},8,[`size`])])],2112)):(0,r.createCommentVNode)(`v-if`,!0),(0,r.createCommentVNode)(` 表单项渲染区域 `),(0,r.createElementVNode)(`div`,u,[(0,r.createVNode)(F,{cols:v.value,"x-gap":y.value,"y-gap":y.value},{default:(0,r.withCtx)(()=>[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(t.formItems,(e,t)=>((0,r.openBlock)(),(0,r.createBlock)(P,{key:k(e,t),span:A(t)},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,{class:(0,r.normalizeClass)([`dynamic-item-wrapper`,{"is-dynamic-field":j(e)}])},[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(e)))],2)]),_:2},1032,[`span`]))),128))]),_:1},8,[`cols`,`x-gap`,`y-gap`])])])}}});var f=t.t(d,[[`__scopeId`,`data-v-fec8ee7f`]]);exports.default=f;
|
package/dist/Dynamic.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{t as n}from"./useDynamicFormState.js";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,inject as f,normalizeClass as p,openBlock as m,renderList as h,resolveComponent as g,resolveDynamicComponent as _,toDisplayString as v,withCtx as y}from"vue";import{NAlert as b,NBadge as x,NButton as S,NCard as C,NGrid as w,NGridItem as T,NInputNumber as E,NSpace as D,NTag as O}from"naive-ui";const k={class:`c-form-dynamic`},A={key:0,class:`dynamic-controls`},j={class:`max-fields-config`},M={class:`dynamic-stats`},N={class:`dynamic-controls-fallback`},P={class:`dynamic-form-items`};var F=t(d({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},dynamicFormState:{default:null}},emits:[`field-add`,`field-remove`,`fields-clear`],setup(t,{expose:d,emit:g}){let F=t,I=g,L=f(n,null),R=i(()=>F.dynamicFormState||L),z=i(()=>!!R.value),B=i(()=>F.layoutConfig?.dynamic?.grid?.cols??24),V=i(()=>F.layoutConfig?.dynamic?.grid?.gutter??16),H=i(()=>F.layoutConfig?.dynamic?.controls?.showControls!==!1),U=i(()=>R.value?.state.config.maxFields??F.layoutConfig?.dynamic?.dynamic?.maxFields??50),W=i(()=>R.value?.dynamicFieldsCount.value??0),G=i(()=>R.value?.canAddMoreFields.value??!1),K=i(()=>F.formItems.length),q=()=>{let e=R.value?.addField();e&&I(`field-add`,e)},J=()=>{let e=R.value?.removeField();e&&I(`field-remove`,e.prop)},Y=()=>{(R.value?.clearDynamicFields()??0)>0&&I(`fields-clear`)},X=e=>{e!==null&&R.value?.updateConfig({maxFields:e})},Z=(e,t)=>e.key?.toString()||e.props?.path?.toString()||`dynamic-item-${t}`,Q=e=>{let t=F.options?.[e]?.layout?.span;return typeof t==`number`&&t>0&&t<=B.value?t:Math.min(12,B.value)},$=e=>{if(!R.value)return!1;let t=e.props?.path?.toString()||e.key?.toString()||``;return R.value.state.dynamicFields.some(e=>e.prop===t)};return d({addField:()=>R.value?.addField(),removeField:()=>R.value?.removeField(),clearAllDynamic:()=>R.value?.clearDynamicFields(),isDynamicStateAvailable:z,dynamicState:R}),(n,i)=>{let d=x,f=S,g=D,F=E,I=O,L=C,R=b,ee=T,te=w;return m(),s(`div`,k,[o(` 动态控制面板 `),H.value&&z.value?(m(),s(`div`,A,[u(L,{size
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{t as n}from"./useDynamicFormState.js";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,inject as f,normalizeClass as p,openBlock as m,renderList as h,resolveComponent as g,resolveDynamicComponent as _,toDisplayString as v,withCtx as y}from"vue";import{NAlert as b,NBadge as x,NButton as S,NCard as C,NGrid as w,NGridItem as T,NInputNumber as E,NSpace as D,NTag as O}from"naive-ui";const k={class:`c-form-dynamic`},A={key:0,class:`dynamic-controls`},j={class:`max-fields-config`},M={class:`dynamic-stats`},N={class:`dynamic-controls-fallback`},P={class:`dynamic-form-items`};var F=t(d({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},dynamicFormState:{default:null}},emits:[`field-add`,`field-remove`,`fields-clear`],setup(t,{expose:d,emit:g}){let F=t,I=g,L=f(n,null),R=i(()=>F.dynamicFormState||L),z=i(()=>!!R.value),B=i(()=>F.layoutConfig?.dynamic?.grid?.cols??24),V=i(()=>F.layoutConfig?.dynamic?.grid?.gutter??16),H=i(()=>F.layoutConfig?.dynamic?.controls?.showControls!==!1),U=i(()=>R.value?.state.config.maxFields??F.layoutConfig?.dynamic?.dynamic?.maxFields??50),W=i(()=>R.value?.dynamicFieldsCount.value??0),G=i(()=>R.value?.canAddMoreFields.value??!1),K=i(()=>F.formItems.length),q=()=>{let e=R.value?.addField();e&&I(`field-add`,e)},J=()=>{let e=R.value?.removeField();e&&I(`field-remove`,e.prop)},Y=()=>{(R.value?.clearDynamicFields()??0)>0&&I(`fields-clear`)},X=e=>{e!==null&&R.value?.updateConfig({maxFields:e})},Z=(e,t)=>e.key?.toString()||e.props?.path?.toString()||`dynamic-item-${t}`,Q=e=>{let t=F.options?.[e]?.layout?.span;return typeof t==`number`&&t>0&&t<=B.value?t:Math.min(12,B.value)},$=e=>{if(!R.value)return!1;let t=e.props?.path?.toString()||e.key?.toString()||``;return R.value.state.dynamicFields.some(e=>e.prop===t)};return d({addField:()=>R.value?.addField(),removeField:()=>R.value?.removeField(),clearAllDynamic:()=>R.value?.clearDynamicFields(),isDynamicStateAvailable:z,dynamicState:R}),(n,i)=>{let d=x,f=S,g=D,F=E,I=O,L=C,R=b,ee=T,te=w;return m(),s(`div`,k,[o(` 动态控制面板 `),H.value&&z.value?(m(),s(`div`,A,[u(L,{size:t.controlSize??`small`,title:`动态表单控制`,bordered:!1},{"header-extra":y(()=>[u(d,{value:W.value,type:`warning`},{default:y(()=>[u(e,{name:`mdi:layers`,size:16})]),_:1},8,[`value`])]),default:y(()=>[u(g,{justify:`space-between`,align:`center`},{default:y(()=>[u(g,null,{default:y(()=>[u(f,{size:t.controlSize??`small`,type:`primary`,disabled:!G.value,onClick:q},{icon:y(()=>[u(e,{name:`mdi:plus`,size:14})]),default:y(()=>[l(` 添加字段 (`+v(W.value)+`/`+v(U.value)+`) `,1)]),_:1},8,[`size`,`disabled`]),u(f,{size:t.controlSize??`small`,type:`warning`,disabled:W.value===0,onClick:J},{icon:y(()=>[u(e,{name:`mdi:minus`,size:14})]),default:y(()=>[i[0]||=l(` 移除字段 `,-1)]),_:1},8,[`size`,`disabled`]),u(f,{size:t.controlSize??`small`,type:`error`,disabled:W.value===0,onClick:Y},{icon:y(()=>[u(e,{name:`mdi:delete-sweep`,size:14})]),default:y(()=>[i[1]||=l(` 清空动态 `,-1)]),_:1},8,[`size`,`disabled`])]),_:1}),o(` 最大字段数配置 `),c(`div`,j,[i[2]||=c(`span`,null,`最大字段数:`,-1),u(F,{value:U.value,"onUpdate:value":X,min:5,max:50,size:t.controlSize??`small`,style:{width:`100px`}},null,8,[`value`,`size`])])]),_:1}),c(`div`,M,[u(g,null,{default:y(()=>[u(I,{type:`info`},{default:y(()=>[l(`总字段: `+v(K.value),1)]),_:1}),u(I,{type:`warning`},{default:y(()=>[l(`动态: `+v(W.value),1)]),_:1})]),_:1})])]),_:1},8,[`size`])])):H.value&&!z.value?(m(),s(r,{key:1},[o(` 状态不可用时的提示 `),c(`div`,N,[u(L,{size:t.controlSize??`small`,title:`动态表单控制 (静态模式)`,bordered:!1},{default:y(()=>[u(R,{type:`info`,"show-icon":``},{icon:y(()=>[u(e,{name:`mdi:information-outline`,size:16})]),default:y(()=>[i[3]||=l(` 当前为静态模式,如需动态功能请在父组件中提供动态表单状态。 `,-1)]),_:1})]),_:1},8,[`size`])])],2112)):o(`v-if`,!0),o(` 表单项渲染区域 `),c(`div`,P,[u(te,{cols:B.value,"x-gap":V.value,"y-gap":V.value},{default:y(()=>[(m(!0),s(r,null,h(t.formItems,(e,t)=>(m(),a(ee,{key:Z(e,t),span:Q(t)},{default:y(()=>[c(`div`,{class:p([`dynamic-item-wrapper`,{"is-dynamic-field":$(e)}])},[(m(),a(_(e)))],2)]),_:2},1032,[`span`]))),128))]),_:1},8,[`cols`,`x-gap`,`y-gap`])])])}}}),[[`__scopeId`,`data-v-fec8ee7f`]]);export{F as default};
|
package/dist/Steps.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);const i={class:`c-form-steps`},a={key:0,class:`single-panel`},o={key:0,class:`step-header`},s={class:`step-title`},c={key:0,class:`step-description`},l={class:`step-form-items`},u={class:`steps-actions`},d=(0,n.defineComponent)({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeStepChange:{},validateStep:{},submitting:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:[`step-change`,`step-before-change`,`step-validate`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(0),g=(0,n.ref)(!1),_=!1,v=(0,n.reactive)({}),y=(0,n.computed)(()=>{let e=p.layoutConfig?.steps||{};return{steps:e.steps||[],vertical:e.vertical||!1,size:e.size||`medium`,showStepHeader:e.showStepHeader!==!1,validateBeforeNext:e.validateBeforeNext||!1,prevButtonText:e.prevButtonText||`上一步`,nextButtonText:e.nextButtonText||`下一步`,defaultStep:e.defaultStep||0}}),b=(0,n.computed)(()=>y.value.steps.length>0),x=(0,n.computed)(()=>{if(!b.value)return[];let e=new Map;return y.value.steps.forEach(t=>{e.set(t.key,[])}),p.formItems.forEach((t,n)=>{let r=(p.options?.[n])?.layout?.step||y.value.steps[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),y.value.steps.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),S=(0,n.computed)(()=>{for(let e=0;e<=h.value;e++)if(v[e]===!1)return`error`;return`process`}),C=(0,n.computed)(()=>h.value===0),w=(0,n.computed)(()=>h.value===x.value.length-1),T=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?n.path:`step-item-${t}`},E=async()=>{let e=x.value[h.value]?.config.key;if(!e||_)return!1;try{let t=p.validateStep?await p.validateStep(h.value,e):!0;return _||x.value[h.value]?.config.key!==e?!1:(m(`step-validate`,h.value),v[h.value]=t,t)}catch{return v[h.value]=!1,!1}},D=(e,t)=>_||x.value[h.value]?.config.key!==e||!x.value.some(e=>e.config.key===t&&!e.config.disabled),O=async(e,t=!1)=>{if(_||g.value||p.submitting||p.disabled||e<0||e>=x.value.length)return!1;if(e===h.value)return!0;let n=x.value[h.value]?.config.key,r=x.value[e].config.key;if(!n||D(n,r))return!1;try{return g.value=!0,t&&y.value.validateBeforeNext&&!await E()||D(n,r)||await p.beforeStepChange?.(h.value,e)===!1||D(n,r)?!1:(m(`step-before-change`,h.value,e),h.value=x.value.findIndex(e=>e.config.key===r),m(`step-change`,h.value,x.value[h.value].config.key),!0)}catch{return!1}finally{g.value=!1}},k=async()=>{await O(h.value+1,!0)},A=()=>{O(h.value-1)},j=async e=>{x.value[e]?.config.disabled||await O(e,e>h.value)},M=()=>{if(!b.value||x.value.length===0)return;let{defaultStep:e}=y.value;h.value=e>=0&&e<x.value.length&&!x.value[e]?.config.disabled?e:0};return(0,n.watch)((0,n.computed)(()=>y.value.steps.map(e=>e.key).join(`,`)),()=>{M()}),(0,n.watch)(()=>x.value.map(e=>e.config.key),(e,t)=>{let n=t[h.value],r=e.indexOf(n);h.value=r>=0?r:Math.max(0,Math.min(h.value,e.length-1)),Object.keys(v).forEach(e=>{delete v[Number(e)]})}),(0,n.onMounted)(()=>{M()}),(0,n.onScopeDispose)(()=>{_=!0}),d({nextStep:k,previousStep:A,goToStep:j,validateCurrentStep:E,currentStep:(0,n.readonly)(h),totalSteps:(0,n.computed)(()=>x.value.length)}),(d,f)=>{let p=r.NStep,m=r.NSteps,_=r.NCard,v=r.NButton,E=r.NSpace;return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createCommentVNode)(` 无步骤配置时的单一面板模式 `),b.value?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createCommentVNode)(` 有步骤配置时的分步骤模式 `),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`steps-container`,{"is-vertical":y.value.vertical}])},[(0,n.createCommentVNode)(` 步骤指示器 `),(0,n.createVNode)(m,{current:h.value+1,status:S.value,size:y.value.size,vertical:y.value.vertical,class:`steps-indicator`},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(x.value,e=>((0,n.openBlock)(),(0,n.createBlock)(p,{key:e.config.key,title:e.config.title,description:e.config.description,disabled:e.config.disabled||g.value||t.submitting||t.disabled},null,8,[`title`,`description`,`disabled`]))),128))]),_:1},8,[`current`,`status`,`size`,`vertical`]),(0,n.createCommentVNode)(` 步骤内容区域 `),(0,n.createVNode)(_,{class:`steps-content`,bordered:!1},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(x.value,(e,t)=>(0,n.withDirectives)(((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:e.config.key,class:`step-panel`},[(0,n.createCommentVNode)(` 步骤标题和描述 `),y.value.showStepHeader?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[(0,n.createElementVNode)(`h3`,s,(0,n.toDisplayString)(e.config.title),1),e.config.description?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,c,(0,n.toDisplayString)(e.config.description),1)):(0,n.createCommentVNode)(`v-if`,!0)])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createCommentVNode)(` 步骤内的表单项 `),(0,n.createElementVNode)(`div`,l,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.items,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:T(e,t)}))),128))])])),[[n.vShow,h.value===t]])),128))]),_:1}),(0,n.createCommentVNode)(` 步骤操作按钮 `),(0,n.createElementVNode)(`div`,u,[(0,n.createVNode)(E,{justify:`space-between`},{default:(0,n.withCtx)(()=>[h.value>0?((0,n.openBlock)(),(0,n.createBlock)(v,{key:0,disabled:g.value||t.submitting||t.disabled,onClick:A},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:chevron-left-first`,size:16,style:{"margin-right":`4px`}}),(0,n.createTextVNode)(` `+(0,n.toDisplayString)(y.value.prevButtonText),1)]),_:1},8,[`disabled`])):(0,n.createCommentVNode)(`v-if`,!0),f[0]||=(0,n.createElementVNode)(`div`,null,null,-1),(0,n.createVNode)(E,null,{default:(0,n.withCtx)(()=>[h.value<x.value.length-1?((0,n.openBlock)(),(0,n.createBlock)(v,{key:0,type:`primary`,loading:g.value,disabled:t.submitting||t.disabled,onClick:k},{default:(0,n.withCtx)(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(y.value.nextButtonText)+` `,1),(0,n.createVNode)(e.t,{name:`mdi:chevron-right-last`,size:16,style:{"margin-left":`4px`}})]),_:1},8,[`loading`,`disabled`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.renderSlot)(d.$slots,`step-actions`,{currentStep:h.value,totalSteps:x.value.length,isFirstStep:C.value,isLastStep:w.value,nextStep:k,previousStep:A,goToStep:j},void 0,!0)]),_:3})]),_:3})])],2)],2112)):((0,n.openBlock)(),(0,n.createElementBlock)(`div`,a,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.formItems,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:T(e,t)}))),128))]))])}}});var f=t.t(d,[[`__scopeId`,`data-v-
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);const i={class:`c-form-steps`},a={key:0,class:`single-panel`},o={key:0,class:`step-header`},s={class:`step-title`},c={key:0,class:`step-description`},l={class:`step-form-items`},u={class:`steps-actions`},d=(0,n.defineComponent)({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeStepChange:{},validateStep:{},submitting:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:[`step-change`,`step-before-change`,`step-validate`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(0),g=(0,n.ref)(!1),_=!1,v=(0,n.reactive)({}),y=(0,n.computed)(()=>{let e=p.layoutConfig?.steps||{};return{steps:e.steps||[],vertical:e.vertical||!1,size:e.size||`medium`,showStepHeader:e.showStepHeader!==!1,validateBeforeNext:e.validateBeforeNext||!1,prevButtonText:e.prevButtonText||`上一步`,nextButtonText:e.nextButtonText||`下一步`,defaultStep:e.defaultStep||0}}),b=(0,n.computed)(()=>y.value.steps.length>0),x=(0,n.computed)(()=>{if(!b.value)return[];let e=new Map;return y.value.steps.forEach(t=>{e.set(t.key,[])}),p.formItems.forEach((t,n)=>{let r=(p.options?.[n])?.layout?.step||y.value.steps[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),y.value.steps.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),S=(0,n.computed)(()=>{for(let e=0;e<=h.value;e++)if(v[e]===!1)return`error`;return`process`}),C=(0,n.computed)(()=>h.value===0),w=(0,n.computed)(()=>h.value===x.value.length-1),T=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?n.path:`step-item-${t}`},E=async()=>{let e=x.value[h.value]?.config.key;if(!e||_)return!1;try{let t=p.validateStep?await p.validateStep(h.value,e):!0;return _||x.value[h.value]?.config.key!==e?!1:(m(`step-validate`,h.value),v[h.value]=t,t)}catch{return v[h.value]=!1,!1}},D=(e,t)=>_||x.value[h.value]?.config.key!==e||!x.value.some(e=>e.config.key===t&&!e.config.disabled),O=async(e,t=!1)=>{if(_||g.value||p.submitting||p.disabled||e<0||e>=x.value.length)return!1;if(e===h.value)return!0;let n=x.value[h.value]?.config.key,r=x.value[e].config.key;if(!n||D(n,r))return!1;try{return g.value=!0,t&&y.value.validateBeforeNext&&!await E()||D(n,r)||await p.beforeStepChange?.(h.value,e)===!1||D(n,r)?!1:(m(`step-before-change`,h.value,e),h.value=x.value.findIndex(e=>e.config.key===r),m(`step-change`,h.value,x.value[h.value].config.key),!0)}catch{return!1}finally{g.value=!1}},k=async()=>{await O(h.value+1,!0)},A=()=>{O(h.value-1)},j=async e=>{x.value[e]?.config.disabled||await O(e,e>h.value)},M=()=>{if(!b.value||x.value.length===0)return;let{defaultStep:e}=y.value;h.value=e>=0&&e<x.value.length&&!x.value[e]?.config.disabled?e:0};return(0,n.watch)((0,n.computed)(()=>y.value.steps.map(e=>e.key).join(`,`)),()=>{M()}),(0,n.watch)(()=>x.value.map(e=>e.config.key),(e,t)=>{let n=t[h.value],r=e.indexOf(n);h.value=r>=0?r:Math.max(0,Math.min(h.value,e.length-1)),Object.keys(v).forEach(e=>{delete v[Number(e)]})}),(0,n.onMounted)(()=>{M()}),(0,n.onScopeDispose)(()=>{_=!0}),d({nextStep:k,previousStep:A,goToStep:j,validateCurrentStep:E,currentStep:(0,n.readonly)(h),totalSteps:(0,n.computed)(()=>x.value.length)}),(d,f)=>{let p=r.NStep,m=r.NSteps,_=r.NCard,v=r.NButton,E=r.NSpace;return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createCommentVNode)(` 无步骤配置时的单一面板模式 `),b.value?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createCommentVNode)(` 有步骤配置时的分步骤模式 `),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`steps-container`,{"is-vertical":y.value.vertical}])},[(0,n.createCommentVNode)(` 步骤指示器 `),(0,n.createVNode)(m,{current:h.value+1,status:S.value,size:y.value.size,vertical:y.value.vertical,class:`steps-indicator`},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(x.value,e=>((0,n.openBlock)(),(0,n.createBlock)(p,{key:e.config.key,title:e.config.title,description:e.config.description,disabled:e.config.disabled||g.value||t.submitting||t.disabled},null,8,[`title`,`description`,`disabled`]))),128))]),_:1},8,[`current`,`status`,`size`,`vertical`]),(0,n.createCommentVNode)(` 步骤内容区域 `),(0,n.createVNode)(_,{class:`steps-content`,bordered:!1},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(x.value,(e,t)=>(0,n.withDirectives)(((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:e.config.key,class:`step-panel`},[(0,n.createCommentVNode)(` 步骤标题和描述 `),y.value.showStepHeader?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[(0,n.createElementVNode)(`h3`,s,(0,n.toDisplayString)(e.config.title),1),e.config.description?((0,n.openBlock)(),(0,n.createElementBlock)(`p`,c,(0,n.toDisplayString)(e.config.description),1)):(0,n.createCommentVNode)(`v-if`,!0)])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createCommentVNode)(` 步骤内的表单项 `),(0,n.createElementVNode)(`div`,l,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.items,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:T(e,t)}))),128))])])),[[n.vShow,h.value===t]])),128))]),_:1}),(0,n.createCommentVNode)(` 步骤操作按钮 `),(0,n.createElementVNode)(`div`,u,[(0,n.createVNode)(E,{justify:`space-between`},{default:(0,n.withCtx)(()=>[h.value>0?((0,n.openBlock)(),(0,n.createBlock)(v,{key:0,size:t.controlSize,disabled:g.value||t.submitting||t.disabled,onClick:A},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`mdi:chevron-left-first`,size:16,style:{"margin-right":`4px`}}),(0,n.createTextVNode)(` `+(0,n.toDisplayString)(y.value.prevButtonText),1)]),_:1},8,[`size`,`disabled`])):(0,n.createCommentVNode)(`v-if`,!0),f[0]||=(0,n.createElementVNode)(`div`,null,null,-1),(0,n.createVNode)(E,null,{default:(0,n.withCtx)(()=>[h.value<x.value.length-1?((0,n.openBlock)(),(0,n.createBlock)(v,{key:0,size:t.controlSize,type:`primary`,loading:g.value,disabled:t.submitting||t.disabled,onClick:k},{default:(0,n.withCtx)(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(y.value.nextButtonText)+` `,1),(0,n.createVNode)(e.t,{name:`mdi:chevron-right-last`,size:16,style:{"margin-left":`4px`}})]),_:1},8,[`size`,`loading`,`disabled`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.renderSlot)(d.$slots,`step-actions`,{currentStep:h.value,totalSteps:x.value.length,isFirstStep:C.value,isLastStep:w.value,nextStep:k,previousStep:A,goToStep:j},void 0,!0)]),_:3})]),_:3})])],2)],2112)):((0,n.openBlock)(),(0,n.createElementBlock)(`div`,a,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.formItems,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:T(e,t)}))),128))]))])}}});var f=t.t(d,[[`__scopeId`,`data-v-8e183ba9`]]);exports.default=f;
|
package/dist/Steps.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,normalizeClass as d,onMounted as f,onScopeDispose as p,openBlock as m,reactive as h,readonly as g,ref as _,renderList as v,renderSlot as ee,resolveComponent as y,resolveDynamicComponent as b,toDisplayString as x,vShow as S,watch as C,withCtx as w,withDirectives as T}from"vue";import{NButton as E,NCard as D,NSpace as O,NStep as k,NSteps as A}from"naive-ui";const j={class:`c-form-steps`},M={key:0,class:`single-panel`},N={key:0,class:`step-header`},te={class:`step-title`},ne={key:0,class:`step-description`},re={class:`step-form-items`},ie={class:`steps-actions`};var P=t(u({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeStepChange:{},validateStep:{},submitting:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:[`step-change`,`step-before-change`,`step-validate`],setup(t,{expose:u,emit:y}){let P=t,F=y,I=_(0),L=_(!1),R=!1,z=h({}),B=r(()=>{let e=P.layoutConfig?.steps||{};return{steps:e.steps||[],vertical:e.vertical||!1,size:e.size||`medium`,showStepHeader:e.showStepHeader!==!1,validateBeforeNext:e.validateBeforeNext||!1,prevButtonText:e.prevButtonText||`上一步`,nextButtonText:e.nextButtonText||`下一步`,defaultStep:e.defaultStep||0}}),V=r(()=>B.value.steps.length>0),H=r(()=>{if(!V.value)return[];let e=new Map;return B.value.steps.forEach(t=>{e.set(t.key,[])}),P.formItems.forEach((t,n)=>{let r=(P.options?.[n])?.layout?.step||B.value.steps[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),B.value.steps.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),U=r(()=>{for(let e=0;e<=I.value;e++)if(z[e]===!1)return`error`;return`process`}),W=r(()=>I.value===0),G=r(()=>I.value===H.value.length-1),K=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?n.path:`step-item-${t}`},q=async()=>{let e=H.value[I.value]?.config.key;if(!e||R)return!1;try{let t=P.validateStep?await P.validateStep(I.value,e):!0;return R||H.value[I.value]?.config.key!==e?!1:(F(`step-validate`,I.value),z[I.value]=t,t)}catch{return z[I.value]=!1,!1}},J=(e,t)=>R||H.value[I.value]?.config.key!==e||!H.value.some(e=>e.config.key===t&&!e.config.disabled),Y=async(e,t=!1)=>{if(R||L.value||P.submitting||P.disabled||e<0||e>=H.value.length)return!1;if(e===I.value)return!0;let n=H.value[I.value]?.config.key,r=H.value[e].config.key;if(!n||J(n,r))return!1;try{return L.value=!0,t&&B.value.validateBeforeNext&&!await q()||J(n,r)||await P.beforeStepChange?.(I.value,e)===!1||J(n,r)?!1:(F(`step-before-change`,I.value,e),I.value=H.value.findIndex(e=>e.config.key===r),F(`step-change`,I.value,H.value[I.value].config.key),!0)}catch{return!1}finally{L.value=!1}},X=async()=>{await Y(I.value+1,!0)},Z=()=>{Y(I.value-1)},Q=async e=>{H.value[e]?.config.disabled||await Y(e,e>I.value)},$=()=>{if(!V.value||H.value.length===0)return;let{defaultStep:e}=B.value;I.value=e>=0&&e<H.value.length&&!H.value[e]?.config.disabled?e:0};return C(r(()=>B.value.steps.map(e=>e.key).join(`,`)),()=>{$()}),C(()=>H.value.map(e=>e.config.key),(e,t)=>{let n=t[I.value],r=e.indexOf(n);I.value=r>=0?r:Math.max(0,Math.min(I.value,e.length-1)),Object.keys(z).forEach(e=>{delete z[Number(e)]})}),f(()=>{$()}),p(()=>{R=!0}),u({nextStep:X,previousStep:Z,goToStep:Q,validateCurrentStep:q,currentStep:g(I),totalSteps:r(()=>H.value.length)}),(r,u)=>{let f=k,p=A,h=D,g=E,_=O;return m(),o(`div`,j,[a(` 无步骤配置时的单一面板模式 `),V.value?(m(),o(n,{key:1},[a(` 有步骤配置时的分步骤模式 `),s(`div`,{class:d([`steps-container`,{"is-vertical":B.value.vertical}])},[a(` 步骤指示器 `),l(p,{current:I.value+1,status:U.value,size:B.value.size,vertical:B.value.vertical,class:`steps-indicator`},{default:w(()=>[(m(!0),o(n,null,v(H.value,e=>(m(),i(f,{key:e.config.key,title:e.config.title,description:e.config.description,disabled:e.config.disabled||L.value||t.submitting||t.disabled},null,8,[`title`,`description`,`disabled`]))),128))]),_:1},8,[`current`,`status`,`size`,`vertical`]),a(` 步骤内容区域 `),l(h,{class:`steps-content`,bordered:!1},{default:w(()=>[(m(!0),o(n,null,v(H.value,(e,t)=>T((m(),o(`div`,{key:e.config.key,class:`step-panel`},[a(` 步骤标题和描述 `),B.value.showStepHeader?(m(),o(`div`,N,[s(`h3`,te,x(e.config.title),1),e.config.description?(m(),o(`p`,ne,x(e.config.description),1)):a(`v-if`,!0)])):a(`v-if`,!0),a(` 步骤内的表单项 `),s(`div`,re,[(m(!0),o(n,null,v(e.items,(e,t)=>(m(),i(b(e),{key:K(e,t)}))),128))])])),[[S,I.value===t]])),128))]),_:1}),a(` 步骤操作按钮 `),s(`div`,ie,[l(_,{justify:`space-between`},{default:w(()=>[I.value>0?(m(),i(g,{key:0,disabled:L.value||t.submitting||t.disabled,onClick:Z},{default:w(()=>[l(e,{name:`mdi:chevron-left-first`,size:16,style:{"margin-right":`4px`}}),c(` `+x(B.value.prevButtonText),1)]),_:1},8,[`disabled`])):a(`v-if`,!0),u[0]||=s(`div`,null,null,-1),l(_,null,{default:w(()=>[I.value<H.value.length-1?(m(),i(g,{key:0,type:`primary`,loading:L.value,disabled:t.submitting||t.disabled,onClick:X},{default:w(()=>[c(x(B.value.nextButtonText)+` `,1),l(e,{name:`mdi:chevron-right-last`,size:16,style:{"margin-left":`4px`}})]),_:1},8,[`loading`,`disabled`])):a(`v-if`,!0),ee(r.$slots,`step-actions`,{currentStep:I.value,totalSteps:H.value.length,isFirstStep:W.value,isLastStep:G.value,nextStep:X,previousStep:Z,goToStep:Q},void 0,!0)]),_:3})]),_:3})])],2)],2112)):(m(),o(`div`,M,[(m(!0),o(n,null,v(t.formItems,(e,t)=>(m(),i(b(e),{key:K(e,t)}))),128))]))])}}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,normalizeClass as d,onMounted as f,onScopeDispose as p,openBlock as m,reactive as h,readonly as g,ref as _,renderList as v,renderSlot as ee,resolveComponent as y,resolveDynamicComponent as b,toDisplayString as x,vShow as S,watch as C,withCtx as w,withDirectives as T}from"vue";import{NButton as E,NCard as D,NSpace as O,NStep as k,NSteps as A}from"naive-ui";const j={class:`c-form-steps`},M={key:0,class:`single-panel`},N={key:0,class:`step-header`},te={class:`step-title`},ne={key:0,class:`step-description`},re={class:`step-form-items`},ie={class:`steps-actions`};var P=t(u({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeStepChange:{},validateStep:{},submitting:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:[`step-change`,`step-before-change`,`step-validate`],setup(t,{expose:u,emit:y}){let P=t,F=y,I=_(0),L=_(!1),R=!1,z=h({}),B=r(()=>{let e=P.layoutConfig?.steps||{};return{steps:e.steps||[],vertical:e.vertical||!1,size:e.size||`medium`,showStepHeader:e.showStepHeader!==!1,validateBeforeNext:e.validateBeforeNext||!1,prevButtonText:e.prevButtonText||`上一步`,nextButtonText:e.nextButtonText||`下一步`,defaultStep:e.defaultStep||0}}),V=r(()=>B.value.steps.length>0),H=r(()=>{if(!V.value)return[];let e=new Map;return B.value.steps.forEach(t=>{e.set(t.key,[])}),P.formItems.forEach((t,n)=>{let r=(P.options?.[n])?.layout?.step||B.value.steps[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),B.value.steps.map(t=>({config:t,items:e.get(t.key)||[]})).filter(e=>e.items.length>0)}),U=r(()=>{for(let e=0;e<=I.value;e++)if(z[e]===!1)return`error`;return`process`}),W=r(()=>I.value===0),G=r(()=>I.value===H.value.length-1),K=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?n.path:`step-item-${t}`},q=async()=>{let e=H.value[I.value]?.config.key;if(!e||R)return!1;try{let t=P.validateStep?await P.validateStep(I.value,e):!0;return R||H.value[I.value]?.config.key!==e?!1:(F(`step-validate`,I.value),z[I.value]=t,t)}catch{return z[I.value]=!1,!1}},J=(e,t)=>R||H.value[I.value]?.config.key!==e||!H.value.some(e=>e.config.key===t&&!e.config.disabled),Y=async(e,t=!1)=>{if(R||L.value||P.submitting||P.disabled||e<0||e>=H.value.length)return!1;if(e===I.value)return!0;let n=H.value[I.value]?.config.key,r=H.value[e].config.key;if(!n||J(n,r))return!1;try{return L.value=!0,t&&B.value.validateBeforeNext&&!await q()||J(n,r)||await P.beforeStepChange?.(I.value,e)===!1||J(n,r)?!1:(F(`step-before-change`,I.value,e),I.value=H.value.findIndex(e=>e.config.key===r),F(`step-change`,I.value,H.value[I.value].config.key),!0)}catch{return!1}finally{L.value=!1}},X=async()=>{await Y(I.value+1,!0)},Z=()=>{Y(I.value-1)},Q=async e=>{H.value[e]?.config.disabled||await Y(e,e>I.value)},$=()=>{if(!V.value||H.value.length===0)return;let{defaultStep:e}=B.value;I.value=e>=0&&e<H.value.length&&!H.value[e]?.config.disabled?e:0};return C(r(()=>B.value.steps.map(e=>e.key).join(`,`)),()=>{$()}),C(()=>H.value.map(e=>e.config.key),(e,t)=>{let n=t[I.value],r=e.indexOf(n);I.value=r>=0?r:Math.max(0,Math.min(I.value,e.length-1)),Object.keys(z).forEach(e=>{delete z[Number(e)]})}),f(()=>{$()}),p(()=>{R=!0}),u({nextStep:X,previousStep:Z,goToStep:Q,validateCurrentStep:q,currentStep:g(I),totalSteps:r(()=>H.value.length)}),(r,u)=>{let f=k,p=A,h=D,g=E,_=O;return m(),o(`div`,j,[a(` 无步骤配置时的单一面板模式 `),V.value?(m(),o(n,{key:1},[a(` 有步骤配置时的分步骤模式 `),s(`div`,{class:d([`steps-container`,{"is-vertical":B.value.vertical}])},[a(` 步骤指示器 `),l(p,{current:I.value+1,status:U.value,size:B.value.size,vertical:B.value.vertical,class:`steps-indicator`},{default:w(()=>[(m(!0),o(n,null,v(H.value,e=>(m(),i(f,{key:e.config.key,title:e.config.title,description:e.config.description,disabled:e.config.disabled||L.value||t.submitting||t.disabled},null,8,[`title`,`description`,`disabled`]))),128))]),_:1},8,[`current`,`status`,`size`,`vertical`]),a(` 步骤内容区域 `),l(h,{class:`steps-content`,bordered:!1},{default:w(()=>[(m(!0),o(n,null,v(H.value,(e,t)=>T((m(),o(`div`,{key:e.config.key,class:`step-panel`},[a(` 步骤标题和描述 `),B.value.showStepHeader?(m(),o(`div`,N,[s(`h3`,te,x(e.config.title),1),e.config.description?(m(),o(`p`,ne,x(e.config.description),1)):a(`v-if`,!0)])):a(`v-if`,!0),a(` 步骤内的表单项 `),s(`div`,re,[(m(!0),o(n,null,v(e.items,(e,t)=>(m(),i(b(e),{key:K(e,t)}))),128))])])),[[S,I.value===t]])),128))]),_:1}),a(` 步骤操作按钮 `),s(`div`,ie,[l(_,{justify:`space-between`},{default:w(()=>[I.value>0?(m(),i(g,{key:0,size:t.controlSize,disabled:L.value||t.submitting||t.disabled,onClick:Z},{default:w(()=>[l(e,{name:`mdi:chevron-left-first`,size:16,style:{"margin-right":`4px`}}),c(` `+x(B.value.prevButtonText),1)]),_:1},8,[`size`,`disabled`])):a(`v-if`,!0),u[0]||=s(`div`,null,null,-1),l(_,null,{default:w(()=>[I.value<H.value.length-1?(m(),i(g,{key:0,size:t.controlSize,type:`primary`,loading:L.value,disabled:t.submitting||t.disabled,onClick:X},{default:w(()=>[c(x(B.value.nextButtonText)+` `,1),l(e,{name:`mdi:chevron-right-last`,size:16,style:{"margin-left":`4px`}})]),_:1},8,[`size`,`loading`,`disabled`])):a(`v-if`,!0),ee(r.$slots,`step-actions`,{currentStep:I.value,totalSteps:H.value.length,isFirstStep:W.value,isLastStep:G.value,nextStep:X,previousStep:Z,goToStep:Q},void 0,!0)]),_:3})]),_:3})])],2)],2112)):(m(),o(`div`,M,[(m(!0),o(n,null,v(t.formItems,(e,t)=>(m(),i(b(e),{key:K(e,t)}))),128))]))])}}}),[[`__scopeId`,`data-v-8e183ba9`]]);export{P as default};
|
package/dist/Tabs.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);const i={class:`c-form-tabs`},a={key:0,class:`single-panel`},o={class:`tabs-container`},s={key:0,class:`tab-header`},c={class:`tab-description`},l={class:`tab-form-items`},u={key:0,class:`tabs-actions`},d=(0,n.defineComponent)({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeTabChange:{},validateTab:{}},emits:[`tab-change`,`tab-before-change`,`tab-validate`,`tab-close`,`tab-add`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(``),g=(0,n.ref)(!1),_=!1,v=(0,n.reactive)({}),y=()=>({tabs:[],type:`line`,size:`medium`,placement:`top`,animated:!0,closable:!1,addable:!1,showTabHeader:!0,showActions:!1,showCount:!1,validateBeforeSwitch:!1,defaultTab:``}),b=(0,n.computed)(()=>{let e=y(),t=p.layoutConfig?.tabs||{};return{...e,...t}}),x=(0,n.computed)(()=>b.value.tabs.length>0),S=(0,n.computed)(()=>{if(!x.value)return[];let e=new Map;return b.value.tabs.forEach(t=>{e.set(t.key,[])}),p.formItems.forEach((t,n)=>{let r=(p.options?.[n])?.layout?.tab||b.value.tabs[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),b.value.tabs.map(t=>({config:t,items:e.get(t.key)||[]}))}),C=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?String(n.path):`tab-item-${t}`},w=async()=>{if(!h.value)return!0;try{let e=p.validateTab?await p.validateTab(h.value):!0;return m(`tab-validate`,h.value),v[h.value]=e,e}catch{return v[h.value]=!1,!1}},T=async e=>{if(_||g.value)return!1;if(!e||e===h.value)return!0;let t=S.value.find(t=>t.config.key===e);if(!t||t.config.disabled)return!1;let n=h.value;try{if(g.value=!0,b.value.validateBeforeSwitch&&h.value&&!await w()||_||h.value!==n)return!1;if(h.value){if(await p.beforeTabChange?.(h.value,e)===!1||_||h.value!==n)return!1;m(`tab-before-change`,h.value,e)}return S.value.some(t=>t.config.key===e&&!t.config.disabled)?(h.value=e,m(`tab-change`,e,S.value.findIndex(t=>t.config.key===e)),!0):!1}catch{return!1}finally{g.value=!1}},E=e=>{T(e)},D=e=>{m(`tab-close`,e)},O=()=>{m(`tab-add`)},k=()=>{if(!x.value||S.value.length===0){h.value=``;return}let{defaultTab:e}=b.value,t=S.value.find(t=>t.config.key===e&&!t.config.disabled)?.config.key||S.value.find(e=>!e.config.disabled)?.config.key;t&&t!==h.value&&(h.value=t,(0,n.nextTick)(()=>{let e=S.value.findIndex(e=>e.config.key===t);e>=0&&m(`tab-change`,t,e)}))};return(0,n.onMounted)(()=>{k()}),(0,n.onScopeDispose)(()=>{_=!0}),(0,n.watch)((0,n.computed)(()=>b.value.tabs.map(e=>e.key).join(`,`)),()=>{b.value.tabs.some(e=>e.key===h.value)||k()}),(0,n.watch)(()=>b.value.defaultTab,e=>{e&&e!==h.value&&T(e)}),d({switchToTab:T,validateCurrentTab:w,currentTab:(0,n.readonly)(h),totalTabs:(0,n.computed)(()=>S.value.length),tabsWithItems:(0,n.readonly)(S)}),(d,f)=>{let p=r.NBadge,m=r.NSpace,_=r.NEmpty,v=r.NTabPane,y=r.NTabs,k=r.NButton;return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createCommentVNode)(` 无标签配置时的单一面板模式 `),x.value?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createCommentVNode)(` 有标签配置时的分标签模式 `),(0,n.createElementVNode)(`div`,o,[(0,n.createVNode)(y,{value:h.value,type:b.value.type,size:b.value.size,placement:b.value.placement,animated:b.value.animated,closable:b.value.closable,addable:b.value.addable,class:`form-tabs`,"onUpdate:value":E,onClose:D,onAdd:O},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(S.value,t=>((0,n.openBlock)(),(0,n.createBlock)(v,{key:t.config.key,name:t.config.key,tab:t.config.title,disabled:t.config.disabled||g.value,closable:t.config.closable,"display-directive":`show`},{tab:(0,n.withCtx)(()=>[(0,n.createVNode)(m,{align:`center`,size:8},{default:(0,n.withCtx)(()=>[t.config.icon?((0,n.openBlock)(),(0,n.createBlock)(e.t,{key:0,name:t.config.icon,size:16,class:`tab-icon`},null,8,[`name`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(t.config.title),1),b.value.showCount?((0,n.openBlock)(),(0,n.createBlock)(p,{key:1,value:t.items.length,max:99,show:t.items.length>0,type:`info`},null,8,[`value`,`show`])):(0,n.createCommentVNode)(`v-if`,!0)]),_:2},1024)]),default:(0,n.withCtx)(()=>[b.value.showTabHeader&&t.config.description?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,s,[(0,n.createElementVNode)(`p`,c,(0,n.toDisplayString)(t.config.description),1)])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`div`,l,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.items,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:C(e,t)}))),128))]),t.items.length===0?((0,n.openBlock)(),(0,n.createBlock)(_,{key:1,description:`暂无表单项`,class:`tab-empty`})):(0,n.createCommentVNode)(`v-if`,!0)]),_:2},1032,[`name`,`tab`,`disabled`,`closable`]))),128))]),_:1},8,[`value`,`type`,`size`,`placement`,`animated`,`closable`,`addable`]),(0,n.createCommentVNode)(` 标签页操作按钮 `),b.value.showActions?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,u,[(0,n.createVNode)(m,{justify:`space-between`},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(m,null,{default:(0,n.withCtx)(()=>[b.value.validateBeforeSwitch?((0,n.openBlock)(),(0,n.createBlock)(k,{key:0,type:`primary`,size
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`),r=require(`naive-ui`);const i={class:`c-form-tabs`},a={key:0,class:`single-panel`},o={class:`tabs-container`},s={key:0,class:`tab-header`},c={class:`tab-description`},l={class:`tab-form-items`},u={key:0,class:`tabs-actions`},d=(0,n.defineComponent)({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeTabChange:{},validateTab:{}},emits:[`tab-change`,`tab-before-change`,`tab-validate`,`tab-close`,`tab-add`],setup(t,{expose:d,emit:f}){let p=t,m=f,h=(0,n.ref)(``),g=(0,n.ref)(!1),_=!1,v=(0,n.reactive)({}),y=()=>({tabs:[],type:`line`,size:`medium`,placement:`top`,animated:!0,closable:!1,addable:!1,showTabHeader:!0,showActions:!1,showCount:!1,validateBeforeSwitch:!1,defaultTab:``}),b=(0,n.computed)(()=>{let e=y(),t=p.layoutConfig?.tabs||{};return{...e,...t}}),x=(0,n.computed)(()=>b.value.tabs.length>0),S=(0,n.computed)(()=>{if(!x.value)return[];let e=new Map;return b.value.tabs.forEach(t=>{e.set(t.key,[])}),p.formItems.forEach((t,n)=>{let r=(p.options?.[n])?.layout?.tab||b.value.tabs[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),b.value.tabs.map(t=>({config:t,items:e.get(t.key)||[]}))}),C=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?String(n.path):`tab-item-${t}`},w=async()=>{if(!h.value)return!0;try{let e=p.validateTab?await p.validateTab(h.value):!0;return m(`tab-validate`,h.value),v[h.value]=e,e}catch{return v[h.value]=!1,!1}},T=async e=>{if(_||g.value)return!1;if(!e||e===h.value)return!0;let t=S.value.find(t=>t.config.key===e);if(!t||t.config.disabled)return!1;let n=h.value;try{if(g.value=!0,b.value.validateBeforeSwitch&&h.value&&!await w()||_||h.value!==n)return!1;if(h.value){if(await p.beforeTabChange?.(h.value,e)===!1||_||h.value!==n)return!1;m(`tab-before-change`,h.value,e)}return S.value.some(t=>t.config.key===e&&!t.config.disabled)?(h.value=e,m(`tab-change`,e,S.value.findIndex(t=>t.config.key===e)),!0):!1}catch{return!1}finally{g.value=!1}},E=e=>{T(e)},D=e=>{m(`tab-close`,e)},O=()=>{m(`tab-add`)},k=()=>{if(!x.value||S.value.length===0){h.value=``;return}let{defaultTab:e}=b.value,t=S.value.find(t=>t.config.key===e&&!t.config.disabled)?.config.key||S.value.find(e=>!e.config.disabled)?.config.key;t&&t!==h.value&&(h.value=t,(0,n.nextTick)(()=>{let e=S.value.findIndex(e=>e.config.key===t);e>=0&&m(`tab-change`,t,e)}))};return(0,n.onMounted)(()=>{k()}),(0,n.onScopeDispose)(()=>{_=!0}),(0,n.watch)((0,n.computed)(()=>b.value.tabs.map(e=>e.key).join(`,`)),()=>{b.value.tabs.some(e=>e.key===h.value)||k()}),(0,n.watch)(()=>b.value.defaultTab,e=>{e&&e!==h.value&&T(e)}),d({switchToTab:T,validateCurrentTab:w,currentTab:(0,n.readonly)(h),totalTabs:(0,n.computed)(()=>S.value.length),tabsWithItems:(0,n.readonly)(S)}),(d,f)=>{let p=r.NBadge,m=r.NSpace,_=r.NEmpty,v=r.NTabPane,y=r.NTabs,k=r.NButton;return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createCommentVNode)(` 无标签配置时的单一面板模式 `),x.value?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createCommentVNode)(` 有标签配置时的分标签模式 `),(0,n.createElementVNode)(`div`,o,[(0,n.createVNode)(y,{value:h.value,type:b.value.type,size:b.value.size,placement:b.value.placement,animated:b.value.animated,closable:b.value.closable,addable:b.value.addable,class:`form-tabs`,"onUpdate:value":E,onClose:D,onAdd:O},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(S.value,t=>((0,n.openBlock)(),(0,n.createBlock)(v,{key:t.config.key,name:t.config.key,tab:t.config.title,disabled:t.config.disabled||g.value,closable:t.config.closable,"display-directive":`show`},{tab:(0,n.withCtx)(()=>[(0,n.createVNode)(m,{align:`center`,size:8},{default:(0,n.withCtx)(()=>[t.config.icon?((0,n.openBlock)(),(0,n.createBlock)(e.t,{key:0,name:t.config.icon,size:16,class:`tab-icon`},null,8,[`name`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(t.config.title),1),b.value.showCount?((0,n.openBlock)(),(0,n.createBlock)(p,{key:1,value:t.items.length,max:99,show:t.items.length>0,type:`info`},null,8,[`value`,`show`])):(0,n.createCommentVNode)(`v-if`,!0)]),_:2},1024)]),default:(0,n.withCtx)(()=>[b.value.showTabHeader&&t.config.description?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,s,[(0,n.createElementVNode)(`p`,c,(0,n.toDisplayString)(t.config.description),1)])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`div`,l,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.items,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:C(e,t)}))),128))]),t.items.length===0?((0,n.openBlock)(),(0,n.createBlock)(_,{key:1,description:`暂无表单项`,class:`tab-empty`})):(0,n.createCommentVNode)(`v-if`,!0)]),_:2},1032,[`name`,`tab`,`disabled`,`closable`]))),128))]),_:1},8,[`value`,`type`,`size`,`placement`,`animated`,`closable`,`addable`]),(0,n.createCommentVNode)(` 标签页操作按钮 `),b.value.showActions?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,u,[(0,n.createVNode)(m,{justify:`space-between`},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(m,null,{default:(0,n.withCtx)(()=>[b.value.validateBeforeSwitch?((0,n.openBlock)(),(0,n.createBlock)(k,{key:0,type:`primary`,size:t.controlSize??`small`,onClick:w},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(e.t,{name:`carbon:star-check`,size:14,style:{"margin-right":`4px`}}),f[0]||=(0,n.createTextVNode)(` 验证当前标签 `,-1)]),_:1},8,[`size`])):(0,n.createCommentVNode)(`v-if`,!0)]),_:1}),(0,n.createVNode)(m,null,{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(d.$slots,`tab-actions`,{currentTab:h.value,totalTabs:S.value.length,validateTab:w,switchToTab:T},void 0,!0)]),_:3})]),_:3})])):(0,n.createCommentVNode)(`v-if`,!0)])],2112)):((0,n.openBlock)(),(0,n.createElementBlock)(`div`,a,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.formItems,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(e),{key:C(e,t)}))),128))]))])}}});var f=t.t(d,[[`__scopeId`,`data-v-d2ed671c`]]);exports.default=f;
|
package/dist/Tabs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,nextTick as d,onMounted as f,onScopeDispose as p,openBlock as m,reactive as h,readonly as g,ref as _,renderList as v,renderSlot as y,resolveComponent as b,resolveDynamicComponent as x,toDisplayString as S,watch as C,withCtx as w}from"vue";import{NBadge as T,NButton as E,NEmpty as D,NSpace as O,NTabPane as k,NTabs as A}from"naive-ui";const j={class:`c-form-tabs`},M={key:0,class:`single-panel`},N={class:`tabs-container`},P={key:0,class:`tab-header`},ee={class:`tab-description`},F={class:`tab-form-items`},I={key:0,class:`tabs-actions`};var L=t(u({__name:`index`,props:{formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeTabChange:{},validateTab:{}},emits:[`tab-change`,`tab-before-change`,`tab-validate`,`tab-close`,`tab-add`],setup(t,{expose:u,emit:b}){let L=t,R=b,z=_(``),B=_(!1),V=!1,H=h({}),U=()=>({tabs:[],type:`line`,size:`medium`,placement:`top`,animated:!0,closable:!1,addable:!1,showTabHeader:!0,showActions:!1,showCount:!1,validateBeforeSwitch:!1,defaultTab:``}),W=r(()=>{let e=U(),t=L.layoutConfig?.tabs||{};return{...e,...t}}),G=r(()=>W.value.tabs.length>0),K=r(()=>{if(!G.value)return[];let e=new Map;return W.value.tabs.forEach(t=>{e.set(t.key,[])}),L.formItems.forEach((t,n)=>{let r=(L.options?.[n])?.layout?.tab||W.value.tabs[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),W.value.tabs.map(t=>({config:t,items:e.get(t.key)||[]}))}),q=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?String(n.path):`tab-item-${t}`},J=async()=>{if(!z.value)return!0;try{let e=L.validateTab?await L.validateTab(z.value):!0;return R(`tab-validate`,z.value),H[z.value]=e,e}catch{return H[z.value]=!1,!1}},Y=async e=>{if(V||B.value)return!1;if(!e||e===z.value)return!0;let t=K.value.find(t=>t.config.key===e);if(!t||t.config.disabled)return!1;let n=z.value;try{if(B.value=!0,W.value.validateBeforeSwitch&&z.value&&!await J()||V||z.value!==n)return!1;if(z.value){if(await L.beforeTabChange?.(z.value,e)===!1||V||z.value!==n)return!1;R(`tab-before-change`,z.value,e)}return K.value.some(t=>t.config.key===e&&!t.config.disabled)?(z.value=e,R(`tab-change`,e,K.value.findIndex(t=>t.config.key===e)),!0):!1}catch{return!1}finally{B.value=!1}},X=e=>{Y(e)},Z=e=>{R(`tab-close`,e)},Q=()=>{R(`tab-add`)},$=()=>{if(!G.value||K.value.length===0){z.value=``;return}let{defaultTab:e}=W.value,t=K.value.find(t=>t.config.key===e&&!t.config.disabled)?.config.key||K.value.find(e=>!e.config.disabled)?.config.key;t&&t!==z.value&&(z.value=t,d(()=>{let e=K.value.findIndex(e=>e.config.key===t);e>=0&&R(`tab-change`,t,e)}))};return f(()=>{$()}),p(()=>{V=!0}),C(r(()=>W.value.tabs.map(e=>e.key).join(`,`)),()=>{W.value.tabs.some(e=>e.key===z.value)||$()}),C(()=>W.value.defaultTab,e=>{e&&e!==z.value&&Y(e)}),u({switchToTab:Y,validateCurrentTab:J,currentTab:g(z),totalTabs:r(()=>K.value.length),tabsWithItems:g(K)}),(r,u)=>{let d=T,f=O,p=D,h=k,g=A,_=E;return m(),o(`div`,j,[a(` 无标签配置时的单一面板模式 `),G.value?(m(),o(n,{key:1},[a(` 有标签配置时的分标签模式 `),s(`div`,N,[l(g,{value:z.value,type:W.value.type,size:W.value.size,placement:W.value.placement,animated:W.value.animated,closable:W.value.closable,addable:W.value.addable,class:`form-tabs`,"onUpdate:value":X,onClose:Z,onAdd:Q},{default:w(()=>[(m(!0),o(n,null,v(K.value,t=>(m(),i(h,{key:t.config.key,name:t.config.key,tab:t.config.title,disabled:t.config.disabled||B.value,closable:t.config.closable,"display-directive":`show`},{tab:w(()=>[l(f,{align:`center`,size:8},{default:w(()=>[t.config.icon?(m(),i(e,{key:0,name:t.config.icon,size:16,class:`tab-icon`},null,8,[`name`])):a(`v-if`,!0),s(`span`,null,S(t.config.title),1),W.value.showCount?(m(),i(d,{key:1,value:t.items.length,max:99,show:t.items.length>0,type:`info`},null,8,[`value`,`show`])):a(`v-if`,!0)]),_:2},1024)]),default:w(()=>[W.value.showTabHeader&&t.config.description?(m(),o(`div`,P,[s(`p`,ee,S(t.config.description),1)])):a(`v-if`,!0),s(`div`,F,[(m(!0),o(n,null,v(t.items,(e,t)=>(m(),i(x(e),{key:q(e,t)}))),128))]),t.items.length===0?(m(),i(p,{key:1,description:`暂无表单项`,class:`tab-empty`})):a(`v-if`,!0)]),_:2},1032,[`name`,`tab`,`disabled`,`closable`]))),128))]),_:1},8,[`value`,`type`,`size`,`placement`,`animated`,`closable`,`addable`]),a(` 标签页操作按钮 `),W.value.showActions?(m(),o(`div`,I,[l(f,{justify:`space-between`},{default:w(()=>[l(f,null,{default:w(()=>[W.value.validateBeforeSwitch?(m(),i(_,{key:0,type:`primary`,size
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,nextTick as d,onMounted as f,onScopeDispose as p,openBlock as m,reactive as h,readonly as g,ref as _,renderList as v,renderSlot as y,resolveComponent as b,resolveDynamicComponent as x,toDisplayString as S,watch as C,withCtx as w}from"vue";import{NBadge as T,NButton as E,NEmpty as D,NSpace as O,NTabPane as k,NTabs as A}from"naive-ui";const j={class:`c-form-tabs`},M={key:0,class:`single-panel`},N={class:`tabs-container`},P={key:0,class:`tab-header`},ee={class:`tab-description`},F={class:`tab-form-items`},I={key:0,class:`tabs-actions`};var L=t(u({__name:`index`,props:{controlSize:{},formItems:{},layoutConfig:{default:()=>({})},options:{default:()=>[]},beforeTabChange:{},validateTab:{}},emits:[`tab-change`,`tab-before-change`,`tab-validate`,`tab-close`,`tab-add`],setup(t,{expose:u,emit:b}){let L=t,R=b,z=_(``),B=_(!1),V=!1,H=h({}),U=()=>({tabs:[],type:`line`,size:`medium`,placement:`top`,animated:!0,closable:!1,addable:!1,showTabHeader:!0,showActions:!1,showCount:!1,validateBeforeSwitch:!1,defaultTab:``}),W=r(()=>{let e=U(),t=L.layoutConfig?.tabs||{};return{...e,...t}}),G=r(()=>W.value.tabs.length>0),K=r(()=>{if(!G.value)return[];let e=new Map;return W.value.tabs.forEach(t=>{e.set(t.key,[])}),L.formItems.forEach((t,n)=>{let r=(L.options?.[n])?.layout?.tab||W.value.tabs[0]?.key||`default`;e.has(r)||e.set(r,[]),e.get(r).push(t)}),W.value.tabs.map(t=>({config:t,items:e.get(t.key)||[]}))}),q=(e,t)=>{if(e.key!=null)return String(e.key);let n=e.props;return n?.path?String(n.path):`tab-item-${t}`},J=async()=>{if(!z.value)return!0;try{let e=L.validateTab?await L.validateTab(z.value):!0;return R(`tab-validate`,z.value),H[z.value]=e,e}catch{return H[z.value]=!1,!1}},Y=async e=>{if(V||B.value)return!1;if(!e||e===z.value)return!0;let t=K.value.find(t=>t.config.key===e);if(!t||t.config.disabled)return!1;let n=z.value;try{if(B.value=!0,W.value.validateBeforeSwitch&&z.value&&!await J()||V||z.value!==n)return!1;if(z.value){if(await L.beforeTabChange?.(z.value,e)===!1||V||z.value!==n)return!1;R(`tab-before-change`,z.value,e)}return K.value.some(t=>t.config.key===e&&!t.config.disabled)?(z.value=e,R(`tab-change`,e,K.value.findIndex(t=>t.config.key===e)),!0):!1}catch{return!1}finally{B.value=!1}},X=e=>{Y(e)},Z=e=>{R(`tab-close`,e)},Q=()=>{R(`tab-add`)},$=()=>{if(!G.value||K.value.length===0){z.value=``;return}let{defaultTab:e}=W.value,t=K.value.find(t=>t.config.key===e&&!t.config.disabled)?.config.key||K.value.find(e=>!e.config.disabled)?.config.key;t&&t!==z.value&&(z.value=t,d(()=>{let e=K.value.findIndex(e=>e.config.key===t);e>=0&&R(`tab-change`,t,e)}))};return f(()=>{$()}),p(()=>{V=!0}),C(r(()=>W.value.tabs.map(e=>e.key).join(`,`)),()=>{W.value.tabs.some(e=>e.key===z.value)||$()}),C(()=>W.value.defaultTab,e=>{e&&e!==z.value&&Y(e)}),u({switchToTab:Y,validateCurrentTab:J,currentTab:g(z),totalTabs:r(()=>K.value.length),tabsWithItems:g(K)}),(r,u)=>{let d=T,f=O,p=D,h=k,g=A,_=E;return m(),o(`div`,j,[a(` 无标签配置时的单一面板模式 `),G.value?(m(),o(n,{key:1},[a(` 有标签配置时的分标签模式 `),s(`div`,N,[l(g,{value:z.value,type:W.value.type,size:W.value.size,placement:W.value.placement,animated:W.value.animated,closable:W.value.closable,addable:W.value.addable,class:`form-tabs`,"onUpdate:value":X,onClose:Z,onAdd:Q},{default:w(()=>[(m(!0),o(n,null,v(K.value,t=>(m(),i(h,{key:t.config.key,name:t.config.key,tab:t.config.title,disabled:t.config.disabled||B.value,closable:t.config.closable,"display-directive":`show`},{tab:w(()=>[l(f,{align:`center`,size:8},{default:w(()=>[t.config.icon?(m(),i(e,{key:0,name:t.config.icon,size:16,class:`tab-icon`},null,8,[`name`])):a(`v-if`,!0),s(`span`,null,S(t.config.title),1),W.value.showCount?(m(),i(d,{key:1,value:t.items.length,max:99,show:t.items.length>0,type:`info`},null,8,[`value`,`show`])):a(`v-if`,!0)]),_:2},1024)]),default:w(()=>[W.value.showTabHeader&&t.config.description?(m(),o(`div`,P,[s(`p`,ee,S(t.config.description),1)])):a(`v-if`,!0),s(`div`,F,[(m(!0),o(n,null,v(t.items,(e,t)=>(m(),i(x(e),{key:q(e,t)}))),128))]),t.items.length===0?(m(),i(p,{key:1,description:`暂无表单项`,class:`tab-empty`})):a(`v-if`,!0)]),_:2},1032,[`name`,`tab`,`disabled`,`closable`]))),128))]),_:1},8,[`value`,`type`,`size`,`placement`,`animated`,`closable`,`addable`]),a(` 标签页操作按钮 `),W.value.showActions?(m(),o(`div`,I,[l(f,{justify:`space-between`},{default:w(()=>[l(f,null,{default:w(()=>[W.value.validateBeforeSwitch?(m(),i(_,{key:0,type:`primary`,size:t.controlSize??`small`,onClick:J},{default:w(()=>[l(e,{name:`carbon:star-check`,size:14,style:{"margin-right":`4px`}}),u[0]||=c(` 验证当前标签 `,-1)]),_:1},8,[`size`])):a(`v-if`,!0)]),_:1}),l(f,null,{default:w(()=>[y(r.$slots,`tab-actions`,{currentTab:z.value,totalTabs:K.value.length,validateTab:J,switchToTab:Y},void 0,!0)]),_:3})]),_:3})])):a(`v-if`,!0)])],2112)):(m(),o(`div`,M,[(m(!0),o(n,null,v(t.formItems,(e,t)=>(m(),i(x(e),{key:q(e,t)}))),128))]))])}}}),[[`__scopeId`,`data-v-d2ed671c`]]);export{L as default};
|
package/dist/constants.d.cts
CHANGED
|
@@ -108,12 +108,12 @@ interface CronEmits {
|
|
|
108
108
|
//#endregion
|
|
109
109
|
//#region src/components/C_Cron/index.vue.d.ts
|
|
110
110
|
declare const __VLS_export: vue.DefineComponent<CronProps, CronExpose, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
|
111
|
-
"update:modelValue": (value: string) => any;
|
|
112
111
|
change: (value: string) => any;
|
|
112
|
+
"update:modelValue": (value: string) => any;
|
|
113
113
|
"validation-change": (result: CronValidation) => any;
|
|
114
114
|
}, string, vue.PublicProps, Readonly<CronProps> & Readonly<{
|
|
115
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
116
115
|
onChange?: ((value: string) => any) | undefined;
|
|
116
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
117
117
|
"onValidation-change"?: ((result: CronValidation) => any) | undefined;
|
|
118
118
|
}>, {
|
|
119
119
|
disabled: boolean;
|
package/dist/constants.d.ts
CHANGED
|
@@ -108,12 +108,12 @@ interface CronEmits {
|
|
|
108
108
|
//#endregion
|
|
109
109
|
//#region src/components/C_Cron/index.vue.d.ts
|
|
110
110
|
declare const __VLS_export: vue.DefineComponent<CronProps, CronExpose, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
|
111
|
-
"update:modelValue": (value: string) => any;
|
|
112
111
|
change: (value: string) => any;
|
|
112
|
+
"update:modelValue": (value: string) => any;
|
|
113
113
|
"validation-change": (result: CronValidation) => any;
|
|
114
114
|
}, string, vue.PublicProps, Readonly<CronProps> & Readonly<{
|
|
115
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
116
115
|
onChange?: ((value: string) => any) | undefined;
|
|
116
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
117
117
|
"onValidation-change"?: ((result: CronValidation) => any) | undefined;
|
|
118
118
|
}>, {
|
|
119
119
|
disabled: boolean;
|