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="任务类型">
            <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-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'" 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 type="text" class="buttonTextNormal" @click="listsSeeClick(scope.row.id)">详情</el-button>
            <el-button type="text" class="buttonTextNormal" @click="listsEditClick(scope.row.id)">编辑</el-button>
            <el-button type="text" class="buttonTextWarning" @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="author">
                  <el-select
                    v-model="data.create.author"
                    placeholder="请选择作者"
                    @change="dialogCreateAuthorChange"
                    style="width:100%;"
                  >
                    <el-option
                      v-for="item in list.man"
                      :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="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="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="查看集团任务"
        :visible.sync="cache.status.seeDialog"
        width="60%"
        :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="author">
                  <el-input :disabled="true" v-model="data.see.authore" 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('createForm')">发 布</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  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',
              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: ''
            },
          ],
          man: [
            {
              id: '1001',
              name: 'Alice'
            },
            {
              id: '1002',
              name: 'Bob'
            },
            {
              id: '1003',
              name: 'Clid'
            },
            {
              id: '1004',
              name: 'Dive'
            },
          ]
        },
        data: {
          search: {
            bar: '',
            taskType: '',
            taskDate: '',
            keys: '',
          },
          page: {
            nowPageNum: 1,
          },
          create: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          createDefault: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          see: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          seeDefault: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
        },
        rule: {
          create: {
            taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}],
            taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}],
          },
          see: {},
        }
      };
    },
    created() {
    },
    methods: {
      searchsCreate() {
        this.cache.status.createDialog = true
      },
      searchsDels() {
      },
      searchsSearch() {
      },

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

        this.data.see = {
          taskName: 'Bob',
          author: 'author',
          taskDetail: 'taskDetail',
        }


      },
      listsEditClick(inData) {
        this.cache.status.createDialog = true

        this.data.create = {
          taskName: 'taskName',
          author: 'author',
          taskDetail: 'taskDetail',
        }

      },
      listsDelClick() {
      },

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

      dialogCreateAuthorChange() {
      },
      dialogCreateBeforeClose() {
        this.cache.status.createDialog = false
      },
      dialogCreateCancel() {
        this.data.create = JSON.parse(JSON.stringify(this.data.createDefault))
        this.cache.status.createDialog = 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-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;
  }

  .buttonTextNormal {
    color: #666666;
  }
  .buttonTextWarning {
    color: #D0021B;
  }
</style>