hxgksystemapp/src/views/taskplatform/taskmanagement/todolist.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-22 14:55:46
@ 备注: 待办事宜
-->
<script lang='ts' setup>

import { taskFlowList } from '@/api/DesignForm/requestapi'
import { taskflowquery } from '@/api/DesignForm/type'

// import LookAndOperateLogInfo from '@/views/taskplatform/taskmanagement/lookAndOperateLogInfo.vue'
import LookAndOperateLogInfo from '@/views/taskplatform/taskmanagement/lookFlowInfo.vue'

const selectInfoTd = reactive<taskflowquery>({
	page: 1,
	pagesize: 20,
	class: 2
})
const loadingTd = ref(false)
const searckFormRefTd  = ref(ElForm);
const totalstd = ref<number>(0)	//总共多少条记录
const taskFlowAryTd = ref<any>([])  //记录数组
//获取我的请求
const getToDoListTd = () => {
	loadingTd.value = true
	taskFlowList(selectInfoTd)
		.then((data:any)=>{
			console.log("获取我的请求",data)
			totalstd.value = data.data.total
			taskFlowAryTd.value = data.data.list
		})
		.finally(()=>{
			loadingTd.value = false
		})
}
//重置表单
const resetQueryTd = () =>{
	searckFormRefTd.value.resetFields();
	initData();
}
//初始化数据
const initData = () =>{
	selectInfoTd.page = 1;
	selectInfoTd.pagesize = 15;
	selectInfoTd.title = ""
	selectInfoTd.class = 2;
	selectInfoTd.state = 0;
}
const myappbox = ref()
const drawerMyWith = ref<number>(0);
//加载数据
onMounted(()=>{
	getToDoListTd();
	drawerMyWith.value = myappbox.value?.clientWidth
})
const flowLogInfo = ref<any>()
const darwOpenOrClose = ref(false)

/**
 * 查看流程任务
 * val					记录内容
 * types				记录类型; 1、我的请求；2、待办事宜；3、已办事宜；4：草稿箱
 */
const lookFlowInfo = (val:any,types:number) =>	{
	flowLogInfo.value = val
	darwOpenOrClose.value = true
}
<<<<<<< HEAD
const searchQuery = () => {
	getToDoListTd()
=======
const searchQuery = () =>{
	
>>>>>>> v3
}
</script>
<template>
	<div ref="myappbox" class="app_box">
		<div class="app-container">
			<div class="search">
				<el-form ref="searckFormRefTd" :model="selectInfoTd" :inline="true">
					<el-form-item label="任务标题" prop="name">
						<el-input
							v-model="selectInfoTd.title"
							placeholder="请输入任务标题"
							clearable
							@keyup.enter="searchQuery"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getToDoListTd()"><i-ep-search />搜索</el-button>
						<el-button @click="resetQueryTd()"><i-ep-refresh />重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-card shadow="never">
				<el-table
					v-loadingTd="loadingTd"
					element-loadingTd-text="Loading..."
					highlight-current-row
					:data="taskFlowAryTd"
					border
					class="table_box"
				>
					<el-table-column fixed label="标题" prop="title" width="500" />
					<el-table-column  label="创建人" prop="creater" >
						<template #default="scope">
							{{ scope.row.creatorInfo.name }}（<el-text  type="info">{{ scope.row.creatorInfo.number }}</el-text>）	
						</template>
					</el-table-column>
					<el-table-column  label="发起日期" prop="startDate" align="center"  width="300" />
					<el-table-column  label="状态" prop="status"  align="center"  width="220" >
						
						<template #default="scope">
							<el-tag
								v-if="scope.row.status==1"
								class="mx-1"
								effect="plain"
								round
							>
								草稿
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==2"
								type="danger"
								class="mx-1"
								effect="plain"
								round
							>
								驳回
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==3"
								type="success"
								class="mx-1"
								effect="plain"
								round
							>
								审批中
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==4"
								type="info"
								class="mx-1"
								effect="plain"
								round
							>
								归档
							</el-tag>
							<el-tag
								v-else
								type="info"
								class="mx-1"
								effect="plain"
								round
							>
								删除
							</el-tag>
						</template>
						
					</el-table-column>
					<el-table-column  label="当前节点及操作人" prop="currentStep" width="400" >
						<template #default="scope">
							<el-text v-if="scope.row.currentNodeName" type="success">{{ scope.row.currentNodeName }}：</el-text><el-text v-for="(item,index) in scope.row.currentNodeUser" :key="index" type="warning">{{ item.name }}({{ item.number }})</el-text>
						</template>
					</el-table-column>
					<el-table-column fixed="right" align="center" label="操作" width="100" >
						<template #default="scope">

							<el-tooltip
								class="box-item"
								effect="dark"
								content="查看详情"
								placement="top-end"
							>
								<el-button type="primary" size="small" class="fa fa-eye" @click="lookFlowInfo(scope.row,2)" />
							</el-tooltip>



						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-model:total="totalstd"
					v-model:page="selectInfoTd.page"
					v-model:limit="selectInfoTd.pagesize"
					@pagination="getToDoListTd"
				/>
			</el-card>


			<LookAndOperateLogInfo v-if="darwOpenOrClose" v-model:isshow="darwOpenOrClose" :flow-log-info="flowLogInfo" :drawer-with="drawerMyWith" @getmytodolist="getToDoListTd" />



		</div>
	</div>
	
</template>
<style  lang='scss' scoped>
.app_box{
	width:100%;
	overflow: hidden;
	overflow-y: auto;
}
.box-card {
  	width: 100%;
}
.table_box{
	width: 100%;
	height: calc(100vh - 308px);
}
</style>