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,editProductionFormStatus } from '@/api/DesignForm/requestapi'
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
//引入自定义处理页面
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'
import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue'
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue"	//自建应用

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

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

//表单ID
const formKeyStr =  computed({
	get() {
		return props.formKey
	},
	set(val: formStruct) {
		emits('update:formKey', val)
	}
});
const editIds = reactive<string[]>([]);		//记录总数
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[]>()

const lookPageIsShow = ref(false)
const loadingApp = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:54:23
@ 功能: 获取表单列表
*/
const getFormAppList = () => {
	loadingApp.value = true
	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(() => {
			loadingApp.value = false
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 13:39:51
@ 功能: 创建表单任务
*/
const startUsing = (id:string,title:string) => {
	emits('getRongQiAttr')
	versionId.value = id
	versionTitle.value = title
	openTaskDrawer.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:57:11
@ 功能: 编辑表单
*/
const editFormApp = (id:string) => {
	emits('getRongQiAttr')
	formId.value = id.toString()
	addFormIsShow.value= true
	console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value)
}
/**
@ 作者: 秦东
@ 时间: 2024-03-22 08:20:23
@ 功能: 删除表单
*/
const delFormApp = (id:string) => {
	ElMessageBox.confirm(
		'请问是否真的删除？删除后数据将无法找回！',
		'温馨提示！',
		{
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		}
	)
	.then(() => {
		editProductionFormStatus({id:[id.toString()],status:3,is_delete:false})
			.then(({data})=>{
				getFormAppList()
				// editIds.splice(0,editIds.length);
			})
	})
	.catch(() => {
		getFormAppList()
	})
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	addFormIsShow.value = false;
	getFormAppList()
}
onMounted(()=>{
	getFormAppList()
})

/**
@ 作者: 秦东
@ 时间: 2024-04-24 08:21:32
@ 功能: 关闭应用刷新页面
*/
const closeAppPage = () =>{
	console.log("关闭应用刷新页面")
	getFormAppList()
}

/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:32:18
@ 功能: 查看表单列表
*/
const lookFormList = (val:any) => {
	emits('getRongQiAttr')
	console.log("查看表单列表", val)
	lookPageIsShow.value = true
	state.formId = val.idStr

	versionId.value = val.versionId
	versionTitle.value = val.name

	let stateData = string2json(val.listjson)
			console.log("查看表单列表---->",stateData)
			state.tableData = stateData.tableData
			state.searchData = stateData.searchData
			state.loading = stateData.loading
			state.attrObj = stateData.attrObj
			state.config = stateData.config
			state.tagList = stateData.tagList
			
			state.formList = stateData.formList
			state.name = stateData.name
			state.treeData = stateData.treeData
			state.previewVisible = stateData.previewVisible
			state.formFieldList = stateData.formFieldList
			state.formApi = stateData.formApi
			state.dict = stateData.dict
			state.refreshTable = stateData.refreshTable


}
const state = reactive({
    tableData: {
      // tableProps: {}, //表格所有参数
      columns: [],
      config: {},
	  controlBtn:[],
	  operateBtn:[]
    },
    searchData: [],
    loading: false,
    attrObj: {},
    config: {
		pageSize:10,
		searchIsShow:true,
		searchFormIsShow:true,
		openPageMode:"drawer"
	},
    tagList: {},
    formId: props.formKey || '',
    formList: [], // 所有可选表单数据源
    name: '',
    treeData: {}, // 左侧树相关
    previewVisible: false,
    tabsName: 'second',
    formFieldList: [], // 表单数据源所有可选字段
	formApi:{
		type:"1",
		addApiUrl:"",
		editApiUrl:"",
		delApiUrl:"",
		lookApiUrl:""
	},
    dict: {},
    refreshTable: true
})
const appFormNameVal = ref("")
provide('appFormNAme', appFormNameVal)
const appPageShow = ref(false)
const appKey = ref<string>("")
/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:30:17
@ 功能: 编辑app内容
*/
const editAppCont = (val:string) => {
	emits('getRongQiAttr')
	appKey.value = val.toString();
	appPageShow.value = true;
}
/**
@ 作者: 秦东
@ 时间: 2024-04-24 10:44:42
@ 功能: 翻页
*/
const fanyePage = (val: number) =>{
	pageApp.value = val
	getFormAppList()
}
</script>
<template>
    <div v-loading="loadingApp">
		<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="item.name"
						class="picture"
						@click.top="startUsing(item.versionId,item.name)"
					/>
					<img
						v-else
						:src="item.icon"
						:title="item.name"
						class="picture"
						@click.top="startUsing(item.versionId,item.name)"
					/>
					<div class="cardhead">
						<el-text  class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.versionId,item.name)">{{item.name}}</el-text>
					</div>
					<el-row v-if="item.classify==3">
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="View" @click="lookFormList(item)"></el-button>
						</el-col>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="Edit" @click="editAppCont(item.signCodeStr)"></el-button>
						</el-col>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="Delete" @click="delFormApp(item.idStr)"></el-button>
						</el-col>
					</el-row>
					<el-row v-else>
						<el-col :span="8" class="but_centent">
							<el-button size="small" circle class="button" :icon="View" @click="lookFormList(item)"></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="delFormApp(item.idStr)"></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" @current-change="fanyePage" />
		</div>

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

		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey"  :group-key="props.groupId" :drawer-with="props.drawerWith"  @refreshPage="getFormAppList" />

		<el-drawer
			v-model="lookPageIsShow"
			title="列表预览"
			direction="rtl"
			:before-close="handlePreviewClose"
			:size="props.drawerWith"
		>
			<ak-page-list
				:data="state.tableData"
				:search-data="state.searchData"
				:config="state.config"
				:form-id="state.formId"
				:versionid="versionId" 
				:versiontitle="versionTitle"
				v-model:look-page-is-show="lookPageIsShow"
			/>

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