|
|
|
@ -1,240 +1,252 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<xy-dialog
|
|
|
|
<xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增实际使用金额' : '编辑实际使用金额'"
|
|
|
|
ref="dialog"
|
|
|
|
:form="form" :rules="rules" @submit="submit">
|
|
|
|
:is-show.sync="isShow"
|
|
|
|
<template v-slot:reason>
|
|
|
|
type="form"
|
|
|
|
<div class="xy-table-item">
|
|
|
|
:title="type === 'add' ? '新增实际使用金额' : '编辑实际使用金额'"
|
|
|
|
<div class="xy-table-item-label"><span style="color: red; font-weight: 600; padding-right: 4px">*</span>事由：
|
|
|
|
:form="form"
|
|
|
|
</div>
|
|
|
|
:rules="rules"
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
@submit="submit"
|
|
|
|
<el-input v-model="form.reason" clearable placeholder="请输入事由" style="width: 300px"></el-input>
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<template v-slot:plan_id>
|
|
|
|
<template v-slot:plan_id>
|
|
|
|
<div class="xy-table-item">
|
|
|
|
<div class="xy-table-item">
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
<span style="color: red; font-weight: 600; padding-right: 4px"
|
|
|
|
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
|
|
|
|
>*</span
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
资金来源：
|
|
|
|
资金来源：
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
<div class="planTitle" @click="$refs.actualPicker.isShow=true">{{form.plan_title}}</div>
|
|
|
|
<div class="planTitle" @click="$refs.actualPicker.isShow=true">{{form.plan_title}}</div>
|
|
|
|
<!-- <el-input
|
|
|
|
|
|
|
|
v-model="form.plan_title"
|
|
|
|
|
|
|
|
disabled
|
|
|
|
|
|
|
|
clearable
|
|
|
|
|
|
|
|
placeholder="请输入备注"
|
|
|
|
|
|
|
|
style="width: 300px"
|
|
|
|
|
|
|
|
@click="$refs.actualPicker.isShow=true"
|
|
|
|
|
|
|
|
></el-input> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:use_money>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:money>
|
|
|
|
<div class="xy-table-item">
|
|
|
|
<div class="xy-table-item">
|
|
|
|
<div class="xy-table-item-label"><span style="color: red; font-weight: 600; padding-right: 4px"
|
|
|
|
<div class="xy-table-item-label"><span style="color: red; font-weight: 600; padding-right: 4px">*</span>金额：
|
|
|
|
>*</span
|
|
|
|
</div>
|
|
|
|
>使用金额 ：</div>
|
|
|
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
<el-input
|
|
|
|
<el-input v-model="form.money" clearable placeholder="请输入金额" style="width: 300px"></el-input>
|
|
|
|
v-model="form.use_money"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
clearable
|
|
|
|
|
|
|
|
placeholder="请输入备注"
|
|
|
|
|
|
|
|
style="width: 300px"
|
|
|
|
|
|
|
|
></el-input>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <template v-slot:use_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">
|
|
|
|
|
|
|
|
<el-input v-model="form.use_money" clearable placeholder="请输入已使用金额" style="width: 300px"></el-input>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template> -->
|
|
|
|
</xy-dialog>
|
|
|
|
</xy-dialog>
|
|
|
|
<actualPicker ref="actualPicker" @refresh="getPlanId"></actualPicker>
|
|
|
|
<actualPicker ref="actualPicker" @refresh="getPlanId"></actualPicker>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { editorActual, detailActual } from "@/api/budget/actual";
|
|
|
|
import {
|
|
|
|
import actualPicker from "@/components/PlanPicker/actualPicker.vue"
|
|
|
|
editorActual,
|
|
|
|
export default {
|
|
|
|
detailActual
|
|
|
|
components:{
|
|
|
|
} from "@/api/budget/actual";
|
|
|
|
actualPicker
|
|
|
|
import actualPicker from "@/components/PlanPicker/actualPicker.vue"
|
|
|
|
},
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
components: {
|
|
|
|
return {
|
|
|
|
actualPicker
|
|
|
|
isShow: false,
|
|
|
|
},
|
|
|
|
id: "",
|
|
|
|
data() {
|
|
|
|
type: "",
|
|
|
|
return {
|
|
|
|
form: {
|
|
|
|
isShow: false,
|
|
|
|
plan_id:'',
|
|
|
|
id: "",
|
|
|
|
use_money:'',
|
|
|
|
type: "",
|
|
|
|
plan_title:''
|
|
|
|
form: {
|
|
|
|
},
|
|
|
|
reason: '',
|
|
|
|
rules: {
|
|
|
|
plan_id: '',
|
|
|
|
plan_id: [
|
|
|
|
money: '',
|
|
|
|
{
|
|
|
|
// use_money: '',
|
|
|
|
|
|
|
|
plan_title: ''
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
rules: {
|
|
|
|
|
|
|
|
reason: [{
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
message: "请填写事由",
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
plan_id: [{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
message: "请选择资金来源",
|
|
|
|
message: "请选择资金来源",
|
|
|
|
},
|
|
|
|
}],
|
|
|
|
],
|
|
|
|
money:[{
|
|
|
|
use_money: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
message: "请填写使用金额",
|
|
|
|
message: "请填写金额",
|
|
|
|
},
|
|
|
|
}],
|
|
|
|
],
|
|
|
|
// use_money: [{
|
|
|
|
},
|
|
|
|
// required: true,
|
|
|
|
};
|
|
|
|
// message: "请填写已使用金额",
|
|
|
|
},
|
|
|
|
// }],
|
|
|
|
methods: {
|
|
|
|
},
|
|
|
|
show() {
|
|
|
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
hidden() {
|
|
|
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
init() {
|
|
|
|
|
|
|
|
this.form = {
|
|
|
|
|
|
|
|
plan_id:'',
|
|
|
|
|
|
|
|
use_money:''
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
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() {
|
|
|
|
|
|
|
|
const res = await detailActual({ id: this.id });
|
|
|
|
|
|
|
|
this.$integrateData(this.form, res);
|
|
|
|
|
|
|
|
this.form.plan_title = res.plan?res.plan.name:''
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getPlanId(e){
|
|
|
|
methods: {
|
|
|
|
console.log("e",e)
|
|
|
|
show() {
|
|
|
|
this.form.plan_id = e.plan_id?e.plan_id:''
|
|
|
|
this.isShow = true;
|
|
|
|
this.form.plan_title = e.plan_title?e.plan_title:''
|
|
|
|
},
|
|
|
|
},
|
|
|
|
hidden() {
|
|
|
|
submit() {
|
|
|
|
this.isShow = false;
|
|
|
|
if (this.type === "add") {
|
|
|
|
},
|
|
|
|
if (this.form.hasOwnProperty("id")) {
|
|
|
|
init() {
|
|
|
|
delete this.form.id;
|
|
|
|
this.form = {
|
|
|
|
|
|
|
|
reason: '',
|
|
|
|
|
|
|
|
plan_id: '',
|
|
|
|
|
|
|
|
money:'',
|
|
|
|
|
|
|
|
// use_money: '',
|
|
|
|
|
|
|
|
plan_title: ''
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
setForm(key = [], value = []) {
|
|
|
|
|
|
|
|
if (key instanceof Array) {
|
|
|
|
|
|
|
|
key.forEach((key, index) => {
|
|
|
|
|
|
|
|
this.form[key] = value[index] ?? "";
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (typeof key === "string") {
|
|
|
|
if (this.type === "editor") {
|
|
|
|
this.form[key] = value;
|
|
|
|
Object.defineProperty(this.form, "id", {
|
|
|
|
}
|
|
|
|
value: this.id,
|
|
|
|
if (!key) {
|
|
|
|
enumerable: true,
|
|
|
|
this.init();
|
|
|
|
configurable: true,
|
|
|
|
}
|
|
|
|
writable: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
async getDetail() {
|
|
|
|
|
|
|
|
const res = await detailActual({
|
|
|
|
|
|
|
|
id: this.id
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.$integrateData(this.form, res);
|
|
|
|
editorActual(this.form).then((res) => {
|
|
|
|
this.form.plan_title = res.plan ? res.plan.name : ''
|
|
|
|
this.$message({
|
|
|
|
},
|
|
|
|
type: "success",
|
|
|
|
getPlanId(e) {
|
|
|
|
message:
|
|
|
|
console.log("e", e)
|
|
|
|
this.type === "add"
|
|
|
|
this.form.plan_id = e.plan_id ? e.plan_id : ''
|
|
|
|
? "新增实际使用金额"
|
|
|
|
this.form.plan_title = e.plan_title ? e.plan_title : ''
|
|
|
|
: "编辑实际使用金额" + "成功",
|
|
|
|
},
|
|
|
|
|
|
|
|
submit() {
|
|
|
|
|
|
|
|
if (this.type === "add") {
|
|
|
|
|
|
|
|
if (this.form.hasOwnProperty("id")) {
|
|
|
|
|
|
|
|
delete this.form.id;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.type === "editor") {
|
|
|
|
|
|
|
|
Object.defineProperty(this.form, "id", {
|
|
|
|
|
|
|
|
value: this.id,
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
configurable: true,
|
|
|
|
|
|
|
|
writable: true,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
editorActual(this.form).then((res) => {
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
|
|
message: this.type === "add" ?
|
|
|
|
|
|
|
|
"新增资金调节记录" :
|
|
|
|
|
|
|
|
"编辑资金调节记录" + "成功",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
|
|
|
this.$emit("refresh");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.isShow = false;
|
|
|
|
},
|
|
|
|
this.$emit("refresh");
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
isShow(val) {
|
|
|
|
isShow(val) {
|
|
|
|
if (val) {
|
|
|
|
if (val) {
|
|
|
|
if (this.type === "editor") {
|
|
|
|
if (this.type === "editor") {
|
|
|
|
this.getDetail();
|
|
|
|
this.getDetail();
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.id = "";
|
|
|
|
|
|
|
|
this.type = "";
|
|
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
|
|
|
|
|
delete this.form.id;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
},
|
|
|
|
this.id = "";
|
|
|
|
|
|
|
|
this.type = "";
|
|
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
|
|
this.$refs["dialog"].clearValidate();
|
|
|
|
|
|
|
|
delete this.form.id;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.xy-table-item-label{
|
|
|
|
.xy-table-item-label {
|
|
|
|
width: 180px;
|
|
|
|
width: 180px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
|
|
|
text-align: left;
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
}
|
|
|
|
text-align: left;
|
|
|
|
::v-deep .planTitle{
|
|
|
|
}
|
|
|
|
width:300px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
::v-deep .planTitle {
|
|
|
|
background-color: #FFF;
|
|
|
|
width: 300px;
|
|
|
|
background-image: none;
|
|
|
|
display: flex;
|
|
|
|
border-radius: 4px;
|
|
|
|
background-color: #FFF;
|
|
|
|
border: 1px solid #DCDFE6;
|
|
|
|
background-image: none;
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
border-radius: 4px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: 1px solid #DCDFE6;
|
|
|
|
color: #606266;
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
display: inline-block;
|
|
|
|
box-sizing: border-box;
|
|
|
|
font-size: inherit;
|
|
|
|
color: #606266;
|
|
|
|
height: 40px;
|
|
|
|
display: inline-block;
|
|
|
|
line-height: 40px;
|
|
|
|
font-size: inherit;
|
|
|
|
outline: 0;
|
|
|
|
height: 40px;
|
|
|
|
padding: 0 15px;
|
|
|
|
line-height: 40px;
|
|
|
|
}
|
|
|
|
outline: 0;
|
|
|
|
.img__delete {
|
|
|
|
padding: 0 15px;
|
|
|
|
transform: scale(0.8, 0.8);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.img__delete {
|
|
|
|
|
|
|
|
transform: scale(0.8, 0.8);
|
|
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 4px;
|
|
|
|
top: 4px;
|
|
|
|
right: 4px;
|
|
|
|
right: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader .el-upload {
|
|
|
|
::v-deep .avatar-uploader .el-upload {
|
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
|
border-radius: 6px;
|
|
|
|
border-radius: 6px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader .el-upload:hover {
|
|
|
|
::v-deep .avatar-uploader .el-upload:hover {
|
|
|
|
border-color: #338de3;
|
|
|
|
border-color: #338de3;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
|
font-size: 28px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #8c939d;
|
|
|
|
color: #8c939d;
|
|
|
|
width: 80px !important;
|
|
|
|
width: 80px !important;
|
|
|
|
height: 80px !important;
|
|
|
|
height: 80px !important;
|
|
|
|
line-height: 80px !important;
|
|
|
|
line-height: 80px !important;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader-icon {
|
|
|
|
::v-deep .avatar-uploader-icon {
|
|
|
|
font-size: 28px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #8c939d;
|
|
|
|
color: #8c939d;
|
|
|
|
width: 80px !important;
|
|
|
|
width: 80px !important;
|
|
|
|
height: 80px !important;
|
|
|
|
height: 80px !important;
|
|
|
|
line-height: 80px !important;
|
|
|
|
line-height: 80px !important;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar {
|
|
|
|
::v-deep .avatar {
|
|
|
|
width: 80px !important;
|
|
|
|
width: 80px !important;
|
|
|
|
display: block;
|
|
|
|
display: block;
|
|
|
|
border-radius: 6px;
|
|
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
