fix : 修复页面细节

src/views/expense-management/share/add.vue

@@ -113,6 +113,10 @@
     <div style="width:100%;text-align: center;padding: 10px">
       <el-button type="primary" @click="handleAdd" link style="font-size: 18px">添加一行</el-button>
     </div>
+    <div class="approval-record">
+      <baseTitle title="流程"></baseTitle>
+      <process-diagram-viewer mode="view" v-if="processDiagramViewer"/>
+    </div>
     <div class="oper-page-btn">
       <el-button color="#DED0B2" @click="handleSubmit(form)">提交</el-button>
       <el-button @click="handleBack">返回</el-button>
@@ -123,12 +127,17 @@
 <script setup lang="jsx">
 import {ElNotification} from "element-plus";
 import {useTagsView} from '@/stores/tagsview.js'
-import {addAllocation, getAllocationDetail} from "@/api/expense-manage";
+import {addAllocation, getAllocationDetail,getAllocationProcess} from "@/api/expense-manage";
+import {useProcessStore} from '@/stores/processStore.js';
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
 
 const rules = reactive({
   shareName: [{required: true, message: '请输入分摊名称', trigger: 'blur'}],
   apportionmentMonth: [{required: true, message: '请选择月份', trigger: 'blur'}]
 })
+const processStore = useProcessStore()
+const processInstanceData = ref()
+const processDiagramViewer = ref(false)
 const loading = ref(false)
 const route = useRoute()
 const router = useRouter()
@@ -219,11 +228,34 @@ const getDetailInfo = async () => {
     }
   })
 }
+const init = async () => {
+  processDiagramViewer.value = false
+  getAllocationProcess().then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      let data = res.data
+      processInstanceData.value = data
+      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(() => {
+        processDiagramViewer.value = true
+      })
+    }
+  })
+}
 const handleBack = () => {
   history.back()
 }
 onMounted(async () => {
-  // await init()
+  await init()
   if (route.query.id) {
     loading.value = true
     await getDetailInfo()

src/views/expense-management/share/detail.vue

@@ -1,23 +1,58 @@
 <template>
-<expense-detail :formData="shareData.formData" :data="shareData" :showTable="showTable" :processViewer="shareProcessViewer"
-  :loading="loading"/>
+  <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">
+      <expense-detail :formData="shareData.formData" :data="shareData" :showTable="showTable"
+                      :processViewer="shareProcessViewer"
+                      :loading="loading"/>
+    </el-tab-pane>
+    <el-tab-pane label="分摊汇总" name="second">
+
+    </el-tab-pane>
+  </el-tabs>
+  <div class="approval-record">
+    <baseTitle title="审批记录"></baseTitle>
+    <div class="process">
+      <operation-render v-if="shareProcessViewer" :operation-list="shareData.operationList"
+                        :state="data.state"/>
+      <process-diagram-viewer v-if="shareProcessViewer" id-name="fundProcess"/>
+    </div>
+  </div>
+  <opinion v-if="shareData.taskId" :formData="shareData.formData" :taskId="shareData.taskId"></opinion>
 </template>
 
 <script setup lang="jsx">
 import {ElNotification} from "element-plus";
 import {useProcessStore} from '@/stores/processStore.js';
 import {getAllocationDetail} from "@/api/expense-manage";
+
 const processStore = useProcessStore()
 const route = useRoute()
 const shareData = ref({})
+const formData = ref({})
 const shareProcessViewer = ref(true)
 const showTable = ref(true)
 const loading = ref(false)
+const activeName = ref('first')
 const getDetail = async () => {
-  // const specialFundId = route.query.id
+  const id = route.query.id
   showTable.value = false
+  shareProcessViewer.value = false
   loading.value = true
-  const {code, data, msg} = await getAllocationDetail(12)
+  const {code, data, msg} = await getAllocationDetail(id)
   ElNotification({
     title: '提示',
     message: msg,
@@ -25,24 +60,43 @@ const getDetail = async () => {
   })
   if (code === 1000) {
     shareData.value = data
+    formData.value = data.formData
     loading.value = false
+    if(data.operationList==null)return;
+    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
       showTable.value = true
     })
-    // if(data.operationList==null)return;
-    // 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;
-
-  }else {
+  } else {
     loading.value = false
   }
 }
 getDetail()
 </script>
-<style scoped>
+<style scoped lang="scss">
+  :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>