proginn-frontend/components/sign/step-skills.vue

<template>
  <div class="sign-new-skills" id="skill">
    <header class="sign-new-header">
      <div class="sign-new-header-title">技能</div>
      <span>
        <el-button @click="handleAdd" type="text" icon="el-icon-plus"
          >添加</el-button
        >
      </span>
    </header>
    <div v-if="skills.length > 0">
      <template v-for="(item, idx) in skills">
        <div
          v-if="editingItem.indexOf(idx) < 0"
          :key="item.skill_name"
          class="show"
        >
          <h4>
            <span>{{
              `技能名称: ${item.skill_name} 经验自评：${item.skill_level}分 `
            }}</span>
            <el-button @click="editItem(idx)" type="text">编辑</el-button>
          </h4>
        </div>
        <div v-else :key="`skill_${item.skill_id}`" class="edit">
          <el-form
            ref="form"
            :rules="rules"
            :model="item"
            label-width="80px"
            label-position="left"
          >
            <div class="header">
              <el-form-item label="技能名称:" prop="skill_name">
                <el-cascader
                  v-model="item.skill_name"
                  :show-all-levels="false"
                  :placeholder="item.skill_name || '请选择单个技能'"
                  :options="skillList"
                  :props="{ expandTrigger: 'hover', emitPath: 'false' }"
                />
              </el-form-item>
              <el-form-item label="经验自评:" prop="skill_level">
                <el-select
                  :style="{ width: '130px' }"
                  v-model="item.skill_level"
                  placeholder="选择分数"
                >
                  <el-option
                    v-for="level in 5"
                    :label="`${level}分`"
                    :key="level"
                    :value="level"
                  ></el-option>
                </el-select>
              </el-form-item>
              <span class="tips">1分为新入门，5分为满分</span>
            </div>
          </el-form>
          <div class="sign-new-skill-btn">
            <span class="opts">
              <el-button type="danger" @click="handleDelete(item, idx)"
                >删除</el-button
              >
              <el-button type="info" @click="handleCancel(item, idx)"
                >取消</el-button
              >
              <el-button type="primary" @click="onSubmit(item, idx)"
                >保存</el-button
              >
            </span>
          </div>
        </div>
      </template>
    </div>
    <div v-else class="empty">点击右上角“添加”按钮添加技能</div>
  </div>
</template>

<script>
import uploader from "@/components/uploader";
import instance from "../../plugins/axios";

export default {
  data() {
    return {
      // editing: true,
      editingItem: [],
      rules: {
        // skill_name: [{ required: true, message: "请输入技能全名", trigger: "blur" }]
      },
      init: {
        skill_name: "123",
        skill_level: "",
        skill_id: ""
      },
      skills: [
        // {
        //   skill_name: "Javscript",
        //   skill_level: "5"
        // }
      ],
      originSkills: [],
      current: null,
      skillList: [],
      loadingSkill: false
    };
  },
  components: {
    uploader
  },
  computed: {},
  watch: {},
  async mounted() {
    this.getData();
    this.fetchSkill();
  },
  methods: {
    async getData() {
      let res = await this.$axios.$post("/api/user_skills/list_by_user");
      this.skills = res.data || [];
    },
    async onSubmit(item, idx) {
      this.cnzz("签约", "签约页面+技能保存", "");
      console.log("submit!", item);
      if (!item.skill_name) {
        this.$message.error("请填写技能名称!");
        return;
      }
      if (!item.skill_level) {
        this.$message.error("请选择技能自评!");
        return;
      }
      if (item.skill_name.indexOf(",") > -1) {
        const skills = item.skill_name.split(",");
        console.log(skills);
        item.skill_name = skills[skills.length - 1];
        console.log("--------------", item.skill_name);
      }

      if (item.skill_name instanceof Array && item.skill_name.length > 0) {
        item.skill_name = item.skill_name[item.skill_name.length - 1];
      }
      const data = {
        skill_level: item.skill_level,
        skill_name: item.skill_name
      };
      if (item.skill_id) {
        data.skill_id = item.skill_id;
      }
      if (item.id) {
        data.id = item.id;
      }
      const res = await this.$axios.$post("/api/user_skills/save", data);
      if (res.status === 1) {
        this.$message.success("保存成功！");
        this.init = {
          skill_name: "",
          skill_level: "",
          skill_id: ""
        };
        this.editingItem = [];
        this.originSkills.splice(idx, 1, item);
      } else {
        // this.$message.error(res.info);
      }
    },
    async fetchSkill(keyword) {
      this.loadingSkill = true;
      const res = await this.$axios.$post("api/userSkills/getSkillList", {
        keyword
      });
      this.loadingSkill = false;
      const data = res.data || [];
      this.skillList = data.map(it => {
        let children = [];
        if (it.child && it.child.length > 0)
          children = it.child.map(child => ({
            label: child.skill_name,
            value: child.skill_name
          }));
        return {
          value: it.occupation_name,
          label: it.occupation_name,
          children: children
        };
      });
    },
    handleAdd() {
      if (this.editingItem.length > 0 && !this.skills[this.editingItem[0]].id) {
        this.$message.error("请先保存现有修改");
        return;
      }
      this.skills.push(this.init);
      this.editingItem = [this.skills.length - 1];
    },
    async handleDelete(item, idx) {
      const deleteComplete = () => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.skills.splice(idx, 1);
        this.editingItem = [];
      };
      this.$confirm("确认删除该技能?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (item.id) {
            const res = await this.$axios.$post("/api/user_skills/delete", {
              id: item.id
            });
            if (res.status === 1) {
              deleteComplete();
              this.getData();
            }
          } else {
            deleteComplete();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleCancel(item, idx) {
      this.editingItem = [];
      if (!item.skill_id) {
        this.skills.splice(idx, 1);
      }
    },
    editItem(idx) {
      console.log("editItem:" + idx);
      this.editingItem = [idx];
    }
  }
};
</script>

<style lang="scss" scoped>
.sign-new-skills {
  header .el-icon-plus {
    font-size: 18px;
  }

  .edit {
    padding: 20px 0;

    .header {
      display: flex;
      align-items: center;

      .tips {
        margin-right: 5px;
      }
    }

    > form {
      .el-form-item {
        margin-bottom: 0;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }

      .opts {
        display: flex;
        align-items: center;

        .el-button {
          margin-left: 5px;
        }
      }

      .el-select,
      .el-input {
        width: 136px;
        margin-right: 10px;

        .el-input--suffix .el-input__inner {
          padding-right: 0;
        }
      }

      .to {
        margin-right: 10px;
      }

      .times {
        .el-checkbox {
          width: 88px;
        }

        .el-input {
          width: 136px;
        }
      }

      .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 10px;

        .el-textarea {
          display: flex;
          width: 766px;
          height: 162px;
        }
      }
    }
  }

  .show {
    padding: 23px 0 23px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-of-type {
      border: 0;
    }

    h4 {
      display: flex;
      justify-content: space-between;
      height: 44px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      /* color: #308eff; */
      line-height: 44px;
    }

    p {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
  }

  .empty {
    margin: 112px auto 104px;
    font-size: 27px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: rgba(205, 205, 205, 1);
    line-height: 38px;
  }

  footer p {
    margin-top: 15px;
    width: 766px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(145, 154, 167, 1);
    line-height: 17px;
  }
}

.sign-new-skill-btn {
  margin-top: 24px;
  text-align: right;
}
</style>

<style lang="scss">
.sign-new-skills {
  .el-form-item__label {
    line-height: 40px;
  }
}
</style>