合同和发票联动

src/views/base/dataComparison-main.vue

@@ -20,10 +20,20 @@
       class="demo-form-inline"
     >
       <el-form-item label="合同号" prop="contractCode">
-        <el-input type="text" size="mini" placeholder="请输入合同号" v-model="queryModel.contractCode"></el-input>
+        <el-input
+          type="text"
+          size="mini"
+          placeholder="请输入合同号"
+          v-model="queryModel.contractCode"
+        ></el-input>
       </el-form-item>
       <el-form-item label="发票号" prop="invoiceCode">
-        <el-input type="text" size="mini" placeholder="请输入发票号" v-model="queryModel.invoiceCode"></el-input>
+        <el-input
+          type="text"
+          size="mini"
+          placeholder="请输入发票号"
+          v-model="queryModel.invoiceCode"
+        ></el-input>
       </el-form-item>
       <el-form-item label="供应商" prop="supplier">
         <el-select
@@ -34,57 +44,113 @@
         >
           <el-option
             v-for="supplier in suppliers"
-            :key="supplier.value"
-            :label="supplier.name"
-            :value="supplier.value"
+            :key="supplier.cvenCode"
+            :label="supplier.cvenName"
+            :value="supplier.cvenCode"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" size="mini" icon="ios-search" @click="changePage()" :loading="loading">查询</el-button>&nbsp;
-        <el-button type="info" size="mini" style="margin-left: 8px" @click="handleReset('queryForm')">重置</el-button>&nbsp;
+        <el-button
+          type="primary"
+          size="mini"
+          icon="ios-search"
+          @click="changePage()"
+          >查询</el-button
+        >&nbsp;
+        <el-button
+          type="info"
+          size="mini"
+          style="margin-left: 8px"
+          @click="handleReset('queryForm')"
+          >重置</el-button
+        >&nbsp;
       </el-form-item>
     </el-form>
     <el-divider></el-divider>
     <div class="container">
       <ul class="flpul">
-        <li><div class="flptit">合同信息</div>
+        <li>
+          <div class="flptit">合同信息</div>
           <div class="second">
-            <el-table :data="contractData" height="300" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column prop="auditingId" label="合同号" width="100px"></el-table-column>
-              <el-table-column prop="opinion" label="合同内容简述"></el-table-column>
+            <el-table
+              :data="contractData"
+              height="300"
+              style="width: 100%"
+              stripe
+              highlight-current-row
+              @current-change="contractHandleCurrentChange"
+            >
+              <el-table-column
+                prop="field0003"
+                label="合同号"
+                width="150px"
+              ></el-table-column>
+              <el-table-column
+                prop="field0054"
+                label="合同名称"
+              ></el-table-column>
             </el-table>
           </div>
         </li>
-        <li><div class="flptit">发票信息</div>
+        <li>
+          <div class="flptit">发票信息</div>
           <div class="second">
-            <el-table :data="invoiceData" height="300" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column prop="auditingId" label="发票号" width="100px"></el-table-column>
-              <el-table-column prop="opinion" label="供应商"></el-table-column>
+            <el-table
+              :data="purBillVouchData"
+              height="300"
+              style="width: 100%"
+              stripe
+              highlight-current-row
+              @current-change="purBillVouchHandleCurrentChange"
+            >
+              <el-table-column
+                prop="cpbvcode"
+                label="发票号"
+                width="150px"
+              ></el-table-column>
+              <el-table-column prop="cvenName" label="供应商"></el-table-column>
             </el-table>
           </div>
         </li>
       </ul>
       <div class="bxo">
         <div class="flptit">审批流程图</div>
-        <div class="second1" style="margin-left:30px;">
+        <div class="second1" style="margin-left: 30px">
           <el-steps :active="0" align-center>
-            <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
-            <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
-            <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
-            <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
+            <el-step
+              title="步骤1"
+              description="这是一段很长很长很长的描述性文字"
+            ></el-step>
+            <el-step
+              title="步骤2"
+              description="这是一段很长很长很长的描述性文字"
+            ></el-step>
+            <el-step
+              title="步骤3"
+              description="这是一段很长很长很长的描述性文字"
+            ></el-step>
+            <el-step
+              title="步骤4"
+              description="这是一段很长很长很长的描述性文字"
+            ></el-step>
           </el-steps>
         </div>
       </div>
       <div class="bxo">
         <div class="flptit">对比结果显示</div>
-        <div class="second fjjksdfjk" style="margin-left:30px;">
-          <el-table :data="contractData" height="300" style="width: 100%" v-loading="loading" stripe>
-              <el-table-column prop="auditingId" label="对比项"></el-table-column>
-              <el-table-column prop="opinion" label="合同值"></el-table-column>
-              <el-table-column prop="opinion" label="发票值"></el-table-column>
-              <el-table-column prop="opinion" label="对比结果"></el-table-column>
-            </el-table>
+        <div class="second fjjksdfjk" style="margin-left: 30px">
+          <el-table
+            :data="contractData"
+            height="300"
+            style="width: 100%"
+            stripe
+          >
+            <el-table-column prop="auditingId" label="对比项"></el-table-column>
+            <el-table-column prop="opinion" label="合同值"></el-table-column>
+            <el-table-column prop="opinion" label="发票值"></el-table-column>
+            <el-table-column prop="opinion" label="对比结果"></el-table-column>
+          </el-table>
         </div>
       </div>
     </div>
@@ -108,68 +174,103 @@ export default {
         invoiceCode: "",
         supplier: "",
       },
-      loading: false,
       field: "",
       suppliers: [],
       contractData: [],
-      invoiceData: [],
+      purBillVouchData: [],
+      contractCurrentRow: "",
+      purBillVouchCurrentRow: "",
     };
   },
   methods: {
     changePage() {
       var self = this;
+      var contractCode = self.queryModel.contractCode;
+      var invoiceCode = self.queryModel.invoiceCode;
+      var supplier = self.queryModel.supplier;
 
-      self.loading = true;
-
-      var formData = new FormData();
-      formData.append("contractCode", self.queryModel.contractCode);
-      formData.append("invoiceCode", self.queryModel.invoiceCode);
-      formData.append("supplier", self.queryModel.supplier);
-
-      formmain1970Api.pageList(formData).then(function (response) {
-        self.loading = false;
-
-        var jsonData = response.data.data;
-
-        self.contractData = jsonData.data;
-      })
-      .catch((error) => {
-        self.loading = false;
-        // self.$message.error(error + "");
-      });
-
-      purBillVouchApi.pageList(formData).then(function (response) {
-        self.loading = false;
+      //合同列表
+      if (contractCode != "" || supplier != "") {
+        var formData1 = new FormData();
+        formData1.append("contractCode", contractCode);
+        formData1.append("supplier", supplier);
+        formmain1970Api
+          .pageList(formData1)
+          .then(function (response) {
+            var jsonData = response.data.data;
+            self.contractData = jsonData.data;
+          })
+          .catch((error) => {
+            // self.$message.error(error + "");
+          });
+      }
 
-        var jsonData = response.data.data;
+      //发票列表
+      if (invoiceCode != "" || supplier != "") {
+        var formData2 = new FormData();
+        formData2.append("invoiceCode", invoiceCode);
+        formData2.append("supplier", supplier);
+        purBillVouchApi
+          .pageList(formData2)
+          .then(function (response) {
+            var jsonData = response.data.data;
+            self.purBillVouchData = jsonData.data;
+          })
+          .catch((error) => {
+            // self.$message.error(error + "");
+          });
+      }
 
-        self.invoiceData = jsonData.data;
-      })
-      .catch((error) => {
-        self.loading = false;
-        // self.$message.error(error + "");
-      });
+      if (contractCode == "" && invoiceCode == "" && supplier == "") {
+        self.contractData = [];
+        self.purBillVouchData = [];
+      }
     },
     handleReset(name) {
       this.$refs[name].resetFields();
     },
+    contractHandleCurrentChange(val) {
+      this.contractCurrentRow = val;
+    },
+    purBillVouchHandleCurrentChange(val) {
+      this.purBillVouchCurrentRow = val;
+    },
   },
   mounted: function () {
     //工作流程选项
     var formData = new FormData();
     // formData.append("orgId",newVal);
 
-    vendorApi.query(formData).then(response=>{
+    vendorApi.query(formData).then((response) => {
       var jsonData = response.data;
 
-      if(jsonData.result){
+      if (jsonData.result) {
         this.suppliers = jsonData.data;
-      }
-      else{
+      } else {
         this.$message.error(jsonData.message + "");
       }
     });
   },
+  watch: {
+    contractCurrentRow(newVal, oldVal) {
+      var self = this;
+      var formData = new FormData();
+      formData.append("contractCode", newVal.field0003);
+      purBillVouchApi
+      .pageList(formData)
+      .then(function (response) {
+        var jsonData = response.data.data;
+        self.purBillVouchData = jsonData.data;
+        console.log(self.purBillVouchData);
+      })
+      .catch((error) => {
+        // self.$message.error(error + "");
+      });
+    },
+    purBillVouchCurrentRow(newVal, oldVal) {
+      console.log(newVal);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -181,13 +282,18 @@ export default {
 .el-divider {
   margin: 5px 0;
 }
-ul,li,div,a,p,span{
+ul,
+li,
+div,
+a,
+p,
+span {
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
 }
-.flptit{
+.flptit {
   font-size: 16px;
   font-weight: bold;
   height: 60px;
@@ -195,50 +301,49 @@ ul,li,div,a,p,span{
   text-align: left;
   padding-left: 30px;
 }
-.flpul{
+.flpul {
   display: flex;
   padding-left: 30px;
-
 }
-.flpbuttons{
+.flpbuttons {
   display: flex;
 }
-.flpbuttons p{
+.flpbuttons p {
   width: 25%;
   padding: 30px 0 50px 0;
 }
-.container{
+.container {
   padding: 0 30px 30px 0;
 }
-.bxo{
+.bxo {
   margin-top: 50px;
 }
-.flpbuttons p button{
+.flpbuttons p button {
   border: none;
   padding: 10px 40px;
   font-size: 15px;
   color: #ffffff;
-     background-color: #3385FF;
+  background-color: #3385ff;
 }
-.flpul li{
+.flpul li {
   width: 50%;
   margin-left: 10px;
 }
-.flpul li .flptit{
+.flpul li .flptit {
   padding-left: 0;
 }
-.flpul li:first-child{
+.flpul li:first-child {
   margin-right: 10px;
 }
-.second{
+.second {
   height: 300px;
-  border: 2px solid #DCDFE6;
+  border: 2px solid #dcdfe6;
 }
-.second1{
+.second1 {
   height: 150px;
-  border: 2px solid #DCDFE6;
+  border: 2px solid #dcdfe6;
 }
-.fjjksdfjk{
+.fjjksdfjk {
   text-align: left;
 }
 .demo-form-inline {