1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| <template>
| <view>
|
| <view class="card" v-for="item in form2">
| <!-- head -->
| <view class="card-head flex">
| <view class="card-head-title">{{item.title}}</view>
| </view>
| <!-- body -->
| <view class="card-body flex-column" v-for="subItem in item.info">
| <view class="flex"><text class="card-required" v-show="subItem.required">*</text>{{subItem.subTitle}}</view>
| <view class="flex">
| <view style="flex: 1;">
| <input type="text" placeholder="请输入出差事由" :placeholder-style="placeholderStyle" v-model="subItem.value">
| </view>
| <view class="flex" style="width: 50rpx;" v-show="subItem.inputType == 'select'" @click="show = true"><uni-icons type="right" color="#000" ></uni-icons></view>
| </view>
| </view>
|
| </view>
|
|
| <u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
|
| <view style="height: 120rpx;"></view>
|
| <view class="floor">
| <view class="default">重置</view>
| <view class="primary" @click="submit()">提交</view>
| </view>
| </view>
| </template>
|
| <script>
| import form from '../../../uni_modules/uview-ui/libs/config/props/form';
| export default {
| data() {
| return {
| show: false,
| placeholderStyle: 'font-size:20rpx',
| form: {
| // businessTripReasons: ''
| },
| columns: [
| ['中国', '美国', '日本']
| ],
| form2: [
| {title: '基本信息',info:[
| {subTitle: '出差事由',value: '出差事由',type: 'businessTripReasons',inputType: 'input',required: true}
| ]},
| {title: 'baseInfo',info:[
| {subTitle: '交通工具',value: 4,type: 'businessTransportation',inputType: 'select',required: true},
| {subTitle: '单程往返',value: 1,type: 'businessReturn',inputType: 'select',required: true},
| {subTitle: '车牌号',value: '浙B788MT',type: 'carNumber',inputType: 'input',required: true},
| {subTitle: '行程明细及公里数',value: '168公里',type: 'kilometers',inputType: 'input',required: true},
| {subTitle: '出发地',value: '110088 118188,118101',type: 'pcdStart',inputType: 'select',required: true},
| {subTitle: '出发地详细地址',value: '出发地详细地址',type: 'businessStartAddr',inputType: 'input',required: true},
| {subTitle: '目的地',value: '440809,448188,448183',type: 'pcdEnd',inputType: 'select',required: true},
| {subTitle: '目的地详细地址',value: '目的地详细地址',type: 'businessEndAddr',inputType: 'input',required: true},
| ]},
| {title: '日期信息',info:[
| {subTitle: '出发日期',value: '2023-11-01 80:00:00',type: 'businessStartTime',inputType: 'input',required: true},
| {subTitle: '出发时辰',value: '1',type: 'businessStartTimeDay',inputType: 'input',required: true},
| {subTitle: '结束日期',value: '2023-11-30 80:00:08',type: 'businessEndTime',inputType: 'input',required: true},
| {subTitle: '结束时辰',value: '2',type: 'businessEndTimeDay',inputType: 'input',required: true}
| ]},
| {title: '基本信息',info:[
| {subTitle: '同行人',value: '同行人',type: 'businessPeers',inputType: 'input',required: true},
| {subTitle: '备注',value: '备注',inputType: 'input',type: 'businessNotes'}
| ]},
| ]
| }
| },
| methods: {
| submit() {
| for (let k of this.form2) {
| for (let sub of k.info) {
| this.form[sub.type] = sub.value
| console.log(sub);
| }
| }
|
| console.log(this.form);
| },
| confirm(e) {
| console.log('confirm', e)
| this.show = false
| }
| }
| }
| </script>
|
| <style scoped>
| .card {
| min-height: 100rpx;
| margin: 16rpx 0 0 0;
| background-color: #fff;
| }
| .card-head {
| min-height: 60rpx;
| width: calc(100%-5px);
| margin-left: 4px;
| box-shadow: -4px 0 0px #2d8cf0;
| }
| .card-head-title {
| /* background-color: #556655; */
| padding-left: 6px;
| }
| .card-body {
| margin: 8rpx 8rpx 0 8rpx ;
| }
| .card-required {
| color: red;
| padding-right: 4rpx;
| }
| .flex {
| display: flex;
| align-items: center;
| }
| .flex-column {
| display: flex;
| flex-direction: column;
| }
| .floor {
| height: 100rpx;
| line-height: 100rpx;
| width: 100%;
| background-color: #fff;
| position: fixed;
| bottom: 0;
| left: 0;
| display: flex;
| align-items: center;
| text-align: center;
| letter-spacing: 10rpx;
| }
| .default {
| flex: 2;
| }
| .default:active {
| background-color: #eff0f1;
| }
| .primary {
| flex: 3;
| background-color: #2d8cf0;
| color: #fff;
| }
| .primary:active {
| background-color: #007dea;
| }
| </style>
|
|
