You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
460 lines
15 KiB
460 lines
15 KiB
<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></DatePicker>
|
|
</span>
|
|
|
|
<span style="padding: 0 6px;">
|
|
预算类型
|
|
</span>
|
|
<span>
|
|
<Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
|
|
<Option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
</span>
|
|
|
|
<span style="padding: 0 6px;">
|
|
科室
|
|
</span>
|
|
<span>
|
|
<el-cascader
|
|
placeholder="选择科室"
|
|
size="small"
|
|
:value="select.department"
|
|
style="width: 160px;"
|
|
:options="departments"
|
|
:props="{ checkStrictly: true, label: 'name', value: 'id' }"
|
|
clearable
|
|
@change="e => select.department = e[e.length-1] || ''"/>
|
|
</span>
|
|
<Button type="primary" style="margin-left: 10px" @click="isShowAdd = true,getDepartment()">新增</Button>
|
|
<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 :table-item="table" :list="list" @delete="deleteTable" @editor="showEditor"></xy-table>
|
|
|
|
<div style="display: flex;justify-content: flex-end;">
|
|
<Page :total="total" show-elevator @on-change="pageChange"/>
|
|
</div>
|
|
|
|
<!-- 新增-->
|
|
<xy-dialog :is-show.sync="isShowAdd" type="form" :form="form" title="新增计划" :rules="rules" @submit="submit" ref="addBudget">
|
|
<template v-slot:name>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable placeholder="请填写项目名称" v-model="form.name" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:type>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-select clearable placeholder="请选择预算类型" v-model="form.type" style="width: 300px;">
|
|
<el-option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:year>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-datePicker value-format="yyyy" clearable placeholder="请选择所属年份" type="year" placement="bottom" v-model="form.year" style="width: 300px;"></el-datePicker>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:department>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>科室
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-cascader
|
|
:value="form.department"
|
|
style="width: 300px;"
|
|
:options="departments"
|
|
:props="{ checkStrictly: true, label: 'name', value: 'id' }"
|
|
clearable
|
|
@change="e => form.department = e[e.length-1] || ''"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable type="textarea" placeholder="请填写内容" v-model="form.content" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:money>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
|
|
</div>
|
|
<div class="xy-table-item-content xy-table-item-price">
|
|
<el-input clearable placeholder="请填写金额" v-model="form.money" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:remark>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>备注
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable placeholder="请填写备注" type="textarea" v-model="form.remark" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</xy-dialog>
|
|
|
|
<!-- 编辑-->
|
|
<xy-dialog title="编辑" type="form" :is-show.sync="isShowEditor" :form="editorForm" :rules="rules" ref="editorDialog">
|
|
<template v-slot:name>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable placeholder="请填写项目名称" v-model="editorForm.name" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:type>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预算类型
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-select placeholder="请选择预算类型" v-model="editorForm.type" style="width: 300px;" clearable>
|
|
<el-option v-for="item in [{label:'部门预算',value:1},{label:'水务计划',value:2}]" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:year>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目所属年份
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-datePicker clearable value-format="yyyy" placeholder="请选择所属年份" type="year" placement="bottom" v-model="editorForm.year" style="width: 300px;"></el-datePicker>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:department>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>科室
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-cascader
|
|
size="small"
|
|
:value="editorForm.department"
|
|
style="width: 300px;"
|
|
:options="departments"
|
|
:props="{ checkStrictly: true, label: 'name', value: 'id' }"
|
|
clearable
|
|
@change="e => editorForm.department = e[e.length-1] || ''"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable type="textarea" placeholder="请填写内容" v-model="editorForm.content" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:money>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
|
|
</div>
|
|
<div class="xy-table-item-content xy-table-item-price">
|
|
<el-input clearable placeholder="请填写金额" v-model="editorForm.money" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:remark>
|
|
<div class="xy-table-item">
|
|
<div class="xy-table-item-label">
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>备注
|
|
</div>
|
|
<div class="xy-table-item-content">
|
|
<el-input clearable placeholder="请填写备注" type="textarea" v-model="editorForm.remark" style="width: 300px;"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footerContent>
|
|
<Button type="primary" @click="editorTable">确定</Button>
|
|
</template>
|
|
</xy-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {addBudget,getBudget,delBudget,editorBudget,detailBudget} from "@/api/budget/budget"
|
|
import {listdept} from "@/api/system/department"
|
|
import {Message} from "element-ui";
|
|
import {parseTime} from "@/utils"
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShowAdd:false,
|
|
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:"必填项"}
|
|
],
|
|
content:[
|
|
{required:true,message:"必填项"}
|
|
],
|
|
remark:[
|
|
{required:true,message:"必填项"}
|
|
]
|
|
},
|
|
list:[],
|
|
total:0,
|
|
pageIndex:1,
|
|
table:[
|
|
{
|
|
label:"预算类型",
|
|
prop:'type',
|
|
width:120,
|
|
formatter:(cell,data,value)=>{
|
|
switch (value){
|
|
case 1:
|
|
return "部门预算"
|
|
break;
|
|
case 2:
|
|
return "水务计划"
|
|
break;
|
|
default:
|
|
return "未知"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label:"项目名称",
|
|
prop:'name',
|
|
width: 200,
|
|
align:'left',
|
|
sortable:false
|
|
},
|
|
{
|
|
label:"所属年份",
|
|
prop:'year',
|
|
width: 120
|
|
},
|
|
{
|
|
label: "相关科室",
|
|
prop:'plan_department.name',
|
|
width: 180
|
|
},
|
|
{
|
|
label:'金额',
|
|
prop:'money',
|
|
align:'right',
|
|
width: 160
|
|
},
|
|
{
|
|
label:"描述",
|
|
prop:'content',
|
|
align:'left',
|
|
sortable:false
|
|
},
|
|
{
|
|
label:"创建信息",
|
|
prop:'created_at',
|
|
width: 200,
|
|
formatter:(cell,data,value)=>{
|
|
return parseTime(new Date(value))
|
|
}
|
|
}
|
|
],
|
|
select:{
|
|
page:1,
|
|
year:"",
|
|
type:"",
|
|
department:""
|
|
},
|
|
departments:[],//部门类型
|
|
|
|
//编辑信息
|
|
isShowEditor:false,
|
|
editorForm:{},
|
|
}
|
|
},
|
|
methods: {
|
|
//翻页
|
|
pageChange(e){
|
|
this.pageIndex = e
|
|
this.getBudgets()
|
|
},
|
|
//获取科室
|
|
getDepartment(){
|
|
listdept().then(res=>{
|
|
this.departments = res
|
|
})
|
|
},
|
|
//查询计划列表
|
|
getBudgets(){
|
|
getBudget({
|
|
page_size:10,
|
|
page:this.pageIndex,
|
|
year:this.select.year,
|
|
type:this.select.type,
|
|
plan_department_id:this.select.department
|
|
}).then(res=>{
|
|
this.list = res.data
|
|
this.total = res.total
|
|
})
|
|
},
|
|
//新增提交
|
|
submit(){
|
|
addBudget({
|
|
name:this.form.name,
|
|
type:this.form.type,
|
|
year:this.form.year,
|
|
content:this.form.content,
|
|
money:this.form.money,
|
|
plan_department_id:this.form.department,
|
|
remark:this.form.remark
|
|
}).then(res=>{
|
|
Message({
|
|
message:'操作成功',
|
|
type:'success'
|
|
})
|
|
this.isShowAdd = false
|
|
this.$refs["addBudget"].reset()
|
|
this.getBudgets()
|
|
})
|
|
},
|
|
//删除
|
|
deleteTable(e){
|
|
delBudget({id:e.id}).then(res=>{
|
|
Message({
|
|
message:'操作成功',
|
|
type:'success'
|
|
})
|
|
this.getBudgets()
|
|
})
|
|
},
|
|
|
|
//修改
|
|
editorTable(){
|
|
this.$refs['editorDialog'].$refs['elForm'].validate().then(res=>{
|
|
editorBudget({
|
|
id:this.editorForm.id,
|
|
name:this.editorForm.name,
|
|
type:this.editorForm.type,
|
|
year:this.editorForm.year,
|
|
content:this.editorForm.content,
|
|
money:this.editorForm.money,
|
|
remark:this.editorForm.remark,
|
|
plan_department_id:this.editorForm.department
|
|
}).then(res=>{
|
|
this.isShowEditor = false
|
|
Message({
|
|
message:'操作成功',
|
|
type:'success'
|
|
})
|
|
this.getBudgets()
|
|
})
|
|
}).catch(err=>{
|
|
this.$message({
|
|
message:'请填写完整信息',
|
|
type:'error'
|
|
})
|
|
})
|
|
},
|
|
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)
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
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>
|