开立融信搜索栏样式优化

front-vue/src/assets/styles/element-ui.scss

@@ -148,4 +148,29 @@
 .el-menu-item .el-menu-item::hover{
   color: #ffffff !important;
   background-color: #4280F2 !important;
-}
+}
+.zap-form-input--red.el-input--medium .el-input__inner{
+  color: #FF2F2F !important;
+}
+.zap-flex-1{
+  flex: 0 0 1;
+}
+.zap-form-search-wrap{
+  width: 440px;
+  height: 58px;
+  margin-right: 10px;
+  line-height: 36px;
+  vertical-align: top;
+  font-size: 14px;
+  color: #333333;
+  .label{
+    display: inline-block;
+    width: 176px;
+    padding-right: 12px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+  .value{
+
+  }
+}

front-vue/src/components/TextItem/index.vue

@@ -2,7 +2,7 @@
   <div class="zap-text-item">
       <span class="zap-text-item__label">{{label}}</span>
       <div class="zap-text-item__file">
-          <span class="zap-text-item__value">{{value}}</span>
+          <span v-if="value" class="zap-text-item__value">{{value}}</span>
           <span v-if="suffix" class="zap-text-item__suffix">{{suffix}}</span>
       </div>
   </div>
@@ -16,18 +16,20 @@ export default {
         value: String,
         suffix: String
     }
-}   
+}
 </script>
 
 <style lang="scss">
 .zap-text-item{
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
+    margin-bottom: 22px;
+    margin-right: 10px;
 }
 .zap-text-item__label{
-    flex: 0 0 160px;
-    width: 136px;
+    flex: 0 0 176px;
+    width: 176px;
+    padding-right: 12px;
     text-align: right;
     font-size: 14px;
     color: #333333;
@@ -39,7 +41,6 @@ export default {
     justify-content: space-between;
     width: 264px;
     height: 36px;
-    margin-left: 16px;
     padding-left: 8px;
     background-color: #F4F5F6;
     border: 1px solid #EBEBEB;
@@ -61,4 +62,4 @@ export default {
     color: #999999;
     border-left: 1px solid #EBEBEB;
 }
-</style>
+</style>

front-vue/src/views/service/credit/addCredit.vue

@@ -1,129 +1,106 @@
 <template>
 <div class="app-container zap-main">
     <el-row>
-        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="auto">
+        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="176px">
             <div class="zap-title">开立融信</div>
-            <el-row class="zap-form">
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item size="medium" label="开立方" prop="openName">
-                        <el-input class="zap-form-input" v-model="form.openName" disabled />
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item size="medium" label="授信额度" prop="zfiCoreQuotaId">
-                        <el-select
-                            class="zap-form-input"
-                            v-model="form.zfiCoreQuotaId"
-                            filterable
-                            clearable
-                            remote
-                            @change="change">
-                            <el-option v-for="item in creditLineList" :key="item.value" :label="item.label+'/'+item.remaining" :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item>
-                        <el-row class="zap-available-credit" type="flex" align="middle">
-                            <span style="display:none">可用额度:</span>
-                            <span style="display:none">{{availableAmt}}</span>
-                            <span>有效期:</span>
-                            <span style="margin-right: 40px;">{{validityDate}}</span>
-                            <span>最小融资金额:</span>
-                            <span>{{zfpMinimumAmount}}</span>
-                        </el-row>
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item size="medium" label="接收方" prop="zfiSupplierId">
-                        <el-select class="zap-form-input" v-model="form.zfiSupplierId" filterable clearable remote>
-                            <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item size="medium" label="签发有效期" prop="zfiEffectiveDate">
-                        <el-row type="flex" align="middle">
-                            <el-date-picker
-                                class="zap-form-input"
-                                clearable
-                                v-model="form.zfiEffectiveDate"
-                                type="date"
-                                value-format="yyyy-MM-dd"
-                                placeholder="选择签发有效期"
-                                :picker-options="pickerOptions">
-                            </el-date-picker>
-                            <el-tooltip class="item" effect="light" content="签发有效期：即指定签发截止日期，对方企业在签发截止日内未处理该笔融信，本次融信操作将自动失效" placement="top">
-                                <el-row type="flex" align="middle">
-                                    <img style="width: 20px;height: 20px;margin-left: 8px;" src="../../../assets/images/icon_tip.png" alt="">
-                                </el-row>
-                            </el-tooltip>
-                        </el-row>
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="承诺还款日" prop="zfiExpireDate" size="medium">
+            <el-row class="zap-form" type="flex" style="flex-wrap: wrap;">
+                <text-item class="zap-flex-1" label="开立方" :value="form.openName">
+                </text-item>
+                <el-form-item class="zap-flex-1" size="medium" label="授信额度" prop="zfiCoreQuotaId">
+                    <el-select
+                        class="zap-form-input"
+                        v-model="form.zfiCoreQuotaId"
+                        filterable
+                        clearable
+                        remote
+                        @change="change">
+                        <el-option v-for="item in creditLineList" :key="item.value" :label="item.label+'/'+item.remaining" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <div class="zap-form-search-wrap zap-flex-1">
+                  <span class="label">最小融资金额：</span>
+                  <span class="value">{{zfpMinimumAmount}}</span>
+                </div>
+                <el-form-item class="zap-flex-1" size="medium" label="接收方" prop="zfiSupplierId">
+                    <el-select class="zap-form-input" v-model="form.zfiSupplierId" filterable clearable remote>
+                        <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="zap-flex-1" label="签发金额" prop="zfiAmount">
+                    <el-input class="zap-form-input zap-form-input--red" v-model="form.zfiAmount" @input="getBigSmall"  @input.native="changeRate($event,form.zfiAmount)" />
+                </el-form-item>
+                <text-item class="zap-flex-1" label="签发金额" :value="issuedAmount"></text-item>
+                <el-form-item class="zap-flex-1" label="承诺还款日" prop="zfiExpireDate" size="medium">
+                    <el-date-picker
+                        class="zap-form-input"
+                        clearable
+                        v-model="form.zfiExpireDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择承诺还款日"
+                        :picker-options="pickerOptions">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item size="medium" label="签发有效期" prop="zfiEffectiveDate">
+                    <el-row type="flex" align="middle">
                         <el-date-picker
                             class="zap-form-input"
                             clearable
-                            v-model="form.zfiExpireDate"
+                            v-model="form.zfiEffectiveDate"
                             type="date"
                             value-format="yyyy-MM-dd"
-                            placeholder="选择承诺还款日"
+                            placeholder="选择签发有效期"
                             :picker-options="pickerOptions">
                         </el-date-picker>
+                        <el-tooltip class="item" effect="light" content="签发有效期：即指定签发截止日期，对方企业在签发截止日内未处理该笔融信，本次融信操作将自动失效" placement="top">
+                            <el-row type="flex" align="middle">
+                                <img style="width: 20px;height: 20px;margin-left: 8px;" src="../../../assets/images/icon_tip.png" alt="">
+                            </el-row>
+                        </el-tooltip>
+                    </el-row>
+                </el-form-item>
+            </el-row>
+        </el-form>
+    </el-row>
+    <div class="zap-title zap-margin-top">资产信息</div>
+    <el-row class="zap-form">
+        <zap-tip />
+        <el-row type="flex" align="middle" justify="space-between" style="padding-top: 8px;padding-bottom:20px;">
+            <el-col>
+                <el-button type="success" @click="openTicket">选择</el-button>
+                <el-button type="primary" @click="addPay"><i class="el-icon-plus"></i>新增应付账款</el-button>
+                <el-button @click="deleteTicekt">清空全部</el-button>
+            </el-col>
+            <el-col>
+                <el-row type="flex" align="middle" justify="end">
+                    <el-form-item label="合计金额:" class="zap-margin-clear">
+                        <span style="color: #FF2F2F;">{{checkTotalAmt}}</span>
                     </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="签发金额" prop="zfiAmount">
-                        <el-input class="zap-form-input" v-model="form.zfiAmount" @input="getBigSmall"  @input.native="changeRate($event,form.zfiAmount)" />
-                    </el-form-item>
-                </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="金额大写：" prop="issuedAmount">
-                        {{issuedAmount}}
+                    <el-form-item label="金额大写:" class="zap-margin-clear">
+                        <span style="color: #FF2F2F;">{{checkTotalBigAmt}}</span>
                     </el-form-item>
-                </el-col>
-            </el-row>
-            <div class="zap-title zap-margin-top">资产信息</div>
-            <el-row class="zap-form">
-                <zap-tip />
-                <el-row type="flex" align="middle" justify="space-between" style="padding-top: 8px;padding-bottom:20px;">
-                    <el-col>
-                        <el-button type="success" @click="openTicket">选择</el-button>
-                        <el-button type="primary" @click="addPay"><i class="el-icon-plus"></i>新增应付账款</el-button>
-                        <el-button @click="deleteTicekt">清空全部</el-button>
-                    </el-col>
-                    <el-col>
-                        <el-row type="flex" align="middle" justify="end">
-                            <el-form-item label="合计金额:" class="zap-margin-clear">
-                                <span style="color: #FF2F2F;">{{checkTotalAmt}}</span>
-                            </el-form-item>
-                            <el-form-item label="金额大写:" class="zap-margin-clear">
-                                <span style="color: #FF2F2F;">{{checkTotalBigAmt}}</span>
-                            </el-form-item>
-                        </el-row>
-                    </el-col>
                 </el-row>
+            </el-col>
+        </el-row>
 
-                <el-table :data="ticketList" style="width: 100%;" stripe border="">
-                    <el-table-column label="账款名称" align="center" prop="zbiName" show-overflow-tooltip />
-                    <el-table-column label="应收企业" align="center" prop="receiveName" />
-                    <el-table-column label="应付企业" align="center" prop="payName" />
-                    <el-table-column label="预计还款期" align="center" prop="zbiPayDate" show-overflow-tooltip />
-                    <el-table-column label="金额" align="center" prop="zbiAmount" />
-                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="right">
-                        <template slot-scope="scope">
-                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, ticketList)">删除</el-button>
-                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, ticketList)">修改</el-button>
-                            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.$index, ticketList)">详情</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-row>
-        </el-form>
+        <el-table :data="ticketList" style="width: 100%;" stripe border="">
+            <el-table-column label="账款名称" align="center" prop="zbiName" show-overflow-tooltip />
+            <el-table-column label="应收企业" align="center" prop="receiveName" />
+            <el-table-column label="应付企业" align="center" prop="payName" />
+            <el-table-column label="预计还款期" align="center" prop="zbiPayDate" show-overflow-tooltip />
+            <el-table-column label="金额" align="center" prop="zbiAmount" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, ticketList)">删除</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, ticketList)">修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.$index, ticketList)">详情</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-row>
+    </el-form>
     </el-row>
     <el-row class="zap-warmtips">
         <p>友情提醒：
@@ -158,7 +135,14 @@
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuerys">重置</el-button>
             </el-form-item>
         </el-form>
-        <el-table :data="payList" ref="tablePay" class="single-select-table" @selection-change="handleSelectionChange" :row-key="rowkey" stripe border>
+        <el-table
+            :data="payList"
+            ref="tablePay"
+            class="single-select-table"
+            @selection-change="handleSelectionChange"
+            :row-key="rowkey"
+            stripe
+            border>
             <el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
             <el-table-column label="序号" type="index" width="50" align="center">
                 <template slot-scope="scope">