✨ Z: Dot: taskBar's page recode & taskCom main page done.

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

 <template>
-  <div>集团任务</div>
+  <div class="ztask-coms">
+    <div class="ztask-searchs">
+      <div class="ztask-searchs-items">
+        <el-button size="small" @click="searchsCreate">创建任务</el-button>
+        <el-button type="primary" size="small" @click="searchsDels">批量删除</el-button>
+      </div>
+      <div class="ztask-searchs-items">
+        <el-form class="ztask-searchs-forms" :inline="true" :model="data.search" label-width="auto">
+          <el-form-item label="柜组">
+            <el-select
+              size="small"
+              v-model="data.search.bar"
+              placeholder="请选择柜组"
+              style="width:160px;"
+            >
+              <el-option
+                v-for="item in cache.list.bar"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="任务类型">
+            <el-select
+              size="small"
+              v-model="data.search.taskType"
+              placeholder="请选择任务类型"
+              style="width:160px;"
+            >
+              <el-option
+                v-for="item in cache.list.taskType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关键词">
+            <el-input
+              size="small"
+              v-model="data.search.keys"
+              style="width:160px"
+              placeholder="请输入关键词"
+            />
+          </el-form-item>
+        </el-form>
+
+
+        <el-button type="primary" size="small" @click="searchsSearch">搜 索</el-button>
+      </div>
+    </div>
+    <div class="ztask-lists">
+      <el-table
+        stripe
+        ref="multipleTable"
+        :data="list.main"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="listsSelectChange"
+      >
+        <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="taskDetail" label="任务内容" align="center"></el-table-column>
+        <el-table-column label="创建日期" align="center" width="160">
+          <template slot-scope="scope">{{ scope.row.createTime }}</template>
+        </el-table-column>
+
+        <el-table-column label="操作" align="center" fixed="right" width="240">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.taskStatus === 'Top'" type="text" @click="listsUntopClick(scope.row.id)">已置顶</el-button>
+            <el-button v-if="scope.row.taskStatus !== 'Top'" type="text" @click="listsTopClick(scope.row.id)">置顶</el-button>
+            <el-button type="text" @click="listsSeeClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="listsEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="listsDelClick(scope.row)" class="listButtonRed">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </div>
+    <div class="ztask-pages">
+      <el-pagination
+        class="ztask-page"
+        @size-change="pagesSizeChange"
+        @current-change="pagesNowPageChange"
+        :current-page="data.page.nowPageNum"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="prev, pager, next, sizes, jumper"
+        :total="400"
+      ></el-pagination>
+    </div>
+  </div>
 </template>
+<script>
+  export default {
+    components: {},
+    data() {
+      return {
+        cache: {
+          status: {
+          },
+          list:{
+            bar: [
+              {
+                id: "0",
+                name: "全部"
+              },
+              {
+                id: "1",
+                name: "柜组1"
+              }
+            ],
+            taskType: [
+              {
+                id: "0",
+                name: "全部"
+              },
+              {
+                id: "1",
+                name: "测试"
+              }
+            ],
+          }
+        },
+        list: {
+          main:[
+            {
+              id: '1001',
+              taskName: 'TaskComAlice',
+              taskDetail: 'TaskComAliceDetail',
+              createTime: '2020-01-01 01:01:00',
+              taskStatus: 'Top'
+            },
+            {
+              id: '1002',
+              taskName: 'TaskComBob',
+              taskDetail: 'TaskComBobDetail',
+              createTime: '2020-01-02 02:02:00',
+              taskStatus: ''
+            },
+            {
+              id: '1003',
+              taskName: 'TaskComClid',
+              taskDetail: 'TaskComClidDetail',
+              createTime: '2020-01-03 03:03:00',
+              taskStatus: ''
+            },
+            {
+              id: '1004',
+              taskName: 'TaskComDive',
+              taskDetail: 'TaskComDiveDetail',
+              createTime: '2020-01-04 04:04:00',
+              taskStatus: ''
+            },
+            {
+              id: '1005',
+              taskName: 'TaskComEmma',
+              taskDetail: 'TaskComEmmaDetail',
+              createTime: '2020-01-05 05:05:00',
+              taskStatus: ''
+            },
+            {
+              id: '1006',
+              taskName: 'TaskComFaker',
+              taskDetail: 'TaskComFakerDetail',
+              createTime: '2020-01-06 06:06:00',
+              taskStatus: ''
+            },
+            {
+              id: '1007',
+              taskName: 'TaskComGlass',
+              taskDetail: 'TaskComGlassDetail',
+              createTime: '2020-01-07 07:07:00',
+              taskStatus: ''
+            },
+            {
+              id: '1008',
+              taskName: 'TaskComHardy',
+              taskDetail: 'TaskComHardyDetail',
+              createTime: '2020-01-08 08:08:00',
+              taskStatus: ''
+            },
+            {
+              id: '1009',
+              taskName: 'TaskComIda',
+              taskDetail: 'TaskComIdaDetail',
+              createTime: '2020-01-09 09:09:00',
+              taskStatus: ''
+            },
+            {
+              id: '1010',
+              taskName: 'TaskComJoke',
+              taskDetail: 'TaskComJokeDetail',
+              createTime: '2020-01-10 10:10:00',
+              taskStatus: ''
+            },
+            {
+              id: '1011',
+              taskName: 'TaskComKey',
+              taskDetail: 'TaskComKeyDetail',
+              createTime: '2020-01-11 11:11:00',
+              taskStatus: ''
+            },
+            {
+              id: '1012',
+              taskName: 'TaskComLux',
+              taskDetail: 'TaskComLuxDetail',
+              createTime: '2020-01-12 12:12:00',
+              taskStatus: ''
+            },
+          ]
+        },
+        data: {
+          search:{
+            bar: '',
+            taskType: '',
+            keys: '',
+          },
+          page:{
+            nowPageNum: '',
+          }
+        },
+        rule:{
+        }
+      };
+    },
+    created() {
+    },
+    methods: {
+      searchsCreate(){},
+      searchsDels(){},
+      searchsSearch(){},
+
+      listsSelectChange(){},
+      listsUntopClick(){},
+      listsTopClick(){},
+      listsSeeClick(){},
+      listsEditClick(){},
+      listsDelClick(){},
+
+      pagesSizeChange(){},
+      pagesNowPageChange(){},
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .ztask-coms {
+    /*border: 2px solid cyan;*/
+
+    height: calc((100vh - 220px) * 1.0);
+  }
+
+  .ztask-searchs {
+    /*border: 2px solid #0ea4c5;*/
+    height: 70px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .ztask-searchs-items {
+    border: 2px solid #00c561;
+
+    margin: 17px 0px 20px 0px;
+    width: auto;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .ztask-searchs-forms{
+    /*border: 2px solid #f900ff;*/
+    height: 30px;
+    margin-bottom: 10px;
+  }
+
+  .ztask-lists {
+    /*border: 2px solid #0dc50e;*/
+    height: calc((100vh - 338px) * 1.0);
+
+    overflow: auto;
+  }
+
+  .ztask-pages {
+    /*border: 2px solid red;*/
+    /*height: 56px;*/
+    height: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  .ztask-page{
+    /*border: 2px solid red;*/
+    position: relative;
+    margin-right: 0;
+  }
+</style>

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

 <template>
-  <div>任务统计</div>
+  <div class="ztask-coms">
+    <div class="ztask-searchs">
+      <div class="ztask-searchs-items">
+        <el-button size="small" @click="searchsCreate">创建任务</el-button>
+        <el-button type="primary" size="small" @click="searchsDels">批量删除</el-button>
+      </div>
+      <div class="ztask-searchs-items">
+        <el-form class="ztask-searchs-forms" :inline="true" :model="data.search" label-width="auto">
+          <el-form-item label="柜组">
+            <el-select
+              size="small"
+              v-model="data.search.bar"
+              placeholder="请选择柜组"
+              style="width:160px;"
+            >
+              <el-option
+                v-for="item in cache.list.bar"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <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 cache.list.taskType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关键词">
+            <el-input
+              size="small"
+              v-model="data.search.keys"
+              style="width:160px"
+              placeholder="请输入关键词"
+            />
+          </el-form-item>
+        </el-form>
+
+
+        <el-button type="primary" size="small" @click="searchsSearch">搜 索</el-button>
+      </div>
+    </div>
+    <div class="ztask-lists">
+      <el-table
+        stripe
+        ref="multipleTable"
+        :data="list.main"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="listsSelectChange"
+      >
+        <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="taskDetail" label="任务内容" align="center"></el-table-column>
+        <el-table-column label="创建日期" align="center" width="160">
+          <template slot-scope="scope">{{ scope.row.createTime }}</template>
+        </el-table-column>
+
+        <el-table-column label="操作" align="center" fixed="right" width="240">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.taskStatus === 'Top'" type="text" @click="listsUntopClick(scope.row.id)">已置顶</el-button>
+            <el-button v-if="scope.row.taskStatus !== 'Top'" type="text" @click="listsTopClick(scope.row.id)">置顶</el-button>
+            <el-button type="text" @click="listsSeeClick(scope.row)">详情</el-button>
+            <el-button type="text" @click="listsEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="listsDelClick(scope.row)" class="listButtonRed">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+    </div>
+    <div class="ztask-pages">
+      <el-pagination
+        class="ztask-page"
+        @size-change="pagesSizeChange"
+        @current-change="pagesNowPageChange"
+        :current-page="data.page.nowPageNum"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="prev, pager, next, sizes, jumper"
+        :total="400"
+      ></el-pagination>
+    </div>
+  </div>
 </template>
+<script>
+  export default {
+    components: {},
+    data() {
+      return {
+        cache: {
+          status: {
+          },
+          list:{
+            bar: [
+              {
+                id: "0",
+                name: "全部"
+              },
+              {
+                id: "1",
+                name: "柜组1"
+              }
+            ],
+            taskType: [
+              {
+                id: "0",
+                name: "全部"
+              },
+              {
+                id: "1",
+                name: "测试"
+              }
+            ],
+          }
+        },
+        list: {
+          main:[
+            {
+              id: '1001',
+              taskName: 'TaskComAlice',
+              taskDetail: 'TaskComAliceDetail',
+              createTime: '2020-01-01 01:01:00',
+              taskStatus: 'Top'
+            },
+            {
+              id: '1002',
+              taskName: 'TaskComBob',
+              taskDetail: 'TaskComBobDetail',
+              createTime: '2020-01-02 02:02:00',
+              taskStatus: ''
+            },
+            {
+              id: '1003',
+              taskName: 'TaskComClid',
+              taskDetail: 'TaskComClidDetail',
+              createTime: '2020-01-03 03:03:00',
+              taskStatus: ''
+            },
+            {
+              id: '1004',
+              taskName: 'TaskComDive',
+              taskDetail: 'TaskComDiveDetail',
+              createTime: '2020-01-04 04:04:00',
+              taskStatus: ''
+            },
+            {
+              id: '1005',
+              taskName: 'TaskComEmma',
+              taskDetail: 'TaskComEmmaDetail',
+              createTime: '2020-01-05 05:05:00',
+              taskStatus: ''
+            },
+            {
+              id: '1006',
+              taskName: 'TaskComFaker',
+              taskDetail: 'TaskComFakerDetail',
+              createTime: '2020-01-06 06:06:00',
+              taskStatus: ''
+            },
+            {
+              id: '1007',
+              taskName: 'TaskComGlass',
+              taskDetail: 'TaskComGlassDetail',
+              createTime: '2020-01-07 07:07:00',
+              taskStatus: ''
+            },
+            {
+              id: '1008',
+              taskName: 'TaskComHardy',
+              taskDetail: 'TaskComHardyDetail',
+              createTime: '2020-01-08 08:08:00',
+              taskStatus: ''
+            },
+            {
+              id: '1009',
+              taskName: 'TaskComIda',
+              taskDetail: 'TaskComIdaDetail',
+              createTime: '2020-01-09 09:09:00',
+              taskStatus: ''
+            },
+            {
+              id: '1010',
+              taskName: 'TaskComJoke',
+              taskDetail: 'TaskComJokeDetail',
+              createTime: '2020-01-10 10:10:00',
+              taskStatus: ''
+            },
+            {
+              id: '1011',
+              taskName: 'TaskComKey',
+              taskDetail: 'TaskComKeyDetail',
+              createTime: '2020-01-11 11:11:00',
+              taskStatus: ''
+            },
+            {
+              id: '1012',
+              taskName: 'TaskComLux',
+              taskDetail: 'TaskComLuxDetail',
+              createTime: '2020-01-12 12:12:00',
+              taskStatus: ''
+            },
+          ]
+        },
+        data: {
+          search:{
+            bar: '',
+            taskType: '',
+            keys: '',
+          },
+          page:{
+            nowPageNum: '',
+          }
+        },
+        rule:{
+        }
+      };
+    },
+    created() {
+    },
+    methods: {
+      searchsCreate(){},
+      searchsDels(){},
+      searchsSearch(){},
+
+      listsSelectChange(){},
+      listsUntopClick(){},
+      listsTopClick(){},
+      listsSeeClick(){},
+      listsEditClick(){},
+      listsDelClick(){},
+
+      pagesSizeChange(){},
+      pagesNowPageChange(){},
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .ztask-coms {
+    /*border: 2px solid cyan;*/
+
+    height: calc((100vh - 220px) * 1.0);
+  }
+
+  .ztask-searchs {
+    /*border: 2px solid #0ea4c5;*/
+    height: 70px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .ztask-searchs-items {
+    border: 2px solid #00c561;
+
+    margin: 17px 0px 20px 0px;
+    width: auto;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .ztask-searchs-forms{
+    /*border: 2px solid #f900ff;*/
+    height: 30px;
+    margin-bottom: 10px;
+  }
+
+  .ztask-lists {
+    /*border: 2px solid #0dc50e;*/
+    height: calc((100vh - 338px) * 1.0);
+
+    overflow: auto;
+  }
+
+  .ztask-pages {
+    /*border: 2px solid red;*/
+    /*height: 56px;*/
+    height: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  .ztask-page{
+    /*border: 2px solid red;*/
+    position: relative;
+    margin-right: 0;
+  }
+</style>

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

@@ -38,16 +38,22 @@ export default {
 
 <style lang="scss" scoped>
 .mains {
-  border: 1px solid red;
-  height: 90vh;
-  margin: 10px 10px;
+  /*border: 1px solid red;*/
+  height: calc((100vh - 140px) * 1.0);
+  min-width: 1000px;
+
+  margin: 10px 20px 10px 10px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 }
+
 .ztabs {
-  // border: 2px solid red;
-  min-height: 100vh;
-  // min-height: 500px;
-}
-d2-container {
-  overflow: hidden;
+  /*border: 2px solid darkviolet;*/
+
+  height: calc((100vh - 180px) * 1.0);
+
+  width: 100%;
 }
 </style>