<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 class="header-right">
<lin-search @query="onQueryChange" placeholder="请输入姓名" />
<div style="margin-left: 30px">
<el-button type="primary" @click="dialogTableVisible = !dialogTableVisible">列操作</el-button>
</div>
</div>
</div>
<!-- 表格-->
<div class="table-container">
<el-table :data="djbList">
<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="image">
<template v-slot="scope">
<el-avatar shape="square" :size="100" :fit="fit" :src= "scope.row.image"></el-avatar>
</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>
<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 { DjbModel } from '@/model/djb'
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: '',
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()
},
methods: {
async getDjbList() {
this.djbList = await DjbModel.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 DjbModel.addDjbList(this.temp)
this.showDialog = 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].src
this.$refs.form.validate(async valid => {
if (valid) {
const { id } = this.temp
const res = await DjbModel.editDjbList(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 confirmDelete() {
const res = await DjbModel.deleteDjblist(this.temp.id, this.temp.type)
this.$message.success(res.message)
this.showDeleteDialog = false
await this.getDjbList()
},
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: 0 40px 20px 40px;
}
}
</style>