index.vue

<template>
  <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>