Z: Dot: PC: task/bar page layout done. Except: HTTP.

ybf_admin/.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-unused-vars': 'off'
+    'no-unused-vars': 'off',
+    "quotes": [1, "single"],//引号类型 `` "" ''
   },
   parserOptions: {
     parser: 'babel-eslint'

ybf_admin/src/assets/style/theme/theme-base.scss

@@ -294,6 +294,9 @@
               }
               .d2-container-full__body {
                 flex-grow: 1;
+                // height: 100%;
+                // Z-style
+                // border: 2px solid red;
                 height: 100%;
                 padding: 20px 20px;
                 overflow: auto;

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

 <template>
- <div>柜组任务</div>
+  <div class="main">
+    <div class="searchs">
+      <div class="buttons">
+        <el-button class="button buttonlight" size="small">创建任务</el-button>
+        <el-button class="button buttondark" size="small">发布任务</el-button>
+        <el-button class="button buttondark" size="small">批量删除</el-button>
+      </div>
+
+      <!-- 搜索区 -->
+      <el-form class="searchzone" :inline="true" :model="data.search" label-width="auto">
+        <!-- 第一行 -->
+        <!-- <el-row type="flex" justify="start"> -->
+        <!-- 柜组 -->
+        <!-- <el-col :span="6"> -->
+        <el-form-item label="柜组">
+          <el-select
+            size="small"
+            v-model="data.search.bar"
+            placeholder="请选择柜组"
+            style="width:160px;"
+          >
+            <el-option
+              v-for="item in list.search.bar"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- </el-col> -->
+
+        <!-- 任务类型 -->
+        <!-- <el-col :span="6"> -->
+        <el-form-item label="任务类型" class="nature">
+          <el-select
+            size="small"
+            v-model="data.search.taskType"
+            placeholder="请选择任务类型"
+            style="width:160px;"
+          >
+            <el-option
+              v-for="item in list.search.taskType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- </el-col> -->
+
+        <!-- 关键字 -->
+        <!-- <el-col :span="6"> -->
+        <el-form-item label="关键词">
+          <el-input
+            size="small"
+            v-model="data.search.keys"
+            style="width:160px"
+            placeholder="请输入关键词"
+          />
+        </el-form-item>
+        <!-- </el-col> -->
+        <!-- </el-row> -->
+        <el-button class="button buttondark" size="small">批量删除</el-button>
+      </el-form>
+    </div>
+    <div class="lists">
+      <el-table
+        stripe
+        class="list"
+        ref="multipleTable"
+        :data="list.main"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="listPick"
+        :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>
+        <el-table-column prop="bar" label="柜组" align="center" width="120"></el-table-column>
+        <el-table-column prop="taskContent" label="任务内容"></el-table-column>
+        <el-table-column label="发布日期" width="120">
+          <template slot-scope="scope">{{ scope.row.sendDate }}</template>
+        </el-table-column>
+
+        <el-table-column label="操作" align="center" fixed="right" width="240">
+          <template slot-scope="scope">
+            <el-button type="text" @click="testButtonClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="testButtonClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="testButtonClick(scope.row.id)">下发</el-button>
+            <el-button type="text" @click="testButtonClick(scope.row)" class="listButtonRed">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pages">
+      <el-pagination
+        @size-change="pagesSizeChange"
+        @current-change="pagesNowPageChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="prev, pager, next, sizes, jumper"
+        :total="400"
+      ></el-pagination>
+    </div>
+  </div>
 </template>
+<script>
+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"
+          }
+        ],
+        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() {},
+    testButtonClick() {},
+    pagesSizeChange(){},
+    pagesNowPageChange(){},
+    setListsHeadStyle({ row, column, rowIndex, columnIndex }){
+      if(rowIndex === 0){
+        return 'background-color: #0B0F32; border-right: 1px solid white;color: white;'
+      } else{
+        return ''
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.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;
+}
+.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;
+
+  // 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>

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

 <template>
-  <d2-container>
+  <!-- <d2-container type="card"> -->
+  <el-card class="box-card main">
     <el-tabs class="ztabs" v-model="cache.nowMenu" @tab-click="handleClick">
       <el-tab-pane label="柜组任务" name="taskBar">
         <task-bar />
@@ -11,13 +12,14 @@
         <task-count />
       </el-tab-pane>
     </el-tabs>
-  </d2-container>
+  </el-card>
+  <!-- </d2-container> -->
 </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: {
@@ -25,20 +27,27 @@ export default {
     TaskCom,
     TaskCount
   },
-  data () {
+  data() {
     return {
       cache: {
-        nowMenu: 'taskBar'
+        nowMenu: "taskBar"
       }
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.ztabs{
-  border: 2px solid red;
+.main {
+  height: 90vh;
+  margin: 10px 10px;
+}
+.ztabs {
+  // border: 2px solid red;
   min-height: 100vh;
   // min-height: 500px;
 }
+d2-container {
+  overflow: hidden;
+}
 </style>