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

<template>
    <div class="app-container">
        <!-- 预报废列表 -->
        <template v-if="!temp">
            <TableModel
                :tableProps="config.listingTableProps"
                :sendApi="getPreScrapListApi"
                :formLabel="config.listingFormLabel"
                :exportShow="true"
                :pageShow="true"
                :isSelShow="true"
                :handleWidth="`200px`"
                @getTableSelectionChange="getTableSelectionChange"
            >
                <template slot="submitScrap">
                    <el-col :span="1.5">
                        <el-button
                            type="warning"
                            plain
                            size="mini"
                            @click="handelSubmitScrap"
                            >提交报废</el-button
                        >
                    </el-col>
                </template>

                <template slot-scope="{ data }">
                    <el-button
                        type="text"
                        size="mini"
                        @click="handlePreview(data)"
                        >查看</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        v-if="data.taskStatus == 124"
                        @click="handleSubmitScrap(data)"
                        >提交报废</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleAuditing(data)"
                        >审批详情</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        v-if="data.taskStatus == 61"
                        @click="handleReject(data)"
                        >驳回退料</el-button
                    >
                </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>
            </TableModel>

            <!-- 查看弹框 -->
            <DialogModel
                :title="title"
                :dialogVisible="dialogVisible"
                :width="dialogWidth"
                @closeDialog="closeDialog"
            >
                <!-- 查看内容 -->
                <template slot="preview" v-if="title === '查看'">
                    <TableModel
                        :tableProps="config.previewTableProps"
                        :handleColShow="false"
                        :formLabel="config.previewFormLabel"
                    >
                    </TableModel
                ></template>

                <!-- 审批详情 -->
                <template v-if="title === '审批详情'">
                    <el-table :data="audDetails">
                        <el-table-column
                            prop="title"
                            align="center"
                            label="审批部门"
                        />
                        <el-table-column
                            prop="result"
                            align="center"
                            label="审批状态"
                        />
                        <el-table-column align="center" label="审批意见" />
                    </el-table>
                </template>

                <!-- 部门选择 -->
                <template v-if="title === '提交报废'">
                    <SelDepart @closeDepartSel="closeDepartSel" />
                </template>
            </DialogModel>
        </template>

        <template v-if="temp">
            <el-row type="flex" justify="space-between" class="back-text">
                <span>驳回退料</span>
                <el-button type="text" @click="handleBack">返回</el-button>
            </el-row>
            <AuditingReturn />
        </template>
    </div>
</template>

<script>
    import TableModel from '../component/tableModel.vue'
    import DialogModel from '../component/dialogModel.vue'
    import SelDepart from '../component/selDepart.vue'
    import AuditingReturn from './auditingReturn.vue' // 退料驳回页面
    import { getPreScrapListApi } from '@/api/scrap/forecastWaste.js'
    import { config } from './index'
    export default {
        name: 'scrapListing',
        components: {
            TableModel,
            DialogModel,
            SelDepart,
            AuditingReturn,
        },
        data() {
            return {
                config,
                getPreScrapListApi,
                title: '',
                dialogWidth: '70%',
                dialogVisible: false,

                selDepart: false,
                tableSelList: [],
                audDetails: [
                    { title: '测试部门', result: '通过' },
                    { title: '施工管理审批', result: '通过' },
                    { title: '安全检查部门', result: '通过' },
                ],
                handleBtn: [
                    { btn_title: '查看', id: 1 },
                    { btn_title: '提交报废', id: 2 },
                    { btn_title: '审批详情', id: 3 },
                    { btn_title: '驳回退料', id: 4 },
                ],
                temp: false,
            }
        },
        methods: {
            /* 列表按钮操作 */

            handlePreview(row) {
                this.title = '查看'
                this.dialogWidth = '70%'
                this.dialogVisible = true
            },
            handleSubmitScrap(row) {
                this.title = '提交报废'
                this.dialogWidth = '50%'
                this.dialogVisible = true
            },
            handleAuditing(row) {
                this.title = '审批详情'
                this.dialogWidth = '50%'
                this.dialogVisible = true
            },
            handleReject(row) {
                this.temp = !this.temp
            },
            // handleBtnEvent(val, id) {
            //     switch (id) {
            //         case 1:

            //             this.previewDetails = true
            //             break
            //         case 2:
            //             this.title = '提交报废'
            //             this.dialogWidth = '50%'
            //             this.selDepart = true
            //             break
            //         case 3:
            //             this.title = '审批详情'
            //             this.dialogWidth = '50%'
            //             this.auditingShow = true
            //             break
            //         case 4:
            //             this.temp = !this.temp
            //             break
            //     }

            // },

            /* 关闭弹框 */
            closeDialog(val) {
                this.dialogVisible =
                    this.previewDetails =
                    this.auditingShow =
                    this.selDepart =
                        val
            },
            /* 关闭选择审批部门弹框 */
            closeDepartSel(val, list) {
                console.log(list, '选择的部门')
                this.selDepart = this.dialogVisible = val
            },
            /* 批量提交报废按钮 */
            handelSubmitScrap() {
                if (this.tableSelList.length < 1) {
                    this.$message.error('请勾选列表数据！')
                } else {
                    this.dialogWidth = '50%'
                    this.title = '提交报废'
                    this.dialogVisible = true
                }
            },
            /* 表格复选框选中的数据 */
            getTableSelectionChange(val) {
                this.tableSelList = val
            },
            handleBack() {
                this.temp = !this.temp
                this.dialogVisible = false
            },
        },
    }
</script>

<style scoped lang="scss">
    ::v-deep .el-page-header__left {
        display: none;
    }
    .back-text {
        margin-bottom: 8px;
        padding: 0 5px;
        box-shadow: 1px 1px #ccc;

        span {
            font-weight: bold;
        }
    }
</style>