新增会议、项目详情、表格状态插槽

src/components/ProjectDetailModal.vue

@@ -8,7 +8,7 @@
       cancelText="关闭">
     <!-- 基本信息begin-->
     <section class="base-info">
-      <h3>基本信息</h3>
+      <h3 class="title">基本信息</h3>
       <a-row :gutter="24">
         <a-col :span="12">
           <label>项目负责人:</label>
@@ -29,7 +29,7 @@
     <!-- 基本信息end-->
     <!-- 企业信息begin-->
     <section class="enterprise-info">
-      <h3>企业信息</h3>
+      <h3 class="title">企业信息</h3>
       <a-row :gutter="24">
         <a-col :span="12">
           <label>来款企业:</label>
@@ -94,19 +94,29 @@
     <!--企业信息end-->
     <!--到账信息begin-->
     <section class="payment-info">
-      <h3>到账信息</h3>
-      <a-row :gutter="24" v-for="item of paymentInfoList" :key="item.id">
-        <a-col>2021年到账200元</a-col>
-      </a-row>
+      <h3 class="title">到账信息</h3>
+      <section class="payment-info-title">到账信息</section>
+      <div class="payment-info-content" v-for="item of paymentInfoList" :key="item.id">2021年到账200元</div>
     </section>
     <!--到账信息end-->
     <!--开票邮寄信息begin-->
     <section class="logistics-info">
-      <h3>开票邮寄信息</h3>
-      <a-row :gutter="24" v-for="item of logisticsInfoList" :key="item.id">
-        <a-col :span="24" v-text="createItemInfo(item)"></a-col>
-        <a-col :span="24"></a-col>
-      </a-row>
+      <h3 class="title">开票邮寄信息</h3>
+      <div class="wrap-table">
+        <a-table
+            ref="table"
+            size="middle"
+            rowKey="id"
+            :pagination="false"
+            :columns="columns"
+            :dataSource="logisticsInfoList"
+            class="j-table-force-nowrap"
+        >
+        <span slot="action" slot-scope="text, record" class="action-span-cell">
+          <a @click="lookLogistics()">查看物流</a>
+        </span>
+        </a-table>
+      </div>
     </section>
     <!--开票邮寄信息end-->
     <template slot="footer">
@@ -148,6 +158,54 @@ const logisticsInfoList = [
     postNo: "123456"
   }
 ]
+const columns = [
+  {
+    title: '开票人',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '日期',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '金额(元)',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '票号',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '项目',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '邮寄人',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '快递',
+    align: "center",
+    dataIndex: '',
+  },
+  {
+    title: '快递单号',
+    align: "center",
+    dataIndex: 'piaoNo',
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: '',
+    scopedSlots: {customRender: 'action'}
+  },
+]
 export default {
   name: "ProjectDetailModal",
   data() {
@@ -162,6 +220,7 @@ export default {
       basicInfo: {},
       // 企业信息
       enterpriseInfo: {},
+      columns,
       // 到账信息
       paymentInfoList,
       // 开票邮寄信息
@@ -192,13 +251,84 @@ export default {
         })
       }
       return `${item.person}于${item.time}开票，金额为:${item.money}元,票号:${item.piaoNo},项目:${porjectItem}`
+    },
+    /*
+    *  查看物流
+    * */
+    lookLogistics() {
+      window.open("http://www.api.kuaidi100.com", "_blank")
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .ant-row {
   margin: 12px;
 }
+
+h3 {
+  position: relative;
+}
+
+label {
+  color: #666;
+}
+
+h3.title::before {
+  position: absolute;
+  top: 4px;
+  left: -10px;
+  content: "";
+  height: 20px;
+  width: 2px;
+  background: #069f99;
+}
+
+/* 到账信息 */
+.payment-info {
+  margin-bottom: 14px;
+
+  &-title {
+    text-align: center;
+    font-size: 14px;
+    height: 35px;
+    line-height: 35px;
+    letter-spacing: 1px;
+    color: #fff;
+    background: #069f99;
+  }
+
+  &-content {
+    color: #424242;
+    background: #efefef;
+    padding: 5px;
+    padding-left: 10px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+
+
+}
+
+/*  开票邮寄信息 */
+.wrap-table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+
+/deep/ .ant-table-thead {
+  tr > th {
+    color: #fff;
+    background: #069f99;
+    border: none;
+  }
+}
+
+/deep/ .ant-table-tbody {
+  tr > td {
+    border: none;
+    border-bottom: 1px solid #ccc;
+  }
+}
 </style>