|
|
@@ -8,19 +8,31 @@
|
|
|
</route>
|
|
|
|
|
|
<template>
|
|
|
- <view class="appointment">
|
|
|
+ <view class="appointment px-2">
|
|
|
<view class="appointment-form">
|
|
|
- <uv-form labelPosition="left" :model="formList" ref="formRef">
|
|
|
- <uv-form-item label="选择医疗项目" prop="userInfo.name" borderBottom>
|
|
|
- <uv-input border="none"></uv-input>
|
|
|
- </uv-form-item>
|
|
|
- <uv-form-item label="选择检查时间" prop="userInfo.name" borderBottom>
|
|
|
- <uv-input border="none"></uv-input>
|
|
|
- </uv-form-item>
|
|
|
- </uv-form>
|
|
|
+ <wd-form ref="form" :model="formList">
|
|
|
+ <wd-cell-group border>
|
|
|
+ <template v-for="(item, index) in formList" :key="index">
|
|
|
+ <view class="form-item mt-4">
|
|
|
+ <wd-picker
|
|
|
+ :columns="columns"
|
|
|
+ label="选择医疗项目"
|
|
|
+ v-model="item.name"
|
|
|
+ :rules="[{ required: true, message: '请选择医疗项目' }]"
|
|
|
+ />
|
|
|
+ <wd-datetime-picker
|
|
|
+ type="time"
|
|
|
+ v-model="item.time"
|
|
|
+ label="选择器检查时间"
|
|
|
+ :rules="[{ required: true, message: '请选择检查时间' }]"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </wd-cell-group>
|
|
|
+ </wd-form>
|
|
|
</view>
|
|
|
<view class="appointment-footer flex items-center justify-around mt-80rpx">
|
|
|
- <uv-button type="error" text="增加一个新项目"></uv-button>
|
|
|
+ <uv-button type="error" text="增加一个新项目" @click="addFormItem"></uv-button>
|
|
|
<uv-button type="primary" text="提交"></uv-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -30,13 +42,38 @@
|
|
|
//
|
|
|
const formList = ref([
|
|
|
{
|
|
|
- name: '姓名',
|
|
|
- value: '张三',
|
|
|
- type: 'text',
|
|
|
+ name: '',
|
|
|
+ time: '',
|
|
|
},
|
|
|
])
|
|
|
+const columns = ref([
|
|
|
+ {
|
|
|
+ label: '项目一',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '项目二',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '项目三',
|
|
|
+ value: '3',
|
|
|
+ },
|
|
|
+])
|
|
|
+function addFormItem() {
|
|
|
+ formList.value.push({
|
|
|
+ name: '',
|
|
|
+ time: '',
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
//
|
|
|
+.appointment {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.form-item {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
</style>
|
