cmanager/src/views/tenant/works/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-width="0">
          <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-input v-model="search.missionTitle" 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>


        <el-form-item label="报名截止时间:">
          <el-date-picker v-model="endDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="endDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker v-model="beginTimeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="beginDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="完成时间:">
          <el-date-picker v-model="successTimeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="successDateChange">
          </el-date-picker>
        </el-form-item>

        <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> -->
    <el-form size="small" label-position="right" :inline="true" >
      <el-row :span="24">
        <el-form-item label="社区街道名称">
        <el-input
          v-model="search.companyName"
          placeholder="社区街道名称"
          style="width: 130px"
          clearable
        ></el-input>
      </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-input v-model="search.jobName"  placeholder="岗位名称" clearable></el-input>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-select v-model="search.type" placeholder="请选择搜索时间类型">-->
<!--            <el-option label="岗位开始日期" :value="0"></el-option>-->
<!--            <el-option label="岗位结束日期" :value="2"></el-option>-->
<!--            &lt;!&ndash; <el-option label="报名截止日期" :value="3"></el-option> &ndash;&gt;-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="search.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="岗位状态">
          <el-select v-model="search.jobStatus">
            <el-option
              v-for="(item, index) in mStatusList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <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
      },
      mStatusList: [
        { value: 1, label: "招聘中" },
        { value: 2, label: "任务中" },
        { value: 3, label: "已完成" },
        { value: 4, label: "已失效" },
        {
          label: "审核未通过",
          value: 9,
        },
      ],
      search: {
        status: 1
      },
      timeScreenTerm: [{
        value: 1,
        label: '报名截止日期',
      },
      {
        value: 2,
        label: '开始日期',
      },
      {
        value: 3,
        label: '完成日期',
      }],
    }
  },
  components: {
    WaitingMission,
    OngoingMission,
    FinishedMission,
    ExpiredMission
  },
  computed: {
  },
  watch: {
  },
  methods: {
    handleSearch() {
      let params = { ...this.search }
      if(this.search.time) {
          params.stime = this.search.time[0],
          params.etime = this.search.time[1]
      }
      if (this.search.status === 1) {
        console.log("1111111");
        this.$refs.waiting.onLoad(this.page, params);
      } else if (this.search.status === 2) {
        console.log("222222");
        this.$refs.onging.onLoad(this.page, params);
      } else if (this.search.status === 3) {
        console.log("3333333");
        this.$refs.finished.onLoad(this.page, params);
      } else if (this.search.status === 4) {
        console.log("444444444");
        this.$refs.expired.onLoad(this.page, params);
      }
    },
    date() {
      this.dateChange(this.timeValue)
    },
    dateChange(val) {
      console.log(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: '',
        jobName: '',
        companyName: '',
        jobStatus: ''
      }
      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>