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"
import { getFundLog } from "@/api/paymentRegistration/fundLog"
  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: 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,
            fixed: this.$store.getters.device === 'mobile'?false:'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 >
              )
            }
          },
          {
            prop: "show",
            label: "支出",
            width: 66,
            fixed: "right",
            customFn: row => (
              <el-popover width="800"
                          trigger="click"
                          placement="left-end"
                          on={{
                            ['show']:async _ => {
                              try {
                                this.isLoadingFundLogTable = true
                                const res = await getFundLog({
                                  page: 1,
                                  page_size: 999,
                                  act_plan_link_id: row.id,
                                },true)
                                this.fundLogs = res.data
                                this.isLoadingFundLogTable = false
                              } catch (e) {
                                this.isLoadingFundLogTable = false
                              }
                            }
                          }}>
                <Table loading={this.isLoadingFundLogTable}
                       size="small"
                       data={this.fundLogs}
                       columns={[
                         {
                           title: "项目名称",
                           minWidth: 300,
                           key: "contract.name",
                           fixed: "left",
                           align: "left",
                           render:(h,{ row }) => h('span',row.contract?.name)
                         },
                         {
                           title: "付款申请金额(元)",
                           prop: "apply_money",
                           align: "right",
                           width: 170,
                           render:(h, { row }) => h('span',Number(row.apply_money)
                             .toFixed(2)
                             .replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
                         },
                         {
                           title: "实际付款金额(元)",
                           key: "act_money",
                           align: "right",
                           width: 170,
                           render:(h, { row }) => h('span',Number(row.act_money)
                             .toFixed(2)
                             .replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
                         },
                         {
                           title: "预算计划",
                           width: 320,
                           align: "left",
                           render:(h, { row }) => {
                             if (row.act_plan_link.length > 0) {
                               return h('div',row.act_plan_link.map(item => (
                                 <div> {" "}
                                   [{item.plan.year}] {(item.plan && item.plan.pid_info) ? item.plan.pid_info.name: ''} - {item.plan.name} <br /> [使用金额]{" "}
                                   {item.use_money}元{" "}</div>
                               )))
                             }
                           }
                         },
                         {
                           title: "款项类型",
                           key: "type",
                           width: 120,
                         },
                         {
                           key: "status",
                           title: "状态",
                           width: 100,
                           render:(h, { row }) => h('span',row.status ? "已审核" : "待审核")
                         },
                         {
                           key: 'flow_status',
                           title: '流程状态',
                           width: 100,
                           render:(h, { row }) => {
                             let map = new Map([
                               [1,'待申请'],
                               [2,'流转中'],
                               [3,'已完成']
                             ])
                             return h('span',map.get(row.flow_status))
                           }
                         },
                         {
                           title: "次数",
                           key: "pay_count",
                           width: 95,
                           render:(h , { row }) => {
                             let val = row.pay_count + 1
                             return h('span',val)
                           }
                         },
                         {
                           title: "最后一笔",
                           key: "is_end",
                           width: 125,
                           render: (h, { row }) => h('span',row.is_end ?  "是" : "否")
                         },
                         {
                           title: "经办人",
                           minWidth: 120,
                           key: "admin.name",
                           align: "center",
                           render: (h, { row }) => h('span',row.admin?.name)
                         },
                         {
                           title: "业务科室",
                           minWidth: 140,
                           key: "department.name",
                           align: "center",
                           render: (h, { row }) => h('span',row.department?.name)
                         },
                         {
                           title: "备注",
                           minWidth: 360,
                           key: "remark",
                           align: "left",
                         },
                         {
                           title: "创建信息",
                           key: "created_at",
                           width: 160,
                           render: (h, { row }) => h('span',this.$moment(row.created_at).format('YYYY-MM-DD'))
                         },
                       ]}></Table>
                <Button slot="reference" size="small" type="primary">查看</Button>
              </el-popover>
            )
          }
        ],
        isLoadingFundLogTable: false,
        fundLogs: []
      }
    },
    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>