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.value" :key="item.value">{{item.label}}</Option>
          </Select>
        </span>

        <span style="padding: 0 6px;">
            科室
          </span>
        <span>
            <el-cascader
              placeholder="选择科室"
              size="small"
              :value="select.department"
              style="width: 160px;"
              :options="departments"
              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
              clearable
              @change="e => select.department = e[e.length-1] || ''"/>
          </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 :table-item="table" :list="list">
      <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 {listdept} from "@/api/system/department";
export default {
  data() {
    return {
      type:[
        {
          label:'部门预算',
          value:1
        },
        {
          label:'水务计划',
          value:2
        }
      ],//预算类型
      departments:[],
      select:{
        pageIndex:1,
        year:'',
        type:'',
        department:''
      },
      total:0,
      list:[],
      table:[
        {
          prop:'type',
          label:'预算类型',
          width: 120,
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "部门预算"
                break;
              case 2:
                return "水务计划"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          prop:'name',
          label:'项目名称',
          width: 200
        },
        {
          prop:'year',
          label:'所属年份',
          width: 160
        },
        {
          prop:'plan_department.name',
          label:"相关科室",
          width: 180
        },
        {
          prop:'content',
          label:'描述',
          align:'left'
        },
        {
          prop:'rate',
          label:'进展率',
          width: 160,
          formatter:(cell,data,value)=>{
            return value + '%'
          }
        }
      ]
    }
  },
  methods: {
    //翻页
    pageChange(e){
      this.select.pageIndex = e
      this.getPlanProgress()
    },
    //获取科室
    getDepartment(){
      listdept().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.data
      this.total = res.total
      console.log(res)
    }
  },
  mounted() {
    this.getDepartment()
    this.getPlanProgress()
  }
}
</script>

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