|
|
@@ -0,0 +1,321 @@
|
|
|
+<template>
|
|
|
+ <div class="main_bg">
|
|
|
+ <van-nav-bar title="信息采集" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
|
|
|
+ <h3>家庭及监护状况</h3>
|
|
|
+ <div class="page">
|
|
|
+ <van-row class="cell">
|
|
|
+ <van-col span="6">家庭类型<span>*</span>：</van-col>
|
|
|
+ <van-col span="18">
|
|
|
+ <van-field-checkbox
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="familyTypeStr"
|
|
|
+ :isSearch="false"
|
|
|
+ :columns="familyList"
|
|
|
+ label-width="100"
|
|
|
+ :option="{label:'text', value:'value'}"
|
|
|
+ @confirm="onFamilyShow"
|
|
|
+ />
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <div class="cell_2">
|
|
|
+ <van-cell title="家庭状况">
|
|
|
+ <template #right-icon>
|
|
|
+ <van-button icon="plus" type="primary" size="small" @click="onAddClick(1)">添加</van-button>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-swipe-cell v-for="(item,index) in familyMembers" :key="index">
|
|
|
+ <van-cell center is-link @click="onCellClick(1,index,item)">
|
|
|
+ <template #title>
|
|
|
+ <span class="custom-title">{{item.name}}</span>
|
|
|
+ <span class="custom-title">{{ item.relation }}</span>
|
|
|
+ <span class="custom-title">{{ item.mobile }}</span>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <span class="custom-title">{{ item.address }}</span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <template #right>
|
|
|
+ <van-button square type="danger" text="删除" />
|
|
|
+ </template>
|
|
|
+ </van-swipe-cell>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cell_2">
|
|
|
+ <van-cell title="监护状况">
|
|
|
+ <template #right-icon>
|
|
|
+ <van-button icon="plus" type="primary" size="small" @click="onAddClick(2)">添加</van-button>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-swipe-cell v-for="(item,index) in guardians" :key="index">
|
|
|
+ <van-cell center is-link @click="onCellClick(2,index,item)">
|
|
|
+ <template #title>
|
|
|
+ <span class="custom-title">{{item.name}}</span>
|
|
|
+ <span class="custom-title">{{ item.relation }}</span>
|
|
|
+ <span class="custom-title">{{ item.mobile }}</span>
|
|
|
+ </template>
|
|
|
+ <template #label>
|
|
|
+ <span class="custom-title">{{ item.address }}</span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <template #right>
|
|
|
+ <van-button square type="danger" text="删除" />
|
|
|
+ </template>
|
|
|
+ </van-swipe-cell>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="but">
|
|
|
+ <van-button native-type="submit" @click="onSubmitClick">提 交</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-overlay :show="showoOverlay">
|
|
|
+ <van-loading size="24px" vertical>正在提交...</van-loading>
|
|
|
+ </van-overlay>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import vanFieldCheckbox from '../../components/vanFieldCheckbox.vue'
|
|
|
+import {createChildBaseInfo} from '../../api/index.js'
|
|
|
+export default {
|
|
|
+ components: {vanFieldCheckbox},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isEdit:false,
|
|
|
+ type:-1, //家庭状况 监护状况
|
|
|
+ cellIndex:-1, //点击的哪一行
|
|
|
+ form:'',
|
|
|
+ familyType:'',
|
|
|
+ familyShow:false,
|
|
|
+ familyTypeStr:[],
|
|
|
+ showoOverlay:false,
|
|
|
+ familyList:[
|
|
|
+ {
|
|
|
+ text:'核心家庭',
|
|
|
+ value:'1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'主干家庭',
|
|
|
+ value:'2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'联合家庭',
|
|
|
+ value:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'再婚家庭',
|
|
|
+ value:'4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'单亲家庭',
|
|
|
+ value:'5'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ familyMembers:[
|
|
|
+ // {
|
|
|
+ // name:'张达日',
|
|
|
+ // relation:'父子',
|
|
|
+ // mobile:'18810511323',
|
|
|
+ // address:'山东省滨州市邹平市九户镇西河沟村15号邹平市九户镇西河沟村15号',
|
|
|
+ // postalCode:'222888'
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ guardians:[
|
|
|
+ // {
|
|
|
+ // name:'张达日',
|
|
|
+ // relation:'父子',
|
|
|
+ // mobile:'18810511323',
|
|
|
+ // address:'山东省滨州市邹平市九户镇西河沟村15号邹平市九户镇西河沟村15号',
|
|
|
+ // postalCode:'222888'
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route.path': {
|
|
|
+ handler(toPath, fromPath){
|
|
|
+ if(fromPath == '/collect/inforMation') {
|
|
|
+ if(!this.isEdit) {
|
|
|
+ if(this.type == '1') {
|
|
|
+ // 家庭状况
|
|
|
+ localStorage.getItem('infoForm') && this.familyMembers.push(JSON.parse(localStorage.getItem('infoForm')))
|
|
|
+
|
|
|
+ }else if(this.type == '2') {
|
|
|
+ localStorage.getItem('infoForm') && this.guardians.push(JSON.parse(localStorage.getItem('infoForm')))
|
|
|
+ }
|
|
|
+ localStorage.setItem('infoForm', '')
|
|
|
+ }else {
|
|
|
+ // 编辑
|
|
|
+ if(this.type == '1') {
|
|
|
+ this.familyMembers.splice(this.cellIndex,1,localStorage.getItem('infoForm') && JSON.parse(localStorage.getItem('infoForm')))
|
|
|
+ console.log(this.familyMembers)
|
|
|
+ }else if(this.type == '2') {
|
|
|
+ this.guardians.splice(this.cellIndex,1,localStorage.getItem('infoForm') && JSON.parse(localStorage.getItem('infoForm')))
|
|
|
+ }
|
|
|
+ localStorage.setItem('infoForm', '')
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true, // 深度监听
|
|
|
+ immediate: true, // 第一次初始化渲染就可以监听到
|
|
|
+ },
|
|
|
+ '$route': {
|
|
|
+ immediate: false,
|
|
|
+ handler: function(to, from) {
|
|
|
+ //拿到目标参数 to.query.id 去再次请求数据接口
|
|
|
+ if(to && to.path == '/collect/family' && from && from.path == '/collect/index') {
|
|
|
+ this.form = to.query.form
|
|
|
+ console.log('$route form::' + JSON.stringify(to.query.form));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.form = this.$route.query.form
|
|
|
+ console.log('mounted form:')
|
|
|
+ console.log(this.$route.query.form)
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 家庭类型选择
|
|
|
+ onFamilyShow(label,value) {
|
|
|
+ this.familyType = value
|
|
|
+ },
|
|
|
+ // 添加
|
|
|
+ onAddClick(index) {
|
|
|
+ this.isEdit = false
|
|
|
+ this.type = index
|
|
|
+ this.$router.push({
|
|
|
+ path:'/collect/inforMation',
|
|
|
+ query:{
|
|
|
+ 'type':index,
|
|
|
+ 'value':'',
|
|
|
+ "isEdit":false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 每一行点击
|
|
|
+ onCellClick(type,index,item) {
|
|
|
+ this.isEdit = true
|
|
|
+ this.type = type
|
|
|
+ this.cellIndex = index
|
|
|
+ this.$router.push({
|
|
|
+ path:'/collect/inforMation',
|
|
|
+ query:{
|
|
|
+ 'type':index,
|
|
|
+ 'value':JSON.parse(JSON.stringify(item)),
|
|
|
+ "isEdit":true
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ async onSubmitClick() {
|
|
|
+ console.log('111111')
|
|
|
+ console.log(this.form)
|
|
|
+ console.log(this.familyType)
|
|
|
+ console.log(this.familyMembers)
|
|
|
+ console.log(this.guardians)
|
|
|
+ console.log('22222222')
|
|
|
+
|
|
|
+ let data =this.form
|
|
|
+ data.familyType = this.familyType
|
|
|
+ data.familyMembers =this.familyMembers
|
|
|
+ data.guardians =this.guardians
|
|
|
+ this.showoOverlay = true
|
|
|
+ const res = await createChildBaseInfo(data)
|
|
|
+ this.showoOverlay = false
|
|
|
+ if (res.code == '0000') {
|
|
|
+ this.$toast.success('成功')
|
|
|
+ this.$router.go(-2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main_bg {
|
|
|
+ padding: 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .page {
|
|
|
+ .van-row {
|
|
|
+ font-size: 30px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ height: 80px;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .van-cell::after {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .cell {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .van-col {
|
|
|
+ min-height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ color: #f62a59;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ font-size: 25px;
|
|
|
+ background-color: #1677ff;
|
|
|
+ .van-button__text {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cell_2 {
|
|
|
+ min-height: 130px;
|
|
|
+ padding: 3px 8px 3px 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .van-swipe-cell {
|
|
|
+ height:auto;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom:40px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ .van-button {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ height: auto;
|
|
|
+ span {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-swipe-cell:nth-child(2) {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .van-swipe-cell:last-child {
|
|
|
+ margin-bottom:20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .but {
|
|
|
+ text-align: center;
|
|
|
+ .van-button {
|
|
|
+ width: 620px;
|
|
|
+ margin: 24px auto;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #1677ff;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
