|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog ref="dialog" :width='80' :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增档案' : '编辑档案'"
|
|
|
:form="form" :rules="rules" @submit="submit">
|
|
|
<template v-slot:infotext>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-content" style="width:1600px">
|
|
|
个人信息
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:name>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>姓名：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.name" placeholder="请输入姓名" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:nation>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>民族：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.nation" placeholder="请输入民族" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:sex>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>性别：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.sex" filterable style="width: 300px;" placeholder="请选择性别">
|
|
|
<el-option v-for="item in lists.sexList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:birthday>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>出生年月：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker style="width: 300px;" v-model="form.birthday" type="date" placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:idcard>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>身份证：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.idcard" placeholder="请输入身份证" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:mobile>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系电话：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.mobile" placeholder="请输入联系电话" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:telephone>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>固话：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.telephone" placeholder="请输入固话" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:marry>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>婚姻状况：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.marry" filterable style="width: 300px;" placeholder="请选择婚姻状况">
|
|
|
<el-option v-for="item in lists.marryList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:education>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>文化程度：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.education" filterable style="width: 300px;" placeholder="请选择文化程度">
|
|
|
<el-option v-for="item in lists.educationList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:household>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>户口性质：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.household" placeholder="请输入户口性质" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:address>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>户籍地址：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.address" placeholder="请输入户籍地址" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:reside>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>现居住地：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<!-- <avue-input-map :params="mapparams" style="width: 300px;" placeholder="请选择地图" v-model="mapform"></avue-input-map> -->
|
|
|
<el-input v-model="form.reside" placeholder="请输入现居住地" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:disabilitytext>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-content" style="width:1600px">
|
|
|
残疾证信息
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:number>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>残疾证：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.number" placeholder="请输入残疾证" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:disabilitytype>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>残疾类别：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.disabilitytype" filterable style="width: 300px;" placeholder="请选择残疾类别">
|
|
|
<el-option v-for="item in lists.disabilitytypeList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:disabilitylevel>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>残疾等级：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.disabilitylevel" filterable style="width: 300px;" placeholder="请选择残疾等级">
|
|
|
<el-option v-for="item in lists.disabilitylevelList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:disabilitydetail>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>残疾详情：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input type="textarea" v-model="form.disabilitydetail" placeholder="请输入残疾详情" clearable
|
|
|
style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:start_time>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>首次办证日期：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker style="width: 300px;" v-model="form.start_time" type="date" placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:validity>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>有效期：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker style="width: 300px;" v-model="form.validity" type="date" placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:end_time>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>最后审核时间：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker style="width: 300px;" v-model="form.end_time" type="date" placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:end_change>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>最后修改日期：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker style="width: 300px;" v-model="form.end_change" type="date" placeholder="选择日期"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:guardiantext>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-content" style="width:1600px">
|
|
|
监护人信息
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:guardian>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>监护人：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.guardian" placeholder="请输入监护人" clearable style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:relationship>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>关系：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.relationship" filterable style="width: 300px;" placeholder="请选择关系">
|
|
|
<el-option v-for="item in lists.relationList" :key="item.value" :label="item.value" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:guardian_mobile>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>联系电话：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.guardian_mobile" placeholder="请输入监护人联系电话" clearable
|
|
|
style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:guardian_telephone>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>固话：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.guardian_telephone" placeholder="请输入监护人固话" clearable
|
|
|
style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:remark>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" clearable
|
|
|
style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import AvueMap from 'avue-plugin-map'
|
|
|
import {
|
|
|
getparameter
|
|
|
} from "@/api/system/dictionary";
|
|
|
import {
|
|
|
save,
|
|
|
index,
|
|
|
show
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
import {
|
|
|
Message
|
|
|
} from 'element-ui'
|
|
|
export default {
|
|
|
components: {
|
|
|
AvueMap
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
id: '',
|
|
|
type: 'add',
|
|
|
tableName: 'records',
|
|
|
// 地图
|
|
|
mapparams: {
|
|
|
zoom: 11,
|
|
|
},
|
|
|
mapform: [],
|
|
|
form: {
|
|
|
infotext: '',
|
|
|
name: '',
|
|
|
nation: '',
|
|
|
sex: "",
|
|
|
marry: "",
|
|
|
birthday: "",
|
|
|
idcard: "",
|
|
|
mobile: "",
|
|
|
telephone: "",
|
|
|
education: "",
|
|
|
household: "",
|
|
|
address: "",
|
|
|
reside: "",
|
|
|
longitude:'',
|
|
|
latitude:'',
|
|
|
disabilitytext: "",
|
|
|
number: "",
|
|
|
disabilitytype: "",
|
|
|
disabilitylevel: "",
|
|
|
disabilitydetail: "",
|
|
|
start_time: "",
|
|
|
validity: "",
|
|
|
end_time: "",
|
|
|
end_change: "",
|
|
|
guardiantext: '',
|
|
|
guardian: "",
|
|
|
relationship: "",
|
|
|
guardian_mobile: "",
|
|
|
guardian_telephone: "",
|
|
|
remark: "",
|
|
|
},
|
|
|
rules: {},
|
|
|
lists:{
|
|
|
sexList: [],
|
|
|
marryList: [],
|
|
|
disabilitytypeList: [],
|
|
|
disabilitylevelList: [],
|
|
|
educationList: [],
|
|
|
relationList: []
|
|
|
}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getLabel()
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
if (newVal) {
|
|
|
if (this.type === 'editor') {
|
|
|
this.getDetail()
|
|
|
}
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.type = ''
|
|
|
this.$refs['dialog'].reset()
|
|
|
}
|
|
|
},
|
|
|
mapform(newVal){
|
|
|
if(newVal){
|
|
|
console.log(newVal)
|
|
|
this.form.longitude = newVal[0]
|
|
|
this.form.latitude = newVal[1]
|
|
|
this.form.reside = newVal[2]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getLabel() {
|
|
|
let numbers = {
|
|
|
number:['sexList','marryList','disabilitylevelList','disabilitytypeList','educationList','relationList']
|
|
|
}
|
|
|
const res = await getparameter(numbers);
|
|
|
for(var k of res){
|
|
|
console.log(k)
|
|
|
for(var m in this.lists){
|
|
|
if(m==k.number){
|
|
|
this.lists[m] = k.detail
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
async getDetail() {
|
|
|
const res = await show({
|
|
|
id: this.id,
|
|
|
table_name: this.tableName
|
|
|
})
|
|
|
this.form = {
|
|
|
infotext: '',
|
|
|
name: res?.name,
|
|
|
nation: res?.nation,
|
|
|
sex: res?.sex,
|
|
|
marry: res?.marry,
|
|
|
birthday: res?.birthday,
|
|
|
idcard: res?.idcard,
|
|
|
mobile: res?.mobile,
|
|
|
telephone: res?.telephone,
|
|
|
education: res?.education,
|
|
|
household: res?.household,
|
|
|
address: res?.address,
|
|
|
reside: res?.reside,
|
|
|
longitude: res?.longitude,
|
|
|
latitude:res?.latitude,
|
|
|
disabilitytext: '',
|
|
|
number: res?.number,
|
|
|
disabilitytype: res?.disabilitytype,
|
|
|
disabilitylevel: res?.disabilitylevel,
|
|
|
disabilitydetail: res?.disabilitydetail,
|
|
|
start_time: res?.start_time,
|
|
|
validity: res?.validity,
|
|
|
end_time: res?.end_time,
|
|
|
end_change: res?.end_change,
|
|
|
guardiantext: '',
|
|
|
guardian: res?.guardian,
|
|
|
relationship: res?.relationship,
|
|
|
guardian_mobile: res?.guardian_mobile,
|
|
|
guardian_telephone: res?.guardian_telephone,
|
|
|
remark: res?.remark,
|
|
|
}
|
|
|
this.mapform = [res.longitude,res.latitude,res.reside]
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
submit(val) {
|
|
|
console.log(this.form)
|
|
|
// return
|
|
|
if (this.type === 'add') {
|
|
|
save({
|
|
|
table_name: this.tableName,
|
|
|
...this.form
|
|
|
}).then(res => {
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '新增成功'
|
|
|
})
|
|
|
this.isShow = false
|
|
|
this.$emit('refresh')
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (this.type === 'editor') {
|
|
|
save({
|
|
|
id: this.id,
|
|
|
table_name: this.tableName,
|
|
|
...this.form
|
|
|
}).then(res => {
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '编辑成功'
|
|
|
})
|
|
|
this.isShow = false
|
|
|
this.$emit('refresh')
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
</style>
|
