contract-business-web/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>
          <Select clearable v-model="select.type" placeholder="请选择预算类型" type="date" style="width: 160px">
            <Option v-for="item in type" :value="item.id" :key="item.id">{{item.value}}</Option>
          </Select>
        </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" :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} from "@/api/system/dictionary";
import {moneyFormatter} from "@/utils";

export default {
  data() {
    return {
      type:[],//预算类型
      departments:[],
      select:{
        pageIndex:1,
        year:'',
        type:'',
        department:''
      },
      rateTotal:'0%',
      moneyTotal:0,
      total:0,
      list:[],
      table:[
        {
          prop:'name',
          label:'项目名称',
          width: 200,
          align: 'left',
          fixed: 'left'
        },
        {
          prop:'type',
          label:'预算类型',
          width: 120,
          formatter: (cell, data, value) => {
            let res = this.type.filter(item => {
              return item.id === value
            })
            return res[0]?.value || '未知'
          }
        },
        {
          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:'use_money_total',
          label:'使用金额',
          align:'right',
          width: 180
        },
        {
          prop:'rate',
          label:'进展率',
          width: 120,
          formatter:(cell,data,value)=>{
            return value + '%'
          }
        },
      ]
    }
  },
  methods: {
    //统计
    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.moneyTotal)
        }
      })

      return sums
    },

    async getType(){
      const res = await getparameter({number:'money_way'})
      this.type = res.detail
    },
    //翻页
    pageChange(e){
      this.select.pageIndex = e
      this.getPlanProgress()
    },
    //获取科室
    getDepartment(){
      listdeptNoAuth().then(res=>{
        this.departments = res
      })
    },

    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
      })
      this.list = res.list.data
      this.total = res.list.total
      this.rateTotal = res.rate
      this.moneyTotal = res.use_money_total
      console.log(res)
    }
  },
  mounted() {
    this.getType()
    this.getDepartment()
    this.getPlanProgress()
  }
}
</script>

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