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

<template>
    <div class="app-container">
        <!-- 预报废审核 -->
        <TableModel
            :tableProps="config.tableProps"
            :sendApi="getForecastWasteListApi"
            :formLabel="config.formLabel"
            :exportShow="true"
            :pageShow="true"
            :isSelShow="true"
            @getTableSelectionChange="getTableSelChangeOuter"
        >
            <template slot-scope="{ data }">
                <el-button type="text" size="mini" @click="handlePreview(data)"
                    >查看</el-button
                >
                <el-button type="text" size="mini" @click="handleAuditing(data)"
                    >审核</el-button
                >
            </template>
        </TableModel>

        <DialogModel
            :title="title"
            :innerTitle="innerTitle"
            :dialogVisible="dialogVisible"
            :innerDialogVisible="innerDialogVisible"
            :width="dialogWidth"
            :innerWidth="`50%`"
            @closeDialog="closeDialog"
            @closeDialogInner="closeDialogInner"
        >
            <template slot="preview">
                <TableModel
                    :tableProps="config.previewTableProps"
                    :sendApi="getDialogListApi"
                    :handleColShow="false"
                    :formLabel="config.previewFormLabel"
                    :isSelShow="isSelShow"
                    ref="auditingTableRef"
                    @getTableSelectionChange="getTableSelChangeInner"
                >
                </TableModel>
            </template>
            <template slot="handleBtn" v-if="handleBtn">
                <el-row class="handle-btn">
                    <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>
            </template>

            <template slot="innerHandleBtn">
                <el-row class="handle-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 '../component/tableModel.vue'
    import DialogModel from '../component/dialogModel.vue'
    import { getSelList } from './index.js'
    import config from './index'
    import {
        getForecastWasteListApi,
        getDialogListApi,
    } from '@/api/scrap/forecastWaste.js'
    export default {
        name: 'scrapAuditing',
        components: {
            TableModel,
            DialogModel,
        },

        data() {
            return {
                config,
                /* 主页列表接口 */
                getForecastWasteListApi,
                /* 弹框内列表接口 */
                getDialogListApi,
                /* 弹框标题 */
                title: '查看',
                /* 内层弹框标题 */
                innerTitle: '',
                /* 弹框显示隐藏 */
                dialogVisible: false,
                /* 内层弹框显示隐藏 */
                innerDialogVisible: false,
                /* 弹框宽度 */
                dialogWidth: '70%',
                /* 弹框内查询条件 */
                typeName: '',
                /* 审核通过与驳回按钮的控制显示 */
                handleBtn: false,
                /* 驳回原因 */
                rejectReason: '',
                /* 表格是否需要复选框 */
                isSelShow: true,
                /* 选中的审核数据 */
                selAuditingList: [],
                getSelList,
            }
        },
        created() {
            /* 获取表单的下拉数据 */
            this.getSelList()
        },
        methods: {
            /* 查看 */
            handlePreview(val) {
                console.log(val, '查看')
                this.title = '查看'
                this.isSelShow = false
                this.dialogVisible = true
            },
            /* 审核 */
            handleAuditing(val) {
                this.title = '审核'
                this.isSelShow = true
                this.handleBtn = true
                console.log(val, '审核')
                this.dialogVisible = true
            },
            /* 自定义事件关闭弹框 (外层) */
            closeDialog(val) {
                this.dialogVisible = val
            },
            /* 自定义事件关闭弹框 (内层) */
            closeDialogInner(val) {
                this.innerDialogVisible = val
            },
            /* 审核通过 */
            auditingPass() {
                if (this.selAuditingList.length < 1) {
                    this.$message.error('请勾选审核设备')
                    return
                }
                console.log('审核通过')
                this.dialogVisible = false
            },
            /* 审核驳回 */
            auditingReject() {
                if (this.selAuditingList.length < 1) {
                    this.$message.error('请勾选审核设备')
                    return
                }
                console.log('审核驳回')
                this.innerTitle = '驳回原因'
                this.innerDialogVisible = true
            },

            /* 驳回原因弹框内取消按钮 */
            handleCancelInner() {
                /* 关闭内弹框 */
                this.innerDialogVisible = false
            },
            /* 驳回弹框内保存按钮 */
            handleSubmitInner() {
                if (!this.rejectReason) {
                    this.$message.error('驳回原因不能为空！')
                    this.$refs.rejectReasonRef.focus()
                    return
                } else {
                    this.innerDialogVisible = false
                }
            },
            /* 主页列表复选框勾选事件 */
            getTableSelChangeOuter(list) {
                console.log(list, '主页列表勾选数据')
            },
            /* 审核时列表复选框勾选事件 */
            getTableSelChangeInner(list) {
                console.log(list, '审核列表勾选数据')
                this.selAuditingList = list
            },
        },
        watch: {
            /* 监听驳回原因弹框关闭 清空驳回原因内容 */
            innerDialogVisible: {
                handler(newVal) {
                    if (!newVal) {
                        this.rejectReason = ''
                    }
                },
            },
            /* 监听审核弹框关闭 清空列表的复选框选中状态 */
            dialogVisible: {
                handler(newVal) {
                    if (!newVal) {
                        this.$refs.auditingTableRef.clearSelType()
                    }
                },
            },
        },
    }
</script>

<style scoped>
    .handle-btn {
        margin-top: 15px;
        padding-top: 8px;
        text-align: right;
        border-top: 1px solid #393737;
    }
</style>