finance/components/Expenditure.vue

<template>
  <div v-if="data.info.length">
    <div class="w-full overflow-x-scroll">
      <table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'taskTable'">
        <tr class="bg-gray-100">
          <td width="20%">任务名称</td>
          <td width="16%">支出</td>
          <td width="16%">占比</td>
          <td width="16%">追加</td>
          <td width="16%">操作</td>
        </tr>
        <tr v-for="item in data.info">
          <td>{{ item.taskName }}</td>
          <td>{{ item.money }}</td>
          <td>{{ item.percentage }}%</td>
          <td>
            <div v-if="!item.showField" @click="item.showField = true">
              {{ item.budget - 0 }}
            </div>
            <el-field
              v-else-if="financeId - 0 !== 0 && item.showField"
              v-model="item.budget"
              type="number"
              class="input-box"
              @change="handleUpdateBudget(item)"
              @blur="item.showField = false"
            />
          </td>
          <td>
            <el-icon name="plus" @click="toApplication(item)" />
          </td>
        </tr>
      </table>
      <table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'nameTable'">
        <tr class="bg-gray-100">
          <td width="15%">任务名称</td>
          <td width="16%">预算(元)</td>
          <td width="16%">占比(元)</td>
        </tr>
        <tr v-for="item in data.info">
          <td>{{ item.rowName }}</td>
          <td>{{ item.percentage }}</td>
          <td>{{ item.money }}</td>
        </tr>
      </table>
    </div>
    <div class="w-1/2 mt-4 ml-48">
      <el-pagination
        v-model="data.pageNum"
        :items-per-page="data.pageSize"
        :page-count="data.pages"
        mode="simple"
      />
    </div>
  </div>
  <el-empty v-else description="暂无数据" />
  <el-dialog
    v-model:show="data.show"
    title="追加预算"
    show-cancel-button
    @confirm="handleAdd"
  >
    <el-field
      :border="data.border"
      v-model="data.appendBudget"
      type="textarea"
      class="appendBudget"
      placeholder="追加预算"
    />
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { taskExpense, rowExpense } from 'apis/finance';
import { addBudget } from 'apis/projectFinance';

const projectId = useProjectId();
const router = useRouter();

const props = defineProps({
  id: { type: Object, default: () => {} },
});
console.log('props.id: ', props.id);
const data = reactive({
  info: [],
  pageNum: 1,
  pageSize: 10,
  pages: 0,
  show: false,
  appendBudget: '',
  auditInfo: {},
  border: true,
});

// 追加预算确认
async function handleUpdateBudget(item) {
  try {
    const params = {
      param: {
        appendBudget: item.budget - 0,
        financeId: item.financeId,
        projectId: projectId.value,
      },
    };
    await addBudget(params);
  } catch (error) {
    console.error('error: ', error);
  }
}

// 操作,跳转到发起申请界面
function toApplication(item) {
  const routeValue = router.currentRoute.value;
  const query = routeValue.query;
  query.tn = item.taskName;
  // console.log('query: ', query);
  router.push({ path: '/Initiate-application', query });
}

// 获取echarts图表数据(任务支出)
async function getTaskExpense() {
  const params = { param: { projectId: projectId.value } };
  const res = await taskExpense(params);
  for (let i = 0; i < res.length; i++) {
    res.showField = false;
  }
  data.info = res;
}
// 获取echarts图表数据(名目支出)
async function getRowExpense() {
  const params = { param: { projectId: projectId.value } };
  const res = await rowExpense(params);
  data.info = res;
}
function setData() {
  if (props.id === 'taskTable') {
    getTaskExpense();
  } else if (props.id === 'nameTable') {
    getRowExpense();
  }
}
onMounted(() => {
  nextTick(() => {
    // handleFinanceOfProject();
    setData();
  });
});
</script>

<style scoped lang="less">
table {
  width: 120%;
  td {
    border: 0.5px solid #ccc;
    padding: 0.5rem;
  }
}
.input-box {
  padding: 0 !important;
  border-bottom: 1px solid #ccc;
}

.appendBudget {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 5%;
  width: 90%;
}
</style>