ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appListPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-07-22 15:39:28
@ 备注: 自定义应用列表模式
-->
<script lang='ts' setup>
import { customerFormCont } from "@/api/DesignForm/type";
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord } from '@/api/DesignForm/requestapi'
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
  View,
  Star
} from '@element-plus/icons-vue'
import RunApplication from "@/views/sysworkflow/lowcodepage/runApp/index.vue"

const props = defineProps({
	searchQuery:{
		type:Object,
		default(){
			return {}
		}
	},
	appGroup:{
		type:String,
		default:""
	},
	drawerWith:{
		type:Number,
		default:true
	}
});
const emits = defineEmits(["getRongQiAttr"]);
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:09:29
@ 功能: 总记录数
*/
const pageTotal = ref(0)
const contList = ref<customerFormCont[]>()	//记录
	const loadingApp = ref(false)
const runIsOpen = ref(false)
const pickAppInfo = ref<customerFormCont>()			//应用或表单内容
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:54:23
@ 功能: 获取表单列表
*/
const getFormAppList = (val:any) => {
	loadingApp.value = true
	let sendInfo = {
		page:val.page,
		pagesize:val.pagesize,
		keywords:val.searchWork,
		groupId:props.appGroup
	}
	getCustomerFormList(sendInfo)
		.then(({ data }) => {
			console.log("打开应用-2->",data);
			pageTotal.value = data.total
			contList.value = data.list
		})
		.finally(() => {
			loadingApp.value = false
		})
}

onMounted(() => {
	nextTick(() => {
		getFormAppList(props.searchQuery);
	})
})
watch(()=>props.appGroup,()=>{
	getFormAppList(props.searchQuery);
})
/**
@ 作者: 秦东
@ 时间: 2024-07-22 16:16:31
@ 功能: 删除表单
*/
const confirmToDelete = (val:customerFormCont) => {
	console.log("确定删除表单---->", val);
}


/**
@ 作者: 秦东
@ 时间: 2024-05-29 16:13:16
@ 功能: 打开应用
*/
const lookAppList = (val:any) => {
	let appPower = 0;
	emits('getRongQiAttr')
	pickAppInfo.value = val
	appJwtPower({id:val.signCodeStr,types:1})
		.then(({data})=>{
			// console.log("打开应用------>data:",data)
			if(data){
				runIsOpen.value = true
			}else{
				ElMessage({
					message: '对不起！您不可使用此App！请联系管理员进行授权！',
					type: 'error',
					plain: true,
				})
			}
		})
}


</script>
<template>
	<div class="listBody">
		<el-table :data="contList" border class="tableBox">
			<el-table-column fixed  label="封面" width="80" align="center">
				<template #default="scope">
					<el-image
						style="width: 30px; height: 30px"
						:src="scope.row.icon?scope.row.icon:'https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png'"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2"
						:initial-index="4"
						fit="cover"
					/>
				</template>
			</el-table-column>
			<el-table-column fixed  prop="name" label="名称" min-width="380" />
			<el-table-column  label="编号" width="200">
				<template #default="scope">
				{{scope.row.signCodeStr!=0?scope.row.signCodeStr:""}}
				</template>
			</el-table-column>
			<el-table-column  label="类型"  align="center" width="180">
				<template #default="scope">
					<el-tag v-if="scope.row.classify==1" type="primary">普通表单</el-tag>
					<el-tag v-if="scope.row.classify==2" type="success">流程表单</el-tag>
					<el-tag v-if="scope.row.classify==3" type="warning">自定义应用</el-tag>
					<el-tag v-if="scope.row.classify==4" type="danger">自定义应用表单</el-tag>
				</template>
			</el-table-column>
			<el-table-column  prop="describe" label="简介" min-width="180" />
			<el-table-column  label="创建人" width="100"  align="center">
				<template #default="scope">
				{{scope.row.creatername}}
				</template>
			</el-table-column>
			<el-table-column  label="创建时间" width="200">
				<template #default="scope">
				{{scope.row.creatertimeStr}}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200" align="center">
				<template #default="scope">
					<el-button-group v-if="scope.row.classify==3" class="ml-4">
						<el-button  size="small" title="查看"  :icon="View" @click="lookAppList(scope.row)" />
						<el-button size="small" title="设为常用"  :icon="Star" />
						<el-button size="small" title="编辑" type="success" :icon="Edit" />
						
						<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="confirmToDelete(scope.row)">
							<template #reference>
								<el-button size="small" title="删除" type="danger" :icon="Delete" />
							</template>
						</el-popconfirm>
					</el-button-group>
					<el-button-group v-else class="ml-4">
						<el-button  size="small" title="查看"  :icon="View"  />
						<el-button size="small" title="编辑" type="success" :icon="Edit" />
						<el-popconfirm title="请问是否真的删除？删除后数据将无法找回！" @confirm="confirmToDelete(scope.row)">
							<template #reference>
								<el-button size="small" title="删除" type="danger" :icon="Delete" />
							</template>
						</el-popconfirm>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-box">
            <el-pagination background v-if="pageTotal > 0" v-model:current-page="props.searchQuery.page"
            v-model:page-size="props.searchQuery.pagesize"
            :total="pageTotal" @current-change="handleCurrentChange" />
        </div>

		<RunApplication v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" @refreshPage="getFormAppList"/>
	</div>
</template>
<style  lang='scss' scoped>
.pagination-box{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.listBody{
	padding: 10px 10px;
}
.tableBox{
	width: 100%;
	height: calc(100vh - 370px);
}
</style>