cmanager/src/views/workstation/enterprise/index.vue

<template>
  <div>
    <basic-container>
      <el-radio-group v-model="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 v-if="status === 2">
      <div class="enterpriseTip">
        <p class="title">{{status | searchStatus}}</p>
        <div style="height: 30px;"></div>
        <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
          <span class="name">企业总数&nbsp;&nbsp;&nbsp;{{negativeTurnZero(companySurveyObj.companyCount)}}</span>
          <span class="name">商保<span class="smallTitle">启用</span>{{negativeTurnZero(companySurveyObj.insuranceOn)}} <span class="smallTitle">停用</span>{{negativeTurnZero(companySurveyObj.insuranceShut)}}</span>
          <span class="name">保证金<span class="smallTitle">已缴</span> {{negativeTurnZero(companySurveyObj.trialOn)}} <span class="smallTitle">免缴</span> {{negativeTurnZero(companySurveyObj.trialFree)}}<span class="smallTitle">未缴</span> {{negativeTurnZero(companySurveyObj.trialShut)}}</span>
          <span class="name">电子合同<span class="smallTitle">启用</span> {{negativeTurnZero(companySurveyObj.contractOn)}}<span class="smallTitle">停用</span> {{negativeTurnZero(companySurveyObj.contractShut)}}</span>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <!--搜索栏-->
      <el-form
        size="small"
        label-position="right"
        :inline="true"
      >

        <el-row :span="24">

          <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.phone" placeholder="联系电话"></el-input>
          </el-form-item>

          <el-form-item v-if="status === 2" label="商保:">
            <el-select v-model="search.insuranceOn" placeholder="商保" style="width:100%">
              <el-option
                v-for="(item,key,index) in insurance"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="status === 2" label="保证金:">
            <el-select v-model="search.trialOn" placeholder="保证金" style="width:100%">
              <el-option
                v-for="(item,key,index) in bond"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="status === 2" label="电子合同:">
            <el-select v-model="search.contractOn" placeholder="电子合同" style="width:100%">
              <el-option
                v-for="(item,key,index) in contract"
                :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>

      <!-- table -->
      <examine ref="examine"></examine>
    </basic-container>
  </div>
</template>

<script>
import { enterpriseState, enableState, bondState } from '@/common/dic'
import {getCompanySurveyVO} from '@/api/workstation/enterprise'
import examine from "./table/examine";
import { negativeTurnZero } from "@/util/validate";
import {setStore, getStore} from '@/util/store'

export default {
  name: "index",
  components: {examine},
  data() {
    return {
      missionTypes: enterpriseState,
      activeName: 'first',
      companySurveyObj: {},
      search: {
        status: 1,
        insurance: '',
        bond: '',
        contract: '',
      },
      status: 1,
      insurance: enableState,
      bond: bondState,
      contract: enableState
    };
  },
  filters: {
    searchStatus (v) {
      switch (v) {
        case 1:
          return '审核中企业概况';
        case 2:
          return '合作中企业概况';
        case 3:
          return '终止合作企业概况';
      }
    }
  },
  created() {
    const status = getStore({name: 'enterpriseStatus'})
    if (status) {
      this.status = Number(status)
      if (this.status === 2) {
        this.search.status = 0
      }
    }
  },
  mounted() {
    this.companySurvey()
  },
  methods: {
    negativeTurnZero,
    async companySurvey(){
      if (this.search.status === 0) {
        var obj = {
          status: this.search.status
        }
        await getCompanySurveyVO(obj).then(res => {
          this.companySurveyObj = res.data.data
        })
      }
      await this.handleSearch()
    },
    radioGroup(v){
      setStore({name: 'enterpriseStatus', content: v, type: 'session'})
      // 0：合作中；1：审核中； 2：已驳回 9：终止合作
      var status = Number(v)
      if (status === 2) {
        status = 0
      } else if (status === 3) {
        status = 9
      }
      this.search = {
        status: status,
        companyName: '',
        phone: '',
        insuranceOn:'',
        trialOn:'',
        contractOn: ''
      }
      this.status = v
      this.companySurvey()
    },
    handleSearch () {
      var status = Number(this.status)
      if (status === 2) {
        status = 0
      } else if (status === 3) {
        status = 9
      }
      this.search.status = status
      this.$refs.examine.init(this.search);
    },
    handleClear () {
      let curStatus = this.search.status;
      this.search = {
        status: curStatus,
        companyName: '',
        phone: '',
        insuranceOn:'',
        trialOn:'',
        contractOn: ''
      }
      this.handleSearch()
    }
  }
}
</script>

<style scoped>
  p{
    margin: 0 !important;
  }
  .el-form-item {
    /*margin-bottom: 0 !important;*/
  }
  .searchBtn {
    display: inline-block;
    margin-bottom: 18px;
  }
  .enterpriseTip{
    border-radius: 0px 4px 5px 4px;
    /*padding: 14px;*/
  }
  .enterpriseTip .name{
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
  }
  .enterpriseTip .smallTitle{
    width: 36px;
    height: 25px;
    font-size: 18px;
    font-weight: 400;
    color: #999999;
    line-height: 25px;
    margin-right: 15px;
    margin-left: 40px;
  }
  .enterpriseTip .title{
    height: 30px;
    font-size: 22px;
    font-weight: 800;
    color: #333333;
    line-height: 30px;
  }
</style>