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

<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel
            :config="config"
            :sendApi="getDispositionListApi"
            ref="tbRef"
        >
            <template slot="export">
                <el-row :gutter="10" class="mb8">
                    <el-button
                        plain
                        size="mini"
                        @click="handleBatchDisposition()"
                        >批量处置</el-button
                    >
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 报废来源 -->
            <template slot-scope="{ data }" slot="source">
                <template v-if="data.scrapSource === 1">退料</template>
                <template v-if="data.scrapSource === 2">维修</template>
                <template v-if="data.scrapSource === 3">盘点</template>
            </template>

            <!-- 状态 -->
            <template slot-scope="{ data }" slot="type">
                <el-tag size="mini" v-if="data.disposition == 0">未处置</el-tag>
                <el-tag size="mini" type="success" v-if="data.disposition == 1"
                    >已处置</el-tag
                >
            </template>

            <!-- 附件信息 -->
            <template slot-scope="{ data }" slot="file">
                <el-button
                    size="mini"
                    type="text"
                    @click="handlePreviewFile(data)"
                    style="color: #67c23a"
                    v-if="data.dispositionFileUrl"
                >
                    查看附件
                </el-button>

                <template v-else>-</template>
            </template>

            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="{ data }">
                <el-button size="mini" type="text" @click="handlePreview(data)">
                    查看
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    @click="handleDisposition(data)"
                    v-if="data.disposition === 0"
                >
                    处置
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <!-- 弹框内容  查看 处置-->
            <template slot="outerContent">
                <template v-if="dialogConfig.outerTitle === '查看'">
                    <TableModel :config="dialogConfig"></TableModel>
                </template>

                <template v-else-if="dialogConfig.outerTitle === '附件信息'">
                    <el-table :data="fileList" border>
                        <el-table-column
                            label="文件名称"
                            align="center"
                            prop="fileName"
                        />
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{ row }">
                                <a :href="row.fileUrl" target="_blank">查看</a>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <el-row type="flex" justify="space-around">
                        <el-col :span="4">请上传处置文件</el-col>
                        <el-col>
                            <ImageUpload
                                :limit="3"
                                :fileSize="5"
                                :fileType="fileType"
                                @input="getFileList"
                            />
                        </el-col>
                    </el-row>
                    <el-row class="dialog-common-btn">
                        <el-button size="mini" plain @click="handleCancelInner"
                            >取 消</el-button
                        >
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleSubmitInner"
                            >确 定</el-button
                        >
                    </el-row>
                </template>
            </template>
        </DialogModel>
    </div>
</template>

<script>
    import {
        getDispositionListApi,
        submitDispositionApi,
    } 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,
                getDispositionListApi,
                /* 选中的列表数据 */
                selectionList: [],
                /* 驳回原因 */
                rejectReason: '',
                fileType: ['png', 'jpg', 'jpeg', 'pdf', 'doc', 'xls', 'docx'],
                uploadFileList: [],
                fileList: [],
                /* 处置提交参数 */
                dispositionParams: {
                    taskId: '',
                    fileUrl: '', // 附件url
                    fileName: '', // 附件名称
                    disposition: 1, // 处置状态 0、未通过 1、通过
                },
            }
        },
        created() {},
        methods: {
            /* 按钮操作 */
            handlePreview(row) {
                this.dispositionParams.taskId = row.taskId
                this.dialogConfig.outerTitle = '查看'
                this.dialogConfig.outerWidth = '70%'
                this.dialogConfig.outerVisible = true
            },
            handleDisposition() {
                this.dialogConfig.outerTitle = '处置'
                this.dialogConfig.outerWidth = '60%'
                this.dialogConfig.outerVisible = true
            },

            /* 查看附件 */
            handlePreviewFile(data) {
                dialogConfig.outerTitle = '附件信息'
                data.dispositionFileName.split(',').map((e) => {
                    let fileObj = {
                        fileName: e,
                        fileUrl: '',
                    }

                    this.fileList.push(fileObj)
                })

                data.dispositionFileUrl.split(',').map((e, index) => {
                    this.fileList[index].fileUrl = e
                })
                this.dialogConfig.outerWidth = '40%'
                this.dialogConfig.outerVisible = true
            },

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

            /* 取消 */
            handleCancelInner() {
                this.dialogConfig.outerVisible = false
            },
            /* 确定 */
            async handleSubmitInner() {
                if (this.uploadFileList.length < 1) {
                    this.$message.error('请先上传图片')
                    return
                }

                let fileUrl = ''
                let fileName = ''
                this.uploadFileList.map((e) => {
                    fileUrl += e.fileUrl + ','
                    fileName += e.fileName + ','
                })
                this.dispositionParams.fileUrl = fileUrl.substring(
                    fileUrl.length - 1,
                    ',',
                )
                this.dispositionParams.fileName = fileName.substring(
                    fileName.length - 1,
                    ',',
                )

                const { data: res } = await submitDispositionApi([
                    this.dispositionParams,
                ])

                if (res.code == 200) {
                    this.$message.success('处置成功！')
                    this.dialogConfig.outerVisible = false
                    this.$refs.tbRef()
                }
            },
            /* 获取上传后的图片信息 */
            getFileList(val) {
                this.uploadFileList = val
            },

            /* 批量处置 */
            handleBatchDisposition() {},
        },
    }
</script>