yf-admin-ui/src/views/iosBasicData/losbfeestemplate/feesTemplateItems.vue

<!--费用模板详情-->
<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                    @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button size="small" type="primary" style="margin-right: 8px" v-if="basicData.disabled"
                    :loading="saveLoading" @click="editHandle">编 辑
                </el-button>
                <el-button size="small" type="primary" style="margin-right: 8px" v-else :loading="saveLoading"
                    @click="editCustomer">保 存
                </el-button>
            </div>
        </div>
        <div class="customer-main">
            <containerTitle title="基础信息"></containerTitle>
            <basic-container>
                <avue-form :option="basicData" v-model="form" ref="form">
                    <tempalte slot="shippingCompanyCname">
                        <dic-select v-model="form.shippingCompanyCname" placeholder="港口" key="id" label="cnName"
                            url="/blade-los/bcorps/listAll?status=0&corpTypeName=船公司" :filterable="true"
                            dataName="cnName" :multiple="true" :collapseTags="true" dataType="string"
                            :disabled="basicData.disabled" @selectChange="dicChange('shippingCompanyCname', $event)"
                            :multipleStrings="true"></dic-select>
                    </tempalte>
                    <tempalte slot="branchName">
                        <dic-select v-model="form.branchName" placeholder="所属公司" key="id" label="deptName"
                            url="/blade-system/dept/top-list" :filterable="true" :multiple="true" :collapseTags="true"
                            dataType="string" :disabled="basicData.disabled"
                            @selectChange="dicChange('branchName', $event)" :multipleStrings="true"></dic-select>
                    </tempalte>
                    <tempalte slot="addressCname">
                        <dic-select v-model="form.addressCname" placeholder="" key="id" label="cnName" res="records"
                            url="/blade-los/bports/list" :filterable="true" :remote="true" dataName="cnName"
                            @selectChange="dicChange('addressCname', $event)"
                            :disabled="basicData.disabled"></dic-select>
                    </tempalte>
                </avue-form>
            </basic-container>
        </div>

        <div class="customer-main margintop">
            <containerTitle title="费用详情"></containerTitle>
            <basic-container>
                <avue-crud :option="option" :data="form.feesTemplateItemsList" id="out-table" ref="crud"
                    :header-cell-class-name="headerClassName" :row-style="{ height: '20px', padding: '0px' }"
                    :cell-style="{ height: '20px', padding: '0px' }">
                    <template slot="indexHeader" slot-scope="{row,index}">
                        <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="basicData.disabled" circle
                            @click="feestemplatepingCompanyAdd()">
                        </el-button>
                    </template>
                    <template slot="index" slot-scope="{row,index}">
                        <span>{{ index + 1 }}</span>
                    </template>
                    <template slot="corpCnNameForm" slot-scope="{ row }">
                        <dic-select v-if="row.$cellEdit" v-model="row.corpCnName" label="cnName" res="records"
                            url="/blade-los/bcorps/selectList?status=0&current=1&size=20" :filterable="true"
                            :remote="true" dataName="cnName" :disabled="row.corpType"
                            @selectChange="rowDicChange('corpCnName', $event, row)"></dic-select>
                        <span v-else>{{ row.corpCnName }}</span>
                    </template>
                    <template slot="corpTypeForm" slot-scope="{row,index}">
                        <dic-select v-if="row.$cellEdit" v-model="row.corpType" label="cnName" res="records"
                            :disabled="row.corpCnName" url="/blade-los/bcorpstypedefine/list?status=0&current=1&size=20"
                            :filterable="true" :remote="true" dataName="cnName"
                            @selectChange="rowDicChange('corpType', $event, row)"></dic-select>
                        <span v-else>{{ row.corpType }}</span>
                    </template>
                    <template slot="feeCnNameForm" slot-scope="{ row }">
                        <dic-select v-if="row.$cellEdit" v-model="row.feeCnName" key="id" placeholder="费用名称"
                            label="cnName" res="records" url="/blade-los/bfees/list?status=0&current=1&size=20"
                            :filterable="true" :remote="true" dataName="cnName"
                            @selectChange="rowDicChange('feeCnName', $event, row)"></dic-select>
                        <span v-else>{{ row.feeCnName }}</span>
                    </template>
                    <template slot="quantityRuleForm" slot-scope="{row,index}">
                        <dic-select v-if="row.$cellEdit" v-model="row.quantityRule" key="id" label="dictValue"
                            url="/blade-system/dict-biz/dictionary?code=number_rule" :filterable="true"
                            @selectChange="rowDicChange('quantityRule', $event, row)"></dic-select>
                        <span v-else>{{ row.quantityRule }}</span>
                    </template>
                    <template slot="unitNoForm" slot-scope="{row,index}">
                        <dic-select v-if="row.$cellEdit" v-model="row.unitNo" key="id" label="cnName"
                            url="/blade-los/bunits/listAll" :filterable="true" :disabled="row.quantityRule == '按箱型'"
                            @selectChange="rowDicChange('unitNo', $event, row)"></dic-select>
                        <span v-else>{{ row.unitNo }}</span>
                    </template>
                    <template slot="quantityForm" slot-scope="{row,index}">
                        <el-input-number style="width: 100%;" v-if="row.$cellEdit" v-model="row.quantity"
                            :disabled="row.quantityRule == '按箱型'" :controls="false" size="small"></el-input-number>
                        <span v-else>{{ row.quantity }}</span>
                    </template>
                    <template slot="priceForm" slot-scope="{row,index}">
                        <el-input-number style="width: 100%;" v-if="row.$cellEdit" v-model="row.price"
                            :disabled="row.quantityRule == '按箱型'" :controls="false" size="small"></el-input-number>
                        <span v-else>{{ row.price }}</span>
                    </template>
                    <template slot="curCodeForm" slot-scope="{ row }">
                        <dic-select v-if="row.$cellEdit" :disabled="row.quantityRule == '按箱型'"  v-model="row.curCode" placeholder="币别" label="dictValue"
                            url="/blade-system/dict-biz/dictionary?code=currency"></dic-select>
                        <span v-else>{{ row.curCode }}</span>
                    </template>
                    <template slot="menu" slot-scope="{ row, index }">
                        <!-- <el-button type="text" size="small" :disabled="basicData.disabled"
                            @click="feestemplateCompanyEdit(index, row)">详情</el-button> -->
                        <el-button v-if="row.quantityRule == '按箱型'" type="text" size="small"
                            :disabled="basicData.disabled" @click="feestemplateCompanyEdit(index, row)">集装箱</el-button>
                        <el-button size="small" type="text" :disabled="basicData.disabled" @click="rowCell(row, index)">
                            {{ row.$cellEdit ? '保存' : '编辑' }}
                        </el-button>
                        <el-button size="small" type="text" :disabled="basicData.disabled"
                            @click="feestemplateCompanyDelete(index, row)">删除</el-button>
                        <el-button type="text" size="small" :disabled="basicData.disabled"
                            @click="copyItem(index, row)">复制</el-button>
                    </template>
                </avue-crud>
            </basic-container>
        </div>


        <!--费用详细添加弹窗-->
        <el-dialog title="费用详情" :visible.sync="feestemplateVisible" width="60%" append-to-body :destroy-on-close="true"
            :modal-append-to-body="false" :close-on-click-modal="false" :before-close="feestemplateClose">
            <div>
                <avue-crud :option="sonOption" :data="feestemplateForm.sonItemsList">
                    <template slot="indexHeader" slot-scope="{row,index}">
                        <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="basicData.disabled" circle
                            @click="addRow()">
                        </el-button>
                    </template>
                    <template slot="index" slot-scope="{row,index}">
                        <span>{{ index + 1 }}</span>
                    </template>
                    <template slot="typeForm" slot-scope="{row,index}">
                        <dic-select v-if="row.$cellEdit" v-model="row.type" key="id" label="dictValue"
                            url="/blade-system/dict-biz/dictionary?code=corp_type" :filterable="true"></dic-select>
                        <span v-else>{{ row.type }}</span>
                    </template>
                    <template slot="feeCnNameForm" slot-scope="{ row }">
                        <dic-select v-if="row.$cellEdit" v-model="row.feeCnName" key="id" placeholder="箱型"
                            label="cnName" res="records" url="/blade-los/bfees/list?status=0&current=1&size=20"
                            :filterable="true" :remote="true" dataName="cnName"
                            @selectChange="rowDicChange('feeCnName', $event, row)"></dic-select>
                        <span v-else>{{ row.feeCnName }}</span>
                    </template>
                    <template slot="unitNoForm" slot-scope="{row,index}">
                        <span>
                            <dic-select
                                v-if="row.$cellEdit && (feestemplateForm.quantityRule == '按箱型' || feestemplateForm.quantityRule == '按TEU')"
                                v-model="row.unitNo" key="id" label="cnName" res="records"
                                url="/blade-los/bcntrtypes/list?status=0&current=1&size=20" :filterable="true"
                                :remote="true" dataName="cnName"
                                @selectChange="rowDicChange('unitNo', $event, row)"></dic-select>
                            <dic-select
                                v-if="row.$cellEdit && !(feestemplateForm.quantityRule == '按箱型' || feestemplateForm.quantityRule == '按TEU')"
                                v-model="row.unitNo" key="id" label="cnName" res="records"
                                url="/blade-los/bunits/list?status=0&current=1&size=20" :filterable="true"
                                :remote="true" dataName="cnName"
                                @selectChange="rowDicChange('unitNo', $event, row)"></dic-select>
                            <span v-if="!row.$cellEdit">{{ row.unitNo }}</span>
                        </span>
                    </template>
                    <template slot="menu" slot-scope="{ row, index }">
                        <el-button size="small" type="text" :disabled="basicData.disabled" @click="rowEdit(row, index)">
                            {{ row.$cellEdit ? '保存' : '编辑' }}
                        </el-button>
                        <el-button type="text" size="small" :disabled="basicData.disabled"
                            @click="rowDel(index, row)">删除</el-button>
                    </template>
                </avue-crud>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="feestemplateVisible = false;">取 消</el-button>
                <el-button type="primary" @click="feestemplatecompanyConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { losbfeestemplateDetail, losbfeestemplateSubmit, copytemplateDetail, itemRemove, remove, getListAll } from "@/api/iosBasicData/losbfeestemplate";
import { bfeesList } from "@/api/iosBasicData/bfees";
import { getBcorpsList } from "@/api/iosBasicData/bcorps";
import { getRateList } from "@/api/iosBasicData/rateManagement";
import { getBunitsList } from "@/api/iosBasicData/bunits";
import SearchQuery from '@/components/iosbasic-data/searchquery.vue'
import bcorps from "@/views/iosBasicData/bcorps/index.vue";
import bfeesdefine from "@/views/iosBasicData/bfeesdefine/index.vue";
import bbusinesstype from "@/views/iosBasicData/bbusinesstype/index.vue";
import bunits from "@/views/iosBasicData/bunits/index.vue";
import { getWorkDicts } from "@/api/system/dictbiz";
import { bcntrtypesList } from "@/api/iosBasicData/bcntrtypes";
import dicSelect from "@/components/dicSelect/main";
export default {
    components: { SearchQuery, bcorps, bfeesdefine, bbusinesstype, bunits, dicSelect },
    props: {
        detailData: {
            type: Object
        }
    },

    data() {
        return {
            deptId: JSON.parse(localStorage.getItem('sysitemData')).deptId,
            unitNoListAll: [],
            sonOption: {
                calcHeight: 30,
                // tip: false,
                border: true,
                // addBtn: false,
                // viewBtn: false,
                editBtn: false,
                delBtn: false,
                // refreshBtn: false,
                // selection: true,
                header: false,
                align: 'center',
                menu: true,
                menuWidth: 100,
                column: [
                    {
                        label: "index",
                        prop: "index",
                        width: "55",
                        headerslot: true,
                    },
                    {
                        label: '计量单位',
                        prop: 'unitNo',
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                    },
                    {
                        label: '单价',
                        prop: 'salesPrice',
                        cell: true,
                        type: 'number',
                        controls: false,
                        overHidden: true,
                    },
                    //{
                    //  label: '成本价',
                    //  prop: 'costPrice',
                    //  cell: true,
                    //  type: 'number',
                    //  controls: false,
                    // overHidden: true,
                    //},
                    {
                        label: '币种',
                        prop: 'curCode',
                        overHidden: true,
                        cell: true,
                        type: 'select',
                        dicData: [{
                            label: 'CNY',
                            value: 'CNY'
                        }, {
                            label: 'USD',
                            value: 'USD'
                        }],
                    },

                ]
            },
            pageLoading: false,
            saveLoading: false,
            // 费用详细弹窗
            feestemplateVisible: false,
            // 费用详细弹窗绑定的数据
            feestemplateForm: {
                sonItemsList: []
            },
            feestemplateIndex: null,
            // 客户请求数据
            corpData: [],
            // 费用请求数据
            feeData: [],
            // 数量规则字典数据
            quantityRuleData: [],
            //客户类型
            corpTypeData: [],
            // 币别请求数据
            curCodeData: [],
            // 计算属性数据
            unitNoData: [],

            // 获取到的数据
            form: {
                isShared: '1',
                status: 0,
                feesTemplateItemsList: []
            },
            // 基础资料数据
            basicData: {
                menuBtn: false,
                span: 8,
                disabled: false,
                labelWidth: 100,
                column: [
                    {
                        label: "模版编号",
                        prop: "code",
                        disabled: false,
                        rules: [{
                            required: true,
                            message: "请输入模版编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "模版中文名称",
                        prop: "cnName",
                        disabled: false,
                        rules: [{
                            required: true,
                            message: "请输入模版中文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "模版英文名称",
                        prop: "enName",
                        disabled: false,
                        rules: [{
                            required: true,
                            message: "请输入模版英文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "船公司",
                        prop: "shippingCompanyCname",
                        disabled: false,
                        rules: [{
                            required: true,
                            message: "请输入模版英文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "所属公司",
                        prop: "branchName",
                        disabled: false,
                        rules: [{
                            required: true,
                            message: "请选择所属公司",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "POL",
                        prop: "addressCname",
                        disabled: false,
                    },
                    {
                        label: "运输条款",
                        prop: "transportationTerms",
                        disabled: false,
                        type: 'select',
                        filterable: true,
                        remote: true,
                        dicUrl: "/api/blade-los/bserviceterms/list?status=0&current=1&size=20&cnName={{key}}",
                        props: {
                            label: 'cnName',
                            value: 'cnName',
                            res: 'data.records'
                        },
                    },
                    {
                        label: "收/付",
                        prop: "dc",
                        disabled: false,
                        type: 'select',
                        dicData: [{
                            label: '收',
                            value: 'D'
                        }, {
                            label: '付',
                            value: 'C'
                        }],
                        rules: [{
                            required: true,
                            message: "请选择收/付",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "状态",
                        prop: "status",
                        disabled: false,
                        type: 'select',
                        dicData: [{
                            label: '启用',
                            value: 0
                        }, {
                            label: '停用',
                            value: 1
                        }],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        disabled: false,
                        span: 24,
                        type: 'textarea',
                        minRows: 3,
                    },

                ]
            },
            option: {
                // height: 'auto',
                calcHeight: 30,
                menuWidth: 200,
                border: true,
                header: false,
                editBtn: false,
                delBtn: false,
                align: 'center',
                menu: true,
                column: [
                    {
                        label: "index",
                        prop: "index",
                        width: "55",
                        headerslot: true,
                    },
                    {
                        label: "客户",
                        prop: "corpCnName",
                        width: "120",
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                    },
                    {
                        label: "客户类型",
                        prop: "corpType",
                        width: "120",
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                    },
                    {
                        label: "客户英文",
                        prop: "corpEnName",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        width: "120",
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                        rules: [{
                            required: true,
                            message: "请选择费用名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "费用编码",
                        prop: "feeCode",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "费用英文",
                        prop: "feeEnName",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "数量规则",
                        prop: "quantityRule",
                        width: "120",
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                        rules: [{
                            required: true,
                            message: "请选择数量规则",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        width: "80",
                        cell: true,
                        slot: true,
                        formslot: true,
                        // cell: true,
                        // type: 'number',
                        // controls: false,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入数量",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "单价",
                        prop: "price",
                        width: "80",
                        cell: true,
                        slot: true,
                        formslot: true,
                        // cell: true,
                        // type: 'number',
                        // controls: false,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入单价",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "计量单位",
                        prop: "unitNo",
                        width: "120",
                        overHidden: true,
                        cell: true,
                        slot: true,
                        formslot: true,
                        rules: [{
                            required: true,
                            message: "请选择计量单位",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        width: "100",
                        cell: true,
                        slot: true,
                        formslot: true,
                        // cell: true,
                        // type: 'select',
                        // dicData: [{
                        //     label: 'CNY',
                        //     value: 'CNY'
                        // }, {
                        //     label: 'USD',
                        //     value: 'USD'
                        // }],
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请选择币别",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        width: "120",
                        cell: true,
                        overHidden: true,
                    }
                ]
            },
            // 费用详细数据
            feestemplateData: {
                column: [
                    {
                        label: "客户类型",
                        prop: "corpType",
                    },
                    {
                        label: "客户",
                        prop: "corpCnName",
                        // rules: [{
                        //     required: true,
                        //     message: "",
                        //     trigger: "blur"
                        // }]
                    },
                    {
                        label: "费用",
                        prop: "feeCnName",
                        rules: [{
                            required: true,
                            message: "",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "费用编码",
                        prop: "feeCode",
                        disabled: true,
                    },
                    // {
                    //     label: "费用中文名称",
                    //     prop: "feeCnName",
                    //     disabled:true,
                    // },
                    {
                        label: "费用英文名称",
                        prop: "feeEnName",
                        disabled: true,
                    },
                    {
                        label: "数量规则",
                        prop: "quantityRule",
                        rules: [{
                            required: true,
                            message: "请输入数量规则，用于根据单位自动计算数量",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        rules: [{
                            required: true,
                            // message: "请输入数量",
                            trigger: "blur"
                        }, {
                            pattern: /-?[1-9]\d*/,
                            // message:"请输入数字",
                            trigger: 'blur'
                        }]
                    },
                    {
                        label: "单价",
                        prop: "price",
                        rules: [{
                            required: true,
                            // message: "请输入单价",
                            trigger: "blur"
                        }, {
                            // pattern:/[1-9]\d*.\d*|0\.\d*[1-9]\d*/,
                            pattern: /-?[1-9]\d*/,
                            // message:"请输入数字",
                            trigger: 'blur'
                        }]
                    },
                    {
                        label: "计量单位",
                        prop: "unitNo",
                        rules: [{
                            required: true,
                            // message: "请输入计量单位",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        rules: [{
                            required: true,
                            // message: "请输入币别",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                        type: 'textarea',
                        minRows: 3,
                    },
                ]
            },
        }
    },
    created() {
        if (this.detailData.businessTypeId) {
            this.form = {
                status: 0,
                businessTypeId: this.detailData.businessTypeId,
                businessTypeCnName: this.detailData.businessTypeCnName,
                businessTypeEnName: this.detailData.businessTypeEnName,
                businessTypeCode: this.detailData.businessTypeCode
            }
            if (this.detailData.businessTypeCnName == '成本中心模板（POL）' || this.detailData.businessTypeCnName == '账单模版（POL）') {
                this.basicData.column.forEach(item => {
                    if (item.prop == 'addressCname') {
                        item.label = 'POL'
                    }
                })
            } else if (this.detailData.businessTypeCnName == '账单模板（POD）') {
                this.basicData.column.forEach(item => {
                    if (item.prop == 'addressCname') {
                        item.label = 'POD'
                    }
                })
            } else if (this.detailData.businessTypeCnName == '航线成本(SOC)') {
                this.basicData.column.forEach(item => {
                    if (item.prop == 'addressCname') {
                        item.label = 'SOC'
                    }
                })
            } else if (this.detailData.businessTypeCnName == '成本中心模板（POD）') {
                this.basicData.column.forEach(item => {
                    if (item.prop == 'addressCname') {
                        item.label = 'POD'
                    }
                })
            } else if (this.detailData.businessTypeCnName == '航线成本(COC)') {
                this.basicData.column.forEach(item => {
                    if (item.prop == 'addressCname') {
                        item.label = 'COC'
                    }
                })
            }
        }
        this.getBcorpsListfun()
        this.bfeesListfun()
        this.quantityRuleWorkDictsfun()
        this.getRateListfun()
        this.getBunitsListfun()
        this.getcorpTypeData()
        getListAll().then(res => {
            this.unitNoListAll = res.data.data
        })
        if (this.detailData.id) {
            this.basicData.disabled = true
            this.losbfeestemplateDetailfun(this.detailData.id)
        }
    },
    methods: {
        rowCell(row, index) {
            if (!row.feeCnName || !row.quantityRule || !row.quantity || !row.price || !row.unitNo || !row.curCode) {
                this.$refs.crud.rowCell(row, index)
                return this.$message.error("请完善明细信息");
            }
            if (row.$cellEdit == true) {
                this.$set(row, "$cellEdit", false);
            } else {
                this.$set(row, "$cellEdit", true);
            }
        },
        rowEdit(row) {
            if (row.$cellEdit == true) {
                this.$set(row, "$cellEdit", false);
            } else {
                this.$set(row, "$cellEdit", true);
            }
        },
        rowDicChange(name, row, el) {
            if (name == 'corpCnName') {
                if (row) {
                    el.corpId = row.id
                    el.corpEnName = row.enName
                } else {
                    el.corpId = null
                    el.corpEnName = null
                    el.corpCnName = null
                }
            }
            if (name == 'feeCnName') {
                if (row) {
                    el.feeId = row.id
                    el.feeCode = row.code
                    el.feeEnName = row.enName
                } else {
                    el.feeId = null
                    el.feeCode = null
                    el.feeCnName = null
                    el.feeEnName = null
                }
            }
            if (name == 'unitNo') {
                if (row) {
                    el.unitId = row.id
                } else {
                    el.unitId = null
                    el.unitNo = null
                }
            }
            if (name == 'corpType') {
                if (!row) {
                    el.corpType = null
                }
            }
            // if (name == 'quantityRule') {
            //     if (row) {
            //         console.log(row,)
            //         for (let item of this.unitNoListAll) {
            //             if (item.cnName == '箱量') {
            //                 el.unitId = item.id
            //                 el.unitNo = item.cnName
            //             }
            //         }

            //     } else {
            //         el.unitId = null
            //         el.unitNo = null
            //     }
            // }
        },
        dicChange(name, row) {
            if (name == 'shippingCompanyCname') {
                console.log(row)
                let codes = []
                // let namePrints=[]
                for (let item of row.multipleData) {
                    codes.push(item.code)
                }
                if (row) {
                    this.form.shippingCompanyId = row.ids
                    this.form.shippingCompanyCname = row.names
                    this.form.shippingCompanyCode = codes.join(',');
                } else {
                    this.form.shippingCompanyId = null
                    this.form.shippingCompanyCode = null
                    this.form.shippingCompanyCname = null
                }
            }
            if (name == 'addressCname') {
                if (row) {
                    this.form.addressId = row.id
                    this.form.addressCode = row.code
                } else {
                    this.form.podId = null
                    this.form.addressCode = null
                    this.form.addressCname = null
                }
            }
            if (name == 'branchName') {
                if (row) {
                    this.form.branchId = row.ids
                    this.form.branchName = row.names
                } else {
                    this.form.branchId = null
                    this.form.branchName = null
                }
            }
        },
        addRow() {
            this.feestemplateForm.sonItemsList.push({
                pid: this.form.id,
                type: this.feestemplateForm.corpType,
                feeId: this.feestemplateForm.feeId,
                feeCode: this.feestemplateForm.feeCode,
                feeCnName: this.feestemplateForm.feeCnName,
                feeEnName: this.feestemplateForm.feeEnName,
                curCode: this.feestemplateForm.curCode,
                salesPrice: 0,
                costPrice: 0,
                $cellEdit: true
            })
        },
        copyItem(index, row) {
            let item = this.deepClone(row)
            item.id = null;
            // item.pid = null;
            // this.feestemplateForm = item
            // this.feestemplateVisible = true
            this.form.feesTemplateItemsList.push(item)
        },
        getCopyTemplate(id) {
            this.pageLoading = true
            copytemplateDetail(id).then(res => {
                this.form = res.data.data;
                this.pageLoading = false
                this.editHandle()
            })
        },
        // 获取客户数据
        getBcorpsListfun(cnName) {
            getBcorpsList(1, 10, { cnName }).then(res => {
                this.corpData = res.data.data.records
            })
        },
        bfeesListfun(cnName) {
            bfeesList(1, 10, { cnName }).then(res => {
                this.feeData = res.data.data.records
            })
        },
        getcorpTypeData() {
            getWorkDicts('corp_type').then(res => {
                this.corpTypeData = res.data.data
            })
        },
        // 获取数量规则字典数据
        quantityRuleWorkDictsfun() {
            getWorkDicts('number_rule').then(res => {
                this.quantityRuleData = res.data.data
            })
        },
        // 获取币别数据
        getRateListfun(cnName) {
            getRateList({
                current: 1,
                size: 10,
                cnName
            }).then(res => {
                this.curCodeData = res.data.data.records
            })
        },
        // 获取计算属性
        getBunitsListfun(code) {
            if (this.feestemplateForm.quantityRule == 1 || this.feestemplateForm.quantityRule == 4) {
                bcntrtypesList(1, 10, { code, status: 0 }).then(res => {
                    this.unitNoData = res.data.data.records
                })
            } else {
                getBunitsList(1, 10, { code, status: 0 }).then(res => {
                    this.unitNoData = res.data.data.records
                })
            }

        },
        // 客户选择之后的回调
        corpCorpChange(value) {
            if (value) {
                for (let item of this.corpData) {
                    if (item.cnName == value) {
                        this.$set(this.feestemplateForm, 'corpId', item.id)
                        this.$set(this.feestemplateForm, 'corpEnName', item.enName)
                        this.$set(this.feestemplateForm, 'corpCnName', item.cnName)
                    }

                }
            } else {
                this.$set(this.feestemplateForm, 'corpId', null)
                this.$set(this.feestemplateForm, 'corpEnName', null)
                this.$set(this.feestemplateForm, 'corpCnName', null)
            }
        },
        // 费用选择之后的回调
        feeCorpChange(value) {
            for (let item of this.feeData) {
                if (item.id == value) {
                    this.$set(this.feestemplateForm, 'feeId', item.id)
                    this.$set(this.feestemplateForm, 'feeCode', item.code)
                    this.$set(this.feestemplateForm, 'feeEnName', item.enName)
                    this.$set(this.feestemplateForm, 'feeCnName', item.cnName)
                    // 核算要素
                    this.$set(this.feestemplateForm, 'elementsId', item.accElementId)
                    this.$set(this.feestemplateForm, 'elementsCnName', item.accElementName)
                    this.$set(this.feestemplateForm, 'elementsCode', item.elementsCode)
                    this.$set(this.feestemplateForm, 'elementsEnName', item.elementsEnName)

                }
            }
        },
        corpTypeChange(value) {
            if (value) {
                this.$set(this.feestemplateForm, 'corpType', value)
            } else {
                this.$set(this.feestemplateForm, 'corpType', null)
            }
        },
        // 数量规则下拉回调
        quantityRuleChange(value) {
            console.log(value)
            if (value == 1 || value == 4) {
                bcntrtypesList(1, 10, { status: 0 }).then(res => {
                    this.unitNoData = res.data.data.records
                })
            } else {
                getBunitsList(1, 10, { status: 0 }).then(res => {
                    this.unitNoData = res.data.data.records
                })
            }
            this.$set(this.feestemplateForm, 'quantityRule', value)
            this.$set(this.feestemplateForm, 'unitNo', '')
        },
        // 币别选择之后的回调
        curCodeCorpChange(value) {
            this.$set(this.feestemplateForm, 'curCode', value)
        },
        // 计算属性选择之后
        unitNoCorpChange(value) {
            for (let item of this.unitNoData) {
                if (item.code == value) {
                    this.$set(this.feestemplateForm, 'unitId', item.id)
                    this.$set(this.feestemplateForm, 'unitNo', item.code)
                }
            }
        },
        // 查找弹窗里选择导出
        eldialogConfirm(name) {
            console.log(name)
            if (name == 'corpCnName') {
                if (this.$refs.bcorps[0].isShow) {
                    console.log('列表确认')
                    this.$set(this.feestemplateForm, 'corpId', this.$refs.bcorps[0].selectionList[0].id)
                    this.$set(this.feestemplateForm, 'corpEnName', this.$refs.bcorps[0].selectionList[0].enName)
                    this.$set(this.feestemplateForm, 'corpCnName', this.$refs.bcorps[0].selectionList[0].cnName)
                } else {
                    console.log('详情确认')
                    this.$refs.bcorps[0].$refs.detail.submitForm()
                    this.$set(this.feestemplateForm, 'corpCnName', this.$refs.bcorps[0].$refs.detail.formData.cnName)
                    this.$set(this.feestemplateForm, 'corpEnName', this.$refs.bcorps[0].$refs.detail.formData.enName)
                    this.$set(this.feestemplateForm, 'corpId', this.$refs.bcorps[0].$refs.detail.formData.id)
                }
                this.$refs.SearchCorp[0].corpVisible = false
            } else if (name == 'feeCnName') {
                this.$set(this.feestemplateForm, 'feeId', this.$refs.bfeesdefine[0].selectionList[0].id)
                this.$set(this.feestemplateForm, 'feeCode', this.$refs.bfeesdefine[0].selectionList[0].code)
                this.$set(this.feestemplateForm, 'feeEnName', this.$refs.bfeesdefine[0].selectionList[0].enName)
                this.$set(this.feestemplateForm, 'feeCnName', this.$refs.bfeesdefine[0].selectionList[0].cnName)
                // 核算要素
                this.$set(this.feestemplateForm, 'elementsId', this.$refs.bfeesdefine[0].selectionList[0].accElementId)
                this.$set(this.feestemplateForm, 'elementsCnName', this.$refs.bfeesdefine[0].selectionList[0].accElementName)
                this.$set(this.feestemplateForm, 'elementsCode', this.$refs.bfeesdefine[0].selectionList[0].elementsCode)
                this.$set(this.feestemplateForm, 'elementsEnName', this.$refs.bfeesdefine[0].selectionList[0].elementsEnName)
                this.$refs.SearchFee[0].corpVisible = false
            } else if (name == 'unitNo') {
                this.$set(this.feestemplateForm, 'unitId', this.$refs.bunits[0].selectionList[0].id)
                this.$set(this.feestemplateForm, 'unitNo', this.$refs.bunits[0].selectionList[0].code)
                this.$refs.SearchUnitNo[0].corpVisible = false
            }
        },
        // 下拉多选弹窗数据多选回调
        eldialogMultipleChoice(list, name) {
            console.log(list, name)
            let arr = []
            if (list.length > 1) {
                this.$refs[name][0].$refs.crud.toggleSelection() // 先清空所以选择的数据
                arr = [list[list.length - 1]] // 获取最新点击的数组
                this.$refs[name][0].$refs.crud.toggleSelection(arr, true) // 把刚点击的数组变成选择状态
            } else {
                arr = list
            }
            this.$refs[name][0].selectionList = arr
        },
        // 获取详情数据
        losbfeestemplateDetailfun(id) {
            this.pageLoading = true
            losbfeestemplateDetail(id).then(res => {
                if (res.data.data.businessTypeCnName == '成本中心模板（POL）' || res.data.data.businessTypeCnName == '账单模版（POL）') {
                    this.basicData.column.forEach(item => {
                        if (item.prop == 'addressCname') {
                            item.label = 'POL'
                        }
                    })
                } else if (res.data.data.businessTypeCnName == '账单模板（POD）') {
                    this.basicData.column.forEach(item => {
                        if (item.prop == 'addressCname') {
                            item.label = 'POD'
                        }
                    })
                } else if (res.data.data.businessTypeCnName == '航线成本(SOC)') {
                    this.basicData.column.forEach(item => {
                        if (item.prop == 'addressCname') {
                            item.label = 'SOC'
                        }
                    })
                } else if (res.data.data.businessTypeCnName == '成本中心模板（POD）') {
                    this.basicData.column.forEach(item => {
                        if (item.prop == 'addressCname') {
                            item.label = 'POD'
                        }
                    })
                } else if (res.data.data.businessTypeCnName == '航线成本(COC)') {
                    this.basicData.column.forEach(item => {
                        if (item.prop == 'addressCname') {
                            item.label = 'COC'
                        }
                    })
                }
                res.data.data.feesTemplateItemsList.forEach(item => {
                    item.corpCnName = item.corpCnName ? item.corpCnName : null
                    item.corpType = item.corpType ? item.corpType : null
                })
                this.form = res.data.data;
            }).finally(() => {
                this.pageLoading = false
            })
        },
        // 编辑按钮更改状态
        editHandle() {
            this.basicData.disabled = false;
        },
        // 保存按钮
        editCustomer() {
            this.$refs["form"].validate((valid, done) => {
                done();
                if (valid) {
                    this.losbfeestemplateSubmitfun()
                } else {
                    return false;
                }
            })
        },
        // 保存接口
        losbfeestemplateSubmitfun() {
            this.saveLoading = true
            losbfeestemplateSubmit(this.form).then((res) => {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.losbfeestemplateDetailfun(res.data.data.id)
                // this.basicData.disabled = true;
            }).finally(() => {
                this.saveLoading = false;
            })
        },

        // 费用详细添加
        feestemplatepingCompanyAdd() {
            if (!this.form.id) {
                this.$message({
                    type: "error",
                    message: "请保存数据!"
                });
                return
            }
            this.form.feesTemplateItemsList.push({
                quantity: 1,
                price: 1,
                quantityRule: '按箱型',
                curCode: 'CNY',
                unitNo: '20GP',
                sonItemsList: [],
                $cellEdit: true
            })
            // this.feestemplateForm = {
            //     quantity: 1,
            //     price: 1,
            //     curCode: 'CNY',
            //     unitNo: 'KGS',
            //     sonItemsList: []
            // }
            // this.feestemplateVisible = true
        },
        // 费用详细编辑
        feestemplateCompanyEdit(index, row) {
            if (!row.feeCnName || !row.quantityRule || !row.quantity || !row.price || !row.unitNo || !row.curCode) {
                this.$refs.crud.rowCell(row, index)
                return this.$message.error("请完善明细信息");
            }
            this.feestemplateForm = JSON.parse(JSON.stringify(row))
            this.feestemplateIndex = index
            this.feestemplateVisible = true
        },
        // 费用详细删除
        feestemplateCompanyDelete(index, row) {
            if (row.id) {
                itemRemove({ ids: row.id }).then(res => {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.form.feesTemplateItemsList.splice(index, 1)
                })
            } else {
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
                this.form.feesTemplateItemsList.splice(index, 1)
            }

        },
        // 费用详细删除
        rowDel(index, row) {
            if (row.id) {
                remove({ ids: row.id }).then(res => {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.feestemplateForm.sonItemsList.splice(index, 1)
                })
            } else {
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
                this.feestemplateForm.sonItemsList.splice(index, 1)
            }

        },
        // 费用详细确认
        feestemplatecompanyConfirm() {
            // if (!this.feestemplateForm.corpCnName && !this.feestemplateForm.corpType) {
            //     c
            //     return
            // }
            // this.$refs.feestemplateForm.validate((valid) => {
            //     if (valid) {
            //         if (this.feestemplateIndex != null) {
            //             this.form.feesTemplateItemsList.splice(this.feestemplateIndex, 1, this.feestemplateForm)
            //         } else {
            //             if (!this.form.feesTemplateItemsList) {
            //                 this.form.feesTemplateItemsList = []
            //             }
            //             this.form.feesTemplateItemsList.push(this.feestemplateForm)
            //         }
            //         this.feestemplateForm = {}
            //         this.feestemplateIndex = null
            //         this.feestemplateVisible = false
            //     }
            // })
            if (this.feestemplateIndex != null) {
                this.form.feesTemplateItemsList.splice(this.feestemplateIndex, 1, this.feestemplateForm)
            }
            this.feestemplateForm = {}
            this.feestemplateIndex = null
            this.feestemplateVisible = false
        },
        // 费用详细关闭
        feestemplateClose(done) {
            done();
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => {});
        },
        //返回列表
        backToList() {
            this.$emit('goBack')
        },
        // 表头样式
        tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
            return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff;textAlign:center"
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },
    }
}
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
}

.borderless {
    height: 100%;
    box-sizing: border-box
}

.customer-main {
    //margin-top: 20px;
    //width: calc(100% - 140px);
    margin-bottom: 15px;
}

.margintop {
    margin-top: 10px;
}

::v-deep.el-form-item {
    margin-bottom: 0;
}

.isShow {
    display: none;
}

.nowrapClass {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>