master
刘翔宇-旅管家
4 years ago
parent
efdf1e21dd
commit
29747d36ac
@ -1,266 +1,307 @@
|
||||
<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>
|
||||
<Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
|
||||
<Option v-for="item in types" :value="item.id" :key="item.id">{{ item.value }}</Option>
|
||||
</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" @click="getBudgets">查询</Button>
|
||||
<Button type="primary" style="margin-left: 10px" @click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
|
||||
</div>
|
||||
</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 {getBudget,detailBudget} from "@/api/budget/budget"
|
||||
import {listdeptNoAuth} from "@/api/system/department"
|
||||
import {getparameter} from '@/api/system/dictionary'
|
||||
import {moneyFormatter, parseTime} from "@/utils"
|
||||
export default {
|
||||
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,
|
||||
table:[
|
||||
{
|
||||
label:"项目名称",
|
||||
prop:'name',
|
||||
width: 200,
|
||||
align:'left',
|
||||
sortable:false,
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
label:"预算类型",
|
||||
prop:'type',
|
||||
width:115,
|
||||
formatter: (cell, data, value) => {
|
||||
let res = this.types.filter(item => {
|
||||
return item.id === value
|
||||
})
|
||||
return res[0]?.value || '未知'
|
||||
}
|
||||
},
|
||||
{
|
||||
label:"所属年份",
|
||||
prop:'year',
|
||||
width: 105
|
||||
},
|
||||
{
|
||||
label: "相关科室",
|
||||
prop:'plan_department.name',
|
||||
width: 110
|
||||
},
|
||||
{
|
||||
label:'项目金额（元）',
|
||||
prop:'money',
|
||||
align:'right',
|
||||
width: 160,
|
||||
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:"描述",
|
||||
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
|
||||
},
|
||||
|
||||
//合计
|
||||
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
|
||||
},
|
||||
|
||||
//翻页
|
||||
pageChange(e){
|
||||
this.pageIndex = e
|
||||
this.getBudgets()
|
||||
},
|
||||
//获取科室
|
||||
getDepartment(){
|
||||
listdeptNoAuth().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.list.data
|
||||
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;
|
||||
}
|
||||
}
|
||||
<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>
|
||||
<Select placeholder="选择预算类型" v-model="select.type" style="width:130px;" clearable>
|
||||
<Option v-for="item in types" :value="item.id" :key="item.id">{{ item.value }}</Option>
|
||||
</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" @click="getBudgets">查询</Button>
|
||||
<Button type="primary" style="margin-left: 10px"
|
||||
@click="()=>select={page:1,year:'', type:'', department:''}">重置</Button>
|
||||
</div>
|
||||
</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 {
|
||||
getBudget,
|
||||
detailBudget
|
||||
} from "@/api/budget/budget"
|
||||
import {
|
||||
listdeptNoAuth
|
||||
} from "@/api/system/department"
|
||||
import {
|
||||
getparameter
|
||||
} from '@/api/system/dictionary'
|
||||
import {
|
||||
moneyFormatter,
|
||||
parseTime
|
||||
} from "@/utils"
|
||||
export default {
|
||||
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,
|
||||
table: [{
|
||||
label: "项目名称",
|
||||
prop: 'name',
|
||||
width: 200,
|
||||
align: 'left',
|
||||
sortable: false,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
label: "预算类型",
|
||||
prop: 'type',
|
||||
width: 115,
|
||||
formatter: (cell, data, value) => {
|
||||
let res = this.types.filter(item => {
|
||||
return item.id === value
|
||||
})
|
||||
return res[0]?.value || '未知'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "所属年份",
|
||||
prop: 'year',
|
||||
width: 105
|
||||
},
|
||||
{
|
||||
label: "相关科室",
|
||||
prop: 'plan_department.name',
|
||||
width: 110
|
||||
},
|
||||
{
|
||||
label: '年初预算金额（元）',
|
||||
prop: 'money',
|
||||
align: 'right',
|
||||
width: 180,
|
||||
formatter: (cell, data, value) => {
|
||||
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: "描述",
|
||||
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
|
||||
},
|
||||
|
||||
//合计
|
||||
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
|
||||
},
|
||||
|
||||
//翻页
|
||||
pageChange(e) {
|
||||
this.pageIndex = e
|
||||
this.getBudgets()
|
||||
},
|
||||
//获取科室
|
||||
getDepartment() {
|
||||
listdeptNoAuth().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.list.data
|
||||
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>
|
||||
|
||||
Loading…
Reference in new issue