ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-29 13:25:09
@ 备注: 应用发布页面
-->
<script lang='ts' setup>
import { gainAppPageInfo,setCustomerFormState } from '@/api/DesignForm/requestapi'
const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	},
	groupKey:{
		type:String,
		default:""
	}
});
const appStatue = ref(true)
const isEdit = ref(false)
onMounted(()=>{
	gainAppPageInfo({id:props.appCont.uuid})
		.then((data)=>{
			// console.log("获取初始化表单数据",data)
			if(data.data.appForm.states == 1){
				appStatue.value = true
				props.appCont.state = 1
			}else{
				appStatue.value = false
				props.appCont.state = 2
			}
		})
		.finally(()=>{
			isEdit.value = true;
		})
})
// watch(()=>appStatue.value,(val:boolean) => {
	
// 	let sta = 1
// 	if(val){
// 		props.appCont.state = 1
// 		sta = 1
// 	}else{
// 		props.appCont.state = 2
// 		sta = 2
// 	}

// 		setUpState(sta)

	
// })
/**
@ 作者: 秦东
@ 时间: 2024-05-29 14:38:01
@ 功能: 设置状态
*/
const setUpState = (val:number) => {
	setCustomerFormState({id:props.appCont.uuid,state:val})
	.then((data)=>{
		props.appCont.state = appStatue.value
		// ElMessage({
		// 			showClose: true,
		// 			message: data.msg,
		// 			type: 'success',
		// 		})
	})
}
const switchChang = () =>{
	if(appStatue.value == 1){
		setUpState(1)
	}else{
		setUpState(2)
	}
}
</script>
<template>
	<div class="appBox">
		<el-card class="appCardBox" shadow="always">
			<table>
				<tr>
					<td width="100px" align="center">
						<el-image :src="props.appCont.appSvg">
							<template #error>
								<div class="image-slot">
									<el-icon><icon-picture /></el-icon>
								</div>
							</template>
						</el-image>
					</td>
					<td width="150px" align="center">
						<el-text v-if="appStatue" class="mx-1 bigWord" type="success">已启用</el-text>
						<el-text v-else class="mx-1 bigWord" type="danger">已停用</el-text>
					</td>
					<td align="left" >
						
						<el-text v-if="appStatue" class="mx-1" type="success">应用已启用，为可用状态。</el-text>
						<el-text v-else class="mx-1" type="danger">应用已停用，不可使用此App。</el-text>
					</td>
					<td  width="100px" align="right">
						<el-switch
							v-model="appStatue"
							class="ml-2"
							inline-prompt
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
							active-text="已启用"
							inactive-text="已停用"
							@change="switchChang"
						/>
					</td>
				</tr>
			</table>
		</el-card>
	</div>
</template>
<style  lang='scss' scoped>
.appBox{
	width:100%;
	background-color : #F5F7FA;
	height: calc(100vh - 40px);
	text-align: center;
	.appCardBox{
		max-width: 60%;
		min-width: 40%;
		margin: 20px auto;
		td{
			vertical-align: middle;
			.bigWord{
				font-size:30px;
			}
		}
		.el-image {
			padding: 0 5px;
			max-width: 80px;
			max-height: 70px;
			width: 100%;
			height: 70px;
			border: 1px solid #F0F2F5;
			border-radius: 5px;
			background: var(--el-fill-color-light);
		}
		.image-slot {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			background: var(--el-fill-color-light);
			color: var(--el-text-color-secondary);
			font-size: 30px;
		}
		.image-slot .el-icon {
			font-size: 30px;
		}
	}
}
</style>