yf-admin-ui/src/views/iosBasicData/costcenter/soc/index.vue

<template>
    <div>
        <basic-container v-if="isShow">
            <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
                v-model="form" id="out-table" :header-cell-class-name="headerClassName" ref="crud" @row-del="rowDel"
                @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
                @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
                @resetColumn="resetColumn('crud', 'option', 'optionBack', 446)"
                @saveColumn="saveColumn('crud', 'option', 'optionBack', 446)" @on-load="onLoad">
                <template slot="sortSearch">
                    <el-radio-group v-model="query.sort">
                        <el-radio :label="0">按箱利润</el-radio>
                        <el-radio :label="1">按起运港</el-radio>
                        <el-radio :label="2">按目的港</el-radio>
                    </el-radio-group>
                </template>
                <template slot="menuLeft">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addButton">创建单据
                    </el-button>
                    <el-button type="success" size="small" :disabled="selectionList.length != 1"
                        @click="copyButton">复制单据
                    </el-button>
                    <el-button type="warning" size="small" @click="outExport">导 出
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-refresh" @click="swap">
                    </el-button>
                    <el-button type="success" size="small" @click="checkBills" :disabled="!selectionList.length">提交
                    </el-button>
                    <el-button type="danger" size="small" @click="batchRevoke" :disabled="!selectionList.length">撤销
                    </el-button>
                    <el-button type="success" size="small" :disabled="selectionList.length == 0"
                        @click="allClick('批量复制')">批量复制
                    </el-button>
                </template>
                <template slot="menu" slot-scope="{ row, index }">
                    <el-button size="small" icon="el-icon-edit" type="text" @click="rowEdit(row)">编辑</el-button>
                    <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)"
                        :disabled="row.status != '录入'">删 除</el-button>
                </template>
                <template slot="businessNo" slot-scope="{ row }">
                    <span style="color: #1e9fff;cursor: pointer;" @click="rowEdit(row)">{{ row.businessNo }}</span>
                </template>
                <template slot="status" slot-scope="{ row }">
                    <span v-if="row.status == '录入'"
                        style="color: #fff;border-radius: 30px;padding: 2px 15px;background-color: #409EFF;">{{
                            row.status }}</span>
                    <span v-if="row.status != '录入'"
                        style="color: #fff;border-radius: 30px;padding: 2px 15px;background-color: #67C23A;">{{
                            row.status }}</span>
                </template>
            </avue-crud>
        </basic-container>
        <el-dialog title="导入模板" append-to-body :visible.sync="copyDia" width="555px" :close-on-click-modal="false"
            v-dialog-drag>
            <avue-form v-if="copyDia" ref="copy" :option="copyOption" v-model="copyForm">
                <template slot="curCode">
                    <dic-select v-model="copyForm.curCode" placeholder="币别" label="code"
                        :url="'/blade-los/bcurrency/obtainRate?deptId=' + copyForm.deptId + '&date=' + copyForm.effectiveStartDate + '&type=1'"
                        :filterable="true" @selectChange="dicChange('curCode', $event)"></dic-select>
                </template>
            </avue-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="copyDia = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="allClick('确认复制')" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <detailsPage v-if="!isShow" :detailData="detailData" :pageIds="pageIds" @goBack="goBack"></detailsPage>
    </div>
</template>

<script>
import { getList, remove, checkBillsBatch, batchRevoke, batchCopy } from "@/api/iosBasicData/costcenter/soc";
import { getWorkDicts } from "@/api/system/dictbiz";
import detailsPage from "./detailsPage";
import { getToken } from "@/util/auth";
import { dateFormat } from "@/util/date";
import dicSelect from "@/components/dicSelect/main";
import _ from "lodash";
export default {
    data() {
        return {
            copyForm: {
                deptId: JSON.parse(localStorage.getItem('sysitemData')).deptId,
                effectiveStartDate: dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00',
            },
            copyDia: false,
            copyOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: "有效期起",
                        prop: "effectiveStartDate",
                        width: "120",
                        disabled: false,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        rules: [{
                            required: true,
                            message: "请选择日期",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "有效期止",
                        prop: "effectiveEndDate",
                        width: "120",
                        disabled: false,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 23:59:59",
                        rules: [{
                            required: true,
                            message: "请选择日期",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        width: "80",
                        disabled: false,
                        rules: [
                            {
                                required: true,
                                message: ' ',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "汇率",
                        prop: "exrate",
                        width: "80",
                        disabled: false,
                        rules: [
                            {
                                required: true,
                                message: ' ',
                                trigger: 'blur'
                            }
                        ]
                    },
                ]

            },
            isShow: true,
            detailData: {},
            form: {},
            query: {
                businessType: 'SOC',
                sort: 0,
                effectiveStartDate: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00"
            },
            loading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 140,
                tip: false,
                searchShow: true,
                searchMenuSpan: 24,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                selection: true,
                searchIcon: true,
                align: 'center',
                searchIndex: 3,
                summaryText: "合计",
                showSummary: true,
                sumColumnList: [
                    {
                        name: 'profit20',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'profit40',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'profitHc',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'otherProfit',
                        type: 'sum',
                        decimals: 2
                    }
                ],
                column: [
                    {
                        label: "系统号",
                        prop: "businessNo",
                        width: "120",
                        search: true,
                        searchOrder: 1,
                        overHidden: true,
                    },
                    {
                        label: "起运港",
                        prop: "podCname",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 2,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?current=1&size=5&cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            desc: 'code',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "目的港",
                        prop: "destinationCname",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 3,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bports/list?current=1&size=5&cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            desc: 'code',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "承运人",
                        prop: "shippingCompanyCname",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 4,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bcorps/list?current=1&size=5&corpTypeName=船公司&cnName={{key}}",
                        props: {
                            label: 'shortName',
                            value: 'shortName',
                            desc: 'code',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "20利润",
                        prop: "profit20",
                        width: "70",
                        overHidden: true,
                    },
                    {
                        label: "40利润",
                        prop: "profit40",
                        width: "70",
                        overHidden: true,
                    },
                    {
                        label: "40HC利润",
                        prop: "profitHc",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "其他利润",
                        prop: "otherProfit",
                        width: "70",
                        overHidden: true,
                    },
                    {
                        label: "运输条款",
                        prop: "transportationTerms",
                        width: "80",
                        search: true,
                        searchOrder: 8,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bserviceterms/list?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                        overHidden: true,
                    },
                    {
                        label: "状态",
                        prop: "status",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "中转港",
                        prop: "transitPortCname",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "转船类型",
                        prop: "changeShipType",
                        width: "80",
                        overHidden: true,
                    },

                    {
                        label: "有效期起",
                        prop: "effectiveStartDate",
                        width: "100",
                        overHidden: true,
                        search: true,
                        searchOrder: 9,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        searchValue: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00",
                    },
                    {
                        label: "有效期止",
                        prop: "effectiveEndDate",
                        width: "100",
                        overHidden: true,
                        search: true,
                        searchOrder: 10,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 23:59:59",
                    },
                    {
                        label: "船名",
                        prop: "shipCname",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 6,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bvessels/list?current=1&size=5&cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            desc: 'code',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "航次",
                        prop: "voyage",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 7,
                    },
                    {
                        label: "航行天数",
                        prop: "navigateDay",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "航线",
                        prop: "airlineCname",
                        width: "80",
                        overHidden: true,
                        search: true,
                        searchOrder: 5,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/blines/list?cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                    },

                    {
                        label: "制单人",
                        prop: "createUserName",
                        width: "100",
                        overHidden: true,
                    },
                    {
                        label: "制单日期",
                        prop: "createTime",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "修改人",
                        prop: "updateUserName",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "修改日期",
                        prop: "updateTime",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        width: "100",
                        overHidden: true
                    },
                    {
                        label: "排序方式",
                        prop: "sort",
                        width: "100",
                        overHidden: true,
                        hide: true,
                        showColumn: false,
                        search: true,
                        searchOrder: 11,
                        searchSpan: 12,
                        searchValue: 0,
                    }
                ]
            },
            data: [],
            pageIds: []
        };
    },
    components: {
        detailsPage,
        dicSelect
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(446), this.optionBack);
    },
    activated() {
        setTimeout(() => {
            if (this.$route.query.home) {
                this.addButton();
            }
        }, 100);
    },
    methods: {
        dicChange(name, row) {
            if (name == 'curCode') {
                if (row) {
                    console.log(row)
                    this.copyForm.exrate = row.exrateReceivable
                } else {
                    this.copyForm.exrate = null
                }
            }
        },
        allClick(name) {
            if (name == '批量复制') {
                this.copyForm = this.$options.data().copyForm;
                this.copyDia = true
            }
            if (name == '确认复制') {
                this.$refs["copy"].validate((valid, done) => {
                    done();
                    if (valid) {
                        let ids = []
                        for (let item of this.selectionList) {
                            ids.push(item.id)
                        }
                        let obj = {
                            ids: ids.join(','),
                            ...this.copyForm,
                            type: 'SOC',
                        }
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        batchCopy(obj).then(res => {
                            this.$message.success("操作成功");
                            this.copyDia = false
                            this.onLoad(this.page, this.query);
                        }).finally(() => {
                            loading.close()
                        })

                    } else {
                        return false;
                    }
                });
            }
        },
        checkBills() {
            for (let item of this.selectionList) {
                if (item.status != '录入') {
                    return this.$message.error("单据已提交审核,请勿重复操作");
                }
            }
            let ids = []
            for (let item of this.selectionList) {
                ids.push(item.id)
            }
            let obj = {
                ids: ids.join(","),
                url: '/iosBasicData/costcenter/soc/index',
                pageStatus: "",
                pageLabel: "航线成本(SOC)",
            }
            this.$confirm('是否批量单据请核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                checkBillsBatch(obj).then(res => {
                    this.$message.success("操作成功!");
                    this.onLoad(this.page, this.query);
                }).finally(() => {
                    loading.close();
                })
            })
        },
        batchRevoke() {
            for (let item of this.selectionList) {
                if (item.status == '录入') {
                    return this.$message.error("单据未提交审核,请正确操作");
                }
            }
            let ids = []
            for (let item of this.selectionList) {
                ids.push(item.id)
            }
            let obj = {
                ids: ids.join(","),
            }
            this.$confirm('是否批量单据请核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                batchRevoke(obj).then(res => {
                    this.$message.success("操作成功!");
                    this.onLoad(this.page, this.query);
                }).finally(() => {
                    loading.close();
                })
            })

        },
        swap() {
            let obj = this.deepClone(this.query)
            this.query.podCname = obj.destinationCname
            this.query.destinationCname = obj.podCname
        },
        addButton() {
            this.pageIds = []
            this.isShow = false
            this.detailData = {
                type: 'new'
            }
        },
        copyButton() {
            this.isShow = false
            this.detailData = {
                copyId: this.selectionList[0].id
            };
        },
        rowEdit(row) {
            this.pageIds = []
            this.data.forEach(item => {
                this.pageIds.push(item.id)
            })
            this.detailData = {
                id: row.id
            };
            this.isShow = false
        },
        // 删除
        rowDel(row, index) {
            if (row.item == 1) {
                return this.$message.error("存在明细不允许删除");
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                remove({ ids: row.id }).then(res => {
                    this.onLoad(this.page, this.query);
                    this.$message.success("成功删除");
                })
            })

        },
        searchReset() {
            this.query = this.$options.data().query;
            this.onLoad(this.page);
        },
        // 搜索按钮点击
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query),
            }
            this.loading = true;
            getList(page.currentPage, page.pageSize, obj).then(res => {
                this.data = res.data.data.records;
                this.page.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
            }).finally(() => {
                this.loading = false;
            })
        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            this.pageIds = []
            if (JSON.stringify(this.$route.query) != "{}") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                    path: "/iosBasicData/costcenter/soc/index"
                });
            }
            this.detailData = {}
            this.isShow = true;
            this.onLoad(this.page, this.query);
        },
        outExport() {
            let config = { params: { ...this.query } }
            if (config.params) {
                for (const propName of Object.keys(config.params)) {
                    const value = config.params[propName];
                    if (value !== null && typeof (value) !== "undefined") {
                        if (value instanceof Array) {
                            for (const key of Object.keys(value)) {
                                let params = propName + '[' + key + ']';
                                config.params[params] = value[key]
                            }
                            delete config.params[propName]
                        }
                    }
                }
            }
            const routeData = this.$router.resolve({
                path: '/api/blade-los/routecost/exportRouteCost',      //跳转目标窗口的地址
                query: {
                    ...config.params,    //括号内是要传递给新窗口的参数
                    identification: this.url
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        //自定义列保存
        async saveColumn(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;
                this.selectionList = []
                this.searchReset()
                this.$nextTick(() => {
                    this.$refs.crud.refreshTable();
                    this.$refs.crud.dicInit();
                });
            }
        },
        //自定义列重置
        async resetColumn(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;
                this.selectionList = []
                this.searchReset()
                this.$nextTick(() => {
                    this.$refs.crud.refreshTable();
                    this.$refs.crud.dicInit();
                });
            }
        },
        // 更改表格颜色
        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 lang="scss" 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;
}

.pointerClick {
    cursor: pointer;
    color: #1e9fff;
}

::v-deep .el-col-md-8 {
    width: 24.33333%;
}
</style>