From e695659c8c92087ab6e96eb682ea29e601ae4cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Thu, 29 Dec 2022 10:16:05 +0800
Subject: [PATCH] up

---
 src/components/XyTable/index.vue              |   6 +-
 src/utils/mergeTableRow.js                    |  62 +++
 src/views/budget/budgetList.vue               | 202 ++++++-
 src/views/budget/seeBudget.vue                |  40 +-
 src/views/contract/contractList.vue           |   9 +-
 .../components/examineRegistration.vue        |  11 +-
 src/views/finance/paymentRegistrationList.vue |   5 +-
 .../statisticalReport/budgetProgress.vue      | 527 ++++++++++--------
 8 files changed, 589 insertions(+), 273 deletions(-)
 create mode 100644 src/utils/mergeTableRow.js

diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index a346aed..559a39d 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -51,6 +51,9 @@ export default {
     summaryMethod:{
       type:Function
     },
+    objectSpanMethod:{
+      type:Function
+    },
     treeProps:{
       type:Object,
       default:()=> {
@@ -120,12 +123,13 @@ export default {
   mounted() {
   },
   render(h) {
-    let {summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick,rowClick} = this
+    let {summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick,rowClick,objectSpanMethod} = this
     return (
       <div class="table-tree">
         { tableItem && tableItem.length>0 ?
           (<el-table
             ref="table"
+            span-method={objectSpanMethod}
             show-summary={showSummary}
             show-header={showHeader}
             summary-method={summaryMethod}
diff --git a/src/utils/mergeTableRow.js b/src/utils/mergeTableRow.js
new file mode 100644
index 0000000..5e60daf
--- /dev/null
+++ b/src/utils/mergeTableRow.js
@@ -0,0 +1,62 @@
+/**在工具类util.js中定义通用方法
+ *  table合并行通用 */
+// eslint-disable-next-line space-before-function-paren
+export function mergeTableRow (config) {
+  let data = config.data;
+  const {
+    mergeColNames, // 需要合并的列
+    firstMergeColNames, // 受影响的列
+    firstMerge // 以哪列为基础进行合并(基准列)
+  } = config
+  if (!mergeColNames || mergeColNames.length === 0) {
+    return data
+  }
+  mergeColNames.forEach((m) => {
+    const mList = {}
+    data = data.map((v, index) => {
+      // 区分需要合并行的key值
+      const rowVal = v[firstMerge] + '-' + v[m]
+      // 需要合并行的第二行以及之后行会走if
+      // m === firstMerge 判断需要合并的列是否是基准列，如果是则只满足前面的条件，如果不是则需满足前面+后面的条件
+      if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span'].rowspan === 0)) {
+        // 判断受影响的列是否是需要合并的列
+        const flag = firstMergeColNames.filter((f) => {
+          return f === m
+        }).length !== 0
+        // 判断需要合并的列是否是基准列
+        const mcFlag = mergeColNames.filter((mc) => {
+          return mc === firstMerge
+        }).length === 0
+        // 判断基准列只有一行的时候，直接赋值rowspan和colspan为1
+        if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)) {
+          v[m + '-span'] = {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          // 判断基准列或其他需要合并列有多行时，第一行rowspan++
+          data[mList[rowVal]['index']][m + '-span'].rowspan++
+          // 需要合并行除了第一行之后其他行设置rowspan和colspan为0
+          v[m + '-span'] = {
+            rowspan: 0,
+            colspan: 0
+          }
+          mList[rowVal]['num']++
+          mList[rowVal]['newIndex']++
+        }
+      } else { // 需要合并列第一行走else
+        mList[rowVal] = {
+          num: 1,
+          index: index,
+          newIndex: index + 1
+        }
+        v[m + '-span'] = {
+          rowspan: 1,
+          colspan: 1
+        }
+      }
+      return v
+    })
+  })
+  return data
+};
diff --git a/src/views/budget/budgetList.vue b/src/views/budget/budgetList.vue
index b17b822..42faded 100644
--- a/src/views/budget/budgetList.vue
+++ b/src/views/budget/budgetList.vue
@@ -28,7 +28,9 @@
               </el-option>
             </el-select>
           </span>
-          <Button style="margin-left: 10px" type="primary" @click="isShowAdd = true,getDepartment()">新增</Button>
+          <el-switch v-model="isTree" @change="changeTree" active-text="树形结构">
+          </el-switch>
+          <Button style="margin-left: 10px" type="primary" @click="showAdd('')">新增</Button>
           <Button style="margin-left: 10px" type="primary" @click="getBudgets">查询</Button>
           <Button style="margin-left: 10px" type="primary"
             @click="()=>select={page:1,year:'', type:'', department:''}">重置
@@ -37,18 +39,85 @@
       </slot>
     </lx-header>
 
-    <xy-table ref="xyTable" :list="list" :show-summary="true" :summary-method="summary" :table-item="table"
-      @delete="deleteTable" @editor="showEditor">
+    <div v-if="isTree">
+      <el-table ref="treeTable" :height="tableHeight" class="v-table" :summary-method="summary" show-summary
+        :data="treeData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column type="index" align="center" fixed="left"></el-table-column>
+        <el-table-column v-for="(item,index) of table" :prop="item.prop" :label="item.label" :width="item.width"
+          :min-width="item.minWidth" :fixed="item.fixed" :align="item.align">
+          <template slot-scope="scope">
+            <span v-if="item.formatter">
+              {{item.formatter(scope.row,scope.row,scope.row[item.prop])}}
+            </span>
+            <span v-else>
+              {{(item.prop.indexOf(".")>-1?scope.row[item.prop.split(".")[0]][item.prop.split(".")[1]]:scope.row[item.prop])}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" header-align="center" label="操作" width="200">
+          <template slot-scope="scope">
+            <div class="slot-btns">
+              <Button class="slot-btns-item" size="small" type="primary" @click="showEditor(scope.row)">
+                编辑
+              </Button>
+              <Button style="margin-left: 10px;" @click="showAdd(scope.row)" v-if="scope.row.pid==0"
+                class="slot-btns-item" size="small" type="info">
+                下级
+              </Button>
+              <Poptip :transfer="true" style="margin-left: 10px;" confirm placement="bottom" title="确认要删除吗"
+                @on-ok="()=>deleteTable(scope.row)">
+                <i-button class="slot-btns-item" size="small" type="error">删除
+                </i-button>
+              </Poptip>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    </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>
+    <div v-if="!isTree">
+      <xy-table ref="xyTable" :objectSpanMethod="objectSpanMethod" :list="list" :show-summary="true" :summary-method="summary" :table-item="table"
+        @delete="deleteTable" @editor="showEditor">
+        <template v-slot:btns>
+          <el-table-column fixed="right" header-align="center" label="操作" width="200">
+            <template slot-scope="scope">
+              <div class="slot-btns">
+                <Button class="slot-btns-item" size="small" type="primary" @click="showEditor(scope.row)">
+                  编辑
+                </Button>
+                <Button style="margin-left: 10px;" @click="showAdd(scope.row)" v-if="scope.row.pid==0"
+                  class="slot-btns-item" size="small" type="info">
+                  下级
+                </Button>
+                <Poptip :transfer="true" style="margin-left: 10px;" confirm placement="bottom" title="确认要删除吗"
+                  @on-ok="()=>deleteTable(scope.row)">
+                  <i-button class="slot-btns-item" size="small" type="error">删除
+                  </i-button>
+                </Poptip>
+              </div>
+            </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>
+    </div>
     <!--    新增-->
     <xy-dialog ref="addBudget" :form="form" :is-show.sync="isShowAdd" :rules="rules" title="新增计划" type="form"
       @submit="submit">
+      <template v-slot:pid v-if="form.pid_info">
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            隶属
+          </div>
+          <div class="xy-table-item-content">
+            <div style="width: 300px;">{{form.pid_info?form.pid_info.name:'无'}}</div>
+          </div>
+        </div>
+      </template>
       <template v-slot:name>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -125,8 +194,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
           </div>
           <div class="xy-table-item-content xy-table-item-price">
-            <el-input v-model="form.money" clearable placeholder="请填写金额" style="width: 300px;" @blur="moneyFormat('money')"
-              @focus="moneyRecover('money')" />
+            <el-input v-model="form.money" clearable placeholder="请填写金额" style="width: 300px;"
+              @blur="moneyFormat('money')" @focus="moneyRecover('money')" />
           </div>
         </div>
       </template>
@@ -277,12 +346,20 @@
     getparameter
   } from "@/api/system/dictionary"
 
+  import {
+    mergeTableRow
+  } from "@/utils/mergeTableRow"
+
   export default {
     data() {
       return {
+        tableHeight: 0,
         isShowAdd: false,
         types: [],
+        treeData: [],
+        isTree: true,
         form: {
+          pid: "0",
           name: "",
           type: "",
           year: "",
@@ -292,7 +369,8 @@
           remark: "",
           plan_department_link_id: [],
           plan_department_links: [],
-          update_money: ""
+          update_money: "",
+          pid_info: null
         },
         rules: {
           name: [{
@@ -329,9 +407,10 @@
         list: [],
         totalMoney: 0,
         total: 0,
-        pageIndex: 1,
-        pageSize:10,
-        table: [{
+        pageIndex: 1,
+        pageSize: 10,
+        table: [],
+        tableItem: [{
             label: "项目名称",
             prop: 'name',
             width: 200,
@@ -366,7 +445,9 @@
             align: 'right',
             width: 180,
             formatter: (cell, data, value) => {
-              return moneyFormatter(value)
+              if (value == 0) return '--'
+              else
+                return moneyFormatter(value)
             }
           },
           {
@@ -410,7 +491,53 @@
 
       }
     },
-    methods: {
+    methods: { //合并行
+      objectSpanMethod({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      }) {
+        const span = column['property'] + '-span'
+        if (row[span]) {
+          return row[span]
+        }
+      },
+      changeTree() {
+
+        if (!this.isTree) {
+          this.table = [{
+            label: "隶属项目",
+            prop: 'pid_info_name',
+            width: 200,
+            align: 'left',
+            sortable: false,
+            fixed: 'left'
+          }].concat(this.tableItem);
+        } else {
+          this.table = this.tableItem;
+        }
+        this.getBudgets();
+      },
+      initLoad() {
+        var that = this;
+        var clientHeight = document.documentElement.clientHeight
+        var lxHeader_height = 96.5; //查询 头部
+        var paginationHeight = 37; //分页的高度
+        var topHeight = 50; //页面 头部
+        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
+        that.tableHeight = tableHeight;
+      },
+      showAdd(row) {
+        this.form.pid = '0';
+        this.form.pid_info = null;
+        this.isShowAdd = true
+        this.getDepartment()
+        if (row != '') {
+          this.form.pid = row.id;
+          this.form.pid_info = row;
+        }
+      },
       changeDepartments(v) {
         console.log(v)
       },
@@ -448,7 +575,11 @@
       //合计
       summary(param) {
         this.$nextTick(() => {
-          this.$refs['xyTable'].$children[0].doLayout()
+          if (!this.isTree)
+            this.$refs['xyTable'].$children[0].doLayout();
+          else
+
+            this.$refs['treeTable'].doLayout();
         })
         const {
           columns,
@@ -479,11 +610,11 @@
       pageChange(e) {
         this.pageIndex = e
         this.getBudgets()
-      },
-      pageSizeChange(e){
+      },
+      pageSizeChange(e) {
         this.pageSize = e
         this.pageIndex = 1
-        this.getBudgets()
+        this.getBudgets()
       },
       //获取科室
       getDepartment() {
@@ -494,14 +625,29 @@
       //查询计划列表
       getBudgets() {
         getBudget({
-          page_size: this.pageSize ,
+          page_size: this.pageSize,
           page: this.pageIndex,
           year: this.select.year,
           type: this.select.type,
-          plan_department_id: this.select.department
+          plan_department_id: this.select.department,
+          is_tree: this.isTree ? 1 : "",
+          top_pid: !this.isTree ? 1 : "",
         }).then(res => {
-          this.list = res.list.data
-          this.total = res.list.total
+          if (this.isTree)
+            this.treeData = res.list;
+          else {
+            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
         })
       },
@@ -531,7 +677,8 @@
           money: moneyRecovery(this.form.money),
           plan_department_id: this.form.department,
           plan_department_links: plan_department_links,
-          remark: this.form.remark
+          remark: this.form.remark,
+          pid: this.form.pid,
         }).then(res => {
           Message({
             message: '操作成功',
@@ -609,12 +756,13 @@
             name: res.name,
             type: res.type,
             department: res.plan_department_id,
-            money: moneyFormatter(res.money),
+            money: moneyFormatter(res.money),
             update_money: moneyFormatter(res.update_money),
             year: res.year,
             content: res.content,
             remark: res.remark,
-            plan_department_links: res.plan_department_links
+            plan_department_links: res.plan_department_links,
+            pid:res.pid
           }
           let ids = [];
           res.plan_department_links.map(item => {
@@ -629,6 +777,8 @@
       },
     },
     created() {
+      this.table = this.tableItem;
+      this.initLoad();
 
       this.select.year = this.$moment().format('YYYY');
     },
diff --git a/src/views/budget/seeBudget.vue b/src/views/budget/seeBudget.vue
index 8d156b8..f081ce2 100644
--- a/src/views/budget/seeBudget.vue
+++ b/src/views/budget/seeBudget.vue
@@ -35,7 +35,8 @@
       </slot>
     </lx-header>
 
-    <xy-table ref="xyTable" :table-item="table" :list="list" :show-summary="true" :summary-method="summary">
+    <xy-table ref="xyTable" :objectSpanMethod="objectSpanMethod" :table-item="table" :list="list" :show-summary="true"
+      :summary-method="summary">
       <template v-slot:btns>
         <div></div>
       </template>
@@ -62,6 +63,9 @@
     moneyFormatter,
     parseTime
   } from "@/utils"
+  import {
+    mergeTableRow
+  } from "@/utils/mergeTableRow"
   export default {
     data() {
       return {
@@ -113,6 +117,14 @@
         pageIndex: 1,
         pageSize: 10,
         table: [{
+            label: "隶属项目",
+            prop: 'pid_info_name',
+            width: 200,
+            align: 'left',
+            sortable: false,
+            fixed: 'left'
+          },
+          {
             label: "项目名称",
             prop: 'name',
             width: 200,
@@ -194,6 +206,17 @@
           number: 'money_way'
         })
         this.types = res.detail
+      }, //合并行
+      objectSpanMethod({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      }) {
+        const span = column['property'] + '-span'
+        if (row[span]) {
+          return row[span]
+        }
       },
 
       //合计
@@ -248,9 +271,20 @@
           page: this.pageIndex,
           year: this.select.year,
           type: this.select.type,
-          plan_department_id: this.select.department
+          plan_department_id: this.select.department,
+          top_pid: 1
         }).then(res => {
-          this.list = res.list.data
+
+          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
         })
diff --git a/src/views/contract/contractList.vue b/src/views/contract/contractList.vue
index 54bcfab..f76aee5 100644
--- a/src/views/contract/contractList.vue
+++ b/src/views/contract/contractList.vue
@@ -915,6 +915,12 @@
                 width: 80,
                 align: 'center'
               },
+              {
+                label: "隶属",
+                prop: 'pid_info.name',
+                width: 180,
+                align: 'left'
+              },
               {
                 label: "名称",
                 prop: 'name',
@@ -1315,7 +1321,8 @@
               name: this.planSearch.name,
               page_size: 10,
               page: this.plansPageIndex,
-              plan_department_id: this.planSearch.plan_department_id
+              plan_department_id: this.planSearch.plan_department_id,
+              top_pid: 1
             })
             this.plans = res.list.data
 
diff --git a/src/views/finance/components/examineRegistration.vue b/src/views/finance/components/examineRegistration.vue
index 70ab6bf..654bc34 100644
--- a/src/views/finance/components/examineRegistration.vue
+++ b/src/views/finance/components/examineRegistration.vue
@@ -304,10 +304,16 @@
                 prop: 'plan_department.name',
                 width: 100,
                 align: 'center'
+              }, {
+                label: "隶属",
+                prop: 'pid_info.name',
+                width: 180,
+                align: 'left'
               },
           {
             label: "名称",
             prop: 'name',
+                width: 280,
             align: 'left'
           },
 
@@ -494,7 +500,10 @@
       //计划
       //获取预算计划
       async getBudgets() {
-        let res = await getBudget(this.plansSelect)
+        let res = await getBudget({
+          top_pid: 1,
+          ...this.plansSelect
+        })
         this.plans = res.list.data
         this.planTotal = res.list.total
 
diff --git a/src/views/finance/paymentRegistrationList.vue b/src/views/finance/paymentRegistrationList.vue
index 9167a72..4a06bf7 100644
--- a/src/views/finance/paymentRegistrationList.vue
+++ b/src/views/finance/paymentRegistrationList.vue
@@ -135,9 +135,11 @@
             align: 'center',
             width: 90
           },
+             
           {
             label: "名称",
             prop: 'name',
+                width: 200,
             align: 'left'
           },
           {
@@ -326,7 +328,8 @@
               name: this.planSearch.name,
               page_size: 10,
               page: this.plansPageIndex,
-              plan_department_id: this.planSearch.plan_department_id
+              plan_department_id: this.planSearch.plan_department_id,
+              top_pid: 1
             }).then(res => {
 
 
diff --git a/src/views/statisticalReport/budgetProgress.vue b/src/views/statisticalReport/budgetProgress.vue
index 2e8ea41..c75405f 100644
--- a/src/views/statisticalReport/budgetProgress.vue
+++ b/src/views/statisticalReport/budgetProgress.vue
@@ -1,241 +1,288 @@
-<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>
-          <el-select size="small" clearable v-model="select.type" placeholder="请选择预算类型" type="date" style="width: 160px">
-            <el-option v-for="item in type" :value="item.id" :key="item.id" :label="item.value"></el-option>
-          </el-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,
-      updateMoneyTotal:0,
-      useMoneyTotal: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:'update_money',
-          width: 180,
-          label:'调整后预算金额(元)',
-          align:'right'
-        },
-        {
-          prop:'use_money_total',
-          label:'使用金额',
-          align:'right',
-          width: 180
-        },
-        {
-          prop:'rate',
-          label:'进展率',
-          width: 200,
-          fixed:"right",
-         customFn: (row) => {
-           let m2=row.update_money;
-           let m1=row.money;
-           let m3=row.use_money_total;
-           let per =0 ;
-
-           if (m2 != 0) {
-             per= ((m3 / m2) * 100).toFixed(2);
-           } else if (m1 != 0) {
-             per= ((m3 / m1) * 100).toFixed(2);
-           }
-           return ( < div >
-             <el-progress percentage = {
-               Number(per)
-             } > </el-progress> </div >
-           )
-         }
-        },
-      ]
-    }
-  },
-  methods: {
-    toper(m2,m1,m3){
-      let per =0 ;
-      if (m2 != 0) {
-        per= ((m3 / m2) * 100).toFixed(2);
-      } else if (m1 != 0) {
-        per= ((m3 / m1) * 100).toFixed(2);
-      }
-      return per;
-    },
-    //统计
-    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.useMoneyTotal)
-        }
-
-        if(column.property === 'money'){
-          sums[index] = moneyFormatter(this.moneyTotal)
-        }
-
-
-        if(column.property === 'update_money'){
-          sums[index] = moneyFormatter(this.updateMoneyTotal)
-        }
-      })
-
-      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.useMoneyTotal = res.use_money_total
-      this.moneyTotal=res.money;
-      this.updateMoneyTotal=res.update_money;
-      this.rateTotal = this.toper(this.updateMoneyTotal,this.moneyTotal,this.useMoneyTotal)
-
-      console.log(res)
-    }
-  },
-  created() {
-
-    this.select.year=this.$moment().format('YYYY');
-  },
- async mounted() {
-    await this.getType()
-    await this.getDepartment()
-
-    this.select.department = Number(this.$route.query.departmentId) || ''
-    this.select.type = Number(this.$route.query.typeId) || ''
-
-    await this.getPlanProgress()
-  }
-}
-</script>
-
-<style scoped lang="scss">
+<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>
+          <el-select size="small" clearable v-model="select.type" placeholder="请选择预算类型" type="date"
+            style="width: 160px">
+            <el-option v-for="item in type" :value="item.id" :key="item.id" :label="item.value"></el-option>
+          </el-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" :objectSpanMethod="objectSpanMethod" :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";
+  import {
+    mergeTableRow
+  } from "@/utils/mergeTableRow"
+
+  export default {
+    data() {
+      return {
+        type: [], //预算类型
+        departments: [],
+        select: {
+          pageIndex: 1,
+          year: '',
+          type: '',
+          department: ''
+        },
+        rateTotal: '0%',
+        moneyTotal: 0,
+        updateMoneyTotal: 0,
+        useMoneyTotal: 0,
+        total: 0,
+        list: [],
+        table: [{
+            label: "隶属项目",
+            prop: 'pid_info_name',
+            width: 200,
+            align: 'left',
+            sortable: false,
+            fixed: 'left'
+          },
+          {
+            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: 'update_money',
+            width: 180,
+            label: '调整后预算金额(元)',
+            align: 'right'
+          },
+          {
+            prop: 'use_money_total',
+            label: '使用金额',
+            align: 'right',
+            width: 180
+          },
+          {
+            prop: 'rate',
+            label: '进展率',
+            width: 200,
+            fixed: "right",
+            customFn: (row) => {
+              let m2 = row.update_money;
+              let m1 = row.money;
+              let m3 = row.use_money_total;
+              let per = 0;
+
+              if (m2 != 0) {
+                per = ((m3 / m2) * 100).toFixed(2);
+              } else if (m1 != 0) {
+                per = ((m3 / m1) * 100).toFixed(2);
+              }
+              return ( < div >
+                <el-progress percentage = {
+                  Number(per)
+                } > </el-progress> </div >
+              )
+            }
+          },
+        ]
+      }
+    },
+    methods: { //合并行
+      objectSpanMethod({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      }) {
+        const span = column['property'] + '-span'
+        if (row[span]) {
+          return row[span]
+        }
+      },
+      toper(m2, m1, m3) {
+        let per = 0;
+        if (m2 != 0) {
+          per = ((m3 / m2) * 100).toFixed(2);
+        } else if (m1 != 0) {
+          per = ((m3 / m1) * 100).toFixed(2);
+        }
+        return per;
+      },
+      //统计
+      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.useMoneyTotal)
+          }
+
+          if (column.property === 'money') {
+            sums[index] = moneyFormatter(this.moneyTotal)
+          }
+
+
+          if (column.property === 'update_money') {
+            sums[index] = moneyFormatter(this.updateMoneyTotal)
+          }
+        })
+
+        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,
+          top_pid: 1
+        })
+        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.useMoneyTotal = res.use_money_total
+        this.moneyTotal = res.money;
+        this.updateMoneyTotal = res.update_money;
+        this.rateTotal = this.toper(this.updateMoneyTotal, this.moneyTotal, this.useMoneyTotal)
+
+        console.log(res)
+      }
+    },
+    created() {
+
+      this.select.year = this.$moment().format('YYYY');
+    },
+    async mounted() {
+      await this.getType()
+      await this.getDepartment()
+
+      this.select.department = Number(this.$route.query.departmentId) || ''
+      this.select.type = Number(this.$route.query.typeId) || ''
+
+      await this.getPlanProgress()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
 </style>