vxe-gantt/lib/gantt/src/gantt-chart.min.js

A vue based gantt component

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