tire-platform-ui/src/views/iosBasicData/SeafreightExportF/bills/assembly/DocumentCenter.vue

<template>
    <div>
        <el-row>
            <el-col :span="5">
                <el-scrollbar>
                    <basic-container>
                        <avue-tree :option="treeOption" :data="feesTypeData" @node-click="nodeClick">
                        </avue-tree>
                    </basic-container>
                </el-scrollbar>
            </el-col>
            <el-col :span="19">
                <basic-container>
                    <avue-crud :option="documentOption" :table-loading="loading" :data="documentData" :page.sync="documentPage" :search.sync="documentSearch"
                               id="out-table" :header-cell-class-name="headerClassName"
                               :before-open="beforeOpen" ref="documentCrud" @search-change="searchChange"
                               @search-reset="searchReset" @refresh-change="refreshChange" @on-load="reportslogListfun"
                               @resetColumn="resetColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)"
                               @saveColumn="saveColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)" >
                        <template slot="menuLeft">
                            <el-button type="primary" size="small" icon="el-icon-plus" @click="addbtnfun()">新增单证
                            </el-button>
                        </template>
                        <template slot-scope="scope" slot="menu">
                            <el-button type="text" size="small" @click="printEditing(scope.row)" >编辑</el-button>
                            <el-button type="text" size="small" @click="printDelete(scope.row)" >
                                <span style="color: red">删除</span>
                            </el-button>
                            <el-button type="text" size="small" @click="dialogPreviewfun(scope.row)">打印预览</el-button>
                        </template>
                    </avue-crud>
                </basic-container>
            </el-col>
        </el-row>


        <!--添加编辑弹窗-->
        <el-dialog title="单证操作"
                   :close-on-click-modal="false"
                   :visible.sync="documentVisible"
                   append-to-body
                   width="60%"
                   :before-close="corpTypeClose">
            <Dispatch-Notice v-if="businesstypeData.code == 'PCTZD'" :documentForm="documentForm"></Dispatch-Notice>
            <Purchase-Notice v-else-if="businesstypeData.code == 'RHTZ'" :documentForm="documentForm"></Purchase-Notice>
            <span v-else>啥也不是</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="documentSubmit(true)" >保存并打印</el-button>
                <el-button @click="printingCanceling">取 消</el-button>
                <el-button type="primary" @click="documentSubmit(false)">确 定</el-button>
            </span>
        </el-dialog>

        <!--费用打印-->
        <reportContainer ref="reportContainer"></reportContainer>
    </div>
</template>

<script>
import {getList as reportsList, reportsGetReportData,reportsDetail,reportsRemove} from "@/api/iosBasicData/reports";
import {reportslogList, reportslogSubmit} from "@/api/iosBasicData/bills";
import {bbusinesstypeList} from "@/api/iosBasicData/bbusinesstype";
import bbusinesstype from "@/views/iosBasicData/bbusinesstype/index.vue";
import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";
import DispatchNotice from '@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/DispatchNotice.vue'
import PurchaseNotice from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/PurchaseNotice.vue";
import reportContainer from "@/views/iosBasicData/report-container/report-container.vue";

    export default {
        components: {reportContainer, reportformsList, bbusinesstype,DispatchNotice,PurchaseNotice},
        data(){
            return {
                documentVisible:false, // 单证添加编辑弹窗
                editData:{}, // 编辑弹窗的数据
                documentForm:{}, // 添加编辑弹窗的数据
                documenturl:'', // 报表的url 暂存
                // 左侧配置项
                treeOption: {
                    nodeKey: "id",
                    // lazy: true,
                    addBtn: false,
                    menu: false,
                    size: "small",
                    props: {
                        labelText: "标题",
                        label: "cnName",
                        value: "value",
                        children: "children"
                    }
                },
                feesTypeData:[], // 左侧获取的数据
                documentOption:{},
                documentOptionBack: {
                    dialogDrag: true,
                    height: 'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    selection: true,
                    dialogClickModal: false,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    menuWidth:'160',
                    column: [
                        {
                            label: "报表编码",
                            prop: "reportsCode",
                            overHidden:true,
                        },
                        {
                            label: "创建人",
                            prop: "createUserName",
                            overHidden:true,
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            overHidden:true,
                        },
                    ]
                },
                documentSearch:{},
                documentPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
                },
                query: {},
                documentData:[],
                loading:false,
                businesstypeData:{}, // 左侧选择的数据

            }
        },
        props:{
            assemblyForm:{
                type:Object,
                default:{}
            }
        },
        async created() {
            this.documentOption = await this.getColumnData(this.getColumnName(312.1), this.documentOptionBack);
            this.reportsListfun()
        },
        methods:{
            // 打印预览按钮
            dialogPreviewfun(row){
                this.handleReportPreview(JSON.parse(row.printContent).url,JSON.parse(row.printContent).data)
            },
            // 新建单证按钮
            addbtnfun(){
                if (!this.assemblyForm.id) {
                    this.$message.warning("请先保存数据");
                    return;
                }
                if(!this.businesstypeData.id){
                    this.$message.warning("请先选择报表类型");
                    return
                }
                reportsGetReportData({
                    billId:this.assemblyForm.id,
                    reportCode:this.businesstypeData.classifyCode,
                    groupCode:this.businesstypeData.groupCode,
                }).then(res=>{
                    this.documentForm = res.data.data.data
                    this.documenturl = this.businesstypeData.url;
                    // 打开报表选择框
                    this.documentVisible = true
                })
            },
            // 编辑
            printEditing(row){
                this.businesstypeData.code = row.reportsCode
                this.editData = row
                this.documentForm = JSON.parse(row.printContent).data
                this.documenturl = JSON.parse(row.printContent).url;
                this.documentVisible = true
            },
            // 删除
            printDelete(row){
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    reportsRemove(row.id).then(res=>{
                        this.$message.success('操作成功')
                        this.reportslogListfun(this.documentPage, this.query);
                    })
                })
            },
            // 单证弹窗的确认按钮
            documentSubmit(type){
                let obj = {}
                if (this.editData.id){
                    obj = this.editData
                }else {
                    obj.remarks = this.assemblyForm.remarks
                    obj.businessType = this.assemblyForm.businessType
                    obj.billId = this.assemblyForm.id
                    obj.billNo = this.assemblyForm.billNo
                    obj.mblno = this.assemblyForm.mblno
                    obj.hblno = this.assemblyForm.hblno
                    obj.reportsCode = this.businesstypeData.code
                    obj.groupCode = this.businesstypeData.groupCode
                }
                obj.printContent = JSON.stringify({
                    data:this.documentForm,
                    url:this.documenturl
                })
                // 保存
                reportslogSubmit(obj).then(res=>{
                    if (type) {
                        this.handleReportPreview(this.documenturl,this.documentForm)
                    }else {
                        this.$message.success('操作成功')
                    }
                    this.reportslogListfun(this.documentPage, {...this.query,reportsCode:res.data.data.reportsCode});
                    this.editData = {}
                    this.documentForm = {}
                    this.documenturl = {}
                    this.documentVisible = false
                })
            },
            // 打印取消
            printingCanceling(){
                this.editData = {}
                this.documentForm = {}
                this.documenturl = {}
                this.documentVisible = false
            },
            // 左侧筛选
            nodeClick(data) {
                this.businesstypeData = data
                this.reportslogListfun(this.documentPage, {reportsCode:data.content});
            },
            // 左侧数据获取
            reportsListfun(){
                reportsList(1,20,{businessType:'HYCK', classifyCode:'单证'}).then(res=>{
                    this.feesTypeData = res.data.data.records
                })
            },
            // 类别弹窗关闭
            corpTypeClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => { });
            },
            // 点击搜索触发
            searchChange(params, done){
                this.query = params;
                this.documentPage.currentPage = 1;
                this.reportslogListfun(this.documentPage, params);
                done();
            },
            // 清空搜索回调方法
            searchReset(){
                this.query = {};
                this.reportslogListfun(this.documentPage);
            },
            // 点击刷新按钮
            refreshChange(){
                this.reportslogListfun(this.documentPage, {...this.query,reportsCode:this.businesstypeData.content});
            },
            // 打开前的回调
            beforeOpen(done, type) {
                // 编辑和查看
                if (["edit", "view"].includes(type)) {

                }
            },
            // 单证中心数据获取
            reportslogListfun(documentPage, params = {}){
                if(!this.assemblyForm.id) {
                    return
                }
                this.loading = true;
                reportslogList(documentPage.currentPage, documentPage.pageSize, {
                    ...Object.assign(params, this.query),
                    billId:this.assemblyForm.id
                }).then(res=>{
                    const data = res.data.data;
                    this.documentPage.total = data.total;
                    this.documentData = data.records;
                    this.loading = false;
                })
            },
            // 预览报表
            handleReportPreview(url,data){
                console.log(url,1670)
                console.log(data,1671)
                // 处理时间
                data.end = data.end?data.end.slice(0,10):''
                data.goodsTime = data.goodsTime?data.goodsTime.slice(0,10):''
                data.clearanceTime = data.clearanceTime?data.clearanceTime.slice(0,10):''
                data.vgmDeadline = data.vgmDeadline?data.vgmDeadline.slice(0,10):''

                Stimulsoft.Base.StiLicense.key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHn0s4gy0Fr5YoUZ9V00Y0igCSFQzwEqYBh/N77k4f0fWXTHW5rqeBNLkaurJDenJ9o97TyqHs9HfvINK18Uwzsc/bG01Rq+x3H3Rf+g7AY92gvWmp7VA2Uxa30Q97f61siWz2dE5kdBVcCnSFzC6awE74JzDcJMj8OuxplqB1CYcpoPcOjKy1PiATlC3UsBaLEXsok1xxtRMQ283r282tkh8XQitsxtTczAJBxijuJNfziYhci2jResWXK51ygOOEbVAxmpflujkJ8oEVHkOA/CjX6bGx05pNZ6oSIu9H8deF94MyqIwcdeirCe60GbIQByQtLimfxbIZnO35X3fs/94av0ODfELqrQEpLrpU6FNeHttvlMc5UVrT4K+8lPbqR8Hq0PFWmFrbVIYSi7tAVFMMe2D1C59NWyLu3AkrD3No7YhLVh7LV0Tttr/8FrcZ8xirBPcMZCIGrRIesrHxOsZH2V8t/t0GXCnLLAWX+TNvdNXkB8cF2y9ZXf1enI064yE5dwMs2fQ0yOUG/xornE'
                // Stimulsoft.Base.StiLicense.Key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHkcgIvwL0jnpsDqRpWg5FI5kt2G7A0tYIcUygBh1sPs7plofUOqPB1a4HBIXJB621mau2oiAIj+ysU7gKUXfjn/D5BocmduNB+ZMiDGPxFrAp3PoD0nYNkkWh8r7gBZ1v/JZSXGE3bQDrCQCNSy6mgby+iFAMV8/PuZ1z77U+Xz3fkpbm6MYQXYp3cQooLGLUti7k1TFWrnawT0iEEDJ2iRcU9wLqn2g9UiWesEZtKwI/UmEI2T7nv5NbgV+CHguu6QU4WWzFpIgW+3LUnKCT/vCDY+ymzgycw9A9+HFSzARiPzgOaAuQYrFDpzhXV+ZeX31AxWlnzjDWqpfluygSNPtGul5gyNt2CEoJD1Yom0VN9fvRonYsMsimkFFx2AwyVpPcs+JfVBtpPbTcZscnzUdmiIvxv8Gcin6sNSibM6in/uUKFt3bVgW/XeMYa7MLGF53kvBSwi78poUDigA2n12SmghLR0AHxyEDIgZGOTbNI33GWu7ZsPBeUdGu55R8w='
                Stimulsoft.Base.Localization.StiLocalization.addLocalizationFile( '/reports/stimulsoft/Localization/zh-CHS.xml', true, 'zh-CHS')
                Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile('/reports/stimulsoft/Localization/zh-CHS.xml' )
                // 工具栏
                var options = new Stimulsoft.Viewer.StiViewerOptions()
                options.height = '100%'
                options.appearance.scrollbarsMode = true // 滚动条模式
                options.toolbar.showDesignButton = false // 显示设计按钮
                options.toolbar.showAboutButton = false // 显示关于按钮
                options.toolbar.showResourcesButton = false // 显示资源按钮
                options.toolbar.showFullScreenButton = false // 显示全屏按钮
                options.toolbar.showOpenButton = false // 显示打开按钮
                options.appearance.showTooltips = false // 显示工具提示
                options.appearance.showDialogsHelp = false // 显示对话框帮助
                options.exports.showExportToDocument = false // 显示导出到文档
                options.toolbar.showParametersButton = true // 显示参数按钮
                options.appearance.bookmarksPrint = true // 书签打印
                // options.toolbar.showPrintButton = false // 打印按钮是否显示   下面直接自定义控制打印弹窗是否开启

                // printDestination 参数：用于指定报表打印的目标位置，可以是打印机、PDF 文件或者直接打印到浏览器等。
                // Stimulsoft.Viewer.StiPrintDestination.Direct：表示直接打印到打印机，即将报表内容直接发送至打印机进行打印。
                // 通过设置不同的 printDestination 参数，你可以控制报表打印的行为，例如是直接打印到打印机，还是生成 PDF 文件，或者直接在浏览器中预览打印内容等。
                options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct
                // htmlRenderMode html渲染模式
                options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table
                // 是创建一个 Stimulsoft 报表查看器的实例的代码
                let viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false)

                // 报表
                console.log("创建一个报表实例");
                console.log()
                let report = new window.Stimulsoft.Report.StiReport();

                // 加载文件
                console.log("从url加载报表");
                // report.loadFile("/reports/stimulsoft/demos/SimpleList.mrt");
                report.load(url)

                data.pageOne = 'Page : 1 of 1'
                // 处理超长数据
                if (data.hshipperDetails) {
                    var consignerIndex2 = data.hshipperDetails.indexOf( '\n' )
                    for (let i = 0; i < 4; i++) {
                        consignerIndex2 = data.hshipperDetails.indexOf( '\n', consignerIndex2 + 1 );
                    }
                    if (consignerIndex2 != -1) {
                        var hshipperDetails = data.hshipperDetails.substring(consignerIndex2 + 2, data.hshipperDetails.length)
                        data.hshipperDetails = data.hshipperDetails.substring(0, consignerIndex2) + ' *'
                        data.commodityDescr += '\n*' + hshipperDetails
                    }
                }

                if (data.hconsigneeDetails) {
                    var consigneeIndex2 = data.hconsigneeDetails.indexOf( '\n' )
                    for (let i = 0; i < 3; i++) {
                        consigneeIndex2 = data.hconsigneeDetails.indexOf( '\n', consigneeIndex2 + 1 );
                    }
                    if (consigneeIndex2 != -1) {
                        var hconsigneeDetails = data.hconsigneeDetails.substring(consigneeIndex2 + 2, data.hconsigneeDetails.length)
                        data.hconsigneeDetails = data.hconsigneeDetails.substring(0, consigneeIndex2) + ' **'
                        data.commodityDescr += '\n**' + hconsigneeDetails
                    }
                }

                if (data.hnotifyDetails) {
                    var notifierIndex2 = data.hnotifyDetails.indexOf( '\n' )
                    for (let i = 0; i < 3; i++) {
                        notifierIndex2 = data.hnotifyDetails.indexOf( '\n', notifierIndex2 + 1 );
                    }
                    if (notifierIndex2 != -1) {
                        var hnotifyDetails = data.hnotifyDetails.substring(notifierIndex2 + 2, data.hnotifyDetails.length)
                        data.hnotifyDetails = data.hnotifyDetails.substring(0, notifierIndex2) + ' ***'
                        data.commodityDescr += '\n***' + hnotifyDetails
                    }
                }

                // 处理箱号
                if (this.isPrintTheBoxNumber) {
                    data.commodityDescr += '\n.\n.\n'
                }

                // PLACE & DATE OF ISSUE
                data.placeAndDateOfIssue = ''
                if (data.issueAt) {
                    data.placeAndDateOfIssue += data.issueAt
                }
                if (data.issueDate) {
                    let date = new Date(data.issueDate.replace(/-/g,'/'));
                    let yyyy = date.getFullYear();
                    let mmmm = date.toDateString().split(" ")[1]
                    let dd = date.getDate()
                    data.placeAndDateOfIssue += ', ' + dd + '-' + mmmm + '-' + yyyy
                }

                // Total number of containers or packages received by the Carriers
                if (data.preContainersList) {
                    let boxMap = new Map();
                    for (let boxQuantity of data.preContainersList) {
                        if (boxMap.get(boxQuantity.cntrTypeCode)) {
                            let v = boxMap.get(boxQuantity.cntrTypeCode)
                            boxMap.set(boxQuantity.cntrTypeCode, v + boxQuantity.quantity)
                        } else {
                            boxMap.set(boxQuantity.cntrTypeCode, boxQuantity.quantity)
                        }
                    }
                    let boxs = ''
                    boxMap.forEach(function (value, key, map) {
                        boxs += value + 'x' + key + ', '
                    })
                    boxs = boxs.substring(0, boxs.length - 2)

                    data.boxQuantity = boxs + ' CONTAINER(S) ONLY'
                }

                // Number of original B/Ls
                if (data.numberOfObl) {
                    data.numberOfObl += ' (' + data.numberOfOblDigit + ')'
                }

                if (data.commodityDescr) {
                    var descriptionIndex2 = data.commodityDescr.indexOf( '\n' )
                    for (let i = 0; i < 19; i++) {
                        descriptionIndex2 = data.commodityDescr.indexOf( '\n', descriptionIndex2 + 1 );
                    }
                    if (descriptionIndex2 != -1) {
                        data.pageOne = 'Page : 1 of 2'
                        data.pageTwo = 'Page : 2 of 2'
                        var extraLongText = data.commodityDescr.substring(descriptionIndex2 + 2, data.commodityDescr.length)
                        data.commodityDescr = data.commodityDescr.substring(0, descriptionIndex2)
                        data.extraLongTips = '** TO BE CONTINUED ON ATTACHED LIST **'
                        data.extraLongText = extraLongText
                    }
                }

                // console.log(data.hshipperDetails, 'hshipperDetails2')

                // 创建一个 Stimulsoft 数据集（DataSet）的实例的代码
                var dataSet = new Stimulsoft.System.Data.DataSet(
                    'reportData'
                )

                dataSet.readJson(data) // 用于将 JSON 格式的数据加载到数据集中。data 是包含报表数据的 JSON 对象。
                // 这是一个方法调用，用于在报表中注册数据源。参数 'reportData' 是数据源的名称，
                // 第二个 'reportData' 是数据源的别名，dataSet 则是之前创建的数据集实例
                report.regData('reportData', 'reportData', dataSet)
                // 从模版和数据加载报表
                // loadReport(report, '', {})

                // 这是将报表对象指定给报表查看器的属性。viewer 是报表查看器的实例，而 report 是之前创建的报表对象。
                viewer.report = report;

                this.$refs.reportContainer.showContainer(
                    ()=> {
                        setTimeout(() => {
                            viewer.renderHtml('reportContainer')
                            this.createViewerButtons(viewer)
                        }, 50)
                    },
                    ()=>{
                    },
                )
                console.log("加载成功完成!");
            },
            createViewerButtons (viewer){
                viewer.jsObject.collections.images['myClose.png'] =
                    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA0ElEQVQ4ja3TO05CQRQG4A8iOwAbtYWETndAaecK7NwCKmETtJZsSBNLobEz8ZFIJQ0UnOGSm3DnYviTybzO/895DQXGWGCVGQuMEqkRcwcfuMOLalziCaf4TIe9UG9nyMJmFRzNGoRK1BU4xxx9G7cfwostciGk+x8MqgySwDXe4tU53hVV+MNtTmAoX84JGv9NYgrHyR6DV8wUSW7hItZLm36ZVoVQxsFJLOMsPOrH/h7dQwR2cdxOTEn8DtUbPGc4V2H7Vb4Yqfedf/GYSGt8VUmxgyfuBAAAAABJRU5ErkJggg=='
                const closeBtn = viewer.jsObject.SmallButton(
                    'closeBtn',
                    '关闭',
                    'myClose.png'
                )
                // 增加打印弹窗配置
                const printBtn = viewer.jsObject.SmallButton(
                    'printBtn',
                    '打印报表',
                    'myClose.png'
                )
                // console.log(viewer.jsObject.print(),'1013')
                // 获取 关闭按钮的dom元素位置
                const toolbarTable = viewer.jsObject.controls.toolbar.firstChild.firstChild
                const buttonsTable = toolbarTable.rows[0].lastChild.lastChild
                const userButtonCell = buttonsTable.rows[0].insertCell(0)
                // 获取打印按钮的位置
                const buttonsTablePrint = toolbarTable.rows[0].childNodes[0].lastChild // 打印按钮
                const userButtonPrint = buttonsTablePrint.rows[0].childNodes[0] // 打印按钮dom位置


                userButtonPrint.addEventListener("click", (event)=>{
                    console.log("打印点击");
                    // event.preventDefault()
                });
                userButtonPrint.addEventListener("mouseover", (event) => {
                    console.log("移入打印按钮");
                    console.log(event,1035)

                });

                userButtonCell.className = 'stiJsViewerClearAllStyles'
                userButtonCell.appendChild(closeBtn) // 添加关闭节点

                // userButtonPrint.prepend(printBtn) // 在 printBtn 节点里最前面增加一个子级节点


                let that=this
                // 关闭按钮的监听点击
                closeBtn.action = function() {
                    console.log(that.$refs.ReportContainer,'1022')
                    if (that.$refs.reportContainer)
                        that.$refs.reportContainer.hideContainer()
                }

                // // // 打印按钮监听
                // printBtn.action = (e)=>{
                //     console.log('打印')
                //     window.print()
                // }

            },

            //自定义列保存
            async saveColumnTwo(ref, option, optionBack, code) {
                /**
                 * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
                 * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
                 * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
                 */
                const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
                if (inSave) {
                    this.$message.success("保存成功");
                    //关闭窗口
                    this.$refs[ref].$refs.dialogColumn.columnBox = false;
                }
            },
            //自定义列重置
            async resetColumnTwo(ref, option, optionBack, code) {
                this[option] = this[optionBack];
                const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
                if (inSave) {
                    this.$message.success("重置成功");
                    this.$refs[ref].$refs.dialogColumn.columnBox = false;
                }
            },
            // 更改表格颜色
            headerClassName(tab) {
                //颜色间隔
                let back = ""
                if (tab.columnIndex >= 0 && tab.column.level === 1) {
                    if (tab.columnIndex % 2 === 0) {
                        back = "back-one"
                    } else if (tab.columnIndex % 2 === 1) {
                        back = "back-two"
                    }
                }
                return back;
            },

        }
    }
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
}
</style>