tire-platform-ui/src/views/iosBasicData/ComputationCenter/index.vue

<template>
    <div>
        <basic-container v-show="isShow">
            <div style="margin-top: 10px">
                <el-tabs type="card" v-model="tabsValue" @tab-click="handleClick">
                    <el-tab-pane label="待付" name="C">
                        <span slot="label">待付</span>
                    </el-tab-pane>
                    <el-tab-pane label="待收" name="D">
                        <span slot="label">待收</span>
                    </el-tab-pane>
                    <el-tab-pane label="业务单据" name="业务单据">
                        <span slot="label" style="color: #4c9e44">财务单据</span>
                    </el-tab-pane>
                    <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
                </el-tabs>
            </div>
            <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" id="out-table"
                :header-cell-class-name="headerClassName" :before-open="beforeOpen" v-model="form" ref="crud"
                :search.sync="query" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
                @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
                @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
                @on-load="onLoad" @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 324)"
                @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 324)">
                <template slot="menuLeft">
                    <el-button v-if="tabsValue == 'C' || tabsValue == 'D'" type="primary" size="small" plain
                        @click="chooseSettlement()">选择结算
                    </el-button>
                    <el-button v-if="tabsValue == '业务单据'" type="primary" size="small" plain @click="addfun()">添加单据
                    </el-button>
                    <el-button v-if="tabsValue == '业务单据'" type="danger" size="small" plain @click="handleDelete()">一键删除
                    </el-button>
                    <span style="font-size: 18px;">
                        <span style="color: #67C23A;margin-right: 10px;">
                            CNY:￥{{ amountSubSum }}元
                        </span>
                        <span style="color: #E6A23C;">
                            USD:${{ amountSubUsdSum }}元
                        </span>
                    </span>
                </template>
                <tempalte slot="feeCnNameSearch">
                    <dic-select v-model="query.feeCnName" placeholder="费用名称" key="id" label="cnName" res="records"
                        url="/blade-los/bfees/list" :filterable="true" :remote="true" dataName="cnName"></dic-select>
                </tempalte>
                <template slot="menu" slot-scope="{row}">
                    <el-button v-if="tabsValue == 'C' || tabsValue == 'D'" type="text" size="small"
                        :disabled="saberUserInfo.role_name.indexOf('admin') == -1 ? saberUserInfo.role_name.indexOf('允许修改他人业务') == -1 ? saberUserInfo.user_id != row.createUser : false : false"
                        @click="settlementfun(row)">结算
                    </el-button>
                    <el-button v-if="tabsValue == '业务单据' || tabsValue == '已完成'" type="text" size="small"
                        @click="editfun(row)">编辑
                    </el-button>
                    <!--:disabled="saberUserInfo.role_name.indexOf('允许修改他人业务') == -1?saberUserInfo.user_id != row.createUser:false"-->
                    <el-button v-if="tabsValue == '业务单据'" type="text" size="small"
                        :disabled="saberUserInfo.role_name.indexOf('admin') == -1 ? saberUserInfo.role_name.indexOf('允许修改他人业务') == -1 ? saberUserInfo.user_id != row.createUser : false : false"
                        @click="rowDel(row)">删除
                    </el-button>
                </template>
                <template slot="billNo" slot-scope="{row}">
                    <span class="pointerClick" @click="editfun(row)">{{ row.billNo }}
                    </span>
                </template>
                <!-- <template slot="requestNo" slot-scope="{row}">
                    <span class="pointerClick" @click="editfun2(row)">{{ row.requestNo }}
                    </span>
                </template> -->
            </avue-crud>
        </basic-container>

        <settlementDetails ref="settlementDetailsRef" v-if="!isShow" :editSave="editSave" @goBack="goBack"
            @toAddEdit="toAddEdit" :key="datekey">
        </settlementDetails>
    </div>
</template>

<script>
import { fininvoicesList, generateFinStlBills } from "@/api/iosBasicData/fininvoices";
import { finstlbillsList, finstlbillsRemove } from "@/api/iosBasicData/finstlbills";
import finstlbillsDetails from "@/views/iosBasicData/CollectionSettlement/finstlbillsDetails.vue";
import settlementDetails from "@/views/iosBasicData/ComputationCenter/settlementDetails.vue";
import { getBcorpslistByType } from "@/api/iosBasicData/bcorps";
import { bbusinesstypeList } from "@/api/iosBasicData/bbusinesstype";
import dicSelect from "@/components/dicSelect/main";
export default {
    components: { settlementDetails, dicSelect },
    data() {
        return {
            amountSubSum: 0,
            amountSubUsdSum: 0,
            datekey: Date.now(),
            selectionList: [], // 多选的数据
            isShow: true,
            editSave: false, // 详情是否禁用
            tabsValue: 'C', // tabs切换
            // 动画
            loading: false,
            // 分页
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            query: {}, // 检索条件
            data: [], // 数据
            form: {},
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 24,
                searchLabelWidth: '100',
                border: true,
                index: true,
                selection: true,
                dialogClickModal: false,
                stripe: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                searchIcon: true,
                searchIndex: 3,
                menuWidth: '100',
                column: [
                    {
                        label: "业务类型",
                        prop: "businessType",
                        hide: false,
                        overHidden: true,
                        type: 'select',
                        dicData: [],
                        props: {
                            label: "cnName",
                            value: "code"
                        },
                    },
                    {
                        label: "业务类型",
                        prop: "type",
                        hide: true,
                        overHidden: true,
                    },
                    {
                        label: "单据编号",
                        prop: "billNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "来源单号",
                        prop: "requestNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "往来单位",
                        prop: "corpCnName",
                        search: true,
                        overHidden: true,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
                        dicData: [],
                        searchOrder: 1,
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "发票抬头",
                        prop: "invCorpCnName",
                        hide: true,
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "申请人",
                        prop: "createUserName",
                        overHidden: true,
                    },
                    {
                        label: "结算日期",
                        prop: "billDate",
                        overHidden: true,
                        width: "150",
                    },

                    {
                        label: "结算日期起",
                        prop: "billDateStart",
                        search: true,
                        overHidden: true,
                        hide: true,
                        searchLabelWidth: '100',
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                    },
                    {
                        label: "结算日期止",
                        prop: "billDateEnd",
                        search: true,
                        overHidden: true,
                        hide: true,
                        searchLabelWidth: '100',
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                    },
                    {
                        label: "单据开始日期",
                        prop: "businessDateStart",
                        search: true,
                        overHidden: true,
                        hide: true,
                        searchLabelWidth: '100',
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                    },
                    {
                        label: "单据结束日期",
                        prop: "businessDateEnd",
                        search: true,
                        overHidden: true,
                        hide: true,
                        searchLabelWidth: '100',
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                    },
                    // {
                    //     label: "单据日期",
                    //     prop: "billDate",
                    //     search:true,
                    //     overHidden:true,
                    //     searchProp: 'billDateList',
                    //     type: "daterange",
                    //     searchRange: true,
                    //     searchDefaultTime: ["00:00:00", "23:59:59"],
                    //     format: "yyyy-MM-dd",
                    //     valueFormat: "yyyy-MM-dd HH:mm:ss"
                    // },
                    {
                        label: "提交日期",
                        prop: "auditDateFrom",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "审核日期",
                        prop: "auditDateTo",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "收/付",
                        prop: "dc",
                        width: "140",
                        search: true,
                        type: "select",
                        dicData: [{
                            id: 'C',
                            name: "付款",
                        }, {
                            id: 'D',
                            name: "收款",
                        }],
                        props: {
                            label: "name",
                            value: "id",
                        },
                        overHidden: true,
                    },
                    {
                        label: "JOB NO",
                        prop: "businessNo",
                        width: "120",
                        search: true,
                        searchOrder: 3,
                        overHidden: true
                    },
                    {
                        label: "ACCT NO",
                        prop: "accountNo",
                        width: "100",
                        search: true,
                        searchOrder: 5,
                        overHidden: true
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        search: true,
                        searchOrder: 2,
                        overHidden: true
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        search: true,
                        searchOrder: 4,
                        overHidden: true
                    },
                    {
                        label: "对账单号",
                        prop: "checkNo",
                        search: true,
                        width: "100",
                        searchOrder: 6,
                        overHidden: true
                    },
                    {
                        label: "船名",
                        prop: "vesselCnName",
                        search: true,
                        searchOrder: 7,
                        overHidden: true
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        search: true,
                        searchOrder: 8,
                        overHidden: true
                    },
                    {
                        label: "CNY",
                        prop: "amountSub",
                        overHidden: true,
                    },
                    {
                        label: "USD",
                        prop: "amountSubUsd",
                        overHidden: true,
                    },
                    {
                        label: "事由",
                        prop: "remarks",
                        overHidden: true,
                    },
                ]
            },
            saberUserInfo: {}, // 当前登录人个人信息
        }
    },
    async created() {
        // 获取当前登录人个人信息
        this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
        this.option = await this.getColumnData(this.getColumnName(324), this.optionBack);
        if (this.$route.query.billId) {
            // 从审批里查看跳进来的
            this.editFun({ id: this.$route.query.billId })
        }
        this.$store.commit('JSZX_IN_DETAIL')
        this.getBcorpslistByTypefun()
        this.bbusinesstypeListfun()
    },
    activated() {
        setTimeout(() => {
            if (this.$route.query.billNo) {
                this.isShow = false
                this.$nextTick(() => {
                    this.$refs.settlementDetailsRef.finstlbillsDetailfun(this.$route.query.billNo)
                })
                this.$store.commit('JSZX_IN_DETAIL')
            }
        }, 100);
    },
    methods: {
        // 获取业务类型
        bbusinesstypeListfun() {
            bbusinesstypeList(1, 50).then(res => {
                this.findObject(this.option.column, "businessType").dicData = res.data.data.records
            })
        },
        // 获取往来单位数据
        getBcorpslistByTypefun() {
            getBcorpslistByType(1, 10).then(res => {
                this.findObject(this.option.column, "corpCnName").dicData = res.data.data.records
            })
        },
        // 选择结算
        chooseSettlement() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据结算?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let arrId = this.selectionList.map(item => {
                    return item.id
                })
                this.isShow = false
                this.$nextTick(() => {
                    this.$refs.settlementDetailsRef.generateFinStlBillsfun(arrId.join(','), this.tabsValue)
                })
            })
        },
        // 结算
        settlementfun(row) {
            this.isShow = false
            // this.editSave = true
            this.$nextTick(() => {
                this.$refs.settlementDetailsRef.generateFinStlBillsfun(row.id, this.tabsValue)
            })
        },
        // 添加
        addfun() {
            this.isShow = false
            this.editSave = false
        },
        toAddEdit() {
            this.datekey = Date.now()
            this.isShow = false
            this.editSave = false
        },
        // 编辑
        editfun(row) {
            if (this.tabsValue == 'C') {
                if (this.$store.getters.payAppStatus) {
                    this.$alert("付费申请页面已存在,请关闭付费申请再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/PaymentApplication/index`,
                        query: {
                            id: row.id
                        }
                    })
                }

            } else if (this.tabsValue == 'D') {
                if (this.$store.getters.finOutStatus) {
                    this.$alert("销项发票页面已存在,请关闭销项发票再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/fininvoicesOutput/index`,
                        query: {
                            id: row.id
                        }
                    })
                }

            } else {
                this.isShow = false
                this.editSave = true
                this.$nextTick(() => {
                    this.$refs.settlementDetailsRef.finstlbillsDetailfun(row.id)
                })
            }

        },
        // 编辑
        editfun2(row) {
            if (row.dc == 'C') {
                if (this.$store.getters.payAppStatus) {
                    this.$alert("付费申请页面已存在,请关闭付费申请再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/PaymentApplication/index`,
                        query: {
                            id: row.id
                        }
                    })
                }
            } else {
                if (this.$store.getters.finOutStatus) {
                    this.$alert("销项发票页面已存在,请关闭销项发票再进行操作", "温馨提示", {
                        confirmButtonText: "确定",
                        type: 'warning',
                        callback: action => {
                        }
                    });
                } else {
                    this.$router.push({
                        path: `/iosBasicData/fininvoicesOutput/index`,
                        query: {
                            id: row.id
                        }
                    })
                }
            }
        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            // this.detailData = this.$options.data().detailData;
            if (JSON.stringify(this.$route.query) != "{}") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                    path: "/iosBasicData/ComputationCenter/index"
                });
            }
            this.isShow = true;
            this.onLoad(this.page, this.search);
        },
        // tabs 切换
        handleClick() {
            if (this.tabsValue == 'D') {
                this.findObject(this.option.column, "invCorpCnName").hide = false
                this.findObject(this.option.column, "type").hide = false
                this.findObject(this.option.column, "businessType").hide = true
            } else {
                this.findObject(this.option.column, "invCorpCnName").hide = true
                this.findObject(this.option.column, "type").hide = true
                this.findObject(this.option.column, "businessType").hide = false
            }
            // this.query = {};
            this.page.currentPage = 1
            this.selectionList = []
            this.$set(this.query, 'billNo', '')
            this.$set(this.query, 'corpCnName', '')
            this.$set(this.query, 'businessDateStart', '')
            this.$set(this.query, 'businessDateEnd', '')
            this.onLoad(this.page)
        },
        // 刷新回调
        refreshChange() {
            console.log('刷新回调')
            this.onLoad(this.page)
        },
        // 分页回调
        currentChange(currentPage) {
            console.log(currentPage, '分页回调')
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            console.log(pageSize, '分条回调')
            this.page.pageSize = pageSize;
        },
        // 多选回调
        selectionChange(list) {
            if (list.length) {
                list.forEach(e => {
                    this.amountSubSum += Number(e.amountSub)
                    this.amountSubUsdSum += Number(e.amountSubUsd)
                })
            } else {
                this.amountSubSum = 0
                this.amountSubUsdSum = 0
            }
            this.selectionList = list;

        },
        // 清空回调
        searchReset() {
            console.log('清空回调')
            this.query = {};
            this.onLoad(this.page);
        },
        // 搜索回调
        searchChange(params, done) {
            console.log(params, '搜索回调')
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        // 一键删除
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            // 判断是否可以编辑别人业务 true 就没有权限
            if (this.ModifyOthersfun()) return;
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let arrId = this.selectionList.map(item => {
                    return item.id
                })
                finstlbillsRemove(arrId.join(',')).then(res => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                })
            })
        },
        // 行删除回调
        rowDel(row) {
            console.log('行删除回调')
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                finstlbillsRemove(row.id).then(res => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                })
            })
        },
        // 判断是否可以编辑别人业务
        ModifyOthersfun() {
            let sumArr = []
            const h = this.$createElement
            // 判断是否有权限
            if (this.saberUserInfo.role_name.indexOf('允许修改他人业务') != -1) return false
            // 当前登录人和选择的创建人对比是不是一个人
            for (let item of this.selectionList) {
                if (this.saberUserInfo.user_id != item.createUser) {
                    sumArr.push(h('p', `你没有"允许修改他人业务"权限,请重新选择数据`))
                }
            }
            if (sumArr.length != 0) {
                this.$confirm('提示', {
                    message: h('div', sumArr),
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).catch(err => { })
                return true
            }
        },
        // 新增弹窗确认回调
        rowSave(row, done, loading) {
            console.log('新增弹窗确认回调')
        },
        // 编辑弹窗确认回调
        rowUpdate(row, index, done, loading) {
            console.log('编辑弹窗确认回调')
            done();
            loading();
        },
        // 打开弹窗的回调
        beforeOpen(done, type) {
            console.log(type, '打开弹窗的回调')
            done();
        },
        // 列表获取数据
        async onLoad(page, params = {}) {
            this.loading = true;
            let res = {}
            if (this.tabsValue == 'C') {
                // 调用 付费申请数据
                res = await finstlbillsList(page.currentPage, page.pageSize, {
                    ...Object.assign(params, this.query),
                    businessType: 'FFSQ',
                    status: 3,
                    billStatus: 0,
                })
            } else if (this.tabsValue == 'D') {
                // 调用 销项发票业务数据
                res = await fininvoicesList(page.currentPage, page.pageSize, {
                    ...Object.assign(params, this.query),
                    type: '销项',
                    status: 3,
                    billStatus: 0,
                })
            } else if (this.tabsValue == '业务单据') {
                // 应收应付 业务数据
                res = await finstlbillsList(page.currentPage, page.pageSize, {
                    ...Object.assign(params, this.query),
                    businessType: 'STL',
                    status: 0,
                })
            } else {
                // 应收应付 业务数据 已完成
                res = await finstlbillsList(page.currentPage, page.pageSize, {
                    ...Object.assign(params, this.query),
                    businessType: 'STL',
                    status: 3,
                })
            }
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
            this.$refs.crud.refreshTable();
        },
        //自定义列保存
        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%;
}

.pointerClick {
    cursor: pointer;
    color: #1e9fff;
}
</style>