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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127