vue 表单当用户修改字段，点击关闭弹窗时，检测用户是否有修改

最新推荐文章于 2024-03-07 10:01:43 发布

zxna

最新推荐文章于 2024-03-07 10:01:43 发布

阅读量366

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_32555123/article/details/134398545

版权

<template>
  <div>
    <el-dialog
      append-to-body
      destroy-on-close
      :visible.sync="visible"
      :modal="!isFromShare"
      :show-close="!isFromShare"
      :close-on-click-modal="false"
      @closed="dialogClose"
      :before-close="handleBeforeClose"
    >
      <div slot="title">
        <div>
          <slot name="fill-form-tabs"></slot>
          <div class="header-detail">
            <div class="header-left">
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <div
        class="dialog-container"
        style="display: flex; flex-direction: row; width: 100%"
      >
        <div
          class="dialog-body"
          v-loading="saveFormLoading"
          element-loading-spinner="el-loading"
          element-loading-background="rgba(255, 255, 255, 0.1)"
          style="flex: 3"
        >
          <div @scroll="handleScroll($event)" class="body-container">
            <form-web
              ref="formEdit"
            ></form-web>
          </div>
          <div v-if="showFooter" class="body-btns">
            <!-- 按钮组件 -->
            <ui-button-group
              :saveDocument="saveDocument"
            ></ui-button-group>
          </div>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import form from "@/components/form-ui/web/form";

import { _eq } from "@zgg-core-utils/relyUtil";
export default {
 
  name: "form-bus-web",
  mixins: [],
  components: {

  },
  props: {

  },
  computed: {
    allowEdit() {
      if (this.actionType === "readonly") {
        return false;
      }

      if (!isEmpty(this.roleAuthForMe)) {
        if (this.actionType == "add") {
          if (
            !(
              this.roleAuthForMe.clickEvents &&
              this.roleAuthForMe.clickEvents.includes("add")
            )
          ) {
            return false;
          }
        } else if (this.actionType == "edit") {
          if (
            !(
              this.roleAuthForMe.clickEvents &&
              this.roleAuthForMe.clickEvents.includes("edit")
            )
          ) {
            return false;
          }
        }
    },
    },
 
  data() {
    return {
      isModified: false,
      isSaveModified: false,
    };
  },
  created() {

  },

  methods: {
    close() {
      if (!this.isWorkflow && this.allowEdit && this.actionType == "edit") {
        this.checkFormModify();
        if (this.isModified) {
          this.$confirm("确定退出编辑？", "有修改的内容未保存", {
            type: "warning",
          })
            .then(() => {
              this.isModified = false;
              this.$emit("close", this.$refs.formEdit);
              this.visible = false;
            })
            .catch(() => {
              this.isModified = false;
            });
        } else {
          this.$emit("close", this.$refs.formEdit);
          this.visible = false;
        }
      } else {
        this.$emit("close", this.$refs.formEdit);
        this.visible = false;
      }
    },
    handleBeforeClose(done) {
      if (!this.isWorkflow && this.allowEdit && this.actionType == "edit") {
        this.checkFormModify();
        if (this.isModified) {
          this.$confirm("确定退出编辑？", "有修改的内容未保存", {
            type: "warning",
          })
            .then(() => {
              this.isModified = false;
              done();
            })
            .catch(() => {
              this.isModified = false;
            });
        } else {
          done();
        }
      } else {
        done();
      }
    },
    checkFormModify() {
      if (this.isSaveModified) {
        //保存过了
        return;
      }
      let tempRef = this.$refs["formEdit"];
      let document = tempRef.form;
      let originalDocument = tempRef.originalDocument;
      if (originalDocument) {
        console.log(originalDocument, "原有数据");
        console.log(document, "修改后的数据");
        let isEq = _eq(originalDocument, document);
        if (!isEq) {
          this.isModified = true;
        }
      }
    },
    saveDocument(callback, isReferenceSave = false) {
      this.isModified = false;
      this.isSaveModified = true;
    },




  },
};
</script>