样式

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

@@ -22,12 +22,10 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <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>
+            <ms-table-operator-button :tip="$t('member.edit_information')" icon="el-icon-edit"
+                                      type="primary" @exec="edit(scope.row)"/>
+            <ms-table-operator-button :tip="$t('member.edit_password')" icon="el-icon-s-tools"
+                                      type="success" @exec="editPassword(scope.row)"/>
           </template>
         </el-table-column>
       </el-table>
@@ -83,18 +81,21 @@
   import {TokenKey} from "../../../../common/js/constants";
   import MsDialogFooter from "../../common/components/MsDialogFooter";
   import {getCurrentUser} from "../../../../common/js/utils";
+  import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
 
   export default {
+    name: "MsPersonSetting",
+    components: {MsDialogFooter, MsTableOperatorButton},
     data() {
       return {
         result: {},
         updateVisible: false,
-        editPasswordVisible:false,
+        editPasswordVisible: false,
         tableData: [],
         updatePath: '/user/update/current',
-        updatePasswordPath:'/user/update/password',
+        updatePasswordPath: '/user/update/password',
         form: {},
-        ruleForm:{},
+        ruleForm: {},
         rule: {
           name: [
             {required: true, message: this.$t('member.input_name'), trigger: 'blur'},
@@ -124,7 +125,7 @@
             }
           ],
         },
-        rules:{
+        rules: {
           /*password: [
             {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
             {
@@ -137,7 +138,7 @@
           newpassword: [
             {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
             {
-              required:true,
+              required: true,
               pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,
               message: this.$t('member.password_format_is_incorrect'),
               trigger: 'blur'
@@ -146,8 +147,7 @@
         }
       }
     },
-    name: "MsPersonSetting",
-    components: {MsDialogFooter},
+
     created() {
       this.initTableData();
     },
@@ -159,7 +159,7 @@
         this.updateVisible = true;
         this.form = Object.assign({}, row);
       },
-      editPassword(row){
+      editPassword(row) {
         this.editPasswordVisible = true;
       },
       updateUser(updateUserForm) {
@@ -177,16 +177,16 @@
           }
         })
       },
-      updatePassword(editPasswordForm){
-       this.$refs[editPasswordForm].validate(valide=>{
-           if(valide){
+      updatePassword(editPasswordForm) {
+        this.$refs[editPasswordForm].validate(valide => {
+          if (valide) {
             this.result = this.$post(this.updatePasswordPath, this.ruleForm, response => {
               this.$success(this.$t('commons.modify_success'));
               this.editPasswordVisible = false;
               this.initTableData();
               window.location.reload();
             });
-           }else {
+          } else {
             return false;
           }
         })

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

@@ -31,10 +31,12 @@
         </el-table-column>
         <el-table-column :label="$t('commons.operating')">
           <template v-slot:default="scope">
-            <ms-table-operator @editClick="edit(scope.row)" @deleteClick="del(scope.row)"/>
-            <el-tooltip class="editpassword" 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>
+            <ms-table-operator @editClick="edit(scope.row)" @deleteClick="del(scope.row)">
+              <template v-slot:behind>
+                <ms-table-operator-button :tip="$t('member.edit_password')" icon="el-icon-s-tools"
+                                          type="success" @exec="editPassword(scope.row)"/>
+              </template>
+            </ms-table-operator>
           </template>
         </el-table-column>
       </el-table>
@@ -119,17 +121,18 @@
   import MsTableHeader from "../../common/components/MsTableHeader";
   import MsTableOperator from "../../common/components/MsTableOperator";
   import MsDialogFooter from "../../common/components/MsDialogFooter";
+  import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
 
   export default {
     name: "MsUser",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter, MsTableOperatorButton},
     data() {
       return {
         queryPath: '/user/special/list',
         deletePath: '/user/special/delete/',
         createPath: '/user/special/add',
         updatePath: '/user/special/update',
-        editPasswordPath:'/user/special/password',
+        editPasswordPath: '/user/special/password',
         result: {},
         createVisible: false,
         updateVisible: false,