proginn-frontend/components/sign/skills.vue

<template>
  <div class="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-select
                  :style="{width: '250px'}"
                  v-model="item.skill_name"
                  allow-create
                  filterable
                  remote
                  reserve-keyword
                  placeholder="填写单个技能全名"
                  :remote-method="fetchSkill"
                  :loading="loadingSkill"
                >
                  <el-option
                    v-for="skil in skillList"
                    :key="skil.id"
                    :label="skil.name"
                    :value="skil.name"
                  ></el-option>
                </el-select>
              </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: "",
        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();
  },
  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;
      }
      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/simple_data/select_skill", {
        keyword
      });
      this.loadingSkill = false;
      const data = res.data || [];
      this.skillList = data.map(it => ({ id: it.id, name: it.name }));
    },
    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>