Files
JY1.0/src/views/MarketingCenter/BidBond/index.vue
2018-12-14 19:38:27 +08:00

599 lines
23 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="TypeOfGoldDepositValue" clearable filterable placeholder="请选择" size="small" style="margin-left: 10px;width: 100px">
<el-option
v-for="item in TypeOfGoldDeposit"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<span style="margin-left: 10px">投标人</span>
<el-input v-model="Bidder" clearable size="small" style="width:100px" placeholder="请选择" readonly @dblclick.native="dialogFormVisiblePeople = true;flag2 = 1" @clear="clear()"/>
<span style="margin-left: 10px">招标企业</span>
<el-input v-model="TenderingEnterprise" clearable size="small" style="width:140px" placeholder="请输入招标企业"/>
<span style="margin-left: 10px">开始日期</span>
<el-date-picker
v-model="startTime"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择开始日期"/>
<span style="margin-left: 10px">结束日期</span>
<el-date-picker
v-model="endTime"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="请选择结束日期"/>
<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="addBidBond();flag1 = 2">增加</el-button>
</el-card>
<el-card>
<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-tag style="background-color: lightgrey;color: #666666">履约金</el-tag>
</el-card>
<!--投标保证金表格-->
<el-card>
<el-table
v-loading="tableData1Loading"
:row-style="tableRowClassName"
:data="tableData1"
style="width: 100%"
height="600"
border>
<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="120">
<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="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="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="scope.row.是否禁用"
size="mini"
type="success"
icon="el-icon-edit"
@click.stop="TakeBack(scope.row);flag1 = 1">收回</el-button>
<el-button
:disabled="scope.row.是否禁用履约"
size="mini"
type="info"
icon="el-icon-edit"
@click.stop="ComplianceGold(scope.row)">履约</el-button>
<el-button
:disabled="disabled"
size="mini"
type="primary"
icon="el-icon-edit"
@click.stop="editBidBond(scope.row);flag1 = 3">编辑</el-button>
<el-button
:disabled="disabled"
size="mini"
type="danger"
icon="el-icon-delete"
@click.stop="delBidBond(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-dialog :visible.sync="dialogFormVisiblePeople" title="人员信息" center width="750px">
<div style="height: 420px">
<div style="float: left;margin-top: 10px;margin-left: 20px;overflow-y: scroll;height: 400px">
<el-tree
:data="dataPeople"
node-key="id"
style="width: 150px;float: left"
height="400"
accordion
@node-click="handleNodeClick"
/>
</div>
<el-table :data="ListPeople" highlight-current-row height="400" style="width: 400px;float: left;margin-left: 30px" @row-click="handleChange">
<el-table-column label="考勤编号" align="center" >
<template slot-scope="scope">
{{ scope.row.考勤编号 }}
</template>
</el-table-column>
<el-table-column label="姓名" align="center" >
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="性别" align="center">
<template slot-scope="scope">
{{ scope.row.性别 }}
</template>
</el-table-column>
<el-table-column label="工作岗位" align="center">
<template slot-scope="scope">
{{ scope.row.岗位名称 }}
</template>
</el-table-column>
</el-table>
</div>
<el-button style="margin-left: 260px" @click="offName">取消</el-button>
<el-button type="primary" style="margin-top: 20px" @click="getName">确认</el-button>
</el-dialog>
<!--收回投标保证金-->
<el-dialog :visible.sync="dialogFormVisible1" title="收回" center style="min-height: 300px" width="20%">
<el-form ref="form1" :model="form1" :rules="rules1" label-position="left" label-width="110px" class="demo-ruleForm">
<el-form-item label="实际收回日期" prop="收回日期">
<el-date-picker
v-model="form1.收回日期"
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('form1')">取消</el-button>
<el-button type="primary" @click="submit('form1')"> </el-button>
</div>
</el-dialog>
<!--投标保证金对话框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible2" center style="min-height: 300px" width="40%">
<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="form2.招标企业" size="small" placeholder="请输入招标企业" style="width: 200px;"/>
</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="form2.联系电话" size="small" placeholder="请输入联系电话" style="width: 200px;"/>
</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-select v-model="form2.保证金类型" clearable filterable placeholder="请选择保证金类型" size="small" style="width: 200px;">
<el-option
v-for="item in TypeOfGoldDeposit1"
: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="form2.投标人" size="small" placeholder="请输入投标人" style="width: 200px;" clearable readonly @dblclick.native="dialogFormVisiblePeople = true;flag2 = 2" @clear="clear()"/>
</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-date-picker
v-model="form2.计划收回日期"
style="width: 200px;"
value-format="yyyy-MM-dd"
size="small"
type="date"
placeholder="收回日期"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="提前X天提醒我" prop="提前X天提醒我">
<el-input v-model="form2.提前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="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="submit('form2')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import elInput from 'element-ui/packages/input'
import { initType, selectBidBond, getTree, tree, getTablePeople, TakeBack, ComplianceGold, addBidBond, editBidBond, delBidBond } from '@/api/MarketingCenter/BidBond'
export default {
components: {
elInput
},
data() {
return {
disabled: false,
BidBondCode: '',
MoneyTypeCode: '',
TypeOfGoldDeposit1: [],
flag2: '',
title: '',
dialogFormVisible2: false,
code: '',
flag1: '',
startTime: '',
startTime_check: '',
endTime: '',
endTime_check: '',
tableData1Loading: false,
TypeOfGoldDepositValue: '', // 保证金类型
TypeOfGoldDepositValue_check: '',
TypeOfGoldDeposit: [], // 保证金类型数组
Bidder: '', // 投标人,
Bidder_check: '',
TenderingEnterprise: '', // 招标企业
TenderingEnterprise_check: '',
time: [], // 时间区间
radio: '1',
tableData1: [],
PageSize: 10,
PageCurrent: 1,
total: null,
dataPeople: [],
dialogFormVisiblePeople: false,
ListPeople: [],
peopleid: '',
peoplename: '',
dialogFormVisible1: false,
form1: {
收回日期: ''
},
form2: {
招标企业: '',
联系人: '',
联系电话: '',
保证金金额: '',
保证金类型: 1,
投标人: '',
投标日期: '',
计划收回日期: '',
提前X天提醒我: '',
备注: ''
},
rules1: { // 表单验证规则
收回日期: [{ required: true, message: '请输入收回日期', trigger: 'change' }]
},
rules2: { // 表单验证规则
招标企业: [{ required: true, message: '请输入招标企业', trigger: 'blur' }],
联系人: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
联系电话: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
保证金金额: [{ required: true, message: '请输入保证金金额', trigger: 'blur' }],
保证金类型: [{ required: true, message: '请输入保证金类型', trigger: 'change' }],
投标人: [{ required: true, message: '请输入投标人', trigger: 'change' }],
投标日期: [{ required: true, message: '请选择收回日期', trigger: 'change' }],
计划收回日期: [{ required: true, message: '请选择计划收回日期', trigger: 'change' }],
提前X天提醒我: [{ required: true, message: '提前X天提醒我', trigger: 'blur' }]
}
}
},
created() {
this.init()
},
methods: {
init() {
this.getSelect(initType, ['保证金类型', '保证金类型流水号'], 'TypeOfGoldDeposit')
this.getSelect(initType, ['保证金类型', '保证金类型流水号'], 'TypeOfGoldDeposit1')
getTree().then(response => { // 获取人员信息树
const data = response.data
this.dataPeople = tree(data, 0)
})
},
fetchTableData1() {
if (this.TypeOfGoldDepositValue === '' || this.TypeOfGoldDepositValue == null) {
this.TypeOfGoldDepositValue_check = 0
} else {
this.TypeOfGoldDepositValue_check = 1
}
if (this.Bidder === '' || this.Bidder == null) {
this.Bidder_check = 0
} else {
this.Bidder_check = 1
}
if (this.TenderingEnterprise === '' || this.TenderingEnterprise == null) {
this.TenderingEnterprise_check = 0
} else {
this.TenderingEnterprise_check = 1
}
if (this.startTime === '' || this.startTime == null) {
this.startTime_check = 0
} else {
this.startTime_check = 1
}
if (this.endTime === '' || this.endTime == null) {
this.endTime_check = 0
} else {
this.endTime_check = 1
}
if (this.radio === '1') {
this.disabled = false
} else {
this.disabled = true
}
this.tableData1Loading = true
selectBidBond(1, this.radio, this.TypeOfGoldDepositValue_check, this.TypeOfGoldDepositValue, this.Bidder_check, this.peopleid, this.TenderingEnterprise_check, this.TenderingEnterprise, this.startTime_check, this.startTime, this.endTime_check, this.endTime, this.PageCurrent, this.PageSize).then(response => {
this.tableData1Loading = false
const data = response.data.rows
for (let i = 0; i < data.length; i++) {
data[i].履约金 === '1' ? data[i].是否禁用 = true : data[i].是否禁用 = false
data[i].履约金 === '1' ? data[i].是否禁用履约 = true : data[i].是否禁用履约 = false
data[i].投标日期 = data[i].投标日期.substring(0, data[i].投标日期.length - 8)
data[i].预计收回日期 = data[i].预计收回日期.substring(0, data[i].预计收回日期.length - 8)
}
if (this.radio === '2') {
for (let i = 0; i < data.length; i++) {
data[i].是否禁用 = true
data[i].投标日期 = data[i].投标日期.substring(0, data[i].投标日期.length - 8)
data[i].预计收回日期 = data[i].预计收回日期.substring(0, data[i].预计收回日期.length - 8)
data[i].实际收回日期 = data[i].实际收回日期.substring(0, data[i].实际收回日期.length - 8)
}
}
this.tableData1 = data
this.total = response.data.total
})
},
handleSizeChange(val) {
this.PageCurrent = 1
this.PageSize = val
this.fetchTableData1()
},
handleCurrentChange(val) {
this.PageCurrent = val
this.fetchTableData1()
},
tableRowClassName({ row }) {
if (parseInt(row.是否收回) === 2) {
return 'background: #66cc33'
} else {
if (parseInt(row.履约金) === 1) {
return 'background: lightgrey'
}
if (parseInt(row.状态) === 1) {
return 'background: #ffff66'
} else if (parseInt(row.状态) === 2) {
return 'background: #ff6666'
} else {
return ''
}
}
},
handleNodeClick(data) { // 树节点点击
this.getData(getTablePeople, 'ListPeople', data.id)
},
handleChange(row) {
this.peopleid = row.人员编号
this.peoplename = row.姓名
},
getName() {
this.dialogFormVisiblePeople = false
if (this.flag2 === 1) {
this.Bidder = this.peoplename
} else {
this.form2.投标人 = this.peoplename
}
},
offName() {
this.dialogFormVisiblePeople = false
this.peopleid = ''
this.peoplename = ''
},
TakeBack(row) {
this.addForm('form1')
this.dialogFormVisible1 = true
this.code = row.招标保证金流水号
},
submitTakeBack() {
TakeBack(this.code, this.form1.收回日期).then(response => {
this.dialogFormVisible1 = false
if (response.data[0].result === '1') {
this.$message.success('信息更新成功')
this.fetchTableData1()
} else {
this.$message.error('信息更新失败')
}
})
},
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.flag1 === 1) {
this.submitTakeBack()
this.flag1 = null
} else if (this.flag1 === 2) {
this.addTableData1()
this.flag1 = null
} else if (this.flag1 === 3) {
this.editTableData1()
this.flag1 = null
}
}
})
},
callOff() {
this.dialogFormVisible1 = false
this.dialogFormVisible2 = false
},
ComplianceGold(row) {
this.$confirm('此操作会将此投标保证金转为履约保证金, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ComplianceGold(row.招标保证金流水号).then(response => {
if (response.data[0].result === '1') {
this.fetchTableData1()
this.$message.success('操作成功')
} else {
this.$message.error('操作失败')
}
})
})
},
addBidBond() {
this.addForm('form2')
this.title = '增加'
this.dialogFormVisible2 = true
},
addTableData1() {
addBidBond(this.form2.招标企业, this.form2.联系人, this.form2.联系电话, this.form2.保证金金额, this.peopleid, this.form2.保证金类型, this.form2.投标日期, this.form2.计划收回日期, this.form2.备注, this.form2.提前X天提醒我).then(response => {
if (response.data[0].result === '1') {
this.$message.success('添加成功')
this.title = ''
this.dialogFormVisible2 = false
this.fetchTableData1()
} else {
this.$message.error('添加失败,请检查金额于提醒天数是否为数字')
}
})
},
editBidBond(row) {
this.editForm(row, 'form2')
this.title = '编辑'
this.dialogFormVisible2 = true
this.form2.招标企业 = row.招标企业
this.form2.联系人 = row.联系人
this.form2.联系电话 = row.联系电话
this.form2.保证金金额 = row.保证金金额
this.form2.投标人 = row.投标人
this.peopleid = row.人员流水号
this.form2.保证金类型 = parseInt(row.保证金类型流水号)
// this.MoneyTypeCode = row.保证金类型流水号
this.form2.投标日期 = row.投标日期
this.form2.计划收回日期 = row.预计收回日期
this.form2.备注 = row.备注
this.form2.提前X天提醒我 = row.提前x天提醒
this.BidBondCode = row.招标保证金流水号
},
editTableData1() {
editBidBond(this.form2.招标企业, this.form2.联系人, this.form2.联系电话, this.form2.保证金金额, this.peopleid, this.form2.保证金类型, this.form2.投标日期, this.form2.计划收回日期, this.form2.备注, this.form2.提前X天提醒我, this.BidBondCode).then(response => {
if (response.data[0].result === '1') {
this.$message.success('编辑成功')
this.title = ''
this.dialogFormVisible2 = false
this.fetchTableData1()
} else {
this.$message.error('编辑失败,请检查金额于提醒天数是否为数字')
}
})
},
delBidBond(row) {
function a() {
this.fetchTableData1()
this.dialogFormVisible2 = false
}
this.deleteRow(delBidBond, row.招标保证金流水号, a)
}
}
}
</script>
<style scoped>
</style>