fetch(add): 账户管理

src/views/system/role/index.vue

@@ -40,69 +40,81 @@
           </template>
         </ArtTable>
 
-    <!-- 新增/编辑对话框 -->
-    <ElDialog
-      v-model="dialogVisible"
-      :title="dialogType === 'add' ? '新增角色' : '编辑角色'"
-      width="30%"
-    >
-      <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
-        <ElFormItem label="角色名称" prop="role_name">
-          <ElInput v-model="form.role_name" placeholder="请输入角色名称" />
-        </ElFormItem>
-        <ElFormItem label="角色描述" prop="role_desc">
-          <ElInput v-model="form.role_desc" type="textarea" :rows="3" placeholder="请输入角色描述" />
-        </ElFormItem>
-        <ElFormItem label="角色类型" prop="role_type">
-          <ElSelect v-model="form.role_type" placeholder="请选择角色类型" style="width: 100%">
-            <ElOption label="平台角色" :value="1" />
-            <ElOption label="客户角色" :value="2" />
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem label="状态">
-          <ElSwitch
-            v-model="form.status"
-            :active-value="CommonStatus.ENABLED"
-            :inactive-value="CommonStatus.DISABLED"
-          />
-        </ElFormItem>
-      </ElForm>
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="dialogVisible = false">取消</ElButton>
-          <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
-            提交
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
-
-    <!-- 分配权限对话框 -->
-    <ElDialog
-      v-model="permissionDialogVisible"
-      title="分配权限"
-      width="500px"
-    >
-      <ElCheckboxGroup v-model="selectedPermissions">
-        <div v-for="permission in allPermissions" :key="permission.ID" style="margin-bottom: 12px;">
-          <ElCheckbox :label="permission.ID">
-            {{ permission.perm_name }}
-            <ElTag :type="permission.perm_type === 1 ? '' : 'success'" size="small" style="margin-left: 8px;">
-              {{ permission.perm_type === 1 ? '菜单' : '按钮' }}
-            </ElTag>
-          </ElCheckbox>
-        </div>
-      </ElCheckboxGroup>
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="permissionDialogVisible = false">取消</ElButton>
-          <ElButton type="primary" @click="handleAssignPermissions" :loading="permissionSubmitLoading">
-            提交
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
+        <!-- 新增/编辑对话框 -->
+        <ElDialog
+          v-model="dialogVisible"
+          :title="dialogType === 'add' ? '新增角色' : '编辑角色'"
+          width="30%"
+        >
+          <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
+            <ElFormItem label="角色名称" prop="role_name">
+              <ElInput v-model="form.role_name" placeholder="请输入角色名称" />
+            </ElFormItem>
+            <ElFormItem label="角色描述" prop="role_desc">
+              <ElInput
+                v-model="form.role_desc"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入角色描述"
+              />
+            </ElFormItem>
+            <ElFormItem label="角色类型" prop="role_type">
+              <ElSelect v-model="form.role_type" placeholder="请选择角色类型" style="width: 100%">
+                <ElOption label="平台角色" :value="1" />
+                <ElOption label="客户角色" :value="2" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="状态">
+              <ElSwitch
+                v-model="form.status"
+                :active-value="CommonStatus.ENABLED"
+                :inactive-value="CommonStatus.DISABLED"
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="dialogVisible = false">取消</ElButton>
+              <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
 
+        <!-- 分配权限对话框 -->
+        <ElDialog v-model="permissionDialogVisible" title="分配权限" width="500px">
+          <ElCheckboxGroup v-model="selectedPermissions">
+            <div
+              v-for="permission in allPermissions"
+              :key="permission.ID"
+              style="margin-bottom: 12px"
+            >
+              <ElCheckbox :label="permission.ID">
+                {{ permission.perm_name }}
+                <ElTag
+                  :type="permission.perm_type === 1 ? 'info' : 'success'"
+                  size="small"
+                  style="margin-left: 8px"
+                >
+                  {{ permission.perm_type === 1 ? '菜单' : '按钮' }}
+                </ElTag>
+              </ElCheckbox>
+            </div>
+          </ElCheckboxGroup>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="permissionDialogVisible = false">取消</ElButton>
+              <ElButton
+                type="primary"
+                @click="handleAssignPermissions"
+                :loading="permissionSubmitLoading"
+              >
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -111,10 +123,17 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { RoleService, PermissionService } from '@/api/modules'
-  import { ElMessage, ElMessageBox, ElTag, ElCheckbox, ElCheckboxGroup, ElSwitch } from 'element-plus'
+  import {
+    ElMessage,
+    ElMessageBox,
+    ElTag,
+    ElCheckbox,
+    ElCheckboxGroup,
+    ElSwitch
+  } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import type { PlatformRole, Permission } from '@/types/api'
-  import type { SearchFormItem, SearchChangeParams } from '@/types'
+  import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import { formatDateTime } from '@/utils/business/format'
@@ -215,10 +234,8 @@
       label: '角色类型',
       width: 100,
       formatter: (row: any) => {
-        return h(
-          ElTag,
-          { type: row.role_type === 1 ? 'primary' : 'success' },
-          () => (row.role_type === 1 ? '平台角色' : '客户角色')
+        return h(ElTag, { type: row.role_type === 1 ? 'primary' : 'success' }, () =>
+          row.role_type === 1 ? '平台角色' : '客户角色'
         )
       }
     },
@@ -234,7 +251,8 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) =>
+            handleStatusChange(row, val as number)
         })
       }
     },
@@ -325,10 +343,10 @@
     try {
       // 对比原始权限和当前选中的权限，找出需要新增和移除的权限
       const addedPermissions = selectedPermissions.value.filter(
-        id => !originalPermissions.value.includes(id)
+        (id) => !originalPermissions.value.includes(id)
       )
       const removedPermissions = originalPermissions.value.filter(
-        id => !selectedPermissions.value.includes(id)
+        (id) => !selectedPermissions.value.includes(id)
       )
 
       // 使用 Promise.all 并发执行新增和移除操作
@@ -341,7 +359,7 @@
 
       // 如果有移除的权限，调用移除接口
       if (removedPermissions.length > 0) {
-        removedPermissions.forEach(permId => {
+        removedPermissions.forEach((permId) => {
           promises.push(RoleService.removePermission(currentRoleId.value, permId))
         })
       }
@@ -445,7 +463,7 @@
         try {
           await RoleService.deleteRole(row.ID)
           ElMessage.success('删除成功')
-          getTableData()
+          await getTableData()
         } catch (error) {
           console.error(error)
         }
@@ -480,7 +498,7 @@
 
           dialogVisible.value = false
           formEl.resetFields()
-          getTableData()
+          await getTableData()
         } catch (error) {
           console.error(error)
         } finally {
@@ -496,7 +514,7 @@
     // 先更新UI
     row.status = newStatus
     try {
-      await RoleService.updateRole(row.ID, { status: newStatus })
+      await RoleService.updateRoleStatus(row.ID, newStatus as 0 | 1)
       ElMessage.success('状态切换成功')
     } catch (error) {
       // 切换失败，恢复原状态
@@ -506,9 +524,3 @@
   }
 
 </script>
-
-<style lang="scss" scoped>
-  .role-page {
-    // 可以在这里添加角色页面特定样式
-  }
-</style>