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" />
      <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"
            />
          </span>

          <span style="padding: 0 6px;">
            预算类型
          </span>
          <span>
            <Select v-model="select.type" placeholder="选择预算类型" style="width:130px;" clearable>
              <Option v-for="item in types" :key="item.id" :value="item.id">{{ item.value }}</Option>
            </Select>
          </span>

          <span style="padding: 0 6px;">
            科室
          </span>
          <span>
            <el-select v-model="select.department" placeholder="科室选择" clearable size="small" style="width: 160px;">
              <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </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>
          <Button style="margin-left: 10px" type="primary" @click="">
            资金申请
          </Button>
        </div>
      </slot>
    </lx-header>

    <xy-table
      ref="xyTable"
      :object-span-method="objectSpanMethod"
      :table-item="table"
      :list="list"
      :show-summary="true"
      :summary-method="summary"
    >
      <template v-slot:btns>
        <el-table-column header-align="center" align="left" :width="130" label="操作">
          <template #default="{ row }">
            <Button size="small" type="primary" @click="$refs['payPlan'].rowType = row.type,$refs['payPlan'].plan_department_id = row.plan_department_id,$refs['payPlan'].plan = row,$refs['payPlan'].setId(row.id),$refs['payPlan'].show()">付款计划</Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

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

    <payPlan ref="payPlan" :types="types" />
  </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'
import {
  mergeTableRow
} from '@/utils/mergeTableRow'

import payPlan from './component/payPlan.vue'
export default {
  components: {
    payPlan
  },
  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,
      pageSize: 10,
      table: [{
        label: '隶属项目',
        prop: 'pid_info_name',
        width: 120,
        align: 'left',
        sortable: false,
        fixed: 'left'
      },
      {
        label: '项目名称',
        prop: 'name',
        width: 260,
        align: 'left',
        sortable: false,
        fixed: 'left'
      },
      {
        label: '预算类型',
        prop: 'type',
        width: 115,
        formatter: (cell, data, value) => {
          const 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: 180,
        formatter: (cell, data, value) => {
          return moneyFormatter(value)
        }
      },
      {
        label: '调整后预算金额（元）',
        prop: 'update_money',
        align: 'right',
        width: 200,
        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: {}
    }
  },
  created() {
    this.select.year = this.$moment().format('YYYY')
  },
  mounted() {
    this.getTypes()
    this.getDepartment()
    this.getBudgets()
  },
  methods: {
    async getTypes() {
      const res = await getparameter({
        number: 'money_way'
      })
      this.types = res.detail
    }, // 合并行
    objectSpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      const span = column['property'] + '-span'
      if (row[span]) {
        return row[span]
      }
    },

    // 合计
    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
    },
    pageSizeChange(e) {
      this.pageIndex = 1
      this.pageSize = e
      this.getBudgets()
    },
    // 翻页
    pageChange(e) {
      this.pageIndex = e
      this.getBudgets()
    },
    // 获取科室
    getDepartment() {
      listdeptNoAuth().then(res => {
        this.departments = res
      })
    },
    // 查询计划列表
    getBudgets() {
      getBudget({
        page_size: this.pageSize,
        page: this.pageIndex,
        year: this.select.year,
        type: this.select.type,
        plan_department_id: this.select.department,
        top_pid: 1
      }).then(res => {
        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.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)
      })
    }
  }
}
</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>