预算计划

.env.development

@@ -3,10 +3,10 @@ ENV = 'development'
 
 # base api
 
-VUE_APP_DOMIAN=http://192.168.60.99:9003/
+VUE_APP_DOMIAN=http://192.168.60.99:8003/
 VUE_APP_BASE_API = ''
 VUE_APP_UPLOAD=http://192.168.60.99:8003/api/admin/upload-file
-VUE_APP_OUT_URL = http://192.168.60.18:8001
+VUE_APP_OUT_URL = http://192.168.60.18:2021
 
 #VUE_APP_DOMIAN=http://192.168.60.99:9003/
 #VUE_APP_UPLOAD=http://192.168.60.99:9003/api/admin/upload-file

src/views/budget/seeBudget.vue

@@ -12,7 +12,7 @@
               placement="bottom"
               :value="select.year"
               style="width: 130px;"
-              @on-change="(e)=>select.year = e"
+              @on-change="(e)=>{select.year = e, changeYear(e)}"
             />
           </span>
 
@@ -20,9 +20,30 @@
             预算类型
           </span>
           <span>
-            <Select v-model="select.type" placeholder="选择预算类型" style="width:130px;" clearable>
+            <el-select
-              <Option v-for="item in types" :key="item.id" :value="item.id">{{ item.value }}</Option>
+              v-model="select.typeName"
-            </Select>
+              clearable
+              placeholder="选择预算类型"
+              style="width: 130px"
+              popper-class="budget-type-tree-select"
+              @change="changeType"
+            >
+              <el-option disabled value="" style="height:150px;overflow: scroll;">
+                <el-tree
+                  ref="tree1"
+                  style="width:300px"
+                  default-expand-all
+                  :default-checked-keys="checkArr"
+                  :check-strictly="true"
+                  :data="types"
+                  show-checkbox
+                  node-key="id"
+                  highlight-current
+                  :props="defaultProps"
+                  @check="(data, node)=>{return getSelectedNodes(data,node,'tree1')}"
+                />
+              </el-option>
+            </el-select>
           </span>
 
           <span style="padding: 0 6px;">
@@ -37,7 +58,7 @@
           <Button
             type="primary"
             style="margin-left: 10px"
-            @click="()=>select={page:1,year:'', type:'', department:''}"
+            @click="resetSelect"
           >重置</Button>
           <Button style="margin-left: 10px" type="primary" @click="">
             资金申请
@@ -67,7 +88,7 @@
       <Page :total="total" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange" />
     </div>
 
-    <payPlan ref="payPlan" :types="types" />
+    <payPlan ref="payPlan" :types="typesbefore" />
   </div>
 </template>
 
@@ -79,16 +100,17 @@ import {
 import {
   listdeptNoAuth
 } from '@/api/system/department'
-import {
-  getparameter
-} from '@/api/system/dictionary'
 import {
   moneyFormatter,
-  parseTime
+  parseTime,
+  buildTree
 } from '@/utils'
 import {
   mergeTableRow
 } from '@/utils/mergeTableRow'
+import {
+  index as getPlanType
+} from '@/api/budget/plantype.js'
 
 import payPlan from './component/payPlan.vue'
 export default {
@@ -98,7 +120,14 @@ export default {
   data() {
     return {
       isShowAdd: false,
-      types: [],
+      types: [], // 预算类型（树形结构）
+      typesbefore: [], // 原始预算类型数据（扁平数组）
+      checkArr: [], // 树形选择器选中的节点
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      typeYear: this.$moment().format('YYYY'), // 用于获取类型的年份
       form: {
         name: '',
         type: '',
@@ -220,6 +249,7 @@ export default {
         page: 1,
         year: '',
         type: '',
+        typeName: '', // 预算类型名称
         department: ''
       },
       departments: [], // 部门类型
@@ -231,6 +261,7 @@ export default {
   },
   created() {
     this.select.year = this.$moment().format('YYYY')
+    this.typeYear = this.$moment().format('YYYY')
   },
   mounted() {
     this.getTypes()
@@ -238,12 +269,74 @@ export default {
     this.getBudgets()
   },
   methods: {
+    // 年份变化时重新获取类型
+    changeYear(e) {
+      if (e) {
+        this.typeYear = e
+        this.getTypes()
+      }
+    },
+    // 类型选择变化
+    changeType(e) {
+      if (!e) {
+        this.select.type = ''
+        this.select.typeName = ''
+        this.checkArr = []
+        if (this.$refs.tree1) {
+          this.$refs.tree1.setCheckedKeys([])
+        }
+      }
+    },
+    // 树形节点选择
+    getSelectedNodes(data, node, ref) {
+      const ref_data = ref || 'tree1'
+      this.$refs[ref_data].setCheckedKeys([])
+      this.checkArr = []
+      if (data.children && data.children.length > 0) {
+        this.$Message.warning('当前节点不可选择')
+        this.select.type = ''
+        this.select.typeName = ''
+        this.$refs[ref_data].setCheckedKeys([])
+        return
+      }
+      this.$refs[ref_data].setCheckedKeys([]) // 删除所有选中节点
+      this.$refs[ref_data].setCheckedNodes([data]) // 选中已选中节点
+      this.select.type = data.id
+      this.select.typeName = data.name
+      this.checkArr = [data.id]
+      this.$forceUpdate()
+    },
+    // 获取预算类型
     async getTypes() {
-      const res = await getparameter({
+      const res = await getPlanType({
-        number: 'money_way'
+        page_size: 999,
+        page: 1,
+        sort_name: 'sort',
+        sort_type: 'asc',
+        filter: [{
+          key: 'year',
+          op: 'eq',
+          value: this.typeYear || this.select.year || ''
+        }]
       })
-      this.types = res.detail
+      this.typesbefore = res.data
-    }, // 合并行
+      this.types = buildTree(res.data)
+    },
+    // 重置选择
+    resetSelect() {
+      this.select = {
+        page: 1,
+        year: this.$moment().format('YYYY'),
+        type: '',
+        typeName: '',
+        department: ''
+      }
+      this.checkArr = []
+      if (this.$refs.tree1) {
+        this.$refs.tree1.setCheckedKeys([])
+      }
+    },
+    // 合并行
     objectSpanMethod({
       row,
       column,
@@ -370,4 +463,87 @@ export default {
       z-index: 2;
     }
   }
+
+  ::v-deep .el-checkbox__input .el-checkbox__inner {
+    border-radius: 50%;
+  }
+</style>
+
+<style lang="scss">
+  // 预算类型树形选择器下拉框样式（全局样式，因为下拉框是挂载在 body 上的）
+  .budget-type-tree-select {
+    min-width: 320px !important;
+    
+    .el-select-dropdown__item {
+      height: auto;
+      padding: 0;
+      
+      &.is-disabled {
+        color: #606266;
+        cursor: default;
+        opacity: 1;
+        
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+    
+    // 树形结构样式优化
+    .el-tree {
+      background-color: transparent;
+      padding: 8px 0;
+      
+      .el-tree-node {
+        .el-tree-node__content {
+          height: 32px;
+          line-height: 32px;
+          padding: 0 8px;
+          margin-bottom: 2px;
+          
+          &:hover {
+            background-color: #f5f7fa;
+          }
+        }
+        
+        .el-tree-node__label {
+          font-size: 14px;
+          color: #606266;
+        }
+        
+        .el-checkbox {
+          margin-right: 8px;
+          
+          .el-checkbox__input {
+            .el-checkbox__inner {
+              width: 14px;
+              height: 14px;
+              
+              &::after {
+                height: 7px;
+                left: 4px;
+                width: 3px;
+              }
+            }
+          }
+        }
+        
+        &.is-checked {
+          .el-tree-node__label {
+            color: #409eff;
+            font-weight: 500;
+          }
+        }
+      }
+      
+      // 选中状态的样式
+      .el-tree-node.is-current > .el-tree-node__content {
+        background-color: #ecf5ff;
+        
+        .el-tree-node__label {
+          color: #409eff;
+        }
+      }
+    }
+  }
 </style>

src/views/statisticalReport/budgetProgress.vue

@@ -30,14 +30,29 @@
         <span style="padding: 0 6px;word-break: keep-all;">预算类型</span>
         <span>
           <el-select
-            v-model="select.type"
+            v-model="select.typeName"
             size="small"
             clearable
             placeholder="请选择预算类型"
-            type="date"
             style="width: 160px"
+            popper-class="budget-type-tree-select"
+            @change="changeType"
           >
-            <el-option v-for="item in type" :key="item.id" :value="item.id" :label="item.name" />
+            <el-option disabled value="" style="height:150px;overflow: scroll;">
+              <el-tree
+                ref="tree1"
+                style="width:300px"
+                default-expand-all
+                :default-checked-keys="checkArr"
+                :check-strictly="true"
+                :data="types"
+                show-checkbox
+                node-key="id"
+                highlight-current
+                :props="defaultProps"
+                @check="(data, node)=>{return getSelectedNodes(data,node,'tree1')}"
+              />
+            </el-option>
           </el-select>
         </span>
 
@@ -67,7 +82,7 @@
           type="primary"
           style="margin-left: 10px"
           ghost
-          @click="select = {pageIndex:1,year:'',type:'',department:'',name:''}"
+          @click="resetSelect"
         >重置</Button>
         <Button type="primary" style="margin-left: 10px" @click="getPlanProgress">查询</Button>
       </slot>
@@ -101,7 +116,8 @@ import {
   index as getPlanType
 } from '@/api/budget/plantype.js'
 import {
-  moneyFormatter
+  moneyFormatter,
+  buildTree
 } from '@/utils'
 import {
   mergeTableRow
@@ -110,13 +126,21 @@ import {
 export default {
   data() {
     return {
-      type: [], // 预算类型
+      type: [], // 预算类型（扁平数组）
+      types: [], // 预算类型（树形结构）
+      typesbefore: [], // 原始预算类型数据
+      checkArr: [], // 树形选择器选中的节点
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
       departments: [],
       select: {
         page_size:999,
         pageIndex: 1,
         year: '',
         type: '',
+        typeName: '', // 预算类型名称
         department: '',
         showDatePicker: '',
         start_created_at: '',
@@ -249,7 +273,21 @@ export default {
     await this.getDepartment()
 
     this.select.department = Number(this.$route.query.departmentId) || ''
-    this.select.type = Number(this.$route.query.type) || ''
+    const routeType = Number(this.$route.query.type) || ''
+    if (routeType) {
+      this.select.type = routeType
+      // 根据 type ID 查找对应的名称
+      const typeItem = this.typesbefore.find(item => item.id === routeType)
+      if (typeItem) {
+        this.select.typeName = typeItem.name
+        this.checkArr = [routeType]
+        this.$nextTick(() => {
+          if (this.$refs.tree1) {
+            this.$refs.tree1.setCheckedKeys([routeType])
+          }
+        })
+      }
+    }
 
     await this.getPlanProgress()
   },
@@ -335,6 +373,55 @@ export default {
         }]
       })
       this.type = res.data
+      this.typesbefore = res.data
+      this.types = buildTree(res.data)
+    },
+    changeType(e) {
+      if (!e) {
+        this.select.type = ''
+        this.select.typeName = ''
+        this.checkArr = []
+        if (this.$refs.tree1) {
+          this.$refs.tree1.setCheckedKeys([])
+        }
+      }
+    },
+    getSelectedNodes(data, node, ref) {
+      const ref_data = ref || 'tree1'
+      this.$refs[ref_data].setCheckedKeys([])
+      this.checkArr = []
+      if (data.children && data.children.length > 0) {
+        this.$Message.warning('当前节点不可选择')
+        this.select.type = ''
+        this.select.typeName = ''
+        this.$refs[ref_data].setCheckedKeys([])
+        return
+      }
+      this.$refs[ref_data].setCheckedKeys([]) // 删除所有选中节点
+      this.$refs[ref_data].setCheckedNodes([data]) // 选中已选中节点
+      this.select.type = data.id
+      this.select.typeName = data.name
+      this.checkArr = [data.id]
+      this.$forceUpdate()
+    },
+    resetSelect() {
+      this.select = {
+        pageIndex: 1,
+        year: '',
+        type: '',
+        typeName: '',
+        department: '',
+        showDatePicker: '',
+        start_created_at: '',
+        end_created_at: '',
+        sort_type: 'asc',
+        name: '',
+        page_size: 999
+      }
+      this.checkArr = []
+      if (this.$refs.tree1) {
+        this.$refs.tree1.setCheckedKeys([])
+      }
     },
     // 翻页
     pageChange(e) {
@@ -432,4 +519,87 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  ::v-deep .el-checkbox__input .el-checkbox__inner {
+    border-radius: 50%;
+  }
+</style>
+
+<style lang="scss" scoped>
+  // 预算类型树形选择器下拉框样式（全局样式，因为下拉框是挂载在 body 上的）
+
+  .budget-type-tree-select {
+    min-width: 320px !important;
+    
+    .el-select-dropdown__item {
+      height: auto;
+      padding: 0;
+      
+      &.is-disabled {
+        color: #606266;
+        cursor: default;
+        opacity: 1;
+        
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+    
+    // 树形结构样式优化
+    .el-tree {
+      background-color: transparent;
+      padding: 8px 0;
+      
+      .el-tree-node {
+        .el-tree-node__content {
+          height: 32px;
+          line-height: 32px;
+          padding: 0 8px;
+          margin-bottom: 2px;
+          
+          &:hover {
+            background-color: #f5f7fa;
+          }
+        }
+        
+        .el-tree-node__label {
+          font-size: 14px;
+          color: #606266;
+        }
+        
+        .el-checkbox {
+          margin-right: 8px;
+          
+          .el-checkbox__input {
+            .el-checkbox__inner {
+              width: 14px;
+              height: 14px;
+              
+              &::after {
+                height: 7px;
+                left: 4px;
+                width: 3px;
+              }
+            }
+          }
+        }
+        
+        &.is-checked {
+          .el-tree-node__label {
+            color: #409eff;
+            font-weight: 500;
+          }
+        }
+      }
+      
+      // 选中状态的样式
+      .el-tree-node.is-current > .el-tree-node__content {
+        background-color: #ecf5ff;
+        
+        .el-tree-node__label {
+          color: #409eff;
+        }
+      }
+    }
+  }
 </style>

src/views/statisticalReport/quarterlyStatistics.vue

@@ -10,7 +10,7 @@
         <span>
           <el-switch v-model="select.type" :active-value="1" :inactive-value="2" active-text="季度" inactive-text="月度" @change="getList" />
         </span>
-        <span style="padding: 0 6px;word-break: keep-all;">资金性质分类</span>
+        <!-- <span style="padding: 0 6px;word-break: keep-all;">资金性质分类</span>
         <span>
           <Select
             v-model="select.parameter_detail_id"
@@ -22,7 +22,7 @@
               item.name
             }}</Option> 
           </Select>
-        </span>
+        </span> -->
         <span style="padding: 0 6px;word-break: keep-all;">年份</span>
         <span>
           <DatePicker