1206 lines
37 KiB
Vue
1206 lines
37 KiB
Vue
|
<template>
|
|||
|
|
<el-table
|
|||
|
|
ref="wl-gantt"
|
|||
|
|
class="wl-gantt"
|
|||
|
|
:fit="fit"
|
|||
|
|
:size="size"
|
|||
|
|
:border="border"
|
|||
|
|
:data="selfData"
|
|||
|
|
:stripe="stripe"
|
|||
|
|
:height="height"
|
|||
|
|
:row-key="rowKey"
|
|||
|
|
:row-style="rowStyle"
|
|||
|
|
:class="dateTypeClass"
|
|||
|
|
:cell-style="cellStyle"
|
|||
|
|
:max-height="maxHeight"
|
|||
|
|
:tree-props="selfProps"
|
|||
|
|
:current-row-key="rowKey"
|
|||
|
|
:row-class-name="rowClassName"
|
|||
|
|
:cell-class-name="cellClassName"
|
|||
|
|
:expand-row-keys="expandRowKeys"
|
|||
|
|
:header-row-style="headerRowStyle"
|
|||
|
|
:header-cell-style="headerCellStyle"
|
|||
|
|
:default-expand-all="defaultExpandAll"
|
|||
|
|
:header-row-class-name="headerRowClassName"
|
|||
|
|
:highlight-current-row="highlightCurrentRow"
|
|||
|
|
:header-cell-class-name="headerCellClassName"
|
|||
|
|
@header-contextmenu="handleHeaderContextMenu"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
@row-contextmenu="handleRowContextMenu"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
@cell-mouse-enter="handleMouseEnter"
|
|||
|
|
@cell-mouse-leave="handleMouseLeave"
|
|||
|
|
@expand-change="handleExpandChange"
|
|||
|
|
@filter-change="handleFilterChange"
|
|||
|
|
@cell-dblclick="handleCellDbClick"
|
|||
|
|
@header-click="handleHeaderClick"
|
|||
|
|
@row-dblclick="handleRowDbClick"
|
|||
|
|
@sort-change="handleSortChange"
|
|||
|
|
@cell-click="handleCellClick"
|
|||
|
|
@select-all="handleSelectAll"
|
|||
|
|
@row-click="handleRowClick"
|
|||
|
|
@select="handleSelect"
|
|||
|
|
>
|
|||
|
|
<slot name="prv"></slot>
|
|||
|
|
<el-table-column
|
|||
|
|
fixed
|
|||
|
|
label="名称"
|
|||
|
|
min-width="200"
|
|||
|
|
show-overflow-tooltip
|
|||
|
|
:prop="selfProps.name"
|
|||
|
|
:formatter="nameFormatter"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
:resizable="false"
|
|||
|
|
fixed
|
|||
|
|
width="160"
|
|||
|
|
align="center"
|
|||
|
|
:prop="selfProps.startDate"
|
|||
|
|
label="开始日期"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-if="scope.row._start_edit"
|
|||
|
|
v-model="scope.row[selfProps.startDate]"
|
|||
|
|
@blur="scope.row._start_edit = false"
|
|||
|
|
@change="startDateChange(scope.row)"
|
|||
|
|
type="date"
|
|||
|
|
size="medium"
|
|||
|
|
class="u-full"
|
|||
|
|
:clearable="false"
|
|||
|
|
ref="wl-start-date"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
placeholder="请选择开始日期"
|
|||
|
|
></el-date-picker>
|
|||
|
|
<span
|
|||
|
|
v-else
|
|||
|
|
@click="cellEdit(scope.row, '_start_edit', 'wl-start-date')"
|
|||
|
|
>{{timeFormat(scope.row[selfProps.startDate])}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
fixed
|
|||
|
|
:resizable="false"
|
|||
|
|
width="160"
|
|||
|
|
align="center"
|
|||
|
|
:prop="selfProps.endDate"
|
|||
|
|
label="结束日期"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-if="scope.row._end_edit"
|
|||
|
|
v-model="scope.row[selfProps.endDate]"
|
|||
|
|
@blur="scope.row._end_edit = false"
|
|||
|
|
@change="endDateChange(scope.row)"
|
|||
|
|
type="date"
|
|||
|
|
size="medium"
|
|||
|
|
class="u-full"
|
|||
|
|
:clearable="false"
|
|||
|
|
ref="wl-end-date"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
placeholder="请选择结束日期"
|
|||
|
|
></el-date-picker>
|
|||
|
|
<span
|
|||
|
|
v-else
|
|||
|
|
@click="cellEdit(scope.row, '_end_edit', 'wl-end-date')"
|
|||
|
|
>{{timeFormat(scope.row[selfProps.endDate])}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<slot></slot>
|
|||
|
|
<!-- year and mouth gantt -->
|
|||
|
|
<template v-if="self_date_type === 'yearAndMonth'">
|
|||
|
|
<el-table-column
|
|||
|
|
:resizable="false"
|
|||
|
|
v-for="year in ganttTitleDate"
|
|||
|
|
:label="year.name"
|
|||
|
|
:key="year.id"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
class-name="wl-gantt-item"
|
|||
|
|
v-for="month in year.children"
|
|||
|
|
:resizable="false"
|
|||
|
|
:key="month.id"
|
|||
|
|
:label="month.name"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div :class="dayGanttType(scope.row, month.full_date, 'months')"></div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<!-- year and week gantt -->
|
|||
|
|
<template v-else-if="self_date_type === 'yearAndWeek'">
|
|||
|
|
<el-table-column
|
|||
|
|
:resizable="false"
|
|||
|
|
v-for="i in ganttTitleDate"
|
|||
|
|
:label="i.full_date"
|
|||
|
|
:key="i.id"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
class-name="wl-gantt-item"
|
|||
|
|
v-for="t in i.children"
|
|||
|
|
:resizable="false"
|
|||
|
|
:key="t.id"
|
|||
|
|
:label="t.name"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div :class="dayGanttType(scope.row, t.full_date, 'week')"></div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
<!-- mouth and day gantt -->
|
|||
|
|
<template v-else>
|
|||
|
|
<el-table-column
|
|||
|
|
:resizable="false"
|
|||
|
|
v-for="i in ganttTitleDate"
|
|||
|
|
:label="i.full_date"
|
|||
|
|
:key="i.id"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
class-name="wl-gantt-item"
|
|||
|
|
v-for="t in i.children"
|
|||
|
|
:resizable="false"
|
|||
|
|
:key="t.id"
|
|||
|
|
:label="t.name"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div :class="dayGanttType(scope.row, t.full_date)"></div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table-column>
|
|||
|
|
</template>
|
|||
|
|
</el-table>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import dayjs from "dayjs"; // 导入日期js
|
|||
|
|
const uuidv4 = require("uuid/v4"); // 导入uuid生成插件
|
|||
|
|
import isBetween from "dayjs/plugin/isBetween";
|
|||
|
|
dayjs.extend(isBetween);
|
|||
|
|
import { deepClone, flattenDeep, getMin, getMax } from "@/utils/array.js";
|
|||
|
|
export default {
|
|||
|
|
name: "GanttChart",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
self_start_date: "", // 项目开始时间
|
|||
|
|
self_end_date: "", // 项目结束时间
|
|||
|
|
self_data_list: [], // 一维化后的gantt数据
|
|||
|
|
self_date_type: "", // 自身日期类型
|
|||
|
|
self_id: 1, // 自增id
|
|||
|
|
multipleSelection: [], // 多选数据
|
|||
|
|
currentRow: null // 单选数据
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// gantt数据
|
|||
|
|
data: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 日期类型
|
|||
|
|
dateType: {
|
|||
|
|
type: String,
|
|||
|
|
default: "yearAndMonth" // monthAndDay,yearAndMonth,yearAndWeek
|
|||
|
|
},
|
|||
|
|
// 树表配置项
|
|||
|
|
props: Object,
|
|||
|
|
// 开始日期
|
|||
|
|
startDate: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
// 结束时间
|
|||
|
|
endDate: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
// 是否检查源数据符合规则，默认开启，如果源数据已遵循project规则，可设置为false以提高性能
|
|||
|
|
checkSource: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 废弃：反而会因为频繁的判断而影响性能
|
|||
|
|
// 是否生成自增id并组成parents来满足树链的查询条件，如果数据本身已有自增id，可设置为false以提高性能
|
|||
|
|
// 如果设置为false，则数据内必须包含自增id字段：identityId，parents字段必须以`,`分割。
|
|||
|
|
// 字段名可通过props配置，自增id必须唯一并尽可能的短，如1，2，3...，parents应为祖先自增id通过`,`拼接直至父级
|
|||
|
|
recordParents: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否使用id来作为自增id，如果是请保证id本来就简短的数字型而不是较长的字符串或guid
|
|||
|
|
treatIdAsIdentityId: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 自动变化gantt标题日期模式
|
|||
|
|
autoGanttDateType: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
nameFormatter: Function, // 名称列的格式化内容函数
|
|||
|
|
// ---------------------------------------------以下为el-table Attributes--------------------------------------------
|
|||
|
|
defaultExpandAll: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}, // 是否全部展开
|
|||
|
|
rowKey: {
|
|||
|
|
type: String,
|
|||
|
|
default: "id"
|
|||
|
|
}, // 必须指定key来渲染树形数据
|
|||
|
|
height: [String, Number], // 列表高度
|
|||
|
|
maxHeight: [String, Number], // 列表最大高度
|
|||
|
|
stripe: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}, // 是否为斑马纹
|
|||
|
|
highlightCurrentRow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}, // 是否要高亮当前行
|
|||
|
|
border: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}, // 是否带有纵向边框
|
|||
|
|
fit: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}, // 列的宽度是否自撑开
|
|||
|
|
size: String, // Table 的尺寸
|
|||
|
|
rowClassName: Function, // 行的 className 的回调方法
|
|||
|
|
rowStyle: Function, // 行的 style 的回调方法
|
|||
|
|
cellClassName: Function, // 单元格的 className 的回调方法
|
|||
|
|
cellStyle: Function, // 单元格的 style 的回调方法
|
|||
|
|
headerRowClassName: {
|
|||
|
|
type: [Function, String],
|
|||
|
|
default: "wl-gantt-header"
|
|||
|
|
}, // 表头行的 className 的回调方法
|
|||
|
|
headerRowStyle: [Function, Object], // 表头行的 style 的回调方法
|
|||
|
|
headerCellClassName: [Function, String], // 表头单元格的 className 的回调方法
|
|||
|
|
headerCellStyle: [Function, Object], // 表头单元格的 style 的回调方法
|
|||
|
|
expandRowKeys: Array // 可以通过该属性设置 Table 目前的展开行
|
|||
|
|
// 是否使用一维数据组成树
|
|||
|
|
/* arrayToTree: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
} */
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 甘特图标题日期分配
|
|||
|
|
ganttTitleDate() {
|
|||
|
|
// 分解开始和结束日期
|
|||
|
|
let start_date_spilt = dayjs(this.self_start_date)
|
|||
|
|
.format("YYYY-M-D")
|
|||
|
|
.split("-");
|
|||
|
|
let end_date_spilt = dayjs(this.self_end_date)
|
|||
|
|
.format("YYYY-M-D")
|
|||
|
|
.split("-");
|
|||
|
|
let start_year = Number(start_date_spilt[0]);
|
|||
|
|
let start_mouth = Number(start_date_spilt[1]);
|
|||
|
|
let end_year = Number(end_date_spilt[0]);
|
|||
|
|
let end_mouth = Number(end_date_spilt[1]);
|
|||
|
|
// 自动更新日期类型以适应任务时间范围跨度
|
|||
|
|
if (this.autoGanttDateType) {
|
|||
|
|
// 计算日期跨度
|
|||
|
|
let mouth_diff = this.timeDiffTime(
|
|||
|
|
this.self_start_date,
|
|||
|
|
this.self_end_date,
|
|||
|
|
"months"
|
|||
|
|
);
|
|||
|
|
if (mouth_diff > 12) {
|
|||
|
|
// 12个月以上的分到yearAndMouth
|
|||
|
|
this.self_date_type = "yearAndMonth";
|
|||
|
|
} else if (mouth_diff > 2) {
|
|||
|
|
// 2个月以上的分到yearAndWeek
|
|||
|
|
this.self_date_type = "yearAndWeek";
|
|||
|
|
} else {
|
|||
|
|
this.self_date_type = "monthAndDay";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 不自动更新日期类型，以dateType固定展示
|
|||
|
|
if (this.self_date_type === "yearAndWeek") {
|
|||
|
|
return this.yearAndWeekTitleDate(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_year,
|
|||
|
|
end_mouth
|
|||
|
|
);
|
|||
|
|
} else if (this.self_date_type === "monthAndDay") {
|
|||
|
|
return this.mouthAndDayTitleDate(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_year,
|
|||
|
|
end_mouth
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
return this.yearAndMouthTitleDate(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_year,
|
|||
|
|
end_mouth
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 数据
|
|||
|
|
selfData() {
|
|||
|
|
let _data = this.data || [];
|
|||
|
|
this.self_data_list = flattenDeep(_data, this.selfProps.children);
|
|||
|
|
this.handleData(_data);
|
|||
|
|
return _data;
|
|||
|
|
},
|
|||
|
|
// 树表配置项
|
|||
|
|
selfProps() {
|
|||
|
|
return {
|
|||
|
|
hasChildren: "hasChildren", // 字段来指定哪些行是包含子节点
|
|||
|
|
children: "children", // children字段来表示有子节点
|
|||
|
|
name: "name", // 任务名称字段
|
|||
|
|
id: "id", // id字段
|
|||
|
|
pid: "pid", // pid字段
|
|||
|
|
startDate: "startDate", // 开始时间字段
|
|||
|
|
endDate: "endDate", // 结束时间字段
|
|||
|
|
identityId: "identityId",
|
|||
|
|
parents: "parents",
|
|||
|
|
pre: "pre", // 前置任务字段【注意：如果使用recordParents，则pre值应是目标对象的identityId字段(可配置)】
|
|||
|
|
...this.props
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 根据日期类型改样式
|
|||
|
|
dateTypeClass() {
|
|||
|
|
if (this.self_date_type === "yearAndMonth") {
|
|||
|
|
return "year-and-month";
|
|||
|
|
} else if (this.self_date_type === "monthAndDay") {
|
|||
|
|
return "month-and-day";
|
|||
|
|
} else if (this.self_date_type === "yearAndWeek") {
|
|||
|
|
return "year-and-week";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 开始时间改变
|
|||
|
|
* row: object 当前行数据
|
|||
|
|
*/
|
|||
|
|
startDateChange(row) {
|
|||
|
|
// 如果将开始时间后移，结束时间也应后移
|
|||
|
|
let _delay = this.timeIsBefore(
|
|||
|
|
row._oldStartDate,
|
|||
|
|
row[this.selfProps.startDate]
|
|||
|
|
);
|
|||
|
|
if (_delay) {
|
|||
|
|
row[this.selfProps.endDate] = this.timeAdd(
|
|||
|
|
row[this.selfProps.endDate],
|
|||
|
|
row._cycle
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
// 如果开始早于项目开始，则把项目开始提前
|
|||
|
|
let _early_project_start = this.timeIsBefore(
|
|||
|
|
row[this.selfProps.startDate],
|
|||
|
|
this.self_start_date
|
|||
|
|
);
|
|||
|
|
if (_early_project_start) {
|
|||
|
|
this.self_start_date = row[this.selfProps.startDate];
|
|||
|
|
}
|
|||
|
|
this.emitTimeChange(row);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 结束时间改变
|
|||
|
|
* row: object 当前行数据
|
|||
|
|
*/
|
|||
|
|
endDateChange(row) {
|
|||
|
|
this.emitTimeChange(row);
|
|||
|
|
// 如果开始晚于结束，提示
|
|||
|
|
/* if (
|
|||
|
|
this.timeIsBefore(
|
|||
|
|
row[this.selfProps.endDate],
|
|||
|
|
row[this.selfProps.startDate]
|
|||
|
|
)
|
|||
|
|
) {
|
|||
|
|
row[this.selfProps.startDate] = row._oldStartDate;
|
|||
|
|
this.$message({
|
|||
|
|
showClose: true,
|
|||
|
|
message: "开始时间不可以晚于结束时间",
|
|||
|
|
type: "error"
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
} */
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 单元格编辑
|
|||
|
|
* row: object 当前行数据
|
|||
|
|
* key: string 需要操作的字段
|
|||
|
|
* ref：object 需要获取焦点的dom
|
|||
|
|
*/
|
|||
|
|
cellEdit(row, key, ref) {
|
|||
|
|
row[key] = true;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs[ref].focus();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 查询目标是否在父级链或者全部子集中
|
|||
|
|
* item 当前节点
|
|||
|
|
* pre 前置节点
|
|||
|
|
*/
|
|||
|
|
targetInParentsOrChildren(item, pre) {
|
|||
|
|
let _parents = item._parents.split(",");
|
|||
|
|
let _children = item._all_children.map(i => i._identityId);
|
|||
|
|
return _children.concat(_parents).some(i => i == pre._identityId);
|
|||
|
|
/* let _parents = item[this.selfProps.parents].split(",").filter(i => !!i);
|
|||
|
|
let _children = item._all_children.map(i => i[this.selfProps.identityId]);
|
|||
|
|
return _children.push(..._parents).some(i => i == item[this.selfProps.pre]); */
|
|||
|
|
},
|
|||
|
|
// 以下是表格-日期-gantt生成函数----------------------------------------生成gantt表格-------------------------------------
|
|||
|
|
/**
|
|||
|
|
* 年-月模式gantt标题
|
|||
|
|
* start_year: 起始年
|
|||
|
|
* start_mouth：起始月
|
|||
|
|
* end_year：结束年
|
|||
|
|
* end_mouth：结束月
|
|||
|
|
*/
|
|||
|
|
yearAndMouthTitleDate(start_year, start_mouth, end_year, end_mouth) {
|
|||
|
|
// 日期数据盒子
|
|||
|
|
let dates = [
|
|||
|
|
{
|
|||
|
|
name: `${start_year}年`,
|
|||
|
|
date: start_year,
|
|||
|
|
id: uuidv4(),
|
|||
|
|
children: []
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
// 处理年份
|
|||
|
|
let year_diff = end_year - start_year;
|
|||
|
|
// 年间隔为同一年
|
|||
|
|
if (year_diff === 0) {
|
|||
|
|
let isLeap = this.isLeap(start_year); // 是否闰年
|
|||
|
|
let mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
isLeap,
|
|||
|
|
false
|
|||
|
|
); // 处理月份
|
|||
|
|
dates[0].children = mouths;
|
|||
|
|
return dates;
|
|||
|
|
}
|
|||
|
|
// 处理开始月份
|
|||
|
|
let startIsLeap = this.isLeap(start_year);
|
|||
|
|
let start_mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
13,
|
|||
|
|
startIsLeap,
|
|||
|
|
false
|
|||
|
|
);
|
|||
|
|
// 处理结束月份
|
|||
|
|
let endIsLeap = this.isLeap(end_year);
|
|||
|
|
let end_mouths = this.generationMonths(
|
|||
|
|
end_year,
|
|||
|
|
1,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
endIsLeap,
|
|||
|
|
false
|
|||
|
|
);
|
|||
|
|
// 年间隔等于一年
|
|||
|
|
if (year_diff === 1) {
|
|||
|
|
dates[0].children = start_mouths;
|
|||
|
|
dates.push({
|
|||
|
|
name: `${end_year}年`,
|
|||
|
|
date: end_year,
|
|||
|
|
children: end_mouths,
|
|||
|
|
id: uuidv4()
|
|||
|
|
});
|
|||
|
|
return dates;
|
|||
|
|
}
|
|||
|
|
// 年间隔大于1年
|
|||
|
|
if (year_diff > 1) {
|
|||
|
|
for (let i = 1; i < year_diff; i++) {
|
|||
|
|
let item_year = start_year + i;
|
|||
|
|
let isLeap = this.isLeap(item_year);
|
|||
|
|
let month_and_day = this.generationMonths(
|
|||
|
|
item_year,
|
|||
|
|
1,
|
|||
|
|
13,
|
|||
|
|
isLeap,
|
|||
|
|
false
|
|||
|
|
);
|
|||
|
|
dates.push({
|
|||
|
|
name: `${item_year}年`,
|
|||
|
|
date: item_year,
|
|||
|
|
id: uuidv4(),
|
|||
|
|
children: month_and_day
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
dates.push({
|
|||
|
|
name: `${end_year}年`,
|
|||
|
|
date: item_year,
|
|||
|
|
children: end_mouths,
|
|||
|
|
id: uuidv4()
|
|||
|
|
});
|
|||
|
|
return dates;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 年-周模式gantt标题
|
|||
|
|
* start_year: 起始年
|
|||
|
|
* start_mouth：起始月
|
|||
|
|
* end_year：结束年
|
|||
|
|
* end_mouth：结束月
|
|||
|
|
*/
|
|||
|
|
yearAndWeekTitleDate(start_year, start_mouth, end_year, end_mouth) {
|
|||
|
|
// 处理年份
|
|||
|
|
let year_diff = end_year - start_year;
|
|||
|
|
// 只存在同年或前后年的情况
|
|||
|
|
if (year_diff === 0) {
|
|||
|
|
// 年间隔为同一年
|
|||
|
|
let isLeap = this.isLeap(start_year); // 是否闰年
|
|||
|
|
let mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
isLeap,
|
|||
|
|
true,
|
|||
|
|
true
|
|||
|
|
); // 处理月份
|
|||
|
|
return mouths;
|
|||
|
|
}
|
|||
|
|
// 处理开始月份
|
|||
|
|
let startIsLeap = this.isLeap(start_year);
|
|||
|
|
let start_mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
13,
|
|||
|
|
startIsLeap,
|
|||
|
|
true,
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
// 处理结束月份
|
|||
|
|
let endIsLeap = this.isLeap(end_year);
|
|||
|
|
let end_mouths = this.generationMonths(
|
|||
|
|
end_year,
|
|||
|
|
1,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
endIsLeap,
|
|||
|
|
true,
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
return start_mouths.concat(end_mouths);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 月-日模式gantt标题
|
|||
|
|
* start_year: 起始年
|
|||
|
|
* start_mouth：起始月
|
|||
|
|
* end_year：结束年
|
|||
|
|
* end_mouth：结束月
|
|||
|
|
*/
|
|||
|
|
mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth) {
|
|||
|
|
// 处理年份
|
|||
|
|
let year_diff = end_year - start_year;
|
|||
|
|
// 只存在同年或前后年的情况
|
|||
|
|
if (year_diff === 0) {
|
|||
|
|
// 年间隔为同一年
|
|||
|
|
let isLeap = this.isLeap(start_year); // 是否闰年
|
|||
|
|
let mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
isLeap
|
|||
|
|
); // 处理月份
|
|||
|
|
return mouths;
|
|||
|
|
}
|
|||
|
|
// 处理开始月份
|
|||
|
|
let startIsLeap = this.isLeap(start_year);
|
|||
|
|
let start_mouths = this.generationMonths(
|
|||
|
|
start_year,
|
|||
|
|
start_mouth,
|
|||
|
|
13,
|
|||
|
|
startIsLeap
|
|||
|
|
);
|
|||
|
|
// 处理结束月份
|
|||
|
|
let endIsLeap = this.isLeap(end_year);
|
|||
|
|
let end_mouths = this.generationMonths(
|
|||
|
|
end_year,
|
|||
|
|
1,
|
|||
|
|
end_mouth + 1,
|
|||
|
|
endIsLeap
|
|||
|
|
);
|
|||
|
|
return start_mouths.concat(end_mouths);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 生成月份函数
|
|||
|
|
* year: Number 当前年份
|
|||
|
|
* start_num: Number 开始月分
|
|||
|
|
* end_num：Number 结束月份
|
|||
|
|
* isLeap: Boolean 是否闰年
|
|||
|
|
* insert_days: Boolean 是否需要插入 日
|
|||
|
|
* week: 是否以周的间隔
|
|||
|
|
*/
|
|||
|
|
generationMonths(
|
|||
|
|
year,
|
|||
|
|
start_num = 1,
|
|||
|
|
end_num = 13,
|
|||
|
|
isLeap = false,
|
|||
|
|
insert_days = true,
|
|||
|
|
week = false
|
|||
|
|
) {
|
|||
|
|
let months = [];
|
|||
|
|
if (insert_days) {
|
|||
|
|
// 无需 日 的模式
|
|||
|
|
for (let i = start_num; i < end_num; i++) {
|
|||
|
|
// 需要 日 的模式
|
|||
|
|
let days = this.generationDays(year, i, isLeap, week);
|
|||
|
|
months.push({
|
|||
|
|
name: `${i}月`,
|
|||
|
|
date: i,
|
|||
|
|
full_date: `${year}-${i}`,
|
|||
|
|
children: days,
|
|||
|
|
id: uuidv4()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return months;
|
|||
|
|
}
|
|||
|
|
for (let i = start_num; i < end_num; i++) {
|
|||
|
|
// 需要 日 的模式
|
|||
|
|
months.push({
|
|||
|
|
name: `${i}月`,
|
|||
|
|
date: i,
|
|||
|
|
full_date: `${year}-${i}`,
|
|||
|
|
id: uuidv4()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return months;
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 生成日期函数
|
|||
|
|
* year: Number 当前年份
|
|||
|
|
* month: Number 当前月份
|
|||
|
|
* isLeap: Boolean 是否闰年
|
|||
|
|
* week: Boolean 是否间隔一周
|
|||
|
|
*/
|
|||
|
|
generationDays(year, month, isLeap = false, week = false) {
|
|||
|
|
let big_month = [1, 3, 5, 7, 8, 10, 12].includes(month);
|
|||
|
|
let small_month = [4, 6, 9, 11].includes(month);
|
|||
|
|
let dates_num = big_month ? 32 : small_month ? 31 : isLeap ? 30 : 29;
|
|||
|
|
let days = [];
|
|||
|
|
if (week) {
|
|||
|
|
let _day = 1; // 从周日开始
|
|||
|
|
let _start_day_inweek = this.timeInWeek(`${year}-${month}-1`);
|
|||
|
|
if (_start_day_inweek !== 0) {
|
|||
|
|
_day = 8 - _start_day_inweek;
|
|||
|
|
}
|
|||
|
|
for (let i = _day; i < dates_num; i += 7) {
|
|||
|
|
days.push({
|
|||
|
|
date: i,
|
|||
|
|
name: `${i}日`,
|
|||
|
|
id: uuidv4(),
|
|||
|
|
full_date: `${year}-${month}-${i}`
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
for (let i = 1; i < dates_num; i++) {
|
|||
|
|
days.push({
|
|||
|
|
date: i,
|
|||
|
|
name: `${i}日`,
|
|||
|
|
id: uuidv4(),
|
|||
|
|
full_date: `${year}-${month}-${i}`
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return days;
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否闰年函数
|
|||
|
|
* year: Number 当前年份
|
|||
|
|
*/
|
|||
|
|
isLeap(year) {
|
|||
|
|
return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 当前日期gantt状态
|
|||
|
|
* row: object 当前行信息
|
|||
|
|
* date: string 当前格子日期
|
|||
|
|
* unit: string 时间单位，以天、月、年计算
|
|||
|
|
*/
|
|||
|
|
dayGanttType(row, date, unit = "days") {
|
|||
|
|
let start_date = row[this.selfProps.startDate];
|
|||
|
|
let end_date = row[this.selfProps.endDate];
|
|||
|
|
let between = dayjs(date).isBetween(start_date, end_date, unit);
|
|||
|
|
if (between) {
|
|||
|
|
return "wl-item-on";
|
|||
|
|
}
|
|||
|
|
let start = dayjs(start_date).isSame(date, unit);
|
|||
|
|
let end = dayjs(end_date).isSame(date, unit);
|
|||
|
|
if (start && end) {
|
|||
|
|
return "wl-item-on wl-item-full";
|
|||
|
|
}
|
|||
|
|
if (start) {
|
|||
|
|
return "wl-item-on wl-item-start";
|
|||
|
|
}
|
|||
|
|
if (end) {
|
|||
|
|
return "wl-item-on wl-item-end";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 以下是时间计算类函数 ------------------------------------------------------时间计算---------------------------------------
|
|||
|
|
/**
|
|||
|
|
* 计算时差
|
|||
|
|
* startDate：开始时间
|
|||
|
|
* endDate：结束时间
|
|||
|
|
* unit：单位 days、months、yesrs
|
|||
|
|
*/
|
|||
|
|
timeDiffTime(startDate, endDate, unit = "days") {
|
|||
|
|
return dayjs(endDate).diff(startDate, unit);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 比较时间，是否之前
|
|||
|
|
* startDate：开始时间
|
|||
|
|
* endDate：结束时间
|
|||
|
|
* unit：单位 days、months、yesrs
|
|||
|
|
*/
|
|||
|
|
timeIsBefore(startDate, endDate, unit = "days") {
|
|||
|
|
return dayjs(startDate).isBefore(endDate, unit);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 时间加计算函数
|
|||
|
|
* date：原时间
|
|||
|
|
* num：需要增加的时间数量
|
|||
|
|
* nuit：增加时间的单位 day year
|
|||
|
|
*/
|
|||
|
|
timeAdd(date, num = 1, nuit = "day", format = "YYYY-MM-DD") {
|
|||
|
|
return dayjs(date)
|
|||
|
|
.add(num, nuit)
|
|||
|
|
.format(format);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 时间格式化函数
|
|||
|
|
* date 需要格式化的数据
|
|||
|
|
* format 格式化的格式
|
|||
|
|
*/
|
|||
|
|
timeFormat(date, format = "YYYY-MM-DD") {
|
|||
|
|
return dayjs(date).format(format);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 查询时间是周几
|
|||
|
|
*/
|
|||
|
|
timeInWeek(date) {
|
|||
|
|
return dayjs(date).day();
|
|||
|
|
},
|
|||
|
|
// 以下为输出数据函数 --------------------------------------------------------------输出数据------------------------------------
|
|||
|
|
emitTimeChange(item) {
|
|||
|
|
this.$emit("timeChange", item);
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$set(item, "_oldStartDate", item[this.selfProps.startDate]);
|
|||
|
|
this.$set(item, "_oldEndDate", item[this.selfProps.endDate]);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 处理外部数据 ---------------------------------------------------------------原始数据处理-------------------------------------
|
|||
|
|
handleData(data, parent = null, level = 0) {
|
|||
|
|
level++;
|
|||
|
|
data.forEach(i => {
|
|||
|
|
this.$set(i, "_parent", parent); // 添加父级字段
|
|||
|
|
this.$set(i, "_level", level); // 添加层级字段
|
|||
|
|
if (!i._oldStartDate) {
|
|||
|
|
this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
|
|||
|
|
}
|
|||
|
|
if (!i._oldEndDate) {
|
|||
|
|
this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
|
|||
|
|
}
|
|||
|
|
// 当结束时间早于开始时间时，自动处理结束时间为开始时间延后一天
|
|||
|
|
let _end_early_start = this.timeIsBefore(
|
|||
|
|
i[this.selfProps.endDate],
|
|||
|
|
i[this.selfProps.startDate]
|
|||
|
|
);
|
|||
|
|
if (_end_early_start) {
|
|||
|
|
this.$set(i, this.selfProps.endDate, i[this.selfProps.startDate]);
|
|||
|
|
this.$set(i, "_cycle", 1); // 添加工期字段
|
|||
|
|
this.emitTimeChange(i); // 将发生时间更新的数据输出
|
|||
|
|
} else {
|
|||
|
|
let _time_diff = this.timeDiffTime(
|
|||
|
|
i[this.selfProps.startDate],
|
|||
|
|
i[this.selfProps.endDate]
|
|||
|
|
);
|
|||
|
|
this.$set(i, "_cycle", _time_diff + 1); // 添加工期字段
|
|||
|
|
} // 添加工期字段
|
|||
|
|
// 如果当前节点的开始时间早于父节点的开始时间，则将开始时间与父节点相同
|
|||
|
|
this.parentStartDateToChild(i);
|
|||
|
|
// 校验结束时间是否晚于子节点，如不则将节点结束时间改为最晚子节点
|
|||
|
|
this.childEndDateToParent(i);
|
|||
|
|
// 添加自增id字段及树链组成的parents字段
|
|||
|
|
this.recordIdentityIdAndParents(i);
|
|||
|
|
if (Array.isArray(i[this.selfProps.children])) {
|
|||
|
|
this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
|
|||
|
|
let _all_children = flattenDeep(
|
|||
|
|
i[this.selfProps.children],
|
|||
|
|
this.selfProps.children
|
|||
|
|
);
|
|||
|
|
this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
|
|||
|
|
this.handleData(i[this.selfProps.children], i, level);
|
|||
|
|
} else {
|
|||
|
|
this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
|
|||
|
|
this.$set(i, "_all_children", []); // 添加全部子节点字段
|
|||
|
|
}
|
|||
|
|
// 处理前置任务
|
|||
|
|
this.handlePreTask(i);
|
|||
|
|
if (!i.hasOwnProperty("_start_edit")) {
|
|||
|
|
// 添加编辑字段管理可编辑项的显示
|
|||
|
|
this.$set(i, "_start_edit", false);
|
|||
|
|
this.$set(i, "_end_edit", false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 取父节点开始时间给早于父节点开始时间的子节点
|
|||
|
|
parentStartDateToChild(item) {
|
|||
|
|
if (!item._parent) return;
|
|||
|
|
// 如果子节点时间早于父节点，则将子节点开始时间后移至父节点开始时间,并将结束时间平移【即工期不变】
|
|||
|
|
let _child_early_parent = this.timeIsBefore(
|
|||
|
|
item[this.selfProps.startDate],
|
|||
|
|
item._parent[this.selfProps.startDate]
|
|||
|
|
);
|
|||
|
|
if (_child_early_parent) {
|
|||
|
|
// 修正子节点开始时间
|
|||
|
|
this.$set(
|
|||
|
|
item,
|
|||
|
|
this.selfProps.startDate,
|
|||
|
|
item._parent[this.selfProps.startDate]
|
|||
|
|
);
|
|||
|
|
// 修正子节点结束时间
|
|||
|
|
let _to_endDate = this.timeAdd(
|
|||
|
|
item[this.selfProps.startDate],
|
|||
|
|
item._cycle
|
|||
|
|
);
|
|||
|
|
this.$set(item, this.selfProps.endDate, _to_endDate);
|
|||
|
|
this.emitTimeChange(item); // 将发生时间更新的数据输出
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 取数组结束时间最大值，如果最大值比父级结束时间大，更新父级结束时间
|
|||
|
|
childEndDateToParent(item) {
|
|||
|
|
if (!Array.isArray(item[this.selfProps.children])) return;
|
|||
|
|
let _child_max = getMax(
|
|||
|
|
item[this.selfProps.children],
|
|||
|
|
this.selfProps.endDate,
|
|||
|
|
true
|
|||
|
|
); // 取子节点中最晚的结束时间
|
|||
|
|
let _parent_end = dayjs(item[this.selfProps.endDate]).valueOf();
|
|||
|
|
if (_child_max > _parent_end) {
|
|||
|
|
// 如果子节点结束时间比父节点晚，则将父节点结束时间退后
|
|||
|
|
this.$set(item, this.selfProps.endDate, this.timeFormat(_child_max));
|
|||
|
|
this.emitTimeChange(item); // 将发生时间更新的数据输出
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 处理前置任务节点
|
|||
|
|
handlePreTask(item) {
|
|||
|
|
if (!item[this.selfProps.pre]) return;
|
|||
|
|
// 找到前置目标节点
|
|||
|
|
let _pre_target = this.self_data_list.find(
|
|||
|
|
i => i[this.selfProps.id] == item[this.selfProps.pre]
|
|||
|
|
);
|
|||
|
|
if (!_pre_target) return;
|
|||
|
|
let is_pre_standard = this.targetInParentsOrChildren(item, _pre_target);
|
|||
|
|
if (is_pre_standard) return;
|
|||
|
|
// 查看是否需要根据前置时间，如果不符合规则，更新后置时间
|
|||
|
|
let _start_early_prvend = this.timeIsBefore(
|
|||
|
|
item[this.selfProps.startDate],
|
|||
|
|
_pre_target[this.selfProps.endDate]
|
|||
|
|
);
|
|||
|
|
if (_start_early_prvend) {
|
|||
|
|
let _cycle = item._cycle - 1;
|
|||
|
|
let _to_startDate = this.timeAdd(
|
|||
|
|
_pre_target[this.selfProps.endDate],
|
|||
|
|
1
|
|||
|
|
);
|
|||
|
|
let _to_endDate = this.timeAdd(_to_startDate, _cycle);
|
|||
|
|
this.$set(item, this.selfProps.startDate, _to_startDate);
|
|||
|
|
this.$set(item, this.selfProps.endDate, _to_endDate);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 处理数据生成自增id和树链parents
|
|||
|
|
recordIdentityIdAndParents(item) {
|
|||
|
|
// if (!this.recordParents) return;
|
|||
|
|
if (this.treatIdAsIdentityId) {
|
|||
|
|
let _parents = item._parent
|
|||
|
|
? item._parent._parents + "," + item._parent[this.selfProps.id]
|
|||
|
|
: "";
|
|||
|
|
this.$set(item, "_parents", _parents);
|
|||
|
|
this.$set(item, "_identityId", item[this.selfProps.id]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 添加自增id
|
|||
|
|
this.$set(item, "_identityId", this.self_id);
|
|||
|
|
this.self_id++;
|
|||
|
|
// 添加parents字段
|
|||
|
|
let _parents = item._parent
|
|||
|
|
? item._parent._parents + "," + item._parent._identityId
|
|||
|
|
: "";
|
|||
|
|
this.$set(item, "_parents", _parents);
|
|||
|
|
},
|
|||
|
|
// 简洁处理数据
|
|||
|
|
terseHandleData(data, parent = null, level = 0) {
|
|||
|
|
level++;
|
|||
|
|
data.forEach(i => {
|
|||
|
|
this.$set(i, "_parent", parent); // 添加父级字段
|
|||
|
|
this.$set(i, "_level", level); // 添加层级字段
|
|||
|
|
let _time_diff = this.timeDiffTime(
|
|||
|
|
i[this.selfProps.startDate],
|
|||
|
|
i[this.selfProps.endDate]
|
|||
|
|
);
|
|||
|
|
i._cycle = _time_diff + 1;
|
|||
|
|
if (!i._oldStartDate) {
|
|||
|
|
// 添加开始时间字段
|
|||
|
|
this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
|
|||
|
|
}
|
|||
|
|
if (!i._oldEndDate) {
|
|||
|
|
// 添加结束字段时间
|
|||
|
|
this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
|
|||
|
|
}
|
|||
|
|
// 添加自增id字段及树链组成的parents字段
|
|||
|
|
this.recordIdentityIdAndParents(i);
|
|||
|
|
if (Array.isArray(i[this.selfProps.children])) {
|
|||
|
|
this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
|
|||
|
|
let _all_children = flattenDeep(
|
|||
|
|
i[this.selfProps.children],
|
|||
|
|
this.selfProps.children
|
|||
|
|
);
|
|||
|
|
this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
|
|||
|
|
this.terseHandleData(i[this.selfProps.children], i, level);
|
|||
|
|
} else {
|
|||
|
|
this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
|
|||
|
|
}
|
|||
|
|
// 处理前置任务
|
|||
|
|
this.handlePreTask(i);
|
|||
|
|
if (!i.hasOwnProperty("_start_edit")) {
|
|||
|
|
// 添加编辑字段管理可编辑项的显示
|
|||
|
|
this.$set(i, "_start_edit", false);
|
|||
|
|
this.$set(i, "_end_edit", false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// el-table事件----------------------------------------------以下为原el-table事件输出------------------------------------------------
|
|||
|
|
handleSelectionChange(val) {
|
|||
|
|
this.$emit("selection-change", val);
|
|||
|
|
this.multipleSelection = val;
|
|||
|
|
}, // 当选择项发生变化时会触发该事件
|
|||
|
|
handleCurrentChange(val, oldVal) {
|
|||
|
|
this.$emit("current-change", val, oldVal);
|
|||
|
|
this.currentRow = val;
|
|||
|
|
}, // 当表格的当前行发生变化的时候会触发该事件
|
|||
|
|
handleSelectAll(val) {
|
|||
|
|
this.$emit("select-all", val);
|
|||
|
|
}, // 当用户手动勾选全选 Checkbox 时触发的事件
|
|||
|
|
handleSelect(selection, row) {
|
|||
|
|
this.$emit("select", selection, row);
|
|||
|
|
}, // 当用户手动勾选全选 Checkbox 时触发的事件
|
|||
|
|
handleMouseEnter(row, column, cell, event) {
|
|||
|
|
this.$emit("cell-mouse-enter", row, column, cell, event);
|
|||
|
|
}, // 当单元格 hover 进入时会触发该事件
|
|||
|
|
handleMouseLeave(row, column, cell, event) {
|
|||
|
|
this.$emit("cell-mouse-leave", row, column, cell, event);
|
|||
|
|
}, // 当单元格 hover 退出时会触发该事件
|
|||
|
|
handleCellClick(row, column, cell, event) {
|
|||
|
|
this.$emit("cell-click", row, column, cell, event);
|
|||
|
|
}, // 当某个单元格被点击时会触发该事件
|
|||
|
|
handleCellDbClick(row, column, cell, event) {
|
|||
|
|
this.$emit("cell-dblclick", row, column, cell, event);
|
|||
|
|
}, // 当某个单元格被双击击时会触发该事件
|
|||
|
|
handleRowClick(row, column, event) {
|
|||
|
|
this.$emit("row-click", row, column, event);
|
|||
|
|
}, // 当某一行被点击时会触发该事件
|
|||
|
|
handleRowContextMenu(row, column, event) {
|
|||
|
|
this.$emit("row-contextmenu", row, column, event);
|
|||
|
|
}, // 当某一行被鼠标右键点击时会触发该事件
|
|||
|
|
handleRowDbClick(row, column, event) {
|
|||
|
|
this.$emit("row-dblclick", row, column, event);
|
|||
|
|
}, // 当某一行被双击时会触发该事件
|
|||
|
|
handleHeaderClick(column, event) {
|
|||
|
|
this.$emit("header-click", column, event);
|
|||
|
|
}, // 当某一列的表头被点击时会触发该事件
|
|||
|
|
handleHeaderContextMenu(column, event) {
|
|||
|
|
this.$emit("header-contextmenu", column, event);
|
|||
|
|
}, // 当某一列的表头被鼠标右键点击时触发该事件
|
|||
|
|
handleSortChange(e) {
|
|||
|
|
this.$emit("sort-change", e);
|
|||
|
|
}, // 当表格的排序条件发生变化的时候会触发该事件
|
|||
|
|
handleFilterChange(filters) {
|
|||
|
|
this.$emit("filter-change", filters);
|
|||
|
|
}, // 当表格的筛选条件发生变化的时候会触发该事件
|
|||
|
|
handleExpandChange(row, expanded) {
|
|||
|
|
this.$emit("expand-change", row, expanded);
|
|||
|
|
} // 当表格的筛选条件发生变化的时候会触发该事件
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
dateType(val) {
|
|||
|
|
this.self_date_type = val;
|
|||
|
|
},
|
|||
|
|
startDate(val) {
|
|||
|
|
this.self_start_date = val;
|
|||
|
|
},
|
|||
|
|
endDate(val) {
|
|||
|
|
this.self_end_date = val;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.self_date_type = this.dateType;
|
|||
|
|
this.self_start_date = this.startDate;
|
|||
|
|
this.self_end_date = this.endDate;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|||
|
|
<style lang="scss">
|
|||
|
|
$gantt_item: 16px;
|
|||
|
|
$gantt_item_half: 8px;
|
|||
|
|
|
|||
|
|
.wl-gantt {
|
|||
|
|
.wl-gantt-header > th {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-gantt-item {
|
|||
|
|
position: relative;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
> .cell {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-full.el-input {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-on {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 0;
|
|||
|
|
right: -1px;
|
|||
|
|
margin-top: -$gantt_item_half;
|
|||
|
|
height: $gantt_item;
|
|||
|
|
background: #409eff;
|
|||
|
|
transition: all 0.4s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-start {
|
|||
|
|
left: 50%;
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: #409eff transparent transparent;
|
|||
|
|
border-width: 6px 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-end {
|
|||
|
|
right: 50%;
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: transparent #409eff;
|
|||
|
|
border-width: 0 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-full {
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
&:before {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: #409eff transparent transparent;
|
|||
|
|
border-width: 6px 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: transparent #409eff;
|
|||
|
|
border-width: 0 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.year-and-month {
|
|||
|
|
.wl-item-start {
|
|||
|
|
left: 5%;
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: #409eff transparent transparent;
|
|||
|
|
border-width: 6px 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-end {
|
|||
|
|
right: 5%;
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: transparent #409eff;
|
|||
|
|
border-width: 0 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wl-item-full {
|
|||
|
|
left: 5%;
|
|||
|
|
right: 5%;
|
|||
|
|
&:before {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: #409eff transparent transparent;
|
|||
|
|
border-width: 6px 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $gantt_item;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
content: "";
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-color: transparent #409eff;
|
|||
|
|
border-width: 0 6px 6px 0;
|
|||
|
|
border-style: solid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|