236 lines
8.1 KiB
Vue
236 lines
8.1 KiB
Vue
<template>
|
|
<section class="addVaccination">
|
|
<ai-detail>
|
|
<ai-title slot="title" :title="addTitle" isShowBottomBorder
|
|
isShowBack @onBackClick="back"/>
|
|
<template #content>
|
|
<el-form size="small" :model="form" ref="vaccinationForm" :rules="rules" label-width="100px">
|
|
<ai-card title="基本信息">
|
|
<template #content>
|
|
<el-form-item label="受种人姓名" prop="name">
|
|
<el-row type="flex" align="middle">
|
|
<el-input placeholder="请输入" v-model="form.name" :disabled="isEdit" clearable
|
|
style="margin-right: 8px"/>
|
|
<ai-person-select v-if="!isEdit" :instance="instance" @selectPerson="handleSelectPerson"/>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号码" prop="idNumber">
|
|
<ai-id v-model="form.idNumber" @change="getInfoByIdNumber" :disabled="isEdit"/>
|
|
</el-form-item>
|
|
<el-form-item label="性别" prop="sex">
|
|
<ai-select disabled v-model="form.sex" :selectList="dict.getDict('sex')"/>
|
|
</el-form-item>
|
|
<el-form-item label="出生日期" prop="birthday">
|
|
<el-date-picker v-model="form.birthday" type="date" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="联系方式" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入"/>
|
|
</el-form-item>
|
|
<el-form-item label="所属地区" isLine prop="areaId">
|
|
<ai-area-select :instance="instance" v-model="form.areaId" always-show @name="v=>form.areaName=v"/>
|
|
</el-form-item>
|
|
<el-form-item label="住址" isLine prop="address">
|
|
<el-input v-model="form.address" placeholder="请输入"/>
|
|
</el-form-item>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="接种情况">
|
|
<template #right>
|
|
<el-button icon="iconfont iconAdd" type="text" @click="dialog=true">添加</el-button>
|
|
</template>
|
|
<template #content>
|
|
<el-form-item isLine label-width="0">
|
|
<ai-table :tableData="form.detailList" :colConfigs="colConfigs" :isShowPagination="false" :dict="dict">
|
|
<el-table-column slot="options" label="操作" align="center" fixed="right">
|
|
<template v-slot="{row,$index}">
|
|
<el-button type="text" @click="handleEdit(row,$index)">编辑</el-button>
|
|
<el-button type="text" @click="handleDelete($index)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</el-form-item>
|
|
</template>
|
|
</ai-card>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<el-button @click="back">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
|
</template>
|
|
</ai-detail>
|
|
<ai-dialog :visible.sync="dialog" title="接种情况" @closed="dialogForm={}" @onConfirm="handleConfirm">
|
|
<el-form ref="appvaccineinoculationuser" size="small" :model="dialogForm" label-width="100px" :rules="rules">
|
|
<el-form-item label="接种次数" prop="type">
|
|
<ai-select v-model="dialogForm.type" :selectList="dict.getDict('vaccineType')"/>
|
|
</el-form-item>
|
|
<el-form-item label="接种日期" prop="vaccinateDate">
|
|
<el-date-picker v-model="dialogForm.vaccinateDate" value-format="yyyy-MM-dd"/>
|
|
</el-form-item>
|
|
<el-form-item label="接种人员" prop="vaccinatePerson">
|
|
<el-input v-model="dialogForm.vaccinatePerson"/>
|
|
</el-form-item>
|
|
<el-form-item label="生产企业" prop="createCompany">
|
|
<el-input v-model="dialogForm.createCompany"/>
|
|
</el-form-item>
|
|
<el-form-item label="接种单位" prop="vaccinateUnit">
|
|
<el-input v-model="dialogForm.vaccinateUnit"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "addVaccination",
|
|
inject: ['top'],
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {detailList: []},
|
|
dialog: false,
|
|
dialogForm: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
isEdit() {
|
|
return !!this.$route.query.id
|
|
},
|
|
addTitle() {
|
|
return this.isEdit ? '编辑疫苗接种人员' : '新增疫苗接种人员'
|
|
},
|
|
rules() {
|
|
return {
|
|
vaccinateDate: {required: true, message: "请选择 接种日期"},
|
|
type: {required: true, message: "请选择 接种次数",},
|
|
areaId: [
|
|
{required: true, message: "请选择 所属地区"},
|
|
{trigger:'blur',validator: (r, v, cb) => /0{3}$/g.test(v) ? cb('请选择到村/社区') : cb()}
|
|
],
|
|
name: {required: true, message: "请填写 受种人姓名"},
|
|
idNumber: {required: true, message: "请填写 身份号码"},
|
|
sex: {required: true, message: "请填写 性别"},
|
|
birthday: {required: true, message: "请填写 出生日期"},
|
|
phone: {required: true, message: "请填写 联系方式"},
|
|
}
|
|
},
|
|
colConfigs() {
|
|
return [
|
|
{label: "类型", align: 'center', prop: "type", dict: 'vaccineType'},
|
|
{label: "接种日期", align: 'center', prop: "vaccinateDate"},
|
|
{label: "接种人员", align: 'center', prop: "vaccinatePerson"},
|
|
{label: "生产企业", align: 'center', prop: "createCompany"},
|
|
{label: "接种单位", align: 'center', prop: "vaccinateUnit"},
|
|
{slot: "options"}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
this.$router.push({})
|
|
},
|
|
getDetail() {
|
|
let {id} = this.$route.query
|
|
if (id) {
|
|
this.instance.post("/app/appvaccineinoculationuser/queryDetailById", null, {
|
|
params: {id}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.form = res.data
|
|
}
|
|
})
|
|
} else {
|
|
this.$set(this.form,'areaId',JSON.parse(JSON.stringify(this.top.areaId)))
|
|
}
|
|
},
|
|
handleSubmit() {
|
|
this.$refs.vaccinationForm?.validate(v => {
|
|
if (v) {
|
|
this.instance.post("/app/appvaccineinoculationuser/addOrUpdate", this.form).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("提交成功!")
|
|
this.top.resetSearch()
|
|
this.back()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleEdit(row, index) {
|
|
this.dialogForm = JSON.parse(JSON.stringify({...row, index}))
|
|
this.dialog = true
|
|
},
|
|
handleConfirm() {
|
|
this.$refs.appvaccineinoculationuser.validate(v => {
|
|
if (v) {
|
|
if (this.dialogForm.index > -1) {
|
|
this.form.detailList.splice(this.dialogForm.index, 1, this.dialogForm)
|
|
} else {
|
|
this.form.detailList.push(this.dialogForm)
|
|
}
|
|
this.dialog = false
|
|
}
|
|
})
|
|
},
|
|
handleSelectPerson(v) {
|
|
let {name, idNumber, phone, currentAreaId:areaId, currentAddress:address} = v
|
|
this.form = {...this.form, name, idNumber, phone, areaId, address}
|
|
},
|
|
getInfoByIdNumber(code) {
|
|
if (this.idCardNoUtil.checkIdCardNo(code)) {
|
|
let info = this.idCardNoUtil.getIdCardInfo(code)
|
|
this.form.sex = this.dict.getValue('sex', info.gender)
|
|
this.form.birthday = info.birthday
|
|
this.$forceUpdate()
|
|
}
|
|
},
|
|
handleDelete(index) {
|
|
this.$confirm("是否要删除该条数据?").then(() => this.form.detailList.splice(index, 1)).catch(() => 0)
|
|
}
|
|
},
|
|
created() {
|
|
this.dict.load('vaccineType')
|
|
this.getDetail()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.addVaccination {
|
|
height: 100%;
|
|
|
|
::v-deep .ai-card__body, .el-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ai-card {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-form-item {
|
|
width: 50%;
|
|
|
|
&[isLine] {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-date-editor {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
.iconfont {
|
|
color: inherit
|
|
}
|
|
}
|
|
}
|
|
</style>
|