cz-hjjc-ht/src/views/statisticalReport/budgetProgress.vue

<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" text="预算进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px;word-break: keep-all;">年份</span>
        <span>
          <DatePicker :value="select.year" placeholder="请选择年份" type="year" placement="bottom-start" style="width: 160px"
            @on-change="(e)=>select.year = e"></DatePicker>
        </span>

        <span style="padding: 0 6px;word-break: keep-all;">预算类型</span>
        <span>
          <el-cascader
            :options="types"
            :props="{
                checkStrictly: false,
                label: 'name',
                value: 'id',
              }"
            :value="select.type"
            clearable
            size="small"
            style="width: 160px"
            @change="(e) => (select.type = e[e.length - 1] || '')"
          />
        </span>

        <span style="padding: 0 6px;">
          科室
        </span>
        <span>
          <el-select placeholder="科室选择" clearable size="small" v-model="select.department" style="width: 160px;">
            <el-option v-for="item in departments" :label="item.name" :value="item.id" :key="item.id">
            </el-option>
          </el-select>
        </span>

        <Button type="primary" style="margin-left: 10px" ghost
          @click="select = {pageIndex:1,year:'',type:'',department:''}">重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="getPlanProgress">查询</Button>
      </slot>
    </lx-header>

    <xy-table ref="xyTable" :objectSpanMethod="objectSpanMethod" :table-item="table" :list="list" :show-summary="true" :summary-method="summary">
      <template v-slot:btns>
        <div></div>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" show-elevator @on-change="pageChange" />
    </div>
  </div>
</template>

<script>
  import {
    getProgress
  } from "@/api/budget/budget"
  import {
    listdeptNoAuth
  } from "@/api/system/department";
  import {
    getparameter, getparameterTree
  } from '@/api/system/dictionary'
  import {
    moneyFormatter
  } from "@/utils";
  import {
    mergeTableRow
  } from "@/utils/mergeTableRow"

  export default {
    data() {
      return {
        types: [], //预算类型
        departments: [],
        select: {
          pageIndex: 1,
          year: '',
          type: '',
          department: ''
        },
        rateTotal: '0%',
        moneyTotal: 0,
        updateMoneyTotal: 0,
        useMoneyTotal: 0,
        total: 0,
        list: [],
        table: [{
            label: "隶属项目",
            prop: 'pid_info_name',
            width: 200,
            align: 'left',
            sortable: false,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '项目名称',
            width: 200,
            align: 'left',
            fixed: '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,
            fixed: "right",
            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);
              }
              return ( < div >
                <el-progress percentage = {
                  Number(per)
                } > </el-progress> </div >
              )
            }
          },
        ]
      }
    },
    methods: { //合并行
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        const span = column['property'] + '-span'
        if (row[span]) {
          return row[span]
        }
      },
      toper(m2, m1, m3) {
        let per = 0;
        if (m2 != 0) {
          per = ((m3 / m2) * 100).toFixed(2);
        } else if (m1 != 0) {
          per = ((m3 / m1) * 100).toFixed(2);
        }
        return per;
      },
      //统计
      summary(param) {
        this.$nextTick(() => {
          this.$refs['xyTable'].$children[0].doLayout()
        })
        const {
          columns,
          data
        } = param
        const sums = []
        columns.map((column, index) => {
          if (index === 0) {
            sums[index] = '总计'
            return
          }
          if (column.property === 'rate') {
            sums[index] = this.rateTotal + "%";
            return
          }
          if (column.property === 'use_money_total') {
            sums[index] = moneyFormatter(this.useMoneyTotal)
          }

          if (column.property === 'money') {
            sums[index] = moneyFormatter(this.moneyTotal)
          }


          if (column.property === 'update_money') {
            sums[index] = moneyFormatter(this.updateMoneyTotal)
          }
        })

        return sums
      },

      async getType() {
        const res = await getparameterTree({
          id: 3
        });
        const dataHandler = (data) => {
          data.forEach(i => {
            if (i.hasOwnProperty('detail')) {
              i.children = i.detail.map(j => {
                j.name = j.value
                return j;
              })
            } else {
              dataHandler(i['children'])
            }
          })
          return data;
        }
        this.types = dataHandler(res?.children) || []
      },
      //翻页
      pageChange(e) {
        this.select.pageIndex = e
        this.getPlanProgress()
      },
      //获取科室
      getDepartment() {
        listdeptNoAuth().then(res => {
          this.departments = res.data
        })
      },

      async getPlanProgress() {
        const res = await getProgress({
          page_size: 10,
          page: this.select.pageIndex,
          year: this.select.year,
          type: this.select.type,
          plan_department_id: this.select.department,
          top_pid: 1
        })
        for (var m of res.list.data) {
          m.pid_info_name = m.pid_info?.name
        }
        this.list =
          mergeTableRow({
            data: res.list.data,
            mergeColNames: ["pid_info_name"], // 需要合并的列，默认合并列相同的数据
            firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
            firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
          })
        this.total = res.list.total
        this.useMoneyTotal = res.use_money_total
        this.moneyTotal = res.money;
        this.updateMoneyTotal = res.update_money;
        this.rateTotal = this.toper(this.updateMoneyTotal, this.moneyTotal, this.useMoneyTotal)

        console.log(res)
      }
    },
    created() {

      this.select.year = this.$moment().format('YYYY');
    },
    async mounted() {
      await this.getType()
      await this.getDepartment()

      this.select.department = Number(this.$route.query.departmentId) || ''
      this.select.type = Number(this.$route.query.typeId) || ''

      await this.getPlanProgress()
    }
  }
</script>

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