#

whycq

2023-11-07 35982df874cdaa7149dc246d88cff0cb6929affe

#

 pages/business/goBusiness/addgoBusiness.vue

@@ -11,16 +11,22 @@
                <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="请输入出差事由1" :placeholder-style="placeholderStyle" v-model="subItem.value" :disabled="subItem.disabled" v-show="subItem.inputType != 'data'">
                        <uni-datetime-picker v-model="subItem.value" :border="false" v-show="subItem.inputType == 'data'" />
                    </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 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="show" :columns="columns" @confirm="confirm"></u-picker>
        <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="businessStartTimeDayShow" :columns="businessStartTimeDays" @confirm="businessStartTimeDayConfirm"></u-picker>
        <u-picker :show="businessEndTimeDayShow" :columns="businessEndTimeDays" @confirm="businessEndTimeDayConfirm"></u-picker>
        
        <view style="height: 120rpx;"></view>
        
@@ -32,59 +38,230 @@
</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 {
                show: false,
                year: '',
                placeholderStyle: 'font-size:20rpx',
                form: {
                    // businessTripReasons: ''
                },
                columns: [
                     ['中国', '美国', '日本']
                ],
                columns: [],
                defaultIndex: [],
                citysData: data.citysData,
                businessTransportationShow: false,
                businessTransportations: [['飞机','高铁','火车','汽车','摩托','电车','其他']],
                businessReturnShow: false,
                businessReturns: [['单程','往返']],
                pcdShow: false,
                pcds: data.citysData,
                businessStartTimeDayShow: false,
                businessStartTimeDays: [['上午','下午']],
                businessEndTimeDayShow: false,
                businessEndTimeDays: [['上午','下午']],
                form2: [
                    {title: '基本信息',info:[
                        {subTitle: '出差事由',value: '出差事由',type: 'businessTripReasons',inputType: 'input',required: true}
                        {subTitle: '出差事由',value: '',submitVal: '出差事由',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: '',type: 'businessTransportation',inputType: 'select',disabled:true,required: true},
                        {subTitle: '单程往返',value: '',type: 'businessReturn',inputType: 'select',disabled:true,required: true},
                        {subTitle: '车牌号',value: '',type: 'carNumber',inputType: 'input',required: true},
                        {subTitle: '行程明细及公里数',value: '',type: 'kilometers',inputType: 'input',required: true},
                        {subTitle: '出发地',value: '',type: 'pcdStart',inputType: 'select',required: true},
                        {subTitle: '出发地详细地址',value: '',type: 'businessStartAddr',inputType: 'input',required: true},
                        {subTitle: '目的地',value: '',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}
                        {subTitle: '出发日期',value: '',type: 'businessStartTime',inputType: 'data',required: true},
                        {subTitle: '出发时辰',value: '',type: 'businessStartTimeDay',inputType: 'select',required: true},
                        {subTitle: '结束日期',value: '',type: 'businessEndTime',inputType: 'data',required: true},
                        {subTitle: '结束时辰',value: '',type: 'businessEndTimeDay',inputType: 'select',required: true}
                    ]},
                    {title: '基本信息',info:[
                        {subTitle: '同行人',value: '同行人',type: 'businessPeers',inputType: 'input',required: true},
                        {subTitle: '备注',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() {
                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
                        }
                    }
                }
				
                console.log(this.form);
            },
            confirm(e) {
            showPicker(e) {
                switch(e) {
                    case 'businessTransportation':
                        this.businessTransportationShow = true
                        break;
                    case 'businessReturn':
                        this.businessReturnShow = true
                        break
                    case 'pcdStart':
                        this.pcdShow = true  
                        break
                    case 'businessStartTimeDay':
                        this.businessStartTimeDayShow = true  
                        break
                    case 'businessEndTimeDay':
                        this.businessEndTimeDayShow = true  
                        break
                }
            },
            businessTransportationConfirm(e) {
                console.log('confirm', e)
                this.show = false
                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);
            }
        }
    }