yf-admin-ui/src/views/iosBasicData/bports/portsTerms.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="detailData.seeDisabled"
                    :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">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
                <containerTitle title="基础资料"></containerTitle>
                <basic-container :showBtn="true">
                    <el-row>
                        <el-col v-for="(item, index) in basicData.column" :key="index" :span="item.span ? item.span : 8"
                            :class="{ isShow: item.display }">
                            <el-form-item v-if="item.prop == 'addressCname'" :label="item.label" :prop="item.prop"
                                :rules="item.rules">
                                <dic-select v-model="form.addressCname" placeholder="场站" label="cnName"
                                    url="/blade-los/bcorps/listAll?corpTypeName=场站" :filterable="true"
                                    :multiple="true" :collapseTags="true" dataType="string"
                                    @selectChange="dicChange('addressCname', $event)"
                                    :disabled="item.disabled || detailData.seeDisabled"></dic-select>
                            </el-form-item>
                            <el-form-item v-else :label="item.label" :prop="item.prop" :rules="item.rules">
                                <el-select v-if="item.type == 'select'" v-model="form[item.prop]"
                                    :placeholder="'请选择' + item.label" clearable filterable style="width: 100%"
                                    size="small" :disabled="item.disabled || detailData.seeDisabled">
                                    <el-option v-for="(ite, inde) in item.dicData" :key="inde" :label="ite.label"
                                        :value="ite.value"></el-option>
                                </el-select>
                                <el-input type="textarea" v-else-if="item.type === 'textarea'"
                                    v-model.trim="form[item.prop]" size="small" autocomplete="off"
                                    :disabled="item.disabled || detailData.seeDisabled"
                                    :placeholder="'请输入' + item.label"></el-input>
                                <el-input v-else type="age" style="width: 100%;" v-model.trim="form[item.prop]"
                                    size="small" autocomplete="off" :disabled="item.disabled || detailData.seeDisabled"
                                    clearable :placeholder="'请输入' + item.label"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </basic-container>
            </el-form>
        </div>

        <div class="customer-main margintop">
            <containerTitle title="船公司信息"></containerTitle>
            <basic-container>
                <div style="margin-bottom: 10px">
                    <el-button type="primary" size="small" :disabled="detailData.seeDisabled"
                        @click="shippingCompanyAdd">新增数据
                    </el-button>
                </div>
                <el-table stripe :data="form.bportsTermsList" id="out-table" :header-cell-class-name="headerClassName"
                    style="width: 100%">
                    <el-table-column prop="carrierName" label="船公司名称">
                    </el-table-column>
                    <el-table-column prop="serviceTermCode" label="服务条款">
                    </el-table-column>
                    <el-table-column prop="details" label="船公司特殊要求">
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" :disabled="detailData.seeDisabled"
                                @click="shipCompanyEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="text" :disabled="detailData.seeDisabled"
                                @click="shipCompanyDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </basic-container>
        </div>

        <div class="customer-main margintop">
            <containerTitle title="扩展数据"></containerTitle>
            <basic-container>
                <div style="margin-bottom: 10px">
                    <el-button type="primary" size="small" :disabled="detailData.seeDisabled"
                        @click="extendedDataAdd">新增数据
                    </el-button>
                </div>
                <el-table stripe :data="form.extendedDataArr" id="out-table" :header-cell-class-name="headerClassName"
                    style="width: 100%">
                    <el-table-column prop="name" label="名称">
                        <template slot-scope="{row}">
                            <el-input v-if="row.edit" size="small" v-model="row.name" placeholder="请输入名称"></el-input>
                            <span v-else>{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="value" label="键值">
                        <template slot-scope="{row}">
                            <el-input v-if="row.edit" size="small" v-model="row.value" placeholder="请输入键值"></el-input>
                            <span v-else>{{ row.value }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" :disabled="detailData.seeDisabled"
                                @click="extendedDataEdit(scope.$index, scope.row)">{{ scope.row.edit ? '保存' : '编辑'
                                }}</el-button>
                            <el-button size="small" type="text" :disabled="detailData.seeDisabled"
                                @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </basic-container>
        </div>

        <!--船公司添加弹窗-->
        <el-dialog title="船公司" :visible.sync="shipVisible" width="50%" append-to-body :destroy-on-close="true"
            :modal-append-to-body="false" :before-close="shipClose">
            <div>
                <el-form :model="shipForm" ref="shipForm" label-width="120px" class="demo-ruleForm">
                    <el-row>
                        <el-col v-for="(item, index) in shipData.column" :key="index" :span="item.span ? item.span : 12"
                            :class="{ isShow: item.display }">
                            <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                                <el-input type="textarea" v-if="item.type === 'textarea'"
                                    v-model.trim="shipForm[item.prop]" size="small" autocomplete="off"
                                    :disabled="item.disabled" :placeholder="'请输入' + item.label"></el-input>
                                <div v-else-if="item.prop == 'carrierName'">
                                    <search-query ref="SearchQuery" :datalist="corpData" title="船公司" :filterable="true"
                                        :clearable="true" :remote="true"
                                        :forParameter="{ key: 'id', label: 'cnName', value: 'id' }"
                                        @remoteMethod="getBcorpsListfun" @corpChange="corpCorpChange">
                                        <bcorps></bcorps>
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'serviceTermCode'">
                                    <search-query ref="SearchQuery" :datalist="serviceTermCodeData" title="服务条款"
                                        :filterable="true" :clearable="true" :remote="true"
                                        :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
                                        @remoteMethod="getBcorpsListfun" @corpChange="serviceTermCodeCorpChange">
                                        <bserviceterms></bserviceterms>
                                    </search-query>
                                </div>
                                <el-input v-else type="age" style="width: 100%;" v-model.trim="shipForm[item.prop]"
                                    size="small" autocomplete="off" :disabled="item.disabled" clearable
                                    :placeholder="'请输入' + item.label"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="shipVisible = false;">取 消</el-button>
                <el-button type="primary" @click="shipcompanyConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { bportsDetail, bportsSubmit } from "@/api/iosBasicData/bports";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import bcorps from "@/views/iosBasicData/bcorps/index.vue";
import bserviceterms from "@/views/iosBasicData/bserviceterms/index.vue";
import dicSelect from "@/components/dicSelect/main";
import { getBcorpsList } from "@/api/iosBasicData/bcorps";
import { getBservicetermsList } from "@/api/iosBasicData/bserviceterms";
export default {
    components: { bcorps, SearchQuery, bserviceterms, dicSelect },
    props: {
        detailData: {
            type: Object
        }
    },
    data() {
        return {
            pageLoading: false,
            saveLoading: false,
            // 船公司弹窗
            shipVisible: false,
            // 船公司弹窗绑定的数据
            shipForm: {},
            shipIndex: null,
            // 客户(船公司)数据
            corpData: [],
            // 服务条款
            serviceTermCodeData: [],

            // 获取到的数据
            form: {
                isSeaPort: 0,
                isAirPort: 0,
                isInlandPort: 0,
                status: 0,
                extendedDataArr: [],
                bportsTermsList: [],
            },
            // 基础资料数据
            basicData: {
                column: [
                    {
                        label: "港口编码",
                        prop: "code",
                        rules: [{
                            required: true,
                            message: "请输入港口编码",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "国际编码",
                        prop: "unCode",
                    },
                    {
                        label: "中文名称",
                        prop: "cnName",
                        rules: [{
                            required: true,
                            message: "请输入中文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "英文名称",
                        prop: "enName",
                        rules: [{
                            required: true,
                            message: "请输入英文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "国家代码",
                        prop: "cntyCode",
                    },
                    {
                        label: "国家名称",
                        prop: "cntyName",
                    },
                    {
                        label: "场站",
                        prop: "addressCname",
                        rules: [{
                            required: true,
                            message: "请选择场站",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "是否海港",
                        prop: "isSeaPort",
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },
                    {
                        label: "是否空港",
                        prop: "isAirPort",
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },
                    {
                        label: "是否内陆港",
                        prop: "isInlandPort",
                        width: 100,
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },
                    {
                        label: "状态",
                        prop: "status",
                        type: 'select',
                        dicData: [{
                            label: '启用',
                            value: 0
                        }, {
                            label: '停用',
                            value: 1
                        }],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                        type: 'textarea',
                        minRows: 3,
                    },

                ]
            },
            // 传公司数据
            shipData: {
                column: [
                    {
                        label: "船公司名称",
                        prop: "carrierName",
                        rules: [{
                            required: true,
                            message: "请输入传公司名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "服务条款",
                        prop: "serviceTermCode",
                        rules: [{
                            required: true,
                            message: "请输入服务条款",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "船公司特殊要求",
                        prop: "details",
                        // rules: [{
                        //     required: true,
                        //     message: "请输入船公司特殊要求",
                        //     trigger: "blur"
                        // }]
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                        type: 'textarea',
                        minRows: 3,
                    },
                ]
            },
        }
    },
    created() {
        this.getBcorpsListfun()
        this.getBservicetermsListfun()
    },
    methods: {
        dicChange(name, row) {
            if (name == 'addressCname') {
            console.log(row)
                if (row) {
                    this.form.addressId = row.ids
                    this.form.addressCname = row.names
                } else {
                    this.form.addressId = null
                    this.form.addressCname = null
                }
            }
        },
        // 获取客户(船公司)数据
        getBcorpsListfun(cnName) {
            getBcorpsList(1, 10, { cnName }).then(res => {
                this.corpData = res.data.data.records
            })
        },
        // 船公司选中的回调
        corpCorpChange(value) {
            for (let item of this.corpData) {
                if (item.id == value) {
                    this.$set(this.shipForm, 'carrierId', item.id)
                    this.$set(this.shipForm, 'carrierName', item.cnName)
                }
            }
        },
        // 服务条款请求的数据
        getBservicetermsListfun(cnName) {
            getBservicetermsList(1, 10, { cnName }).then(res => {
                this.serviceTermCodeData = res.data.data.records
            })
        },
        // 服务条款选择的回调
        serviceTermCodeCorpChange(value) {
            this.shipForm.serviceTermCode = value
        },
        // 获取详情数据
        bportsDetailfun(id) {
            this.pageLoading = true
            bportsDetail(id).then(res => {
                this.form = res.data.data;
                this.form.extendedDataArr.map(item => {
                    item.edit = false
                    return item
                })
                this.pageLoading = false
            });
        },
        // 编辑按钮更改状态
        editHandle() {
            this.detailData.seeDisabled = false;
        },
        // 保存按钮
        editCustomer() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 判断是否有id
                    // if (this.form.id) {
                    //     this.form.bportsTermsList.map(item=>{
                    //         item.pid = this.form.id
                    //     })
                    // }else {
                    // }
                    this.saveLoading = true
                    this.bportsSubmitfun()
                } else {
                    return false;
                }
            })
        },
        // 保存接口
        bportsSubmitfun() {
            this.form.extendedData = JSON.stringify(this.form.extendedDataArr)
            bportsSubmit(this.form).then((res) => {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.saveLoading = false
                this.bportsDetailfun(res.data.data.id)
                this.detailData.seeDisabled = true;
            })
        },
        // 船公司添加
        shippingCompanyAdd() {
            this.shipVisible = true
        },
        // 船公司编辑
        shipCompanyEdit(index, row) {
            this.shipForm = JSON.parse(JSON.stringify(row))
            this.shipIndex = index
            this.shipVisible = true
        },
        // 船公司删除
        shipCompanyDelete(index, row) {
            this.form.bportsTermsList.splice(index, 1)
        },
        // 船公司确认
        shipcompanyConfirm() {
            if (this.shipIndex != null) {
                this.form.bportsTermsList.splice(this.shipIndex, 1, this.shipForm)
            } else {
                this.form.bportsTermsList.push(this.shipForm)
            }
            this.shipForm = {}
            this.shipIndex = null
            this.shipVisible = false
        },
        // 船公司关闭
        shipClose(done) {
            done();
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => {});
        },
        // 扩展数据添加
        extendedDataAdd() {
            this.form.extendedDataArr.map(item => {
                item.edit = false
            })
            this.form.extendedDataArr.push({
                edit: true
            })
        },
        // 扩展数据编辑
        extendedDataEdit(index, row) {
            if (row.edit) {
                this.$delete(row, 'edit')
                this.$set(row, 'edit', false)
            } else {
                this.$delete(row, 'edit')
                this.$set(row, 'edit', true)
            }
        },
        // 扩展数据删除
        extendedDataDelete(index, row) {
            this.form.extendedDataArr.splice(index, 1)
        },
        //返回列表
        backToList() {
            this.$emit('goBack')
        },
        // 更改表格颜色
        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;
}
</style>