From b277466d74458867d892388c6ab279374fbe6529 Mon Sep 17 00:00:00 2001
From: chenjianan <chenjianan@meswork.com>
Date: Fri, 21 Dec 2018 08:54:10 +0800
Subject: [PATCH] table style

---
 .../PurchasingCenter/PayStateSearch/index.vue | 54 +++++++++-----
 .../PurchaseContractApproval/index.vue        | 60 ++++++++-------
 .../PurchaseContractSearch/index.vue          | 70 +++++++++---------
 .../PurchaseInvoiceDelivery/index.vue         | 74 +++++++++++--------
 4 files changed, 144 insertions(+), 114 deletions(-)

diff --git a/src/views/PurchasingCenter/PayStateSearch/index.vue b/src/views/PurchasingCenter/PayStateSearch/index.vue
index fe61db07..c778248f 100644
--- a/src/views/PurchasingCenter/PayStateSearch/index.vue
+++ b/src/views/PurchasingCenter/PayStateSearch/index.vue
@@ -24,6 +24,37 @@
 
     <el-card>
       <el-table v-loading="" :data="tableData1" stripe border style="width: 100%;max-height: 500px;" height="500px" size="mini">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-row>
+                <el-form-item label="交货日期">
+                  {{ scope.row.交货日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付日期">
+                  {{ scope.row.支付日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付方式">
+                  {{ scope.row.支付方式 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开票信息">
+                  {{ scope.row.开票信息 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="其他说明">
+                  {{ scope.row.其他说明 }}
+                </el-form-item>
+              </el-row>
+            </el-form>
+          </template>
+        </el-table-column>
         <el-table-column label="采购合同号" align="center" min-width="100">
           <template slot-scope="scope">
             {{ scope.row.采购合同编号 }}
@@ -44,26 +75,6 @@
             {{ scope.row.姓名 }}
           </template>
         </el-table-column>
-        <el-table-column label="交货日期" align="center" min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.交货日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付日期" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付方式" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付方式 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="其他说明" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.其他说明 }}
-          </template>
-        </el-table-column>
         <el-table-column label="合同总额" align="center" min-width="70" fixed="right">
           <template slot-scope="scope">
             {{ scope.row.合同总额 }}
@@ -189,4 +200,7 @@ export default {
   .el-tag{
     margin: 0
   }
+  .el-form-item {
+    margin: 0;
+  }
 </style>
diff --git a/src/views/PurchasingCenter/PurchaseContractApproval/index.vue b/src/views/PurchasingCenter/PurchaseContractApproval/index.vue
index dc00616f..944bf4ed 100644
--- a/src/views/PurchasingCenter/PurchaseContractApproval/index.vue
+++ b/src/views/PurchasingCenter/PurchaseContractApproval/index.vue
@@ -40,6 +40,37 @@
         height="300px"
         highlight-current-row
         @row-click="searchTable2">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-form id="table" label-position="left" inline class="demo-table-expand">
+              <el-row>
+                <el-form-item label="交货日期">
+                  {{ scope.row.交货日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付日期">
+                  {{ scope.row.支付日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付方式">
+                  {{ scope.row.支付方式 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开票信息">
+                  {{ scope.row.开票信息 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="其他说明">
+                  {{ scope.row.其他说明 }}
+                </el-form-item>
+              </el-row>
+            </el-form>
+          </template>
+        </el-table-column>
         <el-table-column label="采购合同号" align="center" min-width="130">
           <template slot-scope="scope">
             {{ scope.row.采购合同编号 }}
@@ -65,31 +96,6 @@
             {{ scope.row.合同总额 }}
           </template>
         </el-table-column>
-        <el-table-column label="交货日期" align="center" min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.交货日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付日期" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付方式" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付方式 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="开票信息" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.开票信息 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="其他说明" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.其他说明 }}
-          </template>
-        </el-table-column>
         <el-table-column label="操作" align="center" min-width="100" fixed="right">
           <template slot-scope="scope">
             <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="Open(scope.row)">审批</el-button>
@@ -286,7 +292,7 @@ export default {
   }
 </style>
 <style>
-  .tableData{
-    height: 30px;
+  #table .el-form-item {
+    margin: 0;
   }
 </style>
diff --git a/src/views/PurchasingCenter/PurchaseContractSearch/index.vue b/src/views/PurchasingCenter/PurchaseContractSearch/index.vue
index 76caa6b0..777c44f8 100644
--- a/src/views/PurchasingCenter/PurchaseContractSearch/index.vue
+++ b/src/views/PurchasingCenter/PurchaseContractSearch/index.vue
@@ -59,10 +59,41 @@
         :data="tableData1"
         size="mini"
         border
-        style="width: 100%;max-height: 300px;"
-        height="300px"
+        style="width: 100%;max-height: 350px;"
+        height="350px"
         highlight-current-row
         @row-click="searchTable2">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-row>
+                <el-form-item label="交货日期">
+                  {{ scope.row.交货日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付日期">
+                  {{ scope.row.支付日期 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="支付方式">
+                  {{ scope.row.支付方式 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="开票信息">
+                  {{ scope.row.开票信息 }}
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="其他说明">
+                  {{ scope.row.其他说明 }}
+                </el-form-item>
+              </el-row>
+            </el-form>
+          </template>
+        </el-table-column>
         <el-table-column label="审批情况" align="center" min-width="100">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.审批情况内容==='未审批'" type="warning" size="small">未审批</el-tag>
@@ -95,31 +126,6 @@
             {{ scope.row.合同总额 }}
           </template>
         </el-table-column>
-        <el-table-column label="交货日期" align="center" min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.交货日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付日期" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付日期 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="支付方式" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.支付方式 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="开票信息" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.开票信息 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="其他说明" align="center" min-width="150">
-          <template slot-scope="scope">
-            {{ scope.row.其他说明 }}
-          </template>
-        </el-table-column>
         <el-table-column label="未通过原因" align="center" min-width="200">
           <template slot-scope="scope">
             {{ scope.row.未通过原因 }}
@@ -341,13 +347,7 @@ export default {
   }
 </style>
 <style>
-  .tableData{
-    height: 30px;
-  }
-  .el-table .adopt{
-    background: limegreen;
-  }
-  .el-table .NotThrough{
-    background: palevioletred;
+  .el-form-item {
+    margin: 0;
   }
 </style>
diff --git a/src/views/PurchasingCenter/PurchaseInvoiceDelivery/index.vue b/src/views/PurchasingCenter/PurchaseInvoiceDelivery/index.vue
index f286f9d9..86a33d93 100644
--- a/src/views/PurchasingCenter/PurchaseInvoiceDelivery/index.vue
+++ b/src/views/PurchasingCenter/PurchaseInvoiceDelivery/index.vue
@@ -37,7 +37,48 @@
 
     <el-card>
       <el-table v-loading="" :data="tableData1" show-summary size="mini" style="max-height: 400px" height="400px" stripe border highlight-current-row @row-click="searchPic">
-        <el-table-column align="center" label="供应商" min-width="150px">
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-form id="table" label-position="left" inline class="demo-table-expand">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="接收人">
+                    {{ scope.row.接收人 ? scope.row.接收人 : '—' }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="接收时间">
+                    {{ scope.row.接收时间 ? scope.row.接收时间 : '—' }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="发票号">
+                    {{ scope.row.发票号 ? scope.row.发票号 : '—' }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="开户行">
+                    {{ scope.row.开户行 ? scope.row.开户行 : '—' }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="开票时间">
+                    {{ scope.row.开票时间 ? scope.row.开票时间.split(' ')[0] : '—' }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="交接状态" min-width="80px">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.接收人" type="success" size="small">已接收</el-tag>
+            <el-tag v-else type="warning" size="small">未接收</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="供应商" min-width="200px">
           <template slot-scope="scope">
             {{ scope.row.供应商名称 }}
           </template>
@@ -87,37 +128,6 @@
             {{ scope.row.传送时间 }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="交接状态" min-width="80px">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.接收人" type="success" size="small">已接收</el-tag>
-            <el-tag v-else type="warning" size="small">未接收</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="接收人" min-width="80px">
-          <template slot-scope="scope">
-            {{ scope.row.接收人 ? scope.row.接收人 : '—' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="接收时间" min-width="135px">
-          <template slot-scope="scope">
-            {{ scope.row.接收时间 ? scope.row.接收时间 : '—' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="发票号" min-width="120px">
-          <template slot-scope="scope">
-            {{ scope.row.发票号 ? scope.row.发票号 : '—' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="开户行" min-width="120px">
-          <template slot-scope="scope">
-            {{ scope.row.开户行 ? scope.row.开户行 : '—' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="开票时间" min-width="100px">
-          <template slot-scope="scope">
-            {{ scope.row.开票时间 ? scope.row.开票时间.split(' ')[0] : '—' }}
-          </template>
-        </el-table-column>
         <el-table-column align="center" label="操作" fixed="right" width="200px">
           <template slot-scope="scope">
             <el-button