1.0.4 • Published 10 months ago
@pangsui/vue3-plan-gantt v1.0.4
@pangsui/vue3-plan-gantt
快速上手
npm install @pangsui/vue3-plan-gantt全局使用
main.js中引入并注册，由于组件也用到了vuex，所以在注册时也要将vuex传给组件，没有vuex的记得安装一下vuex
import store from './store/index'
import Gantt from '@pangsui/vue3-plan-gantt'
const app = createApp(App)
app.use(Gantt, { store })文档
属性参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | days | 要渲染的天数 | Number | 30 | |
| 2 | oDayBoxHeight | 表格高度 | Number | 40 | |
| 3 | oDayBoxWidth | 表格宽度 | Number | 60 | |
| 4 | startTime | 渲染时间列表的开始时间 | String | 2024-01-01 | |
| 5 | leftTableConfig | 左侧可收缩的表格配置，详细配置见下面左侧表格配置参数 | Object | {} | |
| 6 | tasks | 任务列表 | Array | [] | |
| 7 | rows | 左侧行数据 | Array | [] | |
| 8 | originTasks | 原任务数据 | Array | [] |
左侧表格配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | thead | 表格配置，详细配置见下方表格配置 | Array | [] | |
| 2 | maxWidth | 表格宽度最大值，表格配置width宽度和 | Number | 0 | |
| 3 | minWidth | 表格宽度最小值，允许折叠列的width宽度和 | Number | 0 | |
| 4 | statusDictionary | 状态字典，包含中文名和主题两个字段，具体见下方表格字典配置 | Object | {} |
表格配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | prop | 属性值 | String | ||
| 2 | type | 类型 | String | span或tag，目前tag只有状态字段使用 | span |
| 3 | name | 表头名称 | String | ||
| 4 | width | 宽度，要带着px | String | 2024-01-01 | |
| 5 | collapse | 是否为折叠列 | Boolean | true或false | false |
表格字典配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | name | 名称 | String | ||
| 2 | theme | 主题 | String | 'default','deepgreen','green','lightgreen','lightpurple','purple','mediumpurple','red','pink','lightpink','blue','skyblue','cyan','yellow','lightyellow','greenyellow','orange','lightgray','gray' | 'default' |
tasks任务、originTasks原任务、rows左侧行数据配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | task_id | 任务id | Number | ||
| 2 | text | 任务名称 | String | ||
| 3 | row_index | 行下标，不重复且从1开始累加 | Number | ||
| 4 | start_date | 开始时间 yyyy-MM-dd hh:mm:ss | String | ||
| 5 | end_date | 结束时间 yyyy-MM-dd hh:mm:ss | String | ||
| 6 | duration | 持续时间，单位天 | String | ||
| 7 | progress | 进度 | String | 1-100 | |
| 8 | status | 状态 | String | ||
| 9 | is_lock | 是否锁定 | Boolean | true或false | |
| 10 | is_collapse | 是否折叠 | Boolean | true或false | |
| 11 | is_parent | 是否父节点 | Boolean | true或false | |
| 12 | status | 状态 | String |
以上是必须的字段，其余的字段可以根据左侧菜单配置自由添加
计算两个时间相差的天数
// 计算两个时间相差的天数
/**
* @param {Date} date1 开始时间
* @param {Date} date2 结束时间
*/
export function calculateDuration(date1, date2) {
const oneDay = 24 * 60 * 60 * 1000 // 每天的毫秒数
const diffDays = Math.round(Math.abs((date2 - date1) / oneDay))
return diffDays
}使用案例
界面中引入
<Gantt
:days="60"
:o-day-box-width="120"
:start-time="'2024-08-08'"
:left-table-config="leftTableConfig"
:tasks="tasks"
:rows="rows"
:origin-tasks="originTasks"
/><script>
import { cloneDeep } from 'lodash'
import { onMounted, reactive, toRefs, ref } from 'vue'
export default {
setup() {
const vueConfig = reactive({
rows: [],
tasks: [],
originTasks: [],
startTime: '', // 开始时间
leftTableConfig: { // 左侧表格配置
thead: [
{ prop: 'code', type: 'span', name: '编号', width: '120px', collapse: false },
{ prop: 'name', type: 'span', name: '名称', width: '120px', collapse: false },
{ prop: 'start_date', type: 'span', name: '开始时间', width: '160px', collapse: true },
{ prop: 'end_date', type: 'span', name: '结束时间', width: '160px', collapse: true },
{ prop: 'plan_qty', type: 'span', name: '计划数', width: '80px', collapse: true },
{ prop: 'finish_qty', type: 'span', name: '完成数', width: '80px', collapse: true },
{ prop: 'state', type: 'tag', name: '状态', width: '120px', collapse: true }
],
maxWidth: 840,
minWidth: 240,
statusDictionary: {
'draft': { name: '草稿', theme: 'gray' },
'unfold': { name: '展开', theme: 'cyan' },
'progress': { name: '进行中', theme: 'blue' },
'confirm': { name: '已确认', theme: 'lightpurple' },
'suspend': { name: '暂停', theme: 'yellow' },
'finish': { name: '已完成', theme: 'lightgreen' },
'cancel': { name: '已取消', theme: 'red' }
},
testData: [
{
'task_id': 1,
'code': 'GD1001',
'text': '2024年第一次测试项目',
'name': 'PC',
'row_index': 0,
'start_date': '2024-08-08 21:01:25',
'end_date': '2024-08-25 18:00:15',
'duration': 17,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'is_collapse': false,
'is_parent': true,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 1,
'code': 'WO1001',
'text': '第一道工序',
'name': '组装-1#',
'row_index': 1,
'start_date': '2024-08-08 21:01:25',
'end_date': '2024-08-10 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 1,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 2,
'code': 'WO1002',
'text': '第二道工序',
'name': '组装-2#',
'row_index': 2,
'start_date': '2024-08-10 19:00:15',
'end_date': '2024-08-12 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 1,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 3,
'code': 'WO1003',
'text': '第三道工序',
'name': '组装-3#',
'row_index': 3,
'start_date': '2024-08-12 20:00:15',
'end_date': '2024-08-16 18:00:15',
'duration': 4,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 1,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 4,
'code': 'WO1004',
'text': '第四道工序',
'name': '组装-4#',
'row_index': 4,
'start_date': '2024-08-16 18:00:15',
'end_date': '2024-08-20 18:00:15',
'duration': 4,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 1,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 5,
'code': 'WO1005',
'text': '第五道工序',
'name': '组装-5#',
'row_index': 5,
'start_date': '2024-08-20 18:00:15',
'end_date': '2024-08-25 18:00:15',
'duration': 5,
'progress': 0,
'theme': 'gray',
'is_lock': true,
'parent_id': 1,
'plan_qty': 20,
'finish_qty': 0,
'state': 'draft'
},
{
'task_id': 2,
'code': 'GD1001',
'text': '2024年第二次测试项目',
'name': '手机',
'row_index': 6,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-30 18:00:15',
'duration': 18,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'is_collapse': false,
'is_parent': true,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 1,
'code': 'WO1006',
'text': '第一道工序',
'name': '组装-1#',
'row_index': 7,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-14 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 2,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 2,
'code': 'WO1007',
'text': '第二道工序',
'name': '组装-2#',
'row_index': 8,
'start_date': '2024-08-14 19:00:15',
'end_date': '2024-08-16 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 2,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 3,
'code': 'WO1008',
'text': '第三道工序',
'name': '组装-3#',
'row_index': 9,
'start_date': '2024-08-16 20:00:15',
'end_date': '2024-08-18 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 2,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 4,
'code': 'WO1009',
'text': '第四道工序',
'name': '组装-4#',
'row_index': 10,
'start_date': '2024-08-18 18:00:15',
'end_date': '2024-08-22 18:00:15',
'duration': 4,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 2,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 5,
'code': 'WO1010',
'text': '第五道工序',
'name': '组装-5#',
'row_index': 11,
'start_date': '2024-08-22 18:00:15',
'end_date': '2024-08-30 18:00:15',
'duration': 8,
'progress': 0,
'theme': 'gray',
'is_lock': true,
'parent_id': 2,
'plan_qty': 20,
'finish_qty': 0,
'state': 'draft'
},
{
'task_id': 3,
'code': 'GD1001',
'text': '2024年第三次测试项目',
'name': '手机',
'row_index': 12,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-30 18:00:15',
'duration': 18,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'is_collapse': false,
'is_parent': true,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 1,
'code': 'WO1006',
'text': '第一道工序',
'name': '组装-1#',
'row_index': 13,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-14 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 3,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 2,
'code': 'WO1007',
'text': '第二道工序',
'name': '组装-2#',
'row_index': 14,
'start_date': '2024-08-14 19:00:15',
'end_date': '2024-08-16 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 3,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 3,
'code': 'WO1008',
'text': '第三道工序',
'name': '组装-3#',
'row_index': 15,
'start_date': '2024-08-16 20:00:15',
'end_date': '2024-08-18 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 3,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 4,
'code': 'WO1009',
'text': '第四道工序',
'name': '组装-4#',
'row_index': 16,
'start_date': '2024-08-18 18:00:15',
'end_date': '2024-08-22 18:00:15',
'duration': 4,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 3,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 5,
'code': 'WO1010',
'text': '第五道工序',
'name': '组装-5#',
'row_index': 17,
'start_date': '2024-08-22 18:00:15',
'end_date': '2024-08-30 18:00:15',
'duration': 8,
'progress': 0,
'theme': 'gray',
'is_lock': true,
'parent_id': 3,
'plan_qty': 20,
'finish_qty': 0,
'state': 'draft'
},
{
'task_id': 4,
'code': 'GD1001',
'text': '2024年第四次测试项目',
'name': '手机',
'row_index': 18,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-30 18:00:15',
'duration': 18,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'is_collapse': false,
'is_parent': true,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 1,
'code': 'WO1006',
'text': '第一道工序',
'name': '组装-1#',
'row_index': 19,
'start_date': '2024-08-12 21:01:25',
'end_date': '2024-08-14 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 4,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 2,
'code': 'WO1007',
'text': '第二道工序',
'name': '组装-2#',
'row_index': 20,
'start_date': '2024-08-14 19:00:15',
'end_date': '2024-08-16 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 4,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 3,
'code': 'WO1008',
'text': '第三道工序',
'name': '组装-3#',
'row_index': 21,
'start_date': '2024-08-16 20:00:15',
'end_date': '2024-08-18 18:00:15',
'duration': 2,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 4,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 4,
'code': 'WO1009',
'text': '第四道工序',
'name': '组装-4#',
'row_index': 22,
'start_date': '2024-08-18 18:00:15',
'end_date': '2024-08-22 18:00:15',
'duration': 4,
'progress': 50,
'theme': 'blue',
'is_lock': true,
'parent_id': 4,
'plan_qty': 20,
'finish_qty': 10,
'state': 'progress'
},
{
'task_id': 5,
'code': 'WO1010',
'text': '第五道工序',
'name': '组装-5#',
'row_index': 23,
'start_date': '2024-08-22 18:00:15',
'end_date': '2024-08-30 18:00:15',
'duration': 8,
'progress': 0,
'theme': 'gray',
'is_lock': true,
'parent_id': 4,
'plan_qty': 20,
'finish_qty': 0,
'state': 'draft'
}
]
}
})
onMounted(() => {
// 开始时间
vueConfig.startTime = '2024-08-01'
vueConfig.rows = cloneDeep(vueConfig.testData)
vueConfig.tasks = cloneDeep(vueConfig.testData)
vueConfig.originTasks = cloneDeep(vueConfig.testData)
})
return {
...toRefs(vueConfig)
}
}#####示例图片
