cz-hjjc-ht/src/views/budget/actual.vue

<template>
  <div style="padding: 0 20px">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="实际使用金额">
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <!-- <div>
            <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
            <Input
              v-model="select.keyword"
              placeholder="请输入关键字"
              style="width: 180px"
            ></Input>
          </div>

          <Button style="margin-left: 10px" type="primary" @click=""
            >重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="getList"
            >查询</Button
          > -->
          <Button style="margin-left: 10px" type="primary" @click="
              ($refs['addActual'].type = 'add'), $refs['addActual'].show()
            ">新增</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table :list="list" :table-item="table">
      <template #btns>
        <el-table-column :fixed="$store.getters.device === 'mobile'?false:'right'" label="操作" align="left" width="200">
          <template #default="{ row }">
            <div style="display: flex;align-items: flex-start;">
              <Button style="margin-right: 4px;" v-if="calculateTotalUseMoney(row.plan_act_links)<=parseFloat(row.money)" ghost size="small" type="primary" @click="execute(row)">确认执行</Button>
              <Button  style="margin-right: 4px;" ghost size="small" type="primary" @click="
                  ($refs['addActual'].id = row.id),
                    ($refs['addActual'].type = 'editor'),
                    $refs['addActual'].show()
                ">编辑</Button>
              <Poptip :transfer="true" confirm placement="bottom"
              :title="row.plan_act_links.length>0?'已有执行记录，确认要连同执行记录一同删除？':'确认要删除吗？'" @on-ok="destroy(row)">
                <Button size="small" type="error" ghost>删除</Button>
              </Poptip>
            </div>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex; justify-content: flex-end">
      <Page :total="total" @on-change="e => {
          select.page = e;
          getList()
        }" show-elevator show-sizer @on-page-size-change="e => {
          select.page = 1;
          select.page_size = e;
          getList();
        }" />
    </div>

    <addActual :plan_department_ids="depts" ref="addActual" @refresh="getList"></addActual>
    <exeActual ref="exeActual" @refresh="getList"></exeActual>
  </div>
</template>

<script>
  import {
    getActual,
    delActual,
  } from "@/api/budget/actual";
  import addActual from "./components/addActual.vue";
    import exeActual from "./components/exeActual.vue";
  export default {
    components: {
      addActual,
      exeActual
    },
    data() {
      return {
        depts: [],
        select: {
          page: 1,
          page_size: 10,
        },
        visible: false,
        total: 0,
        table: [{
            label: "资金来源所属年份",
            prop: "plan.year",
            width: 120,
          },
          {
            label: "事由",
            prop: "reason",
            width: 180,
            align: 'left'
          },
          {
            label: "资金来源",
            prop: "plan.name",
            align: 'left'
            // width: 180,
          },
          {
            label: "金额",
            prop: "money",
            width: 180,
          },
          {
            label: "已使用金额",
            prop: "use_money",
            width: 180,
            formatter: (row, v2, value) => {
              return this.calculateTotalUseMoney(row.plan_act_links)
            }
          }
        ],
        list: [],
      };
    },
    methods: {
      async getList() {
        const res = await getActual(this.select);
        this.list = res.data;
        this.total = res.total || 0;
      },
      calculateTotalUseMoney(plan_act_links) {
        let total = 0;
        for (let i = 0; i < plan_act_links.length; i++) {
          const useMoney = parseFloat(plan_act_links[i].use_money);
          if (!isNaN(useMoney)) {
            total += useMoney;
          }
        }
        return parseFloat(total).toFixed(2);
      },
      destroy(row) {
        delActual({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getList()
        })
      },
      execute(row) {
        this.$refs.exeActual.setForm(row.id,row.plan_act_links)
        this.$refs.exeActual.isShow = true
      }
    },
    computed: {},
    created() {
      this.getList();
    },
  };
</script>

<style scoped lang="scss">
  .selects {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
</style>