往来账款详情页面样式调整

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

@@ -140,4 +140,7 @@
 .el-table .fixed-width .el-button--mini.zap-button-success{
     color: #ffffff;
     background: #00B53A;
+}
+.el-button--medium.WIDTH64{
+  min-width: 64px !important;
 }

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

@@ -0,0 +1,38 @@
+<template>
+<el-row type="flex" align="middle" justify="space-between">
+    <div class="zap-contnet-title">
+        {{title}}
+        <span v-if="desc" class="zap-content-title__desc">{{desc}}</span>
+    </div>
+    <slot></slot>
+</el-row>
+</template>
+
+<script>
+export default {
+    name: "ContentTitle",
+    props: {
+        title: String,
+        desc: String
+    }
+}
+</script>
+
+<style lang="scss">
+.zap-contnet-title {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    font-size: 16px;
+    color: #333333;
+}
+
+.zap-content-title__desc {
+    margin-left: 8px;
+    font-size: 12px;
+    color: #999999;
+}
+.zap-contnet-title + *{
+    margin-top: -6px;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="zap-content-total">
+      <div class="zap-content-total__amount">
+          <span class="zap-content-total__label">合计金额：</span>
+          <span class="zap-content-total__value">{{amount}}</span>
+          <span class="zap-content-total__label">金额大写：</span>
+          <span class="zap-content-total__value">{{words}}</span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "ContentTotal",
+    props: {
+        amount: String,
+        words: String
+    }
+}
+</script>
+
+<style lang="scss">
+.zap-content-total{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 36px;
+    margin-bottom: 24px;
+}
+.zap-content-total__label{
+    margin-left: 24px;
+    font-size: 12px;
+    color: #999999;
+}
+.zap-content-total__value{
+    font-size: 14px;
+    color: #FF2F2F;
+}
+
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <el-row class="zap-header-bar">
+        <el-row v-for="(item, index) in list" :key="index" class="zap-header-bar__item" type="flex" align="middle">
+            <span class="zap-header-bar__icon" :style="{backgroundImage: `url(${item.icon})`}"></span>
+            <span class="zap-header-bar__label">{{item.label}}</span>
+            <span class="zap-header-bar__value">{{item.value}}</span>
+        </el-row>
+    </el-row>
+</template>
+
+<script>
+export default {
+    name: "HeaderBar",
+    props: {
+        list: {
+            type: Array,
+            default () {
+                return []
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.zap-header-bar {
+    display: flex;
+    align-items: center;
+    padding: 18px 20px;
+    background-color: #ffffff;
+}
+.zap-header-bar__item{
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+    margin-right: 80px;
+}
+.zap-header-bar__icon{
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+}
+.zap-header-bar__label{
+    font-size: 14px;
+    color: #999999;
+}
+.zap-header-bar__value{
+    font-size: 14px;
+    color: #333333;
+}
+</style>

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

@@ -1,105 +1,106 @@
 <template>
 <div class="app-container zap-main">
-    <el-row class="zap-No">
-        <el-col :span="8">
-            <el-row type="flex" align="middle">
-                <img class="icon" src="../../../assets/images/icon_contract_no.png" alt="">
-                <span class="label">创建人</span>
-                <span class="value">{{form.createUser}}</span>
-            </el-row>
-        </el-col>
-        <el-col :span="8">
-            <el-row type="flex" align="middle">
-                <img class="icon" src="../../../assets/images/icon_calendar.png" alt="">
-                <span class="label">创建时间</span>
-                <span class="value">{{parseTime(new Date(form.createTime))}}</span>
-            </el-row>
-        </el-col>
-        <el-col :span="8">
-            <el-row type="flex" align="middle">
-                <img class="icon" src="../../../assets/images/icon_person.png" alt="">
-                <span class="label">编号</span>
-                <span class="value">{{form.zbiNumber}}</span>
-            </el-row>
-        </el-col>
-    </el-row>
+    <header-bar :list="headerList"></header-bar>
     <el-row class="zap-margin-top">
-        <div class="zap-title">基本信息</div>
         <el-row class="zap-form">
             <el-form ref="form" :model="form" label-width="auto" :disabled="true">
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="账款类型" prop="wplIsInput" size="large">
-                        <el-radio-group v-model="type" prop="type">
-                            <el-radio-button label="00" v-if="type == '00'">应付账款</el-radio-button>
-                            <el-radio-button label="01" v-if="type == '01'">应收账款</el-radio-button>
-                        </el-radio-group>
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="账款类型" prop="wplIsInput" size="large">
+                            <el-radio-group v-model="type" prop="type">
+                                <el-radio-button label="00" v-if="type == '00'">应付账款</el-radio-button>
+                                <el-radio-button label="01" v-if="type == '01'">应收账款</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+                    </div>
                 </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" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="账款名称" prop="zbiName" size="large">
+                            <el-input v-model="form.zbiName" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="应付方" prop="zbiPayerId" size="large">
-                        <el-input v-model="form.payerName" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="应付方" prop="zbiPayerId" size="large">
+                            <el-input v-model="form.payerName" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="应收方" prop="zbiPayeeId" size="large">
-                        <el-input v-model="form.payeeName" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="应收方" prop="zbiPayeeId" size="large">
+                            <el-input v-model="form.payeeName" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </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" value-format="yyyy-MM-dd" type="date">
-                        </el-date-picker>
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="贸易日期" prop="zbiDate" size="large">
+                            <el-date-picker v-model="form.zbiDate" value-format="yyyy-MM-dd" type="date">
+                            </el-date-picker>
+                        </el-form-item>
+                    </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item :label="
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item :label="
               type == '00'
                 ? '预计付款日期'
                 : type == '01'
                 ? '预计收款日期'
                 : '预计收/付款日期'
             " prop="zbiPayDate" size="large">
-                        <el-date-picker v-model="form.zbiPayDate" value-format="yyyy-MM-dd" type="date">
-                        </el-date-picker>
-                    </el-form-item>
+                            <el-date-picker v-model="form.zbiPayDate" value-format="yyyy-MM-dd" type="date">
+                            </el-date-picker>
+                        </el-form-item>
+                    </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                    <el-form-item label="账款金额" prop="zbiAmount" size="large">
-                        <el-input v-model="form.zbiAmount" maxlength="20">
-                            <template slot="append">元</template>
-                        </el-input>
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="账款金额" prop="zbiAmount" size="large">
+                            <el-input v-model="form.zbiAmount" maxlength="20">
+                                <template slot="append">元</template>
+                            </el-input>
+                        </el-form-item>
+                    </div>
                 </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(form.zbiAmount)">
-                        </el-input>
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="账款金额大写" size="large">
+                            <el-input :disabled="true" :value="smallToBig(form.zbiAmount)">
+                            </el-input>
+                        </el-form-item>
+                    </div>
                 </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" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="贸易合同编号" prop="zbiContractNo" size="large">
+                            <el-input v-model="form.zbiContractNo" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </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.zbiService" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="贸易商品/服务" size="large">
+                            <el-input v-model="form.zbiService" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </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" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="配送企业" size="large">
+                            <el-input v-model="form.zbiDistributor" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </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" maxlength="20" />
-                    </el-form-item>
+                <el-col :span="12">
+                    <div style="width: 420px;">
+                        <el-form-item label="配送订单号" size="large">
+                            <el-input v-model="form.zbiOrderNo" maxlength="20" />
+                        </el-form-item>
+                    </div>
                 </el-col>
                 <el-col :span="24">
                     <el-form-item label="备注" size="large">
@@ -110,18 +111,9 @@
         </el-row>
     </el-row>
     <el-row class="zap-margin-top">
-        <div class="zap-title">发票列表</div>
-        <div class="zap-form" style="padding-bottom: 20px;">
-            <el-form ref="invoice" label-width="auto" :inline="true">
-                <el-row type="flex" align="middle" justify="start">
-                    <el-form-item label="合计：">{{
-            handleInput(allAmount())
-          }}</el-form-item>
-                    <el-form-item label="大写：">{{
-            smallToBig(allAmount())
-          }}</el-form-item>
-                </el-row>
-            </el-form>
+        <div class="zap-form" style="padding-bottom: 67px;">
+            <content-title title="发票列表" desc="请填写贸易相关的发票列表"></content-title>
+            <content-total :amount="handleInput(allAmount())" :words="smallToBig(allAmount())"></content-total>
 
             <el-table :data="fileList" row-key="ziiId" default-expand-all :row-class-name="tableRowClassName" stripe="">
                 <el-table-column type="index" width="50" align="center" />
@@ -135,30 +127,36 @@
                 <el-table-column label="校验结果" align="center" prop="ziiCheckStt" :formatter="checkSttFormat" />
                 <el-table-column label="附件" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                     <template slot-scope="scope">
-                        <el-button size="mini" type="text" @click="invoicePictureCardPreview(scope.row)">详情</el-button>
+                        <el-button class="zap-button-plain" size="mini" @click="invoicePictureCardPreview(scope.row)">详情</el-button>
                     </template>
                 </el-table-column>
             </el-table>
         </div>
     </el-row>
-     <el-row class="zap-margin-top">
-        <div class="zap-title">贸易合同</div>
-        <div class="zap-form" style="padding-bottom: 20px;">
-            <el-upload :disabled="true" :file-list="contractList" :auto-upload="false" action="" ref="contractUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
+    <el-row class="zap-margin-top">
+        <div class="zap-form pt20">
+            <content-title title="贸易合同">
+                <el-button class="WIDTH64" type="success">上传</el-button>
+            </content-title>
+            <el-upload class="mt20" :disabled="true" :file-list="contractList" :auto-upload="false" action="" ref="contractUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
             </el-upload>
         </div>
     </el-row>
-   <el-row class="zap-margin-top">
-        <div class="zap-title">物流附件</div>
-        <div class="zap-form" style="padding-bottom: 20px;">
-            <el-upload :disabled="true" :file-list="logisticsList" :auto-upload="false" action="" ref="logisticsUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
+    <el-row class="zap-margin-top">
+        <div class="zap-form pt20">
+            <content-title title="物流附件">
+                <el-button class="WIDTH64" type="success">上传</el-button>
+            </content-title>
+            <el-upload class="mt20" :disabled="true" :file-list="logisticsList" :auto-upload="false" action="" ref="logisticsUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
             </el-upload>
         </div>
     </el-row>
     <el-row class="zap-margin-top">
-        <div class="zap-title">其他附件</div>
-        <div class="zap-form" style="padding-bottom: 20px;">
-            <el-upload :disabled="true" :file-list="otherList" :auto-upload="false" action="" ref="otherUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
+        <div class="zap-form" style="pt20">
+            <content-title title="其他附件">
+                <el-button class="WIDTH64" type="success">上传</el-button>
+            </content-title>
+            <el-upload class="mt20" :disabled="true" :file-list="otherList" :auto-upload="false" action="" ref="otherUpload" list-type="picture-card" :on-preview="invoicePictureCardPreview">
             </el-upload>
         </div>
     </el-row>
@@ -169,7 +167,7 @@
     </el-dialog>
 
     <el-row type="flex" justify="center" align="middle" style="height: 82px;">
-        <el-button type="primary" plain @click="submit()">取消</el-button>
+        <el-button plain @click="submit()">取消</el-button>
     </el-row>
 </div>
 </template>
@@ -191,10 +189,17 @@ import {
 import {
     getToken
 } from "@/utils/auth";
+import HeaderBar from "@/components/HeaderBar/index.vue"
+import ContentTitle from "@/components/ContentTitle/index.vue"
+import ContentTotal from "@/components/ContentTotal/index.vue"
 
 export default {
     name: "billDetail",
-    components: {},
+    components: {
+        HeaderBar,
+        ContentTitle,
+        ContentTotal
+    },
     data() {
         return {
             // 查询参数
@@ -229,6 +234,26 @@ export default {
             company: {},
         };
     },
+    computed: {
+        headerList() {
+            return [{
+                    icon: require('../../../assets/images/components/headerBar/icon_creater.png'),
+                    label: '创建人：',
+                    value: this.form.createUser
+                },
+                {
+                    icon: require('../../../assets/images/components/headerBar/icon_calendar.png'),
+                    label: '创建日期：',
+                    value: this.parseTime(new Date(this.form.createTime))
+                },
+                {
+                    icon: require('../../../assets/images/components/headerBar/icon_list.png'),
+                    label: '编号：',
+                    value: this.form.zbiNumber
+                },
+            ]
+        }
+    },
     created() {
         //进度
         this.active = 0;
@@ -322,7 +347,7 @@ export default {
             for (let i in this.fileList) {
                 if (this.fileList[i]["ziiCheckStt"] == "1") {
                     strarr.push(this.fileList[i]["ziiAmount"]);
-                 }
+                }
             }
             return (Math.round(eval(strarr.join("+")) * 100) / 100); //结果
             // return this.handleInput(eval(strarr.join("+"))); //结果
@@ -434,35 +459,6 @@ export default {
     background: rgb(223, 223, 223);
 }
 </style><style lang="scss" scoped>
-.zap-No {
-    padding: 14px 25px;
-    background-color: #ffffff;
-
-    .icon {
-        width: 18px;
-        margin-right: 10px;
-    }
-
-    .label {
-        white-space: nowrap;
-        margin-right: 8px;
-        font-size: 14px;
-        color: #999999;
-    }
-
-    .value {
-        font-size: 14px;
-        color: #333333;
-    }
-}
-
-.zap-title {
-    padding: 25px;
-    font-size: 16px;
-    color: #333333;
-    background-color: #ffffff;
-}
-
 ::v-deep .el-radio-button__inner {
     display: flex;
     align-items: center;
@@ -490,7 +486,7 @@ export default {
 }
 
 .zap-form {
-    padding: 0 25px;
+    padding: 20px;
     background-color: #ffffff;
 }
 
@@ -579,4 +575,15 @@ export default {
     padding: 30px;
     text-align: center;
 }
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 100%;
+}
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    height: 80px !important;
+    border-color: transparent;
+    background-color: #F4F5F6;
+}
 </style>