平台往来账款新增发票验真弹窗样式修改

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

@@ -313,6 +313,9 @@
   font-size: 16px;
   color: #ffffff;
 }
+.el-dialog__headerbtn{
+  top: 14px !important;
+}
 .el-dialog__headerbtn .el-dialog__close:hover,
 .el-dialog__headerbtn .el-dialog__close {
   font-size: 20px;
@@ -383,6 +386,9 @@
 .zap-form-input{
   width: 264px !important;
 }
+.zap-form-input--large{
+  width: 320px !important;
+}
 .zap-form-tip{
   display: inline-block;
   width: 20px;

front-vue/src/styles/cover.scss

@@ -4,7 +4,7 @@
 }
 .el-radio{
   margin-right: 30px;
-  
+
 }
 .el-checkbox+.el-checkbox{
   margin-left: 0 !important;
@@ -18,7 +18,7 @@
 .el-form-item--medium{
   &.el-form-item{
     margin-bottom: 22px;
-  } 
+  }
 }
 .el-form-item--small{
   .el-radio{
@@ -59,12 +59,15 @@
     margin-top: 8px;
   }
 }
-
+.el-table--border, .el-table--group{
+  border: 1px solid transparent !important;
+}
 .border-form{
   border: 1px solid #999;
 
   .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
-    border-right: 1px solid #999;
+    // border-right: 1px solid #999;
+    border: none;
   }
 
   .el-table td, .el-table th.is-leaf{
@@ -72,7 +75,7 @@
   }
 
   .el-table--border, .el-table--group{
-    border: 1px solid #999;
+    border: 1px solid transparent !important;
   }
 
   .form-table{
@@ -143,4 +146,4 @@
 
 .el-slider__button-wrapper{
   z-index: 101;
-}
+}

front-vue/src/views/service/bill/billAdd.vue

@@ -3,28 +3,28 @@
     <el-row class="zap-margin-top">
         <div class="zap-title">基本信息</div>
         <el-row class="zap-form">
-            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                 <el-row>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="账款类型" prop="wplIsInput" size="large">
+                    <el-col :span="12">
+                        <el-form-item label="账款类型" prop="wplIsInput">
                             <el-radio-group v-model="type" prop="type" @change="changePayer" :disabled="disabled">
                                 <el-radio-button label="00" v-if="company.scyType != '02'">应付账款</el-radio-button>
                                 <el-radio-button label="01" v-if="company.scyType != '01'">应收账款</el-radio-button>
                             </el-radio-group>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="账款名称" prop="zbiName" size="large">
-                            <el-input v-model="form.zbiName" clearable placeholder="请输入账款名称" maxlength="20" />
+                    <el-col :span="12">
+                        <el-form-item label="账款名称" prop="zbiName">
+                            <el-input class="zap-form-input--large" v-model="form.zbiName" clearable placeholder="请输入账款名称" maxlength="20" />
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="应付方" prop="zbiPayerId" size="large">
-                            <el-select v-model="form.zbiPayerId" :disabled="true" filterable remote v-if="type == '00'">
+                    <el-col :span="12">
+                        <el-form-item label="应付方" prop="zbiPayerId">
+                            <el-select class="zap-form-input--large" v-model="form.zbiPayerId" :disabled="true" filterable remote v-if="type == '00'">
                                 <el-option :label="company.scyName" :value="company.scyId">
                                 </el-option>
                             </el-select>
-                            <el-select v-model="form.zbiPayerId" filterable clearable remote v-if="type == '01'">
+                            <el-select class="zap-form-input--large" v-model="form.zbiPayerId" filterable clearable remote v-if="type == '01'">
                                 <el-option v-for="(item, index) in companyRelList" :key="index" :label="
                   item.launchScyId == company.scyId
                     ? item.receiveScyName
@@ -38,13 +38,13 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="应收方" prop="zbiPayeeId" size="large">
-                            <el-select v-model="form.zbiPayeeId" :disabled="true" filterable remote v-if="type == '01'">
+                    <el-col :span="12">
+                        <el-form-item label="应收方" prop="zbiPayeeId">
+                            <el-select class="zap-form-input--large" v-model="form.zbiPayeeId" :disabled="true" filterable remote v-if="type == '01'">
                                 <el-option :label="company.scyName" :value="company.scyId">
                                 </el-option>
                             </el-select>
-                            <el-select v-model="form.zbiPayeeId" filterable clearable remote v-if="type == '00'">
+                            <el-select class="zap-form-input--large" v-model="form.zbiPayeeId" filterable clearable remote v-if="type == '00'">
                                 <el-option v-for="(item, index) in companyRelList" :key="index" :label="
                   item.launchScyId == company.scyId
                     ? item.receiveScyName
@@ -58,53 +58,55 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="贸易日期" prop="zbiDate" size="large">
-                            <el-date-picker v-model="form.zbiDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart">
+                    <el-col :span="12">
+                        <el-form-item label="贸易日期" prop="zbiDate">
+                            <el-date-picker class="zap-form-input--large" v-model="form.zbiDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart">
                             </el-date-picker>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
+                    <el-col :span="12">
                         <el-form-item :label="
               type == '00'
                 ? '预计付款日期'
                 : type == '01'
                 ? '预计收款日期'
                 : '预计收/付款日期'
-            " prop="zbiPayDate" size="large">
-                            <el-date-picker v-model="form.zbiPayDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd">
+            " prop="zbiPayDate">
+                            <el-date-picker class="zap-form-input--large" v-model="form.zbiPayDate" clearable value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd">
                             </el-date-picker>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="账款金额" size="large">
-                            <el-input :disabled="true" :value="allAmount()" maxlength="20">
+                    <el-col :span="12">
+                        <el-form-item label="账款金额">
+                            <el-input class="zap-form-input--large" :disabled="true" :value="allAmount()" maxlength="20">
                                 <template slot="append">元</template>
                             </el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="账款金额大写" size="large">
-                            <el-input :disabled="true" :value="smallToBig(allAmount())">
+                    <el-col :span="12">
+                        <el-form-item label="账款金额大写">
+                            <el-input class="zap-form-input--large" :disabled="true" :value="smallToBig(allAmount())">
                             </el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="贸易合同编号" prop="zbiContractNo" size="large">
-                            <el-input v-model="form.zbiContractNo" clearable placeholder="请输入贸易合同编号" maxlength="20" />
+                    <el-col :span="12">
+                        <el-form-item label="贸易合同编号" prop="zbiContractNo">
+                            <el-input class="zap-form-input--large" v-model="form.zbiContractNo" clearable placeholder="请输入贸易合同编号" maxlength="20" />
                         </el-form-item>
-                        <el-form-item label="贸易商品/服务" size="large">
-                            <el-input v-model="form.zbiService" clearable placeholder="请输入贸易商品/服务" maxlength="20" />
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="贸易商品/服务">
+                            <el-input class="zap-form-input--large" v-model="form.zbiService" clearable placeholder="请输入贸易商品/服务" maxlength="20" />
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="配送企业" size="large">
-                            <el-input v-model="form.zbiDistributor" clearable placeholder="请输入配送企业" maxlength="20" />
+                    <el-col :span="12">
+                        <el-form-item label="配送企业">
+                            <el-input class="zap-form-input--large" v-model="form.zbiDistributor" clearable placeholder="请输入配送企业" maxlength="20" />
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                        <el-form-item label="配送订单号" size="large">
-                            <el-input v-model="form.zbiOrderNo" clearable placeholder="请输入配送订单号" maxlength="20" />
+                    <el-col :span="12">
+                        <el-form-item label="配送订单号">
+                            <el-input class="zap-form-input--large" v-model="form.zbiOrderNo" clearable placeholder="请输入配送订单号" maxlength="20" />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -190,13 +192,11 @@
 
             <!-- 发票验真 -->
             <el-dialog title="发票验真" :visible.sync="open" width="1050px" append-to-body>
-                <el-container>
-                    <el-aside width="300px" style="background-color: white">
-                        <el-button type="primary" @click="openUploadInvoice">上传发票</el-button>
-                        <el-header style="background-color: #dfe2e8; text-align: center">
-                            <label>已上传发票列表</label>
-                        </el-header>
-                        <el-main style="height: 550px; border: groove">
+                <el-row class="zap-bill-dialog" type="flex">
+                    <div width="224px" style="background-color: white;flex: 0 0 224px;">
+                        <el-button style="width: 224px;" type="primary" @click="openUploadInvoice">上传发票</el-button>
+                        <div class="zap-bill-dialog__main">
+                            <div class="zap-bill-dialog__title">发票列表</div>
                             <div :style="
                     item.ziiCheckStt == '1'
                       ? { 'background-color': '#a8f87f' }
@@ -219,50 +219,64 @@
                                     </label><label>{{ checkSttFormat(item) }}</label></i>
                                 <el-link style="float: right" type="primary" :underline="false" @click="delInvoice(item)">删除</el-link>
                             </div>
-                        </el-main>
-                        <div style="text-align: center; margin-top: 20px">
+                        </div>
+                        <div style="text-align: center; margin-top: 24px">
                             <el-button type="primary" @click="toCheckAgian()">再次验证</el-button>
                             <el-button type="primary" @click="submitCheck()">保存并上传</el-button>
                         </div>
-                    </el-aside>
-                    <el-container>
-                        <el-header height="300px">
-                            <el-image style="width: 650px; height: 267px" :src="invoice.url" fit="scale-down" @click="invoicePictureCardPreview(invoice)"></el-image>
+                    </div>
+                    <div style="margin-left: 32px;">
+                        <el-row height="232px">
+                            <el-image style="width: 700px; height: 232px" :src="invoice.url" fit="scale-down" @click="invoicePictureCardPreview(invoice)"></el-image>
                             <p v-if="invoice.zbiName && invoice.ziiCheckStt == '3'" style="text-align: center; color: red">
                                 发票重复，已存在名称为“{{ invoice.zbiName }}”的往来账款中!
                             </p>
-                        </el-header>
-                        <el-main>
-                            <el-form ref="invoice" label-width="auto" :inline="true" label-position="top" :disabled="invoice.ziiCheckStt == '1'">
-                                <el-form-item label="发票代码：">
-                                    <el-input v-model="invoice.ziiNo" maxlength="20" />
-                                </el-form-item>
-                                <el-form-item label="发票号码：">
-                                    <el-input v-model="invoice.ziiNumber" maxlength="20" />
-                                </el-form-item>
-                                <el-form-item label="开票日期：">
-                                    <el-date-picker v-model="invoice.ziiDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
-                                    </el-date-picker>
-                                </el-form-item>
-                                <el-form-item label="购货纳税人编号：">
-                                    <el-input v-model="invoice.ziiPurchaserNo" maxlength="20" />
-                                </el-form-item>
-                                <el-form-item label="销货纳税人编号：">
-                                    <el-input v-model="invoice.ziiSellerNo" maxlength="20" />
-                                </el-form-item>
-                                <el-form-item label="发票金额：">
-                                    <el-input v-model="invoice.ziiTotalAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiTotalAmount,'0')" />
-                                </el-form-item>
-                                <el-form-item label="税价金额：">
-                                    <el-input v-model="invoice.ziiAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiAmount,'1')" />
-                                </el-form-item>
+                        </el-row>
+                        <el-row class="mt20">
+                            <el-form ref="invoice" label-width="auto" :disabled="invoice.ziiCheckStt == '1'">
+                                <el-col :span="12">
+                                   <el-form-item label="发票代码">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNo" maxlength="20" />
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="开票日期">
+                                      <el-date-picker class="zap-bill-dialog__input" v-model="invoice.ziiDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
+                                      </el-date-picker>
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="发票号码">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNumber" maxlength="20" />
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="发票金额">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiTotalAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiTotalAmount,'0')" />
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="购货纳税人编号">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiPurchaserNo" maxlength="20" />
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="税价金额">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiAmount,'1')" />
+                                  </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                  <el-form-item label="销货纳税人编号">
+                                      <el-input class="zap-bill-dialog__input" v-model="invoice.ziiSellerNo" maxlength="20" />
+                                  </el-form-item>
+                                </el-col>
                             </el-form>
-                        </el-main>
+                        </el-row>
                         <el-footer>
                             <el-button type="primary" @click="queryDouble()" style="float: right">确定</el-button>
                         </el-footer>
-                    </el-container>
-                </el-container>
+                    </div>
+                </el-row>
             </el-dialog>
         </div>
     </el-row>
@@ -652,9 +666,9 @@ export default {
                 if(e.target.value){
                    this.invoice.ziiAmount = e.target.value;
                 }else{
-                   this.invoice.ziiAmount=="0.0"; 
+                   this.invoice.ziiAmount=="0.0";
                 }
-               
+
             }
         },
         //表格置灰
@@ -1254,4 +1268,24 @@ export default {
     padding: 30px;
     text-align: center;
 }
+.zap-bill-dialog{
+  padding: 25px 40px 35px;
+}
+.zap-bill-dialog__main{
+  height: 408px;
+  margin-top: 16px;
+  border-radius: 4px;
+  border: 1px dashed #4280F2;
+}
+.zap-bill-dialog__title{
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-size: 12px;
+  color: #4280F2;
+  background-color: #EBF3FF;
+}
+.zap-bill-dialog__input{
+  width: 200px !important;
+}
 </style>