Smart_platform_ui/src/views/iosBasicData/ComputationCenter/index.vue

<template>
    <div>
        <basic-container v-if="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>
                </template>
                <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">
        </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";

export default {
    components: { settlementDetails },
    data() {
        return {
            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: 6,
                searchLabelWidth: '100',
                border: true,
                index: true,
                selection: true,
                dialogClickModal: false,
                searchIcon: true,
                searchIndex: 3,
                stripe: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                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: [],
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "发票抬头",
                        prop: "invCorpCnName",
                        hide: 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: "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()
    },
    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
        },
        // 编辑
        editfun(row) {
            this.isShow = false
            this.editSave = true
            this.$nextTick(() => {
                this.$refs.settlementDetailsRef.finstlbillsDetailfun(row.id)
            })
        },
        // 编辑
        editfun2(row) {
            if (row.dc == 'C') {
                this.$router.push({
                    path: "/iosBasicData/PaymentApplication/index",
                    query: {
                        id: row.id
                    }
                });
            } 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) {
            console.log(list, '多选回调')
            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;
        },
        //自定义列保存
        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>