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 :showTable="showTable" :detailList="detailList" :loading="loading"/>
    </el-tab-pane>
    <el-tab-pane label="分摊汇总" name="second">
      <fvTable ref="tableIns" :tableConfig="tableConfig" :data="collectList">
        <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 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, getAllocationDetailList,getAllocationCollect} from "@/api/expense-manage";

const processStore = useProcessStore()
const route = useRoute()
const shareData = ref({})
const detailList = ref([])
const formData = ref({})
const auditOpinion = ref('')
const shareProcessViewer = ref(true)
const showTable = ref(true)
const loading = ref(false)
const collectList = ref([])
const activeName = ref('first')
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width: '80',
    },
    {
      prop: 'originalFileName',
      label: '项目名称',
      align: 'center',
    },
    {
      prop: 'tag',
      label: '费用性质',
      align: 'center'
    },
    {
      prop: 'size',
      label: '项目阶段',
      align: 'center'
    },
    {
      prop: 'size',
      label: '分摊金额',
      align: 'center'
    }
  ]
})
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 getDetailList = async () => {
  let params = {
    allocationId: route.query.id
  }
  loading.value = true
  showTable.value = false
  const {code, data, msg} = await getAllocationDetailList(params)
  if (code === 1000) {
    detailList.value = data.rows
    nextTick(() => {
      showTable.value = true
      loading.value = false
    })
  }else {
    ElNotification({
      title: '提示',
      message: msg,
      type:  'error'
    })
  }
}
const getDetailCollect = async () => {
  const {code, data, msg} = await getAllocationCollect(route.query.id)
  if (code === 1000) {
    collectList.value = data.rows
  }else {
    ElNotification({
      title: '提示',
      message: msg,
      type:  'error'
    })
  }
}
getDetail()
getDetailList()
// getDetailCollect()
</script>
<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>