proginn-frontend/components/sign/skills.vue

<template>
  <div class="skill" id="skill">
    <header>
      <h5>技能</h5>
      <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">
            <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>
              <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>
          </el-form>
        </div>
      </template>
    </div>
    <div v-else class="empty">点击右上角“添加”按钮添加技能</div>
  </div>
</template>

<script>
  import uploader from "@/components/uploader";

  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) {
        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);
        }
        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>
  .skill {
    header .el-icon-plus {
      font-size: 18px;
    }

    .edit {
      padding: 20px;

      .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 33px 23px 20px;
      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;
    }
  }
</style>