修改按钮

src/components/coolbutton/index.vue

+<template>
+  <el-button
+    v-hasPermi="hasper"
+    :size="size"
+    :type="type"
+    :icon="icon"
+    :disabled="disabled"
+    @click="defaultClick"
+  >{{ name }}</el-button>
+</template>
+
+<script>
+import { getInfo } from '@/api/login'
+
+export default {
+  name: 'CoolButton',
+  props: {// 调用该组件时需要传递过来的属性
+    name: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    haspermi: {
+      type: Array
+    },
+    size: {
+      type: String
+    },
+    icon: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      isShow: true,
+      hasper: '',
+      butname: this.name
+    }
+  },
+  computed: {},
+  created() {
+    this.getInfoMessage()
+  },
+  methods: {
+    defaultClick() {
+      this.$emit('btn-click')
+    },
+    getInfoMessage() {
+      const data = this.haspermi
+      getInfo().then(res => {
+        if (res.data.permissions[0] === '*:*:*') {
+          this.isShow = true
+          this.hasper = []
+        } else {
+          this.hasper = data
+        }
+        // TODO: clear this log
+        console.log(`this.hasper`, this.hasper)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*按钮样式*/
+input{
+  border: none;
+  padding: 2px 10px;
+  border-radius: 6px;
+  margin: 2px 6px;
+  color:#fff
+}
+/*不同属性按钮颜色不同*/
+.primary{background-color: #409eff}
+.danger{background-color: #f56c6c}
+.success{background-color: #67c23a}
+.warning{background-color: #e6a23c}
+</style>
+

src/store/modules/searchSave.js

+const state = {
+  searchParams: {
+    // [route.path]: { ...searchContent }
+  }
+}
+
+const mutations = {
+  SET_SEARCH_PARAMS: (state, config) => {
+    if (!config || typeof config !== 'object') { return }
+    if (!config.path) { return }
+    if (config.param && typeof config.param === 'object' && Object.keys(config.param).length > 0) {
+      state.searchParams[config.path] = JSON.stringify(config.param)
+    } else {
+      delete state.searchParams[config.path]
+    }
+  },
+  RSET_SEARCH_PARAMS: (state) => {
+    state.searchParams = {}
+  },
+  CLEAR_ONE_PARAMS: (state, path) => {
+    path && state.searchParams[path] && delete state.searchParams[path]
+  }
+}
+
+const actions = {
+  searchParamsSet({ commit }, config) {
+    if (!config || typeof config !== 'object') { return }
+    if (!config.path) { return }
+    commit('SET_SEARCH_PARAMS', config)
+  },
+  restSearchParams({ commit }) {
+    commit('RSET_SEARCH_PARAMS')
+  },
+  clearOneParams({ commit }, path) {
+    commit('CLEAR_ONE_PARAMS', path)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

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>