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">
                            <template slot="addBtn">
                                <el-tooltip class="item" effect="dark" content="新建分类" placement="top">
                                    <i class="el-icon-setting" style="font-size:18px;line-height: 30px;width: 20px;padding: 0 10px;"
                                       @click="corpTypeVisible = true"></i>
                                </el-tooltip>
                            </template>
                        </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" v-model="form" 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>
                    </avue-crud>
                </basic-container>
            </el-col>
        </el-row>

        <!--类别弹窗-->
        <el-dialog title="类别" :visible.sync="corpTypeVisible" append-to-body width="60%" :before-close="corpTypeClose">
            <div>
                <bbusinesstype></bbusinesstype>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="corpTypeVisible = false">取 消</el-button>
                <el-button type="primary" @click="corpTypeVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--报表列表弹窗-->
        <el-dialog title="单证列表" :visible.sync="reportVisible" append-to-body width="70%" :before-close="corpTypeClose">
            <div>
                <reportforms-list ref="reportformsList" @reportRadio="reportRadio"></reportforms-list>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reportVisible = false">取 消</el-button>
                <el-button type="primary" @click="reportConfirm" >确 定</el-button>
            </span>
        </el-dialog>

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

    </div>
</template>

<script>
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";

    export default {
        components: {reportformsList, bbusinesstype,DispatchNotice,PurchaseNotice},
        data(){
            return {
                reportVisible:false, // 报表列表数据
                documentVisible:false, // 单证添加编辑弹窗
                documentForm:{}, // 添加编辑弹窗的数据
                corpTypeVisible:false,
                // 左侧配置项
                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,
                    menuWidth:260,
                    addBtn:false,
                    viewBtn: true,
                    delBtn:false,
                    editBtn:false,
                    column: [
                        {
                            label: "报表编码",
                            prop: "reportsCode",
                            overHidden:true,
                        },
                        {
                            label: "备注",
                            prop: "remarks",
                            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:{}, // 左侧选择的数据
                reportForms:{}, // 报表列表选择的数据

            }
        },
        props:{
            assemblyForm:{
                type:Object,
                default:{}
            }
        },
        async created() {
            this.documentOption = await this.getColumnData(this.getColumnName(312.1), this.documentOptionBack);
            this.bbusinesstypeListfun()
        },
        methods:{
            // 新建单证按钮
            addbtnfun(){
                if(!this.businesstypeData.id){
                    this.$message.warning("请先选择报表类型");
                    return
                }
                // 打开报表选择框
                this.reportVisible = true
                let page = {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                }
                this.$nextTick(()=>{
                    this.$refs.reportformsList.onLoad(page,{businessType:this.businesstypeData.code})
                })
            },
            // 报表弹窗的单选
            reportRadio(val){
                this.reportForms = val
            },
            // 报表弹窗的确认
            reportConfirm(){
                console.log(this.reportForms,180)
                if (!this.reportForms.id){
                    this.$message.warning("请选择一条报表");
                    return
                }

                this.documentVisible = true
            },
            // 单证弹窗的确认按钮
            documentSubmit(){
                // 打印时间
                // printTime
                let obj = {
                    remarks:this.assemblyForm.remarks,
                    businessType:this.assemblyForm.businessType,
                    billId:this.assemblyForm.billId,
                    billNo:this.assemblyForm.billNo,
                    mblno:this.assemblyForm.mblno,
                    hblno:this.assemblyForm.hblno,
                    reportsCode:this.reportForms.code,
                    groupCode:this.reportForms.groupCode,
                    printContent:JSON.stringify(this.documentForm),
                }
                console.log(obj,204)
                return
                reportslogSubmit().then(res=>{
                    console.log(res,151)
                })
                this.documentVisible = false
            },
            // 左侧筛选
            nodeClick(data) {
                this.businesstypeData = data
            },
            // 左侧数据获取
            bbusinesstypeListfun(){
                bbusinesstypeList(1,20).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);
            },
            // 打开前的回调
            beforeOpen(done, type) {
                // 编辑和查看
                if (["edit", "view"].includes(type)) {

                }
            },
            // 单证中心数据获取
            reportslogListfun(documentPage, params = {}){
                this.loading = true;
                reportslogList(documentPage.currentPage, documentPage.pageSize, Object.assign(params, this.query)).then(res=>{
                    const data = res.data.data;
                    this.documentPage.total = data.total;
                    this.documentData = data.records;
                    this.loading = false;
                })
            },
            //自定义列保存
            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>