|
@@ -2,7 +2,7 @@
|
|
|
<view>
|
|
|
<up-form labelPosition="left" :model="modelForm" :rules="rulesForm" ref="formRef">
|
|
|
<up-form-item label="姓名" prop="name" borderBottom>
|
|
|
- <up-input v-model="modelForm.name" border="none"></up-input>
|
|
|
+ <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="请选择性别"
|
|
@@ -22,29 +22,33 @@
|
|
|
<up-input v-model="modelForm.age" border="none"></up-input>
|
|
|
</up-form-item>
|
|
|
<up-form-item label="手机号" prop="telephone" borderBottom
|
|
|
- :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }">
|
|
|
- <up-input v-model="modelForm.telephone" border="none"></up-input>
|
|
|
+ :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }" labelWidth="60">
|
|
|
+ <up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
|
|
|
</up-form-item>
|
|
|
|
|
|
- <up-form-item label="是否有传染疾病" prop="isContagion" borderBottom>
|
|
|
- <up-radio-group v-model="modelForm.isContagion" placement="row" @change="groupChange">
|
|
|
- <up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption" :key="index"
|
|
|
- :label="item.name" :name="item.name" @change="radioChange">
|
|
|
+ <up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="240">
|
|
|
+ <up-radio-group v-model="modelForm.isContagion" placement="row">
|
|
|
+ <up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption"
|
|
|
+ :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-icon name="arrow-right"></up-icon>
|
|
|
- <pickerAddress @change="addressChange" :selectValue="[ modelForm.area.provinceCode, modelForm.area.cityCode, modelForm.area.areaCode ]">
|
|
|
- <view class="inp" :class="modelForm.area.province&&modelForm.area.city&&modelForm.area.area?'':'address-inp'">
|
|
|
- {{modelForm.area.province ? modelForm.area.province:'省'}} /
|
|
|
- {{modelForm.area.city ? modelForm.area.city:'市'}} /
|
|
|
- {{modelForm.area.area ? modelForm.area.area:'区'}}
|
|
|
+ <pickerAddress @change="addressChange"
|
|
|
+ :selectValue="[ modelForm.provinceCode, modelForm.cityCode, modelForm.districtCode ]">
|
|
|
+ <view class="inp"
|
|
|
+ :class="modelForm.provinceName&&modelForm.cityName&&modelForm.districtName?'':'address-inp'">
|
|
|
+ {{modelForm.provinceName ? modelForm.provinceName:'省'}} /
|
|
|
+ {{modelForm.cityName ? modelForm.cityName:'市'}} /
|
|
|
+ {{modelForm.districtName ? modelForm.districtName:'区'}}
|
|
|
</view>
|
|
|
</pickerAddress>
|
|
|
+ <template #right>
|
|
|
+ <up-icon name="arrow-right"></up-icon>
|
|
|
+ </template>
|
|
|
</up-form-item>
|
|
|
<up-form-item label="地址" prop="address" borderBottom>
|
|
|
- <up-input v-model="modelForm.address" border="none"></up-input>
|
|
|
+ <up-input v-model="modelForm.address" border="none" placeholder="请输入地址"></up-input>
|
|
|
</up-form-item>
|
|
|
</up-form>
|
|
|
<up-action-sheet :show="sexFlag" :actions="sexOptions" @select="sexSelect"
|
|
@@ -52,7 +56,6 @@
|
|
|
<up-action-sheet :show="labelFlag" :actions="relaTionsHip" @select="sexSelectsHip"
|
|
|
@close="labelFlag = false"></up-action-sheet>
|
|
|
</view>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -61,7 +64,6 @@
|
|
|
reactive
|
|
|
} from 'vue';
|
|
|
import pickerAddress from '@/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
|
|
|
-
|
|
|
const formRef = ref(null)
|
|
|
const modelForm = ref({
|
|
|
name: '',
|
|
@@ -70,17 +72,19 @@
|
|
|
age: '',
|
|
|
telephone: '',
|
|
|
isContagion: '',
|
|
|
- area: { // xxxxCode 储存所在数据下标,用来映射回显数据
|
|
|
- province: '', // 省
|
|
|
- provinceCode: 0,
|
|
|
- city: '', // 市
|
|
|
- cityCode: 0,
|
|
|
- area: '', // 区
|
|
|
- areaCode: 0
|
|
|
- },
|
|
|
+
|
|
|
+ provinceName: '', // 省
|
|
|
+ provinceCode: 0,
|
|
|
+
|
|
|
+ cityName: '', // 市
|
|
|
+ cityCode: 0,
|
|
|
+
|
|
|
+ districtName: '',
|
|
|
+ districtCode: 0,
|
|
|
+
|
|
|
address: ''
|
|
|
})
|
|
|
-
|
|
|
+ // 回显把provinceName,cityName,districtName字段拼接
|
|
|
const rulesForm = ref({
|
|
|
name: {
|
|
|
type: 'string',
|
|
@@ -107,26 +111,23 @@
|
|
|
trigger: ['blur', 'change'],
|
|
|
},
|
|
|
telephone: {
|
|
|
- type: 'string',
|
|
|
- required: true,
|
|
|
- message: '请填写手机号',
|
|
|
- trigger: ['blur', 'change'],
|
|
|
- },
|
|
|
+ type: 'string',
|
|
|
+ required: true,
|
|
|
+ message: '请填写手机号',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
let sexFlag = ref(false)
|
|
|
let labelFlag = ref(false)
|
|
|
let addressShow = ref(false)
|
|
|
-
|
|
|
- const sexOptions = ref([
|
|
|
- {
|
|
|
- name: '男'
|
|
|
- }, {
|
|
|
- name: '女'
|
|
|
- },
|
|
|
- ]);
|
|
|
- const isContagionOption = ref([
|
|
|
- {
|
|
|
+
|
|
|
+ const sexOptions = ref([{
|
|
|
+ name: '男'
|
|
|
+ }, {
|
|
|
+ name: '女'
|
|
|
+ }, ]);
|
|
|
+ const isContagionOption = ref([{
|
|
|
name: '是',
|
|
|
key: 1,
|
|
|
disabled: false,
|
|
@@ -137,8 +138,7 @@
|
|
|
disabled: false,
|
|
|
}
|
|
|
])
|
|
|
- const relaTionsHip = ref([
|
|
|
- {
|
|
|
+ const relaTionsHip = ref([{
|
|
|
name: '父母'
|
|
|
}, {
|
|
|
name: '子女'
|
|
@@ -159,53 +159,40 @@
|
|
|
name: '配偶'
|
|
|
}
|
|
|
]);
|
|
|
-
|
|
|
-
|
|
|
- function groupChange (n) {
|
|
|
- console.log('groupChange', n);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function radioChange (n) {
|
|
|
- console.log('radioChange', n);
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
function sexSelect(e) {
|
|
|
modelForm.value.sex = e.name;
|
|
|
sexFlag.value = false;
|
|
|
}
|
|
|
-
|
|
|
function sexSelectsHip(e) {
|
|
|
modelForm.value.label = e.name;
|
|
|
labelFlag.value = false;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function addressChange(data) {
|
|
|
-
|
|
|
+
|
|
|
console.log(data, '>>>>data');
|
|
|
-
|
|
|
- let { data:date, index } = data
|
|
|
- modelForm.value.area.province = date[0]
|
|
|
- modelForm.value.area.provinceCode = index[0]
|
|
|
-
|
|
|
- modelForm.value.area.city = date[1]
|
|
|
- modelForm.value.area.cityCode = index[1]
|
|
|
-
|
|
|
- modelForm.value.area.area = date[2]
|
|
|
- modelForm.value.area.areaCode = index[2]
|
|
|
-
|
|
|
+
|
|
|
+ modelForm.value.provinceName = date[0]
|
|
|
+ modelForm.value.provinceCode = index[0]
|
|
|
+
|
|
|
+ modelForm.value.cityName = date[1]
|
|
|
+ modelForm.value.cityCode = index[1]
|
|
|
+
|
|
|
+ modelForm.value.districtName = date[2]
|
|
|
+ modelForm.value.districtCode = index[2]
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 预留校验函数
|
|
|
function handleVerify() {
|
|
|
// formRef.value
|
|
|
}
|
|
|
-
|
|
|
defineExpose({
|
|
|
modelForm: modelForm.value,
|
|
|
handleVerify: handleVerify()
|
|
|
})
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style>
|