herenshan112
7 months ago
3 changed files with 915 additions and 213 deletions
@ -0,0 +1,658 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 08:34:12 |
|||
@ 备注: 模拟任务 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue"; |
|||
import { |
|||
haveCustomerFormVersion, |
|||
generateFlow, |
|||
echoTableFormPage, |
|||
realTimeUpdateFlow, |
|||
} from "@/api/taskapi/management"; |
|||
import { nodeFlow, conditionInfo, nodelPeoples } from "@/api/taskapi/types"; |
|||
import { |
|||
notAsA_BasisForJudgment, |
|||
asAnApprovalActionControl, |
|||
fixedValueControl, |
|||
timeControl, |
|||
timeEquation, |
|||
submitButton, |
|||
afreshSubmitButton, |
|||
} from "@/utils/workflow/const"; |
|||
import { judgeSubmitCancel, startRunFlow } from "@/api/DesignForm/requestapi"; |
|||
import { string2json, stringToObj } from "@/utils/DesignForm/form"; |
|||
import FlowStep from "@/views/taskplatform/taskmanagement/flowStep.vue"; |
|||
import { orgform, criteriaForPeopleList } from "@/api/hr/org/type"; |
|||
import { |
|||
getOrgFormTree, |
|||
getOrgFormUserList, |
|||
searchUserCustomerFormList, |
|||
} from "@/api/hr/org/index"; |
|||
|
|||
const props = defineProps({ |
|||
simuIsTrue: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
formVersion: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const squareUrl = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"; |
|||
const emits = defineEmits(["update:simuIsTrue"]); |
|||
const isShow = computed({ |
|||
get: () => { |
|||
getTaskFormData(); |
|||
return props.simuIsTrue; |
|||
}, |
|||
set: (val) => { |
|||
emits("update:simuIsTrue", val); |
|||
}, |
|||
}); |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-08 15:35:54 |
|||
@ 功能: 表单基本数据结构 |
|||
*/ |
|||
const state = reactive<any>({ |
|||
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
|||
formData: { |
|||
list: [], |
|||
form: {}, |
|||
config: {}, |
|||
powerstr: {}, |
|||
}, |
|||
dict: {}, |
|||
formId: props.versionid, |
|||
id: 0, |
|||
loading: true, |
|||
}); |
|||
const nodelUserList = reactive<nodelPeoples[]>([]); |
|||
const flowFactor = reactive<conditionInfo[]>([]); //表单组件 |
|||
const formLoading = ref(false); //loading |
|||
const flowLoading = ref(false); //loading |
|||
const flowMap = ref<any[]>(); //工作流 |
|||
const nextStep = ref<number>(0); |
|||
const currentProgress = ref<number>(1); |
|||
const nodeKey = ref<string>(""); |
|||
//获取工作流条件 |
|||
const gainFlowChart = reactive<nodeFlow>({ |
|||
id: "0", |
|||
isRun: 1, |
|||
userKey: "", |
|||
}); |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:49:09 |
|||
@ 功能: 表单前置数据 |
|||
*/ |
|||
const beforeSubmit = (params: any) => { |
|||
params.formId = props.versionid; |
|||
params.id = ""; |
|||
// emits("update:isopen", false); |
|||
return params; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:41:20 |
|||
@ 功能: 提交成功回调 |
|||
*/ |
|||
const afterSubmit = (type: string, val?: any) => { |
|||
// console.log("表单提交成功------------------>",type,val) |
|||
// console.log("流程------------------>",flowMap) |
|||
if (type === "success") { |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:50:01 |
|||
@ 功能: 关闭操作 |
|||
*/ |
|||
const closeAppSubmit = () => { |
|||
emits("update:simuIsTrue", false); |
|||
}; |
|||
//组件解析 |
|||
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) |
|||
|
|||
// console.log("改变表单值--type-1-true->",notAsA_BasisForJudgment.indexOf(type)) |
|||
|
|||
// console.log("改变表单值--flowFactor--->",flowFactor) |
|||
|
|||
// if(notAsA_BasisForJudgment.indexOf(type) != -1){ |
|||
// console.log("改变表单值--type--true->",notAsA_BasisForJudgment.indexOf(type)) |
|||
// } |
|||
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) |
|||
} |
|||
// console.log("改变表单值--flowFactor--1->",unitsVal,timeControl,type) |
|||
//时间类空间附加判断条件 |
|||
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--->",flowFactor) |
|||
//更新工作流图 |
|||
if (isUpdateFlowChart) { |
|||
flowLoading.value = true; |
|||
//获取工作流不进图 |
|||
gainFlowChart.conditionList = flowFactor; |
|||
gainFlowChart.nodelPeople = nodelUserList; |
|||
gainFlowChart.oldFlow = flowMap; |
|||
// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart) |
|||
realTimeUpdateFlow(gainFlowChart).then((data: any) => { |
|||
// console.log("获取工作流不进图-new-->",data) |
|||
flowMap.value = data.data.flowList; |
|||
nextStep.value = data.data.nextStep; |
|||
currentProgress.value = data.data.Step; |
|||
nodeKey.value = data.data.nodeKey; |
|||
// // console.log("获取工作流不进图-1-->",flowMap.value) |
|||
flowLoading.value = false; |
|||
}); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:50:37 |
|||
@ 功能: 保存草稿 |
|||
*/ |
|||
const saveDraftPage = (type: string, val?: any) => { |
|||
if (type === "success") { |
|||
} |
|||
}; |
|||
const isFlowTable = ref(false); //判断是不是流程表单 |
|||
//获取表单数据 |
|||
const getTaskFormData = () => { |
|||
formLoading.value = true; |
|||
flowLoading.value = true; |
|||
echoTableFormPage({ id: props.formVersion.toString() }) |
|||
.then(({ data }) => { |
|||
// console.log("表单数据",data) |
|||
if (data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0") { |
|||
isFlowTable.value = true; |
|||
} else { |
|||
isFlowTable.value = false; |
|||
} |
|||
gainFlowChart.id = data.tableFormPage.flowkeystr; |
|||
console.log("表单数据--->1", data.flowPage.flowList); |
|||
flowMap.value = data.flowPage.flowList; |
|||
state.id = props.versionid; |
|||
state.formData = stringToObj(data.tableFormPage.mastesform); |
|||
state.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加 |
|||
|
|||
// console.log("tableFlow---echoTableFormPage---data.tableFormPage.mastesform",data.tableFormPage.mastesform) |
|||
state.dict = string2json(data.tableFormPage.dict); |
|||
|
|||
state.formData.powerstr = string2json(data.tableFormPage.powerstr); |
|||
// judgeSubmitCancel({ name: data.tableFormPage.mastesformjson }).then( |
|||
// (datajud: any) => { |
|||
// if (datajud.code == 0) { |
|||
// if (datajud.data == 3 || datajud.data == 4) { |
|||
// state.formData.list.push(submitButton); |
|||
// } |
|||
// } |
|||
// } |
|||
// ); |
|||
}) |
|||
.finally(() => { |
|||
formLoading.value = false; |
|||
flowLoading.value = false; |
|||
}); |
|||
}; |
|||
|
|||
/********************************************************** |
|||
* 关于选择发起人问题 * |
|||
* * |
|||
***********************************************************/ |
|||
const treeData = ref<orgform[]>([]); |
|||
const tableData = ref<criteriaForPeopleList[]>(); |
|||
const openManBox = ref(false); |
|||
const searchPeopel = reactive({ |
|||
orgId: 309, |
|||
title: "", |
|||
page: 1, |
|||
pageSize: 8, |
|||
total: 50, |
|||
}); |
|||
const defaultProps = { |
|||
children: "children", |
|||
label: "name", |
|||
}; |
|||
const pickSimMan = reactive({ |
|||
name: "", |
|||
num: "", |
|||
userKey: "", |
|||
icon: "", |
|||
}); |
|||
const loadPeople = ref(false); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 14:02:21 |
|||
@ 功能: 搜索人员 |
|||
*/ |
|||
const serachPeople = () => { |
|||
loadPeople.value = true; |
|||
const params = { |
|||
pageInfo: { |
|||
pageIndex: searchPeopel.page, |
|||
pageSize: searchPeopel.pageSize, |
|||
}, |
|||
name: searchPeopel.title, |
|||
department: searchPeopel.orgId, |
|||
}; |
|||
getOrgFormUserList(params) |
|||
.then(({ data }) => { |
|||
tableData.value = data.list; |
|||
searchPeopel.total = data.total; |
|||
}) |
|||
.finally(() => { |
|||
loadPeople.value = false; |
|||
}); |
|||
}; |
|||
const searckButPick = () => { |
|||
searchPeopel.page = 1; |
|||
serachPeople(); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 10:59:08 |
|||
@ 功能: 打开发起人选择器 |
|||
*/ |
|||
const pickOnePeople = () => { |
|||
openManBox.value = true; |
|||
getTreeData(); |
|||
serachPeople(); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 11:34:32 |
|||
@ 功能: 关闭弹窗 |
|||
*/ |
|||
const handleClose = () => { |
|||
openManBox.value = false; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 13:52:50 |
|||
@ 功能: 翻页操作 |
|||
*/ |
|||
const fanyeSerace = (val: number) => { |
|||
searchPeopel.page = val; |
|||
serachPeople(); |
|||
}; |
|||
const getTreeData = () => { |
|||
// getRequest('deptList', {}).then((res: any) => { |
|||
// treeData.value = formatResult(res.data, 'transformDataToChild') |
|||
// }) |
|||
getOrgFormTree({ id: searchPeopel.orgId }) |
|||
.then(({ data }) => { |
|||
// console.log(data) |
|||
treeData.value = data.list; |
|||
}) |
|||
.finally(() => {}); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-08 15:09:00 |
|||
@ 功能: 我选中的人 |
|||
*/ |
|||
const pickManInfo = (val: any) => { |
|||
console.log("我选中的人----------》", val); |
|||
gainFlowChart.isRun = 2; |
|||
gainFlowChart.userKey = val.userkey; |
|||
|
|||
pickSimMan.name = val.name; |
|||
pickSimMan.num = val.number; |
|||
pickSimMan.userKey = val.userkey; |
|||
pickSimMan.icon = val.icon |
|||
? val.icon |
|||
: val.icon_photo != null |
|||
? val.icon_photo |
|||
: squareUrl; |
|||
|
|||
realTimeUpdateFlow(gainFlowChart).then((data: any) => { |
|||
// console.log("获取工作流不进图-new-->",data) |
|||
flowMap.value = data.data.flowList; |
|||
nextStep.value = data.data.nextStep; |
|||
currentProgress.value = data.data.Step; |
|||
nodeKey.value = data.data.nodeKey; |
|||
// // console.log("获取工作流不进图-1-->",flowMap.value) |
|||
flowLoading.value = false; |
|||
}); |
|||
handleClose(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-drawer v-model="isShow" title="模拟测试流程" direction="rtl" size="900"> |
|||
<template #header="{ close, titleId, titleClass }"> |
|||
<h4 :id="titleId" :class="titleClass">模拟测试流程</h4> |
|||
<div> |
|||
<el-text v-if="pickSimMan.name != ''" |
|||
>当前执行人：{{ pickSimMan.name |
|||
}}<el-text v-if="pickSimMan.num != ''" |
|||
>（No.{{ pickSimMan.num }}）</el-text |
|||
></el-text |
|||
> |
|||
<el-button type="primary" size="small" @click="pickOnePeople" |
|||
>选择发起人</el-button |
|||
> |
|||
</div> |
|||
</template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-main |
|||
class="asMain" |
|||
v-loading="formLoading" |
|||
element-loading-text="Loading..." |
|||
> |
|||
<ak-form |
|||
ref="formEl" |
|||
:numrun="formType" |
|||
:form-data="state.formData" |
|||
:type="formType" |
|||
:dict="state.dict" |
|||
request-url="getFormContent" |
|||
add-url="saveFormContent" |
|||
edit-url="editFormContent" |
|||
:before-submit="beforeSubmit" |
|||
:after-submit="afterSubmit" |
|||
:close-app-submit="closeAppSubmit" |
|||
:change-key-val="changeKeyVal" |
|||
:save-draft-page="saveDraftPage" |
|||
/> |
|||
</el-main> |
|||
<el-aside |
|||
width="300px" |
|||
class="asBox" |
|||
v-loading="flowLoading" |
|||
element-loading-text="Loading..." |
|||
> |
|||
<el-text size="large">审批流程</el-text> |
|||
<FlowStep |
|||
v-model:flow-map="flowMap" |
|||
:next-step="nextStep" |
|||
:current-progress="currentProgress" |
|||
:node-key="nodeKey" |
|||
/> |
|||
</el-aside> |
|||
</el-container> |
|||
</div> |
|||
</el-drawer> |
|||
|
|||
<el-dialog |
|||
v-model="openManBox" |
|||
title="请选择流程发起人" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
:overflow="true" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-row :gutter="5"> |
|||
<el-col :span="12"> |
|||
<el-tree-select |
|||
v-model="searchPeopel.orgId" |
|||
:data="treeData" |
|||
node-key="id" |
|||
@node-click="handleNodeClick" |
|||
:props="defaultProps" |
|||
highlight-current |
|||
check-strictly |
|||
clearable |
|||
/> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-input |
|||
v-model="searchPeopel.title" |
|||
placeholder="请输入姓名或工号" |
|||
clearable |
|||
/> |
|||
</el-col> |
|||
<el-col :span="4"> |
|||
<el-button type="primary" :icon="Search" @click="searckButPick" |
|||
>查询</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-scrollbar |
|||
height="400px" |
|||
v-loading="loadPeople" |
|||
element-loading-text="Loading..." |
|||
> |
|||
<div |
|||
v-for="item in tableData" |
|||
class="userListBox active" |
|||
@click="pickManInfo(item)" |
|||
> |
|||
<el-avatar |
|||
shape="square" |
|||
:size="40" |
|||
:src=" |
|||
item.icon != '' |
|||
? item.icon |
|||
: item.icon_photo != null |
|||
? item.icon_photo |
|||
: squareUrl |
|||
" |
|||
/> |
|||
<el-text class="userText">{{ item.name }}（{{ item.number }}）</el-text> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-col> |
|||
<el-col :span="24" class="footPage"> |
|||
<el-pagination |
|||
size="small" |
|||
layout="prev, pager, next" |
|||
:total="searchPeopel.total" |
|||
v-model:current-page="searchPeopel.page" |
|||
v-model:page-size="searchPeopel.pageSize" |
|||
@current-change="fanyeSerace" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- <template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="handleClose">确定</el-button> |
|||
</div> |
|||
</template> --> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.asBox { |
|||
border-left: 1px solid #ececec; |
|||
height: calc(100vh - 60px); |
|||
padding: 0px 5px; |
|||
} |
|||
.userListBox { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
width: 100%; |
|||
height: 40px; |
|||
margin: 10px 0px 0px 0px; |
|||
// border-bottom: 1px solid #ececec; |
|||
.userText { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
.userListBox:hover { |
|||
background-color: #a0cfff; |
|||
} |
|||
.footPage { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue