往来账款功能页面修改

front-vue/src/api/service/bill/bill.js

@@ -20,7 +20,7 @@ export function getBill(zbiId) {
 // 往来账款发票金额计算
 export function getAmount(data) {
   return request({
-    url: '/sc-service/ownBill/getAmount/',
+    url: '/sc-service/ownBill/getAmount',
     method: 'post',
     data: data
   })
@@ -95,10 +95,11 @@ export function delFile(ids) {
 }
 
 // 提交往来账款信息
-export function commitBill(zbiId) {
+export function commitBill(data) {
   return request({
-    url: '/sc-service/ownBill/commitBill/' + zbiId,
-    method: 'post'
+    url: '/sc-service/ownBill/commitBill',
+    method: 'post',
+    data: data
   })
 }
 

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

@@ -1,294 +1,283 @@
 <template>
   <div class="app-container">
-    <el-container>
-      <el-container>
-        <el-aside
-          style="
-            background-color: white;
-            line-height: 0px;
-            width: 300px;
-            height: 400px;
-          "
+    <el-card class="box-card" style="margin: 0.6%">
+      <div class="text item">
+        <el-form ref="bill" label-width="auto" :inline="true">
+          <el-form-item label="创建人：" style="float: right">{{
+            form.createUser
+          }}</el-form-item>
+          <el-form-item label="创建时间：" style="float: right">{{
+            parseTime(new Date(form.createTime))
+          }}</el-form-item>
+          <el-form-item label="编号：" style="float: right">{{
+            form.zbiNumber
+          }}</el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold">基本信息</span>
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-form
+          ref="form"
+          :model="form"
+          label-width="auto"
+          label-position="top"
+          :inline="true"
+          :disabled="true"
         >
-          <el-steps
-            :active="active"
-            direction="vertical"
-            process-status="finish"
-            finish-status="success"
+          <el-form-item label="账款类型" prop="wplIsInput" style="width: 300px">
+            <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-form-item label="账款名称" prop="zbiName">
+            <el-input
+              v-model="form.zbiName"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="应付方" prop="zbiPayerId">
+            <el-input
+              v-model="form.payerName"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="贸易日期" prop="zbiDate">
+            <el-date-picker
+              style="width: 300px"
+              v-model="form.zbiDate"
+              value-format="yyyy-MM-dd"
+              type="date"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item
+            :label="
+              type == '00'
+                ? '预计付款日期'
+                : type == '01'
+                ? '预计收款日期'
+                : '预计收/付款日期'
+            "
+            prop="zbiPayDate"
           >
-            <el-step title="基本信息"></el-step>
-            <el-step title="发票列表"></el-step>
-            <el-step title="合同附件"></el-step>
-            <el-step title="物流附件"></el-step>
-            <el-step title="其他附件"></el-step>
-          </el-steps>
-        </el-aside>
-        <el-main>
-            <el-form ref="bill" label-width="auto" :inline="true" style="margin-bottom:50px">
-              <el-form-item label="创建人：" style="float: right">{{ form.createUser }}</el-form-item>
-              <el-form-item label="创建时间：" style="float: right">{{ parseTime(new Date(form.createTime)) }}</el-form-item>
-              <el-form-item label="编号：" style="float: right">{{ form.zbiNumber }}</el-form-item>
-            </el-form>
-          <!-- 基本信息 -->
-          <div v-if="active == 0">
-            <el-divider content-position="left">基本信息</el-divider>
-            <el-form
-              ref="form"
-              :model="form"
-              label-width="auto"
-              label-position="top"
-              :inline="true"
+            <el-date-picker
+              style="width: 300px"
+              v-model="form.zbiPayDate"
+              value-format="yyyy-MM-dd"
+              type="date"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="应收方" prop="zbiPayeeId">
+            <el-input
+              v-model="form.payeeName"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="金额" prop="zbiAmount">
+            <el-input
+              v-model="form.zbiAmount"
+              maxlength="20"
+              style="width: 300px"
+            >
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="金额大写">
+            <el-input
               :disabled="true"
+              :value="smallToBig(form.zbiAmount)"
+              style="width: 300px"
             >
-              <el-form-item
-                label="账款类型"
-                prop="wplIsInput"
-                style="width: 300px"
-              >
-                <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-form-item label="账款名称" prop="zbiName">
-                <el-input
-                  v-model="form.zbiName"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="应付方" prop="zbiPayerId">
-                <el-input
-                  v-model="form.payerName"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="贸易日期" prop="zbiDate">
-                <el-date-picker
-                  style="width: 300px"
-                  v-model="form.zbiDate"
-                  value-format="yyyy-MM-dd"
-                  type="date"
-                >
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item
-                :label="
-                  type == '00'
-                    ? '预计付款日期'
-                    : type == '01'
-                    ? '预计收款日期'
-                    : '预计收/付款日期'
-                "
-                prop="zbiPayDate"
-              >
-                <el-date-picker
-                  style="width: 300px"
-                  v-model="form.zbiPayDate"
-                  value-format="yyyy-MM-dd"
-                  type="date"
-                >
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="应收方" prop="zbiPayeeId">
-                <el-input
-                  v-model="form.payeeName"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="金额" prop="zbiAmount">
-                <el-input
-                  v-model="form.zbiAmount"
-                  maxlength="20"
-                  style="width: 300px"
-                >
-                  <template slot="append">元</template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="合同编号" prop="zbiContractNo">
-                <el-input
-                  v-model="form.zbiContractNo"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="账款服务">
-                <el-input
-                  v-model="form.zbiService"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="配送订单">
-                <el-input
-                  v-model="form.zbiOrderNo"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="配送企业">
-                <el-input
-                  v-model="form.zbiDistributor"
-                  maxlength="20"
-                  style="width: 300px"
-                />
-              </el-form-item>
-              <el-form-item label="备注">
-                <el-input
-                  v-model="form.zbiRemark"
-                  :autosize="{ minRows: 2, maxRows: 4 }"
-                  maxlength="100"
-                  type="textarea"
-                  style="width: 615px"
-                />
-              </el-form-item>
-            </el-form>
-          </div>
-          <!-- 发票列表 -->
-          <div v-if="active == 1">
-            <el-divider content-position="left">发票列表</el-divider>
-            <el-form ref="invoice" label-width="auto" :inline="true">
-              <el-form-item label="合计：">{{ handleInput(allAmount()) }}</el-form-item>
-              <el-form-item label="大写：">{{ smallToBig(allAmount()) }}</el-form-item>
-            </el-form>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="合同编号" prop="zbiContractNo">
+            <el-input
+              v-model="form.zbiContractNo"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="账款服务">
+            <el-input
+              v-model="form.zbiService"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="配送订单">
+            <el-input
+              v-model="form.zbiOrderNo"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="配送企业">
+            <el-input
+              v-model="form.zbiDistributor"
+              maxlength="20"
+              style="width: 300px"
+            />
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input
+              v-model="form.zbiRemark"
+              :autosize="{ minRows: 2, maxRows: 4 }"
+              maxlength="100"
+              type="textarea"
+              style="width: 615px"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold">发票列表</span>
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-form ref="invoice" label-width="auto" :inline="true">
+          <el-form-item label="合计：">{{
+            handleInput(allAmount())
+          }}</el-form-item>
+          <el-form-item label="大写：">{{
+            smallToBig(allAmount())
+          }}</el-form-item>
+        </el-form>
 
-            <el-table
-              stripe
-              :data="fileList"
-              row-key="ziiId"
-              default-expand-all
-              border
-            >
-              <el-table-column
-                type="index"
-                width="50"
-                align="center"
-              />
-              <el-table-column
-                label="发票代码"
-                align="center"
-                prop="ziiNo"
-                maxlength="10"
-              />
-              <el-table-column
-                label="发票号码"
-                align="center"
-                prop="ziiNumber"
-                maxlength="10"
-              />
-              <el-table-column label="开票日期" align="center" prop="ziiDate" />
-              <el-table-column
-                label="购方识别号"
-                align="center"
-                prop="ziiPurchaserNo"
-              />
-              <el-table-column
-                label="销方识别号"
-                align="center"
-                prop="ziiSellerNo"
-              />
-              <el-table-column
-                label="合计金额"
-                align="center"
-                prop="ziiTotalAmount"
-              />
-              <el-table-column
-                label="价税合计"
-                align="center"
-                prop="ziiAmount"
-              />
-              <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"
+        <el-table
+          stripe
+          :data="fileList"
+          row-key="ziiId"
+          default-expand-all
+          border
+        >
+          <el-table-column type="index" width="50" align="center" />
+          <el-table-column
+            label="发票代码"
+            align="center"
+            prop="ziiNo"
+            maxlength="10"
+          />
+          <el-table-column
+            label="发票号码"
+            align="center"
+            prop="ziiNumber"
+            maxlength="10"
+          />
+          <el-table-column label="开票日期" align="center" prop="ziiDate" />
+          <el-table-column
+            label="购方识别号"
+            align="center"
+            prop="ziiPurchaserNo"
+          />
+          <el-table-column
+            label="销方识别号"
+            align="center"
+            prop="ziiSellerNo"
+          />
+          <el-table-column
+            label="合计金额"
+            align="center"
+            prop="ziiTotalAmount"
+          />
+          <el-table-column label="价税合计" align="center" prop="ziiAmount" />
+          <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
               >
-                <template slot-scope="scope">
-                  <el-button
-                    size="mini"
-                    type="text"
-                    @click="invoicePictureCardPreview(scope.row)"
-                    >详情</el-button
-                  >
-                </template>
-              </el-table-column>
-            </el-table>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold">合同附件</span>
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-upload
+          :disabled="true"
+          :file-list="contractList"
+          :auto-upload="false"
+          action=""
+          ref="contractUpload"
+          list-type="picture-card"
+          :on-preview="invoicePictureCardPreview"
+        >
+        </el-upload>
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold">物流附件</span>
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-upload
+          :disabled="true"
+          :file-list="logisticsList"
+          :auto-upload="false"
+          action=""
+          ref="logisticsUpload"
+          list-type="picture-card"
+          :on-preview="invoicePictureCardPreview"
+        >
+        </el-upload>
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold">其他附件</span>
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-upload
+          :disabled="true"
+          :file-list="otherList"
+          :auto-upload="false"
+          action=""
+          ref="otherUpload"
+          list-type="picture-card"
+          :on-preview="invoicePictureCardPreview"
+        >
+        </el-upload>
+      </div>
+    </el-card>
 
-          </div>
-          <!-- 合同附件 -->
-          <div v-if="active == 2">
-            <el-divider content-position="left">合同附件</el-divider>
-            <el-upload
-              :disabled="true"
-              :file-list="contractList"
-              :auto-upload="false"
-              action=""
-              ref="contractUpload"
-              list-type="picture-card"
-              :on-preview="invoicePictureCardPreview">
-            </el-upload>
-          </div>
-          <!-- 物流附件 -->
-          <div v-if="active == 3">
-            <el-divider content-position="left">物流附件</el-divider>
-            <el-upload
-              :disabled="true"
-              :file-list="logisticsList"
-              :auto-upload="false"
-              action=""
-              ref="logisticsUpload"
-              list-type="picture-card"
-              :on-preview="invoicePictureCardPreview">
-            </el-upload>
-          </div>
-          <!-- 其他附件 -->
-          <div v-if="active == 4">
-            <el-divider content-position="left">其他附件</el-divider>
-            <el-upload
-              :disabled="true"
-              :file-list="otherList"
-              :auto-upload="false"
-              action=""
-              ref="otherUpload"
-              list-type="picture-card"
-              :on-preview="invoicePictureCardPreview">
-            </el-upload>
-          </div>
-        </el-main>
-      </el-container>
-    </el-container>
-    
     <!-- 查看图片 -->
     <el-dialog :visible.sync="invoiceVisible">
       <img width="100%" :src="invoiceImageUrl" alt="" />
     </el-dialog>
 
     <div style="text-align: center">
-      <el-button type="primary" @click="back()" v-if="active != 0"
-        >查看上一步</el-button
-      >
-      <el-button type="primary" @click="next()" v-if="active != 4"
-      v-loading.fullscreen.lock="fullscreenLoading"
-        >查看下一步</el-button
-      >
-      <el-button type="primary" @click="submit()" v-if="active == 4"
-        >关闭</el-button
-      >
+      <el-button type="primary" @click="submit()">关闭</el-button>
     </div>
   </div>
 </template>
@@ -298,13 +287,10 @@ import {
   getBill,
   getInvoice,
   getFile,
-  commitBill
+  commitBill,
 } from "@/api/service/bill/bill";
-import {
-  getOwnCompany,
-companyRelList
-} from "@/api/common/company";
-import { amtformat } from "@/utils/amtCommon"
+import { getOwnCompany, companyRelList } from "@/api/common/company";
+import { amtformat } from "@/utils/amtCommon";
 import { getToken } from "@/utils/auth";
 
 export default {
@@ -315,8 +301,7 @@ export default {
       // 查询参数
       queryParams: {},
       // 表单参数
-      form: {
-      },
+      form: {},
       //进度
       active: 0,
       //类型
@@ -340,21 +325,49 @@ export default {
       //等待框
       fullscreenLoading: false,
       //链属企业
-      companyRelList:[],
+      companyRelList: [],
       //链属企业
-      company:{},
+      company: {},
     };
   },
   created() {
     //进度
     this.active = 0;
     const zbiId = this.$route.params && this.$route.params.zbiId;
-    this.fullscreenLoading = true
+    this.fullscreenLoading = true;
     getOwnCompany().then((response) => {
       this.company = response.data;
     });
-    this.getCompanyRel()
-    this.getDetail(zbiId)
+    this.getCompanyRel();
+    this.getDetail(zbiId);
+    getInvoice(zbiId).then((response) => {
+      response.data.forEach((element) => {
+        element.url = element.url + "/" + getToken();
+      });
+      this.fileList = response.data;
+      this.invoice = this.fileList[0] ? this.fileList[0] : {};
+      this.ids = [];
+    });
+    getFile("0", zbiId).then((response) => {
+      response.data.forEach((element) => {
+        element.url = element.url + "/" + getToken();
+      });
+      this.contractList = response.data;
+    });
+    //查询物流
+    getFile("1", zbiId).then((response) => {
+      response.data.forEach((element) => {
+        element.url = element.url + "/" + getToken();
+      });
+      this.logisticsList = response.data;
+    });
+    //查询其他附件
+    getFile("2", zbiId).then((response) => {
+      response.data.forEach((element) => {
+        element.url = element.url + "/" + getToken();
+      });
+      this.otherList = response.data;
+    });
     this.getDicts("zc_invoice_checkStt").then((response) => {
       this.checkSttOptions = response.data;
     });
@@ -362,20 +375,29 @@ export default {
   activated() {},
   methods: {
     //查询往来账款详情
-    getDetail(zbiId){
+    getDetail(zbiId) {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
       getBill(zbiId).then((response) => {
         this.form = response.data;
-        if(this.form.zbiPayerId == this.company.scyId){
-          this.type = "00"
-        }else{
-          this.type = "01"
+        if (this.form.zbiPayerId == this.company.scyId) {
+          this.type = "00";
+        } else {
+          this.type = "01";
         }
-        this.fullscreenLoading = false
-      });
+          loading.close();
+      })
+        .catch(() => {
+          loading.close();
+        });
     },
     //查询链属企业
-    getCompanyRel(val){
-      this.queryParams.companyName = val
+    getCompanyRel(val) {
+      this.queryParams.companyName = val;
       companyRelList(this.queryParams).then((response) => {
         this.companyRelList = response.data;
       });
@@ -387,82 +409,17 @@ export default {
     },
     //发票合计
     allAmount() {
-      var strarr = [0.00];
+      var strarr = [0.0];
       for (let i in this.fileList) {
         strarr.push(this.fileList[i]["ziiAmount"]);
       }
       return Math.floor(eval(strarr.join("+")) * 100) / 100; //结果
       // return this.handleInput(eval(strarr.join("+"))); //结果
     },
-    // 下一步
-    next() {
-      this.fullscreenLoading = true
-      if (this.active == 0) {
-        this.getInvoiceList();
-        this.active++;
-      } else if(this.active == 1) {
-        //查询合同
-        getFile("0",this.form.zbiId).then((response) => {
-          response.data.forEach(element => {
-              element.url = element.url + "/" + getToken()
-          });
-          this.contractList = response.data;
-          this.fullscreenLoading = false
-        }).catch(() => {
-          this.fullscreenLoading = false
-        })
-        this.active++;
-      } else if(this.active == 2) {
-        //查询物流
-        getFile("1",this.form.zbiId).then((response) => {
-          response.data.forEach(element => {
-              element.url = element.url + "/" + getToken()
-          });
-          this.logisticsList = response.data;
-          this.fullscreenLoading = false
-        }).catch(() => {
-          this.fullscreenLoading = false
-        })
-        this.active++;
-      } else if(this.active == 3) {
-        //查询其他附件
-        getFile("2",this.form.zbiId).then((response) => {
-          response.data.forEach(element => {
-              element.url = element.url + "/" + getToken()
-          });
-          this.otherList = response.data;
-          this.fullscreenLoading = false
-        }).catch(() => {
-          this.fullscreenLoading = false
-        })
-        this.active++;
-      } else {
-        this.fullscreenLoading = false
-        this.active++;
-      }
-    },
-    //查询合同
-    getInvoiceList(){
-      getInvoice(this.form.zbiId).then((response) => {
-        response.data.forEach(element => {
-            element.url = element.url + "/" + getToken()
-        });
-        this.fileList = response.data;
-        this.fullscreenLoading = false
-      }).catch(() => {
-        this.fullscreenLoading = false
-      });
-    },
-    // 上一步
-    back() {
-      this.active--;
-    },
     // 结束
     submit() {
-      commitBill(this.form.zbiId).then((response) => {
-        this.$store.dispatch("tagsView/delView", this.$route);
-        this.$router.go(-1);
-      });
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.go(-1);
     },
     //校验结果字典
     checkSttFormat(row, column) {
@@ -470,13 +427,23 @@ export default {
     },
     /* 金额展示 */
     handleInput(str) {
-        return amtformat(str,2, ".", ",");
+      return amtformat(str, 2, ".", ",");
     },
     /* //  将数字金额转换为大写金额 */
     smallToBig(money) {
       //  将数字金额转换为大写金额
       var cnNums = new Array(
-        "零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖" ); //汉字的数字
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖"
+      ); //汉字的数字
       var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
       var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
       var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位