web-bench/src/views/manager/jobs/detail.vue

<template>
  <div id="detail">
    <detail-layout>
      <template #title v-if="!isDialog">
        <back-bar to="/manager/jobs/index" title="职位信息管理"></back-bar>
      </template>
      <template #main>
        <el-row v-loading="loading">
          <el-form :model="info" :rules="rules" ref="info" class="demo-ruleForm">
            <form-item label="企业名称">
              {{ user.corpname }}
            </form-item>
            <form-item label="职位名称" prop="job_name">
              <el-input placeholder="每个职位职能录入一个岗位" v-model="info.job_name"></el-input>
            </form-item>
            <form-item label="职位分类" prop="category">
              <el-select v-model="info.category" placeholder="点击选择职位" multiple style="width:100%;">
                <el-option v-for="(item, index) in jobTypeList" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </form-item>
            <form-item label="工作城市" prop="city">
              <tag-all-select
                placeholder="点击选择城市"
                :firstList="provinceList"
                :secondList="cityList"
                @selectChange="selectChange"
                @listChange="listChange"
                :selected="info.city"
                type="city"
              ></tag-all-select>
            </form-item>
            <form-item label="工作性质" prop="is_practice">
              <el-radio-group v-model="info.is_practice" size="small">
                <el-radio v-for="(item, index) in type_list" :key="index" :label="item.type_value" border>{{ item.type_label }}</el-radio>
              </el-radio-group>
            </form-item>
            <form-item label="学历要求" prop="xl_req">
              <el-select v-model="info.xl_req" placeholder="请选择学历要求">
                <el-option v-for="(item, index) in edu_list" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </form-item>
            <form-item label="职位诱惑" prop="job_tag">
              <tagCheckbox
                placeholder="点击选择职位诱惑"
                :firstList="entice_list"
                @selectChange="selectChange"
                @listChange="listChange"
                :selected="info.job_tag"
                type="job_tag"
              ></tagCheckbox>
            </form-item>
            <form-item label="招聘人数" prop="job_number">
              <el-input-number v-model="info.job_number" :min="1" placeholder="添加需要招聘的人数" style="width:100%"></el-input-number>
            </form-item>
            <form-item label="截止日期" prop="end_date">
              <el-date-picker v-model="info.end_date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker>
            </form-item>
            <form-item label="薪资" prop="">
              <el-col :span="6">
                <el-input type="number" v-model="info.salary.min">
                  <template #append>
                    <strong>K</strong>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="6" style="text-align:center;">
                至
              </el-col>
              <el-col :span="6">
                <el-input type="number" v-model="info.salary.max">
                  <template #append>
                    <strong>K</strong>
                  </template>
                </el-input>
              </el-col>
            </form-item>
            <form-item label="薪酬福利" prop="welfare">
              <el-col :span="8" v-for="(item, index) in welfare_list" :key="index">
                <el-radio v-model="info.welfare" :label="item.name" :border="true" size="small">
                  {{ item.name }}
                </el-radio>
              </el-col>
            </form-item>
            <form-item label="职位相关专业" prop="zy_req">
              <!-- <tagSecSelect
                placeholder="点击选择相关专业"
                :selected="info.zy_req"
                :firstList="subjectList"
                :secondList="subjectSubList"
                @selectChange="selectChange"
                @listChange="listChange"
                type="zy_req"
              ></tagSecSelect> -->
              <el-input type="text" :rows="5" placeholder="请输入职位相关专业" v-model="info.zy_req"> </el-input>
              <span style="color:red;">职位要求多专业时，用；分号相隔</span>
            </form-item>
            <form-item label="职位描述" prop="job_desc">
              <el-input type="textarea" :rows="5" placeholder="请输入职位描述" v-model="info.job_desc"> </el-input>
            </form-item>
            <form-item label="简历投递说明" prop="apply_intro">
              <el-input type="textarea" :rows="5" placeholder="请输入简历投递说明" v-model="info.apply_intro"> </el-input>
            </form-item>
            <form-item label="岗位要求" prop="job_req">
              <el-input type="textarea" :rows="5" placeholder="请输入岗位要求" v-model="info.job_req"> </el-input>
            </form-item>
            <form-item label="其他描述" prop="other">
              <el-input type="textarea" :rows="5" placeholder="请输入其他描述" v-model="info.other"> </el-input>
            </form-item>

            <el-row type="flex" align="middle" justify="center">
              <el-col :span="6">
                <el-button type="success" style="width:100%; margin: 1rem 0;" @click="toSubmit('info')"
                  >提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import backBar from '@/components/back-bar.vue';
import tagSecSelect from '@/components/tag-sec-select.vue';
import tagCheckbox from '@/components/tag-checkbox.vue';
import tagAllSelect from '@/components/tag-all-select.vue';
import formItem from '@/components/form-item.vue';
import detailLayout from '@/layout/detail-layout.vue';
import { mapActions, mapState } from 'vuex';

export default {
  name: 'detail',
  props: {
    isDialog: { type: Boolean, default: false },
  },
  components: {
    detailLayout,
    formItem,
    tagAllSelect,
    tagCheckbox,
    // tagSecSelect,
    backBar,
  },
  data: () => ({
    loading: false,
    info: {
      salary: {
        min: '',
        max: '',
      },
    },
    jobType: '',
    drawer: false,
    jobTypeList: [],
    provinceList: [
      { label: '北京市', value: '110000' },
      { label: '吉林省', value: '220000' },
      { label: '沈阳省', value: '210000' },
    ],
    secondList: [
      { label: '长春市', value: '220100' },
      { label: '吉林市', value: '220200' },
    ],
    secondList1: [
      { label: '沈阳市', value: '210100' },
      { label: '大连市', value: '210200' },
    ],
    cityList: [],
    type_list: [
      { type_value: 0, type_label: '全职' },
      { type_value: 1, type_label: '实习' },
    ],
    edu_list: [],
    entice_list: [
      { value: '1', label: '年底双薪' },
      { value: '2', label: '绩效奖金' },
      { value: '3', label: '岗前培训' },
      { value: '4', label: '节日礼物' },
      { value: '5', label: '扁平管理' },
      { value: '6', label: '年度旅游' },
      { value: '7', label: '岗位晋升' },
      { value: '8', label: '股票期权' },
      { value: '9', label: '弹性工作' },
      { value: '10', label: '带薪年假' },
      { value: '11', label: '交通补助' },
      { value: '12', label: '餐补' },
      { value: '13', label: '房补' },
      { value: '14', label: '免费班车' },
      { value: '15', label: '员工旅游' },
      { value: '16', label: '包吃包住' },
      { value: '17', label: '健康体检' },
      { value: '18', label: '留人基金' },
      { value: '19', label: '学费返还' },
    ],
    welfare_list: [],
    subjectList: [
      { label: '不限专业', value: '0' },
      { label: '哲学', value: '1' },
      { label: '经济学', value: '2' },
      { label: '法学', value: '3' },
      { label: '教育学', value: '4' },
      { label: '文学', value: '5' },
      { label: '历史学', value: '6' },
      { label: '理学', value: '7' },
      { label: '工学', value: '8' },
      { label: '农学', value: '9' },
      { label: '医学', value: '10' },
    ],
    subjectSubList: [],
    subjectSub: [
      { label: '哲学类', value: '11' },
      { label: '哲学', value: '12' },
      { label: '逻辑类', value: '13' },
      { label: '宗教类', value: '14' },
      { label: '伦理类', value: '15' },
    ],
    subjectSub2: [
      { label: '社会经济学', value: '16' },
      { label: '国际经济学', value: '17' },
      { label: '资本主义经济学', value: '18' },
    ],
    rules: {
      job_name: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
      category: [{ required: false, message: '请输入职位分类', trigger: 'change' }],
      city: [{ required: false, message: '请输入城市', trigger: 'blur' }],
      is_practice: [{ required: true, message: '请输入工作性质', trigger: 'change' }],
      xl_req: [{ required: true, message: '请输入学历要求', trigger: 'change' }],
      job_tag: [{ required: false, message: '请输入职位标签', trigger: 'blur' }],
      job_number: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
      end_date: [{ required: true, message: '请选择截止日期', trigger: 'blur' }],
      welfare: [{ required: false, message: '请输入福利待遇', trigger: 'blur' }],
      zy_req: [{ required: true, message: '请输入专业要求', trigger: 'blur' }],
      job_desc: [{ required: true, message: '请输入职位描述', trigger: 'blur' }],
      apply_intro: [{ required: true, message: '请输入简历投递说明', trigger: 'blur' }],
      job_req: [{ required: false, message: '请输入岗位要求', trigger: 'blur' }],
      other: [{ required: false, message: '请输入其他说明', trigger: 'blur' }],
    },
  }),
  created() {
    this.otherList();
    if (this.$route.query.id) {
      this.search();
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['postOperation', 'dicOperation']),
    async search() {
      this.loading = true;
      let result = await this.postOperation({ type: 'search', data: { id: this.$route.query.id } });
      let infos = JSON.parse(JSON.stringify(result.data));
      let newData = await this.returnData(infos);
      var jobArr = newData.category.split(',');
      // this.$set(this.info, 'category', jobArr);
      newData.category = jobArr;
      this.$set(this, `info`, newData);
      this.loading = false;
    },
    selectChange({ val, type }) {
      //此方法是同步选择
      this.$set(this.info, type, val);
    },
    async listChange({ val, type }) {
      //此方法是更换子列表的
      if (type === 'city') {
        this.getCityList(val);
      } else if (type === 'zy_req') {
        //专业查询模拟
        this.$set(this, `subjectSubList`, val === '1' ? this.subjectSub : this.subjectSub2);
      }
    },
    async getCityList(parent) {
      let result = await this.dicOperation({ level: 2, parent: parent });
      if (`${result.errcode}` === `0`) {
        let res = result.data.map(item => {
          let object = { label: item.name, value: item.code };
          return object;
        });
        this.$set(this, `cityList`, res);
      }
    },
    async toSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let result;
          let infos = JSON.parse(JSON.stringify(this.info));
          let mid = '';
          infos.salary.text = infos.salary.min + 'k-' + infos.salary.max + 'k/月';
          if (typeof infos.city === 'object') {
            infos.city.map(item => {
              mid === '' ? (mid = item.label) : (mid += `,${item.label}`);
            });
            infos.city = mid;
            mid = '';
          }
          if (typeof infos.job_tag === 'object') {
            infos.job_tag.map(item => {
              mid === '' ? (mid = item.label) : (mid += `,${item.label}`);
            });
            infos.job_tag = mid;
            mid = '';
          }
          if (typeof infos.zy_req === 'object') {
            infos.zy_req.map(item => {
              mid === '' ? (mid = item.label) : (mid += `,${item.label}`);
            });
            infos.zy_req = mid;
            mid = '';
          }
          if (typeof infos.category === 'object') {
            infos.category.map(item => {
              mid === '' ? (mid = item) : (mid += `,${item}`);
            });
            infos.category = mid;
          }
          if (this.info.id) {
            result = await this.postOperation({ type: 'update', data: { info: infos, id: this.$route.query.id } });
          } else {
            result = await this.postOperation({ type: 'add', data: { info: infos, corpname: this.user.corpname, corpid: this.user.corpid } });
          }
          if (`${result.errcode}` === '0') {
            this.$message.success('操作成功');
            if (this.isDialog) {
              this.$emit('jobSubmit', true);
              return;
            } else {
              this.$router.push('/manager/jobs/index');
            }
          } else {
            this.$message.error(result.errmsg);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    selectJobs(item) {
      this.$set(this.info, `category`, item.label);
      this.drawer = false;
    },
    async returnData(data) {
      if (data.city) {
        let mid = data.city.split(',');
        let selected = [];
        for (const select of mid) {
          let result = await this.dicOperation({ name: select });
          if (`${result.errcode}` === '0') {
            selected.push(result.data);
          }
        }
        selected = selected.map(item => {
          return { label: item.name, value: item.code };
        });
        data.city = selected;
        // this.$set(this.info, `city`, selected);
      }
      // if (data.zy_req) {
      //   let mid = data.zy_req.split(',');
      //   let selected = [];
      //   for (const select of mid) {
      //     let res = this.subjectList.filter(item => item.label === select && item.value === '0');
      //     if (res.length <= 0) {
      //       res = this.subjectSub.filter(item => item.label === select);
      //       selected = [...selected, ...res];
      //       res = this.subjectSub2.filter(item => item.label === select);
      //       selected = [...selected, ...res];
      //       // this.$set(this.info, `zy_req`, selected);
      //       data.zy_req = selected;
      //     } else {
      //       data.zy_req = res;
      //       // this.$set(this.info, `zy_req`, res);
      //     }
      //   }
      // }
      if (data.job_tag) {
        let mid = data.job_tag.split(',');
        let selected = [];
        for (const select of mid) {
          let res = this.entice_list.filter(item => item.label === select);
          selected = [...selected, ...res];
        }
        data.job_tag = selected;
        // this.$set(this.info, `job_tag`, selected);
      }
      return data;
    },
    async otherList(type) {
      let result = await this.dicOperation('zwlb');
      if (`${result.errcode}` === '0') {
        this.$set(this, `jobTypeList`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('xl');
      if (`${result.errcode}` === '0') {
        this.$set(this, `edu_list`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('zwyh');
      if (`${result.errcode}` === '0') {
        var enticeNew = result.data.map(item => ({ value: item.code, label: item.name }));
        this.$set(this, `entice_list`, enticeNew);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation('xcfl');
      if (`${result.errcode}` === '0') {
        this.$set(this, `welfare_list`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.dicOperation({ level: 1 });
      if (`${result.errcode}` === `0`) {
        let res = result.data.map(item => {
          let object = { label: item.name, value: item.code };
          return object;
        });
        this.$set(this, `provinceList`, res);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.selfInput {
  height: 40px;
  border-color: #c0c4cc;
}
.bord {
  background: #f4f5f9;
  border: 1px solid #e7e8ec;
}
</style>