编辑未保存离开页面提示

2021-06-10 19:31:52 阅读：121 来源： 互联网

标签：el name stauts1 tableData1 提示保存 scope row 页面

使用路由守卫判断是否离开当前页面
主要代码

	stauts1_didntSave: 0,
    stauts1: false,
    tableData1: [],

watch: {
  tableData1 (val) {
    if(val){
      this.stauts1_didntSave++
    }
    deep: true
    console.log('我是检测到变化')
  }
},

// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
	//stauts1_didntSave = 1的时候为获取数据，不是改变数据，大于1才是。
  if (this.stauts1_didntSave > 1 && this.stauts1 === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前信息未保存，离开页面将会放弃所有修改数据，', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行
      next()
    }).catch(() => {
  // 取消则关闭弹窗不执行
  })
  } else {
    // 条件不成立则继续往下执行
    next()
  }
},

完整代码

<!--
 * @Author: your name
 * @Date: 2021-06-10 15:47:08
 * @LastEditTime: 2021-06-10 19:16:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \client-platform-terminal\src\views\electronic-records\setting.vue
-->
<!--  -->
<template lang='pug'>
  .electronic-setting
    .tabs-box()
      el-tabs(v-model="activeName" type="card" @tab-click="handleClick")
        el-tab-pane(v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name")
    .category(v-show="activeName === '1category'")
      .button-box
        el-button(v-if="isEdit" type="primary" size="mini" @click="categoryEdit") 编辑
        el-button(v-if="!isEdit" type="primary" size="mini" @click="categorySave") 保存
        el-button( type="primary" size="mini") 预览
        el-button(v-if="!isEdit" type="primary" size="mini") 新增
      .content
        .text
          .span(style="padding: 5px 10px") 树节点组成：分类编号（供软件排序使用）、档案分类号、分类名称组成
          .span(style="padding: 5px 10px") 分类树每层各两位，最多支持6层，即12位，00为系统自动生成不可编辑，删除父节点会把子节点都删除
        .table-box
          el-table(:data="tableData1" border height="calc(100vh - 285px)")
            el-table-column(prop="id" label="分类编号" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.id" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.id" v-else)
            el-table-column(prop="name" label="分类名称" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.name" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.name" v-else)
            el-table-column(prop="no" label="档案分类号" align="center")
              template(slot-scope="scope")
                el-input(v-model="scope.row.no" v-if="stauts1 && scope.row.id !== '00'")
                span(v-html="scope.row.no" v-else)
            el-table-column(label="操作" align="center" width="180")
              template(slot-scope="scope")
                span(@click=" " v-if="scope.row.id !== '00'" style="color: #0081f3") 删除
    //- xt-pagination(:total="total" @change="changePage" :page="pageForm.page") 
  //- el-input(v-model="scope.row.project_overview" v-if="stauts")
  //-   span(v-html="scope.row.project_overview" v-else)
</template>

<script>

export default {
name: '',
components: {},
data() {
  return {
    stauts1_didntSave: 0,
    stauts1: false,
    tableData1: [],
    isEdit: true,
    activeName: '1category',
    tabList:[{
      label: "分类设置",
      name: "1category"
    },{
      label: "案卷记录字段设置",
      name: "2records"
    },{
      label: "文件记录字段设置",
      name: "3file"
    },{
      label: "查询设置",
      name: "4search"
    }]
  }
},
computed: {},
watch: {
  tableData1 (val) {
    debugger
    if(val){
      this.stauts1_didntSave++
    }
    deep: true
    console.log('我是检测到变化')
  }
},
methods: {
  //保存tableData1编辑
  async saveSettingClass() {
    let res = await this.$api.saveSettingClass({classes: this.tableData1})
    debugger
    // console.log("getSettingClassList")
    // console.log(res)
  },
  //tableData1获取数据
  async getSettingClassList() {
    let res = await this.$api.getSettingClassList()
    this.tableData1 = res.result.data
  },
  //编辑模式
  categoryEdit() {
    this.isEdit = false
    this.stauts1 = true //input打开
    console.log("tableData1")
    console.log(this.tableData1)
  },
  //保存
  categorySave() {
    this.isEdit = true
    this.stauts1 = false //input关闭
    this.saveSettingClass()
    //
    console.log("tableData1")
    console.log(this.tableData1)
    debugger
  },
  handleClick(tab, event) {
    // console.log(tab, event);
  }
},
created() {
  this.getSettingClassList()
},
mounted() {
  
},
// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
  if (this.stauts1_didntSave > 1 && this.stauts1 === true) { // 此处为个人项目条件判断，当条件成立时才执行路由守卫
    this.$confirm('当前信息未保存，离开页面将会放弃所有修改数据，', '提示', {
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 点击确定则往下执行
      next()
    }).catch(() => {
  // 取消则关闭弹窗不执行
  })
  } else {
    // 条件不成立则继续往下执行
    next()
  }
},
}
</script>
<style lang="scss" scoped>
.electronic-setting {
  width: 100%;
  height: calc(100vh - 170px);
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  .tabs-box {
    /deep/ .is-active{
      background-color: #409EFF !important;
      color: white !important;
    }
  }
  .category {
    .button-box {
      padding-left: 20px;
    }
    .content {
      .table-box {

      }
    }
  }
}
</style>

标签：el,name,stauts1,tableData1,提示,保存,scope,row,页面
来源： https://blog.csdn.net/qq_43780814/article/details/117789744

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

编辑未保存离开页面提示