<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>