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">
            <!-- 与 PC 端 TransferForm 一致：提示当前维修人及转派审批说明 -->
            <view v-if="model.repairUserName" class="p2 mb-2"
                style="background: #e6f7ff; border-radius: 10rpx; font-size: 26rpx; color: #0082ff">
                当前维修人：{{ model.repairUserName }}，转派后将进入转派审批中状态，审批通过后更换维修人。
            </view>
            <u-form :model="form" ref="uForm" :label-width="180">
                <u-form-item label="新维修负责人" required prop="repairUserId">
                    <my-select :list="userList" v-model="form.repairUserId" />
                </u-form-item>
                <u-form-item label="转派备注" required prop="repairDispatchRemark">
                    <u-input type="textarea" v-model="form.repairDispatchRemark" placeholder="请填写转派原因" />
                </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: '',
                repairUserId: '',
                repairDispatchRemark: ''
            },
            rules: {
                repairUserId: [
                    {
                        required: true,
                        message: '请选择新维修负责人',
                        trigger: ['blur', 'change']
                    }
                ],
                repairDispatchRemark: [
                    {
                        required: true,
                        message: '转派备注不能为空',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            confirmLoading: false,
            userList: [],
            model: {}
        };
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onLoad(options) {
        this.form.id = options.id
        this.getInfo()
        this.getDeptUsers()
    },
    methods: {
        getInfo() {
            this.$Http
                .fetchRepairApplicationForm({
                    id: this.form.id
                }).then((res) => {
                    this.model = res.data
                })
        },
        // 与 PC 端 TransferForm 一致：候选人为现场维修组 + 场内维修组的启用用户
        getDeptUsers() {
            this.$Http
                .queryUserDept({
                    deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_XIAN_CHANG_WEI_XIU_ZU,
                    userStatus: 1
                })
                .then((res) => {
                    this.$Http
                        .queryUserDept({
                            deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_CHANG_NEI_WEI_XIU_ZU,
                            userStatus: 1
                        })
                        .then((res2) => {
                            const list = (res.data || []).concat(res2.data || [])
                            this.userList = list.map(item => ({
                                label: item.realName,
                                value: item.userId
                            }))
                        })
                })
        },
        // 提交
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.$Http.transferRepair({
                        id: this.form.id,
                        repairUserId: this.form.repairUserId,
                        repairDispatchRemark: this.form.repairDispatchRemark
                    })
                        .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>