feat: 优化流程新建页面

This commit is contained in:
gaoyunqi
2024-02-19 17:41:26 +08:00
parent a59960da82
commit e657310fd3
3 changed files with 483 additions and 450 deletions

View File

@ -1,25 +1,50 @@
<template>
<div class="itc-create-flow">
<div class="toolbar">
<a-space wrap>
<a-button>提交</a-button>
<a-button>暂存</a-button>
<a-button>关闭</a-button>
<a-button>打印</a-button>
<a-button>流程图</a-button>
</a-space>
</div>
<div class="flow-content">
<FormInformation
:key="randKey"
ref="formInformation"
:disabled="false"
:formAssignmentData="data.formAssignmentData"
:formInfos="data.formInfos"
:opinions="data.opinions"
:opinionsComponents="data.opinionsComponents"
/>
<div class="page-bg-wrap">
<div class="itc-create-flow">
<div class="toolbar">
<a-space :size="10" wrap>
<a-button style="margin-right: 10px">
<slot name="icon">
<close-outlined />
</slot>
关闭
</a-button>
<a-button type="primary">
<slot name="icon">
<send-outlined />
</slot>
提交
</a-button>
<a-button>
<slot name="icon">
<clock-circle-outlined />
</slot>
暂存
</a-button>
<a-button>
<slot name="icon">
<printer-outlined />
</slot>
打印
</a-button>
<a-button @click="openFlowChart">
<slot name="icon">
<apartment-outlined />
</slot>
流程图
</a-button>
</a-space>
</div>
<div class="flow-content">
<FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
</div>
</div>
<a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
<process-information :process-id="processId" :xml="data.xml" />
<template #footer>
<a-button type="primary" @click="closeFlowChart">关闭</a-button>
</template>
</a-modal>
</div>
</template>
@ -27,8 +52,10 @@
import { useRouter } from 'vue-router';
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 { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
const router = useRouter();
const tabStore = useMultipleTabStore();
@ -40,38 +67,47 @@
const rParams = currentRoute.value.query;
const rSchemaId = rParams.schemaId;
let formInformation = ref();
const showFlowChart = ref(false);
let randKey = ref('randkey'); // 强制表单重新渲染
function closeFlowChart() {
showFlowChart.value = false;
}
function openFlowChart() {
showFlowChart.value = true;
}
const props = defineProps({
schemaId: {
type: String,
required: true,
required: true
},
draftsJsonStr: {
type: String,
type: String
},
draftsId: {
type: String,
type: String
},
taskId: {
type: String,
required: false,
default: '',
default: ''
},
processId: {
type: String,
required: false,
default: '',
default: ''
},
formData: {
type: Object,
type: Object
},
formId: {
type: String,
type: String
},
rowKeyData: {
type: String,
},
type: String
}
});
onMounted(async () => {
@ -116,12 +152,7 @@
let formData = [];
data.formInfos.forEach((item) => {
if (
formDataJson &&
item.formConfig &&
item.formConfig.key &&
formDataJson[item.formConfig.key]
) {
if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
}
});
@ -132,7 +163,7 @@
<style lang="less">
.itc-create-flow {
padding: 10px 12px;
padding: 10px;
background-color: #fff;
.toolbar {
@ -140,4 +171,9 @@
border-bottom: 1px solid #eee;
}
}
.page-bg-wrap {
background-color: rgb(246 247 249);
padding: 10px;
}
</style>