learning-system-portal/src/components/NewEmployeeGuideDialog.vue

<template>
  <el-dialog
    :visible.sync="innerVisible"
    :close-on-click-modal="false"
    class="custom-strategy-dialog"
    width="880px"
    @close="handleClose"
  >
    <div class="strategy-container">
      <div class="strategy-content">
        <div class="strategy-title">转正攻略</div>
        <div class="strategy-body">
          <RichTextEditor v-model="modalContent" />
        </div>
      </div>
      <div class="strategy-footer-btns">
        <el-button
          class="footer-btn"
          type="primary"
          :loading="processing"
          @click="handleConfirmClick"
          v-if="showBtn"
        >
          立即学习
        </el-button>
        <el-button
          v-if="showBtn"
          class="footer-btn"
          type="text"
          @click="handleCancelClick"
        >
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import RichTextEditor from "@/components/RichTextEditor.vue";
import { getSzxygProjectInfo } from "@/api/new-employee/newEmployee";

export default {
  name: "NewEmployeeGuideDialog",
  components: { RichTextEditor },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    processing: {
      type: Boolean,
      default: false,
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    onConfirm: {
      type: Function,
      default: null,
    },
    onCancel: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      modalContent: "",
      innerVisible: this.visible,
      hasLoadedOnce: false,
    };
  },
  watch: {
    visible(val) {
      this.innerVisible = val;
      if (val) {
        this.fetchContent();
      }
    },
    innerVisible(val) {
      if (val !== this.visible) {
        this.$emit("update:visible", val);
      }
    },
  },
  mounted() {
    if (this.visible) {
      this.fetchContent();
    }
  },
  methods: {
    async fetchContent() {
      if (this.hasLoadedOnce) return;
      try {
        const res = await getSzxygProjectInfo();
        this.modalContent =
          (res && res.data && res.data.learningGuideConfig) || "";
        this.hasLoadedOnce = true;
      } catch (e) {
        // 保底：避免影响弹窗展示
        this.modalContent = "";
      }
    },
    handleConfirmClick() {
      if (typeof this.onConfirm === "function") {
        this.onConfirm();
      } else {
        // 默认行为：关闭并派发事件
        this.innerVisible = false;
        this.$emit("confirm");
      }
    },
    handleCancelClick() {
      if (typeof this.onCancel === "function") {
        this.onCancel();
      } else {
        this.innerVisible = false;
        this.$emit("cancel");
      }
    },
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
.custom-strategy-dialog >>> .el-dialog {
  background: url("../assets/images/bg_yd.png");
  background-size: cover;
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0, 43, 121, 0.14);
}
.strategy-container {
  position: relative;
  min-height: 360px;
  padding: 0px 40px 28px 40px;
  border-radius: 18px;
}
.strategy-content {
  position: relative;
  z-index: 1;
}
.strategy-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e7cfa;
  line-height: 32px;
  margin-bottom: 18px;
  text-align: left;
  letter-spacing: 1px;
}
.strategy-body {
  color: #444;
  font-size: 15px;
  min-height: 200px;
  line-height: 2;
  margin-bottom: 16px;
  text-align: left;
}
.strategy-footer-btns {
  display: flex;
  margin-top: 18px;
  z-index: 1;
  position: relative;
  gap: 14px;
}
.footer-btn {
  min-width: 115px;
  font-size: 16px;
  border-radius: 6px;
  height: 40px;
}
.footer-btn.el-button--primary {
  background: linear-gradient(
    90deg,
    rgba(48, 116, 239, 1) 0%,
    rgba(81, 146, 238, 1) 100%
  );
  border-color: #278cff;
  color: #fff;
  font-weight: bold;
  width: 210px;
  border-radius: 58px;
}
</style>