appFormLowcode/src/views/formTable/page/cardPageNew.vue

<!--
@ 作者: 秦东
@ 时间: 2025-05-31 13:51:02
@ 备注: 卡片模式（新）
-->
<script lang='ts' setup>
import request from '@/utils/axios/index'
import { gainAppPageInfo,judgeSubmitCancel,gainFormPageListCont,recalSendMsg,tableCusterField } from '@/api/lowCode/form/index'
import{ json2string,string2json } from '@/utils/lowCode/form'
import { softDeletion,retractRunWorkFlow } from '@/api/lowCode/taskapi/management'

import { Picture as IconPicture } from '@element-plus/icons-vue'
import SearchSelect from '@/components/lowCode/selectSearch.vue'
import AppPageInfo  from '@/views/formTable/pageInfo.vue'

const props = defineProps({
	
	appKey:{
		type:String,
		default:""
	},
	appId:{
		type:String,
		default:""
	},
	taskTitle:{
		type:String,
		default:""
	},
	taskId:{
		type:String,
		default:""
	},
	taskKey:{
		type:String,
		default:""
	},
    stateListInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    stateForm:{
		type:Object,
		default(){
			return {}
		}
	},
	appFlowInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    formTableStr:{
        type:String,
		default:"",
    }
});
const lookInfo = ref<any>({})
const taskScrollbar = ref(null) //滚动条
const loadingList = ref(false)  //是否显示加载
const emits = defineEmits(['update:pageIdAry'])
const loadText = ref("数据加载中，请稍后......")
const pageIdAry = ref<any[]>([])
const _scrollTop = ref<number>(0)
const pageTotal = ref<number>(0) //数据总量
const state = reactive({
    page:1,
    pagesize: props.stateListInfo.config?.pageSize || 2
})
const listPage = ref<any[]>([])
const openAppPage = ref(false)
const currentAsfTableDataList = ref([])//当前点击的关联表单数据
const asfAppContent = reactive<any>({
    appKey:props.appKey,
	appId:props.appId,
	taskTitle:props.taskTitle,
	taskId:props.taskId,
	taskKey:props.taskKey,
})
const appContent = reactive<any>({
    appKey:props.appKey,
	appId:props.appId,
	taskTitle:props.taskTitle,
	taskId:props.taskId,
	taskKey:props.taskKey,
})
/**
@ 作者: 秦东
@ 时间: 2024-11-06 13:40:27
@ 功能: 滚动监听
*/
const onHandleAppTaskScroll = (event:any) => {
    console.log("onHandleScroll",loadingList.value, event)
    if (loadingList.value === true) {
        return
    }
    let wrapRef = taskScrollbar.value.wrapRef
    taskScrollbar.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
    taskScrollbar.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
    let poor = wrapRef.scrollHeight - wrapRef.clientHeight
    if (event.scrollTop + 2 >= poor) {
        _scrollTop.value = event.scrollTop
        
        loadingList.value=true
        state.page++
        // console.log("searchInfo.page",searchInfo.page++)
        getPageData()
    }
}/**
@ 作者: 秦东
@ 时间: 2024-11-06 11:30:20
@ 功能: 搜索条件
*/
const searchQuery  = computed(() => {
    return json2string(props.stateListInfo.searchData);
});

/**
@ 作者: 秦东
@ 时间: 2025-06-03 13:49:26
@ 功能: 卡片
*/
const qrJumpGetPageData = (qrDetailId: string) => {
    let qrJumpSearchData = [{"id":"id","label":"Id","field":"id","type":"bigint(20)","attribute":"","pattern":"bigint","fieldClass":"id","activeValue":"","inactiveValue":"","config":{"optionsType":0},"control":{"optionsValue3Formid":"","optionsValue3Field":""},"options":[],"isSearch":true,"value":qrDetailId}]
    loadText.value = "数据加载中，请稍后......"
    loadingList.value = true
    console.log(searchQuery.value)
    let sendData = {
		formId: props.appId,
		page:1,
		pagesize:state.pagesize,
		searchData:json2string(qrJumpSearchData)
	}
    state.loading = true;
    tableCusterField(sendData)
      .then((data) => {
        console.log("获取列表详细信息----------ee------->",data.data) 
        listPage.value = data.data.list
        if(Array.isArray(data.data.list)){
             let dataList = data;
        }
        currentAsfTableDataList.value = data.data.list
        pageTotal.value = pageTotal.value + data.data.count
            if(data.data.total > 0){
                if(pageTotal.value < data.data.total){
                    let pagenum = state.pagesize - data.data.count
                    if (pagenum > 0) {
                        loadText.value = ""
                        loadingList.value = true
                    }else{
                        loadText.value = ""
                        loadingList.value = false
                    }
                }else{
                    loadText.value = ""
                    loadingList.value = true
                }
                
            }else{
                loadText.value = "此选项没有数据！"
                loadingList.value = true
            }
      })                                                                                                                              
}


function getAsfDataTitlesByIds(asfQueryParams: any[]) {
    return request({
        url: "/javasys/lowCode/AssociatedForms/getAsfDataTitlesByIds",
        method: "post",
        data: asfQueryParams,
    });
}
// 使用 ref 来存储 URL 信息
const fullUrl = ref(window.location.href);

/**
@ 作者: 秦东
@ 时间: 2025-06-03 13:43:29
@ 功能: 初始化加载
*/
onMounted(()=>{
    nextTick(()=>{
        if(fullUrl.value.includes("&qrDetailId=")){
            let urlSplitArray = fullUrl.value.split("&qrDetailId=")
            let qrDetailId = urlSplitArray[1]
            qrJumpGetPageData(qrDetailId)
            setTimeout(() => {
                openLook(listPage.value[0])
            }, 500);
        }else{
            requeryList()
        }
    })

});
/**
@ 作者: 秦东
@ 时间: 2024-11-06 14:22:31
@ 功能: 打开页面查看
*/
const openLook = (val:any) => {
    console.log("打开页面查看:",val)
    props.stateForm.type=3
    lookInfo.value = val
    openAppPage.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-11-18 14:28:33
@ 功能: 修改数据
*/
const openEdit = (val:any) => {
    console.log("打开页面查看:",val)
    props.stateForm.type=2
    lookInfo.value = val
    openAppPage.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 14:27:34
@ 功能: 提交申请
*/
const submitApproval = (val:any) => {
    console.log("打开页面查看:",val)
    props.stateForm.type=4
    lookInfo.value = val
    openAppPage.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 14:27:34
@ 功能: 重新提交申请
*/
const reapplyApproval = (val:any) => {
    console.log("打开页面查看:",val)
    props.stateForm.type=5
    lookInfo.value = val
    openAppPage.value = true
}

/**
@ 作者: 秦东
@ 时间: 2024-11-22 08:42:48
@ 功能: 归档后申请修改
*/
const openEditFlow = (val:any) => {
    console.log("打开页面查看:",val)
    props.stateForm.type=6
    lookInfo.value = val
    openAppPage.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-11-05 10:15:38
@ 功能: 获取数据
*/
const getPageData = () => {
    loadText.value = "数据加载中，请稍后......"
    loadingList.value = true
    let sendData = {
        formId: props.appId,
        page: state.page,
        pagesize: state.pagesize,
        searchData: searchQuery.value,
       
    };
    state.loading = true;
    tableCusterField(sendData)
      .then((data) => {
        console.log("获取列表详细信息----------ee------->",data.data) 
        
        if(Array.isArray(data.data.list)){
            listPage.value.push(...data.data.list)
             let dataList = data;
        }

        pageTotal.value = pageTotal.value + data.data.count
            if(data.data.total > 0){
                if(pageTotal.value < data.data.total){
                    let pagenum = state.pagesize - data.data.count
                    if (pagenum > 0) {
                        loadText.value = ""
                        loadingList.value = true
                    }else{
                        loadText.value = ""
                        loadingList.value = false
                    }
                }else{
                    loadText.value = ""
                    loadingList.value = true
                }
                
            }else{
                loadText.value = "此选项没有数据！"
                loadingList.value = true
            }
      }) 

}


/**
@ 作者: 秦东
@ 时间: 2024-11-21 14:00:41
@ 功能: 重置查询列表
*/
const requeryList = () => {
    console.log("重置查询列表:")
    state.page = 1
    listPage.value = []
	nextTick(() => {
        getPageData()
    })
}

/**
@ 作者: 秦东
@ 时间: 2024-11-06 13:28:32
@ 功能: 监听选项
*/
watch(()=>pageIdAry,(val:any)=>{
    // console.log("监听选项",val);
    emits("update:pageIdAry",val.value)
},{deep:true})
/**
@ 作者: 秦东
@ 时间: 2024-11-21 13:12:19
@ 功能: 判断是否显示
@ 1:提交审批;2:重新申请;3:撤回;4:申请修改;5:修改;6:删除
*/
const butIsShow = (val:any,type:number) => {
    console.log("判断是否显示--->type",type)
    console.log("判断是否显示",val)
    switch (type) {
        case 7:
            if(val.flowIsOpens == 1 && val.taskStatus*1 == 1){
                return true;
            }else{
                return false;
            }
            break;
        case 2:
            if(val.flowIsOpens == 1 && val.taskStatus*1 == 2){
                return true;
            }else{
                return false;
            }
            break;
        case 3:
            if(val.flowIsOpens == 1  && val.taskStatus*1 == 3 && val.isRetract){
                return true;
            }else{
                return false;
            }
            break;
        case 4:
            if(val.flowIsOpens == 1 && val.taskStatus*1 == 4){
                return true;
            }else{
                return false;
            }
            break;
        case 5:
            if(val.flowIsOpens != 1){
                return true;
            }else{
                return false;
            }
            break;
        case 6:
            if(val.flowIsOpens != 1 || (val.flowIsOpens == 1 && (val.taskStatus*1 == 1 || val.taskStatus*1 == 2))){
                return true;
            }else{
                return false;
            }
            break;
        default:
            return false
    }
    // return true;
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 13:43:40
@ 功能: 撤回操作
*/
const withdrawAnApplication = (val:any) => {
    console.log("撤回操作",val)
    ElMessageBox.confirm(
        '您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！',
        '操作提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        retractRunWorkFlow({id: val.runFlowInfo}).then((data) => {
            ElMessage({
                message: "撤回成功！",
                type: "success",
            });
            requeryList()
        })
    })
    .catch(() => {
      
    })
}
/**
@ 作者: 秦东
@ 时间: 2025-04-01 14:50:46
@ 功能: 撤回发送的企业微信消息
*/
const recallSendMsg = (val: any) => {
  let sendInfo = {
    id: val.masters_key.toString(),
  };
  recalSendMsg(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getPageData();
  });
};
defineExpose({
    getPageData,
    requeryList
})
/**
@ 作者: 秦东
@ 时间: 2024-11-06 14:23:25
@ 功能: 删除按钮
*/
const delTask = (val:any) => {
    console.log("删除按钮", val,val.masters_key)
    ElMessageBox.confirm(
		'是否要删除此信息?已经删除将不可恢复！请慎重操作',
		'删除提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	.then(() => {
		let sendData = {
			id: [val.masters_key],
			isTrue: 2,
		};
		softDeletion(sendData).then((data) => {
			ElNotification({
				title: "系统提示！",
				message: data.mag ? data.mag : "删除成功",
				type: "success",
			});
            requeryList()
		})
	})
    .catch(() => {})
}
</script>
<template>
    <el-scrollbar ref="taskScrollbar" class="appListScrollbarCss" @scroll="onHandleAppTaskScroll">
        <el-checkbox-group v-model="pageIdAry">
            <el-card v-for="item in listPage" :key="item.id" class="taskCardBox"  shadow="always">
                <template #header>
                    <div class="card-header contentBetween">
                        <div>
                            <el-checkbox  v-if="item.isMyMsg" label="" :value="item.masters_key"  />
                            <el-text class="cardInfoTitle">{{ item.title }}</el-text>
                        </div>
                        <div v-if="item.flowIsOpens==1" class="carHeadStaus">
                            
                            <el-tag  v-if="item.taskStatus==1" type="warning">草稿</el-tag>
                            <el-tag  v-if="item.taskStatus==2" type="danger">被驳回</el-tag>
                            <el-tag  v-if="item.taskStatus==3" type="primary">审批中</el-tag>
                            <el-tag  v-if="item.taskStatus==4" type="info">归档</el-tag>
                        </div>
                    </div>
                </template>
                

                <el-row v-if="item.img != ''" :gutter="20">
                    <el-col :span="10">
                        <el-image  :src="item.img"  class="cardImg" :title="item.titleWork" @click="openLook(item)">
                            <template #error>
                                <div class="image-slot">
                                    <i class="fa fa-picture-o" />
                                </div>
                            </template>
                        </el-image>
                    </el-col>
                    <el-col :span="14">
                        <el-row @click="openLook(item)">
                            <el-col v-for="(descvVal,inVal) in item.describe" :key="inVal" class="cardInfoContents" :span="24" v-html="descvVal"></el-col>
                            <el-col class="cardInfoContents" :span="24">创建人：{{ item.creater }}</el-col>
                            <el-col class="cardInfoContents" :span="24">创建时间：{{ item.creater_time }}</el-col>
                        </el-row>
                    </el-col>

                </el-row>
                <el-row v-else @click="openLook(item)">
                    <el-col v-for="(descvVal,inVal) in item.describe" :key="inVal" class="cardInfoContent" :span="24" v-html="descvVal"></el-col>
                    <el-col class="cardInfoContents" :span="24">创建人：{{ item.creater }}</el-col>
                    <el-col class="cardInfoContents" :span="24">创建时间：{{ item.creater_time }}</el-col>
                </el-row>



                <template #footer>
                    <div class="contentBetween">
                        <el-text></el-text>
                        <el-button-group v-if="item.isMyMsg">
                            <el-button  v-if="butIsShow(item,7)" type="success" size="small" @click="submitApproval(item)">提交审批</el-button>
                            <el-button v-if="butIsShow(item,2)" type="warning" size="small" @click="reapplyApproval(item)">重新申请</el-button>
                            <el-button v-if="butIsShow(item,3)" type="" size="small" @click="withdrawAnApplication(item)">撤回</el-button>
                            <el-button v-if="butIsShow(item,4)" type="primary" size="small" @click="openEditFlow(item)">申请修改</el-button>
                            <el-button v-if="item.retract_true&&item.flowIsOpens==2" color="rgb(250, 181.5, 181.5)" size="small" @click="recallSendMsg(item)">撤回信息</el-button>


                            <el-button v-if="butIsShow(item,5)" type="info" size="small" @click="openEdit(item)">修改</el-button>
                            <el-button  v-if="butIsShow(item,6)" type="danger" size="small" @click="delTask(item)">删除</el-button> 
                        </el-button-group>


                    </div>
                </template>
            </el-card>
        </el-checkbox-group>


        <div v-if="loadingList" class="loading">{{loadText}}</div>
        <AppPageInfo v-model:is-show="openAppPage" :app-info="appContent" :app-page-info="lookInfo" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="props.formTableStr" @searchData="requeryList" />
        <AppPageInfo v-model:is-show="asflookPageInfoIsShow" :app-info="asfAppContent" :app-page-info="currentAsfTableDataList[0]" :state-form="stateForm" :app-flow-info="appFlowInfo" :form-table-str="props.formTableStr" @searchData="requeryList" />

    </el-scrollbar> 
</template>
<style  lang='scss' scoped>
.appListScrollbarCss{
    width: 100%;
    padding: 0px 10px 0 10px;
    height: calc(100vh - 130px);
    // background-color: #FF0000;
    .taskCardBox{
        width: 100%;
        margin-top:10px;
        
        :deep .el-card__footer{
            padding: 5px 5px;
            text-align: right;
        }
    }
    :deep .el-card__body{
        min-height:100px;
        padding: 10px 10px;
    }
    :deep .el-card__header{
        padding: 0px 5px;
    }
    .cardImg{
        max-height: 150px;
        width: 100%;
        height: 150px;
        i{
            width:50px;
            height:50px;
        }
    }

    .el-image {
        
    }
    .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;
    }
}
.cardInfoTitle{
    font-size:18px;
    line-height:20px;
    color: #000000;
}
.cardInfoContent{
    font-size:14px;
    line-height:20px;
    color:rgb(99, 91, 91);
    margin-top:10px;
}
.cardInfoContents{
    font-size:14px;
    line-height:20px;
    color:rgb(99, 91, 91);
    margin-top:5px;
}
.carHeadStaus{
    display: flex;
}
</style>