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-select
            v-model="haltState"
            :list="runningList"
            @confirm="runningSubmit"
          ></u-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="设备名称" :label-width="150">
                    <u-input v-model="form.sbName" disabled />
                </u-form-item>
                <u-form-item label="设备编号" :label-width="150">
                    <u-input v-model="form.bianhao" disabled />
                </u-form-item>
                <view class="main-color-text f-size-32 f-weight-6 mt-2">报修信息</view>
                <!--                <u-form-item label="报修来源" prop="repair" required :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="工单类别"
                    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> -->
                <u-form-item label="使用位置" prop="sbCph" required :label-width="150">
                    <tree-select v-model="form.sbCph" valueName="title" :data="sbPositionData"></tree-select>
                </u-form-item>
                <u-form-item label="是否停机" required prop="needStop" :label-width="150">
                    <!-- <u-input v-model="form.halt" disabled @click="haltState = true" placeholder="请选择是否停机"
                        type="select" /> -->
                    <u-radio-group v-model="form.needStop" @change="radioGroupChange">
                        <u-radio :name="0">
                            否
                        </u-radio>
                        <u-radio :name="1">
                            是
                        </u-radio>
                    </u-radio-group>
                </u-form-item>
                <u-form-item label="工单类别" required prop="category" :label-width="150">
                    <u-input v-model="category" disabled @click="categoryState = true" placeholder="请选择工单类别"
                        type="select" />
                    <u-select v-model="categoryState" :list="categoryMap" @confirm="categorySubmit"></u-select>
                </u-form-item>
                <u-form-item label="紧急程度" required prop="level" :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="repairErrorTypeId" :label-width="150">
                    <u-input v-model="form.badType" disabled @click="errorTypeState = true" placeholder="请选择故障类型"
                        type="select" />
                    <u-select v-model="errorTypeState" :list="errorTypeList" @confirm="errorTypeSubmit"></u-select>
                </u-form-item>
                <u-form-item label="要求日期" prop="limitDate" :label-width="150">
                    <u-input v-model="form.limitDate" disabled @click="limitDateShow = true" placeholder="请选择要求日期"
                        type="select" />
                    <u-picker mode="time" v-model="limitDateShow" :params="dateParams"
                        @confirm="limitDateSubmit"></u-picker>
                </u-form-item>
                <u-form-item label="要求时间" prop="limitHours" :label-width="150">
                    <u-input v-model="form.limitHours" type="number" placeholder="请输入要求时间(小时)" />
                </u-form-item>
                <u-form-item label="报修人" prop="actualUser" required :label-width="150">
                    <u-input v-model="form.actualUser" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="故障描述" prop="content" required :label-width="150">
                    <u-input v-model="form.content" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <!--                <u-select v-model="aShow" mode="mutil-column-auto" :list="aList" @confirm="confirm"></u-select>-->
                <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"></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: '',
                sbCph: '',
                bianhao: '',
                halt: '',
                repair: '',
                remarks: '',
                actualUser: '',
                content: '',
                repairErrorTypeId: '',
                photo: '',
                level: '',
                // 传入的
                sbId: '',
                needStop: null,
                levelValue: '',
                source: '',
                limitDate: '',
                limitHours: ''
            },
            badState: false,
            badList: [],
            runningState: false, // 设备选择
            runningList: [],
            haltState: false, // 是否停机
            haltList: [],
            repairState: false, // 报修来源
            repairList: [],
            levelState: false,
            levelList: [],
            categoryState: false, // 工单类别
            errorTypeState: false, // 故障类型
            errorTypeList: [],
            limitDateShow: false, // 要求日期
            dateParams: {
                year: true,
                month: true,
                day: true
            },
            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']
                    }
                ],
                repairErrorTypeId: [
                    {
                        required: true,
                        message: '请选择故障类型',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            // #ifdef MP-WEIXIN
            cursorSpacing: 50,
            // #endif
            // #ifndef MP-WEIXIN
            cursorSpacing: 0,
            // #endif
            sbBackId: '',
            address: '',
            sbPositionData: [],
            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() {
        this.userInfo = this.$BaseTool.UserUtil.getUserInfo()
        if (this.userInfo) {
            this.form.actualUser = this.userInfo.realName
        }
        const pages = getCurrentPages()
        const currPage = pages[pages.length - 1]
        this.sbBackId = currPage.sbBackId
        this.sbId = currPage.sbBackId
        if (this.sbBackId) {
            this.$Http
                .fetchSbInfoIgnores({
                    id: this.sbBackId
                })
                .then(res => {
                    this.form.bianhao = res.data.no
                    this.form.sbName = res.data.name
                    this.form.sbCph = res.data.positionName
                    this.form.running = res.data.name
                    this.form.sbId = this.sbBackId
                })
        }
    },
    onLoad(options) {

        if (options && options.detailId) {
            this.sbId = options.detailId
            this.$Http
                .fetchSbInfoIgnores({
                    id: options.detailId
                })
                .then(res => {
                    this.form.bianhao = res.data.no
                    this.form.sbName = res.data.name
                    this.form.running = res.data.name
                    this.form.sbId = options.detailId
                    this.form.sbCph = res.data.positionName
                })
        }
        // this.sourceMap = this.$DictCache.getLabelByValueMapByType(
        //     this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE
        // );
        // 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
        // );
        console.log(22)
        // 同步 PC 端报修提交字段：工单类别、紧急程度、故障类型字典
        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
            })
        }
        const levelMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_LEVEL
        )
        for (const key in levelMap) {
            this.levelList.push({
                label: levelMap[key],
                value: key
            })
        }
        // 紧急程度默认一级，与 PC 端默认值保持一致
        // if (levelMap && levelMap['1']) {
        //     this.form.level = levelMap['1']
        //     this.form.levelValue = '1'
        // }
        this.$Http
            .getDictType({
                type: 'REPAIR_ERROR_TYPE'
            })
            .then(res => {
                this.errorTypeList = (res.data || []).map(item => ({
                    label: item.label,
                    value: item.value
                }))
            })
        this.$Http
            .getSbPositionTree().then(res => {
                this.sbPositionData = res.data
            })
        // 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
        //     });
        // }
        // console.log(this.categoryMap)
        // 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
        },
        // 工单类别
        categorySubmit(data) {
            this.category = data[0].label
            this.form.category = data[0].value
        },
        // 故障类型
        errorTypeSubmit(data) {
            this.form.badType = data[0].label
            this.form.repairErrorTypeId = data[0].value
        },
        // 要求日期
        limitDateSubmit(e) {
            this.form.limitDate = `${e.year}-${e.month}-${e.day}`
        },
        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'
            })
        },
        // 是否停机切换
        radioGroupChange(value) {
            this.form.needStop = value
        },
        handleSubmit() {
            console.log(this.form);

            if (this.form.sbId === null || this.form.sbId === '') {
                this.$Message.toast('请先输入设备新号')
                return
            }
            const params = {
                content: this.form.content,
                needStop: this.form.needStop,
                sbId: this.form.sbId,
                sbName: this.form.sbName,
                sbCph: this.form.sbCph,
                actualUser: this.form.actualUser,
                category: this.form.category ? Number(this.form.category) : null,
                level: this.form.levelValue ? Number(this.form.levelValue) : null,
                repairErrorTypeId: this.form.repairErrorTypeId || null,
                limitDate: this.form.limitDate || null,
                limitHours: this.form.limitHours || null,
                // 与 PC 端 BaseForm 一致：提交当前登录人部门
                deptId: this.userInfo ? this.userInfo.deptId : null,
                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.checkDuplicateThenAdd(params)
                }
            })
        },
        // 提交前检查该设备是否存在未完结报修单，存在则弹确认框，确认后仍允许提交
        checkDuplicateThenAdd(params) {
            var that = this
            this.$Http.queryUncompletedRepairs({ sbId: params.sbId }).then(res => {
                const list = (res && res.data) || []
                if (list.length === 0) {
                    that.doAddRepair(params)
                    return
                }
                const first = list[0]
                const name = params.sbName || '该设备'
                // 展示最新一笔未完结报修单的状态与报修内容，内容过长截断
                const desc = (first.content || '').length > 30 ? `${first.content.slice(0, 30)}…` : first.content || ''
                const detail = `${first.no} ${first.statusLabel || ''}${desc ? '，内容：' + desc : ''}`
                uni.showModal({
                    title: '重复报修提醒',
                    content: `【${name}】已有 ${list.length} 个未完结报修单（最新：${detail}），是否继续提交新报修单？`,
                    confirmText: '继续提交',
                    cancelText: '取消',
                    success: (r) => {
                        if (r.confirm) {
                            that.doAddRepair(params)
                        }
                    }
                })
            })
        },
        doAddRepair(params) {
            this.$Http.addRepairApplicationForm(params).then(res => {
                this.resetForm()
                uni.navigateTo({
                    url: '/pages/repair/repair'
                })
            })
        },
        // 报修提交成功后清除表单数据
        resetForm() {
            this.form = {
                badType: '',
                running: '',
                sbName: '',
                sbCph: '',
                bianhao: '',
                halt: '',
                repair: '',
                remarks: '',
                actualUser: this.userInfo ? this.userInfo.realName : '',
                content: '',
                repairErrorTypeId: '',
                photo: '',
                level: '',
                sbId: '',
                needStop: 0,
                levelValue: '',
                source: '',
                limitDate: '',
                limitHours: ''
            }
            this.category = ''
            this.imagesList = []
            this.fileList = []
        },
        // 紧急等级
        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.bianhao = res.data.no
                    this.form.sbName = res.data.name
                    this.form.sbCph = res.data.cph
                })

            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>