YZProjectCloud/yanzhu-ui-vue3/src/views/manage/costOutput/costMonth.vue

83 lines
3.0 KiB
Vue

<template>
<div class="cost-month" style="border:solid 1px #409eff;margin: 12px 0px;padding: 6px 12px 0px;position: relative;">
<el-popover placement="top" :visible="data.showPop2" ref="pop" width="300px">
<p>选择年份</p>
<div style="margin-bottom: 12px;">
<el-date-picker v-model="data.selYear" type="year" placeholder="选择年份" style="width:100%"
:picker-options="{ disabledDate: doPick }">
</el-date-picker>
</div>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="data.showPop2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="doAddYear">确定</el-button>
</div>
<template #reference>
<el-button size="mini" type="success" @click="data.showPop2=true" style="margin-right: 12px;" class="btn-add-year" round>增加年份</el-button>
</template>
</el-popover>
<el-tabs type="card" v-model="data.activeName">
<el-tab-pane v-for="(it, idx) in data.monthInv" :label="'' + it.year" :name="'' + it.year" :key="idx">
<el-row>
<el-col v-for="(item, idxx) in it.value" :key="idxx" :span="12">
<el-form-item :label="data.names[item.month]" class="w200" :class="item.money * 1 < 0 ? 'txt-error' : ''">
<el-input-number :precision="2" v-model="item.money" placeholder="年度投资">
</el-input-number>
<span class="sp-unit">万元</span>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
import {addMonthInvestment} from '@/api/manage/costOutput.js'
const { proxy } = getCurrentInstance();
const $emit=defineEmits(["success"])
const data = reactive({
prj: null,
selYear: '',
names: ['', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
activeName: '',
monthInv: [],
showPop2: false,
})
function doPick(a, b) {
return data.monthInv.filter(d => d.year == a.getFullYear()).length > 0;
}
function doAddYear() {
addMonthInvestment({comId:data.prj.comId,
year:proxy.$dt(data.selYear).$y,
projectId:data.prj.id,
costType:9
}).then(d=>{
$emit("success");
data.showPop2=false;
});
}
function init(d, prj) {
data.monthInv = d;
data.prj = prj;
if (d.filter(it => it.year == new Date().getFullYear()).length > 0) {
data.activeName = "" + new Date().getFullYear()
} else {
if (d.length > 0) {
data.activeName = "" + d[0].year;
}
}
}
defineExpose({
init
})
</script>
<style lang="scss">
.cost-month{
.btn-add-year{
position: absolute;
right: 0px;
z-index: 9;
}
}
</style>