You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
20 KiB
498 lines
20 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-01 09:19:48
|
|
@ 备注: 任务列表
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { useRoute,useRouter } from 'vue-router'
|
|
|
|
import { gainAppTask } from '@/api/lowCode/type'
|
|
import { gainAppAllTaskList,getAppTaskList } from '@/api/lowCode/index'
|
|
|
|
import Header from '@/views/common/header/formTable/header.vue'
|
|
import SearchTask from '@/views/common/header/formTable/search.vue'
|
|
import AppPageInfo from '@/views/formTable/pageInfo.vue'
|
|
|
|
const openAppPage = ref(false) //打开页面
|
|
const lookInfo = ref<any>("") //查看内容
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const appKey = ref<number>(route.query.id)
|
|
const taskTitle = ref<number>(route.query.title)
|
|
const taskScrollbar = ref(null) //滚动条
|
|
const loadingList = ref(false) //是否显示加载
|
|
const loadText = ref("数据加载中，请稍后......")
|
|
const _scrollTop = ref<number>(0)
|
|
const appContent = reactive<any>({
|
|
appKey:route.query.id,
|
|
appId:"",
|
|
taskTitle:route.query.title,
|
|
taskId:"",
|
|
taskKey:"",
|
|
})
|
|
|
|
const searchInfo = reactive<gainAppTask>({
|
|
page: 1,
|
|
pagesize: 6,
|
|
id: appKey,
|
|
class: route.query.class,
|
|
title:""
|
|
})
|
|
const appTaskList = ref<any>([])
|
|
const logCount = ref<number>(0)
|
|
const classType = ref<number>(route.query.class*1)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-01 14:06:42
|
|
@ 功能: 获取列表内容
|
|
*/
|
|
const gainAppTaskList = () => {
|
|
loadText.value = "数据加载中，请稍后......"
|
|
loadingList.value = true
|
|
console.log("route.query.class:",route.query.class)
|
|
switch (route.query.class*1) {
|
|
case 1:
|
|
searchInfo.class = 2
|
|
console.log("获取任务列表内容---------->",searchInfo)
|
|
getAppTaskList(searchInfo)
|
|
.then((data:any) => {
|
|
console.log("获取任务列表内容===========>",data)
|
|
logCount.value = logCount.value + data.data.count
|
|
if(data.data.list){
|
|
appTaskList.value.push(...data.data.list)
|
|
}
|
|
|
|
if(data.total > 0){
|
|
if(logCount.value < data.total){
|
|
let pagenum = searchInfo.pagesize - data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
})
|
|
break;
|
|
case 2:
|
|
searchInfo.class = 3
|
|
getAppTaskList(searchInfo)
|
|
.then((data:any) => {
|
|
console.log("获取任务列表内容===========>",data)
|
|
logCount.value = logCount.value + data.data.count
|
|
if(data.data.list){
|
|
appTaskList.value.push(...data.data.list)
|
|
}
|
|
|
|
if(data.total > 0){
|
|
if(logCount.value < data.total){
|
|
let pagenum = searchInfo.pagesize - data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
})
|
|
break;
|
|
case 3:
|
|
searchInfo.class = 5
|
|
getAppTaskList(searchInfo)
|
|
.then((data:any) => {
|
|
console.log("获取任务列表内容===========>",data)
|
|
logCount.value = logCount.value + data.data.count
|
|
if(data.data.list){
|
|
appTaskList.value.push(...data.data.list)
|
|
}
|
|
|
|
if(data.total > 0){
|
|
if(logCount.value < data.total){
|
|
let pagenum = searchInfo.pagesize - data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
})
|
|
break;
|
|
case 4:
|
|
console.log("route.query.class:222",route.query.class)
|
|
searchInfo.class = 1
|
|
gainAppAllTaskList(searchInfo)
|
|
.then((data:any) => {
|
|
console.log("获取列表内容",data)
|
|
logCount.value = logCount.value + data.data.count
|
|
if(data.data.list){
|
|
appTaskList.value.push(...data.data.list)
|
|
}
|
|
|
|
if(data.total > 0){
|
|
if(logCount.value < data.total){
|
|
let pagenum = searchInfo.pagesize - data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
})
|
|
break;
|
|
case 5:
|
|
searchInfo.class = 2
|
|
gainAppAllTaskList(searchInfo)
|
|
.then(({data}) => {
|
|
console.log("获取列表内容",data)
|
|
logCount.value = logCount.value + data.count
|
|
appTaskList.value.push(...data.list)
|
|
if(data.total > 0){
|
|
if(logCount.value < data.total){
|
|
let pagenum = searchInfo.pagesize - data.count
|
|
if (pagenum > 0) {
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = false
|
|
}
|
|
}else{
|
|
loadText.value = ""
|
|
loadingList.value = true
|
|
}
|
|
}else{
|
|
loadText.value = "此选项没有数据！"
|
|
loadingList.value = true
|
|
}
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
gainAppTaskList()
|
|
})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-01 11:26:50
|
|
@ 功能: 搜索
|
|
*/
|
|
const searchQuery = (val:any) => {
|
|
console.log("执行收缩",val);
|
|
searchInfo.page = 1
|
|
searchInfo.title = val
|
|
logCount.value = 0
|
|
appTaskList.value = []
|
|
_scrollTop.value = 0
|
|
gainAppTaskList()
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-01 11:44:03
|
|
@ 功能: 监听滚动条状态
|
|
*/
|
|
const onHandleAppTaskScroll = (event:any) => {
|
|
console.log("onHandleScroll",loadingList.value, event)
|
|
if (loadingList.value === true) {
|
|
return
|
|
}
|
|
let wrapRef = taskScrollbar.value.wrapRef
|
|
taskScrollbar.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
|
|
taskScrollbar.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
|
|
let poor = wrapRef.scrollHeight - wrapRef.clientHeight
|
|
if (event.scrollTop + 2 >= poor) {
|
|
_scrollTop.value = event.scrollTop
|
|
|
|
loadingList.value=true
|
|
searchInfo.page++
|
|
// console.log("searchInfo.page",searchInfo.page++)
|
|
gainAppTaskList()
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-10-28 13:40:15
|
|
@ 功能: 监听当前页面是否回归到首页
|
|
*/
|
|
watch(()=>searchInfo.page,(val:number)=>{
|
|
if(val <= 1){
|
|
_scrollTop.value = 0
|
|
taskScrollbar.value.setScrollTop(_scrollTop)
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-02 08:34:52
|
|
@ 功能: 删除任务
|
|
*/
|
|
const delTask = (val:any) => {
|
|
ElMessageBox.confirm(
|
|
"您确定要删除此条记录?一经删除！数据将不可恢复！",
|
|
"删除提示",
|
|
{
|
|
confirmButtonText: '同意',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-02 08:39:12
|
|
@ 功能: 撤回申请
|
|
*/
|
|
const withdrTask = (val:any) => {
|
|
ElMessageBox.confirm(
|
|
"您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！",
|
|
"撤回提示",
|
|
{
|
|
confirmButtonText: '同意',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
}
|
|
|
|
const stateForm = reactive<any>({
|
|
type: 1, // 1新增；2修改；3查看（表单模式）
|
|
formData: {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
powerstr: {},
|
|
},
|
|
dict: {},
|
|
appKey: route.query.key,
|
|
appId: route.query.id,
|
|
taskTitle: route.query.title,
|
|
taskId:route.query.formid,
|
|
taskKey:route.query.formKey,
|
|
flowIsTrue:false,
|
|
flowKey:"",
|
|
loading: true,
|
|
});
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-04 09:25:31
|
|
@ 功能: 查看表单
|
|
*/
|
|
const openLook = (val:any) => {
|
|
console.log("查看表单",val)
|
|
lookInfo.value = val
|
|
lookInfo.value.masters_key = val.mastersKeyStr
|
|
lookInfo.value.runFlowId = val.runFlowIdStr
|
|
appContent.appKey = val.appKeyStr
|
|
appContent.appId = val.version
|
|
appContent.taskId = val.version
|
|
appContent.taskKey = val.tableKeyStr
|
|
stateForm.type = 3
|
|
stateForm.flowIsTrue = true
|
|
stateForm.flowKey = val.flowkeys
|
|
openAppPage.value = true
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Header :header-title="taskTitle" :app-key="appKey" menu-tree="" :call-back-click="true" />
|
|
<SearchTask @searchQuery="searchQuery" />
|
|
<el-scrollbar ref="taskScrollbar" class="taskScrollbarCss" @scroll="onHandleAppTaskScroll">
|
|
<el-card v-for="item in appTaskList" :key="item.idStr" class="taskCardBox" shadow="always">
|
|
<table>
|
|
<tbody @click="openLook(item)">
|
|
<tr>
|
|
<!-- <td width="80">标题：</td> -->
|
|
<td colspan="2" class="cardTitle">
|
|
{{ item.title }}
|
|
<el-tag v-if="item.status==1" size="small" type="info">草稿</el-tag>
|
|
<el-tag v-else-if="item.status==2" size="small" type="success">发表</el-tag>
|
|
<el-tag v-else-if="item.status==3" size="small" type="warning">审批中</el-tag>
|
|
<el-tag v-else-if="item.status==4" size="small" type="info">归档</el-tag>
|
|
<el-tag v-else size="small" type="danger">已删除</el-tag>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cardInfoTitle">发起人：</td>
|
|
<td v-if="[1,2,3].includes(classType)" class="cardInfoTitle">{{ item.creatorInfo.name }}(No.{{ item.creatorInfo.number }})</td>
|
|
<td v-else class="cardInfoTitle">{{ item.createrInfo.name }}(No.{{ item.createrInfo.number }})</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cardInfoTitle" >发起日期：</td>
|
|
<td class="cardInfoTitle">{{ item.createrTimeStr }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cardInfoTitle">任务性质：</td>
|
|
<td class="cardInfoTitle">
|
|
<el-text class="cardInfoTitle" v-if="item.types==1">流程任务</el-text>
|
|
<el-text class="cardInfoTitle" v-else>普通任务</el-text>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="cardFoot">
|
|
<el-button-group v-if="item.types==1">
|
|
<el-button v-if="item.isRetract" size="small" @click="withdrTask(item)">撤回</el-button>
|
|
<el-button v-if="item.status==1" type="success" size="small">提交审批</el-button>
|
|
<el-button v-if="item.status==2" type="info" size="small">修改</el-button>
|
|
<el-button v-if="item.status==2" type="primary" size="small">重新发起</el-button>
|
|
<el-button v-if="item.status==4" type="warning" size="small">申请修改</el-button>
|
|
<el-button v-if="item.status==1||item.status==2" type="danger" size="small" @click="delTask(item)">删除</el-button>
|
|
</el-button-group>
|
|
<el-button-group v-else>
|
|
<el-button type="warning" size="small">修改</el-button>
|
|
<el-button type="danger" size="small" @click="delTask(item)">删除</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<el-descriptions
|
|
class="margin-top"
|
|
title=""
|
|
:column="1"
|
|
border
|
|
style="display:none"
|
|
>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">标题：</div>
|
|
</template>
|
|
{{ item.title }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">发起人：</div>
|
|
</template>
|
|
<el-text v-if="[1,2,3].includes(classType)">{{ item.creatorInfo.name }}(No.{{ item.creatorInfo.number }})</el-text>
|
|
<el-text v-else>{{ item.createrInfo.name }}(No.{{ item.createrInfo.number }})</el-text>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">发起日期：</div>
|
|
</template>
|
|
{{ item.createrTimeStr }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">状态：</div>
|
|
</template>
|
|
<el-tag v-if="item.status==1" type="info">草稿</el-tag>
|
|
<el-tag v-else-if="item.status==2" type="success">发表</el-tag>
|
|
<el-tag v-else-if="item.status==3" type="warning">审批中</el-tag>
|
|
<el-tag v-else-if="item.status==4" type="info">归档</el-tag>
|
|
<el-tag v-else type="danger">已删除</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">任务性质：</div>
|
|
</template>
|
|
<el-text v-if="item.types==1">流程任务</el-text>
|
|
<el-text v-else>普通任务</el-text>
|
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">当前节点：</div>
|
|
</template>
|
|
kooriookami
|
|
</el-descriptions-item>
|
|
<el-descriptions-item width="50">
|
|
<template #label>
|
|
<div class="cell-item">节点操作人：</div>
|
|
</template>
|
|
kooriookami
|
|
</el-descriptions-item> -->
|
|
|
|
</el-descriptions>
|
|
<!-- <template #footer>
|
|
<el-button-group v-if="item.types==1">
|
|
<el-button v-if="item.isRetract" size="small" @click="withdrTask(item)">撤回</el-button>
|
|
<el-button v-if="item.status==1" type="success" size="small">提交审批</el-button>
|
|
<el-button v-if="item.status==2" type="info" size="small">修改</el-button>
|
|
<el-button v-if="item.status==2" type="primary" size="small">重新发起</el-button>
|
|
<el-button v-if="item.status==4" type="warning" size="small">申请修改</el-button>
|
|
<el-button v-if="item.status==1||item.status==2" type="danger" size="small" @click="delTask(item)">删除</el-button>
|
|
</el-button-group>
|
|
<el-button-group v-else>
|
|
<el-button type="warning" size="small">修改</el-button>
|
|
<el-button type="danger" size="small" @click="delTask(item)">删除</el-button>
|
|
</el-button-group>
|
|
</template> -->
|
|
</el-card>
|
|
<div v-if="loadingList" class="loading">{{loadText}}</div>
|
|
<AppPageInfo v-model:is-show="openAppPage" :app-info="appContent" :app-page-info="lookInfo" :state-form="stateForm" :app-flow-info="appFlowInfo" @searchData="gainAppTaskList" />
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.taskScrollbarCss{
|
|
width: 100%;
|
|
padding: 5px 10px 0 10px;
|
|
height: calc(100vh - 130px);
|
|
.taskCardBox{
|
|
width: 100%;
|
|
margin-top:10px;
|
|
:deep .el-card__footer{
|
|
padding: 10px 5px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
:deep .el-card__body{
|
|
padding: 10px 10px;
|
|
}
|
|
.cell-item{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.cardFoot{
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
.cardTitle{
|
|
line-height: 30px;
|
|
}
|
|
.cardInfoTitle{
|
|
font-size:14px;
|
|
line-height:20px;
|
|
color: #999999;
|
|
}
|
|
.loading{
|
|
width:100%;
|
|
text-align: center;
|
|
height:40px;
|
|
line-height: 40px;
|
|
}
|
|
</style>
|