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

<!--
@ 作者: 秦东
@ 时间: 2023-11-24 08:10:23
@ 备注: 草稿箱
-->
<script lang='ts' setup>
import { Delete, Edit, Search, Share, Upload,View } from '@element-plus/icons-vue'
import { taskFlowList } from '@/api/DesignForm/requestapi'
import { taskflowquery } from '@/api/DesignForm/type'

const selectInfoDr = reactive<taskflowquery>({
	page: 1,
	pagesize: 20,
	class: 1,
	state:1
})
const loadingDr = ref(false)
const searckFormRefdr  = ref(ElForm);
const totalsdr = ref<number>(0)	//总共多少条记录
const taskFlowAryDr = ref<any>([])  //记录数组
//获取我的请求
const getToDoListDr = () => {
	loadingDr.value = true
	taskFlowList(selectInfoDr)
		.then((data:any)=>{
			console.log("获取我的请求",data)
			totalsdr.value = data.data.total
			taskFlowAryDr.value = data.data.list
		})
		.finally(()=>{
			loadingDr.value = false
		})
}
//重置表单
const resetQueryDr = () =>{
	searckFormRefdr.value.resetFields();
	initDataDr();
}
//初始化数据
const initDataDr = () =>{
	selectInfoDr.page = 1;
	selectInfoDr.pagesize = 15;
	selectInfoDr.title = ""
	selectInfoDr.class = 1;
	selectInfoDr.state = 1;
}
onMounted(()=>{
	getToDoListDr();
})
const editFlow = (val:nay) => {}
</script>
<template>
	<div class="app_box">
		<div class="app-container">
			<div class="search">
				<el-form ref="searckFormRefdr" :model="selectInfoDr" :inline="true">
					<el-form-item label="任务标题" prop="name">
						<el-input
							v-model="selectInfoDr.title"
							placeholder="请输入任务标题"
							@keyup.enter="searchQuery"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getToDoListDr()"><i-ep-search />搜索</el-button>
						<el-button @click="resetQueryDr()"><i-ep-refresh />重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-card shadow="never">
				<el-table
					v-loadingDr="loadingDr"
					element-loadingDr-text="Loading..."
					highlight-current-row
					:data="taskFlowAryDr"
					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 fixed="right" align="center" label="操作" width="150" >
						<template #default="scope">
							<el-button type="warning" :icon="Edit" @click="editFlow(scope.row)" />
							<el-button type="danger" :icon="Delete" @click="editFlow(scope.row.flowkeys)" />
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-model:total="totalsdr"
					v-model:page="selectInfoDr.page"
					v-model:limit="selectInfoDr.pagesize"
					@pagination="getToDoListDr"
				/>
			</el-card>






		</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>