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