修改bug

public/cdn/iconfont/style.css

@@ -1,8 +1,9 @@
 @font-face {
   font-family: 'tradingIcon';  /* Project id 2994634 */
-  src: url('//at.alicdn.com/t/font_2994634_v80nwzwohze.woff2?t=1638864636077') format('woff2'),
-  url('//at.alicdn.com/t/font_2994634_v80nwzwohze.woff?t=1638864636077') format('woff'),
-  url('//at.alicdn.com/t/font_2994634_v80nwzwohze.ttf?t=1638864636077') format('truetype');
+  src: url('//at.alicdn.com/t/font_2994634_pu1caaeicsm.woff2?t=1641280014221') format('woff2'),
+       url('//at.alicdn.com/t/font_2994634_pu1caaeicsm.woff?t=1641280014221') format('woff'),
+       url('//at.alicdn.com/t/font_2994634_pu1caaeicsm.ttf?t=1641280014221') format('truetype');
+
 }
 .tradingIcon {
   font-family: "tradingIcon" !important;
@@ -11,7 +12,35 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
+/* 更多 */
 .icon-more:before {
   content: "\e679";
+}
+/* 销售 */
+.icon-sales:before {
+  content: "\e69a";
+}
+/* 采购 */
+.icon-purchase:before {
+  content: "\e62b";
+}
+/* 发货 */
+.icon-ship:before {
+  content: "\e699";
+}
+/* 收货 */
+.icon-receipt:before {
+  content: "\e627";
+}
+/* 申请付款 */
+.icon-apply:before {
+  content: "\e6a4";
+}
+/* 收费 */
+.icon-charge:before {
+  content: "\e633";
+}
+/* 付费 */
+.icon-pay:before {
+  content: "\e688";
 }

src/components/fee-info/main.vue

@@ -584,7 +584,6 @@ export default {
         })
       }
       this.allData.push(...this.data_one,...this.data_two)
-
       return this.allData;
     },
 

src/main.js

@@ -115,7 +115,6 @@ new Vue({
   i18n,
   render: h => h(App)
 }).$mount('#app');
-
 Vue.directive("input-limit", {
   bind(el, binding) {
     var wins_0 = /[^\d]/g //整数判断

src/views/exportTrade/customerInquiry/detailsPage.vue

@@ -22,7 +22,12 @@
         <el-button type="info" @click="saveSell" size="small"
           >生成销售单</el-button
         >
-        <el-button type="success" disabled size="small">
+        <el-button
+          type="success"
+          :disabled="!form.id"
+          size="small"
+          @click="copyDoc"
+        >
           复制单据
         </el-button>
         <el-button
@@ -969,6 +974,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    copyDoc() {
+      this.$emit('copyOrder',this.form.id)
+    },
     getCorpData(row) {
       this.form.corpAttn = null;
       this.form.corpTel = null;
@@ -1600,6 +1608,45 @@ export default {
       this.pageLoading = true;
       detail(id)
         .then(res => {
+          if (this.detailData.status == "copy") {
+            delete res.data.data.id;
+            delete res.data.data.sysNo;
+            delete res.data.data.orderNo;
+            delete res.data.data.orgOrderNo;
+            delete res.data.data.createTime;
+            delete res.data.data.createUser;
+            delete res.data.data.createUserName;
+            delete res.data.data.updateTime;
+            delete res.data.data.updateUser;
+            delete res.data.data.updateUserName;
+            delete res.data.data.morderNo;
+            delete res.data.data.status;
+            delete res.data.data.ifEnquiry;
+            delete res.data.data.ifShipping;
+            res.data.data.orderStatus = "录入";
+            res.data.data.orderItemsList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.orgOrderNo;
+              delete e.srcId;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.orderFeesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+          }
           this.form = res.data.data;
           this.data = res.data.data.orderItemsList;
           this.orderFeesList = res.data.data.orderFeesList;
@@ -1665,7 +1712,7 @@ export default {
               return this.$message.error(`请正确输入第${i + 1}行的汇率`);
             }
             if (orderFeesList[i].feesType == 1) {
-              reSum=_.add(
+              reSum = _.add(
                 reSum,
                 _.multiply(
                   numCal(orderFeesList[i].amount),
@@ -1673,8 +1720,8 @@ export default {
                 )
               );
             }
-             if (orderFeesList[i].feesType == 2) {
-              paySum=_.add(
+            if (orderFeesList[i].feesType == 2) {
+              paySum = _.add(
                 paySum,
                 _.multiply(
                   numCal(orderFeesList[i].amount),
@@ -1683,7 +1730,12 @@ export default {
               );
             }
           }
-          this.form.singleTicketMargin=STGPCal(amountSum,reSum,costSum,paySum)
+          this.form.singleTicketMargin = STGPCal(
+            amountSum,
+            reSum,
+            costSum,
+            paySum
+          );
           this.subLoading = true;
           submit({
             ...this.form,
@@ -1718,6 +1770,7 @@ export default {
     //返回列表
     backToList() {
       let orderFeesList = this.$refs.feeInfo.submitData();
+      console.log(orderFeesList, this.oldorderFeesList);
       if (
         contrastObj(this.form, this.oldform) ||
         contrastList(this.data, this.olddata) ||

src/views/exportTrade/customerInquiry/index.vue

@@ -85,7 +85,13 @@
             @click.stop="newAdd()"
             >创建单据
           </el-button>
-          <el-button type="success" size="small" disabled>复制单据</el-button>
+          <el-button
+            type="success"
+            size="small"
+            @click.stop="copyDoc()"
+            :disabled="selectionList.length != 1"
+            >复制单据</el-button
+          >
           <el-button type="info" size="small">报表</el-button>
         </template>
         <template slot="corpIdSearch">
@@ -102,7 +108,7 @@
           <span
             style="color: #409EFF;cursor: pointer"
             @click.stop="beforeOpenPage(scope.row, 1)"
-            >{{ scope.row.orderNo}}
+            >{{ scope.row.orderNo }}
           </span>
         </template>
         <template slot-scope="scope" slot="grossProfitRate">
@@ -128,6 +134,7 @@
     </basic-container>
     <detail-page
       @goBack="goBack"
+      @copyOrder="copyOrder"
       :detailData="detailData"
       v-if="!show"
     ></detail-page>
@@ -234,6 +241,7 @@ export default {
     gainUser().then(res => {
       this.findObject(this.option.column, "createUser").dicData = res.data.data;
     });
+    console.log(this.$router.data);
   },
   filters: {
     IntegerFormat(num) {
@@ -291,6 +299,25 @@ export default {
       };
       this.show = false;
     },
+    copyDoc() {
+      this.selectionList.forEach(e => {
+        this.detailData = {
+          id: e.id,
+          status: "copy"
+        };
+        this.show = false;
+      });
+    },
+    copyOrder(id) {
+      this.show = true;
+      this.detailData = {
+        id: id,
+        status: "copy"
+      };
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
     //点击搜索按钮触发
     searchChange(params, done) {
       if (params.businesDate) {

src/views/exportTrade/invoice/detailsPage.vue

@@ -34,7 +34,12 @@
           size="small"
           >撤销发货</el-button
         >
-        <el-button type="success" disabled size="small">
+        <el-button
+          type="success"
+          :disabled="!form.id"
+          size="small"
+          @click="copyDoc"
+        >
           复制单据
         </el-button>
         <el-button
@@ -515,6 +520,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    copyDoc() {
+      this.$emit("copyOrder", this.form.id);
+    },
     rePick(row, index) {
       this.reData = {
         ...row,
@@ -687,6 +695,56 @@ export default {
       this.pageLoading = true;
       detail(id)
         .then(res => {
+          if (this.detailData.status == "copy") {
+            delete res.data.data.id;
+            delete res.data.data.sysNo;
+            delete res.data.data.orderNo;
+            delete res.data.data.orgOrderNo;
+            delete res.data.data.srcOrderNo;
+            delete res.data.data.createTime;
+            delete res.data.data.createUser;
+            delete res.data.data.createUserName;
+            delete res.data.data.updateTime;
+            delete res.data.data.updateUser;
+            delete res.data.data.updateUserName;
+            delete res.data.data.morderNo;
+            delete res.data.data.status;
+            delete res.data.data.ifEnquiry;
+            delete res.data.data.ifShipping;
+            res.data.data.orderStatus = "录入";
+            res.data.data.deliveryItemsList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.orgOrderNo;
+              delete e.srcId;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.deliveryFeesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.deliveryFilesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+          }
           this.form = res.data.data;
           this.data = res.data.data.deliveryItemsList;
           this.orderFeesList = res.data.data.deliveryFeesList;

src/views/exportTrade/invoice/index.vue

@@ -17,6 +17,7 @@
         @saveColumn="saveColumn"
         :summary-method="summaryMethod"
         :cell-style="cellStyle"
+        @selection-change="selectionChange"
       >
         <template slot-scope="{ row }" slot="salesCompany">
           <span>{{ row.salesCompanyName }}</span>
@@ -82,7 +83,13 @@
             @click.stop="newAdd()"
             >创建单据
           </el-button>
-          <el-button type="success" size="small" disabled>复制单据</el-button>
+          <el-button
+            type="success"
+            size="small"
+            @click.stop="copyDoc()"
+            :disabled="selectionList.length != 1"
+            >复制单据</el-button
+          >
           <el-button type="info" size="small">报表</el-button>
         </template>
         <template slot="corpIdSearch">
@@ -108,6 +115,7 @@
     </basic-container>
     <detail-page
       @goBack="goBack"
+      @copyOrder="copyOrder"
       :detailData="detailData"
       v-if="!show"
     ></detail-page>
@@ -147,7 +155,8 @@ export default {
       },
       show: true,
       detailData: {},
-      loading: false
+      loading: false,
+      selectionList: []
     };
   },
   components: { detailPage },
@@ -162,8 +171,9 @@ export default {
   },
   activated() {
     //当页面已打开并无法重新渲染时，用activated重新激活keepalive组件
+    this.show = true;
     setTimeout(() => {
-      if (this.$route.query.pageType == "Generate" && this.show) {
+      if (this.$route.query.pageType == "Generate") {
         this.newAdd();
       }
     }, 100);
@@ -195,6 +205,9 @@ export default {
         });
       });
     },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
     //查看跳转页面
     beforeOpenPage(row, status) {
       this.detailData = {
@@ -212,6 +225,25 @@ export default {
       this.show = false;
       this.$store.commit("OUT_IN__DETAIL");
     },
+    copyDoc() {
+      this.selectionList.forEach(e => {
+        this.detailData = {
+          id: e.id,
+          status: "copy"
+        };
+        this.show = false;
+      });
+    },
+    copyOrder(id) {
+      this.show = true;
+      this.detailData = {
+        id: id,
+        status: "copy"
+      };
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
     //点击搜索按钮触发
     searchChange(params, done) {
       if (params.businessDate) {

src/views/exportTrade/purchaseContract/detailsPage.vue

@@ -43,7 +43,9 @@
             业务处理<i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item disabled>复制单据</el-dropdown-item>
+            <el-dropdown-item :disabled="!form.id" @click.native="copyDoc"
+              >复制单据</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
         <el-button
@@ -644,6 +646,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    copyDoc() {
+      this.$emit("copyOrder", this.form.id);
+    },
     rePick(row, index) {
       this.reData = {
         ...row,
@@ -815,6 +820,61 @@ export default {
       this.pageLoading = true;
       detail(id)
         .then(res => {
+          if (this.detailData.status == "copy") {
+            delete res.data.data.id;
+            delete res.data.data.sysNo;
+            delete res.data.data.orderNo;
+            delete res.data.data.orgOrderNo;
+            delete res.data.data.createTime;
+            delete res.data.data.createUser;
+            delete res.data.data.createUserName;
+            delete res.data.data.updateTime;
+            delete res.data.data.updateUser;
+            delete res.data.data.updateUserName;
+            delete res.data.data.morderNo;
+            delete res.data.data.status;
+            delete res.data.data.ifEnquiry;
+            delete res.data.data.ifShipping;
+            res.data.data.orderStatus = "录入";
+            if (res.data.data.itemsVOList) {
+              res.data.data.itemsVOList.forEach(e => {
+                delete e.id;
+                delete e.pid;
+                delete e.createTime;
+                delete e.createUser;
+                delete e.updateTime;
+                delete e.updateUser;
+                delete e.orgOrderNo;
+                delete e.srcId;
+                delete e.status;
+                delete e.isDeleted;
+              });
+            }
+            if (res.data.data.orderFeesList) {
+              res.data.data.orderFeesList.forEach(e => {
+                delete e.id;
+                delete e.pid;
+                delete e.createTime;
+                delete e.createUser;
+                delete e.updateTime;
+                delete e.updateUser;
+                delete e.status;
+                delete e.isDeleted;
+              });
+            }
+            if (res.data.data.orderFilesList) {
+              res.data.data.orderFilesList.forEach(e => {
+                delete e.id;
+                delete e.pid;
+                delete e.createTime;
+                delete e.createUser;
+                delete e.updateTime;
+                delete e.updateUser;
+                delete e.status;
+                delete e.isDeleted;
+              });
+            }
+          }
           this.form = res.data.data;
           this.data = res.data.data.itemsVOList
             ? res.data.data.itemsVOList

src/views/exportTrade/purchaseContract/index.vue

@@ -16,6 +16,7 @@
         :table-loading="loading"
         @saveColumn="saveColumn"
         :cell-style="cellStyle"
+        @selection-change="selectionChange"
       >
         <template slot="createTimeSearch">
           <el-date-picker
@@ -37,7 +38,13 @@
             @click.stop="newAdd('new')"
             >创建单据
           </el-button>
-          <el-button type="success" size="small" disabled>复制单据</el-button>
+          <el-button
+            type="success"
+            size="small"
+            @click.stop="copyDoc()"
+            :disabled="selectionList.length != 1"
+            >复制单据</el-button
+          >
           <el-button type="info" size="small">报表</el-button>
         </template>
         <template slot="corpIdSearch">
@@ -119,6 +126,7 @@
     </basic-container>
     <detail-page
       @goBack="goBack"
+      @copyOrder="copyOrder"
       :detailData="detailData"
       v-if="!show"
     ></detail-page>
@@ -150,7 +158,8 @@ export default {
       },
       show: true,
       detailData: {},
-      loading: false
+      loading: false,
+      selectionList: []
     };
   },
   components: { detailPage },
@@ -191,6 +200,9 @@ export default {
         });
       });
     },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
     //查看跳转页面
     beforeOpenPage(row, status) {
       this.detailData = {
@@ -199,6 +211,25 @@ export default {
       };
       this.show = false;
     },
+    copyDoc() {
+      this.selectionList.forEach(e => {
+        this.detailData = {
+          id: e.id,
+          status: "copy"
+        };
+        this.show = false;
+      });
+    },
+    copyOrder(id) {
+      this.show = true;
+      this.detailData = {
+        id: id,
+        status: "copy"
+      };
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
     editOpen(row, status) {
       this.detailData = {
         id: row.id,

src/views/exportTrade/receipt/detailsPage.vue

@@ -34,7 +34,12 @@
           size="small"
           >撤销收货</el-button
         >
-        <el-button type="success" disabled size="small">
+        <el-button
+          type="success"
+          :disabled="!form.id"
+          size="small"
+          @click="copyDoc"
+        >
           复制单据
         </el-button>
         <el-button
@@ -527,6 +532,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    copyDoc() {
+      this.$emit("copyOrder", this.form.id);
+    },
     rePick(row, index) {
       this.reData = {
         ...row,
@@ -702,6 +710,56 @@ export default {
       this.pageLoading = true;
       detail(id)
         .then(res => {
+          if (this.detailData.status == "copy") {
+            delete res.data.data.id;
+            delete res.data.data.sysNo;
+            delete res.data.data.orderNo;
+            delete res.data.data.orgOrderNo;
+            delete res.data.data.srcOrderNo;
+            delete res.data.data.createTime;
+            delete res.data.data.createUser;
+            delete res.data.data.createUserName;
+            delete res.data.data.updateTime;
+            delete res.data.data.updateUser;
+            delete res.data.data.updateUserName;
+            delete res.data.data.morderNo;
+            delete res.data.data.status;
+            delete res.data.data.ifEnquiry;
+            delete res.data.data.ifShipping;
+            res.data.data.orderStatus = "录入";
+            res.data.data.deliveryItemsList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.orgOrderNo;
+              delete e.srcId;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.deliveryFeesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.deliveryFilesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+          }
           this.form = res.data.data;
           this.data = res.data.data.deliveryItemsList;
           this.orderFeesList = res.data.data.deliveryFeesList;

src/views/exportTrade/receipt/index.vue

@@ -17,6 +17,7 @@
         @saveColumn="saveColumn"
         :summary-method="summaryMethod"
         :cell-style="cellStyle"
+        @selection-change="selectionChange"
       >
         <template slot="menuLeft">
           <el-button
@@ -26,7 +27,13 @@
             @click.stop="newAdd()"
             >创建单据
           </el-button>
-          <el-button type="success" size="small" disabled>复制单据</el-button>
+          <el-button
+            type="success"
+            size="small"
+            @click.stop="copyDoc()"
+            :disabled="selectionList.length != 1"
+            >复制单据</el-button
+          >
           <el-button type="info" size="small">报表</el-button>
         </template>
         <template slot-scope="{ row }" slot="storageId">
@@ -99,6 +106,7 @@
     </basic-container>
     <detail-page
       @goBack="goBack"
+      @copyOrder="copyOrder"
       :detailData="detailData"
       v-if="!show"
     ></detail-page>
@@ -131,7 +139,8 @@ export default {
       },
       show: true,
       detailData: {},
-      loading: false
+      loading: false,
+      selectionList: []
     };
   },
   components: { detailPage },
@@ -151,8 +160,9 @@ export default {
   },
   activated() {
     //当页面已打开并无法重新渲染时，用activated重新激活keepalive组件
+    this.show = true;
     setTimeout(() => {
-      if (this.$route.query.pageType == "Generate" && this.show) {
+      if (this.$route.query.pageType == "Generate") {
         this.newAdd();
       }
     }, 100);
@@ -179,6 +189,9 @@ export default {
         });
       });
     },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
     //查看跳转页面
     beforeOpenPage(row, status) {
       this.detailData = {
@@ -188,6 +201,25 @@ export default {
       this.show = false;
       this.$store.commit("REC_IN_DETAIL");
     },
+    copyDoc() {
+      this.selectionList.forEach(e => {
+        this.detailData = {
+          id: e.id,
+          status: "copy"
+        };
+        this.show = false;
+      });
+    },
+    copyOrder(id) {
+      this.show = true;
+      this.detailData = {
+        id: id,
+        status: "copy"
+      };
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
     editOpen(row, status) {
       this.detailData = {
         id: row.id,

src/views/exportTrade/salesContract/detailsPage.vue

@@ -46,7 +46,7 @@
             <el-dropdown-item @click.native="saveSell"
               >生成采购
             </el-dropdown-item>
-            <el-dropdown-item disabled>复制单据</el-dropdown-item>
+            <el-dropdown-item :disabled="!form.id" @click.native="copyDoc">复制单据</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <el-button
@@ -1064,6 +1064,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    copyDoc() {
+      this.$emit("copyOrder", this.form.id);
+    },
     rowCorpData(row) {
       this.data[row.index].corpName = row.cname;
     },
@@ -1667,6 +1670,55 @@ export default {
       this.pageLoading = true;
       detail(id)
         .then(res => {
+          if (this.detailData.status == "copy") {
+            delete res.data.data.id;
+            delete res.data.data.sysNo;
+            delete res.data.data.orderNo;
+            delete res.data.data.orgOrderNo;
+            delete res.data.data.createTime;
+            delete res.data.data.createUser;
+            delete res.data.data.createUserName;
+            delete res.data.data.updateTime;
+            delete res.data.data.updateUser;
+            delete res.data.data.updateUserName;
+            delete res.data.data.morderNo;
+            delete res.data.data.status;
+            delete res.data.data.ifEnquiry;
+            delete res.data.data.ifShipping;
+            res.data.data.orderStatus = "录入";
+            res.data.data.orderItemsList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.orgOrderNo;
+              delete e.srcId;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.orderFeesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+            res.data.data.orderFilesList.forEach(e => {
+              delete e.id;
+              delete e.pid;
+              delete e.createTime;
+              delete e.createUser;
+              delete e.updateTime;
+              delete e.updateUser;
+              delete e.status;
+              delete e.isDeleted;
+            });
+          }
           this.form = res.data.data;
           this.data = res.data.data.orderItemsList;
           this.orderFeesList = res.data.data.orderFeesList;
@@ -1852,7 +1904,8 @@ export default {
               e.srcId = e.id;
               e.specificationAndModel = e.itemType;
               e.productDesc = e.itemDescription;
-              (e.exRate0 = e.exchangeRate), delete e.id;
+              e.exRate0 = e.exchangeRate;
+              delete e.id;
               delete e.version;
               delete e.status;
               delete e.createUser;
@@ -1861,7 +1914,6 @@ export default {
               delete e.updateTime;
               delete e.isDeleted;
             });
-            console.log(data);
             const obj = {
               corpId: data.corpId,
               deliveryStatus: "录入",

src/views/exportTrade/salesContract/index.vue

@@ -17,6 +17,7 @@
         :cell-style="cellStyle"
         :summary-method="summaryMethod"
         @expand-change="expandChange"
+        @selection-change="selectionChange"
       >
         <template slot-scope="{ row }" slot="expand">
           <avue-crud
@@ -44,7 +45,13 @@
             @click.stop="newAdd('new')"
             >创建单据
           </el-button>
-          <el-button type="success" size="small" disabled>复制单据</el-button>
+          <el-button
+            type="success"
+            size="small"
+            @click.stop="copyDoc()"
+            :disabled="selectionList.length != 1"
+            >复制单据</el-button
+          >
           <el-button type="info" size="small">报表</el-button>
         </template>
         <template slot="corpIdSearch">
@@ -103,7 +110,7 @@
           <span
             style="color: #409EFF;cursor: pointer"
             @click.stop="beforeOpenPage(scope.row, 1)"
-            >{{ scope.row.orderNo}}
+            >{{ scope.row.orderNo }}
           </span>
         </template>
         <template slot-scope="scope" slot="menu">
@@ -126,6 +133,7 @@
     </basic-container>
     <detail-page
       @goBack="goBack"
+      @copyOrder="copyOrder"
       :detailData="detailData"
       v-if="!show"
     ></detail-page>
@@ -213,7 +221,8 @@ export default {
             overHidden: true
           }
         ]
-      }
+      },
+      selectionList: []
     };
   },
   components: { detailPage },
@@ -241,6 +250,9 @@ export default {
     cellStyle() {
       return "padding:0;height:40px;";
     },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
     expandChange(row) {
       if (!row.itemData) {
         getGoodsInfo({ id: row.id, tradeType: "CK" })
@@ -347,6 +359,25 @@ export default {
       };
       this.show = false;
     },
+    copyDoc() {
+      this.selectionList.forEach(e => {
+        this.detailData = {
+          id: e.id,
+          status: "copy"
+        };
+        this.show = false;
+      });
+    },
+    copyOrder(id) {
+      this.show = true;
+      this.detailData = {
+        id: id,
+        status: "copy"
+      };
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
     goBack() {
       this.detailData = this.$options.data().detailData;
       this.show = true;

src/views/wel/components/audit-data.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          审核数据
+        </span>
+        <span>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div class="content" v-loading="loading">
+        <div class="content-item">
+          <div class="card">
+            <i class="el-icon-s-order" style="font-size:30px;color:#409EFF"></i>
+            <div class="card-content">
+              <span class="card-content-num">1</span>
+              <span class="card-content-text">销售订单/待审核</span>
+            </div>
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="card">
+            <i class="el-icon-s-goods" style="font-size:30px;color:#409EFF"></i>
+            <div class="card-content">
+              <span class="card-content-num">0</span>
+              <span class="card-content-text">采购订单/待审核</span>
+            </div>
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="card">
+            <i
+              class="el-icon-s-finance"
+              style="font-size:30px;color:#409EFF"
+            ></i>
+            <div class="card-content">
+              <span class="card-content-num">0</span>
+              <span class="card-content-text">申请付款/待审核</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding: 0px 5px 5px 5px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.content {
+  display: flex;
+  &-item {
+    background-color: #f4f8ff;
+    margin-top: 1vh;
+    height: 13vh;
+    width: 15vw;
+    margin-right: 1vw;
+    display: flex;
+    align-items: center;
+    padding-left: 1.5vw;
+    .card {
+      display: flex;
+      align-items: center;
+      &-content {
+        padding-left: 1vw;
+        display: flex;
+        flex-direction: column;
+        &-num {
+          font-size: 20px;
+          font-weight: 600;
+        }
+        &-text {
+          color: #909399;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/wel/components/charge-today.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          今日收款
+        </span>
+        <span>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div class="content" v-loading="loading">
+
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding:0px 5px 5px 5px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.content {
+  display: flex;
+}
+</style>

src/views/wel/components/pay-today.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          今日付款
+        </span>
+        <span>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div class="content" v-loading="loading"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding: 0px 5px 5px 0px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.content {
+  display: flex;
+}
+</style>

src/views/wel/components/quick-launch.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          快速发起
+        </span>
+      </div>
+      <div class="content">
+        <div class="content-icon">
+          <i class="tradingIcon icon-sales" style="color:#409EFF"></i>
+          <span>销售</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
+          <span>采购</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-ship" style="color:#143056"></i>
+          <span>发货</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-receipt" style="color:#921939"></i>
+          <span>收货</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-apply" style="color:#BE3216"></i>
+          <span>申请付款</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-charge" style="color:#4D6016"></i>
+          <span>收费</span>
+        </div>
+        <div class="content-icon">
+          <i class="tradingIcon icon-pay" style="color:#7E8270"></i>
+          <span>付费</span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer"
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding: 5px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.tradingIcon {
+  font-size: 36px;
+}
+.content {
+  display: flex;
+  &-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin:1.5vh 1vw 0vh 1vw;
+    span{
+      margin-top:1vh;
+    }
+  }
+}
+</style>

src/views/wel/components/realtime-data.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          审核数据
+        </span>
+        <span class="right">
+          <div class="right_but">
+            <div
+              class="right_but_left"
+              :class="{ right_but_active: isActive }"
+              @click="inDay"
+            >
+              本日
+            </div>
+            <div
+              class="right_but_right"
+              :class="{ right_but_active: !isActive }"
+              @click="inMoon"
+            >
+              本月
+            </div>
+          </div>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px;line-height: 15px;"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div style="display: flex;justify-content: center;">
+        <div class="content" v-loading="loading">
+          <div class="content-item">
+            <div class="card">
+              <div class="card-title card-title1">
+                <span>
+                  销
+                </span>
+              </div>
+              <div class="card-content">
+                <span class="card-content-num">1</span>
+                <span class="card-content-text">销售订单</span>
+              </div>
+            </div>
+          </div>
+          <div class="divider" />
+          <div class="content-item">
+            <div class="card">
+              <div class="card-title card-title2">
+                <span>
+                  采
+                </span>
+              </div>
+              <div class="card-content">
+                <span class="card-content-num">1</span>
+                <span class="card-content-text">采购订单</span>
+              </div>
+            </div>
+          </div>
+          <div class="divider" />
+          <div class="content-item">
+            <div class="card">
+              <div class="card-title card-title3">
+                <span>
+                  发
+                </span>
+              </div>
+              <div class="card-content">
+                <span class="card-content-num">1</span>
+                <span class="card-content-text">发货数量</span>
+              </div>
+            </div>
+          </div>
+          <div class="divider" />
+          <div class="content-item">
+            <div class="card">
+              <div class="card-title card-title4">
+                <span>
+                  收
+                </span>
+              </div>
+              <div class="card-content">
+                <span class="card-content-num">1</span>
+                <span class="card-content-text">收货数量</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      isActive: true,
+      loading: false
+    };
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    },
+    inDay() {
+      this.isActive = true;
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    },
+    inMoon() {
+      this.isActive = false;
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding: 5px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .right {
+      display: flex;
+      align-items: center;
+      &_but {
+        margin-right: 10px;
+        border: 1px solid #409eff;
+        width: 80px;
+        border-radius: 3px;
+        display: flex;
+        &_left {
+          width: 40px;
+          text-align: center;
+          color: #409eff;
+          cursor: pointer;
+        }
+        &_right {
+          width: 40px;
+          text-align: center;
+          color: #409eff;
+          cursor: pointer;
+        }
+        &_active {
+          color: #fff;
+          background-color: #409eff;
+        }
+      }
+    }
+  }
+}
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 15vh;
+  width: 80vw;
+  .divider {
+    display: block;
+    height: 0px;
+    width: 100%;
+    border-top: 1px dashed #dcdfe6;
+  }
+  &-item {
+    margin-left: 1vw;
+    .card {
+      width: 130px;
+      display: flex;
+      align-items: center;
+      &-title {
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 20px;
+        font-weight: 600;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        span {
+          line-height: 20px;
+        }
+      }
+      &-title1 {
+        color: #037fe1;
+        background-color: rgba(3, 127, 225, 0.15);
+      }
+      &-title2 {
+        color: #ffa21e;
+        background-color: rgba(255, 162, 30, 0.15);
+      }
+      &-title3 {
+        color: #fb5b60;
+        background-color: rgba(251, 91, 96, 0.15);
+      }
+      &-title4 {
+        color: #42bc6f;
+        background-color: rgba(66, 188, 111, 0.15);
+      }
+      &-content {
+        padding-left: 1vw;
+        display: flex;
+        flex-direction: column;
+        &-num {
+          font-size: 20px;
+          font-weight: 600;
+        }
+        &-text {
+          color: #909399;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/wel/components/sales-reached.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          当月销售
+        </span>
+        <span>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div class="content" v-loading="loading">
+        <div style="display:flex">
+          <div id="myChart" ref="myChart" style="width:20vw;height:33vh"></div>
+          <div>
+            <div class="content_item">
+              <div class="content_item_num">100,000</div>
+              <div class="content_item_text">目标金额</div>
+            </div>
+            <div class="content_item">
+              <div class="content_item_num">20</div>
+              <div class="content_item_text">达成金额</div>
+            </div>
+            <div class="content_item">
+              <div class="divider" />
+            </div>
+            <div class="content_item">
+              <div class="content_item_num">20</div>
+              <div class="content_item_text">达成金额</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      loading: false
+    };
+  },
+  mounted() {
+    this.ringData();
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    },
+    ringData() {
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      myChart.setOption({
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          top: "3%",
+          left: "center"
+        },
+        graphic: [
+          {
+            type: "text",
+            left: "center",
+            top: "43%",
+            style: {
+              text: "5%",
+              textAlign: "center",
+              fill: "#000",
+              fontSize: 24
+            }
+          },
+          {
+            type: "text",
+            left: "center",
+            top: "53%",
+            style: {
+              text: "销售达成率",
+              textAlign: "center",
+              fill: "#999999",
+              fontSize: 16
+            }
+          }
+        ],
+        color: ["#F6695E", "#E3E3E3"],
+        series: [
+          {
+            name: "当月销售",
+            type: "pie",
+            radius: ["55%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center"
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 5, name: "已销售数量" },
+              { value: 95, name: "未销售数量" }
+            ]
+          }
+        ]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding: 0px 5px 5px 5px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.content {
+  display: flex;
+  &_item {
+    margin-top: 20px;
+    .divider {
+      display: block;
+      height: 0px;
+      width: 12vw;
+      border-top: 1px dashed #dcdfe6;
+    }
+    &_num {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    &_text {
+      color: #909399;
+    }
+  }
+}
+</style>

src/views/wel/components/sales-trend.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="home-container">
+    <el-card class="home-container__card">
+      <div class="title">
+        <span>
+          销售趋势
+        </span>
+        <span>
+          <i
+            class="el-icon-refresh-right"
+            style="cursor: pointer;font-size:20px"
+            @click="refresh"
+          ></i>
+        </span>
+      </div>
+      <div class="content" v-loading="loading">
+
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    refresh() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  padding:0px 5px 5px 0px;
+  box-sizing: border-box;
+  height: 100%;
+  ::v-deep .el-card__body {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  &__card {
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.content {
+  display: flex;
+}
+</style>

src/views/wel/home/defaultPage.vue

@@ -1,130 +1,75 @@
 <template>
-  <basic-container>
-    <div class="container" :style="isHeight">
-      <div class="container-items">
-        <but-card iconName="el-icon-edit-outline" name="销售订单" />
-        <but-card iconName="el-icon-edit-outline" name="采购订单" />
-        <but-card iconName="el-icon-edit-outline" name="发货单" />
-        <but-card iconName="el-icon-edit-outline" name="收货单" />
-        <but-card iconName="el-icon-edit-outline" name="库存" />
-        <but-card iconName="el-icon-edit-outline" name="客户管理" />
-        <but-card iconName="el-icon-edit-outline" name="商品管理" />
-        <but-card iconName="el-icon-edit-outline" name="用户管理" />
-        <but-card iconName="el-icon-edit-outline" name="收费管理" />
-        <but-card iconName="el-icon-edit-outline" name="付费管理" />
-      </div>
-      <index-card title="今日工作看板" iconName="el-icon-view">
-        <div slot="content" style="height:25vh"></div>
-      </index-card>
-      <index-card title="待办事项" iconName="el-icon-s-fold">
-        <div slot="content" style="height:17vh"></div>
-      </index-card>
-      <index-card title="今日营业" iconName="el-icon-chat-line-round">
-        <div slot="content" style="height:17vh" class="operate">
-          <div class="operate-item">
-            <div class="item-text">
-              <div class="item-point"></div>
-              今日到店
-              <p>0</p>
-              台次
-            </div>
-          </div>
-          <div class="operate-item">
-            <div class="item-text">
-              <div class="item-point"></div>
-              今日到店
-              <p>0</p>
-              台次
-            </div>
-          </div>
-          <div class="operate-item">
-            <div class="item-text">
-              <div class="item-point"></div>
-              今日到店
-              <p>0</p>
-              台次
-            </div>
-          </div>
-        </div>
-      </index-card>
-      <index-card title="客户数据" iconName="el-icon-user">
-        <div slot="content" style="height:17vh"></div>
-      </index-card>
-      <index-card title="新闻公告" iconName="el-icon-s-fold">
-        <div slot="content" style="height:17vh"></div>
-      </index-card>
-    </div>
-  </basic-container>
+  <div class="container">
+    <quick-launch class="item1" />
+    <audit-data class="item2" />
+    <realtime-data class="item3" />
+    <sales-reached class="item4" />
+    <sales-trend class="item5" />
+    <charge-today class="item6" />
+    <pay-today class="item7" />
+  </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import indexCard from "../components/card.vue";
-import butCard from "../components/butCard.vue";
+import quickLaunch from "../components/quick-launch";
+import auditData from "../components/audit-data";
+import realtimeData from "../components/realtime-data";
+import salesReached from "../components/sales-reached";
+import salesTrend from "../components/sales-trend";
+import chargeToday from "../components/charge-today";
+import payToday from "../components/pay-today";
 export default {
   name: "wel",
   data() {
-    return {
-      activeNames: ["1", "2", "3", "5"],
-      logActiveNames: ["24"],
-      isHeight: {},
-    };
-  },
-  created(){
-    this.isHeight.height=window.innerHeight-165+'px'
+    return {};
   },
+  created() {},
   components: {
-    indexCard,
-    butCard
-  },
-  computed: {
-    ...mapGetters(["userInfo"])
+    quickLaunch,
+    auditData,
+    realtimeData,
+    salesReached,
+    salesTrend,
+    chargeToday,
+    payToday
   },
-  methods: {
-    handleChange(val) {
-      window.console.log(val);
-    }
-  }
+  computed: {},
+  methods: {}
 };
 </script>
 <style lang="scss" scoped>
-.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50%);
-  grid-template-rows: 40% 30% 30%;
-  .container-items {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 20%);
-    grid-template-rows: repeat(auto-fill, 50%);
-    align-items: center;
-  }
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
 }
-//今日营业
-.operate {
+.item4 {
+  grid-area: d;
+}
+.item5 {
+  grid-area: e;
+}
+.item6 {
+  grid-area: f;
+}
+.item7 {
+  grid-area: g;
+}
+.container {
   display: grid;
-  grid-template-rows: repeat(auto-fill, 33.33%);
-  .operate-item {
-    display: flex;
-    align-items: center;
-    .item-text {
-      display: flex;
-      align-items: end;
-      font-size: 14px;
-      .item-point {
-        line-height: 14px;
-        width: 14px;
-        height: 14px;
-        border-radius: 2px;
-        background: #ff7d13;
-        margin-right: 4px;
-        margin-bottom: 1px;
-      }
-    }
-    p {
-      font-size: 24px;
-      line-height: 24px;
-      margin: 0 4px !important;
-    }
-  }
+  width: 100%;
+  height: 95.5vh;
+  grid-template-columns: repeat(auto-fill, 10%);
+  grid-template-rows: 15% 20% 20% 35% 40%;
+  grid-template-areas:
+    "a a a a a a a a a a"
+    "b b b b b b b b b b"
+    "c c c c c c c c c c"
+    "d d d d e e e e e e"
+    "f f f f f g g g g g";
 }
 </style>