[Update] 修改 detailcard 支持jsx

src/components/DetailCard/index.vue

@@ -3,7 +3,9 @@
     <div class="content">
       <el-row v-for="item in items" :key="'card-' + item.key" class="item" :gutter="10">
         <el-col :span="6"><div class="item-label" :style="{ 'text-align': align}"><label>{{ item.key }}: </label></div></el-col>
-        <el-col :span="18"><div class="item-text">{{ item.value }}</div></el-col>
+        <el-col :span="18"><div class="item-text">
+          <ItemValue :value="item.value" :item="item" />
+        </div></el-col>
       </el-row>
     </div>
   </IBox>
@@ -11,10 +13,11 @@
 
 <script>
 import IBox from '../IBox'
+import ItemValue from './value'
 
 export default {
   name: 'DetailCard',
-  components: { IBox },
+  components: { IBox, ItemValue },
   props: {
     title: {
       type: String,

src/components/DetailCard/value.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'ItemValue',
+  props: {
+    value: {
+      type: [String, Function],
+      required: true
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  render(h) {
+    if (typeof this.value === 'function') {
+      return this.value(this.item)
+    }
+    return <span>{this.value}</span>
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/i18n/langs/cn.js

@@ -225,13 +225,16 @@ const cn = {
     'Date password updated': '更新密码日期',
     'MFA': '多因子认证',
     'Source': '用户来源',
-    'Reset MFA': '重置多因子认证',
+    'resetMFATitle': '重置多因子认证',
     'Send reset password mail': '发送重置密码邮件',
-    'Send reset ssh key mail': '发送重置密钥邮件',
+    'resetPublicKeyTitle': '发送重置密钥邮件',
+    'resetPasswordTitle': '发送重置密码邮件',
     'Unblock user': '解除登录限制',
     'Force enabled MFA': '强制启用多因子认证',
     'resetPasswordWarningMsg': '将失效用户当前密码，并发送重设密码邮件到用户邮箱',
-    'resetPublicKeyWarningMsg': '将会失效用户当前密钥，并发送重置邮件到用户邮箱'
+    'resetPasswordSuccessMsg': '已发送邮件到用户邮箱',
+    'resetPublicKeyWarningMsg': '将会失效用户当前密钥，并发送重置邮件到用户邮箱',
+    'resetPublicKeySuccessMsg': '已发送邮件到用户邮箱'
   },
   // 用户组
   assets: {

src/i18n/langs/en.js

@@ -84,8 +84,13 @@ const en = {
     'remote_app_permission': 'RemoteApp permission',
     'database_app_granted': 'DatabaseApp granted',
     'database_app_permission': 'DatabaseApp permission',
+    'resetPublicKeyTitle': 'Send reset ssh key mail',
+    'resetPasswordTitle': 'Send reset password mail',
     'resetPasswordWarningMsg': 'This will reset the user password and send a reset mail',
-    'resetPublicKeyWarningMsg': 'This will reset the user public key and send a reset mail'
+    'resetPasswordSuccessMsg': 'An e-mail has been sent to the user`s mailbox',
+    'resetPublicKeyWarningMsg': 'This will reset the user public key and send a reset mail',
+    'resetPublicKeySuccessMsg': 'An e-mail has been sent to the user`s mailbox',
+    'resetMFATitle': 'Reset MFA'
   },
   usergroup: {
     'user_group_list': 'User group list',

src/styles/element-ui.scss

@@ -92,11 +92,11 @@ td .el-button.el-button--mini {
   font-weight: 600;
 }
 
-.el-button.el-button--default:focus:not(.is-disabled), .el-button.el-button--default:hover:not(.is-disabled) {
-  color: #606266;
-  border-color: #d2d2d2;
-  background-color: #e6e6e6;
-}
+//.el-button.el-button--default:focus:not(.is-disabled), .el-button.el-button--default:hover:not(.is-disabled) {
+//  color: #606266;
+//  border-color: #d2d2d2;
+//  background-color: #e6e6e6;
+//}
 
 .el-button-group>.el-dropdown>.el-button {
   border-top-left-radius: 0;

src/views/users/users/UserDetail/UserInfo.vue

@@ -47,7 +47,7 @@ export default {
           }
         },
         {
-          title: this.$t('users.Reset MFA'),
+          title: this.$t('users.resetMFATitle'),
           attrs: {
             type: 'primary',
             label: this.$tc('Reset')
@@ -59,7 +59,7 @@ export default {
           }
         },
         {
-          title: this.$t('users.Send reset password mail'),
+          title: this.$t('users.resetPasswordTitle'),
           attrs: {
             type: 'primary',
             label: this.$tc('Send')
@@ -80,7 +80,7 @@ export default {
                   try {
                     await vm.$axios.patch(url, {})
                     done()
-                    this.$message.success(successMsg)
+                    vm.$message.success(successMsg)
                   } finally {
                     instance.confirmButtonLoading = false
                   }
@@ -90,14 +90,33 @@ export default {
           }
         },
         {
-          title: this.$t('users.Send reset ssh key mail'),
+          title: this.$t('users.resetPublicKeyTitle'),
           attrs: {
             type: 'primary',
             label: this.$tc('Send')
           },
           callbacks: {
             click: function() {
-              console.log('click')
+              const warnMsg = vm.$t('users.resetPublicKeyWarningMsg')
+              const warnTitle = vm.$tc('Info')
+              const url = `/api/v1/users/users/${vm.object.id}/pubkey/reset/`
+              const successMsg = vm.$t('users.resetPasswordSuccessMsg')
+              vm.$confirm(warnMsg, warnTitle, {
+                type: 'warning',
+                confirmButtonClass: 'el-button--warning',
+                showCancelButton: true,
+                beforeClose: async(action, instance, done) => {
+                  if (action !== 'confirm') return done()
+                  instance.confirmButtonLoading = true
+                  try {
+                    await vm.$axios.patch(url, {})
+                    done()
+                    vm.$message.success(successMsg)
+                  } finally {
+                    instance.confirmButtonLoading = false
+                  }
+                }
+              })
             }
           }
         },