contract-business-web/src/views/budget/seeBudget.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>
        <div>
          <span style="padding: 0 6px;">年份</span>
          <span>
            <DatePicker placeholder="选择所属年份" type="year" placement="bottom" :value="select.year" style="width: 130px;" @on-change="(e)=>select.year = e"></DatePicker>
          </span>

          <span style="padding: 0 6px;">
            预算类型
          </span>
          <span>
            <Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
              <Option v-for="item in types" :value="item.id" :key="item.id">{{ item.value }}</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" @click="getBudgets">查询</Button>
          <Button type="primary"  style="margin-left: 10px" @click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
        </div>
      </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 {getBudget,detailBudget} from "@/api/budget/budget"
import {listdeptNoAuth} from "@/api/system/department"
import {getparameter} from '@/api/system/dictionary'
import {moneyFormatter, parseTime} from "@/utils"
export default {
  data() {
    return {
      isShowAdd:false,
      types:[],
      form:{
        name:"",
        type:"",
        year:"",
        department:"",
        money:"",
        content:"",
        remark:""
      },
      rules:{
        name:[
          {required:true,message:"必填项"}
        ],
        type:[
          {required:true,message:"必选项"}
        ],
        year:[
          {required:true,message:"必选项"}
        ],
        department:[
          {required:true,message:"必选项"}
        ],
        money:[
          {required:true,message:"必填项"},
          {pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
        ],
        content:[
          {required:true,message:"必填项"}
        ]
      },
      list:[],
      totalMoney:0,
      total:0,
      pageIndex:1,
      table:[
        {
          label:"项目名称",
          prop:'name',
          width: 200,
          align:'left',
          sortable:false,
          fixed:'left'
        },
        {
          label:"预算类型",
          prop:'type',
          width:115,
          formatter: (cell, data, value) => {
            let res = this.types.filter(item => {
              return item.id === value
            })
            return res[0]?.value || '未知'
          }
        },
        {
          label:"所属年份",
          prop:'year',
          width: 105
        },
        {
          label: "相关科室",
          prop:'plan_department.name',
          width: 110
        },
        {
          label:'项目金额（元）',
          prop:'money',
          align:'right',
          width: 160,
          formatter:(cell,data,value)=>{
            return moneyFormatter(value)
          }
        },
        {
          label:"创建信息",
          prop:'created_at',
          width: 160,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        },
        {
          label:"描述",
          minWidth:300,
          prop:'content',
          align:'left',
          sortable:false
        },
      ],
      select:{
        page:1,
        year:"",
        type:"",
        department:""
      },
      departments:[],//部门类型

      //编辑信息
      isShowEditor:false,
      editorForm:{},
    }
  },
  methods: {
    async getTypes(){
      const res = await getparameter({number:'money_way'})
      this.types = res.detail
    },

    //合计
    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 === 'money'){
          sums[index] = moneyFormatter(this.totalMoney)
          return
        }
        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value)) && (column.property === 'money' || column.property === 'plan_price'|| column.property === 'fund_log_total')) {
        //
        //   sums[index] = sums[index].toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
        // } else {
        //   sums[index] = '';
        // }
      })
      return sums
    },

    //翻页
    pageChange(e){
      this.pageIndex = e
      this.getBudgets()
    },
    //获取科室
    getDepartment(){
      listdeptNoAuth().then(res=>{
        this.departments = res
      })
    },
    //查询计划列表
    getBudgets(){
      getBudget({
        page_size:10,
        page:this.pageIndex,
        year:this.select.year,
        type:this.select.type,
        plan_department_id:this.select.department
      }).then(res=>{
        this.list = res.list.data
        this.total = res.list.total
        this.totalMoney = res.total_money
      })
    },
    showEditor(row){
      this.getDepartment()
      detailBudget({id:row.id}).then(res=>{
        this.editorForm =
          {
            id:res.id,
            name:res.name,
            type:res.type,
            department:res.plan_department_id,
            money:res.money,
            year:res.year,
            content:res.content,
            remark:res.remark
          }
        this.isShowEditor = true
        console.log(this.editorForm)
      })
    },
  },
  mounted() {
    this.getTypes()
    this.getDepartment()
    this.getBudgets()
  }
}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 140px;
}
.xy-table-item-price{
  position: relative;
  &::after{
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    content:'（元）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 30px;
    z-index: 2;
  }
}
</style>