litdck交易ui美化

src/assets/css/common.css

@@ -61,6 +61,7 @@
   } */
 .m-app-main {
   /* background-color: var(--bgcolor); */
+  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
 }
 
 .m-app {
@@ -527,3 +528,18 @@
 float: left;
 margin-left: 120px;
 }
+
+/* 去除工具条默认圆角 */
+.toolbar-core{
+  border-radius:0px;
+}
+
+/* 改变折叠面板箭头样式 */
+.el-icon-arrow-right:before{
+  content: "\e791";
+}
+
+.el-collapse-item__arrow{
+  color: var(--themecolor);
+}
+

src/views/Business/Litame/index.vue

@@ -299,7 +299,7 @@ export default {
   computed: {},
   data() {
     return {
-      tabVal: "amep",
+      tabVal: "ovwp",
       trnName: "litame",
       model: new Litame().data,
       checkRules: Check,
@@ -307,6 +307,7 @@ export default {
       pattern: Pattern,
       rules: null,
       codes: { ...CodeTable },
+      activeNames: ["engp"],
     };
   },
   methods: {

src/views/Business/Litdck/Docpre.vue

 <template>
-  <div class="eibs-tab">
+  <div class="eibs">
     <el-col :span="12" style="padding-right: 20px;">
       <c-col :span="24">
         <el-form-item label="不符点" prop="brdgrp.blk.docdis">

src/views/Business/Litdck/Ovwp.vue

+<template>
+  <div class="eibs-tab">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item title="单据信息" name="litdckp">
+        <m-litdckp :model="model" :codes="codes" />
+      </el-collapse-item>
+      <el-collapse-item title="不符点/说明" name="docpre" v-if="this.model.brdgrp.rec.dscinsflg">
+        <m-docpre :model="model" :codes="codes" />
+      </el-collapse-item>
+      <el-collapse-item title="货权单据" name="srmp">
+        <m-srmp :model="model" :codes="codes" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+import Api from "~/service/Api";
+import commonProcess from "~/mixin/commonProcess";
+import CodeTable from "~/config/CodeTable";
+import Event from "~/model/Litdck/Event";
+import Litdckp from "./Litdckp";
+import Docpre from "./Docpre";
+import Srmp from "./Srmp";
+
+export default {
+  components:{
+    "m-litdckp": Litdckp,
+    "m-docpre": Docpre,
+    "m-srmp": Srmp,
+  },
+  inject: ["root"],
+  props: ["model", "codes"],
+  mixins: [commonProcess],
+  data() {
+    return {
+        activeNames: ["litdckp"],
+    };
+  },
+  methods: { ...Event },
+  created: function () {},
+};
+</script>
+<style>
+</style>

src/views/Business/Litdck/Srmp.vue

 <template>
-  <div class="eibs-tab">
+  <div class="eibs">
     <el-col :span="12" style="padding-right: 20px;">
     <c-col :span="24">
         <el-form-item label="单据类型" prop="brdgrp.srm.djutyp">

src/views/Business/Litdck/index.vue

 <template>
-  <c-page title="进口信用证到单">
   <div class="eContainer">
+    <c-page title="进口信用证到单">
       <el-form
         :model="model"
         :rules="rules"
@@ -16,72 +16,100 @@
           type="card"
           @tab-click="myTabClick"
         >
-          <!--PD000047 -->
-          <el-tab-pane label="单据信息" name="litdckp">
-            <c-content>
-              <m-litdckp :model="model" :codes="codes" />
-            </c-content>
-          </el-tab-pane>
 
-          <!--PD000062 -->
-          <el-tab-pane
-            v-if="this.model.brdgrp.rec.dscinsflg"
-            label="不符点/说明"
-            name="docpre"
-          >
+          <el-tab-pane label="业务信息" name="ovwp">
             <c-content>
-                <m-docpre :model="model" :codes="codes"/>
+              <m-ovwp :model="model" :codes="codes" />
             </c-content>
           </el-tab-pane>
 
-          <!--PD000027 -->
-          <el-tab-pane label="表外记账" name="engp">
+          <!--PD000001 -->
+          <el-tab-pane label="统一授信" name="limitbody">
             <c-content>
-                <m-engp :model="model" :codes="codes"/>
+              <m-limitbody :model="model" :codes="codes" />
             </c-content>
           </el-tab-pane>
 
-          <!--PD000000 -->
-          <el-tab-pane label="结算" name="setpan">
+          <el-tab-pane label="费用/账务" name="engp,setpan">
             <c-content>
-                <m-setpan :model="model" :codes="codes"/>
+              <div class="eibs-tab">
+                <el-collapse v-model="activeNames">
+                  <el-collapse-item title="表外记账" name="engp">
+                    <!-- 表外记账 -->
+                    <m-engp :model="model" :codes="codes" />
+                  </el-collapse-item>
+                  <el-collapse-item title="结算" name="setpan">
+                    <!-- 结算 -->
+                    <m-setpan :model="model" :codes="codes" />
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
             </c-content>
           </el-tab-pane>
 
           <!--PD000000 -->
-          <el-tab-pane label="提示信息" name="coninfp">
+          <el-tab-pane label="附言" name="coninfp">
             <c-content>
-                <m-coninfp :model="model" :codes="codes"/>
+              <m-coninfp :model="model" :codes="codes" />
             </c-content>
           </el-tab-pane>
 
           <!--PD000529 -->
-          <el-tab-pane label="面函/报文" name="docpan">
+          <el-tab-pane label="报文/面函" name="docpan">
             <c-content>
-                <m-docpan :model="model" :codes="codes"/>
+              <m-docpan :model="model" :codes="codes" />
             </c-content>
           </el-tab-pane>
 
           <!--PD000546 -->
-          <el-tab-pane label="附件" name="doctre">
+          <el-tab-pane label="附件信息" name="doctre">
             <c-content>
-                <m-doctre :model="model" :codes="codes"/>
+              <m-doctre :model="model" :codes="codes" />
             </c-content>
           </el-tab-pane>
 
-          <!--PD000001 -->
-          <el-tab-pane label="货权单据" name="srmp">
+          <!--PD000047 -->
+          <!-- <el-tab-pane label="单据信息" name="litdckp">
             <c-content>
-                <m-srmp :model="model" :codes="codes"/>
+              <m-litdckp :model="model" :codes="codes" />
             </c-content>
-          </el-tab-pane>
+          </el-tab-pane> -->
+
+          <!--PD000062 -->
+          <!-- <el-tab-pane
+            v-if="this.model.brdgrp.rec.dscinsflg"
+            label="不符点/说明"
+            name="docpre"
+          >
+            <c-content>
+              <m-docpre :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane> -->
+
+          
+
+          <!--PD000027 -->
+          <!-- <el-tab-pane label="表外记账" name="engp">
+            <c-content>
+              <m-engp :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane> -->
+
+          <!--PD000000 -->
+          <!-- <el-tab-pane label="结算" name="setpan">
+            <c-content>
+              <m-setpan :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane> -->
 
           <!--PD000001 -->
-          <el-tab-pane label="统一授信" name="limitbody">
+          <!-- <el-tab-pane label="货权单据" name="srmp">
             <c-content>
-                <m-limitbody :model="model" :codes="codes"/>
+              <m-srmp :model="model" :codes="codes" />
             </c-content>
-          </el-tab-pane>
+          </el-tab-pane> -->
+
+          
         </c-tabs>
       </el-form>
       <c-function-btn
@@ -103,12 +131,13 @@
         @select-ety="selectMsg"
       >
       </c-grid-ety-prompt-dialog>
-    </div>
     </c-page>
+  </div>
 </template>
 <script>
 import Api from "~/service/Api";
 import CodeTable from "~/config/CodeTable";
+import Ovwp from "./Ovwp";
 import Litdck from "~/model/Litdck";
 import commonProcess from "~/mixin/commonProcess";
 import commonFuncs from "~/mixin/commonFuncs";
@@ -123,19 +152,20 @@ import Docpre from "./Docpre";
 // import Coninfp from "./Coninfp"
 // import Docpan from "./Docpan"
 // import Doctre from "./Doctre"
-import Limitbody from "./Limitbody"
-import Srmp from "./Srmp"
-
-import Engp from "~/views/Public/Engp"
-import Setpan from "~/views/Public/Setpan"
-import Coninfp from "~/views/Public/Coninfp"
-import Docpan from "~/views/Public/Docpan"
-import Doctre from "~/views/Public/Doctre"
+import Limitbody from "./Limitbody";
+import Srmp from "./Srmp";
+
+import Engp from "~/views/Public/Engp";
+import Setpan from "~/views/Public/Setpan";
+import Coninfp from "~/views/Public/Coninfp";
+import Docpan from "~/views/Public/Docpan";
+import Doctre from "~/views/Public/Doctre";
 // import Limitbody from "~/views/Public/Limitbody"
 
 export default {
   name: "Litdck",
   components: {
+    "m-ovwp": Ovwp,
     "m-litdckp": Litdckp,
     "m-docpre": Docpre,
     "m-engp": Engp,
@@ -154,7 +184,7 @@ export default {
   mixins: [commonProcess, commonFuncs], // 里面包含了Default、Check等的公共处理
   data() {
     return {
-      tabVal: "litdckp",
+      tabVal: "ovwp",
       trnName: "litdck",
       model: new Litdck().data,
       checkRules: Check,
@@ -162,6 +192,7 @@ export default {
       pattern: Pattern,
       rules: null,
       codes: { ...CodeTable },
+      activeNames: ["engp"],
     };
   },
   methods: {

src/views/Business/Litopn/Dogp.vue

 <template>
   <div class="eibs">
                                                
-       <c-col :span="20">
+       <c-col :span="22">
         <el-form-item label="货物/服务描述" prop="lidgrp.blk.lcrgod">
             <c-input type="textarea" v-model="model.lidgrp.blk.lcrgod" maxlength="52000" :rows="30" show-word-limit placeholder="请输入货物或服务描述" ></c-input>
         </el-form-item>

src/views/Business/Litopn/Spcbenp.vue

 <template>
   <div class="eibs">
                                                
-       <c-col :span="18">
+       <c-col :span="22">
         <el-form-item label="受益人特殊付款条款" prop="lidgrp.blk.spcben">
             <c-input type="textarea" v-model="model.lidgrp.blk.spcben" maxlength="65" :rows="30" show-word-limit placeholder="请输入Special Payment Conditions" ></c-input>
         </el-form-item>
         </c-col>
                   
-       <c-col :span="3">
-        <c-button size="small" type="primary" icon="el-icon-search" @click="onSpcbenButtxmsel">
-            ...
+       <c-col :span="2">
+        <c-button size="small" type="primary" icon="el-icon-more" @click="onSpcbenButtxmsel">
         </c-button>
        </c-col>
                    </div>

src/views/Business/Litopn/Spcrcvp.vue

 <template>
   <div class="eibs">
                                                
-       <c-col :span="18">
+       <c-col :span="22">
         <el-form-item label="仅适用于指定银行的特殊付款条款" prop="lidgrp.blk.spcrcb">
             <c-input type="textarea" v-model="model.lidgrp.blk.spcrcb" maxlength="65" :rows="30" show-word-limit placeholder="请输入Special Payment " ></c-input>
         </el-form-item>
         </c-col>
                   
-       <c-col :span="3">
-        <c-button size="small" type="primary" icon="el-icon-search" @click="onSpcrcbButtxmsel">
-            ...
+       <c-col :span="2">
+        <c-button size="small" type="primary" @click="onSpcrcbButtxmsel"
+        icon="el-icon-more">
         </c-button>
        </c-col>
                    </div>

src/views/Business/Litopn/index.vue

 <template>
-  <div class="eContainer">
-
-
   <c-page title="进口信用证开立">
-
+    <div class="eContainer">
       <div class="fast-button">
-
         <el-button size="small">备忘录</el-button>
-        <el-button size="small" @click="setDraggableContent('cms', '影像信息')">影像信息</el-button>
+        <el-button size="small" @click="setDraggableContent('cms', '影像信息')"
+          >影像信息</el-button
+        >
         <!-- <el-button size="small">保存模板</el-button> -->
         <!-- <el-button size="small">使用模板</el-button> -->
         <el-button size="small">制裁信息</el-button>
@@ -241,8 +239,8 @@
         :handleStash="handleStash"
       >
       </c-function-btn>
-    </c-page>
     </div>
+  </c-page>
 </template>
 <script>
 import Api from "~/service/Api";

src/views/Business/index.vue

@@ -37,6 +37,7 @@ export default {
 <style>
 #business_container {
   flex: 1;
+  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
 }
 #business_container .eContainer, #business_container .eContainer-search{
   box-sizing: border-box;
@@ -47,7 +48,7 @@ export default {
 }
 #business_container .eContainer {
   background-color: #ffffff;
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
+  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
 }
 #business_container .eContainer .eContainer, 
 #business_container .eContainer .eContainer-search, 

src/views/Public/BlkTextarea.vue

 <template>
   <div>
     <!-- Description of Goods -->
-    <c-col :span="19">
+    <c-col :span="22">
       <el-form-item :label="blkMsg.title" :prop="blkMsg.dataUrl">
         <c-input
           type="textarea"

src/views/Public/Doctre.vue

@@ -2,7 +2,7 @@
   <div class="eibs-tab">
 
     <c-col :span="24" style="height: 24px;margin-bottom: 20px;">
-      <el-form-item label="发出面函/报文" class="messageLabel"></el-form-item>
+      <el-form-item label="发出面函/报文" class="messageLabel" style="width: 96px;"></el-form-item>
     </c-col>
     <c-col :span="24" style="height: 0px">
         <el-divider></el-divider>
@@ -32,7 +32,7 @@
     </c-col>
 
     <c-col :span="24" style="height: 24px;margin-top: 20px;;margin-bottom: 20px;">
-      <el-form-item label="前置面函/报文" class="messageLabel"></el-form-item>
+      <el-form-item label="前置面函/报文" class="messageLabel" style="width: 96px;"></el-form-item>
     </c-col>
     <c-col :span="24" style="height: 0px">
         <el-divider></el-divider>

src/views/Public/Engp.vue

@@ -159,7 +159,7 @@
               placeholder=""
             ></c-input>
             <c-input
-              style="width: 40%"
+              style="width: 40%;margin-left:5px;"
               disabled
               v-model="model.liaall.misamt"
               placeholder="请输入金额"

src/views/Public/Limitbody.vue

@@ -22,7 +22,7 @@
               ></c-input>
               <template slot="footer">
                 <c-button
-                  style="margin: 0 5px 0 10px; padding: 0 12px"
+                  style="margin-right:10px; padding: 0 12px"
                   size="small"
                   type="primary"
                   icon="el-icon-search"

src/views/Public/Setpan.vue

@@ -33,7 +33,7 @@
             v-model="model.setmod.docamt"
             placeholder="0"
             disabled
-            style="margin-left: 20px"
+            style="margin-left: 5px"
           ></c-input-currency>
         </el-form-item>
       </c-col>