优化

sgzb-ui/src/api/scrap/forecastWaste.js

@@ -14,3 +14,8 @@ export const getDialogListApi = (data) => {
 export const auditingScrapApi = (data) => {
     return request.post('/material/scrap/forecastWasteAudit', data)
 }
+
+/* 预报废列表 */
+export const getPreScrapListApi = (data) => {
+    return request.get('/material/scrap/getScrapTaskList', { params: data })
+}

sgzb-ui/src/assets/styles/index.scss

@@ -188,3 +188,11 @@ i {
 ul {
   list-style: none;
 }
+
+/* 弹框审核按钮样式 */
+.dialog-common-btn {
+  margin-top: 15px;
+  padding-top: 8px;
+  text-align: right;
+  border-top: 1px solid #393737;
+}

sgzb-ui/src/components/DialogModel/index.vue

@@ -0,0 +1,57 @@
+<template>
+    <!-- 弹框组件 -->
+    <div>
+        <el-dialog
+            :title="dialogConfig.outerTitle"
+            :width="dialogConfig.outerWidth"
+            :visible.sync="dialogConfig.outerVisible"
+            v-if="dialogConfig.outerVisible"
+            :before-close="handleCloseOuter"
+            append-to-body
+        >
+            <!-- 外层弹框内容 -->
+            <slot name="outerContent"></slot>
+
+            <!-- 内层对话框 -->
+            <el-dialog
+                :title="dialogConfig.innerTitle"
+                :width="dialogConfig.innerWidth"
+                :visible.sync="dialogConfig.innerVisible"
+                v-if="dialogConfig.innerVisible"
+                :before-close="handleCloseInner"
+                append-to-body
+            >
+                <!-- 内层弹框内容 -->
+                <slot name="innerContent"></slot>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            /* 配置项 */
+            dialogConfig: {
+                type: Object,
+                default: () => {
+                    return {}
+                },
+            },
+        },
+        methods: {
+            /* 右上角关闭外层 */
+            handleCloseOuter() {
+                /* 通知父组件更改弹框显示值 */
+                this.$emit('closeDialogOuter', false)
+            },
+            /* 右上角关闭内层 */
+            handleCloseInner() {
+                /* 通知父组件更改弹框显示值 */
+                this.$emit('closeDialogInner', false)
+            },
+        },
+    }
+</script>
+
+<style></style>

sgzb-ui/src/components/FormModel/index.vue

@@ -0,0 +1,114 @@
+<template>
+    <!-- 查询表单 -->
+    <div>
+        <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            label-width="100px"
+        >
+            <el-form-item
+                v-for="(item, v) in formLabel"
+                :key="v"
+                :label="item.f_label"
+                :prop="item.f_model"
+            >
+                <el-input
+                    v-if="item.f_type === 'ipt'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请输入${item.f_label}`"
+                    clearable
+                    style="width: 240px"
+                />
+                <el-select
+                    v-if="item.f_type === 'sel'"
+                    v-model="queryParams[item.f_model]"
+                    clearable
+                    filterable
+                    style="width: 240px"
+                    :placeholder="`请选择${item.f_label}`"
+                >
+                    <el-option
+                        v-for="(sel, v) in item.f_selList"
+                        :key="v"
+                        :label="sel.label"
+                        :value="sel.value"
+                    />
+                </el-select>
+                <el-cascader
+                    v-if="item.f_type === 'selCas'"
+                    :options="item.f_selList"
+                    :props="item.optionProps"
+                    :show-all-levels="false"
+                    clearable
+                    style="width: 240px"
+                />
+                <el-date-picker
+                    v-if="item.f_type === 'date'"
+                    v-model="queryParams[item.f_model]"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >查询</el-button
+                >
+                <el-button
+                    type="warning"
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            /* 查询条件 */
+            formLabel: {
+                type: Array,
+                default: () => {
+                    return []
+                },
+            },
+        },
+        data() {
+            return {
+                queryParams: {},
+            }
+        },
+        created() {
+            /* 生产查询参数 */
+            this.formLabel.map((e) => {
+                this.$set(this.queryParams, e.f_model, '')
+            })
+        },
+        methods: {
+            /* 查询按钮 */
+            handleQuery() {
+                this.$emit('queryList', this.queryParams)
+            },
+            /* 重置按钮 */
+            resetQuery() {
+                this.$refs.queryForm.resetFields()
+                this.$emit('queryList', this.queryParams, 'reset')
+            },
+        },
+    }
+</script>
+
+<style></style>

sgzb-ui/src/components/TableModel/index.vue

@@ -0,0 +1,230 @@
+<template>
+    <div>
+        <!-- 查询表单 -->
+        <FormModel
+            :formLabel="config.formLabel"
+            @queryList="queryList"
+            v-if="config.isFormShow"
+        >
+        </FormModel>
+        <!-- 存放导出等相关按钮的插槽 -->
+        <template>
+            <slot name="export"></slot>
+        </template>
+        <!-- 列表 -->
+        <el-table
+            :data="tableList"
+            border
+            ref="tableRef"
+            select-on-indeterminate
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column
+                type="selection"
+                width="45"
+                align="center"
+                :selectable="selectable"
+                v-if="config.isSelShow"
+            />
+            <el-table-column
+                v-for="(item, v) in tableColumCheckProps"
+                :key="v"
+                :label="item.t_label"
+                :prop="item.t_props"
+                :width="item.t_width"
+                align="center"
+                show-overflow-tooltip
+            >
+                <template slot-scope="scope">
+                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                    <template v-if="item.t_slot">
+                        <slot :data="scope.row" :name="item.t_slot"></slot>
+                    </template>
+                    <template v-else>
+                        {{
+                            v === 0
+                                ? scope.$index + 1
+                                : scope.row[item.t_props] || '-'
+                        }}
+                    </template>
+                </template>
+            </el-table-column>
+            <el-table-column
+                align="center"
+                label="操作"
+                v-if="config.handleColShow"
+                :width="handleWidth"
+            >
+                <template slot-scope="{ row }">
+                    <slot :data="row" name="handle"></slot>
+                </template>
+
+                <!-- 增加筛选列显示隐藏操作 -->
+                <template slot="header">
+                    <el-popover
+                        placement="bottom"
+                        title="筛选列"
+                        width="200"
+                        trigger="click"
+                    >
+                        <span slot="reference" class="handel-text">操作</span>
+                        <div>
+                            <el-checkbox
+                                v-for="(check, index) in columCheckList"
+                                v-show="check.t_label != '序号'"
+                                :key="index"
+                                v-model="check.checked"
+                                >{{ check.t_label }}</el-checkbox
+                            >
+                        </div>
+                    </el-popover>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination
+            v-if="config.pageShow"
+            :total="total"
+            :page.sync="pageParams.pageNum"
+            :limit.sync="pageParams.pageSize"
+            @pagination="queryList"
+        />
+    </div>
+</template>
+
+<script>
+    import FormModel from '../FormModel'
+    export default {
+        components: {
+            FormModel,
+        },
+        props: {
+            /* 列表请求接口 */
+            sendApi: {
+                type: Function,
+                default: () => {
+                    return function () {}
+                },
+            },
+            /* 操作栏宽度 */
+            handleWidth: {
+                type: String,
+                default: () => {
+                    return ''
+                },
+            },
+            /* 查看详情需显示列表等操作 传入的参数 */
+            sendParams: {
+                type: Object,
+                default: () => {
+                    return {}
+                },
+            },
+            /* 表格复选框禁用状态 */
+            selectable: {
+                type: Function,
+                default: () => {
+                    return true
+                },
+            },
+
+            /* 列表 查询表单等配置项 */
+            config: {
+                type: Object,
+                default: () => {
+                    return {}
+                },
+            },
+        },
+        data() {
+            return {
+                total: 0,
+                tableList: [
+                    { demo: '123' },
+                    { demo: '123' },
+                    { demo: '123' },
+                    { demo: '123' },
+                    { demo: '123' },
+                ],
+                /* 分页参数 */
+                pageParams: {
+                    pageNum: 1,
+                    pageSize: 10,
+                },
+                /* 操作列显示隐藏数据源 */
+                columCheckList: [],
+            }
+        },
+        created() {
+            this.getList()
+            this.columCheckList = this.config.columnsList
+            this.columCheckList = this.columCheckList.map((e) => {
+                this.$set(e, 'checked', true)
+                return e
+            })
+        },
+        computed: {
+            /* 根据操作栏控制表头是否显示 */
+            tableColumCheckProps() {
+                return this.columCheckList.filter((e) => {
+                    return e.checked != false
+                })
+            },
+        },
+        methods: {
+            /* form 查询组件触发的自定义事件 */
+            async queryList(val, reset) {
+                console.log('查询')
+                if (reset) {
+                    this.pageParams.pageNum = 1
+                    this.pageParams.pageSize = 10
+                }
+                this.pageParams = Object.assign(
+                    val,
+                    this.pageParams,
+                    this.sendParams,
+                )
+                this.pageParams.beginTime = val.time ? val.time[0] : ''
+                this.pageParams.endTime = val.time ? val.time[1] : ''
+                this.getList()
+            },
+            /* 获取列表信息 */
+            async getList() {
+                this.pageParams = Object.assign(
+                    this.pageParams,
+                    this.sendParams,
+                )
+                const res = await this.sendApi(this.pageParams)
+
+                if (res.code == 200) {
+                    this.tableList = res.rows
+                    this.total = res.total
+                }
+            },
+
+            /* 表格复选框事件 */
+            handleSelectionChange(row) {
+                console.log(row, '列表复选框')
+                this.$emit('getTableSelectionChange', row)
+            },
+            /* 清除表格的选中状态 */
+            clearSelType() {
+                this.$refs.tableRef.clearSelection()
+            },
+        },
+    }
+</script>
+
+<style>
+    .check-all {
+        margin-bottom: 5px;
+        cursor: pointer;
+    }
+
+    .handel-text {
+        cursor: pointer;
+    }
+    .handel-text:hover {
+        text-decoration: underline;
+        color: #409eff;
+    }
+</style>

sgzb-ui/src/views/scrapManage/forecastWaste/auditingReturn.vue

@@ -33,7 +33,9 @@
             :dialogVisible="dialogVisible"
             :width="dialogWidth"
             @closeDialog="closeDialog"
-        ></DialogModel>
+        >
+            <TableModel :tableProps="config.returnPreviewTableProps" />
+        </DialogModel>
     </div>
 </template>
 
@@ -54,7 +56,7 @@
                 config,
                 title: '',
                 dialogVisible: false,
-
+                dialogWidth: '',
                 handleBtn: [
                     { btn_title: '查看', id: 1 },
                     { btn_title: '编辑退料', id: 2 },
@@ -73,6 +75,10 @@
                     case 2:
                         this.title = '编辑退料'
                         this.dialogWidth = '70%'
+                        break
+                    case 3:
+                        this.title = '撤回'
+
                         break
                 }
                 this.dialogVisible = true

sgzb-ui/src/views/scrapManage/forecastWaste/index.js

@@ -86,7 +86,7 @@ export const config = {
         { t_width: '', t_props: '', t_label: '报废图片' },
         { t_width: '', t_props: '', t_label: '备注' },
     ],
-    /* 预报废页面驳回退料  列表参数 */
+    /* 预报废列表页面驳回退料  列表参数 */
     returnTableProps: [
         { t_width: '55px', t_props: '', t_label: '序号' },
         { t_width: '', t_props: 'demo', t_label: '类型名称' },
@@ -103,6 +103,15 @@ export const config = {
         { f_label: '类型名称', f_model: 'backUnit', f_type: 'sel', f_selList: [] },
         { f_label: '规格型号', f_model: 'backPro', f_type: 'sel', f_selList: [] },
     ],
+
+    /* 预报废页面驳回退料 查看弹框内列表参数 */
+    returnPreviewTableProps: [
+        { t_width: '55px', t_props: '', t_label: '序号' },
+        { t_width: '', t_props: 'demo', t_label: '设备类型' },
+        { t_width: '', t_props: '', t_label: '规格型号' },
+        { t_width: '', t_props: '', t_label: '设备编码' },
+        { t_width: '', t_props: '', t_label: '退料状态' },
+    ],
 }
 
 export const getSelList = () => {

sgzb-ui/src/views/scrapManage/forecastWaste/listing.vue

@@ -4,6 +4,7 @@
         <template v-if="!temp">
             <TableModel
                 :tableProps="config.listingTableProps"
+                :sendApi="getPreScrapListApi"
                 :formLabel="config.listingFormLabel"
                 :exportShow="true"
                 :pageShow="true"
@@ -91,6 +92,7 @@
     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',
@@ -103,6 +105,7 @@
         data() {
             return {
                 config,
+                getPreScrapListApi,
                 title: '',
                 dialogWidth: '70%',
                 dialogVisible: false,

sgzb-ui/src/views/scrapManage/scrap/disposition/config.js

@@ -0,0 +1,62 @@
+export const config = {
+    handleColShow: true, // 是否显示操作列
+    pageShow: true,  // 是否显示分页组件
+    isSelShow: true,// 表格是否需要复选框
+    isFormShow: true, // 是否显示表单查询组件
+    handleWidth: '', // 操作列宽度
+    formLabel: [
+        { f_label: '关键字', f_model: 'keywords', f_type: 'ipt' },
+        { f_label: '单位名称', f_model: 'backUnit', f_type: 'sel', f_selList: [] },
+        { f_label: '工程名称', f_model: 'backPro', f_type: 'sel', f_selList: [] },
+        { f_label: '工机具类型', f_model: 'type', f_type: 'selCas', f_selList: [], optionProps: { value: 'id', } },
+        { f_label: '报废单号', f_model: 'laiyuan', f_type: 'ipt', },
+        { f_label: '处置状态', f_model: 'taskStatus', f_type: 'sel', f_selList: [] },
+        { f_label: '创建时间', f_model: 'time', f_type: 'date' },
+    ],
+    columnsList: [
+        { t_width: '55px', t_props: '', t_label: '序号' },
+        { t_props: '', t_label: '报废单号' },
+        { t_props: '', t_label: '报废类型' },
+        { t_props: '', t_label: '预报废单号' },
+        { t_props: '', t_label: '退料单位名称' },
+        { t_props: '', t_label: '退料工程名称' },
+        { t_props: '', t_label: '机具类型' },
+        { t_props: '', t_label: '任务创建人' },
+        { t_props: '', t_label: '任务创建时间' },
+        { t_props: '', t_label: '处置状态' },
+        { t_props: '', t_label: '附件信息' },
+    ],
+
+    handleBtn: [
+        { btn_title: '查看', id: 1 },
+        { btn_title: '处置', id: 2 },
+    ],
+}
+
+export const dialogConfig = {
+    outerWidth: '70%',
+    outerTitle: '',
+    outerVisible: false,
+    innerWidth: '50%',
+    innerTitle: '',
+    innerVisible: false,
+    handleColShow: false, // 是否显示操作列
+    pageShow: false,  // 是否显示分页组件
+    isSelShow: false,// 表格是否需要复选框
+    isFormShow: true, // 是否显示表单查询组件
+    formLabel: [
+        { f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
+    ],
+    columnsList: [
+        { t_width: '55px', t_props: '', t_label: '序号' },
+        { t_props: '', t_label: '设备类型' },
+        { t_props: '', t_label: '规格型号' },
+        { t_props: '', t_label: '设备编码' },
+        { t_props: '', t_label: '设备数量' },
+        { t_props: '', t_label: '报废原因' },
+        { t_props: '', t_label: '报废图片' },
+        { t_props: '', t_label: '备注' },
+    ],
+
+}
+

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

@@ -0,0 +1,105 @@
+<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-upload>上传</el-upload>
+                </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: '',
+            }
+        },
+        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>

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

@@ -1,12 +0,0 @@
-<template>
-    <div>
-        <!-- 报废管理 -->
-        报废管理
-    </div>
-</template>
-
-<script>
-    export default {}
-</script>
-
-<style></style>

sgzb-ui/src/views/scrapManage/scrap/scrapAuditing/config.js

@@ -0,0 +1,77 @@
+export const config = {
+    handleColShow: true, // 是否显示操作列
+    pageShow: true,  // 是否显示分页组件
+    isSelShow: true,// 表格是否需要复选框
+    isFormShow: true, // 是否显示表单查询组件
+    handleWidth: '', // 操作列宽度
+    formLabel: [
+        { f_label: '关键字', f_model: 'keywords', f_type: 'ipt' },
+        { f_label: '单位名称', f_model: 'backUnit', f_type: 'sel', f_selList: [] },
+        { f_label: '工程名称', f_model: 'backPro', f_type: 'sel', f_selList: [] },
+        { f_label: '工机具类型', f_model: 'type', f_type: 'selCas', f_selList: [], optionProps: { value: 'id', } },
+        { f_label: '维修单号', f_model: 'laiyuan', f_type: 'ipt', },
+        { f_label: '审批状态', f_model: 'taskStatus', f_type: 'sel', f_selList: [] },
+        { f_label: '报废类型', f_model: 'taskStatus', f_type: 'sel', f_selList: [] },
+        { f_label: '创建时间', f_model: 'time', f_type: 'date' },
+    ],
+    columnsList: [
+        { t_width: '55px', t_props: '', t_label: '序号' },
+        { t_props: '', t_label: '报废单号' },
+        { t_props: '', t_label: '报废类型' },
+        { t_props: '', t_label: '预报废单号' },
+        { t_props: '', t_label: '退料单位名称' },
+        { t_props: '', t_label: '退料工程名称' },
+        { t_props: '', t_label: '机具类型' },
+        { t_props: '', t_label: '任务创建人' },
+        { t_props: '', t_label: '任务创建时间' },
+        { t_props: '', t_label: '审核状态' },
+    ],
+
+    handleBtn: [
+        { btn_title: '查看', id: 1 },
+        { btn_title: '审核', id: 2 },
+        { btn_title: '审批详情', id: 3 },
+    ],
+}
+
+export const dialogConfig = {
+    outerWidth: '70%',
+    outerTitle: '',
+    outerVisible: false,
+    innerWidth: '50%',
+    innerTitle: '',
+    innerVisible: false,
+    handleColShow: false, // 是否显示操作列
+    pageShow: false,  // 是否显示分页组件
+    isSelShow: false,// 表格是否需要复选框
+    isFormShow: true, // 是否显示表单查询组件
+    formLabel: [
+        { f_label: '类型名称', f_model: 'keywords', f_type: 'ipt' },
+    ],
+    columnsList: [
+        { t_width: '55px', t_props: '', t_label: '序号' },
+        { t_props: '', t_label: '设备类型' },
+        { t_props: '', t_label: '规格型号' },
+        { t_props: '', t_label: '设备编码' },
+        { t_props: '', t_label: '设备数量' },
+        { t_props: '', t_label: '报废原因' },
+        { t_props: '', t_label: '报废图片' },
+        { t_props: '', t_label: '备注' },
+    ],
+
+}
+
+export const detailsConfig = {
+    detailsShow: false,
+    handleColShow: false, // 是否显示操作列
+    pageShow: false,  // 是否显示分页组件
+    isSelShow: false,// 表格是否需要复选框
+    isFormShow: false, // 是否显示表单查询组件
+
+    columnsList: [
+        { t_props: '', t_label: '审批部门' },
+        { t_props: '', t_label: '审批状态' },
+        { t_props: '', t_label: '审批意见' },
+    ],
+
+}

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

@@ -0,0 +1,217 @@
+<template>
+    <div class="app-container">
+        <!-- 报废审核 -->
+        <TableModel
+            :config="config"
+            :sendApi="getForecastWasteListApi"
+            :handleWidth="`160px`"
+        >
+            <template slot="export">
+                <el-row :gutter="10" class="mb8">
+                    <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"
+            @closeDialogInner="closeDialogInner"
+        >
+            <!-- 弹框外层内容  查看 审核 审核详情-->
+            <template slot="outerContent">
+                <template v-if="!detailsConfig.detailsShow">
+                    <TableModel
+                        :config="dialogConfig"
+                        ref="dialogTbRef"
+                        :sendApi="getForecastWasteListApi"
+                        @getTableSelectionChange="getDialogTbChange"
+                    ></TableModel>
+                    <el-row
+                        v-if="dialogConfig.outerTitle === '审核'"
+                        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-else>
+                    <TableModel
+                        :config="detailsConfig"
+                        :sendApi="getForecastWasteListApi"
+                    />
+                </template>
+            </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 { getForecastWasteListApi } from '@/api/scrap/forecastWaste.js'
+    import TableModel from '@/components/TableModel'
+    import DialogModel from '@/components/DialogModel'
+    import { config, dialogConfig, detailsConfig } from './config.js'
+    export default {
+        components: {
+            TableModel,
+            DialogModel,
+        },
+        data() {
+            return {
+                config,
+                dialogConfig,
+                detailsConfig,
+                getForecastWasteListApi,
+                /* 选中的列表数据 */
+                selectionList: [],
+                /* 驳回原因 */
+                rejectReason: '',
+            }
+        },
+        methods: {
+            /* 按钮操作 */
+            handleBtn(row, id) {
+                console.log(row, id, '操作按钮')
+                switch (id) {
+                    case 1:
+                        this.dialogConfig.outerTitle = '查看'
+                        this.dialogConfig.outerWidth = '70%'
+                        this.dialogConfig.isSelShow =
+                            this.detailsConfig.detailsShow = false
+                        break
+                    case 2:
+                        this.dialogConfig.outerTitle = '审核'
+                        this.dialogConfig.outerWidth = '70%'
+                        this.dialogConfig.isSelShow = true
+                        this.detailsConfig.detailsShow = false
+                        break
+                    case 3:
+                        this.dialogConfig.outerTitle = '审核详情'
+                        this.dialogConfig.outerWidth = '40%'
+                        this.detailsConfig.detailsShow = true
+                        break
+                }
+
+                this.dialogConfig.outerVisible = true
+            },
+            /* 关闭外层弹框 */
+            closeDialogOuter(val) {
+                this.dialogConfig.outerVisible = val
+            },
+            /* 关闭内层弹框 */
+            closeDialogInner(val) {
+                this.dialogConfig.innerVisible = val
+            },
+            /* 获取弹框内表格选中数据 */
+            getDialogTbChange(list) {
+                this.selectionList = list
+            },
+            /* 审核通过 */
+            handlePass() {
+                if (this.selectionList.length < 1) {
+                    this.$message.error('请勾选列表数据')
+                    return
+                }
+                this.dialogConfig.outerVisible = false
+            },
+            /* 审核驳回 */
+            handleReject() {
+                if (this.selectionList.length < 1) {
+                    this.$message.error('请勾选列表数据')
+                    return
+                }
+                /* 先打开内测弹框 */
+                this.dialogConfig.innerTitle = '驳回原因'
+                this.dialogConfig.innerVisible = true
+            },
+
+            /* 驳回原因页面取消 */
+            handleCancelInner() {
+                this.dialogConfig.innerVisible = false
+            },
+            /* 驳回原因页面保存 */
+            handleSubmitInner() {
+                if (!this.rejectReason) {
+                    this.$message.error('请输入驳回原因')
+                    return
+                }
+                this.dialogConfig.innerVisible = false
+                /* 当驳回成功 重新查询列表回显数据 */
+                this.$nextTick(() => {
+                    this.$refs.dialogTbRef.getList()
+                })
+            },
+        },
+        watch: {
+            dialogConfig: {
+                handler(newVal) {
+                    /* 监听外层弹框关闭 清空勾选的数据 */
+                    console.log(newVal.outerVisible, '**')
+                    if (!newVal.outerVisible) {
+                        this.selectionList = []
+                    }
+                },
+                deep: true,
+            },
+        },
+    }
+</script>