新增全部用户查看删除邮箱

mail-vue/src/views/user/index.vue

@@ -143,11 +143,14 @@
                   <el-dropdown-menu>
                     <el-dropdown-item @click="openSetPwd(props.row)">{{ $t('chgPwd') }}</el-dropdown-item>
                     <el-dropdown-item @click="openSetType(props.row)">{{ $t('perm') }}</el-dropdown-item>
-                    <el-dropdown-item v-if="props.row.isDel !== 1" @click="setStatus(props.row)">
-                      {{ setStatusName(props.row) }}
-                    </el-dropdown-item>
-                    <el-dropdown-item v-else @click="restore(props.row)">{{ $t('restore') }}</el-dropdown-item>
-                    <el-dropdown-item @click="delUser(props.row)">{{ $t('delete') }}</el-dropdown-item>
+                    <template v-if="props.row.type !== 0">
+                      <el-dropdown-item v-if="props.row.isDel !== 1" @click="setStatus(props.row)">
+                        {{ setStatusName(props.row) }}
+                      </el-dropdown-item>
+                      <el-dropdown-item v-else @click="restore(props.row)">{{ $t('restore') }}</el-dropdown-item>
+                    </template>
+                    <el-dropdown-item @click="openAccountList(props.row.userId)">{{ $t('account') }}</el-dropdown-item>
+                    <el-dropdown-item @click="delUser(props.row)" v-if="props.row.type !== 0">{{ $t('delete') }}</el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -237,6 +240,44 @@
         </el-button>
       </div>
     </el-dialog>
+    <el-dialog class="account-dialog" v-model="accountShow" :title="t('userAccount')" @closed="resetAccountList" >
+      <el-table :data="accountList" style="height: 480px" v-loading="accountLoading" element-loading-background="transparent" :empty-text="accountLoading ? '' : null">
+        <el-table-column property="email" :label="t('emailAccount')" >
+          <template #default="props">
+            <div class="email-row">{{ props.row.email }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column property="address" :label="t('tabStatus')"  :width="locale === 'en' ? 75 : 65" >
+          <template #default="props">
+            <el-tag type="primary" disable-transitions v-if="props.row.isDel === 0">{{$t('active')}}</el-tag>
+            <el-tag type="info" disable-transitions v-if="props.row.isDel === 1">{{$t('deleted')}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('action')" :width="locale === 'en' ? 75 : 65" >
+          <template #default="props">
+            <el-dropdown trigger="click">
+              <el-button type="primary" size="small">{{t('action')}}</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="deleteAccount(props.row)">{{ $t('delete') }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="account-pagination">
+        <el-pagination
+            :disabled="accountLoading"
+            background
+
+            layout="prev, pager, next"
+            :pager-count="3"
+            :total="accountParams.total"
+            @current-change="accountCurChange"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -249,7 +290,10 @@ import {
   userSetStatus,
   userSetType,
   userAdd,
-  userRestSendCount, userRestore
+  userRestSendCount,
+  userRestore,
+  userDeleteAccount,
+  userAllAccount
 } from '@/request/user.js'
 import {roleSelectUse} from "@/request/role.js";
 import {Icon} from "@iconify/vue";
@@ -289,6 +333,7 @@ const users = ref([])
 const total = ref(0)
 const first = ref(true)
 const scrollbarRef = ref(null)
+const accountLoading = ref(false)
 
 const domainList = settingStore.domainList
 
@@ -314,6 +359,7 @@ const userForm = reactive({
 })
 
 const showAdd = ref(false)
+const accountShow = ref(false)
 const addLoading = ref(false);
 const setTypeShow = ref(false)
 const setPwdShow = ref(false)
@@ -323,6 +369,13 @@ const tableLoading = ref(true)
 const roleList = reactive([])
 const mySelect = ref({})
 const key = ref(0)
+const accountList = reactive([])
+const accountParams = reactive({
+  size: 10,
+  num: 0,
+  total: 0,
+  userId: 0,
+})
 
 roleSelectUse().then(list => {
   roleList.length = 0
@@ -331,11 +384,11 @@ roleSelectUse().then(list => {
 
 const paramsStar = localStorage.getItem('user-params')
 if (paramsStar) {
-  const locaParams = JSON.parse(paramsStar)
-  params.num = locaParams.num
-  params.size = locaParams.size
-  params.timeSort = locaParams.timeSort
-  params.status = locaParams.status
+  const localParams = JSON.parse(paramsStar)
+  params.num = localParams.num
+  params.size = localParams.size
+  params.timeSort = localParams.timeSort
+  params.status = localParams.status
 }
 
 watch(() => params, () => {
@@ -363,6 +416,50 @@ const filterItem = reactive({
   receive: ['normal', 'del']
 })
 
+function deleteAccount(account) {
+  ElMessageBox.confirm(t('delConfirm', {msg: account.email}), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning'
+  }).then(() => {
+    userDeleteAccount(account.accountId).then(() => {
+      getAccountList()
+      ElMessage({
+        message: t('删除成功'),
+        type: "success",
+        plain: true
+      })
+    })
+  });
+}
+function accountCurChange(e) {
+  accountParams.num = e
+  getAccountList()
+}
+
+function resetAccountList() {
+  accountList.length = 0
+  accountParams.num = 0
+  accountParams.size = 10
+  accountParams.total = 0
+}
+
+function openAccountList(userId) {
+  accountParams.userId = userId
+  getAccountList(true)
+  accountShow.value = true
+}
+
+function getAccountList(loading = false) {
+  accountLoading.value = loading
+  userAllAccount(accountParams.userId,accountParams.num, accountParams.size).then(({list,total}) => {
+    accountList.length = 0
+    accountList.push(...list)
+    accountParams.total = total
+    accountLoading.value = false
+  })
+}
+
 function tableFilter(e) {
 
   if (e.send) filterItem.send = e.send
@@ -820,6 +917,15 @@ function adjustWidth() {
   }
 }
 
+:deep(.account-dialog) {
+  width: 500px !important;
+  @media (max-width: 540px) {
+    width: calc(100% - 40px) !important;
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+}
+
 .header-actions {
   padding: 9px 15px;
   display: flex;
@@ -889,6 +995,12 @@ function adjustWidth() {
   }
 }
 
+.account-pagination {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+}
+
 .pagination {
   margin-top: 15px;
   margin-bottom: 20px;
@@ -982,15 +1094,6 @@ function adjustWidth() {
   background: var(--el-bg-color);
 }
 
-:deep(.el-dialog) {
-  width: 400px !important;
-  @media (max-width: 440px) {
-    width: calc(100% - 40px) !important;
-    margin-right: 20px !important;
-    margin-left: 20px !important;
-  }
-}
-
 :deep(.cell) {
   white-space: normal;
   overflow: visible;
@@ -1020,4 +1123,4 @@ function adjustWidth() {
 :deep(.el-message-box__container) {
   align-items: start;
 }
-</style>
+</style>