wit-uniapp/pages/index/Onlinewarranty/Onlinewarranty.vue

<template>
    <view class="OutermostLayer">

        <view class="wfgz">
            <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
            <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
                <!-- <u-form-item labelWidth='180' label="任务名称:" prop="userInfo.contactPerson" borderBottom ref="item1">
                    <u--input v-model="model1.userInfo.contactPerson" border="none"></u--input>
                </u-form-item> -->

                <u-form-item labelWidth='180' label="报修位置:" prop="userInfo.repairPositioncontactPerson" borderBottom
                             @click="showfloor = true;" ref="item1">
                    <u--input v-model="model1.userInfo.myposition" disabled disabledColor="#ffffff"
                              placeholder="请选择报修位置" border="none"></u--input>
                    <u-icon slot="right" contactPerson="arrow-right"></u-icon>
                </u-form-item>

                <u-form-item labelWidth='180' label="报修区域:" prop="userInfo.repairRegioncontactPerson" borderBottom
                             @click="showSex = true;" ref="item1">
                    <u--input v-model="model1.userInfo.repairRegioncontactPerson" disabled disabledColor="#ffffff" placeholder="请选择报修区域"
                              border="none"></u--input>
                    <u-icon slot="right" contactPerson="arrow-right"></u-icon>
                </u-form-item>

                <u-form-item labelWidth='180' label="报修类型:" prop="userInfo.taskdegree" borderBottom
                             @click="showtaskdegree = true;" ref="item1">
                    <u--input v-model="model1.userInfo.taskdegree" disabled disabledColor="#ffffff"
                              placeholder="请选择报修类型" border="none"></u--input>
                    <u-icon slot="right" contactPerson="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item labelWidth='180' label="联系人:" prop="userInfo.contactPerson" borderBottom ref="item1">
                    <u--input v-model="model1.userInfo.contactPerson" border="none"></u--input>
                </u-form-item>
                <u-form-item labelWidth='180' label="联系电话:" prop="userInfo.contactPhone" borderBottom ref="item1">
                    <u--input v-model="model1.userInfo.contactPhone" border="none"></u--input>
                </u-form-item>
                <u-form-item labelWidth='180' label="故障描述:" prop="userInfo.contactcontactPhone" borderBottom ref="item1">
                    <u--input v-model="model1.userInfo.contactcontactPhone" border="none"></u--input>
                </u-form-item>

                <u-form-item labelWidth='180' label="上传图片:" prop="userInfo.contactcontactPhone" borderBottom ref="item1">
                    <view class="">
                        <u-upload
                                :fileList="fileList1"
                                @afterRead="afterRead"
                                @delete="deletePic"
                                contactPerson="1"
                                multiple
                                :maxCount="10"
                        >
                            <image :src="xiangji"
                                   mode="widthFix" style="width: 90rpx;height: 90rpx;"></image>
                        </u-upload>
                    </view>
                </u-form-item>



            </u--form>

            <view class="guidang">
                <view class="queding">
                    <u-button type="primary" :plain="true" text="返回" @click="returndata"></u-button>
                </view>
                <view class="queding">
                    <u-button type="primary" text="提交" @click="editdata"></u-button>
                </view>
            </view>
        </view>


        <u-picker @cancel='showtaskdegree = false' @confirm='degreeconfirm' :show="showtaskdegree"
                  :columns="columnshowtaskdegree" keycontactPerson="label">
        </u-picker>

        <u-picker @cancel='showSex = false' @confirm='typeconfirm' :show="showSex" :columns="columnsquyu"
                  keycontactPerson="label">
        </u-picker>

        <u-picker :show="showfloor" ref="uPicker" :loading="loading" @confirm="confirmfloor" @cancel='cancelfloor'
                  :columns="columns" keycontactPerson="orgcontactPerson" @change="changeHandler"></u-picker>


    </view>
</template>

<script>
    const BaseApi = require("@/http/baseApi.js");
    export default {
        components: {},
        data() {
            return {
                loading: false,
                fileList1: [],
                xiangji: require('@/static/index/xj.png'),
                columns: [
                    [],
                    [],
                    []
                ],
                columnData: [],
                columnDatalist: [],
                showfloor: false,


                showSex: false,
                showday: false,
                showPicker: false,
                showtaskdegree: false,
                showtaskpeople: false,

                model1: {
                    userInfo: {
                        id: "",
                        buildingId: "",//
                        storeyId: "",//
                        houseId: "",//
                        repairPosition: "",//
                        repairPositioncontactPerson: "",//报修位置名称
                        repairRegion: '',//报修位置名称
                        repairRegioncontactPerson: "",//报修区域
                        repairType: '',//报修类型
                        repairTypecontactPerson: "",//报修类型
                        contactPerson: "",//联系人
                        contactcontactPhone: "",//电话
                        faultDes: "",// 故障描述
                        faultPics: "",//图片
                    },
                },
                columnsquyu: [
                    [{
                        label: '公共区域',
                        id: 1

                    }, {
                        label: '室内',
                        id: 2
                    }]
                ],

                columnshowtaskdegree: [
                    [{
                        label: '水',
                        id: 1

                    }, {
                        label: '电',
                        id: 2
                    },
                        {
                            label: '其他',
                            id: 3
                        },
                    ]
                ],

                rules: {
                    'userInfo.contactPerson': {
                        type: 'string',
                        required: true,
                        message: '请填写姓名',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.contactPhone': {
                        type: 'string',
                        required: true,
                        message: '请填写联系电话',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.contactcontactPhone': {
                        type: 'string',
                        required: true,
                        message: '请填写故障',
                        trigger: ['blur', 'change']
                    },

                    'userInfo.repairRegioncontactPerson': {
                        type: 'string',
                        required: true,
                        message: '请选择报修区域',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.repairPositioncontactPerson': {
                        type: 'string',
                        required: true,
                        message: '请选择报修位置',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.taskdegree': {
                        type: 'string',
                        required: true,
                        message: '请选择报修类型',
                        trigger: ['blur', 'change']
                    },


                },

            };
        },
        onLoad() {
            this.getfloor();
            //	this.loadmore();
        },

        methods: {
// 删除图片
            deletePic(event) {
                this[`fileList${event.contactPerson}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.contactPerson}`].length
                lists.map((item) => {
                    this[`fileList${event.contactPerson}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.contactPerson}`][fileListLen]
                    this[`fileList${event.contactPerson}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({

                        url: BaseApi.BaseApi + '/uploadFile',
                        filePath: url,
                        contactPerson: 'file',
                        formData: {
                            user: 'test'
                        },
                        success: (res) => {
                            console.log('111111111111111111', res)
                            setTimeout(() => {
                                resolve(res.data.data)
                            }, 1000)
                        }
                    });
                })
            },


            changeHandler(e) {
                // console.log('77777', e)
                const {

                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                    indexs,


                    picker = this.$refs.uPicker
                } = e
                console.log('999999', columnIndex, index, indexs)


                if (columnIndex === 0) {
                    //	this.loading = true

                    picker.setColumnValues(1, this.alldata[index].childrenList)
                    if (this.alldata[index].childrenList[0].childrenList == null) {
                        console.log('66666',)
                        this.alldata[index].childrenList[0].childrenList = []
                    } else {
                        console.log('00000000',)
                    }

                    //	picker.setColumnValues(2, this.alldata[index].childrenList[0].childrenList)

                    picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[0].childrenList)
                    //	this.loading = false
                } else if (columnIndex === 1) {
                    // picker为选择器this实例，变化第三列对应的选项

                    if (this.alldata[indexs[0]].childrenList[indexs[1]] == null) {
                        console.log('123',)
                        this.alldata[indexs[0]].childrenList[indexs[1]] = []
                    } else {
                        console.log('345',)
                    }
                    console.log('222', this.alldata[indexs[0]].childrenList[indexs[1]].childrenList)
                    picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[indexs[1]].childrenList)

                }


            },
            confirmfloor(e) {
                console.log('222222', e.value)
                //	this.model1.userInfo.myposition = e.value[0].orgcontactPerson + e.value[1].orgcontactPerson;

                // this.dataForm.buildingId = e.value[0].orgId;
                // this.dataForm.storeyId = e.value[1].orgId;
                // this.showfloor = false;
                // this.getalldata();
            },
            cancelfloor() {
                this.showfloor = false;
            },
            getfloor() {
                this.$api.get('/control/getOrgStructureTree', {})
                    .then(res => {
                        if (res.data.code == 0) {
                            //this.dataForm.projectId = res.data.data[0].orgId;

                            //	this.model1.userInfo.myposition = res.data.data[0].orgcontactPerson;
                            this.alldata = res.data.data[0].childrenList;
                            //console.log('111111111111111111', res.data.data[0].childrenList)
                            this.columns = [
                                this.alldata,
                                this.alldata[0].childrenList,
                                this.alldata[0].childrenList[0].childrenList
                            ]
                            let allfloor = [];
                            for (let i = 0; i < this.alldata.length; i++) {
                                allfloor.push(this.alldata[i].childrenList)
                            }
                            this.columnData = allfloor;
                            //console.log('000', allfloor)
                            let lastlist = [];
                            for (let i = 0; i < this.alldata.length; i++) {
                                for (let ii = 0; ii < this.alldata[i].childrenList.length; ii++) {
                                    //  console.log('111111111111111111',this.alldata[i].childrenList[ii].childrenList)
                                    lastlist.push(this.alldata[i].childrenList[ii].childrenList)
                                }
                            }
                            this.columnDatalist = lastlist

                            //	console.log('999', lastlist)

                            //	this.getalldata();
                        } else {
                            this.showdct = true
                        }
                    })
            },
            onShowDatePicker() { //显示

                this.showPicker = true;
                //  this.value =this.model1.userInfo.repairPositioncontactPerson;
            },

            returndata() {
                uni.navigateBack({
                    delta: 1
                });
            },
            editdata() {
                uni.navigateBack({
                    delta: 1
                });
            },

            typeconfirm(e) {
                console.log('111111111111111111', e.value[0].label)
                this.model1.userInfo.repairRegioncontactPerson = e.value[0].label;
                this.showSex = false;
                // this.model1.userInfo.sex = e.contactPerson
                this.$refs.form1.validateField('userInfo.repairRegioncontactPerson')
            },

            degreeconfirm(e) {
                //console.log('111111111111111111', e.value[0].label)
                this.model1.userInfo.taskdegree = e.value[0].label;
                this.showtaskdegree = false;
                // this.model1.userInfo.sex = e.contactPerson
                this.$refs.form1.validateField('userInfo.taskdegree')
            },
            peopleconfirm(e) {
                //console.log('111111111111111111', e.value[0].label)
                this.model1.userInfo.taskpeople = e.value[0].label;
                this.showtaskpeople = false;
                // this.model1.userInfo.sex = e.contactPerson
                this.$refs.form1.validateField('userInfo.taskpeople')
            },


        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.form1.setRules(this.rules)
        },
    };
</script>

<style>
    .guidang {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40 rpx;
    }

    .queding {
        width: 40%;
    }

    .wfgz {
       margin: 20rpx;
	   margin-top: 0px;
    }
</style>