herenshan112
6 months ago
8 changed files with 624 additions and 5 deletions
@ -0,0 +1,589 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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) |
|||
listPage.value = data.data.list |
|||
if(Array.isArray(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"> |
|||
<el-checkbox label="" :value="item.masters_key" /> |
|||
<div v-if="item.flowIsOpens==1" class="carHeadStaus"> |
|||
<el-text>状态：</el-text> |
|||
<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-image v-if="item.img != ''" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpegs.jpeg" 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-row @click="openLook(item)"> |
|||
<el-col class="cardInfoTitle" :span="24">{{ item.title }}</el-col> |
|||
<el-col class="cardInfoContent" :span="24">{{ item.describe }}</el-col> |
|||
</el-row> |
|||
<template #footer> |
|||
<div class="contentBetween"> |
|||
<span> </span> |
|||
<el-button-group> |
|||
<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: 10px 5px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
:deep .el-card__body{ |
|||
padding: 10px 10px; |
|||
td{ |
|||
padding: 5px 0; |
|||
} |
|||
} |
|||
:deep .el-card__header{ |
|||
padding: 0px 10px; |
|||
} |
|||
.cardImg{ |
|||
max-height: 200px; |
|||
width: 100%; |
|||
height: 200px; |
|||
margin-bottom: 15px; |
|||
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; |
|||
} |
|||
.carHeadStaus{ |
|||
display: flex; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue