feat: 用户管理弹窗修改

frontend/src/components/back-button/index.vue

+<template>
+  <el-icon name="back" class="back-button" @click.native="jump" />
+</template>
+
+<script>
+export default {
+  name: 'BackButton',
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    path: String,
+    // eslint-disable-next-line vue/require-default-prop
+    name: String,
+    // eslint-disable-next-line vue/require-default-prop
+    to: Object
+  },
+  methods: {
+    jump() {
+      const { path, name, to } = this
+      if (path) {
+        this.$router.push(path)
+      }
+      if (name) {
+        this.$router.push({ name: this.name })
+      }
+      if (to) {
+        this.$router.push(to)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+
+.back-button {
+  cursor: pointer;
+  margin-right: 10px;
+  font-weight: 600;
+
+  &:active {
+    transform: scale(0.85);
+  }
+}
+</style>

frontend/src/components/business/LayoutContent.vue

 <template>
   <div class="content-container">
+    <div v-if="$slots.header || header" class="content-container__header">
+      <slot name="header">
+        <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
+        {{ header }}
+      </slot>
+    </div>
+    <div v-if="$slots.toolbar" class="content-container__toolbar">
+      <slot name="toolbar" />
+    </div>
     <slot />
   </div>
 </template>
 
 <script>
+import BackButton from '@/components/back-button'
+
 export default {
-  name: 'LayoutContent'
+  name: 'LayoutContent',
+  components: { BackButton },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    header: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backPath: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backName: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backTo: Object
+  },
+  computed: {
+    showBack({ backPath, backName, backTo }) {
+      return backPath || backName || backTo
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import "~@/styles/variables";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
 .content-container {
   transition: 0.3s;
@@ -23,5 +51,15 @@ export default {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
   box-sizing: border-box;
+
+  .content-container__header {
+    line-height: 60px;
+    font-size: 18px;
+  }
+
+  .content-container__toolbar {
+    @include flex-row(space-between, center);
+    margin-bottom: 10px;
+  }
 }
 </style>

frontend/src/styles/common/mixins.scss

 @mixin flex-row($justify: flex-start, $align: stretch) {
-  display: flex;
-  @if $justify != flex-start {
-    justify-content: $justify;
+    display: flex;
+    @if $justify != flex-start {
+      justify-content: $justify;
+    }
+    @if $align != stretch {
+      align-items: $align;
+    }
   }
-  @if $align != stretch {
-    align-items: $align;
+  
+  @mixin variant($color, $background-color, $border-color) {
+    color: $color;
+    background-color: $background-color;
+    border-color: $border-color;
   }
-}
+  
\ No newline at end of file

frontend/src/styles/mixin.scss

@@ -36,4 +36,10 @@
     align-items: $align;
   }
 }
+
+@mixin variant($color, $background-color, $border-color) {
+    color: $color;
+    background-color: $background-color;
+    border-color: $border-color;
+  }
   

frontend/src/views/system/user/form.vue

+<template>
+  <layout-content :header="formType=='add' ? $t('user.create') : $t('user.modify')" back-name="用户管理">
+    <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" />
+      </el-form-item>
+      <el-form-item label="电话" prop="phone">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="form.email" />
+      </el-form-item>
+
+      <el-form-item label="性别">
+        <el-radio-group v-model="form.gender" style="width: 178px">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="form.enabled" style="width: 140px">
+          <el-radio :label="1">启用</el-radio>
+          <el-radio :label="0">停用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="部门" prop="dept">
+        <treeselect
+          v-model="form.deptId"
+          :options="depts"
+          :load-options="loadDepts"
+
+          placeholder="选择部门"
+        />
+      </el-form-item>
+      <el-form-item label="角色" prop="roleIds">
+        <el-select
+          v-model="form.roleIds"
+          style="width: 100%"
+          multiple
+          placeholder="请选择"
+          @remove-tag="deleteTag"
+          @change="changeRole"
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.name"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { PHONE_REGEX } from '@/utils/validate'
+import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
+import { getDeptTree, treeByDeptId } from '@/api/system/dept'
+import { allRoles } from '@/api/system/role'
+import { addUser, editUser } from '@/api/system/user'
+export default {
+
+  components: { LayoutContent, Treeselect },
+  data() {
+    return {
+      form: {
+        roles: [{
+          id: ''
+        }]
+      },
+      rule: {
+        username: [
+          { required: true, message: this.$t('user.input_id'), trigger: 'blur' },
+          { min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
+          {
+            required: true,
+            pattern: '^[^\u4e00-\u9fa5]+$',
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
+        ],
+        nickName: [
+          { required: true, message: this.$t('user.input_name'), trigger: 'blur' },
+          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
+        ],
+        phone: [
+          {
+            pattern: PHONE_REGEX,
+            message: this.$t('user.mobile_number_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        email: [
+          { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+            message: this.$t('user.email_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        password: [
+          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        newPassword: [
+          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'change' }]
+
+      },
+      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null, roleIds: [] },
+      depts: null,
+      roles: [],
+      roleDatas: [],
+      userRoles: [],
+      formType: 'add'
+    }
+  },
+
+  created() {
+    if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
+      const row = this.$router.currentRoute.params
+      this.edit(row)
+    } else {
+      this.create()
+    }
+    this.initRoles()
+  },
+  methods: {
+    create() {
+      this.depts = null
+      this.formType = 'add'
+      this.form = Object.assign({}, this.defaultForm)
+      console.log(this.form)
+    },
+    edit(row) {
+      this.depts = null
+      this.formType = 'modify'
+      this.dialogVisible = true
+      this.form = Object.assign({}, row)
+      if (this.form.deptId === 0) {
+        this.form.deptId = null
+      }
+      this.initDeptTree()
+    },
+    initRoles() {
+      allRoles().then(res => {
+        this.roles = res.data
+      })
+    },
+    initDeptTree() {
+      treeByDeptId(this.form.deptId || 0).then(res => {
+        const results = res.data.map(node => {
+          if (node.hasChildren && !node.children) {
+            node.children = null
+          }
+          return node
+        })
+        this.depts = results
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_ROOT_OPTIONS && !this.form.deptId) {
+        const _self = this
+        treeByDeptId(0).then(res => {
+          const results = res.data.map(node => {
+            if (node.hasChildren && !node.children) {
+              node.children = null
+            }
+            return node
+          })
+          _self.depts = results
+          callback()
+        })
+      }
+
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        const _self = this
+        getDeptTree(parentNode.id).then(res => {
+          parentNode.children = res.data.map(function(obj) {
+            return _self.normalizer(obj)
+          })
+          callback()
+        })
+      }
+    },
+    normalizer(node) {
+      if (node.hasChildren) {
+        node.children = null
+      }
+      return {
+        id: node.deptId,
+        label: node.name,
+        children: node.children
+      }
+    },
+    deleteTag(value) {
+      this.userRoles.forEach(function(data, index) {
+        if (data.id === value) {
+          this.userRoles.splice(index, value)
+        }
+      }.bind(this))
+    },
+    changeRole(value) {
+      this.userRoles = []
+      value.forEach(function(data, index) {
+        const role = { id: data }
+        this.userRoles.push(role)
+      }.bind(this))
+    },
+    reset() {
+      this.$refs.createUserForm.resetFields()
+    },
+    save() {
+      this.$refs.createUserForm.validate(valid => {
+        if (valid) {
+          const method = this.formType === 'add' ? addUser : editUser
+          method(this.form).then(res => {
+            this.$success(this.$t('commons.save_success'))
+            this.backToList()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    backToList() {
+      this.$router.push({ name: '用户管理' })
+    }
+  }
+}
+</script>

frontend/src/views/system/user/index.vue

@@ -13,7 +13,6 @@
         <fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
       </template>
 
-      <!-- <el-table-column type="selection" fix /> -->
       <el-table-column prop="username" label="ID" width="80" />
       <el-table-column prop="nickName" :label="$t('commons.name')" width="140" />
       <el-table-column prop="gender" label="性别" width="50" />
@@ -108,7 +107,6 @@
       </div>
     </el-dialog>
 
-    <!--Changing user password in system settings-->
     <el-dialog
       :close-on-click-modal="false"
       :title="$t('member.edit_password')"
@@ -144,9 +142,7 @@
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
-// import conditionTable from '@/components/business/condition-table'
-// import CustomCondition from './CustomCondtion'
-// import { GridButton } from '@/components/GridButton'
+
 import { checkPermission } from '@/utils/permission'
 import { formatCondition } from '@/utils/index'
 import { PHONE_REGEX } from '@/utils/validate'
@@ -305,23 +301,28 @@ export default {
         this.paginationConfig.total = response.data.itemCount
       })
     },
-
     create() {
-      this.depts = null
-      this.formType = 'add'
-      this.form = Object.assign({}, this.defaultForm)
-      this.dialogVisible = true
+      this.$router.push({ name: '用户表单' })
     },
+    // create() {
+    //   this.depts = null
+    //   this.formType = 'add'
+    //   this.form = Object.assign({}, this.defaultForm)
+    //   this.dialogVisible = true
+    // },
     edit(row) {
-      this.depts = null
-      this.formType = 'modify'
-      this.dialogVisible = true
-      this.form = Object.assign({}, row)
-      if (this.form.deptId === 0) {
-        this.form.deptId = null
-      }
-      this.initDeptTree()
+      this.$router.push({ name: '用户表单', params: row })
     },
+    // edit(row) {
+    //   this.depts = null
+    //   this.formType = 'modify'
+    //   this.dialogVisible = true
+    //   this.form = Object.assign({}, row)
+    //   if (this.form.deptId === 0) {
+    //     this.form.deptId = null
+    //   }
+    //   this.initDeptTree()
+    // },
     editPassword(row) {
       this.editPasswordVisible = true
       const tempForm = Object.assign({}, row)