feat: 初步修改审批页面的样式，增加输入审批意见的对话框，修复打开草稿时tab页标题不对的bug
This commit is contained in:
gaoyunqi
67
src/components/SecondDev/OpinionDialog.vue
Normal file
67
src/components/SecondDev/OpinionDialog.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
|
||||
<div class="dialog-wrap">
|
||||
<a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
|
||||
<a-form-item label="下一节点" name="nextNodeName">
|
||||
<span>{{ formState.nextNodeName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="审批意见" name="opinion">
|
||||
<a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" placeholder="请输入审批意见，不超过200字" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const dialogTitle = ref('审批');
|
||||
const isOpen = ref(false);
|
||||
let _action = 'approve';
|
||||
const titleMapping = {
|
||||
approve: '同意',
|
||||
deny: '拒绝',
|
||||
eject: '退回',
|
||||
cancel: '终止',
|
||||
transfer: '转办'
|
||||
};
|
||||
let _callback = null;
|
||||
|
||||
const formState = reactive({
|
||||
nextNodeName: '',
|
||||
opinion: '',
|
||||
opinionList: ['同意。', '请领导审批。']
|
||||
});
|
||||
|
||||
function toggleDialog({ action, callback } = {}) {
|
||||
isOpen.value = true;
|
||||
_action = action;
|
||||
_callback = callback;
|
||||
formState.opinion = '';
|
||||
dialogTitle.value = `审批 - ${titleMapping[action]}`;
|
||||
}
|
||||
|
||||
function onClickOK() {
|
||||
if (_callback && typeof _callback === 'function') {
|
||||
_callback({
|
||||
opinion: formState.opinion
|
||||
});
|
||||
}
|
||||
isOpen.value = false;
|
||||
}
|
||||
|
||||
function onClickCancel() {
|
||||
isOpen.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
toggleDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.dialog-wrap {
|
||||
padding-right: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -70,3 +70,26 @@ html[data-theme='light'] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.geg-flow-page {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.top-toolbar {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper-disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ant-input[disabled] {
|
||||
color: rgb(0 0 0 / 85%);
|
||||
}
|
||||
}
|
||||
|
||||
.page-bg-wrap {
|
||||
background-color: rgb(246 247 249);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
|
||||
{
|
||||
path: 'approveFlow',
|
||||
name: 'ApproveFlow',
|
||||
component: () => import('/@/views/secondDev/approveFlow.vue'),
|
||||
component: () => import('/@/views/secondDev/approveFlowPage.vue'),
|
||||
meta: {
|
||||
title: '审批流程'
|
||||
}
|
||||
|
||||
134
src/views/secondDev/approveFlowPage.vue
Normal file
134
src/views/secondDev/approveFlowPage.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="page-bg-wrap">
|
||||
<div class="geg-flow-page">
|
||||
<div class="top-toolbar">
|
||||
<a-space :size="10" wrap>
|
||||
<a-button style="margin-right: 10px">
|
||||
<slot name="icon">
|
||||
<close-outlined />
|
||||
</slot>
|
||||
关闭
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onApproveClick">
|
||||
<slot name="icon">
|
||||
<check-circle-outlined />
|
||||
</slot>
|
||||
同意
|
||||
</a-button>
|
||||
<a-button @click="onDenyClick">
|
||||
<slot name="icon">
|
||||
<stop-outlined />
|
||||
</slot>
|
||||
拒绝
|
||||
</a-button>
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="onMoreClick">
|
||||
<a-menu-item key="1">退回</a-menu-item>
|
||||
<a-menu-item key="2">终止</a-menu-item>
|
||||
<a-menu-item key="3">转办</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button>
|
||||
更多
|
||||
<down-outlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</div>
|
||||
<FormInformation
|
||||
:key="renderKey"
|
||||
ref="formInformation"
|
||||
:disabled="false"
|
||||
:formAssignmentData="data.formAssignmentData"
|
||||
:formInfos="data.formInfos"
|
||||
:opinions="data.opinions"
|
||||
:opinionsComponents="data.opinionsComponents"
|
||||
@get-form-configs="(config) => (formConfigs = config)"
|
||||
/>
|
||||
<opinion-dialog ref="opinionDlg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { onMounted, reactive, ref, unref } from 'vue';
|
||||
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
||||
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
||||
import { getApprovalProcess } from '/@/api/workflow/task';
|
||||
import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
|
||||
import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
|
||||
|
||||
const { data, initProcessData } = userTaskItem();
|
||||
|
||||
const router = useRouter();
|
||||
const { currentRoute } = router;
|
||||
const rParams = currentRoute.value.query;
|
||||
//const schemaId = ref(rParams.schemaId);
|
||||
const taskId = ref(rParams.taskId);
|
||||
const processId = ref(rParams.processId);
|
||||
const renderKey = ref('');
|
||||
const formConfigs = ref();
|
||||
const opinionDlg = ref();
|
||||
|
||||
let approvalData = reactive({
|
||||
isCountersign: false,
|
||||
isAddOrSubSign: false,
|
||||
stampInfo: {
|
||||
stampId: '',
|
||||
password: ''
|
||||
},
|
||||
buttonConfigs: [],
|
||||
approvedType: ApproveType.AGREE,
|
||||
approvedResult: ApproveCode.AGREE,
|
||||
approvedContent: '',
|
||||
rejectNodeActivityId: '',
|
||||
rejectNodeActivityIds: [],
|
||||
circulateConfigs: []
|
||||
});
|
||||
let approvedType = ref(ApproveType.AGREE);
|
||||
|
||||
function onMoreClick() {}
|
||||
|
||||
function onApproveClick() {
|
||||
opinionDlg.value.toggleDialog({
|
||||
action: 'approve'
|
||||
});
|
||||
}
|
||||
|
||||
function onDenyClick() {
|
||||
opinionDlg.value.toggleDialog({
|
||||
action: 'deny'
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (unref(taskId)) {
|
||||
try {
|
||||
let res = await getApprovalProcess(unref(taskId), unref(processId));
|
||||
initProcessData(res);
|
||||
if (res.buttonConfigs) {
|
||||
approvalData.buttonConfigs = res.buttonConfigs;
|
||||
}
|
||||
if (res.relationTasks) {
|
||||
data.predecessorTasks = res.relationTasks;
|
||||
}
|
||||
if (res.isAddOrSubSign) {
|
||||
approvalData.isAddOrSubSign = res.isAddOrSubSign;
|
||||
}
|
||||
|
||||
approvalData.approvedType = ApproveType.AGREE;
|
||||
approvedType.value = ApproveType.AGREE;
|
||||
approvalData.approvedContent = '';
|
||||
approvalData.rejectNodeActivityId = '';
|
||||
approvalData.rejectNodeActivityIds = [];
|
||||
approvalData.circulateConfigs = [];
|
||||
|
||||
renderKey.value = Math.random() + '';
|
||||
} catch (error) {}
|
||||
} else {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-bg-wrap">
|
||||
<div class="itc-create-flow">
|
||||
<div class="toolbar">
|
||||
<div class="geg-flow-page">
|
||||
<div class="top-toolbar">
|
||||
<a-space :size="10" wrap>
|
||||
<a-button style="margin-right: 10px">
|
||||
<slot name="icon">
|
||||
@ -9,13 +9,13 @@
|
||||
</slot>
|
||||
关闭
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
<a-button type="primary" @click="saveLaunch">
|
||||
<slot name="icon">
|
||||
<send-outlined />
|
||||
</slot>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button @click="saveDraft" :disabled="disableSubmit">
|
||||
<a-button :disabled="disableSubmit" @click="saveDraft">
|
||||
<slot name="icon">
|
||||
<clock-circle-outlined />
|
||||
</slot>
|
||||
@ -38,6 +38,8 @@
|
||||
<div class="flow-content">
|
||||
<FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
|
||||
</div>
|
||||
<PredecessorTask v-if="data.relationTasks && data.relationTasks.length > 0" @change="changePredecessorTasks" :schemaId="rSchemaId" :relationTasks="data.predecessorTasks" />
|
||||
<ApproveUser v-if="approveUserData.visible" :taskList="approveUserData.list" :schemaId="approveUserData.schemaId" @change="changeApproveUserData" />
|
||||
</div>
|
||||
<a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
|
||||
<process-information :process-id="processId" :xml="data.xml" />
|
||||
@ -53,7 +55,9 @@
|
||||
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
||||
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
||||
import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
|
||||
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
|
||||
import ApproveUser from '/@/views/workflow/task/components/flow/ApproveUser.vue';
|
||||
import PredecessorTask from '/@/views/workflow/task/components/PredecessorTask.vue';
|
||||
import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch } from '/@/api/workflow/task';
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||
import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
@ -63,19 +67,26 @@
|
||||
import { nextTick, onMounted, ref, toRaw } from 'vue';
|
||||
import { postDraft, putDraft } from '/@/api/workflow/process';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { separator } from '/@bpmn/config/info';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { data, initProcessData, notificationSuccess, notificationError } = userTaskItem();
|
||||
const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
|
||||
const currentRoute = router.currentRoute;
|
||||
const rParams = currentRoute.value.query;
|
||||
const rSchemaId = rParams.schemaId;
|
||||
const rDraftsId = rParams.draftsId;
|
||||
const draftsJsonStr = localStorage.getItem('draftsJsonStr');
|
||||
let formInformation = ref();
|
||||
let pageMode = 'new';
|
||||
const showFlowChart = ref(false);
|
||||
const disableSubmit = ref(false);
|
||||
let randKey = ref('randkey'); // 强制表单重新渲染
|
||||
|
||||
if (draftsJsonStr) {
|
||||
localStorage.removeItem('draftsJsonStr');
|
||||
pageMode = 'draft';
|
||||
}
|
||||
|
||||
function closeFlowChart() {
|
||||
showFlowChart.value = false;
|
||||
}
|
||||
@ -136,7 +147,9 @@
|
||||
let res = await getStartProcessInfo(rSchemaId);
|
||||
const title = res?.schemaInfo?.name;
|
||||
if (title) {
|
||||
tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
|
||||
const tabKey = `${pageMode}_${pageMode === 'new' ? rSchemaId : rDraftsId}`;
|
||||
const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
|
||||
tabStore.changeTitle(tabKey, `${tabPrefix}：${title}`);
|
||||
}
|
||||
initProcessData(res);
|
||||
}
|
||||
@ -185,21 +198,98 @@
|
||||
notificationError(title);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.itc-create-flow {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
function changePredecessorTasks(list) {
|
||||
data.predecessorTasks = list;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
function changeApproveUserData() {
|
||||
/*approveUserData.visible = false;*/
|
||||
}
|
||||
|
||||
async function saveLaunch() {
|
||||
data.submitLoading = true;
|
||||
try {
|
||||
let validateForms = await formInformation.value.validateForm();
|
||||
let system = formInformation.value.getSystemType();
|
||||
|
||||
if (validateForms.length > 0) {
|
||||
let successValidate = validateForms.filter((ele) => {
|
||||
return ele.validate;
|
||||
});
|
||||
if (successValidate.length == validateForms.length) {
|
||||
let formModels = await formInformation.value.getFormModels();
|
||||
let relationTasks = [];
|
||||
if (data.predecessorTasks && data.predecessorTasks.length > 0) {
|
||||
relationTasks = data.predecessorTasks.map((ele) => {
|
||||
return { taskId: ele.taskId, schemaId: ele.schemaId };
|
||||
});
|
||||
}
|
||||
let fileFolderIds = getUploadFileFolderIds(formModels);
|
||||
//如果传入了processId 代表是重新发起流程
|
||||
let res;
|
||||
if (props.processId) {
|
||||
res = await reLaunch(props.processId, props.schemaId, formModels, relationTasks, fileFolderIds, system);
|
||||
} else {
|
||||
res = await postLaunch(rSchemaId, formModels, relationTasks, fileFolderIds, system);
|
||||
}
|
||||
|
||||
// 下一节点审批人
|
||||
let taskList = [];
|
||||
if (res && res.length > 0) {
|
||||
taskList = res
|
||||
.filter((ele) => {
|
||||
return ele.isMultiInstance == false && ele.isAppoint == true;
|
||||
})
|
||||
.map((ele) => {
|
||||
return {
|
||||
taskId: ele.taskId,
|
||||
taskName: ele.taskName,
|
||||
provisionalApprover: ele.provisionalApprover,
|
||||
selectIds: []
|
||||
};
|
||||
});
|
||||
if (taskList.length > 0) {
|
||||
approveUserData.list = taskList;
|
||||
approveUserData.schemaId = rSchemaId;
|
||||
approveUserData.visible = true;
|
||||
data.submitLoading = false;
|
||||
} else {
|
||||
data.submitLoading = false;
|
||||
//save(true, t('发起流程'));
|
||||
}
|
||||
} else {
|
||||
data.submitLoading = false;
|
||||
//save(true, t('发起流程'));
|
||||
}
|
||||
} else {
|
||||
data.submitLoading = false;
|
||||
notificationError(t('发起流程'), t('表单校验未通过'));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
data.submitLoading = false;
|
||||
notificationError(t('发起流程'), t('发起流程失败'));
|
||||
}
|
||||
}
|
||||
|
||||
.page-bg-wrap {
|
||||
background-color: rgb(246 247 249);
|
||||
padding: 10px;
|
||||
function getUploadFileFolderIds(formModels) {
|
||||
let fileFolderIds = [];
|
||||
let uploadComponentIds = formInformation.value.getUploadComponentIds();
|
||||
uploadComponentIds.forEach((ids) => {
|
||||
if (ids.includes(separator)) {
|
||||
let arr = ids.split(separator);
|
||||
if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
|
||||
fileFolderIds.push(formModels[arr[0]][arr[1]]);
|
||||
} else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
|
||||
formModels[arr[0]][arr[1]].forEach((o) => {
|
||||
fileFolderIds.push(o[arr[2]]);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
return fileFolderIds;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
query: {
|
||||
schemaId: res.schemaId,
|
||||
draftsId: record.id,
|
||||
tabKey: 'new_' + record.id
|
||||
tabKey: 'draft_' + record.id
|
||||
}
|
||||
});
|
||||
} catch (error) {}
|
||||
|
||||
Reference in New Issue
Block a user