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

<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <u-toast ref="uToast" />
        <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="通知班长" :label-width="150">
                    <u-input v-model="form.notifyTeamLeaders" disabled @click="openLeaderPopup" type="select"
                        placeholder="请选择通知班长（可多选，非必填）" />
                </u-form-item>
                <u-popup v-model="leaderPopupShow" mode="bottom" border-radius="20">
                    <view class="bg-color-white">
                        <view class="d-flex j-between a-center p3">
                            <view class="text-color-6 f-size-28" @click="cancelLeaderSelect">取消</view>
                            <view class="main-color-text f-size-32 f-weight-6">通知班长（可多选）</view>
                            <view class="main-color-text f-size-28" @click="confirmLeaderSelect">确定</view>
                        </view>
                        <scroll-view scroll-y style="max-height: 500rpx" class="px3">
                            <u-checkbox-group shape="square">
                                <view class="py2" v-for="(leader, index) in teamLeaderList" :key="leader.userId">
                                    <u-checkbox v-model="teamLeaderList[index].checked" :name="leader.userId">
                                        {{ leader.realName }}
                                    </u-checkbox>
                                </view>
                            </u-checkbox-group>
                            <view v-if="!teamLeaderList.length" class="p3 text-color-6 f-size-28">
                                暂无具有班长身份的人员
                            </view>
                        </scroll-view>
                    </view>
                </u-popup>
                <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>

            <!-- <button class="main-color-bg text-color-white" @tap='handleSubmit'>提交</button> -->
            <view class="p-fixed d-flex j-around a-center footer">
                <view class="main-color-bg text-color-white common" @tap="handleSubmit">提交</view>
            </view>
        </view>
    </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: '',
                // 通知班长：仅展示已选班长姓名，提交用 selectedLeaderIds
                notifyTeamLeaders: ''
            },
            teamLeaderList: [], // 全部具有班长身份的人，带 checked 勾选状态
            defaultLeaderIds: [], // 当前用户班组下的班长，默认勾选
            selectedLeaderIds: [], // 已选班长用户id
            leaderPopupShow: false, // 通知班长多选弹层
            category: '',
            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.getUploadUrlIgnores(),
            // action: 'http://39.103.133.141:8000/mock/7/upms/files/upload',
            /* header: {
                      Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
                  }, */
            fileList: [],
            sourceMap: {},
            levelMap: {},
            statusMap: {},
            needStopMap: {},
            categoryMap: [],
            haltDefaultValue: [0],
            rules: {
                running: [
                    {
                        required: true,
                        message: '请选择设备',
                        trigger: ['blur', 'change']
                    }
                ],
                category: [
                    {
                        required: true,
                        message: '请选择工单类别',
                        trigger: ['blur', 'change']
                    }
                ],
                halt: [
                    {
                        required: true,
                        message: '请选择是否停机',
                        trigger: ['blur', 'change']
                    }
                ],

                repair: [
                    {
                        required: true,
                        message: '请选择报修来源',
                        trigger: ['blur', 'change']
                    }
                ],
                actualUser: [
                    {
                        required: true,
                        message: '请填写报修人',
                        trigger: ['blur', 'change']
                    }
                ],
                sbCph: [
                    {
                        required: true,
                        message: '请填写设备使用位置',
                        trigger: ['blur', 'change']
                    }
                ],
                level: [
                    {
                        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: '',
            aShow: false,
            address: '',
            sbPositionData: [],
            sbId: null,
            aList: []
        }
    },
    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
            })
        this.getTeamLeaders()
        // 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: {
        // 获取通知班长候选人：默认带出当前用户班组下的班长，找不到则空着
        getTeamLeaders() {
            this.$Http
                .queryRepairTeamLeaders()
                .then(res => {
                    const data = res.data || {}
                    const defaultIds = data.defaultIds || []
                    // 每项附加 checked 勾选状态，默认勾选本班组班长
                    this.teamLeaderList = (data.leaders || []).map(item => ({
                        ...item,
                        checked: defaultIds.indexOf(item.userId) > -1
                    }))
                    this.defaultLeaderIds = defaultIds
                    this.selectedLeaderIds = defaultIds.slice()
                    this.syncLeaderDisplay()
                })
        },
        // 已选班长id同步到表单展示姓名
        syncLeaderDisplay() {
            const names = this.teamLeaderList
                .filter(item => this.selectedLeaderIds.indexOf(item.userId) > -1)
                .map(item => item.realName)
            this.form.notifyTeamLeaders = names.join('、')
        },
        // 用已选id刷新弹层勾选状态
        resetLeaderChecked() {
            this.teamLeaderList.forEach((item, index) => {
                this.$set(this.teamLeaderList[index], 'checked', this.selectedLeaderIds.indexOf(item.userId) > -1)
            })
        },
        openLeaderPopup() {
            if (!this.teamLeaderList.length) {
                uni.showToast({ icon: 'none', title: '暂无具有班长身份的人员' })
                return
            }
            this.resetLeaderChecked()
            this.leaderPopupShow = true
        },
        confirmLeaderSelect() {
            this.selectedLeaderIds = this.teamLeaderList
                .filter(item => item.checked)
                .map(item => item.userId)
            this.syncLeaderDisplay()
            this.leaderPopupShow = false
        },
        cancelLeaderSelect() {
            // 取消：丢弃弹层内未确认的勾选
            this.resetLeaderChecked()
            this.leaderPopupShow = false
        },
        //
        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() {
            const params = {
                content: this.form.content,
                actualUser: this.form.actualUser,
                needStop: this.form.needStop,
                sbId: this.form.sbId,
                sbName: this.form.sbName,
                sbCph: this.form.sbCph,
                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,
                // 通知班长：选中班长的用户id，逗号分隔，与 PC 端保持一致
                notifyTeamLeaders: this.selectedLeaderIds.join(','),
                applicationFileList: this.imagesList
            }
            // this.form.photo = a.join(',');
            var that = this
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.$Http.addRepairApplicationForm(params).then(res => {
                        const sbId = that.form.sbId
                        that.resetForm()
                        uni.showToast({
                            icon: 'none',
                            title: '报修单已提交!',
                            duration: 2000
                        })
                        setTimeout(function () {
                            uni.navigateTo({
                                url: '/pages/equipment-detail/equipment-detail?detailId=' + sbId
                            })
                        }, 2000)
                    })
                }
            })
        },
        // 报修提交成功后清除表单数据
        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: '',
                notifyTeamLeaders: ''
            }
            this.category = ''
            this.imagesList = []
            this.fileList = []
            // 通知班长恢复默认本班组班长
            this.selectedLeaderIds = this.defaultLeaderIds.slice()
            this.syncLeaderDisplay()
        },
        // 紧急等级
        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)
        }

        // 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: 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>