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