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

<template>
  <div>

    <el-drawer
      size="1250px"
      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
                :page-size="select.page_size"
                @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 {
    props: {
    year: [Number,String]
  },
  data() {
    return {
      type: [],
      drawer: false,
      select: {
        page_size: 100,
        page: 1,
        top_pid: 1,
        sort_name:'pid',
        sort_type:'ASC'
      },
      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: '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||0;
            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>)
          }
        },
        {
          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
        },
      ]
    }
  },
  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(val) {
      const res = await getProgress({
        year:this.year,
        ...this.select
      })
      for (let m of res.list.data) {
        m.pid_info_name = m.pid_info?.name
         m.pid_info_id = m.pid_info?.id
        // console.log('m.pid_info_name',m.pid_info_name)
      }
      res.list.data.sort((a,b)=>{
        return b.pid_info_id - a.pid_info_id
      })
      this.list =
        mergeTableRow({
          data: res.list.data,
          mergeColNames: ["pid_info_name",'index'], // 需要合并的列，默认合并列相同的数据
          firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
          firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
        })
      this.total = res.list.total

    },

    selected (selections, selected) {
      // selections: 所有已选中的行数组
      // selected: 当前点击的行
      
      // 确保 selected 存在且有效
      if (!selected || !selected.id) {
        // 如果没有 selected，说明可能是取消选择操作，使用 selections 更新
        this.selections = Array.isArray(selections) ? selections : []
        return
      }
      
      // 直接使用 selections 参数来更新选中列表，这样更可靠
      // 因为 selections 是表格组件当前所有已选中的行
      this.selections = Array.isArray(selections) ? [...selections] : []
      
      // 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 {
      //   const existingIndex = this.selections.findIndex(i => i.id === selected.id)
      //   if (existingIndex > -1) {
      //     // 已选中，取消选中
      //     this.selections.splice(existingIndex, 1)
      //   } else {
      //     // 未选中，添加到选中列表
      //     this.selections.push(selected)
      //   }
      // }
    },
    selectAll (selections) {
      // 确保 selections 是一个数组
      this.selections = Array.isArray(selections) ? [...selections] : []
      
      // 强制更新视图，确保选中状态同步
      this.$nextTick(() => {
        // 如果取消全选，确保表格的选中状态也被清除
        if (this.selections.length === 0) {
          if (this.$refs.xyTable && this.$refs.xyTable.clearSelection) {
            this.$refs.xyTable.clearSelection()
          }
        }
      })
    },
    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: {},
  watch: {
    year: {
      handler:function(val) {
        console.log("val",val)
        this.getPlanProgress(val)
      },
      immediate: true
    },
    drawer: {
      handler: function(val) {
        if (val) {
          // 打开抽屉时，清空选中状态
          this.selections = []
          this.$nextTick(() => {
            if (this.$refs.xyTable && this.$refs.xyTable.clearSelection) {
              this.$refs.xyTable.clearSelection()
            }
          })
        }
      }
    }
  },
  created() {
    // this.getPlanProgress()
  }
}
</script>

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