协议详情10.12

src/views/financialManagementF/agreementprice/agreementpriceitems.vue

@@ -0,0 +1,496 @@
+<!--协议详情-->
+<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"
+                                                  :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"
+                                    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="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 == 'corpId'">
+                                    <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>
+
+                                <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 {getWorkDicts} from "@/api/system/dictbiz";
+
+
+export default {
+    components: {SearchQuery,bcorps,bfeesdefine,bbusinesstype},
+    props:{
+        detailData: {
+            type: Object
+        }
+    },
+
+    data(){
+        return {
+            pageLoading:false,
+            saveLoading:false,
+            // 协议详细弹窗
+            agreementPriceVisible:false,
+            // 协议详细弹窗绑定的数据
+            agreementPriceForm:{},
+            agreementPriceIndex:null,
+            // 客户请求数据
+            corpData:[],
+            // 获取到的数据
+            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",
+                    },
+                    {
+                        label: "账期天数",
+                        prop: "accountPeriodDays",
+                    },
+                    {
+                        label: "结算周期类型",
+                        prop: "settlementPeriodType",
+                    },
+                    {
+                        label: "结算周期名称",
+                        prop: "settlementPeriodName",
+                    },
+                    {
+                        label: "结算周期描述",
+                        prop: "settlementPeriodDescr",
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        span:24,
+                        type: 'textarea',
+                        minRows: 3,
+                    },
+                ]
+            },
+        }
+    },
+    created() {
+        this.getBcorpsListfun()
+        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
+            })
+        },
+        // 客户选择之后的回调
+        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)
+                }
+            }
+        },
+        // 获取详情数据
+        agreementpriceDetailfun(id){
+            this.pageLoading = true
+            agreementpriceDetail(id).then(res => {
+                this.form = res.data.data;
+                this.pageLoading = false
+            });
+        },
+        // 编辑按钮更改状态
+        editHandle(){
+            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
+        },
+        // 费用详细编辑
+        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){
+            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>

src/views/financialManagementF/agreementprice/index.vue

@@ -1,47 +1,62 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               id="out-table"
-               :header-cell-class-name="headerClassName"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 307)"
-               @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 307)"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.agreementprice_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-    </avue-crud>
-  </basic-container>
+    <div>
+        <basic-container v-if="isShow">
+            <avue-crud :option="option"
+                       :table-loading="loading"
+                       :data="data"
+                       :page.sync="page"
+                       :permission="permissionList"
+                       id="out-table"
+                       :header-cell-class-name="headerClassName"
+                       :before-open="beforeOpen"
+                       v-model="form"
+                       ref="crud"
+                       @row-update="rowUpdate"
+                       @row-save="rowSave"
+                       @row-del="rowDel"
+                       @search-change="searchChange"
+                       @search-reset="searchReset"
+                       @selection-change="selectionChange"
+                       @current-change="currentChange"
+                       @size-change="sizeChange"
+                       @refresh-change="refreshChange"
+                       @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 307)"
+                       @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 307)"
+                       @on-load="onLoad">
+                <template slot="menuLeft">
+                    <el-button type="primary"
+                               size="small"
+                               icon="el-icon-plus"
+                               @click="addbtnfun()">新建费用模板
+                    </el-button>
+                    <el-button type="danger"
+                               size="small"
+                               icon="el-icon-delete"
+                               plain
+                               v-if="permission.agreementprice_delete"
+                               @click="handleDelete">删 除
+                    </el-button>
+                </template>
+            </avue-crud>
+        </basic-container>
+
+        <agreementpriceitems ref="agreementpriceitems" v-if="!isShow" :detailData="detailData" @goBack="goBack"></agreementpriceitems>
+    </div>
 </template>
 
 <script>
   import {agreementpriceList, agreementpriceDetail, agreementpriceSubmit, agreementpriceRemove} from "@/api/iosBasicData/agreementprice";
   import {mapGetters} from "vuex";
+  import agreementpriceitems from "@/views/financialManagementF/agreementprice/agreementpriceitems.vue";
 
   export default {
+      components: {agreementpriceitems},
     data() {
       return {
+          // 详情传递的数据
+          detailData:{},
+          isShow:true,
+
         form: {},
         query: {},
         loading: true,
@@ -53,6 +68,7 @@
         selectionList: [],
         option:{},
         optionBack: {
+
           height:'auto',
           calcHeight: 30,
           tip: false,
@@ -65,8 +81,9 @@
           dialogClickModal: false,
           column: [
             {
-              label: "单位编码",
+              label: "单据编码",
               prop: "billNo",
+                search: true,
               rules: [{
                 required: true,
                 message: "请输入单位编码",
@@ -76,21 +93,23 @@
             {
               label: "单位编码",
               prop: "agreementNo",
+                search: true,
               rules: [{
                 required: true,
                 message: "请输入单位编码",
                 trigger: "blur"
               }]
             },
+            // {
+            //   label: "客户 Id",
+            //   prop: "corpId",
+            //     hide:true,
+            //     display:false,
+            // },
             {
-              label: "客户 Id",
-              prop: "corpId",
-                hide:true,
-                display:false,
-            },
-            {
-              label: "客户中文名称",
+              label: "客户名称",
               prop: "corpCnName",
+                search: true,
               rules: [{
                 required: true,
                 message: "请输入客户中文名称",
@@ -118,7 +137,6 @@
             {
               label: "协议生效日期",
               prop: "effectiveDate",
-              r
             },
             {
               label: "协议失效日期",
@@ -270,6 +288,24 @@
           this.option = await this.getColumnData(this.getColumnName(307), this.optionBack);
       },
       methods: {
+          // 添加弹窗开启
+          addbtnfun(){
+              this.detailData.seeDisabled = false
+              this.isShow = false
+          },
+          // 详情的返回列表
+          goBack(){
+              // 初始化数据
+              // this.detailData = this.$options.data().detailData;
+              if (JSON.stringify(this.$route.query) != "{}") {
+                  this.$router.$avueRouter.closeTag();
+                  this.$router.push({
+                      path: "/iosBasicData/losbfeestemplate/index"
+                  });
+              }
+              this.isShow = true;
+              this.onLoad(this.page, this.search);
+          },
       rowSave(row, done, loading) {
         agreementpriceSubmit(row).then(() => {
           this.onLoad(this.page);