408 lines
18 KiB
Vue
408 lines
18 KiB
Vue
<template>
|
||
<section class="tabsCard">
|
||
<ai-list isTabs class="others">
|
||
<template #tabs>
|
||
<el-tabs v-model="currentTab">
|
||
<el-tab-pane label="家庭成员" name="families" lazy>
|
||
<ai-card title="家庭成员">
|
||
<template #right v-if="editable">
|
||
<el-button type="text" icon="iconfont iconAdd" @click="dialog.families=true">添加家庭成员</el-button>
|
||
</template>
|
||
<template #content>
|
||
<el-table :data="form.families"
|
||
stripe
|
||
border
|
||
header-cell-class-name="table-header"
|
||
empty-text="家庭成员信息为空，点击标题右侧添加按钮进行添加">
|
||
<el-table-column align="center" prop="name" label="家属姓名" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.name || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="身份证号" width="200">
|
||
<template slot-scope="{row}">
|
||
{{ row.idNumber ? row.idNumber.replace(/(\d{10})\d{6}(\d{2})/g, '$1******$2') : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="age" label="年龄" width="80">
|
||
<template slot-scope="scope">
|
||
<div>{{ $calcAge(scope.row.idNumber) || '-' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="relateType" label="与本人关系" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ dict.getLabel('householdRelation', scope.row.relateType) || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="workUnit" label="工作单位及职位" width="184">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.workUnit || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
|
||
<el-button type="text" @click="handleEdit('families',row,$index)">编辑</el-button>
|
||
<el-button type="text" @click="handleDel('families',$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</ai-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="任职经历" name="serves" lazy>
|
||
<ai-card title="任职经历">
|
||
<template #right v-if="editable">
|
||
<el-button type="text" icon="iconfont iconAdd" @click="dialog.serves=true">添加任职经历</el-button>
|
||
</template>
|
||
<template #content>
|
||
<el-table :data="form.serves" stripe border
|
||
header-cell-class-name="table-header"
|
||
empty-text="任职经历信息为空，点击标题右侧添加按钮进行添加">
|
||
<el-table-column
|
||
align="center"
|
||
prop="careerBeginTime"
|
||
label="任职时间"
|
||
width="113">
|
||
<template slot-scope="{row}">
|
||
{{ [getDateFormat(row.careerBeginTime), getDateFormat(row.careerEndTime)].join('至') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="workAreaName" label="工作地点" width="144"/>
|
||
<el-table-column align="center" prop="workUnit" label="工作单位" width="150"/>
|
||
<el-table-column align="center" prop="position" label="职务" width="89">
|
||
<template slot-scope="scope">
|
||
<span>{{ dict.getLabel('partyPosition', scope.row.position) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="workContent"
|
||
label="主要工作内容"
|
||
width="168"
|
||
/>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
|
||
<el-button type="text" @click="handleEdit('serves',row,$index)">编辑</el-button>
|
||
<el-button type="text" @click="handleDel('serves',$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</ai-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="负面记录" name="negatives" lazy>
|
||
<ai-card title="负面记录">
|
||
<template #right v-if="editable">
|
||
<el-button type="text" icon="iconfont iconAdd" @click="dialog.negatives=true">添加负面记录</el-button>
|
||
</template>
|
||
<template #content>
|
||
<el-table :data="form.negatives" stripe border
|
||
header-cell-class-name="table-header"
|
||
empty-text="负面记录为空，点击标题右侧添加按钮进行添加">
|
||
<el-table-column align="center" prop="punishTime" label="处罚日期" width="144">
|
||
<template slot-scope="{row}">
|
||
{{ getDateFormat(row.punishTime) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="punishContent"
|
||
label="处罚事由"
|
||
width="242"/>
|
||
<el-table-column align="center" prop="createTime" label="登记日期" width="141">
|
||
<template slot-scope="{row}">
|
||
{{ getDateFormat(row.createTime) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="createUser" label="登记人" width="137">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.createUser || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
|
||
<el-button type="text" @click="handleEdit('negatives',row,$index)">编辑</el-button>
|
||
<el-button type="text" @click="handleDel('negatives',$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</ai-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="年度考核" name="assessments" lazy>
|
||
<ai-card title="年度考核">
|
||
<template #right v-if="editable">
|
||
<el-button type="text" icon="iconfont iconAdd" @click="dialog.assessments=true">添加考核评价</el-button>
|
||
</template>
|
||
<template #content>
|
||
<el-table
|
||
:data="form.assessments"
|
||
stripe
|
||
border
|
||
header-cell-class-name="table-header"
|
||
empty-text="考核信息为空，点击标题右侧添加按钮进行添加">
|
||
<el-table-column align="center" prop="year" label="考核年度" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.year }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="assessmentResult"
|
||
label="评价结果"
|
||
width="160"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
dict.getLabel('appVillageCadresAssessmentResult', scope.row.assessmentResult) || '-'
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="remark" label="备注" width="384"/>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="{row,$index}" v-if="$permissions('app_appvillagecadresnew_edit')">
|
||
<el-button type="text" @click="handleEdit('assessments',row,$index)">编辑</el-button>
|
||
<el-button type="text" @click="handleDel('assessments',$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</ai-card>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</template>
|
||
</ai-list>
|
||
<ai-dialog :visible.sync="dialog.families" title="家庭成员" width="720px" @onConfirm="handleSubmit('families')"
|
||
@closed="familiesForm={}">
|
||
<el-form :rules="rules" ref="familiesForm" :model="familiesForm" size="small" label-width="140px">
|
||
<el-form-item label="家属姓名：" prop="name">
|
||
<el-input v-model="familiesForm.name" placeholder="请输入家属姓名" maxlength="15"/>
|
||
</el-form-item>
|
||
<el-form-item label="身份证号：">
|
||
<el-input placeholder="请输入身份证号" clearable
|
||
v-model="familiesForm.idNumber" maxlength="18"
|
||
@change="familiesForm.age=$calcAge(familiesForm.idNumber)"/>
|
||
</el-form-item>
|
||
<el-form-item label="与本人关系：">
|
||
<ai-select v-model="familiesForm.relateType" :selectList="dict.getDict('householdRelation')"/>
|
||
</el-form-item>
|
||
<el-form-item label="工作单位及职位：">
|
||
<el-input v-model="familiesForm.workUnit" placeholder="请输入工作单位及职位" clearable/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
<ai-dialog :visible.sync="dialog.serves" title="任职经历" width="800px" @onConfirm="handleSubmit('serves')"
|
||
@closed="servesForm={}">
|
||
<el-form :rules="rules" ref="servesForm" :model="servesForm" size="small" label-width="120px">
|
||
<el-form-item label="任职时间：" required>
|
||
<el-form-item prop="careerBeginTime" class="mar-b0">
|
||
<el-date-picker
|
||
v-model="servesForm.careerBeginTime"
|
||
type="date"
|
||
placeholder="选择开始日期"
|
||
class="input-172 mar-r16"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="careerEndTime" class="mar-b0">
|
||
<el-date-picker
|
||
v-model="servesForm.careerEndTime"
|
||
type="date"
|
||
placeholder="选择结束日期"
|
||
class="input-172"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"
|
||
/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<el-form-item label="工作地点：" prop="workAreaId" class="area">
|
||
<ai-area-select placeholder="请选择工作地点"
|
||
clearable
|
||
@fullname="v=>servesForm.workAreaName=v"
|
||
always-show
|
||
:instance="instance"
|
||
v-model="servesForm.workAreaId"/>
|
||
</el-form-item>
|
||
<el-form-item label="工作单位：" prop="workUnit">
|
||
<el-input v-model="servesForm.workUnit" placeholder="请输入工作单位" clearable/>
|
||
</el-form-item>
|
||
<el-form-item label="职务：" prop="position" class="user select-240">
|
||
<ai-select v-model="servesForm.position" :selectList="dict.getDict('partyPosition')"/>
|
||
</el-form-item>
|
||
<el-form-item label="主要工作内容：" prop="workContent" class="user mar-b0">
|
||
<el-input v-model="servesForm.workContent" placeholder="请输入主要工作内容" clearable/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
<ai-dialog :visible.sync="dialog.negatives" title="负面记录" width="720px" @onConfirm="handleSubmit('negatives')"
|
||
@closed="negativesForm={}">
|
||
<el-form :rules="rules" ref="negativesForm" :model="negativesForm" size="small" label-width="100px">
|
||
<el-form-item label="处罚日期" prop="punishTime">
|
||
<el-date-picker placeholder="选择处罚日期"
|
||
v-model="negativesForm.punishTime"
|
||
type="date"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"/>
|
||
</el-form-item>
|
||
<el-form-item label="处罚事由" prop="punishContent">
|
||
<el-input v-model="negativesForm.punishContent" placeholder="请输入处罚事由" clearable/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
<ai-dialog :visible.sync="dialog.assessments" title="年度考核" width="720px" @onConfirm="handleSubmit('assessments')"
|
||
@closed="assessmentsForm={}">
|
||
<el-form :rules="rules" ref="assessmentsForm" :model="assessmentsForm" size="small" label-width="100px">
|
||
<el-form-item label="考核年度：" prop="year">
|
||
<el-input v-model="assessmentsForm.year" placeholder="请输入" clearable/>
|
||
</el-form-item>
|
||
<el-form-item label="评价结果：" prop="assessmentResult">
|
||
<ai-select v-model="assessmentsForm.assessmentResult"
|
||
:selectList="dict.getDict('appVillageCadresAssessmentResult')"/>
|
||
</el-form-item>
|
||
<el-form-item label="备注：" prop="remark">
|
||
<el-input v-model="assessmentsForm.remark" placeholder="请输入备注" clearable/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "tabsCard",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
form: {
|
||
default: () => {
|
||
}
|
||
},
|
||
editable: Boolean
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
rules() {
|
||
const IdNumberPass = (rule, value, callback) => {
|
||
const IDREG = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||
if (value) {
|
||
if (IDREG.test(value)) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("身份证号格式错误"));
|
||
}
|
||
} else {
|
||
callback(new Error("请填写身份证号"));
|
||
}
|
||
};
|
||
///结束时间
|
||
const endTimePass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (this.$moment(value).unix() - this.$moment(this.servesForm.careerBeginTime).unix() > 0) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("结束时间要大于开始时间"));
|
||
}
|
||
} else {
|
||
callback(new Error("请填写结束时间"));
|
||
}
|
||
};
|
||
return {
|
||
careerBeginTime: [
|
||
{required: true, message: "请选择任职开始时间", trigger: "blur"}
|
||
],
|
||
careerEndTime: [
|
||
{required: true, validator: endTimePass, trigger: "blur"}
|
||
],
|
||
workAreaId: [
|
||
{required: true, message: "请选择工作地点", trigger: "blur"}
|
||
],
|
||
workUnit: [
|
||
{required: true, message: "请输入工作单位", trigger: "blur"}
|
||
],
|
||
position: [{required: true, message: "请选择职务", trigger: "blur"}],
|
||
workContent: [
|
||
{required: true, message: "请输入主要工作内容", trigger: "blur"}
|
||
],
|
||
punishTime: [
|
||
{required: true, message: "请选择处罚日期", trigger: "blur"}
|
||
],
|
||
punishContent: [
|
||
{required: true, message: "请输入处罚事由", trigger: "blur"}
|
||
],
|
||
name: [{required: true, message: "请输入家属姓名", trigger: "blur"}],
|
||
idNumber: [
|
||
{required: true, validator: IdNumberPass, trigger: "blur"}
|
||
],
|
||
relateType: [
|
||
{required: true, message: "请选择与本人关系", trigger: "change"}
|
||
],
|
||
remark: [{required: true, message: "请输入备注", trigger: "blur"}],
|
||
assessmentResult: [
|
||
{required: true, message: "请输入评价结果", trigger: "blur"}
|
||
],
|
||
year: [{required: true, message: "请输入考核年度", trigger: "blur"}]
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
currentTab: 'families',
|
||
dialog: {families: false, serves: false, negatives: false, assessments: false},
|
||
familiesForm: {},
|
||
servesForm: {},
|
||
negativesForm: {},
|
||
assessmentsForm: {}
|
||
}
|
||
},
|
||
methods: {
|
||
getDateFormat(v) {
|
||
return this.$moment(v).format('YYYY-MM-DD')?.replace("Invalid Date", "-")
|
||
},
|
||
handleDel(prop, index) {
|
||
let origin = JSON.parse(JSON.stringify(this.form))
|
||
origin?.[prop]?.splice(index, 1)
|
||
this.$emit('update:form', origin)
|
||
},
|
||
handleEdit(prop, row, index) {
|
||
this[`${prop}Form`] = JSON.parse(JSON.stringify({...row, index}))
|
||
this.dialog[prop] = true
|
||
},
|
||
handleSubmit(prop) {
|
||
this.$refs?.[`${prop}Form`]?.validate(v => {
|
||
if (v) {
|
||
let origin = JSON.parse(JSON.stringify(this.form)),
|
||
form = this[`${prop}Form`]
|
||
if (form?.index > -1) {
|
||
origin?.[prop]?.splice(form.index, 1, form)
|
||
} else {
|
||
origin?.[prop]?.push(form)
|
||
}
|
||
form.createUser = this.user.info.name
|
||
this.$emit('update:form', origin)
|
||
this.dialog[prop] = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.dict.load('appVillageCadresAssessmentResult', 'partyPosition', 'householdRelation')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabsCard {
|
||
::v-deep .others {
|
||
padding: 0;
|
||
|
||
.el-tabs__content {
|
||
padding: 10px 1px 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|