devicesmgt/sgzb-ui/src/views/scrapManage/scrap/scrapAuditing/index.vue

<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel :config="config" :sendApi="getScrapListApi" ref="tbRef">
            <template slot="export" slot-scope="{ pageParams }">
                <el-row class="mb8">
                    <el-button
                        plain
                        size="mini"
                        type="success"
                        icon="el-icon-download"
                        @click="handelExportData(pageParams)"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 报废来源 -->
            <template slot-scope="{ data }" slot="source">
                <ScrapSource :data="data" />
            </template>

            <!-- 状态 -->
            <template slot-scope="{ data }" slot="type">
                <el-tag size="mini" v-if="data.taskStatus == 124"
                    >待审核</el-tag
                >
                <el-tag size="mini" type="warning" v-if="data.taskStatus == 58"
                    >审核中</el-tag
                >
                <el-tag size="mini" type="danger" v-if="data.taskStatus == 61"
                    >已驳回</el-tag
                >
                <el-tag size="mini" type="success" v-if="data.taskStatus == 59"
                    >已通过</el-tag
                >
            </template>

            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="{ data }">
                <el-button
                    type="text"
                    icon="el-icon-zoom-in"
                    @click="handlePreview(data)"
                >
                    查看
                </el-button>
                <el-button
                    type="text"
                    style="color: #e6a23c"
                    icon="el-icon-edit-outline"
                    v-show="auditingIsShow(data)"
                    v-hasPermi="['scrap:auditing']"
                    @click="handleAuditing(data)"
                >
                    <!--   v-if="auditingIsShow(data)" -->
                    审核
                </el-button>
                <el-button
                    type="text"
                    style="color: #67c23a"
                    icon="el-icon-chat-line-square"
                    @click="handleAuditingDetails(data)"
                >
                    审批详情
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
            @closeDialogInner="closeDialogInner"
        >
            <!-- 弹框外层内容  查看 审核 审核详情-->
            <template slot="outerContent">
                <!-- 查看内容 -->
                <template v-if="dialogConfig.outerTitle === '查看'">
                    <TableModel
                        :config="dialogConfig"
                        :sendParams="sendParams"
                        :sendApi="getDialogListApi"
                    >
                        <!-- 损坏原因 -->
                        <template slot-scope="{ data }" slot="t_damage">
                            <!-- {{ data.scrapType == 1 ? '人为' : '自然' }} -->
                            <template v-if="data.scrapType == 1">人为</template>
                            <template v-if="data.scrapType == 0">自然</template>
                        </template>
                        <!-- 报废图片 -->
                        <template slot-scope="{ data }" slot="t_img">
                            <ScrapImg
                                v-if="data.fileUrl"
                                :scrapImgUrl="data.fileUrl"
                            />
                        </template>
                    </TableModel>
                </template>
                <template v-if="dialogConfig.outerTitle === '审核'">
                    <TableModel
                        ref="dialogTbRef"
                        :config="dialogConfig"
                        :sendParams="sendParams"
                        :sendApi="getDialogListApi"
                        @getTableSelectionChange="getDialogTbChange"
                    >
                        <!-- 损坏原因 -->
                        <template slot-scope="{ data }" slot="t_damage">
                            <!-- {{ data.scrapType == 1 ? '人为' : '自然' }} -->
                            <template v-if="data.scrapType == 1">人为</template>
                            <template v-if="data.scrapType == 0">自然</template>
                        </template>
                        <!-- 报废图片 -->
                        <template slot-scope="{ data }" slot="t_img">
                            <ScrapImg
                                v-if="data.fileUrl"
                                :scrapImgUrl="data.fileUrl"
                            />
                        </template>
                    </TableModel>
                    <el-row class="dialog-common-btn">
                        <el-button
                            size="mini"
                            type="success"
                            @click="handlePass"
                            >通过</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleReject"
                            >驳回</el-button
                        >
                    </el-row>
                </template>

                <!-- 审核详情 -->
                <template v-if="dialogConfig.outerTitle === '审批详情'">
                    <AuditingDetails :auditingList="auditingList" />
                </template>
            </template>

            <!-- 弹框内层内容 -->
            <template slot="innerContent">
                <el-row>
                    <el-col :span="4">请输入驳回原因</el-col>
                    <el-col :span="20">
                        <el-input
                            :rows="6"
                            type="textarea"
                            maxlength="100"
                            ref="rejectReasonRef"
                            v-model="rejectReason"
                        />
                    </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 ScrapImg from '../../component/scrapImg.vue'
import ScrapSource from '../../component/scrapSource.vue'
import AuditingDetails from '../../component/auditingDetails.vue'
import { config, dialogConfig, getSelList } from './config'
import {
    getScrapListApi,
    getDialogListApi,
    auditingScrapApi,
} from '@/api/scrap/forecastWaste.js'
export default {
    components: {
        TableModel,
        DialogModel,
        ScrapImg,
        ScrapSource,
        AuditingDetails,
    },
    data() {
        return {
            config,
            dialogConfig,
            getScrapListApi,
            getDialogListApi,
            rejectReason: '', // 驳回原因
            sendParams: {}, // 弹框内列表查看时参数
            auditingList: [], // 审批详情的列表
            selectionList: [], // 选中的列表数据
            /* 审核参数 */
            auditingParams: {
                deptId: parseInt(sessionStorage.getItem('deptId')),
                userId: sessionStorage.getItem('userId'),
                taskId: '',
                status: '',
                reasonRejection: '',
            },
            deptId: sessionStorage.getItem('deptId'),
            getSelList,
        }
    },
    created() {
        this.getSelList()
    },
    methods: {
        /* 按钮操作 */
        handlePreview(row) {
            this.sendParams.taskId = row.taskId
            this.dialogConfig.outerTitle = '查看'
            this.dialogConfig.outerWidth = '70%'
            this.dialogConfig.outerVisible = true
        },
        handleAuditing(row) {
            this.sendParams.taskId = this.auditingParams.taskId = row.taskId
            this.dialogConfig.outerTitle = '审核'
            this.dialogConfig.outerWidth = '70%'
            this.dialogConfig.outerVisible = true
        },
        handleAuditingDetails(row) {
            this.auditingList = row.scrapAuditorSetList
            this.dialogConfig.outerTitle = '审批详情'
            this.dialogConfig.outerWidth = '40%'
            this.dialogConfig.outerVisible = true
        },

        /* 关闭外层弹框 */
        closeDialogOuter(val) {
            this.dialogConfig.outerVisible = val
        },
        /* 关闭内层弹框 */
        closeDialogInner(val) {
            this.dialogConfig.innerVisible = val
        },
        /* 获取弹框内表格选中数据 */
        getDialogTbChange(list) {
            this.selectionList = list
        },
        /* 审核通过 */
        async handlePass() {
            this.auditingParams.status = '1'
            this.auditingParams.reasonRejection = '同意'
            const res = await auditingScrapApi(this.auditingParams)
            if (res.code == 200) {
                this.$message.success('审核通过')
                this.dialogConfig.outerVisible = false
                /* 刷新列表 */
                this.$refs.tbRef.getList()
            }
        },
        /* 审核驳回 */
        handleReject() {
            /* 先打开内测弹框 */
            this.dialogConfig.innerTitle = '驳回原因'
            this.dialogConfig.innerVisible = true
        },

        /* 驳回原因页面取消 */
        handleCancelInner() {
            this.rejectReason = ''
            this.dialogConfig.innerVisible = false
        },
        /* 驳回原因页面保存 */
        async handleSubmitInner() {
            if (!this.rejectReason) {
                this.$message.error('请输入驳回原因')
                return
            }

            this.auditingParams.status = '2'
            this.auditingParams.reasonRejection = this.rejectReason
            const res = await auditingScrapApi(this.auditingParams)
            if (res.code === 200) {
                this.$message.success('已驳回')
                this.dialogConfig.innerVisible = false
                this.dialogConfig.outerVisible = false
                this.rejectReason = ''
                /* 刷新列表 */
                this.$refs.tbRef.getList()
            }
        },
        /* 审核按钮的显示条件 */
        auditingIsShow(row) {
            let temp = row.scrapAuditorSetList?.some((e) => {
                return e.deptId == this.deptId && e.status == '0'
            })
            return temp
        },
        /* 导出数据 */
        handelExportData(data) {
            console.log(this.tableSelList, ' this.tableSelList')
            this.download(
                'material/scrap/exportScrapTaskReviewList',
                {
                    ...data,
                },
                `报废审核列表_${new Date().getTime()}.xlsx`,
            )
            console.log('数据导出', data)
        },
    },
    watch: {
        $route: {
            handler(to) {
                if (to.query.keyWord) {
                    this.config.routerParams = to.query.keyWord
                }
            },
            deep: true,
            immediate: true,
        },
    },
}
</script>