boss/pages/main/index/jobs_behalf_post.vue

<template>
  <div>
    <div class="count-list" v-if="auditData">
      <div class="count-item">全部：{{count.all.total || 0}}</div>
      <div class="count-item">邮箱：{{count.all.email || 0}}</div>
      <div>短信：{{count.all.phone || 0}}</div>
      <el-divider direction="vertical"></el-divider>
      <div class="count-item">开放中：{{count.open.total || 0}}</div>
      <div class="count-item">邮箱：{{count.open.email || 0}}</div>
      <div>短信：{{count.open.phone || 0}}</div>
      <el-divider direction="vertical"></el-divider>
      <div class="count-item">累计新增下载量：{{count.add.total || 0}}</div>
      <div class="count-item">邮箱：{{count.add.email || 0}}</div>
      <div class="count-item">短信：{{count.add.phone || 0}}</div>
      <div>
        <el-button size="small" @click="onAdd">新建岗位</el-button>
      </div>
    </div>
    <div>
      <el-table :data="auditData" @row-click="clickRow" border style="width: 100%">
        <el-table-column prop="id" label="岗位ID" width="70"></el-table-column>
        <el-table-column prop="id" label="代发类型">
          <template slot-scope="scope">
            <span v-if="scope.row.issuedType == '1'">邮箱代发</span>
            <span v-else-if="scope.row.issuedType == '2'">短信代发</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="occupationName" label="职位类型"></el-table-column>
        <el-table-column prop="workTypeName" label="工作方式"></el-table-column>
        <el-table-column label="工作周期">
          <template slot-scope="scope">
            <span>{{scope.row.month}}个月</span>
          </template>
        </el-table-column>
        <el-table-column label="驻场地区">
          <template slot-scope="scope">
            <span>{{scope.row.cityName || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salaryName" label="薪酬范围"></el-table-column>
        <el-table-column label="公司名称">
          <template slot-scope="scope">
            <span>{{scope.row.companyInfo && scope.row.companyInfo.shortName ? scope.row.companyInfo.shortName : (scope.row.companyInfo && scope.row.companyInfo.name ? scope.row.companyInfo.name : '')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="发布时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt,'Y-m-d H:i')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="当前状态"></el-table-column>
        <el-table-column prop="countApplied" label="投递人数"></el-table-column>
        <el-table-column prop="recuitResult" label="是否激活">
          <template slot-scope="scope">
            <span v-if="scope.row.isActivation == '1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="recuitResult" label="是否退订">
          <template slot-scope="scope">
            <span v-if="scope.row.isUnsubscribe == '1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="新建岗位" :visible.sync="agencyPost" :closeOnClickModal="false" :closeOnPressEscape="false">
      <el-form :model="agencyPostForm" :rules="rules" ref="agencyPostForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="代发类型" prop="workType">
          <el-radio-group v-model="agencyPostForm.issuedType">
            <el-radio :label="1">邮箱代发</el-radio>
            <el-radio :label="2">短信代发</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="目标邮箱" :prop="agencyPostForm.issuedType == 1?'email':''"
                      v-if="agencyPostForm.issuedType == 1">
          <el-input v-model="agencyPostForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :prop="agencyPostForm.issuedType == 2?'phone':''"
                      v-if="agencyPostForm.issuedType == 2">
          <el-input type="number" v-model="agencyPostForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="agencyPostForm.name"></el-input>
        </el-form-item>
        <el-form-item label="工作方式" prop="workType">
          <el-radio-group v-model="agencyPostForm.workType">
            <el-radio :label="1">兼职</el-radio>
            <el-radio :label="2">驻场</el-radio>
            <el-radio :label="3">全职</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作地点" v-show="agencyPostForm.workType != 1">
          <el-cascader
            v-model="agencyPostForm.provIdcity"
            :options="areas"
            @change="cityChange"></el-cascader>
        </el-form-item>
        <el-form-item label="职位类型" prop="positionType">
          <el-cascader
            v-model="agencyPostForm.positionType"
            :options="positionType"
            @change="positionChange"></el-cascader>
        </el-form-item>
        <el-form-item label="薪资范围" prop="minSalary">
          <el-row>
            <el-col :span="8">
              <el-select v-model="agencyPostForm.minSalary" placeholder="请选择">
                <el-option
                  v-for="item in minSalary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2" :offset="2">
              至
            </el-col>
            <el-col :span="8" :offset="2">
              <el-select v-model="agencyPostForm.maxSalary" placeholder="请选择">
                <el-option
                  v-for="item in maxSalary"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="工作周期">
          <el-select v-model="agencyPostForm.month" placeholder="请选择">
            <el-option
              v-for="item in month"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技能要求" prop="skills">
          <el-select
            v-model="agencyPostForm.skills"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in skillsData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经验要求" prop="experience">
          <el-radio-group v-model="agencyPostForm.experience">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">3-5年</el-radio>
            <el-radio :label="2">5-10年</el-radio>
            <el-radio :label="3">10年以上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作说明" prop="description">
          <el-input type="textarea" v-model="agencyPostForm.description" placeholder="请输入内容"
                    minlength="5"
                    maxlength="5000" rows="5"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="agencyPost = false">取 消</el-button>
        <el-button type="primary" @click="checkForm('agencyPostForm')">确认发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        total: 0,
        auditData: [],

        agencyPost: false,
        loading: false,
        agencyPostForm: {
          // workType: 2, skills: [11815],issuedType:1
          workType: 2, skills: [], issuedType: 1
        },
        rules: {
          email: [
            {required: true, message: '请输入目标邮箱', trigger: 'blur'},
            {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            // {type: 'phone', message: '手机号码格式不正确', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50  个字符', trigger: 'blur'}
          ],
          workType: [
            {required: true, message: '请选择工作方式', trigger: 'blur'}
          ],
          positionType: [
            {required: true, message: '请选择职位类型', trigger: 'blur'}
          ],
          minSalary: [
            {required: true, message: '请选择薪资范围', trigger: 'blur'}
          ],
          maxSalary: [
            {required: true, message: '请选择薪资范围', trigger: 'blur'}
          ],
          skills: [
            {required: true, message: '请选择技能要求', trigger: 'blur'}
          ],
          experience: [
            {required: true, message: '请选择经验要求', trigger: 'blur'}
          ],
          description: [
            {required: true, message: '请输入工作说明', trigger: 'blur'},
            {min: 5, max: 5000, message: '长度在 5 到 5000  个字符', trigger: 'blur'}
          ],
        },
        minSalary: [
          {
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '15',
            label: '15'
          }, {
            value: '20',
            label: '20'
          }, {
            value: '25',
            label: '25'
          }, {
            value: '30',
            label: '30'
          }, {
            value: '50',
            label: '50'
          }, {
            value: '100',
            label: '100'
          }, {
            value: '200',
            label: '200'
          }, {
            value: '-1',
            label: '面议'
          },
        ],
        maxSalary: [
          {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '15',
            label: '15'
          }, {
            value: '20',
            label: '20'
          }, {
            value: '25',
            label: '25'
          }, {
            value: '30',
            label: '30'
          }, {
            value: '50',
            label: '50'
          }, {
            value: '100',
            label: '100'
          }, {
            value: '200',
            label: '200'
          }, {
            value: '500',
            label: '500'
          },
        ],
        month: [
          {
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }, {
            value: '7',
            label: '7'
          }, {
            value: '8',
            label: '8'
          }, {
            value: '9',
            label: '9'
          }, {
            value: '10',
            label: '10'
          }, {
            value: '11',
            label: '11'
          }, {
            value: '12',
            label: '12'
          },
        ],
        //配置
        options: [],
        areas: [],    //工作地点
        positionType: [],   //职位类型
        skillsData: [],    //技能类型
        count: {
          all:{},
          open:{},
          add:{}
        }
      };
    },
    mounted() {
      this.getAuditList();
      this.getOptions();

    },
    methods: {

      async getAuditList() {
        const page = this.page;
        const data = {
          page
        };
        let res = await this.$post("/api/admin/recruit/getAuditAgencyPostList", data);
        if (res && res.status === 1) {
          this.auditData = res.data.list || [];
          this.count = res.data.countData || {
            all:{},
            open:{},
            add:{}
          };
          this.total = res.data.total * 1;
        }
      },
      formatDate(time, format = '') {
        if (time === "0") {
          return "--";
        }
        let now = new Date(time * 1000);
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (format == '' ?
            year +
            "-" +
            month +
            "-" +
            date +
            " " +
            hour +
            ":" +
            minute +
            ":" +
            second
            :
            year +
            "-" +
            month +
            "-" +
            date +
            " " +
            hour +
            ":" +
            minute
        );
      },
      async getOptions() {
        let res = await this.$post("/api/recruit/getOptions");
        if (res && res.status === 1) {
          this.options = res.data || [];
          this.getAreas();
          this.getPositionType();
        }
      },
      async getSkills(query) {
        let data = {
          keyword: query,
          limit: 20
        };
        let res = await this.$post("/api/simple_data/select_skill", data);
        if (res && res.status === 1) {
          this.skillsData = res.data || [];
        } else {
          this.skillsData = [];
        }
      },

      getAreas() {
        let provinces = this.options.provinces;
        let cities = this.options.cities;
        let data = [];
        let id, dd, c;
        for (let i = 0; i < provinces.length; i++) {
          id = provinces[i].id;
          let arr = {
            value: id,
            label: provinces[i].name,
            children: (function () {
              c = 0;
              dd = [];
              for (let j = 0; j < cities.length; j++) {
                if (cities[j].prov_id == id) {
                  let arr1 = {
                    value: cities[j].id,
                    label: cities[j].name
                  };
                  dd[c] = arr1;
                  c++;
                }
              }
              return dd;
            })()
          };
          data[i] = arr;
        }
        this.areas = data;
      },
      getPositionType() {
        let positionType = this.options.direction;
        let arr = [];
        for (let i = 0; i < positionType.length; i++) {
          let d = {
            value: positionType[i].occupation_id,
            label: positionType[i].occupation_name,
            children: (function () {
              if (positionType[i].children.length > 0) {
                let a = [];
                for (let j = 0; j < positionType[i].children.length; j++) {
                  a[j] = {
                    value: positionType[i].children[j].direction_id,
                    label: positionType[i].children[j].direction_name,
                  }
                }
                return a;
              }
            })()
          };
          arr[i] = d;
        }
        this.positionType = arr;
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.getSkills(query);
          }, 200);
        } else {
          this.skillsData = [];
        }
      },
      cityChange(value) {
        if (!value) return;
        this.agencyPostForm.provId = value[0];
        this.agencyPostForm.cityId = value[1];
      },
      positionChange(value) {
        if (!value) return;
        this.agencyPostForm.occupationId = value[0];
        this.agencyPostForm.directionId = value[1];
      },
      checkForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitForm();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async submitForm() {
        let formData = this.agencyPostForm;
        let data = {
          issuedType: formData.issuedType,
          phone: formData.phone,
          email: formData.email,
          name: formData.name,
          occupationId: formData.occupationId,
          directionId: formData.directionId,
          minSalary: formData.minSalary,
          maxSalary: formData.maxSalary,
          month: formData.month,
          skills: formData.skills,
          experience: formData.experience,
          workType: formData.workType,
          cityId: formData.cityId,
          provId: formData.provId,
          description: formData.description
        };
        let res = await this.$post("/api/admin/recruit/addRecruit", data);
        if (res && res.status === 1) {
          this.agencyPost = false;
          this.agencyPostForm = {
            workType: 2, skills: [], issuedType: 1
          };
          this.getAuditList();
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        }
      },

      async handleApproveClick(recruitId) {
        const action = "approve";
        const data = {
          recruitId,
          action
        };
        let res = await this.$post("/api/admin/recruit/audit", data);
        if (res && res.status === 1) {
          console.log(res);
          this.$message({
            message: res.info,
            type: "success"
          });
          this.getAuditList();
        }
      },

      handleCurrentChange(val) {
        this.page = val;
        this.getAuditList();
      },
      clickRow(row) {
        const id = row.id;
        this.$router.push({
          path: "/main/job",
          query: {
            id
          }
        });
      },
      onAdd() {
        this.agencyPost = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .count-list {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .count-item {
    margin-right: 20px;
    font-size: 16px;
  }

  .content {
    white-space: nowrap;
    overflow-x: scroll;
    height: calc(100% - 150px);
  }

  .btn {
    width: 80px;
  }

  .order-footer {
    margin-top: 10px;
  }
</style>