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
                    icon="el-icon-zoom-in"
                    type="text"
                    @click="handlePreview(data)"
                >
                    查看
                </el-button>
                <el-button
                    icon="el-icon-edit-outline"
                    style="color: #e6a23c"
                    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 v-if="data.scrapType == 1">人为</template>
                            <template v-if="data.scrapType == 0">自然</template>
                        </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"
                                    :download="row.fileName"
                                    v-if="fileTypeJudge(row.fileName)"
                                    >查看</a
                                >
                                <a
                                    :href="filePreviewUrl + row.fileUrl"
                                    target="_blank"
                                    v-else
                                    >查看</a
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <el-row type="flex">
                        <el-col :span="3">请上传处置文件</el-col>
                        <!-- <el-col>
                            <ImageUpload
                                :limit="3"
                                :fileSize="5"
                                :fileType="fileType"
                                @input="getFileList"
                            />
                        </el-col> -->
                        <AnnexUpload
                            :fileType="fileType"
                            :limit="5"
                            :fileSize="5"
                            :fileList="fileList"
                            :uploadUrl="uploadUrl"
                            :multiple="false"
                            :uploadParams="uploadParams"
                            @handleSuccess="handleSuccess"
                            @handleRemove="handleRemove"
                        />
                    </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 TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import AnnexUpload from '@/components/AnnexUpload'
import ScrapSource from '../../component/scrapSource.vue'
import ScrapImg from '../../component/scrapImg.vue'
import { config, dialogConfig, getSelList } from './config.js'
import {
    getDispositionListApi,
    submitDispositionApi,
    getDialogListApi,
} from '@/api/scrap/forecastWaste.js'
export default {
    components: {
        TableModel,
        DialogModel,
        AnnexUpload,
        ScrapSource,
        ScrapImg,
    },
    data() {
        return {
            config,
            dialogConfig,
            getDispositionListApi,
            getDialogListApi,
            selectionList: [], // 选中的列表数据
            rejectReason: '', // 驳回原因
            fileType: '.png、.jpg、.jpeg、.pdf、.doc、.docs、.xls、.xlsx', // 处置上传时文件类型
            uploadFileList: [],
            sendParams: {},
            tbSelectList: [],
            dispositionParams: [], // 处置参数
            filePreviewUrl: process.env.VUE_APP_BASE_API + '/system', // 附件预览地址
            uploadUrl: process.env.VUE_APP_BASE_API + '/system/sys/file/upload', // 附件上传地址
            fileList: [], // 文件的数据源
            // 附件上传时携带的参数
            uploadParams: {
                fileType: 'ma',
            },
            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.fileList.length < 1) {
                this.$message.error('请先上传文件！')
                return
            }
            let fileUrl = ''
            let fileName = ''
            this.fileList.map((e) => {
                fileUrl += e.url + ','
                fileName += e.name + ','
            })
            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()
            }
        },

        // 文件上传成功
        handleSuccess(file) {
            const { fileName, fileUrl, id } = file
            const fileObj = {
                name: fileName,
                url: fileUrl,
                id,
            }
            this.fileList.push(fileObj)
        },
        // 文件移除
        handleRemove(file) {
            this.fileList = this.fileList.filter((e) => e.id !== file.id)
        },
        /* 批量处置 */
        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)
        },
        fileTypeJudge(url) {
            const file = url.split('.')[1]
            const docList = ['doc', 'docx', 'xls', 'xlsx']
            return docList.some((e) => e === file)
        },
    },
}
</script>