vxe-gantt
Version:
A vue based gantt component
1 lines • 8.74 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("./util"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getIcon,renderEmptyElement}=_core.VxeUI,sourceType="gantt",viewType="chart";var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewChart",setup(){let H=(0,_vue.inject)("$xeGantt",{});var e=(0,_vue.inject)("$xeGanttView",{});let{props:z,context:v,reactData:K,internalData:W}=H,{reactData:_,internalData:u}=e,{computeProgressField:Y,computeTitleField:J,computeTypeField:Q,computeTaskBarOpts:X,computeScaleUnit:Z,computeTaskLinkOpts:c,computeTaskBarMilestoneOpts:ee,computeTaskBarSubviewOpts:te}=H.getComputeMaps(),d=e.getComputeMaps().computeNowLineLeft,p=(0,_vue.ref)(),w=(0,_vue.ref)(),h=(0,_vue.ref)(),g=(0,_vue.ref)(),m=(0,_vue.ref)(),x=(d,e,t,a,r,n,s,i)=>{let{resizeHeightFlag:$,pendingRowFlag:p}=d.reactData,{fullAllDataRowIdData:V,pendingRowMaps:w}=d.internalData;var{computeCellOpts:l,computeRowOpts:o,computeDefaultRowHeight:v}=d.getComputeMaps(),l=l.value,o=o.value,v=v.value,h=d.getComputeMaps().computeTreeOpts,h=h.value,h=h.children||h.childrenField,u=H.context.slots;let g=u.taskBar||u["task-bar"];u=u.taskBarOverview||u["task-bar-overview"];let{treeConfig:j,taskBarMilestoneConfig:G,taskBarSubviewConfig:_}=z;var{activeLink:c,activeBarRowid:L}=K;let m=J.value,x=Y.value,b=Q.value;var k=X.value,f=ee.value;let T=te.value,{showOverview:q,barStyle:y}=T,E=Z.value,C={$gantt:H,row:e,scaleType:E},{showProgress:B,showContent:M,contentMethod:D,barStyle:S,moveable:O,showTooltip:A}=k,U=_xeUtils.default.isFunction(S);var k=(S?U?S(C)||void 0:S:{})||{},N=k.round,P=V[t]||{},P=$?(0,_util.getCellRestHeight)(P,l,o,v):0;let R=(0,_utils.getStringValue)(_xeUtils.default.get(e,m));l=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,x)))):0,o=(0,_util.getTaskType)(_xeUtils.default.get(e,b));let I={$gantt:H,source:sourceType,type:viewType,scaleType:E,row:e,$rowIndex:r,rowIndex:a,_rowIndex:n};v={},r={width:`${l||0}%`};U&&({bgColor:a,completedBgColor:n}=k,a&&(v.backgroundColor=_xeUtils.default.isFunction(a)?a(I):a),n)&&(r.backgroundColor=n);let F=[];if(H.renderGanttTaskBarContent)F=H.renderGanttTaskBarContent(I,{$gantt:H,$table:d,rowid:t});else{l=!(!(0,_utils.hasEnableConf)(G,f)||!(0,_util.hasMilestoneTask)(o)),k=!(!(0,_utils.hasEnableConf)(_,T)||!(0,_util.hasSubviewTask)(o));D&&(R=(0,_utils.getStringValue)(D({row:e,title:R,scaleType:E})));let c={};if(A&&(c.onMouseover=e=>{var t=W.dragBarRow,a=Object.assign({$event:e},I);t||H.triggerTaskBarTooltipEvent(e,a),H.dispatchEvent("task-bar-mouseenter",a,e)},c.onMouseleave=e=>{var t=W.dragBarRow,a=Object.assign({$event:e},I);t||H.handleTaskBarTooltipLeaveEvent(e,a),H.dispatchEvent("task-bar-mouseleave",a,e)}),k&&j&&s&&s.length)if(i)q&&F.push((0,_vue.h)("div",{key:"vcso",class:"vxe-gantt-view--chart-subview-wrapper is--overview"},[(0,_vue.h)("div",{key:t,rowid:t,class:["vxe-gantt-view--chart-subview-row",{"is--progress":B,"is--round":N,"is--move":O}]},[(0,_vue.h)("div",{rowid:t,class:[u?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--"+o]},[u?(0,_vue.h)("div",{key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper"},H.callSlot(u,C)):(0,_vue.h)("div",{class:"vxe-gantt-view--chart-subview-bar-content-wrapper"},[M?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-content"},R):renderEmptyElement(H)])])])]));else{let u=[];_xeUtils.default.eachTree(s,e=>{var a={$gantt:H,row:e,scaleType:E},a=(S?U?S(a):S:{})||{},r=a.round,n=d.getRowid(e);let s=(0,_utils.getStringValue)(_xeUtils.default.get(e,m));var i=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,x)))):0,l=(0,_util.getTaskType)(_xeUtils.default.get(e,b)),o=!(!(0,_utils.hasEnableConf)(_,T)||!(0,_util.hasSubviewTask)(l));if(!o){var v,o={width:`${i||0}%`};U&&({bgColor:v,completedBgColor:i}=a,i)&&(o.backgroundColor=i);let t=_xeUtils.default.assign({},I,{row:e,rowIndex:d.getRowIndex(e),$rowIndex:d.getVMRowIndex(e),_rowIndex:d.getVTRowIndex(e)});D&&(s=(0,_utils.getStringValue)(D({row:e,title:s,scaleType:E}))),u.push((0,_vue.h)("div",{key:n,rowid:n,class:["vxe-gantt-view--chart-subview-row","is--"+l,{"is--progress":B,"is--round":r,"is--move":O,"row--pending":!!p&&!!w[n]}]},[(0,_vue.h)("div",{rowid:n,class:[g?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--"+l],style:y?_xeUtils.default.isFunction(y)?y(t):y:void 0,onClick(e){e.stopPropagation(),H.handleTaskBarClickEvent(e,t)},onDblclick(e){e.stopPropagation(),H.handleTaskBarDblclickEvent(e,t)},onMousedown(e){e.stopPropagation(),H.handleTaskBarMousedownEvent&&H.handleTaskBarMousedownEvent(e,t)}},[g?(0,_vue.h)("div",Object.assign({key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper"},c),H.callSlot(g,t)):(0,_vue.h)("div",Object.assign({class:"vxe-gantt-view--chart-subview-bar-content-wrapper"},c),[B?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-progress",style:o}):renderEmptyElement(H),M?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-content"},s):renderEmptyElement(H)])])]))}},{children:h}),F.push((0,_vue.h)("div",{key:"vcsc",class:"vxe-gantt-view--chart-subview-wrapper is--inline"},u))}else g?F.push((0,_vue.h)("div",Object.assign({key:"cbc",class:"vxe-gantt-view--chart-custom-bar-content-wrapper"},c),H.callSlot(g,C))):l?({icon:a,iconStatus:n,iconStyle:k}=f,i={$gantt:H,row:e},F.push((0,_vue.h)("div",Object.assign({key:"vcm",class:"vxe-gantt-view--chart-milestone-wrapper"},c),[(0,_vue.h)("div",{class:["vxe-gantt-view--chart-milestone-icon",n?"theme--"+(_xeUtils.default.isFunction(n)?n(i):n):""],style:k?Object.assign({},_xeUtils.default.isFunction(k)?k(i):k):void 0},[(0,_vue.h)("i",{class:(a?_xeUtils.default.isFunction(a)?a(i):a:"")||getIcon().GANTT_VIEW_TASK_MILESTONE})]),M?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-milestone-content"},R):renderEmptyElement(H)]))):F.push((0,_vue.h)("div",Object.assign({key:"vbc",class:"vxe-gantt-view--chart-bar-content-wrapper"},c),[B?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-progress",style:r}):renderEmptyElement(H),M?(0,_vue.h)("div",{class:"vxe-gantt-view--chart-content"},R):renderEmptyElement(H)]))}return(0,_vue.h)("div",{key:t,rowid:t,class:["vxe-gantt-view--chart-row","is--"+o,{"is--progress":B,"row--pending":!!p&&!!w[t],"is--round":N,"is--move":O}],style:{height:P+"px"},onDragstart(e){W.dragBarRow&&e.preventDefault()},onContextmenu(e){H.handleTaskBarContextmenuEvent(e,I)}},[(0,_vue.h)("div",{class:[g?"vxe-gantt-view--chart-custom-bar":"vxe-gantt-view--chart-bar","is--"+o,{"is--active":L===t,"active--link":c&&(t===""+c.from||t===""+c.to)}],style:v,rowid:t,onClick(e){H.handleTaskBarClickEvent(e,C)},onDblclick(e){H.handleTaskBarDblclickEvent(e,C)},onMousedown(e){H.handleTaskBarMousedownEvent&&H.handleTaskBarMousedownEvent(e,C)}},F)])},b=(o,e)=>{let v=o.props.treeConfig,u=o.reactData.treeExpandedFlag,{fullAllDataRowIdData:c,treeExpandedMaps:d}=o.internalData;var t=o.getComputeMaps().computeTreeOpts,t=t.value;let p=t.transform,w=t.children||t.childrenField,h=_.scrollYLoad,g=[];return e.forEach((e,t)=>{var a=o.getRowid(e),r=c[a]||{};let n=t,s=-1,i=(r&&(n=r.index,s=r._index),!1),l=[];v&&(l=e[w],i=!!u&&l&&0<l.length&&!!d[a]),g.push(x(o,e,a,n,t,s,l,i)),v&&i&&!h&&!p&&g.push(...b(o,l))}),g};return(0,_vue.onMounted)(()=>{var e=u.elemStore,t="main-chart-";e[t+"now-line"]=m,e[t+"task-wrapper"]=w,e[t+"before-wrapper"]=h,e[t+"after-wrapper"]=g}),(0,_vue.onUnmounted)(()=>{var e=u.elemStore,t="main-chart-";e[t+"now-line"]=null,e[t+"task-wrapper"]=null,e[t+"before-wrapper"]=null,e[t+"after-wrapper"]=null}),()=>{var e=u.xeTable,t=v.slots,a=K.dragLinkFromStore,r=_.tableData,n=c.value,s=X.value,i=d.value,{isCurrent:l,isHover:o}=n,s=s.linkCreatable,t=t.taskNowLine||t["task-now-line"];return(0,_vue.h)("div",{ref:p,class:["vxe-gantt-view--chart-wrapper",{"is--cl-drag":a.rowid}]},[0<i?(0,_vue.h)("div",{ref:m,class:"vxe-gantt-view--chart-now-line",style:{left:i+"px"}},t?t({}):[]):renderEmptyElement(H),H.renderGanttTaskChartBefores?(0,_vue.h)("div",{ref:h,class:["vxe-gantt-view--chart-before-wrapper",{"link--current":l,"link--hover":o}]},e&&(0,_utils.isEnableConf)(n)?H.renderGanttTaskChartBefores():[]):renderEmptyElement(H),(0,_vue.h)("div",{ref:w,class:["vxe-gantt-view--chart-task-wrapper",{"link--current":l,"link--create":s}]},e?b(e,r):[]),H.renderGanttTaskChartAfters?(0,_vue.h)("div",{ref:g,class:"vxe-gantt-view--chart-after-wrapper"},e&&(0,_utils.isEnableConf)(n)?H.renderGanttTaskChartAfters():[]):renderEmptyElement(H)])}}});