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

<!--
@ 作者: 秦东
@ 时间: 2024-07-22 08:53:50
@ 备注: 自定义应用卡片视图
-->
<script lang='ts' setup>
import { customerFormCont } from "@/api/DesignForm/type";
import { getCustomerFormList,editProductionFormStatus,appJwtPower,getFieldRecord } from '@/api/DesignForm/requestapi'

/**
@ 作者: 秦东
@ 时间: 2024-07-22 11:30:11
@ 功能: 引入组件
*/
import AppContainer from '@/views/sysworkflow/lowcodepage/newLowCode/appLayout/appContainer.vue'
import AppContainerPage  from '@/views/sysworkflow/lowcodepage/newLowCode/appLayoutEdit/appContainerPage.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("打开应用-->",data);
			pageTotal.value = data.total
			contList.value = data.list
		})
		.finally(() => {
			loadingApp.value = false
		})
}

onMounted(() => {
	nextTick(() => {
		getFormAppList(props.searchQuery);
	})
})
watch(()=>props.appGroup,()=>{
	getFormAppList(props.searchQuery);
})
const srcList = (val:string) =>{
	if(val){
		return [val]
	}else{
		return ["https://docu.hxgk.group/images/2024_04/482167d1bf2b75a5717bcf68e18235f7.png"]
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:57:45
@ 功能: 编辑应用
*/
const editIsOpen = ref(false)
const appKey = ref<string>("")
const editForm = (val:any) => {
	emits("getRongQiAttr")
	pickAppInfo.value = val
	editIsOpen.value = true;
}
/**
@ 作者: 秦东
@ 时间: 2024-07-22 09:58:19
@ 功能: 编辑应用状态
*/
const eidtStatus = (val:any) => {
	emits("getRongQiAttr")
}
/**
@ 作者: 秦东
@ 时间: 2024-07-22 10:01:17
@ 功能: 打开应用
*/
const openApp = (val:any) => {
	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,
				})
			}
		})
}
defineExpose({
	getFormAppList
})
</script>
<template>
	<div>
		<div v-loading="loadingApp" class="content1 flex flex-wrap gap-4">
			<el-card v-for="item in contList" :key="item.id" class="cardBox">
				<template #header>
					<el-dropdown>
						<span class="el-dropdown-link">
							<el-icon><MoreFilled /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="editForm(item)" >编辑</el-dropdown-item>
								<el-dropdown-item @click="eidtStatus(item)" divided>删除</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<div class="cardContBox" @click="openApp(item)">
					<el-image
						style="width: 100px; height: 100px"
						:src="item.icon?item.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"
					/>
					<div class="cardInfo" :style="'width: calc(100% - 100px); height: 100px; overflow: hidden;' ">
						<div class="title">{{item.name}}</div>
						<div class="content">{{item.describe}}</div>
					</div>
				</div>
			</el-card>
			
		</div>
		<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>
		<AppContainer v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" />
		<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" />
	</div>
</template>
<style  lang='scss' scoped>
.pagination-box{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #eeeeee;
}


.content1{
	padding:1rem 1rem 0 1rem;
	::v-deep .el-card__body{
		padding:5px 10px 10px 10px;
	}
	::v-deep .el-card__header{
		border-bottom: 0;
		padding: 0;
		height: 10px;
		display:flex;
		justify-content: right;
	}
	.el-dropdown-link{
		margin-top: 4px;
		margin-right: 10px;
		cursor: pointer;
	}
}
.cardBox{
	width:306px;
	.cardContBox{
		display: flex;
		width: 100%;
		justify-content: flex-start;
		cursor: pointer;
	}
	.cardInfo{
		padding-left: 5px;
	}
	.title{
		font-size:14px;
		font-weight:bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.content{
		color: #909399;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>