proginn-frontend/components/job/skillSelector.vue

<template>
  <el-drawer title="技能要求" :visible.sync="isSkillShow" :direction="direction" size="80vh" @closed="close()">
    <div class="app__h_100p app__pd_10 app__f_c app__ps_r">
      <div class="app__h_70 app__f_r_n app__bd_b_eee" style="overflow:scroll">
        <div v-for="(skill,index) in selectSkills"
             class="app__h_30 app__bd_a_308EFF app__mr_15 app__fs_13 app__lh_30 app__ta_c app__fc_308EFF app_br_5 app__txt_ellipsis"
             style="min-width: 70px;max-width: 120px;padding:0 5px;">{{skill.name}}
        </div>
      </div>
      <el-input class="app__w_100p app_br_5 app__h_40 app__fs_13 app__mt_10" placeholder="请输入技能名" placeholderStyle="font-size:19px"
                v-model="skillKeyword" @change="getSkillMap()"/>
      <div class="app__mt_10" style="overflow:scroll;height:calc(100% - 250px)">
        <div class="app__f_r app__al_c" v-for="skill in skillDatas">
          <p class="app__h_45 app__lh_45 app__fs_15 app__bd_b_eee app__f_g_1" :class="{'app__fc_308EFF':skill.isChecked}">{{skill.name}}</p>
          <el-checkbox size="medium" v-model="skill.isChecked" @change="skillCheckChange(skill)"/>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  export default {
    name: "skillSelector",
    props: {
      isSkillShow: Boolean,
      selectSkills: Array
    },
    data() {
      return {
        skillDatas: [],
        direction: 'btt',
        skillKeyword: "",
        isShow: this.isSkillShow,
      }
    },
    computed: {
      initIsShow: function () {
        return this.isSkillShow;
      }
    },

    mounted() {
    },
    methods: {
      /**
       * 技能要求
       * @return {Promise<void>}
       */
      getSkillMap() {
        let res = this.$axios.$post(`/api/simple_data/select_skill`, {keyword: this.skillKeyword});
        res.then(result => {
          console.log("skills", res);
          if (Number(result.status) === 1) {
            this.skillDatas = result.data;
            if (this.selectSkills.length > 0) {
              this.selectSkills.forEach(skill => {
                let s = this.skillDatas.find(p => p.id === skill, id);
                if (s) s.isChecked = true;
              })
            }
          }
        }).catch(err => {

        });
      },
      /**
       * 技能勾选事件
       * @param skill
       */
      skillCheckChange(skill) {
        console.log(skill);
        if (skill.isChecked) {
          this.selectSkills.push(skill);
        } else {
          this.selectSkills = this.selectSkills.filter(p => p.id !== skill.id);
        }
        this.$emit('update:selctSkills', this.selectSkills);
      },
      close() {
        this.$emit('close');
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/public.css";
</style>