429 lines
10 KiB
Vue
429 lines
10 KiB
Vue
<template>
|
||
<div class="addPsychosisUser">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>人员类别</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-select v-model="form.type" dict="epidemicRecentPersonType" class="select"></ai-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>姓名</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入姓名" v-model="form.name" :maxlength="15" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>身份证号</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入身份证号" v-model="form.idNum" :maxlength="18" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>性别</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-select v-model="form.sex" dict="epidemicRecentPersonType" class="select"></ai-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>出生日期</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<div class="ai-area" @click="isShowEndTime = true">
|
||
<div class="ai-area__wrapper">
|
||
<span class="label" v-if="form.birthday">{{ form.birthday }}</span>
|
||
<i v-else>请选择</i>
|
||
<u-icon name="arrow-right" color="#ddd"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>联系电话</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入" v-model="form.phone" :maxlength="20" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>所属区域</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-area-picker ref="area" class="ai-area" :value="form.startAreaId" :fullName.sync="form.startAreaName" all mode="custom" @select="v => form.startAreaId = v">
|
||
<div class="ai-area__wrapper">
|
||
<span class="label" v-if="form.area">{{ form.area }}</span>
|
||
<i v-else>请选择</i>
|
||
<u-icon name="arrow-right" color="#ddd"/>
|
||
</div>
|
||
</ai-area-picker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i> </i>
|
||
<h2>详细地址</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入" v-model="form.address" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i> </i>
|
||
<h2>所属网格</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-select v-model="form.grid" dict="epidemicRecentPersonType" class="select"></ai-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 精神病患者 -->
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i> </i>
|
||
<h2>家庭年收入（万）</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入" v-model="form.income" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i></i>
|
||
<h2>发病日期</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<div class="ai-area" @click="isShowEndTime = true">
|
||
<div class="ai-area__wrapper">
|
||
<span class="label" v-if="form.birthday">{{ form.birthday }}</span>
|
||
<i v-else>请选择</i>
|
||
<u-icon name="arrow-right" color="#ddd"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i></i>
|
||
<h2>监护人姓名</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入姓名" v-model="form.name" :maxlength="15" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i></i>
|
||
<h2>监护人联系方式</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input placeholder="请输入" v-model="form.phone" type="number" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i> </i>
|
||
<h2>目前危险等级</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-select v-model="form.disableType" dict="epidemicRecentPersonType" class="select"></ai-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i> </i>
|
||
<h2>治疗情况</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<ai-select v-model="form.disableRank" dict="epidemicRecentPersonType" class="select"></ai-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height: 56px;"></div>
|
||
<div class="btn" @click="submit">保存</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AiSelect from '../../components/AiSelect'
|
||
import AiAreaPicker from '../../components/AiAreaPicker.vue'
|
||
|
||
export default {
|
||
name: 'addPsychosisUser',
|
||
|
||
data() {
|
||
return {
|
||
value: '',
|
||
form: {
|
||
type: [],
|
||
name: '',
|
||
idNum: '',
|
||
sex: [],
|
||
birthday: '',
|
||
phone: '',
|
||
address: '',
|
||
grid: '',
|
||
income: '',
|
||
marStatus: [],
|
||
healthStatus: [],
|
||
disableType: [],
|
||
disableRank: []
|
||
}
|
||
}
|
||
},
|
||
|
||
components: {
|
||
AiSelect,
|
||
AiAreaPicker
|
||
},
|
||
|
||
onLoad() {
|
||
|
||
|
||
},
|
||
|
||
onShow() {
|
||
document.title = '新增人员'
|
||
},
|
||
methods: {}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.addPsychosisUser {
|
||
height: 100%;
|
||
|
||
.form-item {
|
||
padding-left: 32px;
|
||
|
||
.form-item__checkbox {
|
||
width: 100%;
|
||
div {
|
||
width: 90%;
|
||
height: 90px;
|
||
line-height: 100px;
|
||
margin-bottom: 24px;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
border-radius: 16px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
border: 1px solid #CCCCCC;
|
||
|
||
&.active {
|
||
background: #4181FF;
|
||
color: #fff;
|
||
border-color: #4181FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item__radio {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
div {
|
||
width: 212px;
|
||
height: 90px;
|
||
line-height: 90px;
|
||
margin-right: 16px;
|
||
margin-bottom: 8px;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
border-radius: 16px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
border: 1px solid #CCCCCC;
|
||
|
||
&:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.active {
|
||
background: #4181FF;
|
||
color: #fff;
|
||
border-color: #4181FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ai-area__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 100px;
|
||
|
||
span {
|
||
color: #333;
|
||
font-size: 30px;
|
||
}
|
||
|
||
i {
|
||
color: #999;
|
||
font-size: 30px;
|
||
font-style: initial;
|
||
}
|
||
|
||
image {
|
||
width: 16px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
|
||
.form-item__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 90px;
|
||
padding-right: 28px;
|
||
border-bottom: 1px solid #DDDDDD;
|
||
|
||
input {
|
||
flex: 1;
|
||
height: 100%;
|
||
text-align: right;
|
||
color: #333;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.form-item__right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32px;
|
||
|
||
.select {
|
||
._i {
|
||
padding-left: 100px;
|
||
}
|
||
}
|
||
|
||
span {
|
||
max-width: 400px;
|
||
margin-right: 8px;
|
||
color: #333333;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
i {
|
||
margin-right: 8px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
.form-item__wrapper {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.form-item__title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
font-size: 32px;
|
||
color: #FF4466;
|
||
}
|
||
|
||
span {
|
||
font-size: 28px;
|
||
color: #999999;
|
||
}
|
||
|
||
h2 {
|
||
padding: 0 4px;
|
||
font-weight: 400;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
|
||
&.form-item__imgs, &.form-item__textarea {
|
||
.form-item__wrapper {
|
||
display: block;
|
||
height: auto;
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 90px;
|
||
}
|
||
|
||
.form-item__title {
|
||
padding: 32px 0;
|
||
}
|
||
|
||
.form-item__right {
|
||
padding-left: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
background: #1365dd;
|
||
text-align: center;
|
||
font-size: 32px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
</style> |