开立融信页面样式调整

front-vue/src/App.vue

@@ -169,19 +169,7 @@ export default {
 .el-table .el-table__fixed-header-wrapper th {
     background-color: #F6F9FF;
 }
-.zap-form-tip{
-    display: flex;
-    align-items: flex-start;
-    line-height: 20px;
-    font-size: 14px;
-    color: #999999;
-    img{
-        width:16px;
-        height: 16px;
-        margin-top: 2px;
-        margin-right: 8px;
-    }
-}
+
 .zap-warmtips{
     line-height: 40px;
     font-size: 14px;

front-vue/src/assets/styles/huyi.scss

@@ -13,6 +13,9 @@
 .pb5 {
   padding-bottom: 5px;
 }
+.pt12{
+  padding-top: 12px !important;
+}
 .pt20 {
   padding-top: 20px !important;
 }
@@ -365,3 +368,19 @@
 .el-message-box__btns button:nth-child(2){
   margin-left: 0;
 }
+.zap-form-item__content{
+  .el-form-item__content{
+    display: flex;
+    align-items: center;
+  }
+}
+.zap-form-input{
+  width: 264px !important;
+}
+.zap-form-tip{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+}
+

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

@@ -0,0 +1,28 @@
+<template>
+<div class="zap-tip mb20">
+    <img src="../../assets/images/icon_grey_tip.png" alt="">
+    请知悉，资产信息仅能接受指定的销售方与购买方的往来账款(含账款基本信息、贸易合同与贸易发票等)；如须使用系统尚未维护的往来账款，请点击新增应付账款
+</div>
+</template>
+
+<script>
+export default {
+  name: "ZapTip"
+}
+</script>
+
+<style lang="scss">
+.zap-tip{
+    display: flex;
+    align-items: flex-start;
+    line-height: 20px;
+    font-size: 14px;
+    color: #999999;
+    img{
+        width:16px;
+        height: 16px;
+        margin-top: 2px;
+        margin-right: 8px;
+    }
+}
+</style>

front-vue/src/filters/date.js

@@ -0,0 +1,7 @@
+import Vue from "vue"
+Vue.filter("date", function (value, type) {
+  if (type === "yyyy-MM-dd") {
+    return value?.slice(0, 10) || ""
+  }
+  return value?.slice(0, 19).replace('T', " ")
+})

front-vue/src/main.js

@@ -21,6 +21,12 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 import Pagination from "@/components/Pagination";
 //自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
+// 提示信息
+import ZapTip from "@/components/ZapTip"
+// 表格标题
+import ContentTitle from "@/components/ContentTitle"
+// 日期过滤器
+import "@/filters/date.js"
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -48,6 +54,8 @@ Vue.prototype.msgInfo = function (msg) {
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
+Vue.component('ZapTip', ZapTip)
+Vue.component('ContentTitle', ContentTitle)
 
 Vue.use(permission)
 

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

@@ -146,102 +146,6 @@
                     end-placeholder="结束日期">
                 </el-date-picker>
             </el-form-item>
-            <!-- <el-form-item label="融信编码" prop="zfiNumber">
-                  <el-input
-                  v-model.trim="queryParamsFinanced.zfiNumber"
-                  placeholder="请输入融信编码"
-                  clearable
-                  size="small"
-                  maxlength="25"
-                  @keyup.enter.native="handleQueryFinanced"
-                  />
-          </el-form-item>
-          <el-form-item label="开立企业" prop="openCompany">
-              <el-input
-              v-model.trim="queryParamsFinanced.openCompany"
-              placeholder="请输入开立企业"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryFinanced"
-              />
-          </el-form-item>
-          <el-form-item label="接收企业" prop="receiveCompany">
-              <el-input
-              v-model.trim="queryParamsFinanced.receiveCompany"
-              placeholder="请输入接收企业"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryFinanced"
-              />
-          </el-form-item>
-          <el-form-item label="融信产品" prop="zfpName">
-            <el-input
-            v-model.trim="queryParamsFinanced.zfpName"
-            placeholder="请输入融信产品"
-            clearable
-            size="small"
-            maxlength="25"
-            @keyup.enter.native="handleQueryFinanced"
-            />
-          </el-form-item>
-          <el-form-item label="融信金额">
-              <el-input
-              v-model="queryParamsFinanced.startAmt"
-              placeholder="请输入融信金额"
-              clearable
-              size="small"
-              maxlength="20"
-            />
-          </el-form-item>
-          <el-form-item>
-              ~
-          </el-form-item>
-          <el-form-item>
-              <el-input
-              v-model="queryParamsFinanced.endAmt"
-              placeholder="请输入融信金额"
-              clearable
-              size="small"
-              @keyup.enter.native="handleQueryFinanced"
-              maxlength="20"
-            />
-          </el-form-item>
-          <el-form-item label="签收日期" prop="zfiSignDate">
-                <el-date-picker  size="small"
-                v-model="queryParamsFinanced.zfiSignDate"
-                style="width: 240px"
-                unlink-panels
-                value-format="yyyy-MM-dd"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item label="承诺日期" prop="zfiExpireDate">
-                <el-date-picker  size="small"
-                v-model="queryParamsFinanced.zfiExpireDate"
-                style="width: 240px"
-                unlink-panels
-                value-format="yyyy-MM-dd"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item label="融信利率" prop="zfiRate">
-              <el-input
-              v-model.trim="queryParamsFinanced.zfiRate"
-              placeholder="请输入融信利率"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryFinanced"
-              />
-            </el-form-item> -->
         </el-form>
     </search-bar>
     <!-- 已拒绝 -->
@@ -271,112 +175,6 @@
                     end-placeholder="结束日期">
                 </el-date-picker>
             </el-form-item>
-            <!-- <el-form-item label="融信编码" prop="zfiNumber">
-                  <el-input
-                  v-model.trim="queryParamsInvalid.zfiNumber"
-                  placeholder="请输入融信编码"
-                  clearable
-                  size="small"
-                  maxlength="25"
-                  @keyup.enter.native="handleQueryInvalid"
-                  />
-          </el-form-item>
-          <el-form-item label="开立企业" prop="openCompany">
-              <el-input
-              v-model.trim="queryParamsInvalid.openCompany"
-              placeholder="请输入开立企业"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryInvalid"
-              />
-          </el-form-item>
-          <el-form-item label="接收企业" prop="receiveCompany">
-              <el-input
-              v-model.trim="queryParamsInvalid.receiveCompany"
-              placeholder="请输入接收企业"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryInvalid"
-              />
-          </el-form-item>
-          <el-form-item label="融信产品" prop="zfpName">
-            <el-input
-            v-model.trim="queryParamsInvalid.zfpName"
-            placeholder="请输入融信产品"
-            clearable
-            size="small"
-            maxlength="25"
-            @keyup.enter.native="handleQueryInvalid"
-            />
-          </el-form-item>
-          <el-form-item label="融信金额">
-              <el-input
-              v-model="queryParamsInvalid.startAmt"
-              placeholder="请输入融信金额"
-              clearable
-              size="small"
-              maxlength="20"
-            />
-          </el-form-item>
-          <el-form-item>
-              ~
-          </el-form-item>
-          <el-form-item>
-              <el-input
-              v-model="queryParamsInvalid.endAmt"
-              placeholder="请输入融信金额"
-              clearable
-              size="small"
-              @keyup.enter.native="handleQueryInvalid"
-              maxlength="20"
-            />
-          </el-form-item>
-          <el-form-item label="签收日期" prop="zfiSignDate">
-                <el-date-picker  size="small"
-                v-model="queryParamsInvalid.zfiSignDate"
-                style="width: 240px"
-                unlink-panels
-                value-format="yyyy-MM-dd"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item label="承诺日期" prop="zfiExpireDate">
-                <el-date-picker  size="small"
-                v-model="queryParamsInvalid.zfiExpireDate"
-                style="width: 240px"
-                unlink-panels
-                value-format="yyyy-MM-dd"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item label="融信利率" prop="zfiRate">
-              <el-input
-              v-model.trim="queryParamsInvalid.zfiRate"
-              placeholder="请输入融信利率"
-              clearable
-              size="small"
-              maxlength="25"
-              @keyup.enter.native="handleQueryInvalid"
-              />
-            </el-form-item> -->
-            <!-- <el-form-item label="状态" prop="zfiStatus">
-              <el-select v-model="queryParams.zfiStatus" placeholder="请选择状态" clearable size="small">
-                <el-option
-                  v-for="dict in stateOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictLabel"
-                  :value="dict.dictValue"
-                />
-              </el-select>
-          </el-form-item> -->
         </el-form>
     </search-bar>
     <!-- 已结算 -->

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

@@ -1,74 +1,43 @@
 <template>
 <div class="app-container zap-main">
     <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-        <div class="zap-title">资产信息</div>
-        <el-row class="zap-form">
-            <el-row>
-                <el-row>
-                    <el-col :span="12" style="margin-bottom: 22px;">
-                        <el-button type="success" @click="openTicket">选择</el-button>
-                        <el-button type="primary" @click="addPay">新增应付账款</el-button>
-                        <el-button @click="deleteTicekt">清空全部</el-button>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-row type="flex" align="middle" justify="end">
-                            <el-form-item label="合计金额:">
-                                <span>{{checkTotalAmt}}</span>
-                            </el-form-item>
-                            <el-form-item label="金额大写:">
-                                <span>{{checkTotalBigAmt}}</span>
-                            </el-form-item>
-                        </el-row>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-table class="zap-table" :data="ticketList" style="width: 100%;" stripe>
-                        <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" width="100" show-overflow-tooltip />
-                        <el-table-column label="金额" align="center" :formatter="moneyFormat" prop="zbiAmount" width="120" />
-                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
-                            <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-view" @click="handleDetail(scope.$index, ticketList)">详情</el-button>
-                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, ticketList)">修改</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-row>
-            </el-row>
+
+        <el-row class="zap-form pt20">
+            <content-title title="开立融信"></content-title>
             <el-row class="zap-margin-top">
                 <el-col :span="8">
-                    <el-form-item label="开立方" prop="openName" size="large">
-                        <el-input v-model="form.openName" disabled />
+                    <el-form-item label="开立方" prop="openName">
+                        <el-input v-model="form.openName" class="zap-form-input" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="授信额度" prop="zfiSupplierQuotaId" size="large">
-                        <el-select v-model="form.zfiSupplierQuotaId" filterable clearable remote @change="change">
+                    <el-form-item label="授信额度" prop="zfiSupplierQuotaId">
+                        <el-select
+                            v-model="form.zfiSupplierQuotaId"
+                            filterable
+                            clearable
+                            remote
+                            @change="change"
+                            class="zap-form-input">
                             <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 :span="8" style="height: 40px;line-height: 40px;margin-bottom: 22px;">
-                    <span style="display:none">可用额度:</span>
-                    <span style="display:none">{{availableAmt}}</span>
-                    <span>有效期:</span>
-                    <span style="margin-right: 40px;">{{validityDate}}</span>
+                <el-col :span="8" style="height: 36px;line-height: 36px;margin-bottom: 22px;font-size: 14px;">
                     <span>最小融资金额:</span>
                     <span>{{zfpMinimumAmount}}</span>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="接收方" prop="receiveName" size="large">
-                        <el-input v-model="form.receiveName" disabled />
+                    <el-form-item label="接收方" prop="receiveName">
+                        <el-input v-model="form.receiveName" disabled class="zap-form-input" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="签发有效期" prop="zfiEffectiveDate" size="large">
+                    <el-form-item label="签发有效期" prop="zfiEffectiveDate" class="zap-form-item__content">
                         <el-date-picker
+                            class="zap-form-input"
                             clearable
                             v-model="form.zfiEffectiveDate"
                             type="date"
@@ -76,14 +45,15 @@
                             placeholder="选择签发有效期"
                             :picker-options="pickerOptions">
                         </el-date-picker>
-                        <el-tooltip class="item" effect="light" content="签发有效期：即指定签发截止日期，对方企业在签发截止日内未处理该笔融信，本次融信操作将自动失效" placement="top">
-                            <i class="el-icon-question" style="font-size: 23px;" />
+                        <el-tooltip class="zap-form-tip" effect="light" content="签发有效期：即指定签发截止日期，对方企业在签发截止日内未处理该笔融信，本次融信操作将自动失效" placement="top">
+                            <img  src="../../../assets/images/icon_tip.png" alt="">
                         </el-tooltip>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="承诺还款日" prop="zfiExpireDate" size="large">
+                    <el-form-item label="承诺还款日" prop="zfiExpireDate">
                         <el-date-picker
+                            class="zap-form-input"
                             clearable
                             v-model="form.zfiExpireDate"
                             type="date"
@@ -94,18 +64,50 @@
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="签发金额" prop="zfiAmount" size="large">
-                        <el-input v-model="form.zfiAmount" @input="getBigSmall" @input.native="changeRate($event,form.zfiAmount)" />
+                    <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 :span="8">
-                    <el-form-item label="金额大写" prop="issuedAmount" size="large">
+                    <el-form-item label="金额大写" prop="issuedAmount">
                         {{issuedAmount}}
                     </el-form-item>
                 </el-col>
             </el-row>
-            <p>请知悉，资产信息仅能接受指定的销售方与购买方的往来账款(含账款基本信息、贸易合同与贸易发票等)；如须使用系统尚未维护的往来账款，请点击新增应付账款
-            </p>
+        </el-row>
+        <el-row class="zap-form mt20 pt20">
+            <el-row>
+                <content-title title="资产信息"></content-title>
+                <zap-tip class="pt12"></zap-tip>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-button type="success" @click="openTicket">选择</el-button>
+                    <el-button type="primary" icon="el-icon-plus" @click="addPay">新增应付账款</el-button>
+                    <el-button @click="deleteTicekt">清空全部</el-button>
+                </el-col>
+                <el-col :span="12">
+                    <el-row type="flex" align="middle" justify="end">
+                        <content-total :amount="checkTotalAmt" :words="checkTotalBigAmt"></content-total>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table class="zap-table" :data="ticketList" style="width: 100%;" stripe>
+                    <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" width="100" show-overflow-tooltip />
+                    <el-table-column label="金额" align="center" :formatter="moneyFormat" prop="zbiAmount" width="120" />
+                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
+                        <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-view" @click="handleDetail(scope.$index, ticketList)">详情</el-button>
+                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.$index, ticketList)">修改</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-row>
         </el-row>
     </el-form>
     <el-row type="flex" justify="center" align="middle" style="height: 96px;">
@@ -114,27 +116,27 @@
     </el-row>
     <!-- 应付账款信息 -->
     <el-dialog :title="payTitle" :visible.sync="open" width="1120px" append-to-body destroy-on-close>
-        <search-bar :hiddenSetting="true" @query="handleQuery" @reset="resetQuery">
-          <el-form :model="queryParamsPay" ref="formQuery" :inline="true" label-width="68px" style="margin-bottom: -21px">
-              <el-form-item label="账款名称" prop="zbiName">
-                  <el-input
-                      v-model="queryParamsPay.zbiName"
-                      placeholder="请输入账款名称"
-                      clearable
-                      size="small"
-                      maxlength="11"
-                      @keyup.enter.native="handleQuerys" />
-              </el-form-item>
-              <el-form-item label="应付企业" prop="payName" style="margin-left: 94px;">
-                  <el-input
-                      v-model="queryParamsPay.payName"
-                      placeholder="请输入应付企业"
-                      clearable
-                      size="small"
-                      maxlength="11"
-                      @keyup.enter.native="handleQuerys" />
-              </el-form-item>
-          </el-form>
+        <search-bar :hiddenSetting="true" @query="handleQuerys" @reset="resetQuerys">
+            <el-form :model="queryParamsPay" ref="formQuery" :inline="true" label-width="68px" style="margin-bottom: -21px">
+                <el-form-item label="账款名称" prop="zbiName">
+                    <el-input
+                        v-model="queryParamsPay.zbiName"
+                        placeholder="请输入账款名称"
+                        clearable
+                        size="small"
+                        maxlength="11"
+                        @keyup.enter.native="handleQuerys" />
+                </el-form-item>
+                <el-form-item label="应付企业" prop="payName" style="margin-left: 94px;">
+                    <el-input
+                        v-model="queryParamsPay.payName"
+                        placeholder="请输入应付企业"
+                        clearable
+                        size="small"
+                        maxlength="11"
+                        @keyup.enter.native="handleQuerys" />
+                </el-form-item>
+            </el-form>
         </search-bar>
         <el-table :data="payList" ref="tablePay" class="single-select-table" @selection-change="handleSelectionChange" :row-key="rowkey">
             <el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
@@ -208,13 +210,15 @@ import {
 } from "@/api/common/companyHandler";
 import Cookies from 'js-cookie'
 import SearchBar from '@/components/SearchBar/index.vue'
+import ContentTotal from '@/components/ContentTotal/index.vue'
 export default {
     name: "financeOpen",
     components: {
         AddBill,
         EditBill,
         DetailBill,
-        SearchBar
+        SearchBar,
+        ContentTotal
     },
     data() {
         return {