13176889840
3 years ago
10 changed files with 668 additions and 114 deletions
@ -0,0 +1,236 @@ |
|||||
|
<template> |
||||
|
<div class="p-wr"> |
||||
|
<div class="flex-div mb20 pdl74"> |
||||
|
<div class="mr10">评分周期</div> |
||||
|
<div class="mr10"> |
||||
|
<el-date-picker |
||||
|
v-model="form.year" |
||||
|
type="year" |
||||
|
placeholder="选择年"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
<div class="mr10"> |
||||
|
<el-select v-model="form.quarter" placeholder="请选择" class="input-width" clearable> |
||||
|
<el-option |
||||
|
v-for="item in quarterList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-form label-width="140px" :model="form" :inline="true" ref="ruleForm" |
||||
|
class="form-wr"> |
||||
|
<el-form-item label="基础积分分值" prop="basePoint"> |
||||
|
<el-input v-model="form.basePoint" placeholder="请输入" class="input-width" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="基础积分选项" prop="baseOptions" class="wd-wr" :style="'width:' + formItemWd"> |
||||
|
<el-checkbox-group v-model="form.baseOptions"> |
||||
|
<el-checkbox v-for="item in baseOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<div> |
||||
|
<el-form-item label="民主评议积分分值" prop="reviewPoint"> |
||||
|
<el-input v-model="form.reviewPoint" placeholder="请输入" class="input-width" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="民主评议积分选项" prop="reviewOptions" class="wd-wr" :style="'width:' + formItemWd"> |
||||
|
<el-checkbox-group v-model="form.reviewOptions"> |
||||
|
<el-checkbox v-for="item in pyiOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-form-item label="激励积分分值" prop="inspirePoint"> |
||||
|
<el-input v-model="form.inspirePoint" placeholder="请输入" class="input-width" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="激励积分选项" prop="inspireOptions" class="wd-wr" :style="'width:' + formItemWd"> |
||||
|
<el-checkbox-group v-model="form.inspireOptions"> |
||||
|
<el-checkbox v-for="item in jiliOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-form-item label="警示扣分分值" prop="warnPoint"> |
||||
|
<el-input v-model="form.warnPoint" placeholder="请输入" class="input-width" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="警示扣分选项" prop="warnOptions" class="wd-wr" :style="'width:' + formItemWd"> |
||||
|
<el-checkbox-group v-model="form.warnOptions"> |
||||
|
<el-checkbox v-for="item in jinshiOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
partyMemberId: '', |
||||
|
year: '', |
||||
|
quarter: '', |
||||
|
basePoint: '', |
||||
|
baseOptions: '', |
||||
|
reviewPoint: '', |
||||
|
reviewOptions: '', |
||||
|
inspirePoint: '', |
||||
|
inspireOptions: '', |
||||
|
warnPoint: '', |
||||
|
warnOptions: '', |
||||
|
}, |
||||
|
formItemWd: '500px', |
||||
|
quarterList: [ |
||||
|
{ |
||||
|
label: '第一季度', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '第二季度', |
||||
|
value: 2 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '第三季度', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
label: '第四季度', |
||||
|
value: 4 |
||||
|
} |
||||
|
], |
||||
|
baseOptions: [ |
||||
|
{ |
||||
|
label: '参加三会一课', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '参加主题党日', |
||||
|
value: 2 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '足额缴纳党费', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
label: '积极参加学习培训', |
||||
|
value: 4 |
||||
|
}, |
||||
|
{ |
||||
|
label: '自觉执行党组织会议', |
||||
|
value: 5 |
||||
|
}, |
||||
|
{ |
||||
|
label: '严守党的政治纪律和政治规矩', |
||||
|
value: 6 |
||||
|
}, |
||||
|
], |
||||
|
jiliOptions: [ |
||||
|
{ |
||||
|
label: '发挥先锋模范作用', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '维护社会和谐稳定', |
||||
|
value: 2 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '参与社会治理', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
label: '联系服务群众', |
||||
|
value: 4 |
||||
|
} |
||||
|
], |
||||
|
jinshiOptions: [ |
||||
|
{ |
||||
|
label: '不服从党组织安排', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '不按时足额缴纳党费', |
||||
|
value: 2 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '无故长期脱离组织管理', |
||||
|
value: 3 |
||||
|
}, |
||||
|
{ |
||||
|
label: '在工作中出现不良影响', |
||||
|
value: 4 |
||||
|
}, |
||||
|
{ |
||||
|
label: '违反党的纪律', |
||||
|
value: 5 |
||||
|
} |
||||
|
], |
||||
|
pyiOptions: [ |
||||
|
{ |
||||
|
label: '个人自评', |
||||
|
value: 1 |
||||
|
}, |
||||
|
{ |
||||
|
label: '党员互评', |
||||
|
value: 2 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '民主测评', |
||||
|
value: 3 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
const w = document.getElementsByClassName('p-wr')[0] |
||||
|
this.formItemWd = w.clientWidth - 360 + 'px' |
||||
|
console.log('www----', w) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.flex-div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.mb20 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.pdl74 { |
||||
|
padding-left: 74px; |
||||
|
} |
||||
|
.wd-wr { |
||||
|
/deep/ .el-form-item__content { |
||||
|
width: calc(100% - 140px); |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-checkbox { |
||||
|
margin-right: 10px; |
||||
|
font-weight: 400; |
||||
|
// line-height: 20px; |
||||
|
.el-checkbox__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.input-width { |
||||
|
width: 160px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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" |
||||
|
placeholder="选择日期"> |
||||
|
</el-date-picker> |
||||
|
<div v-else class="div-content">{{ scope.row.payTime }}</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" 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" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-date-picker |
||||
|
v-if="scope.row.isEdit" |
||||
|
v-model="scope.row.timeRange" |
||||
|
type="daterange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期"> |
||||
|
</el-date-picker> |
||||
|
<div v-else class="div-content">{{ scope.row.timeRange }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" align="center" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-if="scope.row.isEdit" |
||||
|
@click="handleEdit(scope.row, 'save')" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-edit" |
||||
|
>保存</el-button> |
||||
|
<el-button |
||||
|
v-else |
||||
|
@click="handleEdit(scope.row, 'edit')" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
class="btn-color-edit" |
||||
|
>修改</el-button> |
||||
|
<el-button type="text" size="small" class="btn-color-del">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getRowClass({ rowIndex, columnIndex }) { |
||||
|
if (rowIndex === 0) { |
||||
|
return 'background: #2195fe; color: #fff;' |
||||
|
} |
||||
|
}, |
||||
|
handleEdit(row) { |
||||
|
row.isEdit = !row.isEdit |
||||
|
}, |
||||
|
handleAdd() { |
||||
|
const item = { |
||||
|
isEdit: true, |
||||
|
partyMemberId: '', |
||||
|
payDate: '', |
||||
|
money: '', |
||||
|
startDate: '', |
||||
|
endDate: '', |
||||
|
timeRange: '' |
||||
|
} |
||||
|
this.tableData.push(item) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.mt10 { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue