finance/pages/financial-approval-details.vue

<template>
<div>
  <van-nav-bar
      title="财务审批详情"
      left-arrow
      @click-left="onClickLeft"
    />

     <!-- 发票信息 -->
  <div class="bg-white px-3">
    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
    <div v-for="item in billList" class="flex p-2 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 in otherData" class="flex p-2 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 in submitter" class="flex p-2 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 in checkerList" class="flex p-3 text-gray-400 text-base justify-between">
      <!-- 遍历的审核人的姓名，建议和时间 -->
      <div>
          <div>{{item.name}}</div>
          <div class="text-sm pt-1">{{item.advice}}</div>
          <div class="text-sm pt-1">{{item.checkedTime}}</div>
      </div>
      <!--其他审核人 -->
      <div class="text-center" v-show="!item.isMine">
          <div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''">
            {{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}}
          </div>
          <div v-if="item.score>0" class="mt-1 text-yellow-500">
            <van-circle
              v-model:current-rate="item.score"
              :rate="item.score"
              :speed="100"
              :text="item.score"
              color="#ff6700"
              :stroke-width="100"
            />
          </div>
      </div>
      <!-- 当前审核人已审核完毕 -->
      <div class="text-center" v-show="item.isMine && item.status !== '0'">
          <div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''">
            {{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}}
          </div>
          <div v-if="item.score>0" class="mt-1 text-yellow-500">
            <van-circle
              v-model:current-rate="item.score"
              :rate="item.score"
              :speed="100"
              :text="item.score"
              color="#ff6700"
              :stroke-width="100"
            />
          </div>
      </div>
      <!-- 当前审核人未审批状态 -->
      <div class="text-center" v-show="item.isMine && item.status === '0'">
          <van-button type="success" round size="mini" class="button ml-5">通过</van-button>
          <van-button type="danger" round size="mini" class="button">驳回</van-button>
      </div>
    </div>
  </div>
</div>
</template>
<script setup>
import {ref} from 'vue'
// 发票信息
const billList = ref([
  {
    name: "发票代码",
    value: "4154153125646",
  },
  {
    name: "发票号码",
    value: "545648789",
  },
  {
    name: "合计金额(元)",
    value: "40",
  },
  {
    name: "税额(元)",
    value: "2",
  },
  {
    name: "开票日期",
    value: "2022年1月2日",
  },
  {
    name: "备注",
    value: "业务支出",
  },
])
// 其他信息数据
const otherData = ref([
  {
    name: "申请类型",
    value: "项目申请"
  },
  {
    name: "所属项目",
    value: "PT项目"
  },
  {
    name: "所属任务",
    value: "财务条界面设计"
  },
  {
    name: "类目",
    value: "报销"
  },
  {
    name: "名目",
    value: "业务招待费"
  },
])
// 提交人数据
const submitter = ref([
  {
    name:'姓名',
    value:'黛西'
  },
  {
    name:'部门',
    value:'软件部'
  },
  {
    name:'提交时间',
    value:'2021/12/29 13:22'
  },
]);
// 审核人员
const checkerList = ref([
  {
    name: "冯教授",
    advice: "",
    checkedTime: "",
    status: "0",
    isMine: "1",
  },
  {
    name: "薇薇安",
    advice: "很棒!",
    checkedTime: "12/18 14:55",
    status: "0",
    score:''
  },
  {
    name: "小明",
    advice: "很棒!",
    checkedTime: "12/18 14:55",
    status: "1",
    score:'80'
  }
]);

function onClickLeft(){
  console.log('返回')
}

</script>
<style lang="less" scoped>
.van-circle{
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.button{
  padding: 0 0.75rem;
}
</style>