finance/components/HistoricalApplication.vue

<template>
  <div>
    <div
      v-if="data.info.list && data.info.list.length"
      class="w-full overflow-x-scroll"
    >
      <table class="text-gray-500 mt-4 text-ms">
        <tr class="bg-gray-100 text-gray-400">
          <td class="name">申请人</td>
          <td class="money">金额(元)</td>
          <td class="time">时间</td>
          <td class="status">状态</td>
        </tr>
        <tr v-for="item in data.info.list" class="text-gray-500">
          <td @click="openDetails(item.applyId)">{{ item.submitName }}</td>
          <td @click="openDetails(item.applyId)">
            <!-- v-if="!item.showBudgetEdit" -->
            {{ (+item.money / 100).toFixed(2) }}
            <!-- <van-field
              v-else
              v-model="item.budget"
              type="number"
              class="input-box"
              @change="handleUpdateFinance(item)"
              @blur="item.showBudgetEdit = false"
            /> -->
          </td>
          <td @click="openDetails(item.applyId)">
            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
          </td>
          <td>
            <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->
            <span v-if="item.applyType - 0 === 0" class="text-gray-500">
              待审核
            </span>
            <span v-else-if="item.applyType - 0 === 1" class="text-gray-500">
              已通过
            </span>
            <span v-else-if="item.applyType - 0 === 2" class="text-red-500">
              已驳回
            </span>
            <span v-else-if="item.applyType - 0 === 3" class="text-gray-500">
              待放款
            </span>
            <van-button
              v-else-if="item.applyType - 0 === 4"
              type="success"
              size="mini"
              class="rounded"
              @click="confirm"
            >
              确认
            </van-button>
            <span v-else-if="item.applyType - 0 === 5" class="text-green-500">
              已确认
            </span>
          </td>
        </tr>
      </table>
      <div class="w-1/2 mt-4 ml-48">
        <van-pagination
          v-model="data.pageNum"
          :items-per-page="data.pageSize"
          :page-count="data.pages"
          mode="simple"
        />
      </div>
    </div>
    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { personalHistory } from 'apis/finance';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const data = reactive({
  info: {},
  pageNum: 1,
  pageSize: 10,
  pages: 0,
});

const projectId = useProjectId();
const taskDetailId = useTaskId();
const taskName = useTaskName();

/**
 * 查看当前用户的费用申请历史信息（奖金）
 * @param { Number } pageNum
 * @param { Number } pageSize
 * @param { String } projectId
 * @param { String } name
 */
async function handlePersonalHistory() {
  try {
    const params = {
      param: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        projectId: projectId.value,
        taskDetailId: taskDetailId.value,
        taskName: taskName.value,
        type: 0,
      },
    };
    const res = await personalHistory(params);
    data.info = res;
    data.pageNum = res.pageNum ? +res.pageNum : 1;
    data.pageSize = res.pageSize ? +res.pageSize : 10;
    data.pages = res.pages ? +res.pages : 0;
  } catch (error) {
    console.error('error: ', error);
  }
}

function confirm() {
  alert('确认放款');
}

onMounted(() => {
  nextTick(() => {
    handlePersonalHistory();
  });
});

// 详情
function openDetails(applyId){
  const routeValue = router.currentRoute.value;
  const query = routeValue.query;
  query.applyId = applyId;
  router.push({ path: '/application-details', query });
}
</script>

<style scoped lang="less">
table {
  width: 500px;
  td {
    border: 0.5px solid #ccc;
    padding: 0.85rem;
    width: 5.9375rem;
  }
  .name {
    width: 100px;
  }
  .money {
    width: 100px;
  }
  .time {
    width: 120px;
  }
  .status {
    width: 120px;
  }
}

.input-box {
  padding: 0 !important;
  border-bottom: 1px solid #ccc;
}
</style>