devicesmgt/sgzb-ui/src/views/scrapManage/forecastWaste/auditing/index.vue

<template>
    <div class="app-container">
        <!-- 预报废审核 -->
        <TableModel
            ref="tbRef"
            :config="config"
            :sendApi="getForecastWasteListApi"
            @getTableSelectionChange="getTableSelectionList"
        >
            <template slot="export" slot-scope="{ pageParams }">
                <el-row :gutter="10" class="mb8">
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExport(pageParams)"
                        >导出数据</el-button
                    >
                </el-row>
            </template>
            <!-- 报废来源 -->
            <template slot-scope="{ data }" slot="source">
                <ScrapSource :data="data" />
            </template>
            <!-- 单号  1、退料单号 2、维修单号 3、盘点单号 -->
            <template slot-scope="{ data }" slot="code">
                <template v-if="data.scrapSource === 1">{{
                    data.repairCode
                }}</template>
                <template v-if="data.scrapSource === 2">{{
                    data.repairNum
                }}</template>
            </template>
            <!--审核状态 -->
            <template slot-scope="{ data }" slot="type">
                <el-tag v-if="data.taskStatus === 120" size="mini"
                    >待审核</el-tag
                >
                <el-tag
                    type="warning"
                    v-if="data.taskStatus === 121"
                    size="mini"
                    >审核中</el-tag
                >
                <el-tag type="danger" v-if="data.taskStatus === 123" size="mini"
                    >已驳回</el-tag
                >
                <el-tag
                    type="success"
                    v-if="data.taskStatus === 122"
                    size="mini"
                    >已通过</el-tag
                >
            </template>
            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="{ data }">
                <el-button type="text" size="mini" @click="handlePreview(data)"
                    >查看</el-button
                >
                <el-button
                    type="text"
                    size="mini"
                    v-if="data.taskStatus === 121 || data.taskStatus === 120"
                    @click="handleAuditing(data)"
                    v-hasPermi="['forecast:waste:auditing']"
                    >审核</el-button
                >
            </template>
        </TableModel>

        <!-- 弹框内容 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
            @closeDialogInner="closeDialogInner"
        >
            <template slot="outerContent">
                <TableModel
                    :config="dialogConfig"
                    :sendParams="sendParams"
                    :sendApi="getDialogListApi"
                    :selectable="
                        (row) => {
                            if (row != 0) {
                                this.tbAllChecked = true
                            } else {
                                this.tbAllChecked = false
                            }
                            return row.status == 0
                        }
                    "
                    ref="dialogTbRef"
                    @getTableSelectionChange="getDialogTbSelList"
                >
                    <!--审核状态 -->
                    <template slot-scope="{ data }" slot="t_type">
                        <el-tag v-if="data.status == 0" size="mini"
                            >待审核</el-tag
                        >
                        <el-tag
                            type="success"
                            v-if="data.status == 1"
                            size="mini"
                            >通过</el-tag
                        >
                        <el-tag
                            type="warning"
                            v-if="data.status == 2"
                            size="mini"
                            >驳回</el-tag
                        >
                    </template>
                </TableModel>
                <el-row
                    class="dialog-common-btn"
                    style="margin-top: 20px"
                    v-if="dialogConfig.outerTitle === '审核'"
                >
                    <el-button size="mini" type="primary" @click="auditingPass"
                        >通 过</el-button
                    >
                    <el-button
                        size="mini"
                        type="warning"
                        @click="auditingReject"
                        >驳 回</el-button
                    >
                </el-row>
            </template>

            <!-- 弹框内层内容 -->
            <template slot="innerContent">
                <el-row>
                    <el-col :span="4">请输入驳回原因</el-col>
                    <el-col :span="20">
                        <el-input
                            v-model="rejectReason"
                            type="textarea"
                            :rows="6"
                            ref="rejectReasonRef"
                        />
                    </el-col>
                </el-row>

                <el-row class="dialog-common-btn">
                    <el-button size="mini" plain @click="handleCancelInner"
                        >取 消</el-button
                    >
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handleSubmitInner"
                        >保 存</el-button
                    >
                </el-row>
            </template>
        </DialogModel>
    </div>
</template>

<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import ScrapSource from '../../component/scrapSource.vue'
import {
    getForecastWasteListApi,
    getDialogListApi,
    auditingPreScrapApi,
} from '@/api/scrap/forecastWaste.js'
import { config, getSelList, getTypeListSel, dialogConfig } from './config'
export default {
    name: 'Inventory',
    components: {
        TableModel,
        DialogModel,
        ScrapSource,
    },
    data() {
        return {
            config,
            dialogConfig,
            getDialogListApi,
            getForecastWasteListApi,
            getSelList,
            getTypeListSel,
            /* 驳回原因 */
            rejectReason: '',
            /* 选中的审核数据 */
            selAuditingList: [],
            /* 请求参数 */
            sendParams: {},
            /* 当前登录的用户id */
            userId: sessionStorage.getItem('userId'),
            /* 审核参数 */
            auditingParams: {
                taskId: '',
                scrapDetailList: [],
            },
            tbAllChecked: false, // 判断当前设备是否全部审核过
            dataCondition: [], // 导出taskId列表
        }
    },
    created() {
        this.getSelList()
        this.getTypeListSel()
    },
    methods: {
        /* 查看 */
        async handlePreview(row) {
            this.sendParams.taskId = this.auditingParams.taskId = row.taskId
            this.dialogConfig.outerTitle = '查看'
            this.dialogConfig.isSelShow = false
            this.dialogConfig.outerVisible = true
        },
        /* 审核 */
        handleAuditing(row) {
            this.sendParams.taskId = this.auditingParams.taskId = row.taskId
            this.dialogConfig.outerTitle = '审核'
            this.dialogConfig.isSelShow = true
            this.dialogConfig.outerVisible = true
        },
        /* 外层弹框关闭 */
        closeDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        /* 内层弹框关闭 */
        closeDialogInner() {
            this.dialogConfig.innerVisible = false
        },
        /* 弹框内列表复选框勾选后数据 */
        getDialogTbSelList(list) {
            this.selAuditingList = list
        },
        getTableSelectionList(list) {
            this.dataCondition = []
            if (list.length > 0)
                list.forEach((ele) => {
                    this.dataCondition.push(ele.taskId)
                })
        },
        /* 审核通过 */
        async auditingPass() {
            if (this.selAuditingList.length < 1) {
                this.$message.error('请勾选审核设备')
                return
            }

            this.selAuditingList.map((e) => {
                /* 获取当前需要审核的设备数据 */
                let deviceInfo = {
                    id: e.id, // 设备ID
                    auditBy: this.userId, // 审核人 ID
                    status: '1', //  1 通过  2 驳回
                }

                this.auditingParams.scrapDetailList.push(deviceInfo)
            })
            const res = await auditingPreScrapApi(this.auditingParams)
            if (res.code == 200) {
                this.$message.success('审核通过！')
                this.dialogConfig.outerVisible = false
                this.$refs.tbRef.getList()
            }
        },
        /* 审核驳回 */
        async auditingReject() {
            // if (this.tbAllChecked) {
            //     this.$message.error('当前已没有可审核的装备')
            //     this.dialogConfig.outerVisible = false
            //     return
            // }
            if (this.selAuditingList.length < 1) {
                this.$message.error('请勾选审核设备')
                return
            }
            this.dialogConfig.innerTitle = '驳回原因'
            this.dialogConfig.innerVisible = true
        },
        /* 驳回原因弹框内取消按钮 */
        handleCancelInner() {
            /* 关闭内弹框 */
            this.dialogConfig.innerVisible = false
        },
        /* 驳回弹框内保存按钮 */
        async handleSubmitInner() {
            if (!this.rejectReason) {
                this.$message.error('驳回原因不能为空！')
                this.$refs.rejectReasonRef.focus()
                return
            } else {
                this.selAuditingList.map((e) => {
                    /* 获取当前需要审核的设备数据 */
                    let deviceInfo = {
                        id: e.id, // 设备ID
                        auditBy: this.userId, // 审核人 ID
                        status: '2', //  1 通过  2 驳回
                        auditRemark: this.rejectReason, // 驳回原因
                    }

                    this.auditingParams.scrapDetailList.push(deviceInfo)
                })
                const res = await auditingPreScrapApi(this.auditingParams)
                if (res.code == 200) {
                    this.$message.success('已驳回！')
                    this.dialogConfig.innerVisible = false
                    /* 当驳回成功 重新查询列表回显数据 */
                    this.$nextTick(() => {
                        this.$refs.dialogTbRef.getList()
                    })
                }
            }
        },
        /* 数据导出 */
        handleExport(data) {
            console.log(
                '🚀 ~ 导出 ~ this.dataCondition:',
                data,
                this.dataCondition,
            )
            if (this.dataCondition.length > 0)
                data.dataCondition = this.dataCondition
            this.download(
                'material/scrap/exportForecastWaste',
                {
                    ...data,
                },
                `预报废审核列表_${new Date().getTime()}.xlsx`,
            )
        },
    },
    watch: {
        dialogConfig: {
            handler(newVal) {
                /* 监听外层弹框关闭 清空勾选的数据 */
                if (!newVal.outerVisible) {
                    this.selectionList = []
                }
            },
            deep: true,
        },
    },
}
</script>