cz-hjjc-ht/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>
            <el-cascader
              :options="types"
              :props="{
                checkStrictly: false,
                label: 'name',
                value: 'id',
              }"
              :value="select.type"
              clearable
              size="small"
              style="width: 300px"
              @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" @click="getBudgets">查询</Button>
          <Button type="primary" style="margin-left: 10px"
            @click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table stripe ref="xyTable" :objectSpanMethod="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="150" label="操作" >
          <template #default="{ row }">
            <Button v-if="row.pid === 0" size="small" type="primary" @click="$refs['payPlan'].rowName = row.name,$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 @on-change="pageChange" show-sizer @on-page-size-change="pageSizeChange" />-->
<!--    </div>-->

    <payPlan ref="payPlan"></payPlan>
  </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 '@/views/budget/components/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: "name",
            width: 200,
            align: "left",
            sortable: false,
            fixed: "left",
          },
          {
            prop: 'type_detail.value',
            label: "预算类型",
            width: 115,
          },
          {
            label: "所属年份",
            prop: "year",
            width: 105,
          },
          // {
          //   label: "相关科室",
          //   prop: "plan_department.name",
          //   width: 110,
          // },
          {
            label: "年初预算金额（元）",
            prop: "money",
            align: "right",
            width: 180,
            formatter: (cell, data, value) => {
              if (value == 0) return "--";
              else 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: '科室',
            width: 150,
            prop: 'plan_department.name'
          },
          {
            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
      }, //合并行
      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,
          is_auth: 1,
          is_tree: 1
        }).then(res => {
          for (var m of res.list) {
            m.pid_info_name = m.pid_info?.name
          }
          this.list =
            mergeTableRow({
              data: res.list,
              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)
        })
      },
    },
    created() {

      this.select.year = this.$moment().format('YYYY');
    },
    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>