mosr-web/src/views/expense-management/share/detail.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">
      <expense-detail/>
    </el-tab-pane>
    <el-tab-pane label="分摊汇总" name="second" v-loading="loading">
      <fvTable v-if="showTable" ref="tableRef" :tableConfig="tableConfig">
        <template #empty>
          <el-empty description="暂无数据"/>
        </template>
      </fvTable>
    </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">
    <baseTitle title="审批记录"></baseTitle>
    <div class="process">
      <operation-render v-if="shareProcessViewer" :operation-list="shareData.operationList"
                        :state="shareData.state"/>
      <process-diagram-viewer v-if="shareProcessViewer" 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 {toThousands} from '@/utils/changePrice.js'
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 processStore = useProcessStore()
const route = useRoute()
const shareData = ref({})
const formData = ref({})
const auditOpinion = ref('')
const shareProcessViewer = ref(true)
const showTable = ref(true)
const loading = ref(false)
const activeName = ref('first')
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width: '80',
    },
    {
      prop: 'projectName',
      label: '项目名称',
      align: 'center',
    },
    {
      prop: 'projectCost',
      label: '费用性质',
      align: 'center',
      currentRender: ({row, index}) => {
        if (row.projectCost !== null) {
          return (<Tag dictType={'project_cost'} value={row.projectCost}/>)
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'researchStage',
      label: '项目阶段',
      align: 'center',
      currentRender: ({row, index}) => {
        if (row.researchStage&&row.researchStage !== null&&row.researchStage!==undefined) {
          return (<Tag dictType={'research_stage'} value={row.researchStage}/>)
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'afterTax',
      label: '分摊金额',
      align: 'center',
      currentRender:({row})=>{
        return <span>{toThousands(row.specialFundAmount)}</span>
      }
    }
  ],
  api:'/workflow/mosr/cost/allocation/collect',
  params:{
    allocationId:route.query.id
  }
})

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: 400px!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>