<template>
<div class="container">
<div class="title">党员明细</div>
<div class="header">
<div class="header-left">
<el-button type="primary" @click="handleAdd">新增党员信息</el-button>
</div>
</div>
<!-- 表格-->
<div class="table-container">
<el-table :data="djbList" v-loading="loading">
<el-table-column label="序号" type="index"/>
<el-table-column label="类型" prop="type" width="100">
<template v-slot="scope">
{{ type[scope.row.type] }}
</template>
</el-table-column>
<el-table-column label="姓名" prop="xmname" width="100"></el-table-column>
<el-table-column label="性别" prop="sex" width="60">
<template v-slot="scope">
{{ sex[scope.row.sex] }}
</template>
</el-table-column>
<el-table-column label="民族" prop="ming" width="100">
<template v-slot="scope">
{{ ming[scope.row.ming] }}
</template>
</el-table-column>
<el-table-column label="身份证" prop="idcard"></el-table-column>
<el-table-column label="籍贯" prop="city"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="手机号" prop="telphone" width="120"></el-table-column>
<el-table-column label="状态" prop="status" width="80">
<template v-slot="scope">
<el-tag v-if="scope.row.status === 1" type="success">在职</el-tag>
<el-tag v-else type="danger">离职</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="275">
<template #default="scope">
<el-button
plain
size="small"
type="primary"
@click="handleEdit(scope.row)"
v-permission="{ permission: '编辑', type: 'disabled' }"
>编辑
</el-button
>
<el-button
plain
size="small"
type="danger"
@click="handleDelete(scope.row)"
v-permission="{ permission: '删除', type: 'disabled' }"
>删除
</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!--分页-->
<div class="pagination">
<el-pagination
@current-change="handleCurrentChange"
:background="true"
:page-size="pageCount"
:current-page="currentPage"
v-if="refreshPagination"
layout="prev,pager,next,jumper"
:total="total_nums"
>
</el-pagination>
</div>
<el-dialog
:title="dialogTitle"
v-model="showDialog"
:close-on-press-escape="false"
:close-on-click-modal="false"
@close="resetForm"
width="900px"
>
<el-form v-if="showComp" :model="temp" status-icon ref="form" label-width="100px" :rules="rules">
<el-form-item label="电子照片" prop="image">
<upload-imgs ref="uploadEle" :value="contentImgData" :max-num="1"/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-radio v-model="temp.type" :label="100">正式党员</el-radio>
<el-radio v-model="temp.type" :label="200">预备党员</el-radio>
<el-radio v-model="temp.type" :label="300">入党积极分子</el-radio>
<el-radio v-model="temp.type" :label="400">申请入党</el-radio>
</el-form-item>
<el-row>
<el-col :span="6"
>
<el-form-item label="姓名" prop="xmname">
<el-input v-model="temp.xmname" :disabled="dialogTitle == '编辑内容'"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别" prop="sex">
<el-radio v-model="temp.sex" :disabled="dialogTitle == '编辑内容'" aria-checked="true" :label="201"
>男
</el-radio
>
<el-radio v-model="temp.sex" :disabled="dialogTitle == '编辑内容'" :label="202">女</el-radio>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年龄" prop="age">
<el-input v-model="temp.age"></el-input>
</el-form-item
>
</el-col>
<el-col :span="6">
<el-form-item label="民族" prop="ming">
<el-select v-model="temp.ming" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12"
>
<el-form-item label="身份证号" prop="idcard">
<el-input v-model="temp.idcard" :disabled="dialogTitle == '编辑内容'"></el-input>
</el-form-item
>
</el-col>
<el-col :span="12"
>
<el-form-item label="联系电话" prop="telphone">
<el-input v-model="temp.telphone" :disabled="dialogTitle == '编辑内容'"></el-input>
</el-form-item
>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="籍贯" prop="city">
<el-input v-model="temp.city" :disabled="dialogTitle == '编辑内容'"></el-input>
</el-form-item
>
</el-col>
<el-col :span="12">
<el-form-item label="居住地址" prop="address">
<el-input v-model="temp.address"></el-input>
</el-form-item
>
</el-col>
</el-row>
<el-form-item label="加入时间" prop="pubdate">
<el-date-picker
v-model="temp.pubdate"
type="date"
placeholder="选择日期"
:disabled="dialogTitle == '编辑内容'"
></el-date-picker>
</el-form-item>
<el-form-item label="是否在职">
<el-switch v-model="temp.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="dialogTitle === '添加党员信息' ? confirmAdd() : confirmEdit()"
>保存</el-button
>
</span>
</el-dialog>
<el-dialog title="提示" v-model="showDeleteDialog" width="400px">
<span>确定要删除吗？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="danger" @click="confirmDelete">删除</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {DangjianModel} from "../../model/dangjian";
import {ElMessage} from 'element-plus'
import LinSearch from '@/component/base/search/lin-search'
import UploadImgs from '../../component/base/upload-image/index'
export default {
name: 'list',
filters: {
phoneFilter(val) {
const reg = /^(.{3}).*(.{4})$/
return val.replace(reg, '$1****$2')
},
},
components: {UploadImgs, LinSearch},
data() {
return {
djbList: [],
dialogTitle: '',
loading:false,
refreshPagination:true,
currentPage:1,
total_nums: 180,
pageCount:10,
showDeleteDialog: false,
showDialog: false,
showComp: false,
temp: {
id: null,
xmname: '',
type: '',
telphone: '',
status: '',
sex: '',
age: null,
ming: '',
idcard: '',
city: '',
address: '',
pubdate: '',
image: null,
},
options: [
{
value: '301',
label: '汉族',
},
{
value: '302',
label: '藏族',
},
],
type: {
100: '正式党员',
200: '预备党员',
300: '入党积极分子',
400: '申请预备党员',
},
sex: {
201: '男',
202: '女',
},
ming: {
301: '汉族',
302: '藏族',
},
contentImgData: [],
rules: {
type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
xmname: [{required: true, message: '名字不能为空', trigger: 'blur'}],
idcard: [{required: true, message: '身份证号不能为空', trigger: 'blur'}],
telphone: [{required: true, message: '联系电话不为空', trigger: 'blur'}],
age: [{required: true, message: '年龄为数字', trigger: 'blur'}],
address: [{required: true, message: '居住地址不能为空', trigger: 'blur'}],
city: [{required: true, message: '籍贯不能为空', trigger: 'blur'}],
},
}
},
created() {
this.getDjbList((this.currentPage-1)* this.pageCount,this.pageCount)
},
methods: {
async getDjbList() {
this.djbList = await DangjianModel.getDjblist()
},
async handleAdd() {
this.dialogTitle = '添加党员信息'
this.showDialog = true
this.showComp = true
},
async handleEdit(row) {
this.dialogTitle = '编辑内容'
this.showDialog = true
this.showComp = true
this.temp.id = row.id
this.temp.xmname = row.xmname
this.temp.idcard = row.idcard
this.temp.type = row.type
this.temp.ming = row.ming
this.temp.address = row.address
this.temp.city = row.city
this.temp.telphone = row.telphone
this.temp.age = row.age
this.temp.sex = row.sex
this.temp.image = row.image
this.temp.pubdate = row.pubdate
this.temp.status = row.status
this.contentImgData.push({display: row.image})
},
async confirmAdd() {
const images = await this.$refs.uploadEle.getValue()
this.temp.image = images.length < 1 ? '' : images[0].src
this.$refs.form.validate(async valid => {
if (valid) {
delete this.temp.id
const res = await DangjianModel.addDjblist(this.temp)
this.showDialog = false
this.loading= false
ElMessage.success(res.message)
await this.getDjbList()
}
})
},
// 编辑
async confirmEdit() {
const images = await this.$refs.uploadEle.getValue()
this.temp.image = images.length < 1 ? '' : images[0].display
this.$refs.form.validate(async valid => {
if (valid) {
const {id} = this.temp
const res = await DangjianModel.editDjb(id, this.temp)
this.showDialog = false
this.$message.success(res.message)
await this.getDjbList()
}
})
},
// 删除
handleDelete(row) {
this.showDeleteDialog = true
this.temp.id = row.id
this.temp.type = row.type
},
async handleCurrentChange(val){
this.currentPage= val
this.loading=true
setTimeout(()=>{
console.log(this.pageCount)
this.getDjbList((this.currentPage-1)*this.pageCount,this.pageCount)
this.loading= false
},1000)
},
async confirmDelete() {
const res = await DangjianModel.deleteDjblist(this.temp.id, this.temp.type)
this.$message.success(res.message)
this.showDeleteDialog = false
await this.getDjbList('changePage')
},
resetForm() {
this.contentImgData = []
this.temp = []
},
},
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 30px;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
border-bottom: 1px solid #dae1ed;
.header-left {
float: left;
.title {
height: 59px;
line-height: 59px;
color: $parent-title-color;
font-size: 16px;
font-weight: 500;
}
}
.header-right {
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.title {
height: 59px;
line-height: 59px;
color: $parent-title-color;
font-size: 16px;
font-weight: 500;
text-indent: 40px;
}
.add-button {
padding: 20px 40px;
}
.header-right {
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
.pagination {
display: flex;
justify-content: flex-end;
margin: 20px;
}
.table-container {
padding: 20px;
}
}
</style>
