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

<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel
            :config="config"
            :sendApi="getDispositionListApi"
            :selectable="
                (row) => {
                    return row.disposition == 0
                }
            "
            @getTableSelectionChange="getSelectionList"
            ref="tbRef"
        >
            <template slot="export" slot-scope="{ pageParams }">
                <el-row class="mb8">
                    <el-button
                        plain
                        size="mini"
                        @click="handleBatchDisposition()"
                        v-hasPermi="['scrap:batch:disposition']"
                        >批量处置</el-button
                    >
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handelExportData(pageParams)"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 报废来源 -->
            <template slot-scope="{ data }" slot="source">
                <ScrapSource :data="data" />
            </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"
                    v-hasPermi="['scrap:disposition']"
                >
                    处置
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <!-- 弹框内容  查看 处置-->
            <template slot="outerContent">
                <!-- 查看内容 -->
                <template v-if="dialogConfig.outerTitle === '查看'">
                    <TableModel
                        :sendParams="sendParams"
                        :sendApi="getDialogListApi"
                        :config="dialogConfig"
                    >
                        <!-- 损坏原因 -->
                        <template slot-scope="{ data }" slot="t_damage">
                            {{ data.scrapType == 1 ? '人为' : '自然' }}
                        </template>
                        <!-- 报废图片 -->
                        <template slot-scope="{ data }" slot="t_img">
                            <ScrapImg
                                v-if="data.fileUrl"
                                :scrapImgUrl="data.fileUrl"
                            />
                        </template>
                    </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="filePreviewUrl + 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,
    getDialogListApi,
} from '@/api/scrap/forecastWaste.js'
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import ScrapSource from '../../component/scrapSource.vue'
import ScrapImg from '../../component/scrapImg.vue'
import { config, dialogConfig, getSelList } from './config.js'
export default {
    components: {
        TableModel,
        DialogModel,
        ScrapSource,
        ScrapImg,
    },
    data() {
        return {
            config,
            dialogConfig,
            getDispositionListApi,
            getDialogListApi,
            /* 选中的列表数据 */
            selectionList: [],
            /* 驳回原因 */
            rejectReason: '',
            fileType: ['png', 'jpg', 'jpeg', 'pdf', 'doc', 'xls', 'docx'],
            uploadFileList: [],
            sendParams: {},
            fileList: [],
            tbSelectList: [],
            /* 处置提交参数 */

            dispositionParams: [],
            // dispositionParams: {
            //     taskId: '',
            //     fileUrl: '', // 附件url
            //     fileName: '', // 附件名称
            //     disposition: 1, // 处置状态 0、未通过 1、通过
            // },
            /* 附件预览地址 */
            filePreviewUrl: process.env.VUE_APP_BASE_API + '/system',
            getSelList,
        }
    },
    created() {
        this.getSelList()
    },
    methods: {
        /* 按钮操作 */
        handlePreview(row) {
            this.dispositionParams.taskId = this.sendParams.taskId = row.taskId
            this.dialogConfig.outerTitle = '查看'
            this.dialogConfig.outerWidth = '70%'
            this.dialogConfig.outerVisible = true
        },
        handleDisposition(row) {
            this.dispositionParams = []
            this.dispositionParams.push({
                taskId: row.taskId,
                fileUrl: '', // 附件url
                fileName: '', // 附件名称
                disposition: 1, // 处置状态 0、未处置 1、已处置
            })
            this.dialogConfig.outerTitle = '处置'
            this.dialogConfig.outerWidth = '60%'
            this.dialogConfig.outerVisible = true
        },

        /* 查看附件 */
        handlePreviewFile(data) {
            this.fileList = []
            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.fileList.splice(this.fileList.length - 1, 1)
            this.dialogConfig.outerTitle = '附件信息'
            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.map((e) => {
                e.fileUrl = fileUrl.substring(fileUrl.length - 1, ',')
                e.fileName = fileName.substring(fileUrl.length - 1, ',')
            })
            const res = await submitDispositionApi(this.dispositionParams)
            if (res.code == 200) {
                this.$message.success('处置成功！')
                this.dialogConfig.outerVisible = false
                this.$refs.tbRef.getList()
            }
        },
        /* 获取上传后的图片信息 */
        getFileList(val) {
            this.uploadFileList = val
        },

        /* 批量处置 */
        handleBatchDisposition() {
            this.dispositionParams = []
            if (this.tbSelectList.length < 1) {
                this.$message.error('请选择需处置的数据')
                return
            }
            this.tbSelectList.map((e) => {
                let prams = {
                    taskId: e.taskId,
                    fileUrl: '', // 附件url
                    fileName: '', // 附件名称
                    disposition: 1, // 处置状 0、未处置 1、已处置
                }

                this.dispositionParams.push(prams)
            })

            this.dialogConfig.outerTitle = '处置'
            this.dialogConfig.outerWidth = '60%'
            this.dialogConfig.outerVisible = true
        },

        /* 获取列表下拉勾选数据 */
        getSelectionList(selList) {
            console.log(selList, '选择的数据')
            this.tbSelectList = selList
        },
        /* 导出数据 */
        handelExportData(data) {
            console.log(this.tableSelList, ' this.tableSelList')
            this.download(
                'material/scrap/exportObtainDisposalList',
                {
                    ...data,
                },
                `报废处置列表_${new Date().getTime()}.xlsx`,
            )
            console.log('数据导出', data)
        },
    },
}
</script>