..
This commit is contained in:
那些花儿
@@ -1,311 +0,0 @@
|
|||||||
const todo = {
|
|
||||||
template: /*language=HTML*/ `
|
|
||||||
<div class="task-center">
|
|
||||||
<van-nav-bar title="待办中心" placeholder fixed></van-nav-bar>
|
|
||||||
<!-- 标签页 -->
|
|
||||||
<van-sticky offset-top="46px">
|
|
||||||
<van-tabs v-model="activeTab" @change="handleTabChange" animated swipeable>
|
|
||||||
<van-tab title="待办" name="todo"></van-tab>
|
|
||||||
<van-tab title="已办" name="done"></van-tab>
|
|
||||||
<van-tab title="我发起的" name="started"></van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
<!-- 搜索筛选区域 -->
|
|
||||||
<div class="filter-section">
|
|
||||||
<div>
|
|
||||||
<div class="search-form">
|
|
||||||
<van-search v-model="pageForm.searchKeyword" placeholder="请输入搜索关键词"></van-search>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <van-field-->
|
|
||||||
<!-- readonly-->
|
|
||||||
<!-- clickable-->
|
|
||||||
<!-- :value="categoryLabel"-->
|
|
||||||
<!-- placeholder="选择流程分类"-->
|
|
||||||
<!-- class="category-select"-->
|
|
||||||
<!-- @click="showCategoryPicker = true"-->
|
|
||||||
<!-- ></van-field>-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<van-popup v-model="showCategoryPicker" round position="bottom">
|
|
||||||
<van-picker
|
|
||||||
show-toolbar
|
|
||||||
:columns="categoryOptions"
|
|
||||||
value-key="name"
|
|
||||||
@confirm="onCategoryConfirm"
|
|
||||||
@cancel="showCategoryPicker = false"
|
|
||||||
></van-picker>
|
|
||||||
</van-popup>
|
|
||||||
</div>
|
|
||||||
</van-sticky>
|
|
||||||
|
|
||||||
<!-- 任务列表区域 -->
|
|
||||||
<table-list :api="'/flow/todoCenter/'+ activeTab" :page_form.sync="pageForm"
|
|
||||||
ref="tableListRef"
|
|
||||||
title="variable?.instanceName">
|
|
||||||
<template v-slot="{index,row}">
|
|
||||||
<table-column label="任务节点">{{row.taskName}}</table-column>
|
|
||||||
<table-column label="流程分类">{{categoryOptions.find(item => item.id === row.category)?.name || '未知分类'}}</table-column>
|
|
||||||
<table-column label="申请人">{{row.variable?.initiatorName || '未知'}}</table-column>
|
|
||||||
<table-column label="状态" v-if="activeTab === 'started'">{{processStatusMap[task.state]?.text || '未知状态'}}</table-column>
|
|
||||||
</template>
|
|
||||||
<template #actions="{index,row}">
|
|
||||||
<div class="action-btn" @click="onView(row)">
|
|
||||||
<i class="fa fa-eye"></i>
|
|
||||||
<span>查看</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</table-list>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 统计数据
|
|
||||||
todoCount: 0,
|
|
||||||
doneCount: 0,
|
|
||||||
startedCount: 0,
|
|
||||||
|
|
||||||
// 查询表单
|
|
||||||
pageForm: {
|
|
||||||
pageNumber: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
totalCount: 0,
|
|
||||||
searchKeyword: "",
|
|
||||||
category: ""
|
|
||||||
},
|
|
||||||
|
|
||||||
// 流程类型选项
|
|
||||||
categoryOptions: [],
|
|
||||||
showCategoryPicker: false,
|
|
||||||
categoryLabel: "",
|
|
||||||
|
|
||||||
// 任务列表
|
|
||||||
tasks: [],
|
|
||||||
loading: false,
|
|
||||||
finished: false,
|
|
||||||
refreshing: false,
|
|
||||||
|
|
||||||
// 标签页
|
|
||||||
activeTab: "todo",
|
|
||||||
|
|
||||||
processStatusMap: {
|
|
||||||
10: {text: "进行中", class: "doing"},
|
|
||||||
20: {text: "已完成", class: "finished"},
|
|
||||||
30: {text: "已撤回", class: "withdraw"},
|
|
||||||
40: {text: "强行终止", class: "interrupt"},
|
|
||||||
45: {text: "已拒绝", class: "reject"},
|
|
||||||
50: {text: "挂起", class: "pending"},
|
|
||||||
99: {text: "已废弃", class: "abandon"}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.initData();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 初始化数据
|
|
||||||
async initData() {
|
|
||||||
await Promise.all([this.getStatistics(), this.listCategory()]);
|
|
||||||
// 初始加载任务
|
|
||||||
// this.getTasks();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取统计数据
|
|
||||||
async getStatistics() {
|
|
||||||
try {
|
|
||||||
const {code, data, msg} = await this.$axios.post("/flow/todoCenter/statistics");
|
|
||||||
if (code === 0) {
|
|
||||||
const {todoCount, doneCount, startedCount} = data
|
|
||||||
this.todoCount = todoCount;
|
|
||||||
this.doneCount = doneCount;
|
|
||||||
this.startedCount = startedCount;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.$toast("获取统计数据失败");
|
|
||||||
console.error("获取统计数据失败:", error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取流程类型
|
|
||||||
async listCategory() {
|
|
||||||
try {
|
|
||||||
// 这里使用模拟数据，实际项目中替换为API调用
|
|
||||||
const res = await axios.post("/flow/category/list");
|
|
||||||
if (res.data.code === 0) {
|
|
||||||
this.categoryOptions = res.data.data;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.$toast("获取流程分类失败");
|
|
||||||
console.error("获取流程分类失败:", error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取任务列表
|
|
||||||
async getTasks() {
|
|
||||||
if (this.refreshing) {
|
|
||||||
this.tasks = [];
|
|
||||||
this.refreshing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const {code,data,msg} = await this.$axios.post("/flow/todoCenter/" + this.activeTab, this.pageForm);
|
|
||||||
if (code === 0) {
|
|
||||||
this.tasks = this.tasks.concat(data.list || []);
|
|
||||||
this.pageForm.totalCount = data.totalCount;
|
|
||||||
this.loading = false;
|
|
||||||
|
|
||||||
// 数据全部加载完成
|
|
||||||
if (this.tasks.length >= this.pageForm.totalCount) {
|
|
||||||
this.finished = true;
|
|
||||||
} else {
|
|
||||||
this.pageForm.pageNumber++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.$toast("获取任务列表失败");
|
|
||||||
console.error("获取任务列表失败:", error);
|
|
||||||
this.loading = false;
|
|
||||||
this.refreshing = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 处理标签页变化
|
|
||||||
handleTabChange(name) {
|
|
||||||
this.activeTab = name;
|
|
||||||
this.pageForm.pageNumber = 1;
|
|
||||||
this.tasks = [];
|
|
||||||
this.finished = false;
|
|
||||||
this.getTasks();
|
|
||||||
this.getStatistics();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 搜索
|
|
||||||
search() {
|
|
||||||
this.pageForm.pageNumber = 1;
|
|
||||||
this.tasks = [];
|
|
||||||
this.finished = false;
|
|
||||||
this.getTasks();
|
|
||||||
this.getStatistics();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 重置搜索
|
|
||||||
reset() {
|
|
||||||
this.pageForm.searchKeyword = "";
|
|
||||||
this.pageForm.category = "";
|
|
||||||
this.categoryLabel = "";
|
|
||||||
this.search();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 分类选择确认
|
|
||||||
onCategoryConfirm(value) {
|
|
||||||
this.pageForm.category = value.id;
|
|
||||||
this.categoryLabel = value.name;
|
|
||||||
this.showCategoryPicker = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 处理任务
|
|
||||||
onView(task) {
|
|
||||||
const {taskId, taskKey, instanceId, businessNo, formKey} = task;
|
|
||||||
|
|
||||||
if (!formKey) {
|
|
||||||
this.$toast("当前流程没有配置地址");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取空状态文本
|
|
||||||
getEmptyText() {
|
|
||||||
switch (this.activeTab) {
|
|
||||||
case "todo":
|
|
||||||
return "您当前没有需要办理的任务，辛苦了";
|
|
||||||
case "done":
|
|
||||||
return "您当前没有已办理的任务记录";
|
|
||||||
case "started":
|
|
||||||
return "您当前没有发起的流程";
|
|
||||||
default:
|
|
||||||
return "暂无数据";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
style: /*language=CSS*/ `
|
|
||||||
.task-center {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .filter-section {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
display: flex;
|
|
||||||
background: #fff;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form .van-search{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-list {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-item {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-content {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-title {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #323233;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-info {
|
|
||||||
display: flex;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #969799;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-info-label {
|
|
||||||
width: 70px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-info-value {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .task-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .empty-section {
|
|
||||||
padding: 40px 0;
|
|
||||||
text-align: center;
|
|
||||||
color: #969799;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-select {
|
|
||||||
margin: 0 12px 12px 0;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user