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' //自建应用编辑
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.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")
	ElMessageBox.confirm(
		'请问是否真的删除？删除后数据将无法找回！',
		'温馨提示！',
		{
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		}
	)
	.then(() => {
		editProductionFormStatus({id:[val.id.toString()],status:3,is_delete:false})
			.then(({data})=>{
				getFormAppList(props.searchQuery);
			})
	})
	.catch(() => {
		getFormAppList(props.searchQuery);
	})
}
/**
@ 作者: 秦东
@ 时间: 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
})
/**
@ 作者: 秦东
@ 时间: 2024-07-23 15:27:51
@ 功能: 表单数据
*/
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,
	view:{
		list:{
			status:true,
			isClick:false,
			form:{
				sortWord:"",
				sortClass:1
			}
		},
		date:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:1
			}
		}
		,
		time:{
			status:false,
			isClick:false,
			form:{
				sortWord:"",
				sort:1
			}
		}
		,
		gantt:{
			status:false,
			isClick:false,
			form:{
				startTime:"",
				endTime:"",
				dayType:2,
				sortWord:"",
				sort:1
			}
		}
		,
		map:{
			status:false,
			isClick:false,
			form:{
				mapWord:"",
				sortWord:"",
				sort:1
			}
		},
		card:{
			status:false,
			isClick:false,
			form:{
				sort:1,
				sortWord:"",
				imgWork:"",
				imgWidth:50,
				imgHeight:50,
				imgBorderRadius:5,
				imgPadding:2,
				titleWork:"",
				describe:"",
				ranks:3
			}
		}
	}
})
const lookPageIsShow = ref(false)
const versionTitle = ref<string>("")	//表单名称
const versionId = ref<string>("")	//表单版本号
const formId = ref<string>("")
const addFormIsShow = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:32:18
@ 功能: 查看表单列表
*/
const lookFormList = (val:any) => {
	emits('getRongQiAttr')
	// console.log("查看表单列表aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", val)
	lookPageIsShow.value = true
	state.formId = val.idStr

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

	let stateData = string2json(val.listjson)
			// console.log(val.listjson)
			// console.log("查看表单列表---->",stateData)
			//let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson)
			if(stateData.tableData.columns.length>0){
				for(let i = 0;i<stateData.tableData.columns.length;i++){
					if(stateData.tableData.columns[i].config!=undefined && stateData.tableData.columns[i].control!=undefined){
						// console.log(stateData.tableData.columns[i])
						let paramx:string = ""+stateData.tableData.columns[i].control.optionsValue3Field
						/*
							在这里请求后台获取字段
						*/
						getFieldRecord(paramx).then(({ data }) => {
							stateData.tableData.columns[i].options = data
							if(stateData.searchData.length>0){
								for(let j = 0;j<stateData.searchData.length;j++){
									// console.log(stateData.searchData[j])
									if(stateData.searchData[j].id==stateData.tableData.columns[i].id){
										stateData.searchData[j].options = data
									}
								}
							}
						})
					}
				}
			}
			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


}
/**
@ 作者: 秦东
@ 时间: 2024-03-21 10:57:11
@ 功能: 编辑表单
*/
const editFormApp = (val:any) => {
	emits('getRongQiAttr')
	formId.value = val.id.toString()
	addFormIsShow.value= true
	// console.log("编辑表单",val.id,"-",formId.value,"-",addFormIsShow.value)
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/
const refreshPage = (pageType:string) =>{
	addFormIsShow.value = false;
	getFormAppList(props.searchQuery);
}
</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  v-if="item.classify==3">
							<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>
						<el-dropdown  v-else>
							<span class="el-dropdown-link">
								<el-icon><MoreFilled /></el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="editFormApp(item)" >编辑</el-dropdown-item>
									<el-dropdown-item @click="eidtStatus(item)" divided>删除</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
					<div  v-if="item.classify==3" 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>
					<div  v-else class="cardContBox" @click="lookFormList(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="props.drawerWith" :search-query="props.searchQuery" @refreshPage="getFormAppList" />
		<AppContainerPage v-model:edit-is-open="editIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" :search-query="props.searchQuery" :group-key="props.appGroup" @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" 
				:viewPage="state.view"
				:versiontitle="versionTitle"
				
				v-model:look-page-is-show="lookPageIsShow"
			/>
		</el-drawer>
		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
	</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>