fix:[系统管理] [用户管理] 按照原型修改

src/lang/en.js

@@ -5,6 +5,8 @@ import menu from './en/system/menu'
 import role from './en/system/role'
 // 部门管理
 import dept from './en/system/dept'
+// 部门管理
+import user from './en/system/user'
 
 //资源库管理
 // 仪器管理
@@ -25,8 +27,8 @@ export default {
     search: 'search',
     reset: 'reset',
     add: 'Create',
-    edit: 'edit',
-    export: 'export',
+    edit: 'Edit',
+    export: 'Export',
     saveConfirm: 'confirm',
     confirm: 'confirm',
     cancel: 'cancel',
@@ -80,7 +82,8 @@ export default {
     system: {
       menu,
       role,
-      dept
+      dept,
+      user
     },
     business: {
       zykgl: {

src/lang/en/system/user.js

@@ -0,0 +1,22 @@
+export default {
+  userName: 'User',
+  name: 'Name',
+  phone: 'Phone',
+  department: 'Department',
+  role: 'Owned Role',
+  status: 'Status',
+
+  statusEnable: 'Enabled',
+  statusDisable: 'Disabled',
+
+  enable: 'Enable',
+  disable: 'Disable',
+
+  edit: 'Edit',
+  history: 'Role History',
+
+  addRole: 'Create',
+  modifyRole: 'Edit',
+  notEmpty: ' can not be empty',
+  phoneError: 'Please Enter A Correct Phone Number'
+}

src/lang/zh.js

@@ -5,6 +5,8 @@ import menu from './zh/system/menu'
 import role from './zh/system/role'
 // 部门管理
 import dept from './zh/system/dept'
+// 部门管理
+import user from './zh/system/user'
 
 //资源库管理
 // 仪器管理
@@ -80,7 +82,8 @@ export default {
     system: {
       menu,
       role,
-      dept
+      dept,
+      user
     },
     business: {
       zykgl: {

src/lang/zh/system/user.js

@@ -0,0 +1,22 @@
+export default {
+  userName: '账号',
+  name: '姓名',
+  phone: '手机',
+  department: '所属部门/学科',
+  role: '所属角色',
+  status: '状态',
+
+  statusEnable: '启用',
+  statusDisable: '禁用',
+
+  enable: '启用',
+  disable: '禁用',
+
+  edit: '编辑',
+  history: '角色变更历史',
+
+  addRole: '新增角色',
+  modifyRole: '编辑角色',
+  notEmpty: '不能为空',
+  phoneError: '请输入正确的手机号码'
+}

src/views/system/user/index.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="20">
       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
         <!--部门数据-->
-        <pane size="16">
+        <!-- <pane size="16">
           <el-col>
             <div class="head-container">
               <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
@@ -12,25 +12,37 @@
               <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
             </div>
           </el-col>
-        </pane>
+        </pane> -->
         <!--用户数据-->
-        <pane size="84">
+        <pane size="100">
           <el-col>
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="用户名称" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+              <el-form-item :label="$t('page.system.user.userName')+'：'" prop="userName">
+                <el-input v-model="queryParams.userName" :placeholder="$t('form.placeholderInput')" clearable style="width: 100px" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item :label="$t('page.system.user.name')+'：'" prop="nickName">
+                <el-input v-model="queryParams.nickName" :placeholder="$t('form.placeholderInput')" clearable style="width: 100px" @keyup.enter.native="handleQuery" />
               </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+              <el-form-item :label="$t('page.system.user.phone')+'：'" prop="phonenumber">
+                <el-input v-model="queryParams.phonenumber" :placeholder="$t('form.placeholderInput')" clearable style="width: 100px" @keyup.enter.native="handleQuery" />
               </el-form-item>
-              <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
-                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+              <el-form-item :label="$t('page.system.user.department')+'：'" prop="deptId">
+                <treeselect v-model="queryParams.deptId" :options="enabledDeptOptions" :show-count="true" :placeholder="$t('form.placeholderSelect')" style="width: 200px" />
+              </el-form-item>
+              <el-form-item :label="$t('page.system.user.status')+'：'" prop="status">
+                <el-select 
+                  v-model="queryParams.status"
+                  :placeholder="$t('form.placeholderSelect')"
+                  clearable
+                  style="width: 100px"
+                >
+                  <el-option key="0" :label="$t('page.system.user.statusEnable')" value="0" />
+                  <el-option key="1" :label="$t('page.system.user.statusDisable')" value="1" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="创建时间">
+              <!-- <el-form-item label="创建时间">
                 <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('form.search') }}</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('form.reset') }}</el-button>
@@ -39,9 +51,9 @@
 
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">{{$t('form.add')}}</el-button>
               </el-col>
-              <el-col :span="1.5">
+              <!-- <el-col :span="1.5">
                 <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
               </el-col>
               <el-col :span="1.5">
@@ -49,34 +61,63 @@
               </el-col>
               <el-col :span="1.5">
                 <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
-              </el-col>
+              </el-col> -->
               <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">{{$t('form.export')}}</el-button>
               </el-col>
-              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+              <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
             </el-row>
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
-              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
-              <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
+              <!-- <el-table-column type="selection" width="50" align="center" /> -->
+              <!-- <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" /> -->
+              <el-table-column :label="$t('page.system.user.userName')" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" width="150" />
+              <el-table-column :label="$t('page.system.user.name')" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" width="150" />
+              <el-table-column :label="$t('page.system.user.phone')" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
+              <el-table-column :label="$t('page.system.user.department')" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" width="150" />
+              <el-table-column :label="$t('page.system.user.role')" align="center" key="roleName" prop="role.roleName" v-if="columns.deptName.visible" :show-overflow-tooltip="true">
                 <template slot-scope="scope">
-                  <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                  {{getRoleName(scope.row)}}
                 </template>
               </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
+              <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible" width="100">
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                  <span v-if="scope.row.status==='0'">{{$t('page.system.user.statusEnable')}}</span>
+                  <span v-if="scope.row.status==='1'">{{$t('page.system.user.statusDisable')}}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+              <!-- <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column> -->
+              <el-table-column :label="$t('form.operate')" align="center" width="180" class-name="small-padding fixed-width">
                 <template slot-scope="scope" v-if="scope.row.userId !== 1">
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
+                  <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">{{$t('page.system.user.edit')}}</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    @click="handleStatusChange(scope.row)"
+                    v-hasPermi="['system:user:edit']"
+                    v-if="scope.row.status==='0'"
+                  >{{$t('page.system.user.disable')}}</el-button>
+
+                  <el-button
+                    size="mini"
+                    type="text"
+                    @click="handleStatusChange(scope.row)"
+                    v-hasPermi="['system:user:edit']"
+                    v-if="scope.row.status==='1'"
+                  >{{$t('page.system.user.enable')}}</el-button>
+
+                  <el-button
+                    size="mini"
+                    type="text"
+                    @click="handleStatusChange(scope.row)"
+                    v-hasPermi="['system:user:edit']"
+                  >{{$t('page.system.user.history')}}</el-button>
+                  
+                  <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
                   <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
                     <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                     <el-dropdown-menu slot="dropdown">
@@ -95,45 +136,67 @@
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
         <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.userName')+'：'" prop="userName">
+              <el-input v-model="form.userName" :placeholder="$t('form.placeholderInput')" maxlength="30" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" />
+          <el-col :span="24">
+            <el-form-item v-if="form.userId == undefined" label="用户密码：" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.name')+'：'" prop="nickName">
+              <el-input v-model="form.nickName" :placeholder="$t('form.placeholderInput')" maxlength="30" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.phone')+'：'" prop="phonenumber">
+              <el-input v-model="form.phonenumber" :placeholder="$t('form.placeholderInput')" maxlength="11" />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.department')+'：'" prop="deptId">
+              <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" :placeholder="$t('form.placeholderSelect')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.role')+'：'" prop="roleIds">
+              <el-select style="width:100%" v-model="form.roleIds" multiple :placeholder="$t('form.placeholderSelect')">
+                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.user.status')+'：'" prop="status">
+              <el-select
+                v-model="form.status"
+                :placeholder="$t('form.placeholderSelect')"
+                style="width:100%"
+                :disabled="readonly"
+              >
+                <el-option key="0" :label="$t('page.system.user.statusEnable')" value="0" />
+                <el-option key="1" :label="$t('page.system.user.statusDisable')" value="1" />
+              </el-select>
+
             </el-form-item>
           </el-col>
+        </el-row>
+        <!-- <el-row>
           <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
+          
+        </el-row>
+        <el-row>
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select v-model="form.sex" placeholder="请选择性别">
@@ -157,13 +220,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
+          
         </el-row>
         <el-row>
           <el-col :span="24">
@@ -171,11 +228,11 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
             </el-form-item>
           </el-col>
-        </el-row>
+        </el-row> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{$t('form.saveConfirm')}}</el-button>
+        <el-button @click="cancel">{{$t('form.cancel')}}</el-button>
       </div>
     </el-dialog>
 
@@ -272,9 +329,11 @@ export default {
         pageNum: 1,
         pageSize: 10,
         userName: undefined,
+        nickName: undefined,
         phonenumber: undefined,
         status: undefined,
-        deptId: undefined
+        deptId: undefined,
+        status:''
       },
       // 列信息
       columns: {
@@ -289,28 +348,38 @@ export default {
       // 表单校验
       rules: {
         userName: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+          { required: true, message: this.$t('page.system.user.userName')+ this.$t('page.system.user.notEmpty'), trigger: "blur" },
+          // { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
         ],
         nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+          { required: true, message: this.$t('page.system.user.name')+ this.$t('page.system.user.notEmpty'), trigger: "blur" }
         ],
         password: [
           { required: true, message: "用户密码不能为空", trigger: "blur" },
           { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
           { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
         ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
+        deptId: [
+          { required: true, message: this.$t('page.system.user.department')+ this.$t('page.system.user.notEmpty'), trigger: "change" }
         ],
+        roleIds: [
+          { required: true, message: this.$t('page.system.user.role')+ this.$t('page.system.user.notEmpty'), trigger: "change" }
+        ],
+        status: [
+          { required: true, message: this.$t('page.system.user.status')+ this.$t('page.system.user.notEmpty'), trigger: "change" }
+        ],
+        // email: [
+        //   {
+        //     type: "email",
+        //     message: "请输入正确的邮箱地址",
+        //     trigger: ["blur", "change"]
+        //   }
+        // ],
         phonenumber: [
+          { required: true, message: this.$t('page.system.user.phone')+ this.$t('page.system.user.notEmpty'), trigger: "blur" },
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
+            message: this.$t('page.system.user.phoneError'),
             trigger: "blur"
           }
         ]
@@ -372,14 +441,18 @@ export default {
     },
     // 用户状态修改
     handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
-        return changeUserStatus(row.userId, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
+      changeUserStatus(row.userId, row.status === "0"?'1':'0').then(response => {
+        this.getList()
       })
+
+      // let text = row.status === "0" ? "启用" : "停用"
+      // this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
+      //   return changeUserStatus(row.userId, row.status)
+      // }).then(() => {
+      //   this.$modal.msgSuccess(text + "成功")
+      // }).catch(function() {
+      //   row.status = row.status === "0" ? "1" : "0"
+      // })
     },
     // 取消按钮
     cancel() {
@@ -552,6 +625,12 @@ export default {
         return
       }
       this.$refs.upload.submit()
+    },
+    getRoleName(row){
+      if(row && row.roles && row.roles.length>0){
+        return _.map(row.roles,'roleName').join('，')
+      }
+      return ''
     }
   }
 }