bonus-ui/src/views/material/report/scrapReport.vue

<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
            @submit.native.prevent
        >
            <el-form-item prop="dateRange">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键词"
                    clearable
                    @keyup.enter.native="handleQuery"
                    maxlength="20"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableList" ref="multipleTable" border :span-method="objectSpanMethod">
            <el-table-column label="序号" align="center" width="80" type="index">
                <template slot-scope="scope">
                    <span v-if="scope.$index == 0">合计：</span>
                    <span v-else>{{ (queryParams.pageNum - 1) * 10 + scope.$index }}</span>
                </template>
            </el-table-column>
            <el-table-column label="单位名称" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="工程名称" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="物资名称" align="center" prop="typeName" show-overflow-tooltip />
            <el-table-column label="规格型号" align="center" prop="typeModelName" show-overflow-tooltip />
            <el-table-column label="计量单位" align="center" prop="unitName" show-overflow-tooltip />
            <el-table-column label="设备编号" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="报废数量" align="center" prop="scrapNum" show-overflow-tooltip>
                <template slot-scope="scope">
                    <!-- 当 manageType 为 '编码' 时，使用可点击的 span -->
                    <span class="clickText" v-if="scope.row.manageType == '0'" @click="openRecords(scope.row)">
                        {{ scope.row.scrapNum }}
                    </span>
                    <!-- 否则，直接显示数字 -->
                    <span v-else>
                        {{ scope.row.scrapNum }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="报废费用" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="报废原因" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="报废图片" align="center" prop="" show-overflow-tooltip />
            <el-table-column label="报废类型" align="center" prop="scrapType" show-overflow-tooltip />
            <el-table-column label="报废单号" align="center" prop="scrapCode" show-overflow-tooltip />
            <el-table-column label="报废人员" align="center" prop="scrapPersonName" show-overflow-tooltip />
            <el-table-column label="报废时间" align="center" prop="" show-overflow-tooltip />
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 弹窗 -->
        <el-dialog :title="title" :visible.sync="openRecord" width="1200px" append-to-body>
            <el-form :model="dialogQuery" ref="dialogQuery" size="small" :inline="true" label-width="80px">
                <el-form-item label="关键字" prop="keyWord">
                    <el-input
                        v-model="dialogQuery.keyWord"
                        placeholder="请输入关键字"
                        clearable
                        :maxlength="30"
                        style="width: 240px"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDialogQuery">
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetDialogQuery">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleDialogExport">
                        导出
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="dialogList" height="500px">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                    :index="indexContinuation(dialogQuery.pageNum, dialogQuery.pageSize)"
                ></el-table-column>
                <el-table-column label="机具名称" align="center" prop="typeName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true" />
                <el-table-column label="购置价（元）" align="center" prop="buyPrice" :show-overflow-tooltip="true" />
                <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
            </el-table>
            <pagination
                v-show="dialogTotal > 0"
                :total="dialogTotal"
                :page.sync="dialogQuery.pageNum"
                :limit.sync="dialogQuery.pageSize"
                @pagination="getDialogDataList"
            />
        </el-dialog>
    </div>
</template>

<script>
import { getScrapListApi, getScrapListNoPageApi, getScrapDetailsListApi } from '@/api/report/report'
export default {
    name: 'Report',
    data() {
        return {
            // 遮罩层
            loading: false,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            showHouse: false,
            dateRange: [],
            ids: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: undefined
            },
            // 总条数
            total: 0,
            //表格数据
            tableList: [],
            // 弹出层标题
            title: '',
            //弹窗
            openRecord: false,
            dialogList: [], //在库编码设备列表
            dialogQuery: {
                pageNum: 1,
                pageSize: 10,
                keyWord: undefined
            },
            dialogTotal: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 合并单元格 rowIndex=行数  columnIndex=列数
        // 这里是合并table的除表头外的第一行的第二列 + 除表头外的第二行的第二列
        // 注意列数和行数从 0 开始
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0 && columnIndex == 0) {
                let rowspan = 1
                let colspan = 4
                return { rowspan, colspan }
            }
            // 解决偏移的重要代码
            // 重点在 else if 判断必须加因为合并单元格数据会出现偏移、
            // 否则如果是 第二行 的 第二列 那么隐藏原有第二行 的 第二列的数据使他隐藏
            else if (rowIndex === 0 && columnIndex < 4) {
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        },
        /** 查询列表 */
        async getList() {
            this.loading = true
            const params = {
                keyWord: this.queryParams.keyWord,
                startTime: this.dateRange && this.dateRange[0],
                endTime: this.dateRange && this.dateRange[1],
                pageSize: this.queryParams.pageSize,
                pageNum: this.queryParams.pageNum
            }
            const res = await getScrapListApi(params)
            if (res.data.rows.length > 0) {
                this.tableList = res.data.rows
            } else {
                this.tableList = []
            }
            this.total = res.data.total
            let param = {
                keyWord: this.queryParams.keyWord,
                startTime: this.dateRange && this.dateRange[0],
                endTime: this.dateRange && this.dateRange[1]
            }
            const response = await getScrapListNoPageApi(param)
            let obj = {
                scrapNum: response.data.scrapNum
            }
            this.tableList.unshift(obj)
            this.loading = false
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.dateRange = []
            this.queryParams.keyWord = null
            this.handleQuery()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        handleExport() {
            this.download(
                '/material/bm_report/exportScrapList',
                {
                    keyWord: this.queryParams.keyWord,
                    startTime: this.dateRange && this.dateRange[0],
                    endTime: this.dateRange && this.dateRange[1]
                },
                `报废报表_${new Date().getTime()}.xlsx`
            )
        },
        //查看弹框数据
        openRecords(row) {
            this.openRecord = true
            this.dialogQuery.keyWord = ''
            this.dialogQuery.taskId = row.taskId
            this.dialogQuery.typeId = row.typeId
            this.getDialogDataList()
        },
        /** 查询弹框列表 */
        getDialogDataList() {
            getScrapDetailsListApi(this.dialogQuery).then(response => {
                this.dialogList = response.data.rows
                this.dialogTotal = response.data.total
            })
        },
        /** 弹框搜索操作 */
        handleDialogQuery() {
            this.dialogQuery.pageNum = 1
            this.getDialogDataList()
        },
        /** 弹框重置操作 */
        resetDialogQuery() {
            this.dialogQuery.keyWord = ''
            this.handleDialogQuery()
        },
        /** 弹框导出操作 */
        handleDialogExport() {
            this.download(
                'material/bm_report/exportScrapDetailsList',
                { ...this.dialogQuery },
                `报废报表_维修合格设备_${new Date().getTime()}.xlsx`
            )
        }
    }
}
</script>

<style lang="scss" scoped>
.image-type {
    /* 旋转图片 */
    transform: rotate(-90deg);
    /* 确保旋转后的图片不会超出容器 */
    max-width: 100%;
    /* 保持图片的宽高比 */
    width: 40px;
    height: 80px;
}
.sign-type {
    width: 80px;
    height: 40px;
}
.uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deviceCode {
    margin-top: 10px;
    padding-bottom: 20px;
    font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
.clickText {
    color: #02a7f0;
    cursor: pointer;
}
</style>