#

whycq

2023-11-10 cd5b3a5cbe3b7bd5cfb7e18469ce4a99fc03aec6

 pages/business/goBusiness/addgoBusiness.vue

@@ -8,17 +8,26 @@
         </view>
         <!-- body -->
         <view class="card-body flex-column" v-for="subItem in item.info">
            <view class="flex"><text style="color: red;">*</text>{{subItem.subTitle}}</view>
            <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">
                  <input type="text" :placeholder="subItem.placeholder" :placeholder-style="subItem.placeholderStyle" v-model="subItem.value" :disabled="subItem.disabled" v-show="subItem.inputType != 'data'">
                  <uni-datetime-picker  v-model="subItem.value" :border="false" :red-color="subItem.placeholderStyle" v-if="subItem.inputType == 'data'" />
               </view>
					
               <view class="flex" style="width: 50rpx;" v-show="subItem.inputType == 'select'" @click="showPicker(subItem.type)"><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
         </view>
			
      </view>
      
      
		
      <u-picker :show="businessTransportationShow" :columns="businessTransportations" @confirm="businessTransportationConfirm"></u-picker>
      <u-picker :show="businessReturnShow" :columns="businessReturns" @confirm="businessReturnConfirm"></u-picker>
      <u-picker :show="pcdShow" ref="uPicker" :columns="columns" @confirm="pcdStartConfirm" @change="changeHandler" :defaultIndex="defaultIndex"></u-picker>
      <u-picker :show="pcdEndShow" ref="uPicker" :columns="columns" @confirm="pcdEndConfirm" @change="changeHandler" :defaultIndex="defaultIndex"></u-picker>
      <u-picker :show="businessStartTimeDayShow" :columns="businessStartTimeDays" @confirm="businessStartTimeDayConfirm"></u-picker>
      <u-picker :show="businessEndTimeDayShow" :columns="businessEndTimeDays" @confirm="businessEndTimeDayConfirm"></u-picker>
      
      <view style="height: 120rpx;"></view>
      
@@ -30,30 +39,272 @@
</template>

<script>
import form from '../../../uni_modules/uview-ui/libs/config/props/form';
   import form from '../../../uni_modules/uview-ui/libs/config/props/form';
   import data from '../../../static/js/citys-data.js'
   export default {
      data() {
         return {
            year: '2021-5-3',
            placeholderStyle: 'font-size:20rpx',
            form: {
               // businessTripReasons: ''
            },
            redColor: '',
            columns: [],
            defaultIndex: [],
            citysData: data.citysData,
            businessTransportationShow: false,
            businessTransportations: [['飞机','高铁','火车','汽车','摩托','电车','其他']],
            businessReturnShow: false,
            businessReturns: [['单程','往返']],
            pcdShow: false,
            pcdEndShow: false,
            pcds: data.citysData,
            businessStartTimeDayShow: false,
            businessStartTimeDays: [['上午','下午']],
            businessEndTimeDayShow: false,
            businessEndTimeDays: [['上午','下午']],
            form2: [
               {title: '基本信息',info:[{subTitle: '出差事由',value: '123',type: 'businessTripReasons'}]},
               {title: 'baseInfo',info:[{subTitle: '出差事由',value: 456}]}
            ]
               {title: '基本信息',info:[
                  {subTitle: '出差事由',placeholder: '请输入出差事由',placeholderStyle: 'font-size:20rpx', value: '',submitVal: '出差事由',type: 'businessTripReasons',inputType: 'input',required: true}
               ]},
               {title: '行程信息',info:[
                  {subTitle: '交通工具',placeholder: '请选择交通工具',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessTransportation',inputType: 'select',disabled:true,required: true},
                  {subTitle: '单程往返',placeholder: '请选择单程单程',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessReturn',inputType: 'select',disabled:true,required: true},
                  {subTitle: '车牌号',placeholder: '请输入车牌号',placeholderStyle: 'font-size:20rpx',value: '',type: 'carNumber',inputType: 'input',required: true},
                  {subTitle: '行程明细及公里数',placeholder: '请输入行程明细及公里数',placeholderStyle: 'font-size:20rpx',value: '',type: 'kilometers',inputType: 'input',required: true},
                  {subTitle: '出发地',placeholder: '请选择出发地',placeholderStyle: 'font-size:20rpx',value: '',type: 'pcdStart',inputType: 'select',disabled:true,required: true},
                  {subTitle: '出发地详细地址',placeholder: '请输入出发地详细地址',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessStartAddr',inputType: 'input',required: true},
                  {subTitle: '目的地',placeholder: '请选择目的地',placeholderStyle: 'font-size:20rpx',value: '',type: 'pcdEnd',inputType: 'select',disabled:true,required: true},
                  {subTitle: '目的地详细地址',placeholder: '请输入目的地详细地址',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessEndAddr',inputType: 'input',required: true},
               ]},
               {title: '日期信息',info:[
                  {subTitle: '出发日期',placeholder: '请选择出发日期',placeholderStyle: 'font-size:20rpx',value: '2021-5-3',type: 'businessStartTime',inputType: 'data',required: true},
                  {subTitle: '出发时辰',placeholder: '请选择出发时辰',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessStartTimeDay',inputType: 'select',disabled:true,required: true},
                  {subTitle: '结束日期',placeholder: '请选择结束日期',placeholderStyle: 'font-size:20rpx',value: '2021-5-3',type: 'businessEndTime',inputType: 'data',required: true},
                  {subTitle: '结束时辰',placeholder: '请选择结束时辰',placeholderStyle: 'font-size:20rpx',value: '',type: 'businessEndTimeDay',inputType: 'select',disabled:true,required: true}
               ]},
               {title: '基本信息',info:[
                  {subTitle: '同行人',placeholder: '请输入同行人',placeholderStyle: 'font-size:20rpx',value: '同行人',type: 'businessPeers',inputType: 'input',required: true},
                  {subTitle: '备注',placeholder: '备注信息',placeholderStyle: 'font-size:20rpx',value: '备注',inputType: 'input',type: 'businessNotes'}
               ]},
            ],
				
         }
      },
      mounted() {
         this.handlePcd();
      },
      methods: {
         handlePcd() {
            let sheng_s = '110000';  
            let shi_s = '110100';  
            let qu_s = '110101';  

            let sheng = [];
            let shi = [];
            let qu = [];
            this.pcds.forEach((sheng_item, sheng_index) => {
               if (sheng_item.value === sheng_s) {
                  this.defaultIndex[0] = sheng_index
                  sheng_item.children.forEach((shi_item, shi_index) => {
                     if (shi_item.value === shi_s) {
                        this.defaultIndex[1] = shi_index
                        shi_item.children.forEach((qu_item, qu_index) => {
                        if (qu_item.value === qu_s) {
                           this.defaultIndex[2] = qu_index
                        }
                        qu.push(qu_item.text);
                     })
                     }
                  shi.push(shi_item.text);
                  })
               }
               sheng.push(sheng_item.text);
            });
            this.columns.push(
               JSON.parse(JSON.stringify(sheng)),
               JSON.parse(JSON.stringify(shi)),
               JSON.parse(JSON.stringify(qu))
            );
         },
         changeHandler(e) {
            const {
               columnIndex,
               value,
               values, // values为当前变化列的数组内容
               index,
               // 微信小程序无法将picker实例传出来，只能通过ref操作
               picker = this.$refs.uPicker
            } = e;
            // console.log('测试数据', e);
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
               // console.log(value)
               // picker为选择器this实例，变化第二列对应的选项
               this.pcds.forEach(item => {
                  if (value[0] == item.text) {
                     let shi = [];
                     let flag = item.children[0].text;
                     item.children.forEach((val, ol) => {
                        shi.push(val.text);
                        if (shi[0] == flag) { //设置默认开关（选择省份后设置默认城市）
                           flag = '';
                           let qu = [];
                           val.children.forEach(vol => {
                              qu.push(vol.text);
                           });
                           picker.setColumnValues(2, qu);
                        }
                     });
                     picker.setColumnValues(1, shi);
                  }
               });
            }
            //当第二列变化时，第三列对应变化
            if (columnIndex === 1) {
               this.pcds.forEach(item => {
                  if (value[0] == item.text) {
                     let shi = [];
                     item.children.forEach((val, ol) => {
                        shi.push(val.text);
                        if (value[1] == val.text) {
                           let qu = [];
                           val.children.forEach(vol => {
                              qu.push(vol.text);
                           });
                           picker.setColumnValues(2, qu);
                        }
                     });
                  }
               });
            }
         },
         submit() {
            let subPass = true
            for (let k of this.form2) {
               for (let sub of k.info) {
                  this.form[sub.type] = sub.value
                  console.log(sub);
                  if (sub.inputType == 'select') {
                     this.form[sub.type] = sub.submitVal
                  } else {
                     this.form[sub.type] = sub.value
                  }
                  if (sub.required) {
                     sub.placeholderStyle = 'font-size:20rpx;'
                     if (sub.value == '' || (sub.submitVal == '' && sub.submitVal < 0)) {
                        console.log(sub);
                        sub.placeholderStyle = 'font-size:20rpx;color:red'
                        subPass = false
                     } 
                  }
						
               }
            }
				
            console.log(this.form);
            console.log(subPass);
            if(subPass) {
               console.log(this.form);
            }
				
         },
         showPicker(e) {
            switch(e) {
               case 'businessTransportation':
                  this.businessTransportationShow = true
                  break;
               case 'businessReturn':
                  this.businessReturnShow = true
                  break
               case 'pcdStart':
                  this.pcdShow = true  
                  break
               case 'pcdEnd':
                  this.pcdEndShow = true  
                  break
               case 'businessStartTimeDay':
                  this.businessStartTimeDayShow = true  
                  break
               case 'businessEndTimeDay':
                  this.businessEndTimeDayShow = true  
                  break
            }
         },
         businessTransportationConfirm(e) {
            console.log('confirm', e)
            this.form2[1].info[0].value = e.value[0]
            this.form2[1].info[0].submitVal = e.indexs[0]
            this.businessTransportationShow = false
         },
         businessReturnConfirm(e) {
            console.log('confirm', e)
            this.form2[1].info[1].value = e.value[0]
            this.form2[1].info[1].submitVal = e.indexs[0]
            this.businessReturnShow = false
         },
         businessStartTimeDayConfirm(e) {
            console.log('confirm', e)
            this.form2[2].info[1].value = e.value[0]
            this.form2[2].info[1].submitVal = e.indexs[0]
            this.businessStartTimeDayShow = false
         },
         businessEndTimeDayConfirm(e) {
            console.log('confirm', e)
            this.form2[2].info[3].value = e.value[0]
            this.form2[2].info[3].submitVal = e.indexs[0]
            this.businessEndTimeDayShow = false
         },
         pcdChangeHandler(e) {
            const {
               columnIndex,
               value,
               values, // values为当前变化列的数组内容
               index,
               // 微信小程序无法将picker实例传出来，只能通过ref操作
               picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
               // picker为选择器this实例，变化第二列对应的选项
               picker.setColumnValues(1, this.columnData[index])
            }
         },
         pcdStartConfirm(e) {
            // console.log('confirm', e)
            let pcd = data.citysData
            pcd[e.indexs[0]]
            // console.log(pcd[e.indexs[0]]);
            this.pcdShow = false
				
            // console.log(e.indexs)
            let shen = data.citysData[e.indexs[0]]
            // console.log(shen.value, shen.text)
            let shi = shen.children[e.indexs[1]]
            // console.log(shi.value, shi.code)
            let qu = shi.children[e.indexs[2]]
            // console.log(qu.value, qu.code)
            // console.log(shen.value , shi.value, qu.value);
            this.form2[1].info[4].value = e.value[0] + '/' + e.value[1] + '/' + e.value[2]
            this.form2[1].info[4].submitVal = shen.value + ',' +  shi.value  + ',' + qu.value
            console.log(this.form2[1].info[4].value,this.form2[1].info[4].submitVal);
         },
         pcdEndConfirm(e) {
            // console.log('confirm', e)
            let pcd = data.citysData
            pcd[e.indexs[0]]
            // console.log(pcd[e.indexs[0]]);
            this.pcdEndShow = false
				
            // console.log(e.indexs)
            let shen = data.citysData[e.indexs[0]]
            // console.log(shen.value, shen.text)
            let shi = shen.children[e.indexs[1]]
            // console.log(shi.value, shi.code)
            let qu = shi.children[e.indexs[2]]
            // console.log(qu.value, qu.code)
            // console.log(shen.value , shi.value, qu.value);
            this.form2[1].info[6].value = e.value[0] + '/' + e.value[1] + '/' + e.value[2]
            this.form2[1].info[6].submitVal = shen.value + ',' +  shi.value  + ',' + qu.value
            console.log(this.form2[1].info[6].value,this.form2[1].info[6].submitVal);
         }
      }
   }
@@ -78,6 +329,10 @@
   .card-body {
      margin: 8rpx 8rpx 0 8rpx ;
   }
   .card-required {
      color: red;
      padding-right: 4rpx;
   }
   .flex {
      display: flex;
      align-items: center;