You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
16 KiB
476 lines
16 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-13 11:10:41
|
|
@ 备注: 自定义表单显示页面
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { gainTaskFormInfo,gainEditDataLog,afreshRunWorkflow } from '@/api/lowCode/taskapi/management'
|
|
import{ json2string,string2json,stringToObj } from '@/utils/lowCode/form'
|
|
import { judgeSubmitCancel } from '@/api/lowCode/form/index'
|
|
|
|
import { afreshSubmitButton,editFormCont,draftSubmitButton,submitButtonEs,submitButton,notAsA_BasisForJudgment, fixedValueControl,timeControl,timeEquation,asAnApprovalActionControl } from '@/utils/lowCode/const'
|
|
|
|
import { conditionInfo,nodelPeoples } from "@/api/lowCode/taskapi/types"
|
|
|
|
const props = defineProps({
|
|
isShow:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
appInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appPageInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
stateForm:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
appFlowInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
formTableStr:{
|
|
type:String,
|
|
default:"",
|
|
}
|
|
});
|
|
const nodelUserList = reactive<nodelPeoples[]>([]);
|
|
const emits = defineEmits(["update:isShow","searchData"])
|
|
const openPage =computed({
|
|
get() {
|
|
return props.isShow
|
|
},
|
|
set(val: any) {
|
|
emits("update:isShow",val)
|
|
}
|
|
});
|
|
const formDesign = ref<any>();
|
|
const flowLogPage = ref<any>(); //流程与历史记录
|
|
const pageLog = ref<any[]>([]); //历史记录
|
|
const loadPage = ref(false)
|
|
const gainFlowChart = reactive<nodeFlow>({
|
|
id: "0",
|
|
});
|
|
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-17 14:52:44
|
|
@ 功能: 关闭表单
|
|
*/
|
|
const handleClose = () =>{
|
|
formDesign.value.resetFields()
|
|
openPage.value = false
|
|
emits("update:isShow",false)
|
|
}
|
|
|
|
watch(() => openPage.value,(val:boolean) => {
|
|
console.log("前置数据2",val,props.stateForm.type,props.appPageInfo)
|
|
if(val) {
|
|
nextTick(() =>{
|
|
// console.log("前置数据3",props.appPageInfo.masters_key)
|
|
if(props.appPageInfo.masters_key&&props.appPageInfo.masters_key != ''&&props.appPageInfo.masters_key!=null){
|
|
loadPage.value = true
|
|
|
|
gainTaskFormInfo({ id: props.appPageInfo.masters_key })
|
|
.then(({ data }) => {
|
|
console.log("获取自定义表单内容---->", data, data.structure);
|
|
props.stateForm.formData = stringToObj(data.structure.mastesform);
|
|
//liwenxuan 修复 子表日期选择器 区间情况bug start
|
|
let tableDatePickerRangeArr: any[] = []
|
|
props.stateForm.formData.list.forEach((element: any) => {
|
|
if(element.type=="table"){
|
|
element.list.forEach((item: any) => {
|
|
if(item.type=="datePicker"){
|
|
if(item.control.type=="monthrange"||item.control.type=="daterange"||item.control.type=="datetimerange"){
|
|
let str: string[] = []
|
|
str.push(element.name)
|
|
str.push(item.name)
|
|
tableDatePickerRangeArr.push(str)
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
tableDatePickerRangeArr.forEach(element => {
|
|
let tableName = element[0]
|
|
let datePickerName = element[1]
|
|
data.tableData[tableName].forEach((item: any) => {
|
|
let arr = []
|
|
arr.push(item[datePickerName])
|
|
arr.push(item[datePickerName+"_end"])
|
|
item[datePickerName] = arr
|
|
});
|
|
});
|
|
//liwenxuan 修复 子表日期选择器 区间情况bug end
|
|
props.stateForm.dict = string2json(data.structure.dict);
|
|
if(props.stateForm.type != 3){
|
|
judgeSubmitCancel({ name: data.structure.mastesformjson }).then((data: any) => {
|
|
if (props.stateForm.type == 1) {
|
|
// console.log("添加按钮---------------->",props.stateForm.type,submitButtonEs);
|
|
props.stateForm.formData.list.push(submitButton);
|
|
} else if (props.stateForm.type == 2) {
|
|
props.stateForm.formData.list.push(submitButtonEs);
|
|
} else if (props.stateForm.type == 4) {
|
|
props.stateForm.formData.list.push(afreshSubmitButton);
|
|
} else if (props.stateForm.type == 5) {
|
|
props.stateForm.formData.list.push(afreshSubmitButton);
|
|
} else if (props.stateForm.type == 6) {
|
|
props.stateForm.formData.list.push(editFormCont);
|
|
}
|
|
})
|
|
}
|
|
nextTick(() => {
|
|
// console.log("获取自定义表单内容-1111-->", props.stateForm, data.tableData);
|
|
if(props.stateForm.type != 1){
|
|
formDesign.value.setValue(data.tableData);
|
|
}
|
|
|
|
});
|
|
})
|
|
.finally(() => {
|
|
loadPage.value = false
|
|
if(props.stateForm.type != 1){
|
|
gainEditDataLog({ id: props.appPageInfo.masters_key }).then(({ data }) => {
|
|
console.log("获取修改记录-1111-->",data)
|
|
pageLog.value = data;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
// formDesign.value.setValue(props.appPageInfo);
|
|
})
|
|
}else{
|
|
props.stateForm.formData = {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
powerstr: {},
|
|
}
|
|
// props.stateForm = {
|
|
// type: 1, // 1新增；2修改；3查看（表单模式）
|
|
// formData: {
|
|
// list: [],
|
|
// form: {},
|
|
// config: {},
|
|
// powerstr: {},
|
|
// },
|
|
// dict: {},
|
|
// appKey: props.appInfo.appKey,
|
|
// appId: props.appInfo.appId,
|
|
// taskTitle: props.appInfo.taskTitle,
|
|
// taskId:props.appInfo.taskId,
|
|
// taskKey:props.appInfo.taskKey,
|
|
// flowIsTrue:false,
|
|
// loading: true,
|
|
// }
|
|
}
|
|
},{deep: true})
|
|
|
|
//刷新页面
|
|
const reastSearchPage = () => {
|
|
console.log("刷新页面------1----------->")
|
|
emits("searchData")
|
|
console.log("刷新页面---------2------------->")
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-07 10:55:34
|
|
@ 功能: 表单动作回调
|
|
*/
|
|
const afterSubmit = (type: string,val?:any) => {
|
|
console.log("表单提交成功",type)
|
|
|
|
switch (type) {
|
|
case "success":
|
|
reastSearchPage()
|
|
handleClose()
|
|
break;
|
|
case "runFlow":
|
|
// reastSearchPage()
|
|
flowLogPage.value.runWorkFlow(val)
|
|
nextTick(()=>{
|
|
|
|
handleClose()
|
|
})
|
|
break
|
|
case "reapplyFlow":
|
|
flowLogPage.value.reapplyWorkFlow(val)
|
|
|
|
handleClose()
|
|
reastSearchPage()
|
|
break;
|
|
case "draftRunFlow":
|
|
flowLogPage.value.rundraftWorkFlow(val)
|
|
handleClose()
|
|
reastSearchPage()
|
|
break;
|
|
case "closePage":
|
|
reastSearchPage()
|
|
handleClose()
|
|
break;
|
|
default:
|
|
}
|
|
};
|
|
|
|
onMounted(()=>{
|
|
console.log("挺挺挺挺下")
|
|
console.log(props)
|
|
})
|
|
const flowFactor = reactive<conditionInfo[]>([]); //表单组件
|
|
//组件解析
|
|
const changeKeyVal = (key: any, val: any, type: any, attribute: any) => {
|
|
// console.log("改变表单值--key--->",key)
|
|
// console.log("改变表单值--val--->",val,Array.isArray(val))
|
|
// console.log("改变表单值--type--->",type)
|
|
// console.log("改变表单值--attribute--->",attribute)
|
|
|
|
let unitsVal = val;
|
|
let isUpdateFlowChart = false;
|
|
|
|
|
|
//单选，多选，下拉菜单
|
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) {
|
|
let isWrite = true;
|
|
flowFactor.forEach((item: any) => {
|
|
if (item.factorid == key) {
|
|
isWrite = false;
|
|
|
|
item.type = 3;
|
|
if (type == "checkbox") {
|
|
item.isCheckbox = true;
|
|
item.answers = val.map(String);
|
|
} else {
|
|
item.isCheckbox = false;
|
|
item.oneanswer = val.toString();
|
|
}
|
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) {
|
|
isUpdateFlowChart = true;
|
|
}
|
|
}
|
|
});
|
|
if (isWrite) {
|
|
if (type == "checkbox") {
|
|
flowFactor.push({
|
|
factorid: key,
|
|
type: 3,
|
|
isCheckbox: true,
|
|
answers: val.map(String),
|
|
});
|
|
} else {
|
|
flowFactor.push({
|
|
factorid: key,
|
|
type: 3,
|
|
isCheckbox: false,
|
|
oneanswer: val.toString(),
|
|
});
|
|
}
|
|
isUpdateFlowChart = true;
|
|
}
|
|
// console.log("改变表单值--flowFactor--->",flowFactor)
|
|
|
|
}
|
|
//时间类空间附加判断条件
|
|
if (
|
|
timeControl.indexOf(type) > -1 ||
|
|
fixedValueControl.indexOf(type) > -1 ||
|
|
type == "input"
|
|
) {
|
|
// console.log("改变表单值--flowFactor--3->",unitsVal)
|
|
let addNewTime = true; //判断是否新增
|
|
flowFactor.forEach((item: any) => {
|
|
// console.log("改变表单值--flowFactor--5->",item.type)
|
|
if (item.type == 2) {
|
|
addNewTime = false;
|
|
// console.log("改变表单值--flowFactor--5====1->",item.type)
|
|
// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length)
|
|
if (item.customFields && item.customFields.length > 0) {
|
|
// console.log("改变表单值--flowFactor--5====2->",item.customFields)
|
|
let sunNewAdd = true;
|
|
item.customFields.forEach((sunItem: any) => {
|
|
// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
|
|
if (sunItem.wordfield == key) {
|
|
sunNewAdd = false;
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
sunItem.leftval = val.toString();
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
sunItem.leftval = val[0].toString();
|
|
sunItem.rightval = val[val.length - 1].toString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
if (sunNewAdd) {
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString(),
|
|
};
|
|
item.customFields.push(customFieldInfo);
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType: "3",
|
|
rightoptType: "3",
|
|
rightval: val[val.length - 1].toString(),
|
|
};
|
|
item.customFields.push(customFieldInfo);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
if (addNewTime) {
|
|
//新增自定义类数据判断
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString(),
|
|
};
|
|
let condInfo = {
|
|
factorid: "customFields",
|
|
type: 2,
|
|
isCheckbox: false,
|
|
customFields: [customFieldInfo],
|
|
};
|
|
flowFactor.push(condInfo);
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType: "3",
|
|
rightoptType: "3",
|
|
rightval: val[val.length - 1].toString(),
|
|
};
|
|
let condInfo = {
|
|
factorid: "customFields",
|
|
type: 2,
|
|
isCheckbox: false,
|
|
customFields: [customFieldInfo],
|
|
};
|
|
flowFactor.push(condInfo);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//操作人
|
|
if (asAnApprovalActionControl.indexOf(type) > -1) {
|
|
isUpdateFlowChart = true;
|
|
let isWriteUs = true;
|
|
nodelUserList.forEach((item: any) => {
|
|
if (item.factorid == key) {
|
|
isWriteUs = false;
|
|
item.userList = val;
|
|
}
|
|
});
|
|
if (isWriteUs) {
|
|
nodelUserList.push({
|
|
factorid: key,
|
|
userList: val,
|
|
});
|
|
}
|
|
}
|
|
|
|
console.log("改变表单值--flowFactor--->", isUpdateFlowChart);
|
|
//更新工作流图
|
|
if (isUpdateFlowChart&&props.stateForm.taskKey&&props.stateForm.taskKey!="") {
|
|
// gainFlowChart.conditionList = flowFactor;
|
|
// gainFlowChart.nodelPeople = nodelUserList;
|
|
// gainFlowChart.id = flowMap;
|
|
console.log("获取工作流不进图--gainFlowChart--->",props.stateForm)
|
|
/*
|
|
console.log(flowLogPage.value)
|
|
console.log(props.stateForm.taskKey)
|
|
console.log(flowFactor)
|
|
console.log(nodelUserList) */
|
|
if(flowLogPage.value){
|
|
flowLogPage.value.refreshWorkFlow(props.stateForm.taskKey,flowFactor,nodelUserList)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="newDrawerCont">
|
|
<el-drawer
|
|
v-model="openPage"
|
|
:title="props.appInfo.taskTitle"
|
|
:before-close="handleClose"
|
|
size="100%"
|
|
>
|
|
<el-scrollbar v-loading="loadPage" ref="taskScrollbar" class="appFormTableScrollbarCss" >
|
|
<FormDesign
|
|
ref="formDesign"
|
|
v-if="openPage"
|
|
:type="stateForm.type"
|
|
:form-data="stateForm.formData"
|
|
:is-work-flow="stateForm.flowIsTrue"
|
|
:app-info="props.appInfo"
|
|
:after-submit="afterSubmit"
|
|
:change-key-val="changeKeyVal"
|
|
/>
|
|
<FlowAndLog ref="flowLogPage" v-if="openPage" :types="props.stateForm.type" :app-flow-info="props.appFlowInfo" :app-info="props.appInfo" :log-list="pageLog" :app-page-info="props.appPageInfo" :state-form="props.stateForm" @searchcontent="reastSearchPage" />
|
|
<!-- {{stateForm.flowIsTrue}}<br>
|
|
{{pageLog}} -->
|
|
<!-- {{ props.appInfo }}<br><br><br><br>
|
|
{{ props.appPageInfo }}<br><br><br><br>
|
|
{{stateForm}}<br><br><br><br>
|
|
{{appFlowInfo}} -->
|
|
</el-scrollbar>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.newDrawerCont{
|
|
:deep .el-drawer__header{
|
|
padding: 10px 5px;
|
|
margin-bottom: 0px;
|
|
}
|
|
:deep .el-drawer__body{
|
|
padding: 0px;
|
|
}
|
|
.appFormTableScrollbarCss{
|
|
width: 100%;
|
|
padding: 0px 10px 0 10px;
|
|
height: calc(100vh - 45px);
|
|
}
|
|
}
|
|
</style>
|