tire-platform-ui/src/views/iosBasicData/reportClose/SIreportClose/index.vue

<template>
    <div>
        <basic-container v-if="isShow">
            <avue-crud :option="option"
                       :table-loading="loading"
                       :data="data"
                       :page.sync="page"
                       id="out-table"
                       :header-cell-class-name="headerClassName"
                       v-model="form"
                       ref="crud"
                       :search.sync="query"
                       @selection-change="selectionChange"
                       @search-change="searchChange"
                       @search-reset="searchReset"
                       @refresh-change="refreshChange"
                       @current-change="currentChange"
                       @size-change="sizeChange"
                       @on-load="onLoad"
                       @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 326)"
                       @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 326)" >
                <template slot="menuLeft">
                    <el-button type="primary" size="small" @click="addbtnfun()">新建报关</el-button>
                    <el-button type="primary"
                               size="small"
                               plain @click="CopyDocumentsfun">复制单据
                    </el-button>
                    <el-button type="danger"
                               size="small"
                               plain
                               v-if="query.billStatus != 3"
                               @click="handleDelete">删 除
                    </el-button>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button :type="scope.type" :size="scope.size"
                               icon="el-icon-edit"
                               @click.stop="rowCellfun(scope.row.id, scope.index)">编辑
                    </el-button>
                </template>
                <template slot="billNo" slot-scope="scope">
                        <span style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                              @click.stop="rowCellfun(scope.row.id, scope.index)" >{{scope.row.billNo}}</span>
                </template>
            </avue-crud>
        </basic-container>
        <bgdetails ref="bgdetails" v-if="!isShow" :detailData="detailData" @goBack="goBack" ></bgdetails>
    </div>
</template>

<script>
    import bgdetails from "./bgdetails.vue";
    import {customsdeclarationList, customsdeclarationRemove} from "@/api/iosBasicData/customsdeclaration";
    import {getWorkDicts} from "@/api/system/dictbiz";
    import {getBcorpslistByType} from "@/api/iosBasicData/bcorps";

    export default {
        components:{bgdetails},
        data() {
            return {
                isShow:true, // 详情是否打开
                loading:false, // 按钮动画
                data:[], // 渲染的数据
                // 分页
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                form:{}, // 绑定的对象
                query:{}, // 搜索项
                option:{},
                optionBack:{
                    height:'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    rowKey:'id',
                    searchIcon: true,
                    searchIndex: 3,
                    border: true,
                    index: true,
                    selection: true, // 是否有选择框
                    dialogClickModal: false,
                    stripe:true,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    menuWidth:'auto',
                    column: [
                        {
                            label: "业务类型",
                            prop: "businessType",
                            type: 'select',
                            dicData:[
                                {
                                    label:'海运报关',
                                    value:'SE'
                                },
                                {
                                    label:'海运报关',
                                    value:'SI'
                                },
                                {
                                    label:'空运报关',
                                    value:'AE'
                                },
                                {
                                    label:'空运报关',
                                    value:'AI'
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "进出口",
                            prop: "seaType",
                            type: 'select',
                            dicData:[
                                {
                                    label:'出口',
                                    value:'E'
                                },
                                {
                                    label:'进口',
                                    value:'I'
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "单据编号",
                            prop: "billNo",
                            search:true,
                            overHidden:true
                        },
                        {
                            label: "经营单位名称",
                            prop: "corpCnName",
                            width:'140',
                            searchLabelWidth:120,
                            search:true,
                            type:'select',
                            filterable:true,
                            remote:true,
                            dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                            dicData:[],
                            props: {
                                label: 'cnName',
                                value: 'cnName',
                                res:'data.records'
                            },
                            overHidden:true
                        },
                        {
                            label: "经营单位英文名称",
                            prop: "corpEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "发货单位中文名称",
                            prop: "deliveryCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "发货单位英文名称",
                            prop: "deliveryEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "订舱号",
                            prop: "bookingNo",
                            search:true,
                            overHidden:true
                        },
                        {
                            label: "提单号",
                            prop: "mblno",
                            search:true,
                            overHidden:true
                        },
                        {
                            label: "三检单号",
                            prop: "tripleInspectionNumber",
                            overHidden:true
                        },
                        {
                            label: "报关单号",
                            prop: "customsDeclarationNumber",
                            overHidden:true
                        },
                        {
                            label: "备案号",
                            prop: "recordNumber",
                            overHidden:true
                        },
                        {
                            label: "提运单号",
                            prop: "contractAgreementNumber",
                            overHidden:true
                        },
                        {
                            label: "合同协议号",
                            prop: "deliveryNumbers",
                            width:'100',
                            overHidden:true
                        },
                        {
                            label: "对帐约号",
                            prop: "reconciliationAgreementNumber",
                            overHidden:true
                        },
                        {
                            label: "核注清单号",
                            prop: "approvalListNumber",
                            width:'100',
                            overHidden:true
                        },
                        {
                            label: "Reference NO",
                            prop: "refno",
                            width:'120',
                            overHidden:true
                        },
                        {
                            label: "发票号",
                            prop: "invoiceNumber",
                            overHidden:true
                        },
                        {
                            label: "接单日期",
                            prop: "billDate",
                            overHidden:true
                        },
                        {
                            label: "etd",
                            prop: "etdDate",
                            overHidden:true
                        },
                        {
                            label: "报检日期",
                            prop: "inspectionDeclarationDate",
                            overHidden:true
                        },
                        {
                            label: "申报日期",
                            prop: "declareDate",
                            overHidden:true
                        },
                        {
                            label: "预录日期",
                            prop: "preRrecordingDate",
                            overHidden:true
                        },
                        {
                            label: "业务来源",
                            prop: "srcType",
                            overHidden:true
                        },
                        {
                            label: "来源中文",
                            prop: "srcCnName",
                            overHidden:true
                        },
                        {
                            label: "来源英文",
                            prop: "srcEnName",
                            overHidden:true
                        },
                        {
                            label: "代理公司代码",
                            prop: "agencyCompanytCode",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "代理公司中文名称",
                            prop: "agencyCompanytCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "代理公司英文名称",
                            prop: "agencyCompanytEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "企业中文名称",
                            prop: "enterpriseCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "企业英文名称",
                            prop: "enterpriseEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "企业海关编号",
                            prop: "enterpriseCode",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "中文船名",
                            prop: "vesselCnName",
                            overHidden:true
                        },
                        {
                            label: "英文船名",
                            prop: "vesselEnName",
                            overHidden:true
                        },
                        {
                            label: "申报方式编码",
                            prop: "declarationMethodCode",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "申报方式",
                            prop: "declarationMethodName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "贸易方式编码",
                            prop: "tradeMethodCode",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "贸易方式",
                            prop: "tradeMethodName",
                            overHidden:true
                        },
                        {
                            label: "运输方式",
                            prop: "transportMethod",
                            overHidden:true
                        },
                        {
                            label: "运输工具",
                            prop: "transportTool",
                            overHidden:true
                        },
                        {
                            label: "结汇方式",
                            prop: "exchangeSettlementMethod",
                            overHidden:true
                        },
                        {
                            label: "成交方式",
                            prop: "dealMethod",
                            overHidden:true
                        },
                        {
                            label: "出口口岸中文名称",
                            prop: "exportPortCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "出口口岸英文名称",
                            prop: "exportPortEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "运抵国中文名称",
                            prop: "destinationCountryCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "运抵国英文名称",
                            prop: "destinationCountryEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "指运港中文名称",
                            prop: "portOfDestinationCnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "指运港英文名称",
                            prop: "portOfDestinationEnName",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "运费",
                            prop: "amountFreight",
                            overHidden:true
                        },
                        {
                            label: "杂费",
                            prop: "amountMiscellaneousExpenses",
                            overHidden:true
                        },
                        {
                            label: "保费",
                            prop: "amountPremium",
                            overHidden:true
                        },
                        {
                            label: "货物金额",
                            prop: "amountGoods",
                            overHidden:true
                        },
                        {
                            label: "境内货源地",
                            prop: "domesticSourceOfGoods",
                            width:'100',
                            overHidden:true
                        },
                        {
                            label: "随附单据",
                            prop: "documentsAttached",
                            overHidden:true
                        },
                        {
                            label: "其他单据",
                            prop: "documentsAttachedOther",
                            overHidden:true
                        },
                        {
                            label: "源操作",
                            prop: "srcOperation",
                            overHidden:true
                        },
                        {
                            label: "唛头",
                            prop: "marks",
                            overHidden:true
                        },
                        {
                            label: "包装单位",
                            prop: "packingUnit",
                            overHidden:true
                        },
                        {
                            label: "件数",
                            prop: "quantity",
                            overHidden:true
                        },
                        {
                            label: "毛重 (KGM)",
                            prop: "grossWeight",
                            width:'120',
                            overHidden:true
                        },
                        {
                            label: "净重 (KGM)",
                            prop: "netWeight",
                            width:'120',
                            overHidden:true
                        },
                        {
                            label: "本位币应收(CNY)",
                            prop: "amountDr",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "本位币应付(CNY)",
                            prop: "amountCr",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "本位币利润(CNY)",
                            prop: "amountProfit",
                            width:'140',
                            overHidden:true
                        },
                        {
                            label: "合计本位币应收(CNY)",
                            prop: "amountDrLoc",
                            width:'160',
                            overHidden:true
                        },
                        {
                            label: "合计本位币应付(CNY)",
                            prop: "amountCrLoc",
                            width:'160',
                            overHidden:true
                        },
                        {
                            label: "合计本位币利润(CNY)",
                            prop: "amountProfitLoc",
                            width:'160',
                            overHidden:true
                        },
                        {
                            label: "应收对账状态",
                            prop: "checkDrStatus",
                            width:'120',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "应收付账状态",
                            prop: "checkCrStatus",
                            width:'120',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "应收结算状态",
                            prop: "stlDrStatus",
                            width:'120',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "应付结算状态",
                            prop: "stlCrStatus",
                            width:'120',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "销项发票开具状态",
                            prop: "invoiceDrStatus",
                            width:'140',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "进项发票开具状态",
                            prop: "invoiceCrStatus",
                            width:'140',
                            type:"select",
                            dicData: [
                                {
                                    label: '未开',
                                    value: 0
                                },
                                {
                                    label: '部分',
                                    value: 3
                                },
                                {
                                    label: '全开',
                                    value: 9
                                }
                            ],
                            overHidden:true
                        },
                        {
                            label: "状态",
                            prop: "billStatus",
                            type:"select",
                            dicData: [],
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            overHidden:true
                        },
                        {
                            label: "财务状态",
                            prop: "accountStatus",
                            type: 'select',
                            dicData:[],
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            overHidden:true
                        },
                        {
                            label: "备注",
                            prop: "remarks",
                        },
                        {
                            label: "创建人",
                            prop: "createUserName",
                            overHidden:true
                        },
                        {
                            label: "创建部门",
                            prop: "createDeptName",
                            overHidden:true
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            overHidden:true
                        },
                        {
                            label: "修改人",
                            prop: "updateUserName",
                            overHidden:true
                        },
                        {
                            label: "修改时间",
                            prop: "updateTime",
                            overHidden:true
                        },
                        {
                            label: "默认团队名",
                            prop: "teamName",
                            width:'100',
                            overHidden:true
                        },
                    ]
                },
                detailData:{},
            }
        },
        async created() {
            this.option = await this.getColumnData(this.getColumnName(326), this.optionBack);
            // 首页快捷跳转进来的
            if(this.$route.query.home) {
                this.addbtnfun()
            }
            if (this.$route.query.billId) {
                // 从审批里查看跳进来的
                this.rowCellfun({id:this.$route.query.billId})
            }
            this.$store.commit('SIBG_IN_DETAIL')
            this.accountStatusWorkDictsfun() // 业务状态字典
            this.billStatusWorkDictsfun() // 状态字典
            this.corpBcorpslistByTypefun() // 经营单位数据
        },
        methods:{
            // 批量删除
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                // 已经提交请核的提示不让删除
                let sumArr = []
                const h = this.$createElement
                for (let item of this.selectionList) {
                    if (item.status == 1) {
                        sumArr.push(h('p', `序号${item.$index + 1}的数据已经提交请核请勿删除`))
                    }
                }
                if(sumArr.length != 0) {
                    this.$confirm('提示', {
                        message:h('div', sumArr),
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    return;
                }
                let ids = this.selectionList.map(item=>{
                    return item.id
                })
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return customsdeclarationRemove(ids.join(','));
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            // 复制单据
            CopyDocumentsfun(){
                if (this.selectionList.length !== 1) {
                    this.$message.warning("请选择一条数据");
                    return;
                }
                this.detailData.seeDisabled = false
                this.detailData.id = this.selectionList[0].id
                this.isShow = false
                this.$nextTick(()=>{
                    this.$refs.bgdetails.pageLoading = true
                    this.$refs.bgdetails.copyCustomsDeclarationfun(this.selectionList[0].id)
                })
            },
            // 编辑详情打开
            rowCellfun(id,index) {
                this.detailData = {
                    seeDisabled: false,
                    id: id
                };
                this.isShow = false
                this.$nextTick(()=>{
                    this.$refs.bgdetails.pageLoading = true
                    this.$refs.bgdetails.customsdeclarationDetailfun(id)
                })
            },
            // 新增弹窗开启
            addbtnfun(){
                this.detailData.seeDisabled = false
                this.isShow = false
            },
            // 搜索
            searchChange(params,done){
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, params);
                done();
            },
            // 接口调用 🐢🐢🐢🐢🐢🐢🐢
            // 获取财务状态字典数据
            accountStatusWorkDictsfun(){
                getWorkDicts('account_status').then(res=>{
                    this.findObject(this.option.column, "accountStatus").dicData = res.data.data;
                })
            },
            // 获取业务状态字典数据
            billStatusWorkDictsfun(){
                getWorkDicts('bill_status').then(res=>{
                    this.findObject(this.option.column, "billStatus").dicData = res.data.data;
                })
            },
            // 经营单位数据
            corpBcorpslistByTypefun(){
                getBcorpslistByType(1,10).then(res=>{
                    this.findObject(this.option.column, "corpCnName").dicData = res.data.data.records
                })
            },

            // 清空搜索条件
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            // 多选
            selectionChange(list) {
                this.selectionList = list;
            },
            // 刷新
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            currentChange(currentPage){
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            // 列表数据
            onLoad(page, params = {}) {
                this.loading = true;
                customsdeclarationList(page.currentPage, page.pageSize, {
                    ...Object.assign(params, this.query),
                    businessType:'BGSI',
                }).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records.map(item=>{
                        item.accountStatus = item.accountStatus + ''
                        item.billStatus = item.billStatus + ''
                        return item
                    })
                    this.loading = false;
                    this.selectionClear();
                });
            },
            // 返回列表
            goBack(){
                // 初始化数据
                if (JSON.stringify(this.$route.query) != "{}") {
                    this.$router.$avueRouter.closeTag();
                    this.$router.push({
                        path: "/iosBasicData/reportClose/SEreportClose/index"
                    });
                }
                this.isShow = true;
                this.onLoad(this.page, this.search);
            },
            //自定义列保存
            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;
    text-align: center;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
}
/deep/ .el-col-md-8 {
    width: 24.33333%;
}
</style>