xiamen-sb-uniapp/pages/repair-detail/transfer.vue

<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view
            class="p3 bg-color-white"
            style="margin-top: -50rpx; border-radius: 20rpx"
        >
            <u-form :model="form" ref="uForm" :label-width="180">
                  <u-form-item label="第一维修人" >
                    <view >{{ model.repairUserName }}</view>
                </u-form-item>
                <u-form-item label="第二维修人" required prop="secondRepairUser">
                    <my-select :disabled="disabled.includes('secondRepairUser')" :list="zjList"  v-model="form.secondRepairUser" />
                </u-form-item>
                 <u-form-item v-show="active>0" label="第三维修人" required prop="threeRepairUser">
                    <my-select :disabled="disabled.includes('threeRepairUser')" :list="zjList"  v-model="form.threeRepairUser" />
                </u-form-item>
                 <u-form-item v-show="active>1" label="第四维修人" required prop="fourRepairUser">
                    <my-select :list="zjList"  v-model="form.fourRepairUser" />
                </u-form-item>
                <u-form-item v-show="active<2">
                  <u-button type="primary" @tap="active++">添加维修人</u-button>
                </u-form-item>
            </u-form>

            <view class="p-fixed d-flex j-around a-center footer">
                <view
                    class="main-color-bg text-color-white common"
                    :loading="confirmLoading"
                    @tap="submit"
                >提交</view
                >
            </view>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: '',
                secondRepairUser: '',
                threeRepairUser: '',
                fourRepairUser: '',
            },
            disabled:[],
            rules: {
            },
            detailId: '',
            confirmLoading: false,
            zjList: [],
            active:0,
            model:{}
        };
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onLoad(options) {
    this.form.id = options.id
          this.getInfo()
    },
    methods: {
        getInfo() {
             this.$Http
        .fetchRepairApplicationForm({
          id:  this.form.id
        }).then((res) => {
            this.model = res.data
            if(res.data.threeRepairUser){
                this.active=2
                this.disabled.push('secondRepairUser','threeRepairUser')
            }else
            if(res.data.secondRepairUser){
                this.active=1
                this.disabled.push('secondRepairUser')
            }
          this.form.secondRepairUser= res.data.secondRepairUser
          this.form.threeRepairUser= res.data.threeRepairUser
          this.form.fourRepairUser= res.data.fourRepairUser
        })
           this.$Http
            .queryUserListByRoleCode({
                roleCode: 'Maintenance'
            })
            .then((res) => {
                console.log(res.data);
                const temp = []
                res.data.forEach((item, index) => {
                    temp.push({
                        label: item.realName,
                        value: item.userId
                    })
                })
                this.zjList.push(...temp)
            });
/*             this.$Http
            .queryUserListByRoleCode({
               roleCode: 'Maintenance'
            })
            .then((res) => {
                console.log(res.data);
                const temp = []
                res.data.forEach((item, index) => {
                    temp.push({
                        label: item.realName,
                        value: item.userId
                    })
                })
                this.zjList.push(...temp)

            }); */
        },
        // 提交
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                        this.$Http.transferRepair(this.form)
                            .then((res) => {
                                this.confirmLoading = false
                                	this.$refs.uToast.show({
					title: '提交成功！',
					type: 'success',
					back : true
				})
                            }).catch(() => {
                                this.confirmLoading = false
                            })
                   
                } else {
                    console.log('验证失败');
                }
            });
        },
    }
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.footer {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10000;
  border-top: 1rpx solid #f4f4f4;
  height: 100rpx;

  .common {
    padding: 15rpx 200rpx;
    border-radius: 30rpx;
    background-color: #0082ff;
    color: #fff;
  }
}
</style>