cmanager/src/views/manage/works/count/index.vue

<template>
  <div>
    <basic-container>
      <el-radio-group v-model="search.status" size="small" @change="radioGroup">
        <el-radio-button v-for="(item, key, index) in missionTypes" :key="index"
          :label="item.value">{{ item.label }}</el-radio-button>
      </el-radio-group>
    </basic-container>

    <basic-container>
      <div class="taskTip">
        <p class="title">{{ search.status | searchStatus }}</p>
        <div style="height: 30px;"></div>
        <div v-if="search.status === 1" style="display: flex;flex-wrap: wrap;">
          <span class="name">岗位总数&nbsp;&nbsp;&nbsp;{{ taskGather.totalCount }}</span>
          <span class="name" style="margin-left: 30px;">
            <span class="smallTitle">招聘中</span>{{ taskGather.recruitCount }}
            <!-- <span class="smallTitle">任务中</span>{{taskGather.startCount}} -->
            <span class="smallTitle">已完成</span>{{ taskGather.completCount }}
            <!-- <span class="smallTitle">已失效</span>{{ taskGather.invalidCount }} -->
            <span class="smallTitle">未发布</span>{{ taskGather.rejectCount }}
          </span>
        </div>

        <div v-if="search.status === 2" style="display: flex;flex-wrap: wrap;">
          <span class="name" style="margin-right: 40px;">岗位总数&nbsp;&nbsp;&nbsp;{{ taskDetail.totalCount }}</span>
          <span class="name">
            人员情况
            <span class="smallTitle">招聘总人数</span>{{ taskDetail.enListCount }}
            <span class="smallTitle">申请总人数</span>{{ taskDetail.applyCount }}
            <span class="smallTitle">录用总人数</span>{{ taskDetail.employedCount }}
          </span>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <!-- 搜索栏 -->
      <el-form size="small" label-position="right" :inline="true">
        <el-row :span="24" v-if="search.status === 1">

          <el-form-item label="公司名称:">
            <el-input v-model="search.companyName" placeholder="公司名称"></el-input>
          </el-form-item>

          <el-form-item label="联系电话:">
            <el-input v-model="search.callTel" placeholder="联系电话"></el-input>
          </el-form-item>

          <!--          <el-form-item label="距离最后发任务时间:">-->
          <!--            <el-radio-group v-model="search.status" size="small" @change="radioGroup">-->
          <!--              <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>-->

          <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-row :span="24" v-if="search.status === 2">

          <el-form-item label="公司名称:">
            <el-input v-model="search.companyName" placeholder="公司名称"></el-input>
          </el-form-item>

          <el-form-item label="岗位编号:">
            <el-input v-model="search.missionNo" placeholder="岗位编号"></el-input>
          </el-form-item>

          <el-form-item label="岗位标题:">
            <el-input v-model="search.missionTitle" placeholder="岗位标题"></el-input>
          </el-form-item>
          <br>
          <el-form-item>
            <el-select v-model="search.reviewState" placeholder="请选择搜索时间类型" style="width:100%">
              <el-option v-for="(item, key, index) in timeStatus" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker :disabled="search.reviewState === ''" v-model="search.taskTime" type="daterange"
              range-separator="至" start-placeholder="开始时间" end-placeholder="完成时间" format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd" @change="dateChangeSubTime">
            </el-date-picker>
          </el-form-item>

          <tool-tip></tool-tip>

          <el-form-item label="岗位状态:">
            <el-select v-model="search.jobStatus" placeholder="岗位状态" style="width:100%">
              <el-option v-for="(item, key, index) in jobStatus" :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>
            <el-button size="small" icon="el-icon-delete" @click="taskOut">导 出</el-button>
          </div>
        </el-row>

      </el-form>
      <!-- table -->
      <gather v-if="search.status === 1" ref="gather" @searchCompanyName="searchCompanyName"></gather>
      <detail v-if="search.status === 2" ref="detail"></detail>
    </basic-container>
  </div>
</template>

<script>
import { postState, companyPostState, timeStatus, } from '@/common/dic'
import { gatherInfo, detailInfo } from '@/api/workstation/post'
import gather from "./table/gather";
import detail from "./table/detail";
import { setStore, getStore } from '@/util/store'
export default {
  name: "index",
  components: { gather, detail },
  data() {
    return {
      disabled: true,
      missionTypes: postState,
      jobStatus: companyPostState,
      timeStatus: timeStatus,
      activeName: 'first',
      taskTime: '',
      taskGather: {},
      taskDetail: {},
      search: {
        status: 1,
      },
    };
  },
  filters: {
    searchStatus(v) {
      switch (v) {
        case 1:
          return '岗位概况';
        case 2:
          return '岗位概况';
      }
    }
  },
  created() {
    const status = getStore({ name: 'taskStatus' })
    if (status) {
      this.search.status = Number(status)
    }
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    searchCompanyName(companyName) {
      this.search.status = 2
      setStore({ name: 'taskStatus', content: 2, type: 'session' })
      this.search.companyName = companyName
      this.handleSearch()
    },
    dateChangeSubTime(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 = '';
      }
    },
    gatherInfoInit() {
      gatherInfo().then(res => {
        this.taskGather = res.data.data
      })
    },
    detailInfoInit() {
      // detailInfo().then(res => {
      //   this.taskDetail = res.data.data
      // })
    },
    radioGroup(v) {
      setStore({ name: 'taskStatus', content: v, type: 'session' })
      this.handleClear()
    },
    handleSearch() {
      if (this.search.status === 1) {
        this.gatherInfoInit()
        var gatherObj = {
          companyName: this.search.companyName,
          callTel: this.search.callTel
        }
        this.$refs.gather.init(gatherObj)
      } else if (this.search.status === 2) {
        this.detailInfoInit()
        var detailObj = {
          jobStatus: this.search.jobStatus ? this.search.jobStatus : '',
          companyName: this.search.companyName ? this.search.companyName : '',
          missionNo: this.search.missionNo ? this.search.missionNo : '',
          jobName: this.search.missionTitle ? this.search.missionTitle : '',
          reviewState: this.search.reviewState ? this.search.reviewState : 0,
          stime: this.search.stime ? this.search.stime : '',
          etime: this.search.etime ? this.search.etime : ''
        }
        this.$nextTick(() => {
          this.$refs.detail.init(detailObj)
        })
      }
    },
    handleClear() {
      this.search = {
        status: this.search.status,
        companyName: '',
        callTel: '',
        missionNo: '',
        missionTitle: '',
        reviewState: '',
        jobStatus: '',
      };
      this.handleSearch()
    },
    taskOut() {
      var detailObj = {
        jobStatus: this.search.status ? this.search.status : '',
        companyName: this.search.companyName ? this.search.companyName : '',
        missionNo: this.search.missionNo ? this.search.missionNo : '',
        jobName: this.search.missionTitle ? this.search.missionTitle : '',
        reviewState: this.search.reviewState ? this.search.reviewState : '',
        stime: this.search.stime ? this.search.stime : '',
        etime: this.search.etime ? this.search.etime : ''
      }
      this.$refs.detail.taskOut(detailObj)
    }
  }
}
</script>

<style scoped>
p {
  margin: 0 !important;
}

.el-form-item {
  margin-right: 18px !important;
  /*margin-bottom: 0 !important;*/
}

.searchBtn {
  display: inline-block;
  margin-bottom: 18px;
}

.taskTip {
  border-radius: 0px 4px 5px 4px;
  /*padding: 14px;*/
}

.taskTip .name {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
}

.taskTip .smallTitle {
  width: 36px;
  height: 25px;
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 25px;
  margin-right: 15px;
  margin-left: 40px;
}

.taskTip .title {
  height: 30px;
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  line-height: 30px;
}
</style>