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" :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 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 === 'send' ? '已发布' : '未发布' }}</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'"
              class="buttonTextNormal"
              type="text"
              @click="listsUntopClick(scope.row.id)"
            >已置顶</el-button>
            <el-button
              v-if="scope.row.taskStatus !== 'Top'"
              class="buttonTextNormal"
              type="text"
              @click="listsTopClick(scope.row.id)"
            >置顶</el-button>-->
            <el-button class="buttonTextNormal" type="text" @click="listsSeeClick(scope.row.id)">详情</el-button>
            <el-button class="buttonTextNormal" type="text" @click="listsEditClick(scope.row.id)">编辑</el-button>
            <el-button class="buttonTextWarning" type="text" @click="listsDelClick(scope.row)">删除</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="40%"
        :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>
      
      <el-dialog
        title="任务详情"
        :visible.sync="cache.status.seeDialog"
        width="50%"
        :before-close="dialogSeeBeforeClose"
      >
        <div class="dialogMain">
          <el-form :model="data.see" :rules="rule.see" label-width="120px" ref="seeForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务名称：" prop="taskName">
                  <el-input
                    :disabled="true"
                    v-model="data.see.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-input
                    :disabled="true"
                    v-model="data.see.taskType"
                    autocomplete="off"
                    placeholder="任务类型为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="柜组：" prop="bar">
                  <el-input
                    :disabled="true"
                    v-model="data.see.bar"
                    autocomplete="off"
                    placeholder="柜组为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="发布日期：" prop="createTime">
                  <el-input
                    :disabled="true"
                    v-model="data.see.createTime"
                    autocomplete="off"
                    placeholder="发布日期为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务期限：" prop="taskTime">
                  <el-input
                    :disabled="true"
                    v-model="data.see.taskTime"
                    autocomplete="off"
                    placeholder="任务期限为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="状态：" prop="taskStatus">
                  <el-input
                    :disabled="true"
                    v-model="data.see.taskStatus"
                    autocomplete="off"
                    placeholder="任务状态为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="任务详情：" prop="taskDetail">
                  <el-input
                    :disabled="true"
                    type="textarea"
                    :rows="5"
                    placeholder="任务详情为空"
                    v-model="data.see.taskDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogSeeCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogSeeSubmitSend('seeForm')">任务下发</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ApiContactSync } from "@api/task/bar";
import md5 from "js-md5";

export default {
  components: {},
  data() {
    return {
      cache: {
        status: {
          createDialog: false,
          seeDialog: 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: ""
        },
        see: {
          taskName: "taskName",
          taskType: "taskType",
          bar: "bar",
          createTime: "2020-01-01",
          taskTime: "2020-01-05" + " 至 " + "2020-01-10",
          taskStatus: "已发布",
          taskDetail: "taskDetail"
        },
        seeDefault: {
          taskName: "",
          taskType: "",
          bar: "",
          createTime: "",
          taskTime: "",
          taskStatus: "",
          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" }
          ]
        },
        see: {}
      }
    };
  },
  created() {},
  methods: {
    searchsCreate() {
      this.cache.status.createDialog = true;
    },
    searchsSend() {},
    searchsDels() {
      ApiContactSync().then(res => {});
    },
    searchsSearch() {},

    listsSelectChange() {},
    listsUntopClick() {},
    listsTopClick() {},
    listsSeeClick(inData) {
      this.cache.status.seeDialog = true;
    },
    listsEditClick() {
      this.cache.status.createDialog = true;

      this.data.create = {
        taskName: "change",
        taskType: "taskType",
        bar: "bar",
        taskTime: "",
        taskDetail: ""
      };
    },
    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;
        }
      });
    },

    dialogSeeBeforeClose() {
      this.cache.status.seeDialog = false;
    },
    dialogSeeCancel() {
      this.data.see = JSON.parse(JSON.stringify(this.data.seeDefault));
      this.cache.status.seeDialog = false;
    },
    dialogSeeSubmitSend() {}
  }
};
</script>
<style lang="scss" scoped>
.ztask-bars {
  /*border: 2px solid cyan;*/

  height: calc((100vh - 220px) * 1);
}

.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);

  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;
}

.buttonTextNormal {
  color: #666666;
}

.buttonTextWarning {
  color: #d0021b;
}
</style>