目录代码整合
This commit is contained in:
aixianling
235
packages/conv/AppVaccination/addVaccination.vue
Normal file
235
packages/conv/AppVaccination/addVaccination.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user