💄 Z: Style: table style in element is change.

ybf_admin/src/pages/task/bar/index.vue

@@ -47,6 +47,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
+
         <!-- </el-col> -->
 
         <!-- 关键字 -->
@@ -73,8 +74,8 @@
         tooltip-effect="dark"
         style="width: 100%"
         @selection-change="listPick"
-        :header-cell-style="setListsHeadStyle"
       >
+<!--             :header-cell-style="setListsHeadStyle"-->
         <el-table-column type="selection" width="60"></el-table-column>
         <el-table-column prop="taskName" label="任务名" align="center" width="200"></el-table-column>
         <el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column>
@@ -105,173 +106,225 @@
         :total="400"
       ></el-pagination>
     </div>
+    <div class="dialogs">
+      <el-dialog
+        title="创建任务"
+        :visible.sync="cache.status.createDialog"
+        width="60%"
+        :before-close="dialogCreateBeforeClose">
+        <div class="dialogMain">
+          <span>会当凌绝顶，一览众山小。</span>
+
+        </div>
+        <span slot="footer" class="dialog-footer">
+    <el-button size="small" @click="dialogCreateCancel">取 消</el-button>
+    <el-button size="small" type="primary" @click="dialogCreateSubmit">保 存</el-button>
+    <el-button size="small" type="primary" @click="dialogCreateSubmitSend">保存并发布</el-button>
+  </span>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
-import TaskBar from "../bar/index";
-import TaskCom from "../com/index";
-import TaskCount from "../count/index";
+  import TaskBar from "../bar/index";
+  import TaskCom from "../com/index";
+  import TaskCount from "../count/index";
 
-export default {
-  components: {},
-  data() {
-    return {
-      list: {
-        main: [
-          {
-            id: "1001",
-            taskName: "2019年男装销售任务",
-            taskType: "拉新",
-            bar: "男装",
-            taskContent: "任务内容任务内容任务内容...",
-            sendDate: "2019/02/08"
-          },
-          {
-            id: "1002",
-            taskName: "2019年男装销售任务",
-            taskType: "拉新",
-            bar: "男装",
-            taskContent: "任务内容任务内容任务内容...",
-            sendDate: "2019/02/08"
-          },
-          {
-            id: "1003",
-            taskName: "2019年男装销售任务",
-            taskType: "拉新",
-            bar: "男装",
-            taskContent: "任务内容任务内容任务内容...",
-            sendDate: "2019/02/08"
+  export default {
+    components: {},
+    data() {
+      return {
+        cache: {
+          status: {
+            createDialog: false
           }
-        ],
-        search: {
-          bar: [
+        },
+        list: {
+          main: [
             {
-              id: "1",
-              name: "全部"
+              id: "1001",
+              taskName: "2019年男装销售任务",
+              taskType: "拉新",
+              bar: "男装",
+              taskContent: "任务内容任务内容任务内容...",
+              sendDate: "2019/02/08"
             },
             {
-              id: "2",
-              name: "测试"
-            }
-          ],
-          taskType: [
-            {
-              id: "1",
-              name: "全部"
+              id: "1002",
+              taskName: "2019年男装销售任务",
+              taskType: "拉新",
+              bar: "男装",
+              taskContent: "任务内容任务内容任务内容...",
+              sendDate: "2019/02/08"
             },
             {
-              id: "2",
-              name: "测试"
+              id: "1003",
+              taskName: "2019年男装销售任务",
+              taskType: "拉新",
+              bar: "男装",
+              taskContent: "任务内容任务内容任务内容...",
+              sendDate: "2019/02/08"
             }
-          ]
+          ],
+          search: {
+            bar: [
+              {
+                id: "1",
+                name: "全部"
+              },
+              {
+                id: "2",
+                name: "测试"
+              }
+            ],
+            taskType: [
+              {
+                id: "1",
+                name: "全部"
+              },
+              {
+                id: "2",
+                name: "测试"
+              }
+            ]
+          }
+        },
+        data: {
+          search: {
+            bar: "",
+            taskType: "",
+            date: "",
+            keys: ""
+          },
+          page: {
+            nowPageNum: 4
+          }
         }
+      };
+    },
+    created() {
+    },
+    methods: {
+      listPick() {
       },
-      data: {
-        search: {
-          bar: "",
-          taskType: "",
-          date: "",
-          keys: ""
-        },
-        page: {
-          nowPageNum: 4
+      testButtonClick() {
+      },
+      pagesSizeChange() {
+      },
+      pagesNowPageChange() {
+      },
+      setListsHeadStyle({row, column, rowIndex, columnIndex}) {
+        if (rowIndex === 0) {
+          return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
+        } else {
+          return "";
         }
-      }
-    };
-  },
-  created() {},
-  methods: {
-    listPick() {},
-    testButtonClick() {},
-    pagesSizeChange() {},
-    pagesNowPageChange() {},
-    setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
-      if (rowIndex === 0) {
-        return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
-      } else {
-        return "";
-      }
+      },
+      dialogCreateBeforeClose() {
+      },
+      dialogCreateCancel() {
+      },
+      dialogCreateSubmit() {
+      },
+      dialogCreateSubmitSend() {
+      },
     }
-  }
-};
+  };
 </script>
 <style lang="scss" scoped>
-.main {
-  // border: 2px solid orange;
-  height: 100vh;
+  .main {
+    // border: 2px solid orange;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .searchs {
+    // border: 2px solid red;
+    height: 40px;
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-.searchs {
-  // border: 2px solid red;
-  height: 40px;
-  width: 100%;
+  .buttons {
+    // border: 2px solid darkcyan;
+    // width: 30%;
+    // min-width: 266px;
+    width: 266px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  .buttonlight {
+    background-color: #e8e9fe;
+    color: #4e59c7;
+    border: 1px solid #4e59c7;
+    box-sizing: border-box;
+  }
+
+  .buttonlight:hover {
+  }
+
+  .buttondark {
+    background-color: #4e59c7;
+    color: #ffffff;
+    border: 1px solid #4e59c7;
+    box-sizing: border-box;
+  }
+
+  .buttondark:hover {
+  }
 
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.buttons {
-  // border: 2px solid darkcyan;
-  // width: 30%;
-  // min-width: 266px;
-  width: 266px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-.buttonlight {
-  background-color: #e8e9fe;
-  color: #4e59c7;
-  border: 1px solid #4e59c7;
-  box-sizing: border-box;
-}
-.buttonlight:hover {
-}
-.buttondark {
-  background-color: #4e59c7;
-  color: #ffffff;
-  border: 1px solid #4e59c7;
-  box-sizing: border-box;
-}
-.buttondark:hover {
-}
-.searchzone {
-  // border: 2px solid orange;
-  height: 40px;
-  width: auto;
-  min-width: 654px;
+  .searchzone {
+    // border: 2px solid orange;
+    height: 40px;
+    width: auto;
+    min-width: 654px;
 
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: space-between;
-  // align-items: center;
-}
-.lists {
-  // border: 2px solid greenyellow;
-  height: auto;
-  // min-height: 400px;
-  min-height: 70%;
-  width: 100%;
-  margin-top: 20px;
-}
-.list {
-  // border: 1px solid red;
-}
-.listButtonRed {
-  // border: 2px solid green;
-  color: red;
-}
-.pages {
-  // border: 2px solid steelblue;
-  height: 40px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-}
+    // display: flex;
+    // flex-direction: row;
+    // justify-content: space-between;
+    // align-items: center;
+  }
+
+  .lists {
+     /*border: 2px solid greenyellow;*/
+    height: auto;
+    // min-height: 400px;
+    min-height: 70%;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .list {
+    // border: 1px solid red;
+  }
+
+  .listButtonRed {
+    // border: 2px solid green;
+    color: red;
+  }
+
+  .pages {
+    // border: 2px solid steelblue;
+    height: 40px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+</style>
+<style lang="scss" scoped>
+  .dialogMain {
+    border: 2px solid red;
+    height: 100%;
+  }
 </style>