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.

383 lines
9.4 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<xy-dialog
ref="dialog"
:is-show.sync="isShow"
type="form"
title="付款计划"
:form="form"
@reset="getDetail"
@submit="submit"
>
<template v-slot:plan_id>
<div class="xy-table-item">
<div class="xy-table-item-label">项目 </div>
<div class="xy-table-item-content">
<el-input
readonly
:value="rowName"
clearable
placeholder="请输入项目"
style="width: 300px"
></el-input>
</div>
</div>
</template>
<template #item_list>
<el-button
icon="el-icon-plus"
type="primary"
size="small"
@click="
formList.push({
plan_id: id,
paid_money: 0,
remark: '',
paid_plan_date: '',
})
"
>新增</el-button
>
<xy-table
style="margin-top: 20px"
:height="320"
:table-item="itemTable"
:list="formList"
>
<template #btns> </template>
</xy-table>
</template>
</xy-dialog>
</div>
</template>
<script>
import { paidSave, paidIndex, paidStore, paidDestroy } from "@/api/budget/budget"
import { statistic } from "@/api/dashboard/notice";
export default {
props: {},
data() {
return {
rowType: "",
typeList: [],
plan_department_id: "",
isShow: false,
id: "",
type: "",
itemTable: [
{
prop: "paid_money",
label: "付款金额",
width: 180,
sortable: false,
customFn: (row) => {
return (
<el-input-number
precision={2}
controls={false}
placeholder="付款金额"
style="width: 100%;"
v-model={row.paid_money}
size="small"
clearable={true}
on={{
['change']:e => {
if (row.id) {
this.editId.push(row.id)
}
}
}}
></el-input-number>
);
},
},
{
prop: "paid_plan_date",
label: "年份-月份",
sortable: false,
width: 140,
customFn: (row) => {
return (
<el-date-picker
type="month"
placeholder="年份-月份"
style="width: 100%;"
value-format="yyyy-MM"
v-model={row.paid_plan_date}
size="mini"
clearable={true}
on={{
['change']:e => {
if (row.id) {
this.editId.push(row.id)
}
}
}}
></el-date-picker>
);
},
},
{
prop: "remark",
label: "备注",
sortable: false,
minWidth: 200,
customFn: (row) => {
return (
<el-input
v-model={row.remark}
placeholder="备注"
style="width: 100%;"
size="mini"
clearable={true}
on={{
['change']:e => {
if (row.id) {
this.editId.push(row.id)
}
}
}}
></el-input>
);
},
},
{
label: "操作",
width: 180,
align: "left",
sortable: false,
customFn: (row, scope) => {
return (
<Poptip
confirm={true}
transfer={true}
placement="bottom"
title="确认要删除吗"
on={{
["on-ok"]: (_) => {
if (!row.id) {
this.formList.splice(scope.$index, 1);
} else {
paidDestroy({
id: row.id
}).then(res => {
this.$message({
type: 'success',
message: '删除成功'
})
this.getDetail();
})
}
},
}}
>
<Button
style="margin-left: 4px;"
ghost
size="small"
type="error"
>
删除
</Button>
</Poptip>
);
},
},
],
rowName: "",
formList: [],
editId: [],
form: {
plan_id: "",
item_list: [],
},
};
},
methods: {
show() {
this.isShow = true;
},
hidden() {
this.isShow = false;
},
init() {
for (let key in this.form) {
if (this.form[key] instanceof Array) {
this.form[key] = [];
} else {
this.form[key] = "";
}
}
this.$refs["dialog"].clearValidate();
},
setId(id) {
if (typeof id == "number") {
this.id = id;
} else {
console.error("error typeof id: " + typeof id);
}
},
getId() {
return this.id;
},
setType(type = "add") {
let types = ["add", "editor"];
if (types.includes(type)) {
this.type = type;
} else {
console.warn("Unknown type: " + type);
}
},
setForm(key = [], value = []) {
if (key instanceof Array) {
key.forEach((key, index) => {
this.form[key] = value[index] ?? "";
});
}
if (typeof key === "string") {
this.form[key] = value;
}
if (!key) {
this.init();
}
},
async getDetail() {
let res = await paidIndex({
plan_id: this.id
})
this.formList = res.data;
},
submit() {
for(let i = 0;i < this.formList.length;i++) {
if (!this.formList[i]?.paid_plan_date || !this.formList[i]?.paid_money) {
this.$message({
type: 'warning',
message: `${i+1}条金额或日期未填写`
})
return
}
let month = this.formList[i]?.paid_plan_date.split('-')[1];
if (month == 11 || month == 12) {
const data = this.typeList.find(i => i.type === this.rowType)
if (data) {
let department = data.departments?.find(i => i.department_id === this.plan_department_id)
let m2 = department.money_total_2;
let m1 = department.money_total_1;
let m3 = department.use_money_total;
let per = 0;
if (m2 != 0) {
per = ((m3 / m2) * 100).toFixed(2);
} else if (m1 != 0) {
per = ((m3 / m1) * 100).toFixed(2);
}
console.log(per,'per')
if (per < 85) {
this.$message({
type: "warning",
message: `责任科室执行率未达到85%,当前计划${data.type_text}进展率为${per}%`,
duration: 3000
})
return
}
}
}
}
let editIds = Array.from(new Set(this.editId))
let promiseAll = [];
editIds.forEach(id => {
promiseAll.push(paidSave(this.formList.find(i => i.id === id)))
})
for (let i = 0;i < this.formList.length;i++) {
if (!this.formList[i].id) {
promiseAll.push(paidStore(this.formList[i]))
}
}
if (promiseAll.length > 0) {
Promise.all(promiseAll).then(res => {
this.$message({
type: 'success',
message: '保存成功'
})
this.hidden();
})
}
},
getPer(row) {
let m2 = row.money_total_2;
let m1 = row.money_total_1;
let m3 = row.use_money_total;
let per = 0;
if (m2 != 0) {
per = ((m3 / m2) * 100).toFixed(2);
} else if (m1 != 0) {
per = ((m3 / m1) * 100).toFixed(2);
}
return per;
},
async getStatistic() {
const res = await statistic({
year: this.$parent.select.year
},true);
if (res.typeList) {
let arr = [];
for (let i = 0; i < res.typeList.length; i++) {
if (res.typeList[i]) {
res.typeList[i].per = this.getPer(res.typeList[i]);
arr.push(res.typeList[i])
}
}
this.typeList = arr;
}
//this.split = Array.from({ length: Math.ceil(this.typeList/2) },() => 0.5)
console.log(123, this.typeList);
},
},
watch: {
isShow(val) {
if (val) {
this.getStatistic()
this.getDetail();
} else {
this.id = "";
this.type = "";
this.rowName = "";
this.init();
this.formList = [];
this.editId = [];
this.$refs["dialog"].clearValidate();
delete this.form.id;
}
},
},
created() {},
mounted() {
}
};
</script>
<style scoped lang="scss">
::v-deep .el-input__inner {
text-align: left;
}
.xy-table-item-label {
width: 150px;
}
.select {
margin-bottom: 10px;
& > * {
margin-left: 6px;
}
}
</style>