cmanager/src/views/tenant/mission/index.vue

<template>
  <basic-container>
    <!--搜索栏-->
    <el-form size="small" label-position="right" :inline="true" style="padding-left: 10px;padding-right: 10px;">
      <el-row :span="24">
        <el-form-item label="任务名称:">
          <el-input v-model="search.missionTitle" placeholder="任务名称" clearable></el-input>
        </el-form-item>

        <el-form-item label="任务状态:">
          <el-select v-model="search.status" placeholder="任务状态" style="width:100%">
              <el-option
                v-for="(item,key,index) in missionTypes"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
          </el-select>
          <!-- <el-radio-group v-model="search.status" size="small">
            <el-radio-button v-for="(item,key,index) in missionTypes" :key="index" :label="item.value">{{item.label}}
            </el-radio-button>
          </el-radio-group> -->

        </el-form-item>
        <!-- <el-form-item label="任务编号:">
          <el-input v-model="search.missionNo" placeholder="任务编号" clearable></el-input>
        </el-form-item> -->



        <el-form-item label="">
          <el-select v-model="search.state" placeholder="请选择搜索时间类型" style="width: 100%" @change="date">
            <el-option
              v-for="(item, key, index) in timeScreenTerm"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            :disabled="!search.state"
            v-model="timeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="dateChange">
          </el-date-picker>
        </el-form-item>
        <tool-tip ></tool-tip>

        <div class="searchBtn">
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
          <el-button size="small" icon="el-icon-delete" @click="handleClear">清 空</el-button>
        </div>
      </el-row>
    </el-form>
    <!--/搜索栏-->
    <waiting-mission ref="waiting" v-if="search.status === 1" @refresh="handleClear"></waiting-mission>
    <ongoing-mission ref="onging" v-if="search.status === 2" @refresh="handleClear"></ongoing-mission>
    <finished-mission ref="finished" v-if="search.status === 3" @refresh="handleClear"></finished-mission>
    <expired-mission ref="expired" v-if="search.status === 4" @refresh="handleClear"></expired-mission>
  </basic-container>
</template>

<script>
  import WaitingMission from './Table/WaitingMission'
  import OngoingMission from './Table/OngoingMission'
  import FinishedMission from './Table/FinishedMission'
  import ExpiredMission from './Table/ExpiredMission'
  import { companyMissionState } from '@/common/dic'

  //   import {mapGetters} from "vuex";

  export default {
    comments: {

    },
    name: "tenant_mission",
    data() {
      return {
        missionTypes: companyMissionState,
        timeValue: "",
        endDateRange: "",//报名截止日期筛选
        beginTimeValue:"",//开始时间筛选
        successTimeValue:"",//完成时间筛选
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        search: {
          status: 1
        },
        timeScreenTerm:[{
          value: 1,
          label: '报名截止日期',
        },
          {
            value: 2,
            label: '开始日期',
          },
          {
            value: 3,
            label: '完成日期',
          }],
      }
    },
    components: {
      WaitingMission,
      OngoingMission,
      FinishedMission,
      ExpiredMission
    },
    computed: {
    },
    watch: {
    },
    methods: {
      handleSearch() {
        if (this.search.status === 1) {
          this.$refs.waiting.onLoad(this.page, this.search);
        } else if (this.search.status === 2) {
          this.$refs.onging.onLoad(this.page, this.search);
        } else if (this.search.status === 3) {
          this.$refs.finished.onLoad(this.page, this.search);
        } else if (this.search.status === 4) {
          this.$refs.expired.onLoad(this.page, this.search);
        }
      },
      date () {
        this.dateChange(this.timeValue)
      },
      dateChange(val) {
        // if (val) {
        //   this.search.stime = val[0] + " 00:00:00";
        //   this.search.etime = val[1] + " 23:59:59";
        // } else {
        //   this.search.stime = '';
        //   this.search.etime = '';
        // }
        switch (this.search.state) {
          case 1:
            return this.endDateChange(val)
          case 2:
            return this.beginDateChange(val);
          case 3:
            return this.successDateChange(val);
        }

      },
      handleClear() {
        let curStatus = this.search.status;
        this.search = {
          status: curStatus,
          missionNo: '',
          missionTitle: '',
          stime: '',
          etime: '',
          etimePubBeginTime: '',
          etimePubEndTime: '',
          stimeBeginTime : '',
          stimeEndTime : '',
          etimeBeninTime:'',
          etimeEndTime:'',

        }
        this.timeValue = '';
        this.endDateRange = '';
        this.beginTimeValue="";
        this.successTimeValue="";
        this.handleSearch()
      },
      // 开始时间
      beginDateChange(val) {
        if (val) {
          this.clearDateTime()
          this.search.stimeBeginTime = val[0] + " 00:00:00";
          this.search.stimeEndTime = val[1] + " 23:59:59";
        } else {
          this.search.stimeBeginTime = '';
          this.search.stimeEndTime = '';
        }
      },
      // 完成时间
      successDateChange(val){
        if (val) {
          this.clearDateTime()
          this.search.etimeBeninTime = val[0] + " 00:00:00";
          this.search.etimeEndTime = val[1] + " 23:59:59";
        } else {
          this.search.etimeBeninTime = '';
          this.search.etimeEndTime = '';
        }
      },
      // 报名截止时间
      endDateChange(val){
        if (val) {
          this.clearDateTime()
          this.search.etimePubBeginTime = val[0] + " 00:00:00";
          this.search.etimePubEndTime = val[1] + " 23:59:59";
        } else {
          this.search.etimePubBeginTime = '';
          this.search.etimePubEndTime = '';
        }
      },
      // 清楚多余时间参数
      clearDateTime(){
        this.search.etimePubBeginTime = '';
        this.search.etimePubEndTime = '';
        this.search.etimeBeninTime = '';
        this.search.etimeEndTime = '';
        this.search.stimeBeginTime = '';
        this.search.stimeEndTime = '';
      }
    }
  };
</script>
<style scoped>
  .el-form-item {
    margin-bottom: 18px !important;
    margin-right: 10px !important;
    padding: 0 10px;
  }

  .searchBtn {
    display: inline-block;
    margin-bottom: 18px;
  }
</style>