用户管理添加一个“用户新增表单模板”用来展示切换tab后记住表单字段功能

src/views/system/user/addUserList.vue

+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用户性别">
+            <el-select v-model="form.sex" placeholder="请选择">
+              <el-option
+                v-for="dict in sexOptions"
+                :key="dict.dictValue"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="手机号码" prop="phone">
+            <el-input
+              v-model.trim="form.phone"
+              value="phone"
+              placeholder="请输入手机号码"
+              maxlength="11"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model.trim="form.email" placeholder="请输入邮箱" maxlength="25" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item v-if="form.businessId == undefined" label="登录名" prop="username">
+            <el-input v-model="form.username" placeholder="请输入登录名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="form.businessId == undefined" label="用户密码" prop="password">
+            <el-input v-model="form.password" placeholder="请输入用户密码" type="password" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="用户类型" prop="name">
+            <el-input v-model.trim="form.name" placeholder="请输入用户类型" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="身份证号" prop="idNumber">
+            <el-input v-model.trim="form.idNumber" placeholder="请输入身份证号" maxlength="18" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item v-if="form.businessId == undefined" label="状态">
+            <el-radio-group v-model="form.flag">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.dictValue"
+                :label="dict.dictValue"
+              >{{ dict.dictLabel }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <!--        <el-col :span="24">-->
+        <!--          <el-form-item label="岗位" prop="postId">-->
+        <!--            <treeSelect-->
+        <!--              v-model="form.postId"-->
+        <!--              :disable-branch-nodes="true"-->
+        <!--              multiple-->
+        <!--              :options="deptChildren"-->
+        <!--              :show-count="true"-->
+        <!--              placeholder="请选择归属部门"-->
+        <!--              @input="changeValue"-->
+        <!--            />-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-button type="primary">确定</el-button>
+      <!--      <el-button type="primary" @click="clearLocalData">清空</el-button>-->
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getChildrenDept } from '@/api/system/dept'
+
+export default {
+  name: 'AddUserList',
+  data() {
+    return {
+      // 表单参数
+      form: {
+        username: '',
+        phone: '',
+        email: '',
+        idNumber: '',
+        name: ''
+      },
+      // 性别状态字典
+      sexOptions: [
+        { label: '男', value: '0' },
+        { label: '女', value: '1' }
+      ],
+      // 状态数据字典
+      statusOptions: [
+        {
+          dictLabel: '启用',
+          dictValue: '1'
+        },
+        {
+          dictLabel: '停用',
+          dictValue: '0'
+        }
+      ],
+      // 子部门信息
+      deptChildren: []
+    }
+  },
+  /** 路由离开前存储表单字段*/
+  beforeRouteLeave(to, from, next) {
+    const info = this.form
+    localStorage.setItem('userForm', JSON.stringify(info))
+    next()
+  },
+  created() {
+    this.getLocalData()
+  },
+  methods: {
+    /** 清除localStorage里存的值*/
+    clearLocalData() {
+      localStorage.clear()
+      window.location.reload() // 刷新页面
+    },
+    /** 获取之前保存的表单字段*/
+    getLocalData() {
+      const list = JSON.parse(localStorage.getItem('userForm'))
+      if (list) {
+        this.form = list
+      }
+    },
+    /** 查询子部门 */
+    getChildrenDept(userId) {
+      getChildrenDept(userId).then(response => {
+        this.deptChildren = response.data.postChildren
+        this.form.postId = response.data.checkedKeys
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/user/index.vue

@@ -43,6 +43,14 @@
           <el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
         </el-form-item>
         <el-form-item style="float: right">
+          <el-button
+            v-hasPermi="['sys:user:add']"
+            style="padding: 8px 7px;"
+            type="primary"
+            size="small"
+            icon="el-icon-plus"
+            @click="handleFormAdd"
+          >表单页新增模板</el-button>
           <el-button
             v-hasPermi="['sys:user:add']"
             style="padding: 8px 7px;"
@@ -724,6 +732,14 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
+    /** 没有实际作用，用来展示切换tab后表单字段保留功能*/
+    handleFormAdd() {
+      this.$router.push(
+        {
+          path: '/system/user/addFormList'
+        }
+      )
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()