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

<!--
@ 作者: 秦东
@ 时间: 2023-09-21 13:41:04
@ 备注: 任务
-->
<script lang='ts' setup>
import { TaskLogQuery,taskLonCont } from '@/api/taskapi/types'
import { appFormdataLog,delCustomerFormData } from '@/api/taskapi/management'

//引入页面
import TaskEntry from '@/views/taskplatform/taskmanagement/taskentry.vue'
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'
import EditTaskCustomerForm from '@/views/taskplatform/taskmanagement/edittaskcustomerform.vue'

const loading = ref(false)
const searckFormRef  = ref(ElForm);
const ids = ref<number[]>([]);	//选中的Id
const total = ref<number>(0)
const searchData = reactive<TaskLogQuery>({
	page:1,
	pagesize:15
})
const formLogList = ref<taskLonCont[]>()

const openTaskDialog = ref(false)

const versionId = ref<string>()
const mastersKey = ref<string>()
const versionTitle = ref<string>()
const openTaskDrawer = ref(false)
const openEditTaskDrawer = ref(false)

//获取列表
const searchQuery = () =>{
	loading.value = true;
	appFormdataLog(searchData)
		.then(({data}) =>{
			// console.log(data)
			if(data != null){
				formLogList.value = data.list;
      			total.value = data.total;
			}
		})
		.finally(()=>{
			loading.value = false
		})
}
//重置表单
const resetQuery = () =>{
	searckFormRef.value.resetFields();
	initData();
}
//初始化数据
const initData = () =>{
	searchData.page = 1;
	searchData.pagesize = 15;
	searchData.keywords = ""
}
/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
  	ids.value = selection.map((item: any) => item.id);
}
//添加记录
const addDialog = () =>{
	drawerWith.value = contbody.value?.clientWidth
	openTaskDialog.value = true;
}
//批量删除
const batchDeleteLog = () =>{

}
//编辑表单
const editFormLogDialog = (val:any) =>{
	drawerWith.value = contbody.value?.clientWidth
	versionId.value = val.version_id.toString()
	versionTitle.value = val.title
	mastersKey.value = val.mastersKeyStr.toString()
	openEditTaskDrawer.value = true
}
//删除内容
const DeleteFormLog = (id:any) =>{
	loading.value = true;
	delCustomerFormData({"id":id.toString()})
		.then((data) =>{
			searchQuery();
		})
}
const contbody = ref()
const drawerWith = ref<number>(0);
//加载数据
onMounted(() => {
	searchQuery();
	drawerWith.value = contbody.value?.clientWidth
});

//打开自定义表单
const openCustomerForm = (id:string,title:string) =>{
	versionId.value = id
	versionTitle.value = title
	openTaskDrawer.value = true
	// console.log(id,title)
}
</script>
<template>
	<div ref="contbody">
	<div class="app-container">
		<div class="search">
			<el-form ref="searckFormRef" :model="searchData" :inline="true">
				<el-form-item label="关键字" prop="name">
					<el-input
						v-model="searchData.keywords"
						placeholder="标题"
						clearable
						@keyup.enter="searchQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchQuery()"><i-ep-search />搜索</el-button>
					<el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
				</el-form-item>
			</el-form>
    	</div>
		<el-card shadow="never">
			<template #header>
				<el-button type="success" @click="addDialog()"><i-ep-plus />新增</el-button>
				<el-button
					type="danger"
					:disabled="ids.length === 0"
					@click="batchDeleteLog()"
				>
					<i-ep-delete />删除
				</el-button>
			</template>
			<el-table
				v-loading="loading"
				highlight-current-row
				:data="formLogList"
				border
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column fixed label="标题" prop="title" />
				<el-table-column label="发起人" >
					<template #default="scope">
						{{ scope.row.createrName }}({{ scope.row.createrNumber }})
					</template>
				</el-table-column>
				<el-table-column label="发起时间" prop="createrTame" />
				<el-table-column fixed="right" label="操作" align="center" width="220">
					<template #default="scope">
						<el-button
							
							type="primary"
							link
							size="small"
							@click.stop="editFormLogDialog(scope.row)"
						>
							<i-ep-edit />编辑
						</el-button>
						<el-button
							type="primary"
							link
							size="small"
							@click.stop="DeleteFormLog(scope.row.id)"
						>
							<i-ep-delete />删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="searchData.page"
				v-model:limit="searchData.pagesize"
				@pagination="searchQuery"
			/>
		</el-card>
		<TaskEntry v-model:isshow="openTaskDialog" @opencustomerform="openCustomerForm" />
		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="drawerWith" @searchquery="searchQuery" />
		<EditTaskCustomerForm v-model:iseditopen="openEditTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :masterskey="mastersKey" infoid="2" :drawerwith="drawerWith"  @searchquery="searchQuery" />
	</div>
</div>
</template>
<style  lang='scss' scoped>

</style>