hxgksystemapp/src/views/sysworkflow/lowcodepage/appFormList.vue

<!--
@ 作者: 秦东
@ 时间: 2024-03-21 09:51:02
@ 备注: 自定义表单分组内容列表
-->
<script lang='ts' setup>
import { customerFormCont } from "@/api/DesignForm/type";
import { getCustomerFormList } from '@/api/DesignForm/requestapi'
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'

import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'


const props = defineProps({
	groupId:{
		type:String,
		default:""
	},
	drawerWith:{
		type:Number,
		default:true
	},
	formKey:{
		type:String,
		default:""
	}
});

const emits = defineEmits(["update:formKey"]);

//表单ID
const formKeyStr =  computed({
	get() {
		return props.formKey
	},
	set(val: formStruct) {
		emits('update:formKey', val)
	}
});
const formId = ref<string>("")
const versionTitle = ref<string>("")	//表单名称
const versionId = ref<string>("")	//表单版本号
const addFormIsShow = ref(false)
const openTaskDrawer = ref(false) //新增任务
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
const pageApp = ref<number>(1)			//页码
const pageAppSize = ref<number>(12)	//每页显示几个
const pageAppTotal = ref<number>(0)	//总记录数
const contList = ref<customerFormCont[]>()
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:54:23
@ 功能: 获取表单列表
*/
const getFormAppList = () => {
	let sendInfo = {
		page:pageApp.value,
		pagesize:pageAppSize.value,
		groupId:props.groupId
	}
	getCustomerFormList(sendInfo)
		.then(({ data }) => {
			// console.log("搜索表单-->",data);
			pageAppTotal.value = data.total
			contList.value = data.list
		})
		.finally(() => {})
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 13:39:51
@ 功能: 创建表单任务
*/
const startUsing = (id:string,title:string) => {
	versionId.value = id
	versionTitle.value = title
	openTaskDrawer.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:57:11
@ 功能: 编辑表单
*/
const editFormApp = (id:string) => {
	formId.value = id.toString()
	addFormIsShow.value= true
	console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value)
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	addFormIsShow.value = false;
	getFormAppList()
}
onMounted(()=>{
	getFormAppList()
})
</script>
<template>
    <div>
		<el-row :gutter="10" >
			<el-col v-for="item in contList" :key="item.id"  :xs="8" :sm="12" :md="8" :lg="8" :xl="8" style=" margin-top: 10px;">
				<el-card class="cardpattern"  body-style="padding:5px;">
					<img
						v-if="item.icon==''"
						:src="squareUrl"
						title="示例图片"
						class="picture"
						@click.top="startUsing(item.id,item.name)"
					/>
					<img
						v-else
						:src="item.icon"
						title="示例图片"
						class="picture"
						@click.top="startUsing(item.id,item.name)"
					/>
					<div class="cardhead">
						<el-text  class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.id,item.name)">{{item.name}}</el-text>
					</div>
					<el-row>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="View"></el-button>
						</el-col>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="Edit" @click="editFormApp(item.idStr)"></el-button>
						</el-col>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
						</el-col>
					</el-row>
				</el-card>
			</el-col>		
		</el-row>
		<div class="formGroupPage">
			<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" />
		</div>
		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
	</div>
</template>
<style  lang='scss' scoped>
.cardhead{
	padding: 5px 0;
}
.formGroupPage{
	width:100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 图片 */
.picture {
  height: 100%;
  min-height: 50px;
  max-height: 100px;
  display: block;
  width: 100%;
  min-width: 50px;
}
.but_centent{
	text-align: center;
}
</style>