全岗位路径

src/views/study/Growth.vue

@@ -16,7 +16,7 @@
             <div class="select-radio"><span style="background: #F2675D;"></span>已完成</div>
           </div>
           <div class="btn">
-            <el-button type="primary">全岗位路径图</el-button>
+            <el-button type="primary" @click="dialogTableVisible = true">全岗位路径图</el-button>
             <el-button type="primary" style="margin-left: 0;margin-top: 30px;">未完成</el-button>
           </div>
           <div class="detailContent">
@@ -96,6 +96,74 @@
         </div>
       </el-dialog>
     </div>
+    <el-dialog  :visible.sync="dialogTableVisible">
+      <span slot="title" class="dialog-header">
+        <div>全岗位路径</div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/CurrentPath.png" alt="">
+          <span>当前路径</span>
+        </div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/OtherPath.png" alt="">
+          <span>其他路径</span>
+        </div>
+        <div class="otherImg">
+          <img src="../../assets/images/growth/NoPermissionPath.png" alt="">
+          <span>其他路径（无权限）</span>
+        </div>
+      </span>
+      <el-table :data="gridData" border>
+        <el-table-column property="name" label=""></el-table-column>
+        <el-table-column label="市场企划岗" >
+          <template slot-scope="scope">
+            <span v-if="scope.row.marketStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.marketStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售岗" >
+          <template slot-scope="scope">
+            <span v-if="scope.row.saleStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.saleStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="产品企划岗">
+          <template slot-scope="scope">
+            <span v-if="scope.row.productStatus === 0"><img src="../../assets/images/growth/CurrentPath.png"
+                alt=""></span>
+            <span v-else-if="scope.row.productStatus === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="FAE岗">
+          <template slot-scope="scope">
+            <span v-if="scope.row.FAEStatusL === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
+            <span v-else-if="scope.row.FAEStatusL === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售管理岗位">
+          <template slot-scope="scope">
+            <span v-if="scope.row.salesManagement === 0"><img src="../../assets/images/growth/CurrentPath.png"
+                alt=""></span>
+            <span v-else-if="scope.row.salesManagement === 1">
+              <img src="../../assets/images/growth/OtherPath.png" alt="">
+            </span>
+            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </el-dialog>
   </div>
 </template>
 
@@ -104,8 +172,6 @@ import portalHeader from '@/components/PortalHeader.vue';
 export default {
   name: 'Growth',
   components: { portalHeader },
-  computed: {
-  },
   data() {
     return {
       showUClass: false,
@@ -164,7 +230,51 @@ export default {
         progress: '10',
         title: '岗前岗前',
         status: 1
-      }]
+      }],
+      dialogTableVisible: false,
+      gridData: [{
+        name: 'Band10+',
+        marketStatus: 0,
+        saleStatus: 1,
+        productStatus: 2,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'Band10',
+        marketStatus: 1,
+        saleStatus: 2,
+        productStatus: 1,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'Band9',
+        marketStatus: 2,
+        saleStatus: 0,
+        productStatus: 0,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'Band8',
+        marketStatus: 0,
+        saleStatus: 1,
+        productStatus: 2,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'Band7',
+        marketStatus: 1,
+        saleStatus: 2,
+        productStatus: 0,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }, {
+        name: 'Band6',
+        marketStatus: 2,
+        saleStatus: 0,
+        productStatus: 1,
+        FAEStatusL: 0,
+        salesManagement: 1
+      }],
 
     };
   },
@@ -270,6 +380,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #E8E8E8;
+  padding-bottom: 20px;
+
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #333333;
+
+    .otherImg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 60px;
+
+      img {
+        width: 27px;
+        height: 24px;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+
+
 .address {
   position: absolute;
   width: 50px;