Item.vue

<template>
  <div class="item-wrapper flex" v-loading="loading">
    <div class="item flex" :class="{ active: isActive }">
      <div class="left flex">
        <div class="left-item flex" :class="{ active: isActive }">
          <div class="text flex">
            <div class="i-wrapper">
              <i class="iconfont icon-24gl-checklist" />
            </div>
            <div ref="tp" class="text-center-wrapper flex">
              <div ref="t" style="margin-right: 10px" v-if="!isActive">
                {{ infoData.planName }}
              </div>
            </div>

            <!-- <el-input
              v-else
              size="mini"
              v-model="infoData.planName"
              placeholder="请输入内容"
              style="width: 120px"
            ></el-input> -->
          </div>
        </div>
      </div>
      <div class="right flex" style="line-height: 110px">
        <div style="margin-left: 20px" v-if="infoData.personnelType == 1">
          员工培训
        </div>
        <div style="margin-left: 20px" v-if="infoData.personnelType == 2">
          承包商培训
        </div>
      </div>
      <div class="middle flex">
        <div>
          <div class="top">参与培训人员({{ personnelOptions.length }})</div>
          <div class="bottom">
            <!-- <el-checkbox-group class="" v-model="infoData.postIds"> -->
            <el-checkbox
              :disabled="!isActive"
              v-model="personnel.ischeck"
              v-for="personnel in personnelOptions"
              :label="personnel.postId"
              :key="personnel.postId"
              >{{ personnel.postName }}</el-checkbox
            >
            <!-- </el-checkbox-group> -->
          </div>
        </div>
      </div>
      <div class="right flex">
        <template v-if="!isActive">
          <div>
            <el-button type="text" @click="edit(personnelOptions)"
              >编辑</el-button
            >
            <el-button type="text" @click="deletePlan">删除</el-button>
          </div>
        </template>
        <template v-else>
          <div>
            <el-button type="text" @click="save">保存</el-button>
            <el-button type="text" @click="cancel">取消</el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { editPlan, deletePlan } from "@/api/educationPlanExam/trainingProgram";
export default {
  name: "trainingProgram-item",
  props: {
    personnelOptions: {
      type: Array,
    },
    isActiveId: {
      type: [String, Number],
      default: 999,
    },
    infoData: {
      type: Object,
      default: () => {
        return {
          planId: 1,
          planName: "安全岗位生产",
          postIds: [1, 2, 3, 4],
        };
      },
    },
  },
  computed: {
    isActive() {
      return this.isActiveId === this.infoData.planId;
    },
  },
  mounted() {
    console.log(this.$refs.t.offsetHeight);
    // 如果子元素的高大于父元素的高，就改变上下居中策略，改为滚动条展示
    if (this.$refs.t.offsetHeight > this.$refs.tp.offsetHeight) {
      console.log(this.$refs.tp.style);
      this.$refs.tp.style.overflow = "auto";
      this.$refs.tp.style.alignItems = "";
    } else {
      // console.log(this.$refs.t.offsetHeight)
      // this.$refs.t.style.alignItems='center'
    }
  },
  data() {
    return {
      // 记录初始的选项
      oldInfoData: JSON.stringify(this.infoData),
      // isActive: false,
      loading: false,
    };
  },
  methods: {
    edit(personnelOptions) {
      // 编辑
      console.log(personnelOptions);
      this.$parent.addClick(this.infoData, personnelOptions);
      //this.$emit("edit", this.oldInfoData);
    },
    save() {
      if (this.infoData.planName == "") {
        this.$message({
          message: "请输入培训计划名称",
          type: "warning",
        });
        return;
      }
      if (this.infoData.postIds.length == 0) {
        this.$message({
          message: "请选择至少一种参与培训人员",
          type: "warning",
        });
        return;
      }
      this.$confirm("请确定更改培训计划", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;

          return editPlan(this.infoData);
        })
        .then((res) => {
          if (res.code == 200) {
            // 成功也要将oldInfoData 变成最新的
            // this.oldInfoData = "newInfoData";
            const dataJson = JSON.stringify(this.infoData);
            this.$emit("save", dataJson);
            // 成功之后
            this.oldInfoData = dataJson;
            this.$message({
              message: "修改培训计划成功",
              type: "success",
            });
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deletePlan() {
      console.log(this.infoData);
      this.$confirm("请确定删除当前培训计划", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deletePlan({ planId: this.infoData.planId });
        })
        .then((res) => {
          if (res.code == 200) {
            this.$emit("deletePlan", this.oldInfoData);
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
    },
    // 当bool为true时候，监听用的，不去改videoID，这样就不会监听锁死
    // 当bool为false时，是取消用的，会变成999
    cancel() {
      this.$emit("cancel", this.oldInfoData);
    },
  },
};
</script>
<style lang="scss" scoped>
.item-wrapper {
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  .item {
    transition: all 0.5s;
    width: 93.2%;
    max-width: 1600px;
    min-height: 111px;
    border: 1px solid #cecece;
    box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.1);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );

    border-radius: 5px;
    &.active {
      box-shadow: -4px 0px 0px 0px #1d84ff, 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    }
    // background: blue;
    .left {
      width: 225px;
      height: 100%;
      align-items: center;
      justify-content: right;
      margin-top: 25px;

      .left-item {
        transition: all 0.5s;
        width: 200px;
        height: 60px;
        // line-height: 60px;
        font-size: 14px;
        padding-left: 25px;
        border: 1px solid #efefef;
        border-radius: 5px;
        box-sizing: border-box;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 8%,
          rgba(239, 239, 239, 1) 100%
        );
        &.active {
          background: #1d84ff;
          color: #fff;
        }
        .i-wrapper {
          height: 60px;
          line-height: 60px;
          padding-right: 10px;
        }
        .text-center-wrapper {
          height: 100%;
          width: 100%;
          // overflow: auto;
          align-items: center;
        }
      }
    }
    .middle {
      flex: 1;
      // flex-direction: column;
      align-items: center;

      // background: white;
      padding-left: 25px;
      // padding-top: 25px;
      padding-right: 25px;
      .top {
        font-size: 14px;
        margin-bottom: 9px;
      }
      .bottom {
        justify-content: space-between;
        font-size: 14px;
      }
    }
    .right {
      padding-right: 20px;
      width: 120px;
      height: 100%;
      justify-items: center;
      align-items: center;
    }
  }
}
</style>