finance/components/FinanceManage.vue

<template>
  <div>
    <div v-if="data.info.taskFinanceList && data.info.taskFinanceList.list && data.info.taskFinanceList.list.length">
      <table class="w-full text-gray-500 mt-4 text-ms">
          <tr class="bg-gray-100">
            <td class="name">任务名称</td>
            <td>预算(元)</td>
            <td>奖金(元)</td>
          </tr>
          <tr v-for="item in data.info.taskFinanceList.list">
            <td>{{item.name}}</td>
            <td>
              <div v-if="!item.showBudgetEdit" @click="editBudge(item)">{{ item.budget }}</div>
              <van-field v-else v-model="item.budget" type="number" class="input-box" @change="handleUpdateFinance(item, 'budget')" @blur="item.showBudgetEdit = false" />
            </td>
            <td>
              <div v-if="!item.showBonusEdit" @click="editBonus(item)">{{ item.bonus }}</div>
              <van-field v-else v-model="item.bonus" type="number" class="input-box" @change="handleUpdateFinance(item, 'bonus')" @blur="item.showBonusEdit = false" />
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td>{{ num.except(+data.info.budget,100) || 0 }}</td>
            <td>{{ num.except(+data.info.bonus,100) || 0 }}</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 { queryProjectFinance, updateFinance } from 'apis/projectFinance'
import {ref, reactive, onMounted, nextTick} from'vue'
import num from 'utils/num';

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

const projectId = useProjectId()

// 显示修改预算框
function editBudge(item){
  data.budget = num.except(+item.budget,100)
  data.info.taskFinanceList.list.forEach((list) => {
    if(item.taskFinanceId === list.taskFinanceId){
      list.showBudgetEdit = true
    }else{
      list.showBudgetEdit = false
    }
  })
}

// 显示修改预算框
function editBonus(item){
  data.bonus = num.except(+item.bonus,100)
  data.info.taskFinanceList.list.forEach((list) => {
    if(item.taskFinanceId === list.taskFinanceId){
      list.showBonusEdit = true
    }else{
      list.showBonusEdit = false
    }
  })
}

/**
 * 查看项目下的所有任务对应的财务信息
 * @param { Number } pageNum
 * @param { Number } pageSize
 * @param { String } projectId
 * @param { String } name
 */
async function handleProjectFinance(){
  try {
    const params = {
      param:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        projectId: projectId.value
      }
    }
    const res = await queryProjectFinance(params)
    data.info = res
    data.pageNum = res.taskFinanceList && res.taskFinanceList.pageNum ? +res.taskFinanceList.pageNum : 1
    data.pageSize = res.taskFinanceList && res.taskFinanceList.pageSize ? +res.taskFinanceList.pageSize : 10
    data.pages = res.taskFinanceList && res.taskFinanceList.pages ? +res.taskFinanceList.pages : 0
  } catch (error) {
    console.error('error: ', error);
  }
}

/**
 * 修改任务或项目的预算和奖金信息
 * @param { Number } bonus 奖金
 * @param { Number } budget 预算
 * @param { String } taskDetailId 任务详情id
 * @param { String } taskFinanceId 任务财务信息id
 */
async function handleUpdateFinance(item, type){
  try {
    console.log('item, type: ', item, type, data[type], item[type]);
    item[type] = data[type]
    console.log('item: ', item.bonus);
    const params = {
      param:{
        // bonus: num.ride(+item.bonus,100),
        // budget: num.ride(+item.budget,100),
        taskDetailId: item.taskDetailId,
        taskFinanceId: item.taskFinanceId,
      }
    }
    const res = await updateFinance(params)
    handleProjectFinance()
  } catch (error) {
    console.error('error: ', error);
  }
}

onMounted(() => {
  nextTick(() => {
    handleProjectFinance()
  })
})
</script>

<style scoped lang="less">
table {
    td {
      border: 0.5px solid #ccc;
      padding: 0.85rem;
      width: 5.9375rem;
    }
    .name{
      width:50%
    }
  }

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