index.vue

<template>
  <div class="ztask-bars">
    <div class="ztask-searchs">
      <div class="ztask-searchs-items">
        <el-button size="small" @click="searchsCreate">创建任务</el-button>
        <el-button type="primary" size="small" @click="searchsSend">发布任务</el-button>
        <el-button type="primary" size="small" @click="searchsDels">批量删除</el-button>
      </div>
      <div class="ztask-searchs-items">
        <el-form class="ztask-searchs-forms fk01" :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-date-picker
              size="small"
              v-model="data.search.taskDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:200px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              size="small"
              v-model="data.search.status"
              placeholder="请选择状态"
              style="width:160px;"
            >
              <el-option
                v-for="item in cache.list.status"
                :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 class="fk02" 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="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="createTime" label="创建日期" align="center" width="120"></el-table-column>
        <el-table-column prop="taskDate" label="任务期限" align="center" width="200"></el-table-column>

        <el-table-column prop="taskDetail" label="任务详情" align="center" style="min-width: 200px;"></el-table-column>
        <el-table-column label="状态" align="center" width="160">
          <template slot-scope="scope">{{ scope.row.taskStatus }}</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 class="ztask-dialogs">
      <el-dialog
        title="创建任务"
        :visible.sync="cache.status.createDialog"
        width="50%"
        :before-close="dialogCreateBeforeClose"
      >
        <div class="dialogMain">
          <el-form :model="data.create" :rules="rule.create" label-width="120px" ref="createForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务名称：" prop="taskName">
                  <el-input v-model="data.create.taskName" autocomplete="off" placeholder="请输入任务名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务类型：" prop="taskType">
                  <el-select
                    v-model="data.create.taskType"
                    placeholder="请选择任务类型"
                    @change="dialogCreateTaskTypeChange"
                    style="width:100%;"
                  >
                    <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-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="柜组：" prop="bar">
                  <el-select
                    v-model="data.create.bar"
                    placeholder="请选择柜组"
                    @change="dialogCreateBarChange"
                    style="width:100%;"
                  >
                    <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-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="产品周期：" prop="taskTime">
                  <el-date-picker
                    v-model="data.create.taskTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:100%;"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="任务详情：" prop="taskDetail">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入任务详情"
                    v-model="data.create.taskDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogCreateCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogCreateSubmit('createForm')">保 存</el-button>
          <el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        cache: {
          status: {
            createDialog: false
          },
          list: {
            bar: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "柜组1"
              }
            ],
            taskType: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "测试"
              }
            ],
            status: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "已发布"
              }
            ],
          }
        },
        list: {
          main: [
            {
              id: '1001',
              taskName: 'TaskComAlice',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComAliceDetail',
              taskStatus: 'send'
            },
            {
              id: '1002',
              taskName: 'TaskComBob',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComBobDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1003',
              taskName: 'TaskComClid',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComClidDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1004',
              taskName: 'TaskComDive',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComDiveDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1005',
              taskName: 'TaskComEmma',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComEmmaDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1006',
              taskName: 'TaskComFaker',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComFakerDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1007',
              taskName: 'TaskComGlass',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComGlassDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1008',
              taskName: 'TaskComHardy',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComHardyDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1009',
              taskName: 'TaskComIda',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComIdaDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1010',
              taskName: 'TaskComJoke',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComJokeDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1011',
              taskName: 'TaskComKey',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComKeyDetail',
              taskStatus: 'nosend'
            },
            {
              id: '1012',
              taskName: 'TaskComLux',
              taskType: '拉新',
              bar: '男装',
              createTime: '2020-01-01',
              taskDate: '2020-01-01 至 2020-01-01',
              taskDetail: 'TaskComLuxDetail',
              taskStatus: 'nosend'
            },
          ]
        },
        data: {
          search: {
            bar: '',
            taskType: '',
            taskDate: '',
            status: '',
            keys: '',
          },
          page: {
            nowPageNum: 1,
          },
          create: {
            taskName: '',
            taskType: '',
            bar: '',
            taskTime: '',
            taskDetail: '',
          },
          createDefault: {
            taskName: '',
            taskType: '',
            bar: '',
            taskTime: '',
            taskDetail: '',
          },
        },
        rule: {
          create: {
            taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}],
            taskType: [{required: true, message: '任务类型不能为空', trigger: 'change'}],
            bar: [{required: true, message: '柜组不能为空', trigger: 'change'}],
            taskTime: [{required: true, message: '任务周期不能为空', trigger: 'change'}],
            taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}],
          }

        }
      };
    },
    created() {
    },
    methods: {
      searchsCreate() {
        this.cache.status.createDialog = true
      },
      searchsSend() {
      },
      searchsDels() {
      },
      searchsSearch() {
      },

      listsSelectChange() {
      },
      listsUntopClick() {
      },
      listsTopClick() {
      },
      listsSeeClick() {
      },
      listsEditClick() {
      },
      listsDelClick() {
      },

      pagesSizeChange() {
      },
      pagesNowPageChange() {
      },

      dialogCreateTaskTypeChange() {
      },
      dialogCreateBarChange() {
      },
      dialogCreateBeforeClose() {
        this.cache.status.createDialog = false
      },
      dialogCreateCancel() {
        this.data.create = JSON.parse(JSON.stringify(this.data.createDefault))
        this.cache.status.createDialog = false
      },
      dialogCreateSubmit(inForm) {
        this.$refs[inForm].validate(valid => {
          if (valid) {

          } else {
            return false
          }
        })
      },
      dialogCreateSubmitSend() {
        this.$refs[inForm].validate(valid => {
          if (valid) {

          } else {
            return false
          }
        })
      },


    }
  };
</script>
<style lang="scss" scoped>
  .ztask-bars {
    /*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;
  }

  .fk01 {
    /*border: 2px solid red;*/
  }

  .fk02 {
    /*border: 2px solid orange;*/
  }
</style>