508 lines
		
	
	
		
			19 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			508 lines
		
	
	
		
			19 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-detail class="party-detail">
 | |
|     <template slot="title">
 | |
|       <ai-title title="党员信息详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)"></ai-title>
 | |
|     </template>
 | |
|     <template slot="content">
 | |
|       <div>
 | |
|         <ai-card title="基本信息">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-avatar class="party-avatar" v-model="info.avatarUrl" :editable="false"></ai-avatar>
 | |
|               <ai-info-item label="姓名">{{ info.name }}</ai-info-item>
 | |
|               <ai-info-item label="性别" :value="dict.getLabel('sex', info.sex)"></ai-info-item>
 | |
|               <ai-info-item label="身份证号">
 | |
|                 <ai-id mode="show" :value="info.idNumber" rightBtn/>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="出生日期" :value="info.birthday"></ai-info-item>
 | |
|               <ai-info-item label="年龄">{{ info.age }}</ai-info-item>
 | |
|               <ai-info-item label="民族" :value="dict.getLabel('nation', info.nation)"></ai-info-item>
 | |
|               <ai-info-item label="籍贯" isLine :value="info.birthplaceAreaName"></ai-info-item>
 | |
|               <ai-info-item label="户籍地" isLine :value="info.householdAreaName"></ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="审核状态">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-info-item label="审核状态">
 | |
|                 <span :class="'audit-' + info.auditStatus">{{ dict.getLabel('auditStatus', info.auditStatus) }}</span>
 | |
|               </ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="联络信息">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-info-item label="联系方式">{{ info.phone || '-' }}</ai-info-item>
 | |
|               <ai-info-item isLine label="现住址">{{
 | |
|                   ((info.currentAreaName || '') + (info.currentAddress || '')) || '-'
 | |
|                 }}
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="所属党组织">{{ info.partyOrgName || '-' }}</ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="党籍信息">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-info-item label="党籍状态" :value="dict.getLabel('partyStatus',info.partyStatus)"/>
 | |
|               <ai-info-item label="转正日期"
 | |
|                             :value="info.turnPositiveTime ? info.turnPositiveTime.split(' ')[0] : '-'"></ai-info-item>
 | |
|               <ai-info-item label="任职日期"
 | |
|                             :value="info.partyStartDate ? info.partyStartDate.split(' ')[0] : '-'"></ai-info-item>
 | |
|               <ai-info-item label="党员类型" :value="dict.getLabel('partyType', info.partyType)"></ai-info-item>
 | |
|               <ai-info-item label="入党时间">{{
 | |
|                   info.joinPartyTime ? info.joinPartyTime.split(' ')[0] : '-'
 | |
|                 }}
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="党内兼职" :value="info.partyWork"></ai-info-item>
 | |
|               <ai-info-item label="党内职务" :value="dict.getLabel('partyPosition', info.partyPosition)"></ai-info-item>
 | |
|               <ai-info-item label="入党介绍人" :value="info.joinPartyIntroducer"></ai-info-item>
 | |
|               <ai-info-item label="优秀党员" :value="dict.getLabel('yesOrNo', info.isOutstandingParty)"></ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="党员简介">
 | |
|           <template #content>
 | |
|             <div v-text="info.personalProfile"/>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="流动信息">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-info-item label="流动情况" :value="dict.getLabel('flowStatus', info.flowStatus)"></ai-info-item>
 | |
|               <ai-info-item label="流入组织" v-if="info.flowStatus == 1" :value="info.flowOrgId"></ai-info-item>
 | |
|               <ai-info-item label="流入时间" v-if="info.flowStatus == 1"
 | |
|                             :value="info.flowTime ? info.flowTime.split(' ')[0] : '-'"></ai-info-item>
 | |
|               <ai-info-item label="流出组织" v-if="info.flowStatus == 0" :value="info.outFlow"></ai-info-item>
 | |
|               <ai-info-item label="流出时间" v-if="info.flowStatus == 0"
 | |
|                             :value="info.inTime ? info.inTime.split(' ')[0] : '-'"></ai-info-item>
 | |
|               <ai-info-item label="失联时间" v-if="info.flowStatus == 2"
 | |
|                             :value="info.lossTime ? info.lossTime.split(' ')[0] : '-'"></ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="文化程度">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|                 label-width="72px">
 | |
|               <ai-info-item label="学历" :value="dict.getLabel('education', info.education)"></ai-info-item>
 | |
|             </ai-wrapper>
 | |
|             <el-tabs v-model="activeName">
 | |
|               <el-tab-pane label="五星党员" name="五星党员" lazy></el-tab-pane>
 | |
|               <el-tab-pane label="工作信息" name="工作信息" lazy></el-tab-pane>
 | |
|               <el-tab-pane label="违纪信息" name="违纪信息" lazy></el-tab-pane>
 | |
|             </el-tabs>
 | |
|             <div class="add-btn">
 | |
|               <span></span>
 | |
|               <!-- <div @click="addForm(activeName)">
 | |
|                 <i class="iconfont iconAdd"></i>
 | |
|                 <span>添加{{ activeName }}</span>
 | |
|               </div> -->
 | |
|             </div>
 | |
|             <ai-table
 | |
|                 v-if="activeName === '五星党员'"
 | |
|                 :border="true"
 | |
|                 :tableData="info.starList"
 | |
|                 :isShowPagination="false"
 | |
|                 :col-configs="colConfigs1"
 | |
|                 :stripe="false"
 | |
|                 @getList="() => {}">
 | |
|               <el-table-column label="评定等级" slot="level" align="center">
 | |
|                 <template slot-scope="{row}">
 | |
|                   <el-rate v-model="row.level" disabled show-text :texts="textlist"></el-rate>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|               <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
 | |
|                 <template slot-scope="{ row }">
 | |
|                   <div class="table-options">
 | |
|                     <el-button type="text" @click="editStar(row)">编辑</el-button>
 | |
|                     <el-button type="text" @click="remove(row.id, '/app/apppartyfivestar/delete')">删除</el-button>
 | |
|                   </div>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|             </ai-table>
 | |
|             <ai-table
 | |
|                 v-if="activeName === '工作信息'"
 | |
|                 :border="true"
 | |
|                 :tableData="info.workInfoList"
 | |
|                 :isShowPagination="false"
 | |
|                 :col-configs="colConfigs2"
 | |
|                 :stripe="false"
 | |
|                 @getList="() => {}">
 | |
|               <el-table-column label="工作时间" slot="date" align="center">
 | |
|                 <template slot-scope="{row}">
 | |
|                   <span v-if="row.starTime && row.endTime">{{
 | |
|                       row.starTime.split(' ')[0]
 | |
|                     }} 至 {{ row.endTime.split(' ')[0] }}</span>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|               <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
 | |
|                 <template slot-scope="{ row }">
 | |
|                   <div class="table-options">
 | |
|                     <el-button type="text" @click="editJob(row)">编辑</el-button>
 | |
|                     <el-button type="text" @click="remove(row.id, '/app/apppartyworkinfo/delete')">删除</el-button>
 | |
|                   </div>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|             </ai-table>
 | |
|             <ai-table
 | |
|                 v-if="activeName === '违纪信息'"
 | |
|                 :border="true"
 | |
|                 :tableData="info.disciplinaryInfoList"
 | |
|                 :isShowPagination="false"
 | |
|                 :col-configs="colConfigs3"
 | |
|                 :stripe="false"
 | |
|                 @getList="() => {}">
 | |
|               <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
 | |
|                 <template slot-scope="{ row }">
 | |
|                   <div class="table-options">
 | |
|                     <el-button type="text" @click="editDisciplinary(row)">编辑</el-button>
 | |
|                     <el-button type="text" @click="remove(row.id, '/app/apppartydisciplinaryinfo/delete')">删除
 | |
|                     </el-button>
 | |
|                   </div>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|             </ai-table>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-dialog
 | |
|             :visible.sync="isShowStarForm"
 | |
|             width="690px"
 | |
|             :title="starId ? '修改五星党员' : '添加五星党员'"
 | |
|             @close="onClose"
 | |
|             @onConfirm="onStarForm">
 | |
|           <el-form ref="starForm" :model="starForm" label-width="110px" label-position="right">
 | |
|             <el-form-item label="评定时间" prop="starTime"
 | |
|                           :rules="[{ required: true, message: '请选择评定时间', trigger: 'change' }]">
 | |
|               <el-date-picker
 | |
|                   size="small"
 | |
|                   v-model="starForm.starTime"
 | |
|                   type="month"
 | |
|                   placeholder="请选择评定时间"
 | |
|                   style="width: 230px;" format="yyyy-MM"
 | |
|                   :value-format="'yyyy-MM-dd'+ ' 00:00:00'">
 | |
|               </el-date-picker>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="评定等级" prop="level"
 | |
|                           :rules="[{ required: true, message: '请选择评定等级', trigger: 'change' }]">
 | |
|               <el-rate v-model="starForm.level" show-text :texts="textlist" style="line-height: 2.5;"></el-rate>
 | |
|             </el-form-item>
 | |
|           </el-form>
 | |
|         </ai-dialog>
 | |
|         <ai-dialog
 | |
|             :visible.sync="isShowJobForm"
 | |
|             width="690px"
 | |
|             :title="jobId ? '修改工作信息' : '添加工作信息'"
 | |
|             @close="onClose"
 | |
|             @onConfirm="onJobForm">
 | |
|           <el-form ref="jobForm" :model="jobForm" label-width="110px" label-position="right">
 | |
|             <el-form-item label="工作时间" prop="date" :rules="[{ required: true, message: '请选择工作时间', trigger: 'change' }]">
 | |
|               <el-date-picker
 | |
|                   size="small"
 | |
|                   v-model="jobForm.date"
 | |
|                   type="monthrange"
 | |
|                   range-separator="至"
 | |
|                   start-placeholder="开始月份" end-placeholder="结束月份" format="yyyy-MM"
 | |
|                   :value-format="'yyyy-MM-dd'+ ' 00:00:00'">
 | |
|               </el-date-picker>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="单位" prop="company" :rules="[{ required: true, message: '请输入工作单位', trigger: 'blur' }]">
 | |
|               <el-input size="small" :maxLength="30" v-model="jobForm.company" placeholder="请输入工作单位"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="职务" prop="position" :rules="[{ required: true, message: '请输入职务', trigger: 'blur' }]">
 | |
|               <el-input size="small" :maxLength="30" v-model="jobForm.position" placeholder="请输入职务"></el-input>
 | |
|             </el-form-item>
 | |
|           </el-form>
 | |
|         </ai-dialog>
 | |
|         <ai-dialog
 | |
|             :visible.sync="isShowDisciplinaryForm"
 | |
|             width="690px"
 | |
|             :title="disciplinaryId ? '修改违纪信息' : '添加违纪信息'"
 | |
|             @close="onClose"
 | |
|             @onConfirm="onDisciplinarForm">
 | |
|           <el-form ref="disciplinaryForm" :model="disciplinaryForm" label-width="110px" label-position="right">
 | |
|             <el-form-item label="时间" prop="starTime"
 | |
|                           :rules="[{ required: true, message: '请选择违纪时间', trigger: 'change' }]">
 | |
|               <el-date-picker
 | |
|                   size="small"
 | |
|                   v-model="disciplinaryForm.starTime"
 | |
|                   type="month"
 | |
|                   placeholder="请选择违纪时间"
 | |
|                   style="width: 230px;" format="yyyy-MM"
 | |
|                   :value-format="'yyyy-MM-dd'+ ' 00:00:00'">
 | |
|               </el-date-picker>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="违纪原因" prop="disciplinaryInfo"
 | |
|                           :rules="[{ required: true, message: '请输入违纪原因', trigger: 'blur' }]">
 | |
|               <el-input size="small" v-model="disciplinaryForm.disciplinaryInfo" placeholder="请输入违纪原因"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="处理结果" prop="result" :rules="[{ required: true, message: '请输入处理结果', trigger: 'blur' }]">
 | |
|               <el-input size="small" v-model="disciplinaryForm.result" placeholder="请输入处理结果"></el-input>
 | |
|             </el-form-item>
 | |
|           </el-form>
 | |
|         </ai-dialog>
 | |
|       </div>
 | |
|     </template>
 | |
|   </ai-detail>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import {mapState} from 'vuex'
 | |
| 
 | |
| export default {
 | |
|   name: 'detail',
 | |
| 
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     params: Object
 | |
|   },
 | |
| 
 | |
|   data() {
 | |
|     return {
 | |
|       info: {},
 | |
|       isShowStarForm: false,
 | |
|       isShowJobForm: false,
 | |
|       jobForm: {
 | |
|         date: [],
 | |
|         company: '',
 | |
|         position: ''
 | |
|       },
 | |
|       jobId: '',
 | |
|       starForm: {
 | |
|         starTime: '',
 | |
|         level: 1
 | |
|       },
 | |
|       disciplinaryId: '',
 | |
|       isShowDisciplinaryForm: false,
 | |
|       disciplinaryForm: {
 | |
|         starTime: '',
 | |
|         disciplinaryInfo: '',
 | |
|         result: ''
 | |
|       },
 | |
|       starId: '',
 | |
|       activeName: '五星党员',
 | |
|       textlist: ['一星党员', '二星党员', '三星党员', '四星党员', '五星党员'],
 | |
|       colConfigs1: [
 | |
|         {prop: 'starTime', label: '评定时间', align: 'center', formart: v => v ? v.split(' ')[0] : '-'},
 | |
|         {slot: 'level'}
 | |
|       ],
 | |
|       colConfigs2: [
 | |
|         {slot: 'date'},
 | |
|         {prop: 'company', label: '单位', align: 'center'},
 | |
|         {prop: 'position', label: '职务', align: 'center'}
 | |
|       ],
 | |
|       colConfigs3: [
 | |
|         {prop: 'starTime', label: '时间', align: 'center', formart: v => v ? v.split(' ')[0] : '-'},
 | |
|         {prop: 'disciplinaryInfo', label: '违纪原因', align: 'center'},
 | |
|         {prop: 'result', label: '处理结果', align: 'center'}
 | |
|       ]
 | |
|     }
 | |
|   },
 | |
| 
 | |
|   computed: {
 | |
|     ...mapState(['user'])
 | |
|   },
 | |
| 
 | |
|   created() {
 | |
|     this.getInfo()
 | |
|   },
 | |
| 
 | |
|   methods: {
 | |
|     getInfo() {
 | |
|       let {id} = this.$route.query
 | |
|       id && this.instance.post(`/app/appparty/detail`, null, {
 | |
|         params: {id}
 | |
|       }).then(res => {
 | |
|         if (res?.data) {
 | |
|           this.info = res.data
 | |
|           if (this.info.birthday) {
 | |
|             this.info.birthday = this.info.birthday.substring(0, 10)
 | |
|           }
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     remove(id, apiUrl) {
 | |
|       this.$confirm('确定删除该数据?').then(() => {
 | |
|         this.instance.post(`${apiUrl}?ids=${id}`).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.getInfo()
 | |
|             this.$message.success('删除成功!')
 | |
|           }
 | |
|         })
 | |
|       })
 | |
|     },
 | |
|     editJob(query) {
 | |
|       this.jobForm = {
 | |
|         ...query,
 | |
|         date: [query.starTime, query.endTime]
 | |
|       }
 | |
|       this.jobId = query.id
 | |
| 
 | |
|       this.isShowJobForm = true
 | |
|     },
 | |
|     editStar(query) {
 | |
|       this.starForm = {
 | |
|         ...query
 | |
|       }
 | |
|       this.starId = query.id
 | |
| 
 | |
|       this.isShowStarForm = true
 | |
|     },
 | |
| 
 | |
|     editDisciplinary(query) {
 | |
|       this.disciplinaryForm = {
 | |
|         ...query
 | |
|       }
 | |
|       this.disciplinaryId = query.id
 | |
| 
 | |
|       this.isShowDisciplinaryForm = true
 | |
|     },
 | |
| 
 | |
|     onDisciplinarForm() {
 | |
|       this.$refs.disciplinaryForm.validate((valid) => {
 | |
|         if (valid) {
 | |
|           this.instance.post(`/app/apppartydisciplinaryinfo/addOrUpdate`, {
 | |
|             ...this.disciplinaryForm,
 | |
|             partyId: this.params.id
 | |
|           }).then(res => {
 | |
|             if (res.code == 0) {
 | |
|               this.isShowDisciplinaryForm = false
 | |
|               this.getInfo()
 | |
|               this.$message.success(this.jobId ? '编辑成功' : '新增成功')
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     onJobForm() {
 | |
|       this.$refs.jobForm.validate((valid) => {
 | |
|         if (valid) {
 | |
|           this.instance.post(`/app/apppartyworkinfo/addOrUpdate`, {
 | |
|             ...this.jobForm,
 | |
|             starTime: this.jobForm.date[0],
 | |
|             endTime: this.jobForm.date[1],
 | |
|             partyId: this.params.id
 | |
|           }).then(res => {
 | |
|             if (res.code == 0) {
 | |
|               this.isShowJobForm = false
 | |
|               this.getInfo()
 | |
|               this.$message.success(this.jobId ? '编辑成功' : '新增成功')
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     onStarForm() {
 | |
|       this.$refs.starForm.validate((valid) => {
 | |
|         if (valid) {
 | |
|           this.instance.post(`/app/apppartyfivestar/addOrUpdate`, {
 | |
|             ...this.starForm,
 | |
|             idNumber: this.info.idNumber,
 | |
|             partyId: this.params.id
 | |
|           }).then(res => {
 | |
|             if (res.code == 0) {
 | |
|               this.isShowStarForm = false
 | |
|               this.getInfo()
 | |
|               this.$message.success(this.starId ? '编辑成功' : '新增成功')
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     onClose() {
 | |
|       this.starId = ''
 | |
|       this.jobId = ''
 | |
|       this.disciplinaryId = ''
 | |
|       this.starForm.level = 0
 | |
|       this.starForm.id = ''
 | |
|       this.starForm.starTime = ''
 | |
|       this.jobForm.date = []
 | |
|       this.jobForm.company = ''
 | |
|       this.jobForm.id = ''
 | |
|       this.jobForm.position = ''
 | |
|       this.disciplinaryForm.starTime = ''
 | |
|       this.disciplinaryForm.id = ''
 | |
|       this.disciplinaryForm.disciplinaryInfo = ''
 | |
|       this.disciplinaryForm.result = ''
 | |
|     },
 | |
| 
 | |
|     addForm(type) {
 | |
|       if (type === '五星党员') {
 | |
|         this.isShowStarForm = true
 | |
|       } else if (type === '工作信息') {
 | |
|         this.isShowJobForm = true
 | |
|       } else {
 | |
|         this.isShowDisciplinaryForm = true
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     cancel() {
 | |
|       this.$router.push({})
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
| .party-detail {
 | |
|   :deep( .AiID ){
 | |
|     line-height: 1.4;
 | |
|     color: #222;
 | |
| 
 | |
|     .el-button {
 | |
|       height: auto;
 | |
|       padding: 0 8px 0 0;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .party-avatar {
 | |
|     position: absolute;
 | |
|     right: 100px;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .audit-0 {
 | |
|   color: #FF8822 !important;
 | |
| }
 | |
| 
 | |
| .audit-1 {
 | |
|   color: #2EA222 !important;
 | |
| }
 | |
| 
 | |
| .add-btn {
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
|   justify-content: space-between;
 | |
|   margin: 10px 0 20px;
 | |
| 
 | |
|   div {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     color: #2266FF;
 | |
|     font-size: 14px;
 | |
| 
 | |
|     &:hover {
 | |
|       opacity: 0.6;
 | |
|       cursor: pointer;
 | |
|       user-select: none;
 | |
|     }
 | |
| 
 | |
|     i {
 | |
|       line-height: 1;
 | |
|       margin-right: 4px;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </style>
 |