contract-business-web/src/views/dashboard/components/budgetStatic.vue

<template>
  <div>

    <el-drawer
      size="1050px"
      title="预算统计"
      :visible.sync="drawer"
      direction="rtl">
      <div style="padding: 0 10px;">
        <xy-table style="width: 100%;"
                  ref="xyTable"
                  :objectSpanMethod="objectSpanMethod"
                  :table-item="table"
                  :list="list"
                  :show-summary="true"
                  :summary-method="summary"
                  @select="selected"
                  @select-all="selectAll">
          <template v-slot:btns>
            <div></div>
          </template>
        </xy-table>

        <div style="display: flex;justify-content: flex-end;">
          <Page :total="total"
                show-elevator
                @on-change="e => {
                  select.page = e;
                  getPlanProgress();
                }" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { moneyFormatter } from '@/utils'
import { getProgress } from '@/api/budget/budget'
import { mergeTableRow } from '@/utils/mergeTableRow'

export default {
  data() {
    return {
      type: [],
      drawer: false,
      select: {
        page_size: 10,
        page: 1,
        top_pid: 1
      },
      total: 0,
      list: [],
      selections: [],
      table: [
        {
          prop: 'selection',
          type: 'selection',
          width: 50,
          label: ' ',
          reserveSelection: true,
          fixed: 'left'
        },
        {
        label: "隶属项目",
        prop: 'pid_info_name',
        width: 200,
        align: 'left',
        sortable: false,
          fixed: this.$store.getters.device === 'mobile'?false:'left'
      },
        {
          prop: 'name',
          label: '项目名称',
          width: 200,
          align: 'left',
          fixed: this.$store.getters.device === 'mobile'?false:'left'
        },
        {
          prop: 'type_detail.value',
          label: '预算类型',
          width: 120,
        },
        {
          prop: 'year',
          label: '所属年份',
          width: 160
        },
        {
          prop: 'plan_department.name',
          label: "相关科室",
          width: 180
        },
        {
          prop: 'content',
          label: '描述',
          align: 'left',
          minWidth: 300
        },
        {
          prop: 'money',
          width: 180,
          label: '年初预算金额(元)',
          align: 'right'
        },
        {
          prop: 'update_money',
          width: 180,
          label: '调整后预算金额(元)',
          align: 'right'
        },
        {
          prop: 'use_money_total',
          label: '使用金额',
          align: 'right',
          width: 180
        },
        {
          prop: 'rate',
          label: '进展率',
          width: 200,
          customFn: (row) => {
            let m2 = row.update_money;
            let m1 = row.money;
            let m3 = row.use_money_total;
            let per = 0;

            if (m2 != 0) {
              per = ((m3 / m2) * 100).toFixed(2);
            } else if (m1 != 0) {
              per = ((m3 / m1) * 100).toFixed(2);
            }
            let perShow = Number(per)
            return ( <div><el-progress percentage={perShow}> </el-progress></div>)
          }
        },
      ]
    }
  },
  methods: {
    show () {
      this.drawer = true
    },
    hide () {
      this.drawer = false
    },
    objectSpanMethod({
      row,
      column,
    }) {
      const span = column['property'] + '-span'
      if (row[span]) {
        return row[span]
      }
    },

    async getPlanProgress() {
      const res = await getProgress(this.select)
      for (let m of res.list.data) {
        m.pid_info_name = m.pid_info?.name
      }
      this.list =
        mergeTableRow({
          data: res.list.data,
          mergeColNames: ["pid_info_name",'selection','index'], // 需要合并的列，默认合并列相同的数据
          firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
          firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
        })
      this.total = res.list.total

    },

    selected (selections, selected) {
      if (selected['pid_info_name-span']?.rowspan > 1) {
        if (this.selections.find(i => i.id === selected.id)) {
          let len = selected['pid_info_name-span'].rowspan
          let idx = this.selections.indexOf(selected)
          this.selections.splice(idx,len)
        } else {
          let len = selected['pid_info_name-span'].rowspan
          let idx = this.list.indexOf(selected)
          this.selections.push(...this.list.slice(idx,idx+len))
        }
      } else {
        if (this.selections.find(i => i.id === selected.id)) {
          let idx = this.selections.indexOf(this.selections.find(i => i.id === selected.id))
          this.selections.splice(idx,1)
        } else {
          this.selections.push(selected)
        }
      }

    },
    selectAll (selections) {
      this.selections = selections
    },
    summary ({ columns,data }) {
      return columns.map((column,index) => {
        if (index === 0) return '总计';
        if (column.property === 'money') {
          return this.selections.reduce((pre,cur) => (pre + Number(cur['money'] || 0)),0).toFixed(2)
        }
        if (column.property === 'update_money') {
          return this.selections.reduce((pre,cur) => (pre + Number(cur['update_money'] || 0)),0).toFixed(2)
        }
        if (column.property === 'use_money_total') {
          return this.selections.reduce((pre,cur) => (pre + Number(cur['use_money_total'] || 0)),0).toFixed(2)
        }
        if (column.property === 'rate') {
          let moneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['money'] || 0)),0)
          let useMoneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['use_money_total'] || 0)),0)
          let updateMoneyTotal = this.selections.reduce((pre,cur) => (pre + Number(cur['update_money'] || 0)),0)
          if (updateMoneyTotal !== 0) return ((useMoneyTotal / updateMoneyTotal) * 100).toFixed(2) + '%';
          if (moneyTotal !== 0) return ((useMoneyTotal / moneyTotal) * 100).toFixed(2) + '%';
          return '0%';
        }
        return '';
      })

    }
  },
  computed: {},
  created() {
    this.getPlanProgress()
  }
}
</script>

<style scoped lang="scss">
</style>