Smart_platform_ui/src/views/financialManagementF/agreementprice/agreementpriceitems.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 :label="item.label" :prop="item.prop" :rules="item.rules">
                                <div v-if="item.prop == 'corpCnName'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="corpData"
                                                  title="客户"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :selectValue="form.corpCnName"
                                                  :disabled="item.disabled || detailData.seeDisabled"
                                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                  @remoteMethod="getBcorpsListfun" @corpChange="corpCorpChange" >
                                        <bcorps></bcorps>
                                    </search-query>
                                </div>
                                <el-date-picker
                                    v-else-if="item.type === 'date'"
                                    v-model="form[item.prop]"
                                    type="date"
                                    size="small"
                                    value-format="yyyy-MM-dd"
                                    :disabled="item.disabled || detailData.seeDisabled"
                                    placeholder="选择日期">
                                </el-date-picker>
                                <el-select v-else-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="agreementPricepingCompanyAdd">新增数据
                    </el-button>
                </div>
                <el-table
                    stripe
                    :data="form.agreementPriceItemsList"
                    id="out-table"
                    :header-cell-class-name="headerClassName"
                    style="width: 100%">
                    <el-table-column
                        prop="carrierCnName"
                        label="船公司中文名称">
                    </el-table-column>
                    <el-table-column
                        prop="carrierEnName"
                        label="船公司英文名称">
                    </el-table-column>
                    <el-table-column
                        prop="accountPeriodDays"
                        label="账期天数">
                    </el-table-column>
                    <el-table-column
                        prop="settlementPeriodType"
                        label="结算周期类型">
                    </el-table-column>
                    <el-table-column
                        prop="settlementPeriodName"
                        label="结算周期名称">
                    </el-table-column>
                    <el-table-column
                        prop="settlementPeriodDescr"
                        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="agreementPriceCompanyEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                size="small"
                                type="text"
                                :disabled="detailData.seeDisabled"
                                @click="agreementPriceCompanyDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </basic-container>
        </div>


        <!--协议详细添加弹窗-->
        <el-dialog
            title="协议详细"
            :visible.sync="agreementPriceVisible"
            width="60%"
            append-to-body
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :before-close="agreementPriceClose">
            <div>
                <el-form :model="agreementPriceForm" ref="agreementPriceForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col v-for="(item, index) in agreementPriceData.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">
                                <div v-if="item.prop == 'carrierCnName'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="carrierData"
                                                  :selectValue="agreementPriceForm[item.prop]"
                                                  title="船公司"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :disabled="item.disabled"
                                                  :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                  @remoteMethod="getBcorpsListCarrierfun" @corpChange="carrierCorpChange" >
                                        <bcorps></bcorps>
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'settlementPeriodType'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="settlementPeriodData"
                                                  :selectValue="agreementPriceForm[item.prop]"
                                                  title="结算周期"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :disabled="item.disabled"
                                                  :forParameter="{key:'id',label:'balanceCycleType',value:'balanceCycleType'}"
                                                  @remoteMethod="balancecycleListfun" @corpChange="settlementPeriodCorpChange" >
                                        <balancecycle></balancecycle>
                                    </search-query>
                                </div>
                                <el-input type="textarea" v-else-if="item.type === 'textarea'" v-model.trim="agreementPriceForm[item.prop]" size="small"
                                          autocomplete="off" :disabled="item.disabled" :placeholder="'请输入' + item.label"></el-input>
                                <el-input v-else type="age" style="width: 100%;" v-model.trim="agreementPriceForm[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="agreementPriceVisible = false;">取 消</el-button>
                    <el-button type="primary" @click="agreementPricecompanyConfirm">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import {agreementpriceDetail, agreementpriceSubmit} from "@/api/iosBasicData/agreementprice";
import {bfeesList} from "@/api/iosBasicData/bfees";
import {getBcorpsList} from "@/api/iosBasicData/bcorps";
import { getRateList } from "@/api/iosBasicData/rateManagement";
import {bbusinesstypeList} from "@/api/iosBasicData/bbusinesstype";
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 balancecycle from "@/views/financialManagementF/balancecycle/index.vue";
import {getWorkDicts} from "@/api/system/dictbiz";
import {balancecycleList} from "@/api/iosBasicData/balancecycle";


export default {
    components: {SearchQuery,bcorps,bfeesdefine,bbusinesstype,balancecycle},
    props:{
        detailData: {
            type: Object
        }
    },

    data(){
        return {
            pageLoading:false,
            saveLoading:false,
            // 协议详细弹窗
            agreementPriceVisible:false,
            // 协议详细弹窗绑定的数据
            agreementPriceForm:{},
            agreementPriceIndex:null,
            // 客户请求数据
            corpData:[],
            // 船公司请求到的数据
            carrierData:[],
            // 结算周期数据
            settlementPeriodData:[],
            // 获取到的数据
            form:{
                isShared:0,
                status:0,
                agreementPriceItemsList:[]
            },
            // 基础资料数据
            basicData:{
                column:[
                    {
                        label: "单据编码",
                        prop: "billNo",
                        rules: [{
                            required: true,
                            message: "请输入单位编码",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "单位编码",
                        prop: "agreementNo",
                        rules: [{
                            required: true,
                            message: "请输入单位编码",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "客户名称",
                        prop: "corpCnName",
                        rules: [{
                            required: true,
                            message: "请输入客户中文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "客户英文名称",
                        prop: "corpEnName",
                        disabled:true,
                        rules: [{
                            required: true,
                            message: "请输入客户英文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "授信等级",
                        prop: "creditLevel",
                        // 请输入授信等级,A=A级,B=B级,B+=B+级,B-=B-级,C=C级,D=黑名单
                        type:'select',
                        dicData:[]
                    },
                    {
                        label: "协议生效日期",
                        prop: "effectiveDate",
                        type: 'date'
                    },
                    {
                        label: "协议失效日期",
                        prop: "expiringDate",
                        type: 'date'
                    },
                    {
                        label: "人民币协议金额",
                        prop: "amountCny",

                    },
                    {
                        label: "美元协议金额",
                        prop: "amountUsd",

                    },
                    {
                        label: "状态",
                        prop: "status",
                        type:'select',
                        dicData:[{
                            label:'启用',
                            value:0
                        },{
                            label:'停用',
                            value:1
                        }],
                    },

                    {
                        label: "账期备注",
                        prop: "accountPeriodRemarks",
                        span:24,
                        type: 'textarea',
                        width: "180",
                        slot: true,
                        minRows: 3,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span:24,
                        type: 'textarea',
                        minRows: 3,
                    },

                ]
            },
            // 费用详细数据
            agreementPriceData:{
                column:[
                    // {
                    //     label: "协议价管理主表id",
                    //     prop: "pid",
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入协议价管理主表id",
                    //         trigger: "blur"
                    //     }]
                    // },
                    // {
                    //     label: "船公司 Id",
                    //     prop: "carrierId",
                    // },
                    {
                        label: "船公司中文名称",
                        prop: "carrierCnName",
                    },
                    {
                        label: "船公司英文名称",
                        prop: "carrierEnName",
                        disabled:true,
                    },
                    {
                        label: "账期天数",
                        prop: "accountPeriodDays",

                    },
                    {
                        label: "结算周期类型",
                        prop: "settlementPeriodType",
                    },
                    {
                        label: "结算周期名称",
                        prop: "settlementPeriodName",
                        disabled:true,
                    },
                    {
                        label: "结算周期描述",
                        prop: "settlementPeriodDescr",
                        // disabled:true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span:24,
                        type: 'textarea',
                        minRows: 3,
                    },
                ]
            },
        }
    },
    created() {
        this.getBcorpsListfun()
        this.getBcorpsListCarrierfun()
        this.balancecycleListfun()
        this.getWorkDictsfun()
    },
    methods:{
        // 查询字典
        getWorkDictsfun(){
            getWorkDicts('bcorps-credit-level').then((res) => {
                let arr = []
                for(let item of res.data.data) {
                    arr.push({
                        label:item.dictValue,
                        value:item.dictValue
                    })
                }
                for(let item of this.basicData.column) {
                    if (item.prop == 'creditLevel') {
                        item.dicData = arr
                    }
                }

            });
        },
        // 获取客户数据
        getBcorpsListfun(cnName){
            getBcorpsList(1,10,{cnName}).then(res=>{
                this.corpData = res.data.data.records
            })
        },
        // 获取船公司数据
        getBcorpsListCarrierfun(cnName){
            getBcorpsList(1,10,{corpTypeName:'船公司',cnName}).then(res=>{
                this.carrierData = res.data.data.records
            })
        },
        // 结算周期数据
        balancecycleListfun(cnName){
            balancecycleList(1,10,{cnName}).then(res=>{
                this.settlementPeriodData = res.data.data.records
            })
        },
        // 客户选择之后的回调
        corpCorpChange(value){
            for(let item of this.corpData) {
                if (item.cnName == value) {
                    this.$set(this.form,'corpId',item.id)
                    this.$set(this.form,'corpEnName',item.enName)
                    this.$set(this.form,'corpCnName',item.cnName)
                }
            }
        },
        // 船公司选择之后的回调
        carrierCorpChange(value){
            for(let item of this.carrierData) {
                if (item.cnName == value) {
                    this.$set(this.agreementPriceForm,'carrierId',item.id)
                    this.$set(this.agreementPriceForm,'carrierEnName',item.enName)
                    this.$set(this.agreementPriceForm,'carrierCnName',item.cnName)
                }
            }
        },
        // 结算周期类型
        settlementPeriodCorpChange(value) {
            for(let item of this.settlementPeriodData) {
                if (item.balanceCycleType == value) {
                    this.$set(this.agreementPriceForm,'settlementPeriodType',item.balanceCycleType)
                    this.$set(this.agreementPriceForm,'settlementPeriodName',item.balanceCycleName)
                    this.$set(this.agreementPriceForm,'settlementPeriodDescr',item.balanceCycleDescribe)
                }
            }
            console.log(value)
        },
        // 获取详情数据
        agreementpriceDetailfun(id){
            this.pageLoading = true
            agreementpriceDetail(id).then(res => {
                this.form = res.data.data;
                this.pageLoading = false
            });
        },
        // 编辑按钮更改状态
        editHandle(){
            this.$set(this.detailData,'seeDisabled',false)
            // this.detailData.seeDisabled = false;
        },
        // 保存按钮
        editCustomer(){
            this.$refs.form.validate((valid)=>{
                if (valid) {
                    this.saveLoading = true
                    this.agreementpriceSubmitfun()
                }else {
                    return false;
                }
            })
        },
        // 保存接口
        agreementpriceSubmitfun(){
            agreementpriceSubmit(this.form).then((res)=>{
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.saveLoading = false
                this.agreementpriceDetailfun(res.data.data.id)
                this.detailData.seeDisabled = true;
            })
        },

        // 费用详细添加
        agreementPricepingCompanyAdd(){
            this.agreementPriceVisible = true
            this.agreementPriceForm = {}
        },
        // 费用详细编辑
        agreementPriceCompanyEdit(index,row){
            this.agreementPriceForm = JSON.parse(JSON.stringify(row))
            this.agreementPriceIndex = index
            this.agreementPriceVisible = true
        },
        // 费用详细删除
        agreementPriceCompanyDelete(index,row){
            this.form.agreementPriceItemsList.splice(index,1)
        },
        // 费用详细确认
        agreementPricecompanyConfirm(){
            if (this.agreementPriceIndex != null) {
                this.form.agreementPriceItemsList.splice(this.agreementPriceIndex,1,this.agreementPriceForm)
            }else {
                if (!this.form.agreementPriceItemsList) {
                    this.form.agreementPriceItemsList = []
                }
                this.form.agreementPriceItemsList.push(this.agreementPriceForm)
            }
            this.agreementPriceForm = {}
            this.agreementPriceIndex = null
            this.agreementPriceVisible = false
        },
        // 费用详细关闭
        agreementPriceClose(done){
            done();
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => {});
        },
        //返回列表
        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>