xiamen-sb-uniapp/pages/middle/middle.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">
                <u-form-item label="选择设备" required prop="running" :label-width="150">
                    <u-input v-model="form.running" disabled @click="handleSelect" placeholder="请选择设备" type="select" />
                </u-form-item>
                <common-popup :list="runningList" @select="runningSubmit" ref="popup" />
                <view class="main-color-text f-size-32 f-weight-6 mt-2">基本信息</view>
                <u-form-item label="设备新号" required :label-width="150">
                    <u-input v-model="form.no" @blur="sbNoBlur($event)" />
                </u-form-item>
                <u-form-item label="设备名称" :label-width="150">
                    <u-input v-model="form.sbName" disabled />
                </u-form-item>
                <u-form-item label="使用位置" prop="sbCph" required :label-width="150">
                    <u-input v-model="form.sbCph" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="报修人" required :label-width="150">
                    <u-input v-model="form.actualUser" />
                </u-form-item>
                <!-- <u-form-item label="工单类别" required prop="category" :label-width="150">
                    <u-input v-model="category" disabled @click="badState = true" type="select" />
                    <u-select v-model="badState" :list="categoryMap" @confirm="badSubmit"></u-select>
                </u-form-item> -->
                <view class="main-color-text f-size-32 f-weight-6 mt-2">报修信息</view>
                <!--                <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="报修来源"
                    prop="repair"
                    :label-width="150"
                >
                    <u-input
                        v-model="form.repair"
                        disabled
                        @click="repairState = true"
                        placeholder="请选择报修来源"
                        type="select"
                    />
                    <u-select
                        v-model="repairState"
                        :list="repairList"
                        @confirm="repairSubmit"
                    ></u-select>
                </u-form-item>-->

                <!--                <u-form-item
                    label="紧急等级"
                    prop="level"
                    required
                    :label-width="150"
                >
                    <u-input
                        v-model="form.level"
                        disabled
                        @click="levelState = true"
                        placeholder="请选择紧急等级"
                        type="select"
                    />
                    <u-select
                        v-model="levelState"
                        :list="levelList"
                        @confirm="levelSubmit"
                    ></u-select>
                </u-form-item>-->

                <!--                <u-form-item
                    label="故障类别"
                    required
                    prop="badType"
                    :label-width="150"
                >
                    <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="故障描述" :label-width="150">
                    <u-input v-model="form.content" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="上传图片" :label-width="150">
                    <u-upload width="180" height="180" max-count="6" :action="action" :file-list="fileList"
                        @on-success="uploadSuccess" @on-remove="uploadRemove" :header="header"></u-upload>
                </u-form-item>
            </u-form>
            <view class="d-flex j-around a-center footer">
                <view class="main-color-bg text-color-white common" @tap="handleSubmit">提交</view>
            </view>
        </view>
        <u-tabbar :list="tabbar" :mid-button="true" active-color="#0082ff"></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                badType: '',
                running: '',
                sbName: '',
                actualUser: '',
                no: '',
                halt: '',
                sbCph: '',
                repair: '',
                remarks: '',
                content: '',
                userId: '',
                repairErrorTypeId: '',
                photo: '',
                level: '',
                // 传入的
                sbId: '',
                needStop: '',
                levelValue: '',
                source: ''
            },
            badState: false,
            badList: [],
            runningState: false, // 设备选择
            runningList: [],
            haltState: false, // 是否停机
            haltList: [],
            repairState: false, // 报修来源
            repairList: [],
            levelState: false,
            levelList: [],
            imagesList: [],
            action: this.$BaseTool.UserUtil.getUploadUrl(),
            // action: 'http://39.103.133.141:8000/mock/7/upms/files/upload',
            header: {
                Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
            },
            fileList: [],
            sourceMap: {},
            levelMap: {},
            statusMap: {},
            needStopMap: {},
            categoryMap: [],
            category: '',
            haltDefaultValue: [0],
            rules: {
                running: [
                    {
                        required: true,
                        message: '请选择设备',
                        trigger: ['blur', 'change']
                    }
                ],
                halt: [
                    {
                        required: true,
                        message: '请选择是否停机',
                        trigger: ['blur', 'change']
                    }
                ],

                repair: [
                    {
                        required: true,
                        message: '请选择报修来源',
                        trigger: ['blur', 'change']
                    }
                ],
                level: [
                    {
                        required: true,
                        message: '请选择紧急等级',
                        trigger: ['blur', 'change']
                    }
                ],
                category: [
                    {
                        required: true,
                        message: '请选择工单类别',
                        trigger: ['blur', 'change']
                    }
                ],
                sbCph: [
                    {
                        required: true,
                        message: '请填写设备使用位置',
                        trigger: ['blur', 'change']
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请输入问题描述',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            // #ifdef MP-WEIXIN
            cursorSpacing: 50,
            // #endif
            // #ifndef MP-WEIXIN
            cursorSpacing: 0,
            // #endif
            sbBackId: '',
            address: '',
            tabbar: [
                {
                    iconPath: '/static/tabars/home.png',
                    pagePath: '/pages/home/home',
                    selectedIconPath: '/static/tabars/home_s.png',
                    text: '首页'
                },
                {
                    iconPath: '/static/tabars/order.png',
                    pagePath: '/pages/operate/operate',
                    selectedIconPath: '/static/tabars/order_s.png',
                    text: '功能'
                },
                {
                    iconPath: '/static/tabars/publish.png',
                    pagePath: '/pages/middle/middle',
                    selectedIconPath: '/static/tabars/publish.png',
                    text: '报修',
                    midButton: true
                },
                {
                    iconPath: '/static/tabars/tiding.png',
                    pagePath: '/pages/tidings/tidings',
                    selectedIconPath: '/static/tabars/tiding_s.png',
                    text: '消息'
                },
                {
                    iconPath: '/static/tabars/mine.png',
                    pagePath: '/pages/my/my',
                    selectedIconPath: '/static/tabars/mine_s.png',
                    text: '我的'
                }
            ]
        }
    },
    onShow() {
        console.log(this.action)
        const pages = getCurrentPages()
        const currPage = pages[pages.length - 1]
        this.sbBackId = currPage.sbBackId
        if (this.sbBackId) {
            this.$Http
                .fetchSbInfo({
                    id: this.sbBackId
                })
                .then(res => {
                    this.form.no = res.data.no
                    this.form.sbName = res.data.name
                    this.form.running = res.data.name
                    this.form.sbCph = res.data.cph
                    this.form.sbId = this.sbBackId
                })
        }
    },
    onLoad(options) {
        if (options && options.detailId) {
            this.$Http
                .fetchSbInfo({
                    id: options.detailId
                })
                .then(res => {
                    this.form.no = res.data.no
                    this.form.sbName = res.data.name
                    this.form.running = res.data.name
                    this.form.sbCph = res.data.cph
                    this.form.sbId = options.detailId
                })
        }
        this.sourceMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE)
        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
            })
        }
        for (const key in this.sourceMap) {
            this.repairList.push({
                label: this.sourceMap[key],
                value: key
            })
        }
        this.form.repair = this.repairList[0].label
        this.form.source = this.repairList[0].value
        this.levelMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_LEVEL)
        for (const key in this.levelMap) {
            this.levelList.push({
                label: this.levelMap[key],
                value: key
            })
        }
        this.form.level = this.levelList[0].label
        this.form.levelValue = this.levelList[0].value

        this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
        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.getType()
        // 获取设备数据
        // this.initSb();
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        //
        confirm(e) {
            console.log(e)
            this.address = ''
            for (let i = 0; i < e.length; i++) {
                this.address += e[i].label
            }
        },
        badSubmit(data) {
            this.category = data[0].label
            this.form.category = data[0].value
        },
        getType() {
            this.$Http
                .fetchErrorTypeTree({
                    id: this.detailId
                })
                .then(res => {
                    console.log(res.data)
                    const temp = []
                    res.data.forEach(item => {
                        temp.push({
                            label: item.title,
                            value: item.id
                        })
                    })
                    this.badList = temp
                    console.log(this.badList)
                })
        },
        handleSelect() {
            uni.navigateTo({
                url: '/pages/search/search'
            })
        },
        handleSubmit() {
            if (this.form.sbId === null || this.form.sbId === '') {
                this.$Message.toast('请先输入设备新号')
                return
            }
            const params = {
                content: this.form.content,
                remark: this.form.remarks,
                level: this.form.levelValue,
                needStop: this.form.needStop,
                sbId: this.form.sbId,
                sbName: this.form.sbName,
                sbCph: this.form.sbCph,
                repairErrorTypeId: this.form.repairErrorTypeId,
                source: this.form.source,
                category: this.form.category,
                applicationFileList: this.imagesList
            }
            console.log(params)
            const a = this.imagesList.map(item => {
                return item.url
            })
            console.log(a)
            // this.form.photo = a.join(',');
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.$Http.addRepairApplicationForm(params).then(res => {
                        uni.navigateTo({
                            url: '/pages/repair/repair'
                        })
                    })
                }
            })
        },
        // 紧急等级
        levelSubmit(data) {
            this.form.level = data[0].label
            this.form.levelValue = data[0].value
        },
        // 选择设备
        runningSubmit(data) {
            console.log(data)
            this.form.sbId = data.value
            this.$Http
                .fetchSbInfo({
                    id: data.value
                })
                .then(res => {
                    this.form.sbNo = res.data.no
                    this.form.sbName = res.data.name
                })

            this.form.running = data.label
        },
        // 是否
        haltSubmit(data) {
            this.form.halt = data[0].label
            this.form.needStop = data[0].value
        },
        repairSubmit(data) {
            this.form.repair = data[0].label
            this.form.source = data[0].value
        },
        // 删除成功
        uploadRemove(index, lists, name) {
            this.fileList = lists
            this.imagesList.splice(index, 1)
            console.log(this.imagesList)
        },
        // 上传成功
        uploadSuccess(data, index, lists, name) {
            this.fileList = lists
            this.imagesList.push(data.data)
            console.log(this.imagesList)
        },
        sbNoBlur(sbNo) {
            if (sbNo == null || sbNo === '') {
                this.$Message.toast('请输入设备新号')
                return
            }
            this.form.no = sbNo
            this.$Http
                .fetchSbInfoByModel({
                    no: sbNo
                })
                .then(res => {
                    if (res.data == null) {
                        this.$Message.toast('找不到对应新号的设备，请重新输入')
                    } else {
                        this.form.sbId = res.data.id
                        this.form.sbName = res.data.name
                    }
                })
        }
        // initSb() {
        //   this.$Http
        //     .getSbInfoPage({
        //       pageNum: 1,
        //       pageSize: 1000,
        //       filter: 0,
        //     })
        //     .then((res) => {
        //       let data = res.data.rows;
        //       console.log(data);
        //       data.forEach((item) => {
        //         this.runningList.push({
        //           label: item.nameModel,
        //           value: item.id,
        //         });
        //       });
        //     });
        // },
    }
}
</script>

<style lang="less">
.footer {
    bottom: 150rpx;
    left: 0;
    right: 0;
    z-index: 10000;
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

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