新增特殊人员
This commit is contained in:
shijingjing
@@ -1,8 +1,171 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
<ai-select v-model="form.marStatus" 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.healthStatus" 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.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 class="btn" @click="submit">保存</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,42 +179,24 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
forms: {
|
||||
type: '',
|
||||
areaId: '',
|
||||
selectIndex: '',
|
||||
files: []
|
||||
},
|
||||
selectType: false,
|
||||
marriageType: false,
|
||||
healthType: false,
|
||||
disableRank: false,
|
||||
selectShow: false,
|
||||
list: [],
|
||||
marriageList: [],
|
||||
healthList: [],
|
||||
disableList: [],
|
||||
rankList: [
|
||||
{
|
||||
text: '一级',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '二级',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: '三级',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: '综合',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
|
||||
form: {
|
||||
type: [],
|
||||
name: '',
|
||||
idNum: '',
|
||||
sex: [],
|
||||
birthday: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
grid: '',
|
||||
income: '',
|
||||
marStatus: [],
|
||||
healthStatus: [],
|
||||
disableType: [],
|
||||
disableRank: []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {},
|
||||
|
||||
onShow() {
|
||||
@@ -66,6 +211,176 @@ export default {
|
||||
.add {
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user