finance/pages/application-details.vue

<template>
<div>
  <!-- 导航栏 -->
  <NuxtLink to="Initiate-application">
    <div
      title="申请详情"
      left-arrow
      @click="router.go(-1)"
    ></div>
  </NuxtLink>

  <!-- 审核结果 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
    <div v-for="(item, checkerIndex) in checkerList" :key="checkerIndex" class="flex py-3 px-4 text-gray-400 text-base justify-between">
      <div>
          <div>{{item.checkerName}}</div>
          <div class="text-sm pt-1">{{item.remark}}</div>
          <div class="text-sm pt-1">{{item.time}}</div>
      </div>
      <div class="text-center">
          <div :class="item.checkStatus == '1' ? 'text-green-500' : item.checkStatus == '2' ? 'text-red-500' : ''">
            {{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
          </div>
          <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
          <el-progress type="circle" :percentage="100" color="#ff6700" :stroke-width="100" />
            <!-- <van-circle
              v-model:current-rate="currentRate"
              :rate="100"
              :speed="100"
              :text="100"
              class="w-12"
              color="#ff6700"
              :stroke-width="100"
            /> -->
          </div>
      </div>
    </div>
  </div>
  <!-- 发票信息 -->
  <div class="bg-white px-3" v-if="isInvoice">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
    <div v-for="(item,invoiceIndex) in invoiceList" :key="invoiceIndex">
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>发票代码</div>
          <div>{{item.invoiceCode}}</div>
      </div>
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>发票号码</div>
          <div>{{item.invoiceNumber}}</div>
      </div>
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>合计金额(元)</div>
          <div>{{ num.except(+item.money, 100) }}</div>
      </div>
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>税额(元)</div>
          <div>{{ num.except(+item.taxMoney, 100) }}</div>
      </div>
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>开票日期</div>
          <div>{{dayjs(item.invoiceTime - 0).format('YYYY年MM月DD日')}}</div>
      </div>
      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
          <div>备注</div>
          <div>{{item.remark}}</div>
      </div>
    </div>
  </div>
  <!-- 金额信息 -->
  <div class="bg-white px-3" v-else>
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
    <div v-for="(item,moneyIndex) in moneyInfo" :key="moneyIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
  <!-- 其他信息 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div>
    <div v-for="(item,otherIndex) in otherData" :key="otherIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
  <!-- 提交人信息 -->
  <div class="bg-white px-3 mb-5">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div>
    <div v-for="(item, index) in submitter" :key="index" class="flex py-2 px-4 text-gray-400 text-base justify-between">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
    </div>
  </div>
</div>
</template>

<script setup>
import dayjs from "dayjs";
import { ref, computed } from 'vue';
import { getApplyDetail } from 'apis/finance';
import { useRouter } from 'vue-router';
import num from 'utils/num';

const router = useRouter();
// 审核人数据
const currentRate = ref(0);
const text = computed(() => currentRate.value.toFixed(0));
const isInvoice = ref(false)
const checkerList = ref([])
// 发票信息数据
const invoiceList = ref([])
// 没有发票信息得数据
const moneyInfo = ref([
  {
    name: "申请金额",
    value: "",
    label: "money",
  },
  {
    name: "备注",
    value: "",
    label: "remark",
  },
])
// 其他信息数据
const otherData = ref([
  {
    name: "申请类型",
    value: "",
    label: "typeName",
  },
  {
    name: "所属项目",
    value: "",
    label: "projectName",
  },
  {
    name: "所属任务",
    value: "",
    label: "taskDetailName",
  },
  {
    name: "类目",
    value: "",
    label: "categoryName",
  },
  {
    name: "名目",
    value: "",
    label: "rowName",
  },
])
// 提交人数据
const submitter = ref([
  {
    name:'姓名',
    value:'',
    label: "submitName",
  },
  {
    name:'部门',
    value:'软件部',
    label: "department",
  },
  {
    name:'提交时间',
    value:'',
    label: "applyTime",
  },
])

/**
 * 查询申请详情
 * @param { Number } applyId 申请记录id
 */
async function handleApplyDetail(){
  try {
    const routeValue = router.currentRoute.value;
    const applyId = routeValue.query.applyId;
    const params = {param : { applyId }}
    const res = await getApplyDetail(params)
    // 检查人
    checkerList.value = res.checkerList
    // 发票信息
    isInvoice.value = res.invoiceList && res.invoiceList.length ? true : false;
    invoiceList.value = res.invoiceList
    for(let key  in res){
      moneyInfo.value.forEach(item => {
        if(item.label === key){
          item.value = res[key]
        }
      })
    }
    // 其他信息
    for(let key  in res){
      otherData.value.forEach(item => {
        if(item.label === key){
          item.value = res[key]
        }
      })
    }
    // 提交人信息
    for(let key  in res){
      submitter.value.forEach(item => {
        if(item.label === key){
          item.value = res[key]
        }
      })
    }
  } catch (error) {
    console.error('error: ', error);
  }
}

handleApplyDetail()
</script>

<style lang="less" scoped>
.el-progress{
  width: 2.5rem !important;
  height: 2.5rem !important;
}

</style>