wxz
2 years ago
2 changed files with 376 additions and 3 deletions
@ -0,0 +1,361 @@ |
|||||
|
<template> |
||||
|
<el-dialog :visible="dlgVisible" v-if="dlgVisible" @close="handleDlgClose" :title="'缴费记录'"> |
||||
|
<el-form> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="所属党组织"> |
||||
|
<el-input disabled v-model="partyOrgName" style="width: 240px"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="党员姓名"> |
||||
|
<el-input disabled v-model="partyMemberName" style="width: 240px"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="联系电话"> |
||||
|
<el-input disabled v-model="mobile" style="width: 240px"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="证件号"> |
||||
|
<el-input disabled v-model="idCard" style="width: 240px"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<div style="padding-right: 20px;"> |
||||
|
<div class="mt10"> |
||||
|
<el-button size="small" |
||||
|
class="diy-button--add" |
||||
|
@click="handleAdd">新增 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<el-table :data="tableData" |
||||
|
row-key="id" |
||||
|
border |
||||
|
style="width: 100%" |
||||
|
class="resi-table" |
||||
|
height="400px" |
||||
|
:header-cell-style="getRowClass"> |
||||
|
<el-table-column label="序号" |
||||
|
type="index" |
||||
|
align="center" |
||||
|
width="50"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" |
||||
|
label="缴费日期" |
||||
|
align="center" |
||||
|
width="250px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-date-picker v-if="scope.row.isEdit" |
||||
|
v-model="scope.row.payDate" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
<div v-else |
||||
|
class="div-content">{{ scope.row.payDate }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" |
||||
|
label="缴费金额" |
||||
|
align="center" |
||||
|
width="180px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.isEdit" |
||||
|
type="number" |
||||
|
v-model="scope.row.money" |
||||
|
placeholder="请输入" |
||||
|
class="input-width" |
||||
|
clearable></el-input> |
||||
|
<div v-else |
||||
|
class="div-content">{{ scope.row.money }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" |
||||
|
label="缴费年度" |
||||
|
align="center" |
||||
|
min-width="250px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-date-picker v-if="scope.row.isEdit" |
||||
|
v-model="scope.row.timeRange" |
||||
|
type="monthrange" |
||||
|
value-format="yyyy-MM" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
@change="handleTimeChangePay($event, scope.row)"> |
||||
|
</el-date-picker> |
||||
|
<div v-else |
||||
|
class="div-content">{{ scope.row.startDate + ' - ' + scope.row.endDate }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
align="center" |
||||
|
width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<template v-if="scope.row.isEdit"> |
||||
|
<el-button @click="handleEdit(scope.row)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-edit">保存 |
||||
|
</el-button> |
||||
|
<el-button @click="handleChange(scope.row, 'cancle')" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-edit">取消 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-button @click="handleChange(scope.row, 'edit')" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-edit">修改 |
||||
|
</el-button> |
||||
|
<el-popconfirm title="删除之后无法恢复，确认删除？" |
||||
|
@onConfirm="del(scope.row)"> |
||||
|
<el-button slot="reference" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-del" |
||||
|
style="margin-left: 10px;">删除 |
||||
|
</el-button> |
||||
|
</el-popconfirm> |
||||
|
</template> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
// props: { |
||||
|
// partyId: { |
||||
|
// type: String, |
||||
|
// default: '' |
||||
|
// }, |
||||
|
// disabled: { |
||||
|
// type: Boolean, |
||||
|
// default: false |
||||
|
// } |
||||
|
// }, |
||||
|
data () { |
||||
|
return { |
||||
|
partyOrgName: null,// 党组织名称 |
||||
|
partyMemberName: null,// 党员姓名 |
||||
|
mobile: null,// 手机号 |
||||
|
idCard: null,// 证件号 |
||||
|
partyId: null,// 党员id |
||||
|
dlgVisible: false,//是否显示对话框 |
||||
|
btnDisabled: false, |
||||
|
btnType: 'cancle', |
||||
|
isEdit: false, |
||||
|
tableData: [], |
||||
|
tempRow: {} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
partyId: { |
||||
|
handler (val) { |
||||
|
console.log('val------points', val) |
||||
|
if (val.length > 0) { |
||||
|
this.btnDisabled = false |
||||
|
this.getList() |
||||
|
} else { |
||||
|
this.btnDisabled = true |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
// if (this.partyId) this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 初始化 |
||||
|
*/ |
||||
|
init (partyId, partyOrgName, partyMemberName, mobile, idCard) { |
||||
|
this.dlgVisible = true |
||||
|
this.partyId = partyId |
||||
|
this.partyOrgName = partyOrgName |
||||
|
this.partyMemberName = partyMemberName |
||||
|
this.mobile = mobile |
||||
|
this.idCard = idCard |
||||
|
}, |
||||
|
getRowClass ({ rowIndex, columnIndex }) { |
||||
|
if (rowIndex === 0) { |
||||
|
return 'background: #2195fe; color: #fff;' |
||||
|
} |
||||
|
}, |
||||
|
handleChange (row, type) { |
||||
|
console.log('type----', type) |
||||
|
if (type == 'cancle') { |
||||
|
|
||||
|
row = { ...this.tempRow } |
||||
|
row.isEdit = false |
||||
|
row.timeRange = [] |
||||
|
if (this.btnType == 'add') this.tableData.pop() |
||||
|
this.getList() |
||||
|
console.log('row----', row) |
||||
|
} else { |
||||
|
this.tempRow = { ...row } |
||||
|
row.isEdit = true |
||||
|
row.timeRange = [row.startDate, row.endDate] |
||||
|
} |
||||
|
this.btnType = type |
||||
|
this.isEdit = !this.isEdit |
||||
|
|
||||
|
}, |
||||
|
handleTimeChangePay (val, row) { |
||||
|
console.log('vall', val) |
||||
|
console.log('varowll', row) |
||||
|
if (val != null && val.length > 0) { |
||||
|
row.startDate = val[0] |
||||
|
row.endDate = val[1] |
||||
|
} else { |
||||
|
row.startDate = '' |
||||
|
row.endDate = '' |
||||
|
row.timeRange = [] |
||||
|
} |
||||
|
}, |
||||
|
async handleEdit (row) { |
||||
|
if (this.btnType == 'add') { |
||||
|
this.save(row) |
||||
|
} else { |
||||
|
this.edit(row) |
||||
|
} |
||||
|
}, |
||||
|
handleAdd () { |
||||
|
this.btnType = 'add' |
||||
|
this.isEdit = true |
||||
|
const item = { |
||||
|
isEdit: true, |
||||
|
partyMemberId: this.partyId, |
||||
|
payDate: '', |
||||
|
money: '', |
||||
|
startDate: '', |
||||
|
endDate: '', |
||||
|
timeRange: '' |
||||
|
} |
||||
|
this.tableData.push(item) |
||||
|
}, |
||||
|
async save (row) { |
||||
|
const params = { |
||||
|
partyMemberId: this.partyId, |
||||
|
payDate: row.payDate, |
||||
|
money: row.money, |
||||
|
startDate: row.startDate, |
||||
|
endDate: row.endDate, |
||||
|
} |
||||
|
await this.$http |
||||
|
.post('/actual/base/party/member/payRecord/save', params) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.$message.success('保存成功') |
||||
|
row.isEdit = false |
||||
|
this.isEdit = false |
||||
|
this.btnType = 'cancle' |
||||
|
this.getList() |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('err', err) |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async edit (row) { |
||||
|
const params = { |
||||
|
...row |
||||
|
} |
||||
|
await this.$http |
||||
|
.post('/actual/base/party/member/payRecord/update', params) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.$message.success('保存成功') |
||||
|
row.isEdit = false |
||||
|
this.isEdit = false |
||||
|
this.getList() |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('err', err) |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async del (row) { |
||||
|
const params = { |
||||
|
...row |
||||
|
} |
||||
|
await this.$http |
||||
|
.post('/actual/base/party/member/payRecord/delete', [row.id]) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.$message.success('删除成功') |
||||
|
this.getList() |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('err', err) |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async getList () { |
||||
|
const params = { |
||||
|
page: 1, |
||||
|
limit: 9999, |
||||
|
partyMemberId: this.partyId |
||||
|
|
||||
|
} |
||||
|
await this.$http |
||||
|
.get('/actual/base/party/member/payRecord/page', { params: params, }) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.tableData = res.data.list.map(item => { |
||||
|
return { |
||||
|
...item, |
||||
|
isEdit: false, |
||||
|
timeRange: [] |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('err', err) |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 关闭对话框 |
||||
|
*/ |
||||
|
handleDlgClose () { |
||||
|
this.dlgVisible = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.mt10 { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue