demo

frontend/src/business/components/settings/personal/PersonSetting.vue

@@ -1,7 +1,6 @@
 <template>
   <div v-loading="result.loading">
     <el-card>
-
       <template v-slot:header>
         <div>
           <el-row type="flex" justify="space-between" align="middle">
@@ -22,7 +21,12 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            <el-tooltip class="item" effect="dark" :content="$t('member.edit_information')" placement="bottom" >
+              <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" :content="$t('member.edit_password')" placement="bottom" >
+              <el-button @click="editPassword(scope.row)" type="primary" icon="el-icon-s-tools" size="mini" circle/>
+            </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
@@ -43,9 +47,6 @@
           <el-form-item :label="$t('commons.phone')" prop="phone">
             <el-input v-model="form.phone" autocomplete="off"/>
           </el-form-item>
-          <el-form-item :label="$t('commons.password')" prop="password">
-            <el-input v-model="form.password" autocomplete="off" show-password/>
-          </el-form-item>
         </el-form>
         <template v-slot:footer>
           <ms-dialog-footer
@@ -54,6 +55,25 @@
         </template>
       </el-dialog>
 
+      <el-dialog
+        :title="$t('member.edit_password')"
+        :visible.sync="centerDialogVisible"
+        width="30%"
+        left>
+        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item :label="$t('member.old_password')" prop="password">
+            <el-input v-model="ruleForm.password" autocomplete="off" show-password/>
+          </el-form-item>
+          <el-form-item :label="$t('member.new_password')" prop="newpassword">
+            <el-input v-model="ruleForm.newpassword" autocomplete="off" show-password/>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+         <el-button @click="centerDialogVisible = false">取 消</el-button>
+         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+
     </el-card>
   </div>
 </template>
@@ -64,12 +84,23 @@
 
   export default {
     data() {
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value == this.ruleForm.newpassword) {
+          callback(new Error('两次密码一致,请重新输入!'));
+        } else {
+          callback();
+        }
+      };
       return {
         result: {},
         updateVisible: false,
+        centerDialogVisible:false,
         tableData: [],
         updatePath: '/user/update/current',
         form: {},
+        ruleForm:{},
         rule: {
           name: [
             {required: true, message: this.$t('member.input_name'), trigger: 'blur'},
@@ -98,6 +129,8 @@
               trigger: 'blur'
             }
           ],
+        },
+        rules:{
           password: [
             {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
             {
@@ -106,6 +139,16 @@
               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,16}$/,
+              message: this.$t('member.password_format_is_incorrect'),
+              trigger: 'blur'
+            },
+            { validator: validatePass2, trigger: 'blur' }
           ]
         }
       }
@@ -124,6 +167,9 @@
         this.updateVisible = true;
         this.form = Object.assign({}, row);
       },
+      editPassword(row){
+        this.centerDialogVisible = true;
+      },
       updateUser(updateUserForm) {
         this.$refs[updateUserForm].validate(valide => {
           if (valide) {

frontend/src/business/components/settings/system/User.vue

@@ -92,6 +92,21 @@
           @confirm="updateUser('updateUserForm')"/>
       </template>
     </el-dialog>
+    <!--<el-dialog
+      :title="$t('member.edit_password')"
+      :visible.sync="centerDialogVisible"
+      width="30%"
+      left>
+      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="新密码" prop="newPass">
+          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+         <el-button @click="centerDialogVisible = false">取 消</el-button>
+         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>-->
 
   </div>
 </template>

frontend/src/i18n/en-US.js

@@ -89,12 +89,16 @@ export default {
     'please_choose_member': 'Please Choose Member',
     'search_by_name': 'Search by name',
     'modify_personal_info': 'Modify Personal Information',
+    'edit_password':'Edit_Password',
+    'edit_information':'Edit_Information',
     'input_name': 'Please enter a user name',
     'input_email': 'Please enter a email',
     'special_characters_are_not_supported': 'Special characters are not supported',
     'mobile_number_format_is_incorrect': 'Mobile number format is incorrect',
     'email_format_is_incorrect': 'Email format is incorrect',
     'password_format_is_incorrect':'Password format is incorrect (At least 8-16 characters, at least 1 uppercase letter, 1 lowercase letter and 1 number)',
+    'old_password':'Old Password',
+    'new_password':'New Password',
   },
   user: {
     'create': 'Create',

frontend/src/i18n/zh-CN.js

@@ -91,12 +91,16 @@ export default {
     'please_choose_member': '请选择成员',
     'search_by_name': '根据名称搜索',
     'modify_personal_info': '修改个人信息',
+    'edit_password':'修改密码',
+    'edit_information':'编辑信息',
     'input_name': '请输入名称',
     'input_email': '请输入邮箱',
     'special_characters_are_not_supported': '不支持特殊字符',
     'mobile_number_format_is_incorrect': '手机号码格式不正确',
     'email_format_is_incorrect': '邮箱格式不正确',
     'password_format_is_incorrect':'密码格式不正确(至少8-16个字符，至少1个大写字母，1个小写字母和1个数字)',
+    'old_password':'旧密码',
+    'new_password':'新密码',
   },
   user: {
     'create': '创建用户',