135 lines
3.7 KiB
Vue
135 lines
3.7 KiB
Vue
<template>
|
|
<el-form :model="formData" ref="form" class="query-form" label-width="auto">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="分摊名称">
|
|
<span>{{ formData.shareName }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="分摊月份">
|
|
<span>{{ formData.apportionmentMonth }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane label="分摊汇总" name="first" v-loading="loading">
|
|
<allocation-summary-detail :allocation-name="formData.shareName" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="分摊明细" name="second">
|
|
<expense-detail/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div v-if="shareData.taskId">
|
|
<baseTitle title="审核意见"></baseTitle>
|
|
<el-form-item prop="auditOpinion">
|
|
<el-input
|
|
v-model="auditOpinion"
|
|
:rows="3"
|
|
type="textarea"
|
|
placeholder="请输入审核意见"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="approval-record">
|
|
<div class="approval-title">
|
|
<baseTitle title="审批记录"></baseTitle>
|
|
<div class="diagram">
|
|
<div class="base-title">流程图</div>
|
|
<el-switch
|
|
v-model="changeDiagram"
|
|
style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="process">
|
|
<operation-render
|
|
v-if="shareProcessViewer&& shareData.operationList && shareData.operationList.length > 0&&!changeDiagram"
|
|
:operation-list="shareData.operationList"
|
|
:state="shareData.state"/>
|
|
<process-diagram-viewer v-if="shareProcessViewer&&changeDiagram" id-name="shareProcess"/>
|
|
</div>
|
|
</div>
|
|
<opinion v-if="shareData.taskId" :formData="shareData.formData" :taskId="shareData.taskId"
|
|
v-model:value="auditOpinion"></opinion>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
|
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
|
import {ElNotification} from "element-plus";
|
|
import {useProcessStore} from '@/stores/processStore.js';
|
|
import {getAllocationDetail} from "@/api/expense-manage";
|
|
|
|
const changeDiagram = ref(false)
|
|
const processStore = useProcessStore()
|
|
const route = useRoute()
|
|
const shareData = ref({})
|
|
const formData = ref({})
|
|
const auditOpinion = ref('')
|
|
const shareProcessViewer = ref(true)
|
|
const loading = ref(false)
|
|
const activeName = ref('first')
|
|
// const activeName = ref('second')
|
|
|
|
const getDetail = async () => {
|
|
const id = route.query.id
|
|
shareProcessViewer.value = false
|
|
const {code, data, msg} = await getAllocationDetail(id)
|
|
if (code === 1000) {
|
|
shareData.value = data
|
|
formData.value = data.formData
|
|
processStore.setDesign(data)
|
|
processStore.runningList.value = data.runningList;
|
|
processStore.endList.value = data.endList;
|
|
processStore.noTakeList.value = data.noTakeList;
|
|
processStore.refuseList.value = data.refuseList;
|
|
processStore.passList.value = data.passList;
|
|
nextTick(() => {
|
|
shareProcessViewer.value = true
|
|
})
|
|
} else {
|
|
ElNotification({
|
|
title: '提示',
|
|
message: msg,
|
|
type: 'error'
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
const handleClick = (tab) => {
|
|
if (tab.index == 0) {
|
|
getDetail()
|
|
}
|
|
}
|
|
getDetail()
|
|
</script>
|
|
<style scoped lang="scss">
|
|
:deep(.el-table--fit ) {
|
|
width: 100%;
|
|
height: 479px !important;
|
|
}
|
|
|
|
:deep(.el-tabs__nav-scroll) {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
.el-tabs__nav {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
.el-tabs__item {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.is-active {
|
|
color: black;
|
|
//background-color: #DED0B2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|