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