xiamen-sb-uniapp/pages/service-add/service-add.vue

<template>
    <view class="mx3">
        <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="150">
                <!--                <view class="报修单号 f-size-32 f-weight-6 mt-2">基本信息</view>
                <u-form-item label="维修单号">
                    <u-input v-model="form.no" disabled />
                </u-form-item>

                <view class="main-color-text f-size-32 f-weight-6 mt-2">报修信息</view>
                <u-form-item label="报修人">
                    <u-input v-model="form.userName" disabled />
                </u-form-item>-->

                <view class="main-color-text f-size-32 f-weight-6 mt-2">维修信息</view>
                <!--                <u-form-item label="故障类别" prop="badType">
                    <u-input v-model="form.badType" disabled @click="badState = true" type="select" />
                    <u-select v-model="badState" :list="badList" @confirm="badSubmit"></u-select>
                </u-form-item>-->
                <!--                <u-form-item label="维修耗时">
                    <u-input type="number" v-model="form.minutes" />
                    <template slot="right">
                        <view>分钟</view>
                    </template>
                </u-form-item>-->
                <!--                <u-form-item label="维修动作" prop="descripitionType">
                    <u-input v-model="form.descripitionType" disabled @click="descripitionState = true" type="select" />
                    <u-select v-model="descripitionState" :list="descripitionList" @confirm="descripitionSubmit"></u-select>
                </u-form-item>-->
                <u-form-item label="备注">
                    <u-input v-model="form.remark" type="textarea" :height="50" />
                </u-form-item>
                <!-- <u-form-item label="维修时间">
					<u-input v-model="form.wxtime" disabled @click="wxtimeShow = true" />
					<u-picker v-model="wxtimeShow" mode="time" @confirm="handleWxTime"></u-picker>
				</u-form-item> -->
                <u-form-item label="工单类别" required prop="category" :label-width="150">
                    <u-input v-model="category" disabled @click="categoryState = true" type="select" />
                    <u-select v-model="categoryState" :list="categoryMap" @confirm="categorySubmit"></u-select>
                </u-form-item>
                <u-form-item
                    label="是否停机"
                    required
                    prop="halt"
                    :label-width="150"
                >
                    <u-input
                        v-model="form.halt"
                        disabled
                        @click="haltState = true"
                        placeholder="请选择是否停机"
                        type="select"
                    />
                    <u-select
                        v-model="haltState"
                        :list="haltList"
                        @confirm="haltSubmit"
                        :default-value="haltDefaultValue"
                    ></u-select>
                </u-form-item>
                <u-form-item label="维修图片">
                    <u-upload
                        width="180"
                        height="180"
                        max-count="3"
                        :action="action"
                        :file-list="fileList"
                        @on-success="uploadSuccess"
                        @on-remove="uploadRemove"
                        :header="header"></u-upload>
                </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" @tap="goUseRepair">备件</view>-->
                <view class="main-color-bg text-color-white common" @tap="handleSubmit">完成</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                badType: '',
                // wxremarks: '',
                // photo: '',
                // wxtime: '',
                category: '',
                descripitionType: '',
                no: '',
                halt: '',
                needStop: '',
                userName: '',
                repairErrorTypeId: '',
                repairMinutes: '',
                repairRemark: '',
                repairContent: ''
            },
            wxtimeShow: false,
            badState: false,
            categoryState: false,
            category: '',
            badList: [],
            categoryMap: [],

            haltState: false, // 是否停机
            haltList: [],
            descripitionState: false,
            descripitionList: [],
            action: this.$BaseTool.UserUtil.getUploadUrl(),
            header: {
                Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
            },
            fileList: [],
            imagesList: [],
            detailId: '',
            descripitionMap: {},
            needStopMap: {},
            haltDefaultValue: [0],
            rules: {
                halt: [
                    {
                        required: true,
                        message: '请选择是否停机',
                        trigger: ['blur', 'change']
                    }
                ]
                /* badType: [{
                    required: true,
                    message: '请选择故障类别',
                    trigger: ['blur', 'change']
                }],
                descripitionType: [{
                    required: true,
                    message: '请选择维修描述',
                    trigger: ['blur', 'change']
                }] */
            }
        };
    },
    onLoad(options) {
        if (options) {
            this.detailId = options.id
            this.form.id = options.id
        }
        this.descripitionMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIRE_ACTION)
        const temp = []
        for (const key in this.descripitionMap) {
            temp.push({
                label: this.descripitionMap[key],
                value: key
            })
            this.descripitionList = temp
        }
        const categoryMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_CATEGORY
        )
        for (const key in categoryMap) {
            this.categoryMap.push({
                label: categoryMap[key],
                value: key
            });
        }
        this.needStopMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.YES_NO
        );
        for (const key in this.needStopMap) {
            this.haltList.push({
                label: this.needStopMap[key],
                value: key
            });
        }
        this.form.halt = this.haltList[this.haltDefaultValue].label;
        this.form.needStop = this.haltList[this.haltDefaultValue].value;
        this.initData()
        this.getType()
    },
    onReady() {
        // this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        descripitionSubmit(data) {
            this.form.descripitionType = data[0].label;
            this.form.descripition = data[0].value;
        },
        // 领用备件
        goUseRepair() {
            uni.navigateTo({
                url: '../use-repair/use-repair'
            });
        },
        categorySubmit(data) {
            this.category = data[0].label;
            this.form.category = data[0].value;
        },
        badSubmit(data) {
            this.form.badType = data[0].label;
            this.form.errorTypeId = data[0].value;
        },

        // 时间
        // handleWxTime(e) {
        // 	this.form.wxtime = e.year + '-' + e.month + '-' + e.day;
        // },
        // 提交
        handleSubmit() {
            const params = {
                ...this.form
            }
            params.repairFileList = this.imagesList
            this.$Http
                .finish(params)
                .then((res) => {
                    uni.redirectTo({
                        url: '/pages/service-detail/service-detail?id=' + this.detailId
                    })
                })
        },
        haltSubmit(data) {
            this.form.halt = data[0].label;
            this.form.needStop = data[0].value;
        },
        // 删除成功
        uploadRemove(index, lists, name) {
            this.fileList = lists;
        },
        // 上传成功
        uploadSuccess(data, index, lists, name) {
            this.fileList = lists;
            this.imagesList.push(data.data)
        },

        getType() {
            this.$Http
                .fetchErrorTypeTree({
                    id: this.detailId
                })
                .then((res) => {
                    const temp = []
                    res.data.forEach(item => {
                        temp.push({
                            label: item.title,
                            value: item.id
                        })
                    })
                    this.badList = temp
                })
        },
        initData() {
            this.$Http
                .fetchRepairApplicationForm({
                    id: this.detailId
                })
                .then((res) => {
                    this.form.no = res.data.no;
                    this.form.category = res.data.category
                    this.category = this.categoryMap.find(item => item.value == res.data.category).label
                    this.form.userName = res.data.userName;
                    this.form.repairMinutes = res.data.minutes
                    this.form.repairRemark = res.data.repairRemark
                    this.form.descripitionType = this.descripitionMap[res.data.descripition]
                    this.form.repairContent = res.data.repairContent
                    this.form.repairErrorTypeId = res.data.repairErrorTypeId

                    this.form.badType = res.data.errorTypeName ? res.data.errorTypeName : ''
                });
        }
    }
};
</script>

<style lang="less" scoped>
	.submit {
		align-items: center;
		justify-content: space-around;

		view {
			width: 240rpx;
			padding: 15rpx 0;
			border-radius: 40rpx;
			text-align: center;
		}
	}

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

		.common {
			padding: 15rpx 100rpx;
			border-radius: 40rpx;
			background-color: #0082ff;
			color: #fff;

			&:last-child {
				background-color: #fff;
				color: #0082ff;
				border: 1rpx solid #0082ff;
			}
		}
	}
</style>