Files
JY1.0/src/views/MarketingCenter/SafetyMargin/index.vue
2018-11-08 08:39:42 +08:00

669 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<!--顶栏结构-->
<el-card>
<el-radio v-model="radio" label="1">未收回</el-radio>
<el-radio v-model="radio" label="2">已收回</el-radio>
<span style="margin-left: 20px">项目名称</span>
<el-select v-model="entryNameValue" clearable filterable placeholder="项目名称:" size="small" style="margin-left: 10px">
<el-option
v-for="item in entryName"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-button type="success" icon="el-icon-search" size="small" style="margin-left: 10px" @click="pageSize = 10;PageCurrent = 1;fetchTableData1()">查询</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" style="margin-left: 10px;margin-right: 15px" @click="addSafetyMargin();flag1 = 1">增加</el-button>
<span>预警颜色说明</span>
<el-tag type="info">未到时间</el-tag>
<el-tag type="warning">即将拖期</el-tag>
<el-tag type="danger">已拖期</el-tag>
<el-tag type="success">已收回</el-tag>
</el-card>
<!--安全保证金表格-->
<el-card>
<el-table
v-loading="tableData1Loading"
:row-style="tableRowClassName"
:data="tableData1"
style="width: 100%"
height="400"
border
@row-click="fetchTableData2">
<el-table-column align="center" label="项目名称" width="300">
<template slot-scope="scope">
{{ scope.row.项目名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="交付日期" width="100">
<template slot-scope="scope">
{{ scope.row.交付日期 }}
</template>
</el-table-column>
<el-table-column align="center" label="保证金金额" width="100">
<template slot-scope="scope">
{{ scope.row.保证金金额 }}
</template>
</el-table-column>
<el-table-column align="center" label="扣款金额" width="100">
<template slot-scope="scope">
{{ scope.row.扣款金额 }}
</template>
</el-table-column>
<el-table-column :label="AmountReceivable" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.应收回金额 }}
</template>
</el-table-column>
<el-table-column align="center" label="计划收回日期" width="150">
<template slot-scope="scope">
{{ scope.row.预计收回日期 }}
</template>
</el-table-column>
<el-table-column align="center" label="实际收回日期" width="150">
<template slot-scope="scope">
{{ scope.row.实际收回日期 }}
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="120">
<template slot-scope="scope">
<div v-if="scope.row.状态 === '0'">未到预警时间</div>
<div v-else-if="scope.row.状态 === '1'">即将拖期</div>
<div v-else-if="scope.row.状态 === '2'">已拖期</div>
<div v-else >已收回</div>
</template>
</el-table-column>
<el-table-column align="center" label="备注">
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="400">
<template slot-scope="scope">
<el-button
:disabled="disabled"
size="mini"
type="success"
icon="el-icon-edit"
@click.stop="TakeBack(scope.row);flag1 = 5">收回</el-button>
<el-button
:disabled="disabled"
size="mini"
type="info"
icon="el-icon-edit"
@click.stop="Withdrawing(scope.row);flag1 = 3">扣款</el-button>
<el-button
:disabled="disabled"
size="mini"
type="primary"
icon="el-icon-edit"
@click.stop="editSafetyMargin(scope.row);flag1 = 2">编辑</el-button>
<el-button
:disabled="disabled"
size="mini"
type="danger"
icon="el-icon-delete"
@click.stop="delSafetyMargin(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="PageCurrent"
:page-sizes="[10, 20, 30, 40]"
:page-size="PageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</el-card>
<!--扣款记录表格-->
<el-card>
<span style="float: right">扣款记录</span>
<el-table
v-loading="tableData2Loading"
:data="tableData2"
style="width: 100%;margin-top: 15px"
height="230"
border>
<el-table-column align="center" label="扣款金额">
<template slot-scope="scope">
{{ scope.row.扣款金额 }}
</template>
</el-table-column>
<el-table-column align="center" label="被扣款人">
<template slot-scope="scope">
{{ scope.row.被扣款人 }}
</template>
</el-table-column>
<el-table-column align="center" label="扣款原因">
<template slot-scope="scope">
{{ scope.row.扣款原因 }}
</template>
</el-table-column>
<el-table-column align="center" label="扣款日期">
<template slot-scope="scope">
{{ scope.row.扣款日期 }}
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="200">
<template slot-scope="scope">
<el-button
:disabled="disabled"
size="mini"
type="primary"
icon="el-icon-edit"
@click.stop="editWithdrawing(scope.row);flag1 = 4">编辑</el-button>
<el-button
:disabled="disabled"
size="mini"
type="danger"
icon="el-icon-delete"
@click.stop="delWithdrawing(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="PageCurrent2"
:page-sizes="[10, 20, 30, 40]"
:page-size="PageSize2"
:total="total2"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"/>
</div>
</el-card>
<!--新增编辑保证金信息对话框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible1" center style="min-height: 300px" width="800px">
<el-form ref="form" :model="form" :rules="rules1" label-position="left" label-width="120px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="项目名称">
<el-select v-model="form.项目名称" clearable filterable placeholder="请选择项目:" size="small">
<el-option
v-for="item in entryName1"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保证金金额" prop="保证金金额">
<el-input v-model="form.保证金金额" size="small" placeholder="请输入保证金金额" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="交付日期" prop="交付日期">
<el-date-picker
v-model="form.交付日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择交付日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划收回日期" prop="预计收回日期">
<el-date-picker
v-model="form.预计收回日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择计划收回日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提前X天提醒我" prop="提前X天提醒我">
<el-input v-model="form.提前X天提醒我" size="small" placeholder="提前X天提醒我" style="width:200px"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="备注">
<el-input v-model="form.备注" size="small" placeholder="请输入备注" style="width:200px"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff('form')">取消</el-button>
<el-button type="primary" @click="submit1('form')"> </el-button>
</div>
</el-dialog>
<!--扣款记录增加-->
<el-dialog :title="title2" :visible.sync="dialogFormVisible2" center style="min-height: 300px" width="800px">
<el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="120px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="项目名称">
<el-input v-model="projectName" size="small" placeholder="请输入项目名称" style="width:200px" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="被扣款人" prop="被扣款人">
<el-input v-model="form2.被扣款人" size="small" placeholder="请输入被扣款人" style="width:200px"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="剩余金额" prop="剩余金额">
<el-input v-model="SurplusAmount" size="small" placeholder="请输入剩余金额" style="width:200px" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="扣款金额" prop="扣款金额">
<el-input-number v-model="form2.扣款金额" :min="0" :max="maxMoney" :precision="2" :step="1" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="扣款日期" prop="扣款日期">
<el-date-picker
v-model="form2.扣款日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="扣款日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="扣款原因" prop="扣款原因">
<el-input v-model="form2.扣款原因" size="small" placeholder="扣款原因" style="width: 200px"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff('form2')">取消</el-button>
<el-button type="primary" @click="submit1('form2')"> </el-button>
</div>
</el-dialog>
<!--扣款记录编辑-->
<el-dialog :visible.sync="dialogFormVisible3" title="编辑" center style="min-height: 300px" width="800px">
<el-form ref="form3" :model="form3" :rules="rules3" label-position="left" label-width="120px" class="demo-ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="项目名称">
<el-input v-model="projectName" size="small" placeholder="请输入项目名称" style="width:200px" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="被扣款人" prop="被扣款人">
<el-input v-model="form3.被扣款人" size="small" placeholder="请输入被扣款人" style="width:200px"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="扣款日期" prop="扣款日期">
<el-date-picker
v-model="form3.扣款日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="扣款日期"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="扣款金额" prop="扣款金额">
<el-input-number v-model="form3.扣款金额" :min="0" :max="maxMoney1" :precision="2" :step="1" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<el-form-item label="扣款原因" prop="扣款原因">
<el-input v-model="form3.扣款原因" size="small" placeholder="扣款原因" style="width: 580px"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff('form3')">取消</el-button>
<el-button type="primary" @click="submit1('form3')"> </el-button>
</div>
</el-dialog>
<!--收回安全保证金-->
<el-dialog :visible.sync="dialogFormVisible4" title="收回" center style="min-height: 300px" width="20%">
<el-form ref="form4" :model="form4" :rules="rules4" label-position="left" label-width="120px" class="demo-ruleForm">
<el-form-item label="项目名称" prop="项目名称">
<el-input v-model="projectName" size="small" placeholder="请输入项目名称" style="width:200px" disabled/>
</el-form-item>
<el-form-item label="剩余金额" prop="剩余金额">
<el-input v-model="form4.剩余金额" size="small" placeholder="请输入项目名称" style="width:200px" disabled/>
</el-form-item>
<el-form-item label="收回日期" prop="收回日期">
<el-date-picker
v-model="form4.收回日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="收回日期"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff('form4')">取消</el-button>
<el-button type="primary" @click="submit1('form4')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { initProject, searchTable1, searchTable2, addSafetyMargin, editSafetyMargin, delSafetyMargin, Withdrawing, delWithdrawing, edtWithdrawing, TakeBack } from '@/api/MarketingCenter/SafetyMargin'
export default {
data() {
const validateValue = (rule, value, callback) => {
if (value === 0) {
callback(new Error('金额不能为0或大于剩余保证金金额'))
} else {
callback()
}
}
return {
disabled: false,
AmountReceivable: '应收回金额',
WithdrawingCode: '',
SurplusAmount: '',
maxMoney: null,
maxMoney1: null,
code: '', // 安全保证金流水号
projectCode: '',
projectName: '',
flag1: null,
entryName: '', // 项目名称
entryNameValue: [], // 项目名称数组
tableData1: [], // 安全保证金信息表数组
tableData2: [], // 安全保证金信息表数组
tableData1Loading: false, // 安全保证金信息表加载动画
tableData2Loading: false, // 安全保证金信息表加载动画
PageCurrent: 1,
PageSize: 10,
total: null,
PageCurrent2: 1,
PageSize2: 10,
total2: null,
radio: '1',
title: '',
title2: '',
entryName1: [],
dialogFormVisible1: false,
dialogFormVisible2: false,
dialogFormVisible3: false,
dialogFormVisible4: false,
form: {
备注: '',
项目名称: '',
保证金金额: '',
交付日期: '',
预计收回日期: '',
提前X天提醒我: ''
},
form2: {
扣款金额: '',
被扣款人: '',
扣款日期: '',
扣款原因: ''
},
form3: {
扣款金额: '',
被扣款人: '',
扣款日期: '',
扣款原因: ''
},
form4: {
收回日期: '',
剩余金额: ''
},
rules1: { // 表单验证规则
项目名称: [{ required: true, message: '请选择项目', trigger: 'change' }],
保证金金额: [{ required: true, message: '请输入保证金金额', trigger: 'blur' }],
交付日期: [{ required: true, message: '请选择交付日期', trigger: 'change' }],
预计收回日期: [{ required: true, message: '请选择预计收回日期', trigger: 'change' }],
提前X天提醒我: [{ required: true, message: '提前X天提醒我', trigger: 'blur' }]
},
rules2: { // 表单验证规则
扣款金额: [
{ required: true, message: '请输入本次付款金额', trigger: 'blur' },
{ required: true, trigger: 'blur', validator: validateValue }],
被扣款人: [{ required: true, message: '请输入被扣款人', trigger: 'blur' }],
扣款日期: [{ required: true, message: '请选择扣款日期', trigger: 'change' }]
},
rules3: { // 表单验证规则
扣款金额: [
{ required: true, message: '请输入本次付款金额', trigger: 'blur' },
{ required: true, trigger: 'blur', validator: validateValue }],
被扣款人: [{ required: true, message: '请输入被扣款人', trigger: 'blur' }],
扣款日期: [{ required: true, message: '请选择扣款日期', trigger: 'change' }]
},
rules4: { // 表单验证规则
收回日期: [{ required: true, message: '请选择收回日期', trigger: 'change' }]
}
}
},
created() {
this.init()
},
methods: {
change(data) {
return data + 1
},
init() {
this.getSelect(initProject, ['项目名称', '项目流水号'], 'entryName')
this.getSelect(initProject, ['项目名称', '项目流水号'], 'entryName1')
},
fetchTableData1() {
if (this.radio === '1') {
this.disabled = false
this.AmountReceivable = '应收回金额'
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
} else {
this.disabled = true
this.AmountReceivable = '实收回金额'
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
}
},
fetchTableData2(row) {
this.code = row.安全保证金流水号
this.SurplusAmount = row.应收回金额
this.projectName = row.项目名称
this.getTable(searchTable2, [this.PageCurrent2, this.PageSize2, this.code], ['tableData2', 'total2', 'tableData2Loading'])
},
handleSizeChange(val) {
this.PageCurrent = 1
this.PageSize = val
this.fetchTableData1()
},
handleCurrentChange(val) {
this.PageCurrent = val
this.fetchTableData1()
},
handleSizeChange2(val) {
this.PageCurrent2 = 1
this.PageSize2 = val
this.fetchTableData2()
},
handleCurrentChange2(val) {
this.PageCurrent2 = val
this.fetchTableData2()
},
tableRowClassName({ row }) {
if (parseInt(row.是否收回) === 2) {
return 'background: #66cc33'
} else {
if (parseInt(row.状态) === 1) {
return 'background: #ffff66'
} else if (parseInt(row.状态) === 2) {
return 'background: #ff6666'
} else {
return ''
}
}
},
addSafetyMargin() {
this.title = '增加'
this.dialogFormVisible1 = true
this.addForm('form')
},
editSafetyMargin(row) {
this.title = '编辑'
this.dialogFormVisible1 = true
this.form.项目名称 = parseInt(row.项目流水号)
this.form.保证金金额 = row.保证金金额
this.form.交付日期 = row.交付日期
this.form.预计收回日期 = row.预计收回日期
this.form.提前X天提醒我 = row.提前x天提醒
this.form.备注 = row.备注
this.code = row.安全保证金流水号
// this.projectCode = parseInt(row.项目流水号)
},
addTableData1() {
addSafetyMargin(this.form.项目名称, this.form.保证金金额, this.form.交付日期, this.form.提前X天提醒我, this.form.预计收回日期, this.form.备注).then(response => {
this.dialogFormVisible1 = false
if (response.data[0].result === '1') {
this.$message.success('添加成功')
this.title = ''
this.fetchTableData1()
} else {
this.$message.error('添加失败')
}
})
},
editTableData1() {
editSafetyMargin(this.form.项目名称, this.form.保证金金额, this.form.交付日期, this.form.提前X天提醒我, this.form.预计收回日期, this.form.备注, this.code).then(response => {
this.dialogFormVisible1 = false
if (response.data[0].result === '1') {
this.$message.success('信息更新成功')
this.fetchTableData1()
this.code = ''
this.projectCode = ''
} else {
this.$message.error('信息更新失败')
}
})
},
// 提交保证金信息添加或者修改
submit1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.flag1 === 1) {
this.addTableData1()
this.flag1 = null
} else if (this.flag1 === 2) {
this.editTableData1()
this.flag1 = null
} else if (this.flag1 === 3) {
this.addTableData2()
this.flag1 = null
} else if (this.flag1 === 4) {
this.edtTableData2()
this.flag1 = null
} else if (this.flag1 === 5) {
this.submitTakeBack()
this.flag1 = null
}
}
})
},
callOff() {
this.dialogFormVisible1 = false
this.dialogFormVisible2 = false
},
delSafetyMargin(row) {
this.deleteRow(delSafetyMargin, row.安全保证金流水号, function() { this.fetchTableData1() })
},
delWithdrawing(row) {
function a() {
this.getTable(searchTable2, [this.PageCurrent2, this.PageSize2, this.code], ['tableData2', 'total2', 'tableData2Loading'])
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
this.dialogFormVisible2 = false
}
this.deleteRow(delWithdrawing, row.扣款流水号, a)
},
Withdrawing(row) {
this.title2 = '扣款'
this.dialogFormVisible2 = true
this.code = row.安全保证金流水号
this.projectName = row.项目名称
this.maxMoney = row.保证金金额
this.SurplusAmount = row.应收回金额
this.addForm('form2')
},
addTableData2() {
Withdrawing(this.code, this.form2.扣款金额, this.form2.被扣款人, this.form2.扣款原因, this.form2.扣款日期).then(response => {
this.dialogFormVisible2 = false
if (response.data[0].result === '1') {
this.$message.success('扣款成功')
this.title = ''
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
this.getTable(searchTable2, [this.PageCurrent2, this.PageSize2, this.code], ['tableData2', 'total2', 'tableData2Loading'])
} else {
this.$message.error('扣款失败')
}
})
},
editWithdrawing(row) {
this.dialogFormVisible3 = true
this.maxMoney1 = parseFloat(this.SurplusAmount) + parseFloat(row.扣款金额)
this.form3.扣款金额 = row.扣款金额
this.form3.被扣款人 = row.被扣款人
this.form3.扣款原因 = row.扣款原因
this.form3.扣款日期 = row.扣款日期
this.WithdrawingCode = row.扣款流水号
console.log(row.扣款流水号)
},
edtTableData2() {
edtWithdrawing(this.WithdrawingCode, this.form3.扣款金额, this.form3.被扣款人, this.form3.扣款原因, this.form3.扣款日期).then(response => {
this.dialogFormVisible3 = false
if (response.data[0].result === '1') {
this.$message.success('信息更新成功')
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
this.getTable(searchTable2, [this.PageCurrent2, this.PageSize2, this.code], ['tableData2', 'total2', 'tableData2Loading'])
} else {
this.$message.error('信息更新失败')
}
})
},
TakeBack(row) {
this.code = row.安全保证金流水号
this.projectName = row.项目名称
this.form4.剩余金额 = parseFloat(row.应收回金额)
this.dialogFormVisible4 = true
},
submitTakeBack() {
TakeBack(this.code, this.form4.收回日期).then(response => {
this.dialogFormVisible4 = false
if (response.data[0].result === '1') {
this.$message.success('信息更新成功')
this.getTable(searchTable1, [this.PageCurrent, this.PageSize, this.entryNameValue, this.radio], ['tableData1', 'total', 'tableData1Loading'])
} else {
this.$message.error('信息更新失败')
}
})
}
}
}
</script>
<style scoped>
.el-date-picker{
width:50px
}
</style>