fix: 修改user列表操作按钮样式

1 files changed, 68 insertions, 63 deletions

diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index a2df50c..48e0a51 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -2,7 +2,7 @@
   <div id="users" class="pageList">
     <div class="list-header">
       <div class="list-header-left">
-        <span>{{t('overall.users')}}</span>
+        <span>{{ t('overall.users') }}</span>
         <span class="list-header-number">
           （{{ toThousands(tableData.length) }}）
         </span>
@@ -22,31 +22,7 @@
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
-        <el-dropdown>
-          <el-button
-                  size="large"
-                  plain
-                  style="margin-right: 20px"
-          >
-            {{ t('overall.actions') }}
-            <el-icon class="el-icon--right"><arrow-down /></el-icon>
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item :disabled="!tableSelect.length || tableSelect.length > 1" @click="edit">
-                <span>{{ t('overall.edit') }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item :disabled="!tableSelect.length" @click="deleteUsers">
-                <span>{{ t('overall.delete') }}</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <el-button
-          type="primary"
-          size="large"
-          @click="newUser"
-        >
+        <el-button type="primary" size="large" @click="newUser">
           {{ t('user.create_user') }}
         </el-button>
       </div>
@@ -67,7 +43,6 @@
         @sort-change="sortChange"
         @selection-change="selectionChange"
       >
-        <el-table-column type="selection" width="55" align="center" />
         <el-table-column
           v-for="item in tableTitle"
           :key="item.prop"
@@ -80,16 +55,25 @@
           :sort-orders="['ascending', 'descending']"
         >
           <template #default="scope">
-            <template v-if="item.prop === 'createTimestamp' || item.prop === 'lastLoginTimestamp'">
+            <template
+              v-if="
+                item.prop === 'createTimestamp' ||
+                item.prop === 'lastLoginTimestamp'
+              "
+            >
               <div class="primary-secondary">
-                <span>{{moment(scope.row[item.prop]).format('YYYY-MM-DD')}}</span>
-                <span class="secondary">{{moment(scope.row[item.prop]).format('HH:mm:ss')}}</span>
+                <span>{{
+                  moment(scope.row[item.prop]).format('YYYY-MM-DD')
+                }}</span>
+                <span class="secondary">{{
+                  moment(scope.row[item.prop]).format('HH:mm:ss')
+                }}</span>
               </div>
             </template>
             <template v-else-if="item.prop === 'name'">
               <div class="primary-secondary">
-                <span>{{scope.row.name}}</span>
-                <span class="secondary">@{{scope.row.userName}}</span>
+                <span>{{ scope.row.name }}</span>
+                <span class="secondary">@{{ scope.row.userName }}</span>
               </div>
             </template>
             <template v-else-if="scope.row[item.prop]">
@@ -98,6 +82,37 @@
             <template v-else>-</template>
           </template>
         </el-table-column>
+        <el-table-column
+          width="100"
+          fixed="right"
+          align="center"
+          :label="t('overall.actions')"
+        >
+          <template #default="scope">
+            <el-tooltip
+              effect="dark"
+              :content="t('overall.edit')"
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-edit cp action-button"
+                style="font-size: 18px;"
+                @click="tableEdit(scope.row)"
+              ></i>
+            </el-tooltip>
+            <el-tooltip
+              effect="dark"
+              :content="t('overall.delete')"
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-Delete cp action-button"
+                style="font-size: 18px; margin-left: 10px"
+                @click="tableDelete(scope.row)"
+              ></i>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>
@@ -123,7 +138,8 @@ const tableTitle = ref([
   {
     minWidth: 150,
     prop: 'name',
-    label: t('user.user')
+    label: t('user.user'),
+    sortable: 'custom',
   },
   {
     minWidth: 150,
@@ -190,7 +206,7 @@ const fetchList = async (reset = true) => {
     q: keyword.value,
     current: paginat.current,
     size: paginat.size,
-    orderBy: orderBy.value
+    orderBy: orderBy.value,
   };
   const res = await userListApi(params);
   if (res.code == 200) {
@@ -222,46 +238,35 @@ const newUser = () => {
 };
 
 // 编辑
-const edit = async () => {
-  if (!tableSelect.value.length || tableSelect.value.length > 1) {
-    return;
-  }
-  const item = tableSelect.value[0]
+const tableEdit = async (row) => {
   router.push({
     name: 'user_edit',
     params: {
-      id: item.id,
-    }
+      id: row.id,
+    },
   });
 };
 
 // 删除
-const deleteUsers = () => {
+const tableDelete = (row) => {
   ElMessageBox.confirm(t('overall.confirm_batch_delete'), t('overall.hint'), {
     confirmButtonText: t('overall.confirm'),
     cancelButtonText: t('overall.cancel'),
     type: 'warning',
-  }).then(async () => {
-    if (!tableSelect.value.length) {
-      return;
-    }
-    const ids = tableSelect.value
-        .map((item) => {
-          return item.id;
-        })
-        .join(',');
-
-    const params = {
-      ids,
-    };
-    const res = await userDeleteApi(params);
-    if (res.code == 200) {
-      fetchList();
-      ElMessage.success(t('message.save_success'));
-    } else {
-      ElMessage.error(res.msg || res.error);
-    }
-  }).catch(() => {});
+  })
+    .then(async () => {
+      const params = {
+        ids: row.id,
+      };
+      const res = await userDeleteApi(params);
+      if (res.code == 200) {
+        fetchList();
+        ElMessage.success(t('message.save_success'));
+      } else {
+        ElMessage.error(res.msg || res.error);
+      }
+    })
+    .catch(() => {});
 };
 
 onBeforeMount(() => {