|
@@ -1,41 +1,43 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<up-form labelPosition="left" :model="modelForm" :rules="rulesForm" ref="formRef">
|
|
|
- <up-form-item label="姓名" prop="name" borderBottom>
|
|
|
+ <up-form-item label="姓名" prop="name" borderBottom labelWidth="70">
|
|
|
<up-input v-model="modelForm.name" border="none" placeholder="请输入姓名"></up-input>
|
|
|
</up-form-item>
|
|
|
- <up-form-item label="性别" prop="sex" borderBottom @click="() => (sexFlag = true)">
|
|
|
- <up-input v-model="modelForm.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
|
|
+ <up-form-item label="性别" prop="sex" borderBottom @click="() => (sexFlag = true)" labelWidth="70">
|
|
|
+ <up-input v-model="displaySex" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
|
|
border="none"></up-input>
|
|
|
<template #right>
|
|
|
<up-icon name="arrow-right"></up-icon>
|
|
|
</template>
|
|
|
</up-form-item>
|
|
|
- <up-form-item label="关系" prop="label" borderBottom @click="() => labelFlag = true">
|
|
|
+ <up-form-item label="关系" prop="label" borderBottom @click="() => labelFlag = true" labelWidth="70">
|
|
|
<up-input v-model="modelForm.label" disabled disabledColor="#ffffff" placeholder="请选择关系"
|
|
|
border="none"></up-input>
|
|
|
<template #right>
|
|
|
<up-icon name="arrow-right"></up-icon>
|
|
|
</template>
|
|
|
</up-form-item>
|
|
|
- <up-form-item label="年龄" prop="age" borderBottom>
|
|
|
- <up-input v-model="modelForm.age" border="none"></up-input>
|
|
|
+ <up-form-item label="年龄" prop="age" borderBottom labelWidth="70">
|
|
|
+ <up-input v-model="modelForm.age" border="none" placeholder="请输入年龄"></up-input>
|
|
|
</up-form-item>
|
|
|
<up-form-item label="手机号" prop="telephone" borderBottom
|
|
|
- :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }" labelWidth="60">
|
|
|
+ :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }" labelWidth="70">
|
|
|
<up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
|
|
|
</up-form-item>
|
|
|
-
|
|
|
- <up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="240">
|
|
|
- <up-radio-group v-model="modelForm.isContagion" placement="row">
|
|
|
+ <up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="150">
|
|
|
+ <up-radio-group v-model="modelForm.isContagion" placement="row" @change="handleContagionChange">
|
|
|
<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption"
|
|
|
- :key="index" :label="item.name" :name="item.key">
|
|
|
- </up-radio>
|
|
|
+ :key="index" :label="item.name" :name="item.key"></up-radio>
|
|
|
</up-radio-group>
|
|
|
</up-form-item>
|
|
|
- <up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true">
|
|
|
+ <up-form-item v-show="showContagionContent" label="传染病内容" prop="haveContagion" borderBottom
|
|
|
+ labelWidth="100">
|
|
|
+ <up-input v-model="modelForm.haveContagion" border="none" placeholder="请输入传染病内容"></up-input>
|
|
|
+ </up-form-item>
|
|
|
+ <up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true" labelWidth="70">
|
|
|
<pickerAddress @change="addressChange"
|
|
|
- :selectValue="[ modelForm.provinceCode, modelForm.cityCode, modelForm.districtCode ]">
|
|
|
+ :selectValue="[ modelForm.provinceInd, modelForm.cityInd, modelForm.districtInd ]">
|
|
|
<view class="inp"
|
|
|
:class="modelForm.provinceName&&modelForm.cityName&&modelForm.districtName?'':'address-inp'">
|
|
|
{{modelForm.provinceName ? modelForm.provinceName:'省'}} /
|
|
@@ -47,7 +49,7 @@
|
|
|
<up-icon name="arrow-right"></up-icon>
|
|
|
</template>
|
|
|
</up-form-item>
|
|
|
- <up-form-item label="地址" prop="address" borderBottom>
|
|
|
+ <up-form-item label="地址" prop="address" borderBottom labelWidth="70">
|
|
|
<up-input v-model="modelForm.address" border="none" placeholder="请输入地址"></up-input>
|
|
|
</up-form-item>
|
|
|
</up-form>
|
|
@@ -61,7 +63,8 @@
|
|
|
<script setup>
|
|
|
import {
|
|
|
ref,
|
|
|
- reactive
|
|
|
+ reactive,
|
|
|
+ computed
|
|
|
} from 'vue';
|
|
|
import pickerAddress from '@/pages_mine/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
|
|
|
const formRef = ref(null)
|
|
@@ -72,15 +75,19 @@
|
|
|
age: '',
|
|
|
telephone: '',
|
|
|
isContagion: '',
|
|
|
+ haveContagion: '',
|
|
|
|
|
|
provinceName: '', // 省
|
|
|
- provinceCode: 0,
|
|
|
+ provinceCode: '',
|
|
|
+ provinceInd: 0,
|
|
|
|
|
|
cityName: '', // 市
|
|
|
- cityCode: 0,
|
|
|
+ cityCode: '',
|
|
|
+ cityInd: 0,
|
|
|
|
|
|
districtName: '',
|
|
|
- districtCode: 0,
|
|
|
+ districtCode: '',
|
|
|
+ districtInd: 0,
|
|
|
|
|
|
address: ''
|
|
|
})
|
|
@@ -121,12 +128,18 @@
|
|
|
let sexFlag = ref(false)
|
|
|
let labelFlag = ref(false)
|
|
|
let addressShow = ref(false)
|
|
|
+ let index = ref(0)
|
|
|
+ // 新增一个响应式变量,控制传染病内容的显示
|
|
|
+ const showContagionContent = ref(false);
|
|
|
|
|
|
const sexOptions = ref([{
|
|
|
- name: '男'
|
|
|
+ name: '男',
|
|
|
+ value: 0,
|
|
|
}, {
|
|
|
- name: '女'
|
|
|
+ name: '女',
|
|
|
+ value: 1,
|
|
|
}, ]);
|
|
|
+
|
|
|
const isContagionOption = ref([{
|
|
|
name: '是',
|
|
|
key: 1,
|
|
@@ -160,31 +173,59 @@
|
|
|
}
|
|
|
]);
|
|
|
|
|
|
-
|
|
|
+ const displaySex = computed({
|
|
|
+ get() {
|
|
|
+ const option = sexOptions.value.find(item => item.value === modelForm.value.sex)
|
|
|
+ return option ? option.name : ''
|
|
|
+ },
|
|
|
+ set(newValue) {
|
|
|
+ const option = sexOptions.value.find(item => item.name === newValue)
|
|
|
+ if (option) {
|
|
|
+ modelForm.value.sex = option.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 性别选择处理
|
|
|
function sexSelect(e) {
|
|
|
- modelForm.value.sex = e.name;
|
|
|
- sexFlag.value = false;
|
|
|
+ modelForm.value.sex = e.value
|
|
|
+ sexFlag.value = false
|
|
|
}
|
|
|
+
|
|
|
function sexSelectsHip(e) {
|
|
|
modelForm.value.label = e.name;
|
|
|
labelFlag.value = false;
|
|
|
}
|
|
|
|
|
|
- function addressChange(data) {
|
|
|
+ function addressChange(info) {
|
|
|
+
|
|
|
+ console.log(info, '>>>>data');
|
|
|
|
|
|
- console.log(data, '>>>>data');
|
|
|
+ const {
|
|
|
+ data,
|
|
|
+ code,
|
|
|
+ index
|
|
|
+ } = info
|
|
|
|
|
|
- modelForm.value.provinceName = date[0]
|
|
|
- modelForm.value.provinceCode = index[0]
|
|
|
+ modelForm.value.provinceName = data[0]
|
|
|
+ modelForm.value.provinceCode = code[0]
|
|
|
+ modelForm.value.provinceInd = index[0]
|
|
|
|
|
|
- modelForm.value.cityName = date[1]
|
|
|
- modelForm.value.cityCode = index[1]
|
|
|
+ modelForm.value.cityName = data[1]
|
|
|
+ modelForm.value.cityCode = code[1]
|
|
|
+ modelForm.value.cityInd = index[1]
|
|
|
|
|
|
- modelForm.value.districtName = date[2]
|
|
|
- modelForm.value.districtCode = index[2]
|
|
|
+ modelForm.value.districtName = data[2]
|
|
|
+ modelForm.value.districtCode = code[2]
|
|
|
+ modelForm.value.districtInd = index[2]
|
|
|
|
|
|
}
|
|
|
|
|
|
+ function handleContagionChange(value) {
|
|
|
+ showContagionContent.value = value === 1; // 显示传染病内容输入框
|
|
|
+ if (value === 0) {
|
|
|
+ modelForm.value.haveContagion = ''; // 清空输入框
|
|
|
+ }
|
|
|
+ }
|
|
|
// 预留校验函数
|
|
|
function handleVerify() {
|
|
|
// formRef.value
|