|
|
|
|
@ -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>
|
|
|
|
|
<Option v-for="item in types" :key="item.id" :value="item.id">{{ item.value }}</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="select.typeName"
|
|
|
|
|
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({
|
|
|
|
|
number: 'money_way'
|
|
|
|
|
const res = await getPlanType({
|
|
|
|
|
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>
|
|
|
|
|
|
