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

<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel
            :config="config"
            :sendApi="getForecastWasteListApi"
            :handleWidth="`160px`"
        >
            <template slot="export">
                <el-row :gutter="10" class="mb8">
                    <el-button plain icon="el-icon-download" size="mini"
                        >批量处置</el-button
                    >
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="data">
                <el-button
                    size="mini"
                    type="text"
                    v-for="btn in config.handleBtn"
                    :key="btn.id"
                    @click="handleBtn(data, btn.id)"
                >
                    {{ btn.btn_title }}
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <!-- 弹框内容  查看 处置-->
            <template slot="outerContent">
                <template v-if="dialogConfig.outerTitle === '查看'">
                    <TableModel
                        :config="dialogConfig"
                        :sendApi="getForecastWasteListApi"
                    ></TableModel>
                </template>
                <template v-else>
                    <el-row type="flex" justify="space-around">
                        <el-col :span="6">请上传处置文件</el-col>
                        <el-col>
                            <ImageUpload />
                        </el-col>
                    </el-row>
                </template>
            </template>
        </DialogModel>
    </div>
</template>

<script>
    import { getForecastWasteListApi } from '@/api/scrap/forecastWaste.js'
    import TableModel from '@/components/TableModel'
    import DialogModel from '@/components/DialogModel'
    import { config, dialogConfig } from './config.js'
    export default {
        components: {
            TableModel,
            DialogModel,
        },
        data() {
            return {
                config,
                dialogConfig,
                getForecastWasteListApi,
                /* 选中的列表数据 */
                selectionList: [],
                /* 驳回原因 */
                rejectReason: '',
            }
        },
        created() {
            console.log(process.env.VUE_APP_BASE_UPLOAD_URL, '**')
        },
        methods: {
            /* 按钮操作 */
            handleBtn(row, id) {
                console.log(row, id, '操作按钮')
                switch (id) {
                    case 1:
                        this.dialogConfig.outerTitle = '查看'
                        this.dialogConfig.outerWidth = '70%'
                        this.dialogConfig.isSelShow = false
                        break
                    case 2:
                        this.dialogConfig.outerTitle = '处置'
                        this.dialogConfig.outerWidth = '40%'
                        this.dialogConfig.isSelShow = true
                        break
                }

                this.dialogConfig.outerVisible = true
            },
            /* 关闭外层弹框 */
            closeDialogOuter(val) {
                this.dialogConfig.outerVisible = val
            },
        },
    }
</script>