refactor: 分离HTTP日志记录功能到专门的HttpLogMiddleware中间件

app/AppService.php

@@ -4,6 +4,7 @@ declare (strict_types=1);
 namespace app;
 
 use app\http\middleware\ContextMiddleware;
+use app\http\middleware\HttpLogMiddleware;
 use think\Service;
 
 /**
@@ -13,6 +14,9 @@ class AppService extends Service
 {
     public function register(): void
     {
+        // 上下文中间件放在最前面
         $this->app->middleware->unshift(ContextMiddleware::class, 'route');
+        // HTTP日志记录中间件
+        $this->app->middleware->add(HttpLogMiddleware::class, 'route');
     }
 }

app/command/admin/SysGateway.php

@@ -14,6 +14,8 @@ use Workerman\Worker;
 
 class SysGateway extends Command
 {
+    private string $registerAddress;
+
     protected function configure()
     {
         $this->setName('admin:gateway')
@@ -35,6 +37,9 @@ class SysGateway extends Command
             $argv[] = '-g';
         }
 
+        $this->registerAddress = config('admin.gateway.registerAddress', '127.0.0.1:1236');
+
+
         /*
          * 载入注册中心
          */
@@ -51,7 +56,7 @@ class SysGateway extends Command
         $worker = new BusinessWorker();
         $worker->name = 'AdminBusinessWorker';
         $worker->count = 4;
-        $worker->registerAddress = '127.0.0.1:1236';
+        $worker->registerAddress = $this->registerAddress;
         $worker->eventHandler = SysGatewayEvent::class;
 
         // 运行所有服务
@@ -61,12 +66,12 @@ class SysGateway extends Command
 
     private function startRegister(): Register
     {
-        return new Register('text://127.0.0.1:1236');
+        return new Register("text://$this->registerAddress");
     }
     private function startGateway(): \GatewayWorker\Gateway
     {
         // gateway 进程
-        $gateway = new \GatewayWorker\Gateway("Websocket://0.0.0.0:19981");
+        $gateway = new \GatewayWorker\Gateway('Websocket://'.config('admin.gateway.websocketAddress', '0.0.0.0:19981'));
         // 设置名称，方便status时查看
         $gateway->name = 'AdminGateway';
         // 设置进程数，一般两个进程就足够
@@ -75,13 +80,13 @@ class SysGateway extends Command
         $gateway->lanIp = '127.0.0.1';
         // 内部通讯起始端口。假如$gateway->count=2，起始端口为2300
         // 则一般会使用2300 2301 2个端口作为内部通讯端口
-        $gateway->startPort = 2300;
+        $gateway->startPort = (int)config('admin.gateway.startPort', 2300);
         // 心跳间隔
         $gateway->pingInterval = 10;
         // 心跳数据
         $gateway->pingData = '{"type":"ping"}';
         // 服务注册地址
-        $gateway->registerAddress = '127.0.0.1:1236';
+        $gateway->registerAddress = $this->registerAddress;
 
         /*
         // 当客户端连接上来时，设置连接的onWebSocketConnect，即在websocket握手时的回调

app/controller/admin/member/MemberController.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace app\controller\admin\member;
+
+use app\BaseController;
+use app\service\CurdService;
+use think\response\Json;
+
+class MemberController extends BaseController
+{
+
+    public function page(): Json
+    {
+        $model = \app\entity\XmMember::withSearch([], [
+            'telephone'            => $this->request->get('telephone/s', ''),
+            'telephone_md5'        => $this->request->get('telephone_md5/s', ''),
+            'realname'             => $this->request->get('realname/s', ''),
+            'register_channel_id ' => $this->request->get('register_channel_id/d', 0),
+        ]);
+
+        $paginate = CurdService::getPaginate($this->request, $model);
+
+        return $this->writeSuccess('success', $paginate);
+    }
+}

app/controller/h5/H5Controller.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace app\controller;
+
+use app\BaseController;
+
+class H5Controller extends BaseController
+{
+    // sb.domain.com/channel
+    public function index()
+    {
+
+    }
+
+    public function info()
+    {
+
+    }
+}

app/entity/XmMember.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace app\entity;
+
+use think\Entity;
+
+/**
+ * 小满会员实体
+ * @see \app\model\XmMember
+ */
+class XmMember extends Entity
+{
+
+}

app/entity/XmMemberProfile.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace app\entity;
+
+use think\Entity;
+
+/**
+ * 小满会员信息实体
+ * @see \app\model\XmMemberProfile
+ */
+class XmMemberProfile extends Entity
+{
+
+}

app/http/middleware/ContextMiddleware.php

@@ -2,14 +2,11 @@
 
 namespace app\http\middleware;
 
-use app\entity\SysRequestRecord;
 use Closure;
-use think\{exception\ValidateException, file\UploadedFile, middleware, Request, Response};
+use think\{middleware, Request, Response};
 
 class ContextMiddleware extends middleware
 {
-
-
     public function handle(Request $request, Closure $next): Response
     {
         /*
@@ -46,120 +43,4 @@ class ContextMiddleware extends middleware
 
         return $response;
     }
-
-    protected $noHttpLog = [
-        'GET@/adminapi/system/request-record'
-    ];
-
-    /**
-     * 结束
-     * @param Response $response
-     * @return void
-     */
-    public function end(Response $response): void
-    {
-        $request = $this->app->request;
-        $log = (array)$this->app->config->get('admin.httpLog');
-
-        $logOpen = $log['open'] ?? false;
-        if (!$logOpen || in_array($request->method() . '@' . $request->pathinfo(),$this->noHttpLog)) {
-            return;
-        }
-        $request_start_time = $request->time(true);
-        $request_end_time = microtime(true);
-        $running_time = ($request_end_time - $request_start_time) * 1000;
-
-        $openRecordStartTime = $log['open_start_time'] ?? 0;
-        $openRecordEndTime = $log['open_end_time'] ?? 0;
-        if ($openRecordStartTime && $openRecordEndTime) {
-            if ($request_end_time < $openRecordStartTime || $openRecordEndTime < $request_end_time) {
-                return;
-            }
-        }
-
-        $rules = array_merge([
-            'include_methods' => [],
-            'include_responses' => [],
-            'include_codes' => [],
-            'exclude_codes' => [],
-        ], $log['recordRules'] ?? []);
-
-        // 请求类型(GET/POST/PUT/DELETE)
-        $request_method = $request->method();
-        if (!in_array($request_method, $rules['include_methods'])) {
-            return;
-        }
-        // 返回类型(JSON/HTML/XML)
-        $response_type = get_class($response);
-        if (!in_array($response_type, $rules['include_responses'])) {
-            return;
-        }
-        // 返回状态码(Http Status Code)
-        $response_code = $response->getCode();
-        if (in_array($response_type, $rules['exclude_codes'])) {
-            return;
-        }
-        if (count($rules['include_codes']) > 0) {
-            if (!in_array($response_type, $rules['include_codes'])) {
-                return;
-            }
-        }
-        $request_start_time = explode('.', $request_start_time);
-        $request_end_time = explode('.', $request_end_time);
-        $request_date = date('Y-m-d H:i:s', $request_start_time[0]);
-        $response_data = $response->getContent();
-
-        // 限制response_data记录长度
-        $response_max = $log['response_max'] ?? 0;
-        if ($response_max) {
-            $response_data = mb_substr($response_data, 0, $response_max, 'utf-8');
-        }
-        $request_body = $request->param();
-
-        try {
-            // 对文件类型的数据做处理
-            $request_file = $request->file();
-            if ($request_file && count($request_file) > 0) {
-                /**
-                 * @var UploadedFile $file
-                 */
-                foreach ($request->file() as $key => $file) {
-                    $request_body[$key] = [
-                        'md5' => $file->md5(),
-                        'name' => $file->getOriginalName(),
-                        'size' => $file->getSize(),
-                    ];
-                }
-            }
-            $route = $request->rule()->getRoute();
-
-            $client = \app\Request::getClient();
-            (new SysRequestRecord)->save([
-                'context_id' => $request->contextId,
-                'client_id'  => $client->id,
-                'client_name'  => $client->name,
-                'client_version'  => $client->version,
-                'request_date' => $request_date,
-                'request_time' => $request_date . '.' . ($request_start_time[1] ?? 0),
-                'request_method' => $request_method,
-                'request_end_time' => date('Y-m-d H:i:s', $request_end_time[0]) . '.' . ($request_end_time[1] ?? 0),
-                'request_headers' => json_encode($request->header(), JSON_UNESCAPED_UNICODE),
-                'request_body' => json_encode($request_body, JSON_UNESCAPED_UNICODE),
-                'request_path' => $request->url(),
-                'request_domain' => $request->domain(),
-                'response_type' => $response_type,
-                'response_code' => $response_code,
-                'response_data' => $response_data,
-                'running_time' => (int)$running_time,
-                'running_memory_limit' => ini_get('memory_limit'),
-                'running_memory_usage' => memory_get_peak_usage(),
-                'request_ip' => $request->ip(),
-                'rule_name' => $request->rule()->getName(),
-                'rule_route' => is_array($route) ? implode('@', $route) : @json_encode($route),
-            ]);
-        } catch (\Throwable $e) {
-            $this->app->log->error("[ContextMiddleware::end] 日志写入失败->{$e->getMessage()}");
-        }
-    }
-
 }

app/http/middleware/H5Middleware.php

@@ -0,0 +1 @@
+<?php

app/http/middleware/HttpLogMiddleware.php

@@ -0,0 +1,137 @@
+<?php
+
+namespace app\http\middleware;
+
+use app\entity\SysRequestRecord;
+use Closure;
+use think\{file\UploadedFile, middleware, Request, Response};
+
+class HttpLogMiddleware extends middleware
+{
+    protected $noHttpLog = [
+        'GET@/adminapi/system/request-record'
+    ];
+
+    public function handle(Request $request, Closure $next): Response
+    {
+        $response = $next($request);
+        
+        // 记录HTTP日志
+        $this->recordHttpLog($request, $response);
+        
+        return $response;
+    }
+
+    /**
+     * 记录HTTP请求日志
+     * @param Request $request
+     * @param Response $response
+     * @return void
+     */
+    protected function recordHttpLog(Request $request, Response $response): void
+    {
+        $log = (array)$this->app->config->get('admin.httpLog');
+
+        $logOpen = $log['open'] ?? false;
+        if (!$logOpen || in_array($request->method() . '@' . $request->pathinfo(), $this->noHttpLog)) {
+            return;
+        }
+        
+        $request_start_time = $request->time(true);
+        $request_end_time = microtime(true);
+        $running_time = ($request_end_time - $request_start_time) * 1000;
+
+        $openRecordStartTime = $log['open_start_time'] ?? 0;
+        $openRecordEndTime = $log['open_end_time'] ?? 0;
+        if ($openRecordStartTime && $openRecordEndTime) {
+            if ($request_end_time < $openRecordStartTime || $openRecordEndTime < $request_end_time) {
+                return;
+            }
+        }
+
+        $rules = array_merge([
+            'include_methods' => [],
+            'include_responses' => [],
+            'include_codes' => [],
+            'exclude_codes' => [],
+        ], $log['recordRules'] ?? []);
+
+        // 请求类型(GET/POST/PUT/DELETE)
+        $request_method = $request->method();
+        if (!in_array($request_method, $rules['include_methods'])) {
+            return;
+        }
+        // 返回类型(JSON/HTML/XML)
+        $response_type = get_class($response);
+        if (!in_array($response_type, $rules['include_responses'])) {
+            return;
+        }
+        // 返回状态码(Http Status Code)
+        $response_code = $response->getCode();
+        if (in_array($response_type, $rules['exclude_codes'])) {
+            return;
+        }
+        if (count($rules['include_codes']) > 0) {
+            if (!in_array($response_type, $rules['include_codes'])) {
+                return;
+            }
+        }
+        
+        $request_start_time = explode('.', $request_start_time);
+        $request_end_time = explode('.', $request_end_time);
+        $request_date = date('Y-m-d H:i:s', $request_start_time[0]);
+        $response_data = $response->getContent();
+
+        // 限制response_data记录长度
+        $response_max = $log['response_max'] ?? 0;
+        if ($response_max) {
+            $response_data = mb_substr($response_data, 0, $response_max, 'utf-8');
+        }
+        $request_body = $request->param();
+
+        try {
+            // 对文件类型的数据做处理
+            $request_file = $request->file();
+            if ($request_file && count($request_file) > 0) {
+                /**
+                 * @var UploadedFile $file
+                 */
+                foreach ($request->file() as $key => $file) {
+                    $request_body[$key] = [
+                        'md5' => $file->md5(),
+                        'name' => $file->getOriginalName(),
+                        'size' => $file->getSize(),
+                    ];
+                }
+            }
+            $route = $request->rule()->getRoute();
+
+            $client = \app\Request::getClient();
+            (new SysRequestRecord)->save([
+                'context_id' => $request->contextId ?? '',
+                'client_id'  => $client->id,
+                'client_name'  => $client->name,
+                'client_version'  => $client->version,
+                'request_date' => $request_date,
+                'request_time' => $request_date . '.' . ($request_start_time[1] ?? 0),
+                'request_method' => $request_method,
+                'request_end_time' => date('Y-m-d H:i:s', $request_end_time[0]) . '.' . ($request_end_time[1] ?? 0),
+                'request_headers' => json_encode($request->header(), JSON_UNESCAPED_UNICODE),
+                'request_body' => json_encode($request_body, JSON_UNESCAPED_UNICODE),
+                'request_path' => $request->url(),
+                'request_domain' => $request->domain(),
+                'response_type' => $response_type,
+                'response_code' => $response_code,
+                'response_data' => $response_data,
+                'running_time' => (int)$running_time,
+                'running_memory_limit' => ini_get('memory_limit'),
+                'running_memory_usage' => memory_get_peak_usage(),
+                'request_ip' => $request->ip(),
+                'rule_name' => $request->rule()->getName(),
+                'rule_route' => is_array($route) ? implode('@', $route) : @json_encode($route),
+            ]);
+        } catch (\Throwable $e) {
+            $this->app->log->error("[HttpLogMiddleware::recordHttpLog] 日志写入失败->{$e->getMessage()}");
+        }
+    }
+}

app/model/XmMember.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace app\model;
+
+use app\BaseModel;
+use think\model\concern\SoftDelete;
+
+class XmMember extends BaseModel
+{
+    use SoftDelete;
+
+    protected $name = "xm_member";
+    protected $pk = "member_id";
+}

app/model/XmMemberProfile.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace app\model;
+
+use app\BaseModel;
+use think\model\concern\SoftDelete;
+
+class XmMemberProfile extends BaseModel
+{
+    use SoftDelete;
+
+    protected $name = "xm_member_profile";
+    protected $pk = "member_id";
+}

config/admin.php

@@ -18,5 +18,10 @@ return [
     'cls' => [
         'secretId' => 'AKIDz6HXnBZ0Pm5UtEXlv5BThrwvsmcM0a5e',
         'secretKey' => 'eGoIj6QiYSLBFNTsIdv8GxZOWaWWcn8R'
+    ],
+    'gateway' => [
+        'websocketAddress' =>  env('GATEWAY_WEBSOCKET_ADDRESS','0.0.0.0:19981'),
+        'registerAddress'=> env('GATEWAY_REGISTER_ADDRESS', '127.0.0.1:1236'),
+        'startPort'      => (int)env('GATEWAY_START_PORT', 2300)
     ]
 ];

route/api.php

@@ -6,6 +6,7 @@ use app\entity\SysOrganization;
 use app\http\middleware\ClientMiddleware;
 use app\model\SysDictionary;
 use app\controller\admin\{auth,
+    member\MemberController,
     system\CacheController,
     system\CacheDataController,
     system\ConfigController,
@@ -165,6 +166,11 @@ Route::group("adminapi", function () {
 
         })->name('系统接口');
 
+
+
+        Route::group('member', function (){
+            Route::get('member/page', [MemberController::class, 'page'])->name("member.pageMembers");
+        })->name('会员接口');;
     })->middleware([AuthMiddleware::class]);
 
 })->layer('admin')

route/h5.php

@@ -0,0 +1 @@
+<?php

z_ele/.env.development

@@ -1,6 +1,7 @@
 # 开发环境接口地址
 #VITE_API_URL=https://v2.eleadmin.com/api
-VITE_API_URL=http://a.tcp.run/adminapi
+#VITE_API_URL=http://a.tcp.run/adminapi
+VITE_API_URL=http://xm.tcp.run/adminapi
 VITE_LICENSE=dk9mcwJyetRWQlxWRiojIiwiIzVHbQ5Wa6ICdjVmaiV3ciQWaiwCN3YDNW9ERolFcMJiOpNnclZnIsIyViQjLxIiOi42bQf0NW==
 # 禁请求加密
 VITE_SKIP_REQUEST_ENCRYPTION=0

z_ele/src/api/member/member/index.ts

@@ -0,0 +1,103 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Member, MemberParam } from './model';
+
+/**
+ * 分页查询会员
+ */
+export async function pageMembers(params: MemberParam) {
+  const res = await request.get<ApiResult<PageResult<Member>>>(
+    '/member/member/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+
+/**
+ * 查询用户列表
+ */
+export async function listUsers(params?: MemberParam) {
+  const res = await request.get<ApiResult<Member[]>>('/system/user', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询用户
+ */
+export async function getUser(id: number) {
+  const res = await request.get<ApiResult<Member>>('/system/user/' + id);
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加用户
+ */
+export async function addUser(data: Member) {
+  const res = await request.post<ApiResult<unknown>>('/system/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户
+ */
+export async function updateUser(data: Member) {
+  const res = await request.put<ApiResult<unknown>>('/system/user', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除用户
+ */
+export async function removeUser(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>('/system/user/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除用户
+ */
+export async function removeUsers(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>('/system/user/batch', {
+    data
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户状态
+ */
+export async function updateUserStatus(userId?: number, status?: number) {
+  const res = await request.put<ApiResult<unknown>>('/system/user/status', {
+    userId,
+    status
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

z_ele/src/api/member/member/model/index.ts

@@ -0,0 +1,10 @@
+import type { PageParam } from '@/api';
+/**
+ * 会员
+ */
+export interface Member {}
+
+/**
+ * 会员搜索条件
+ */
+export interface MemberParam extends PageParam {}

z_ele/src/views/member/user/components/member-edit.vue

@@ -0,0 +1,147 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    :width="460"
+    v-model="visible"
+    :title="isUpdate ? '修改角色' : '添加角色'"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      @submit.prevent=""
+    >
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.roleName"
+          placeholder="请输入角色名称"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识" prop="roleCode">
+        <el-input
+          clearable
+          :maxlength="20"
+          v-model="form.roleCode"
+          placeholder="请输入角色标识"
+        />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :rows="4"
+          type="textarea"
+          v-model="form.comments"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import { useFormData } from '@/utils/use-form-data';
+  import { addRole, updateRole } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const props = defineProps<{
+    /** 修改回显的数据 */
+    data?: Role | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+
+  /** 是否是修改 */
+  const isUpdate = ref(false);
+
+  /** 提交状态 */
+  const loading = ref(false);
+
+  /** 表单实例 */
+  const formRef = ref<FormInstance | null>(null);
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields] = useFormData<Role>({
+    roleId: void 0,
+    roleName: '',
+    roleCode: '',
+    comments: ''
+  });
+
+  /** 表单验证规则 */
+  const rules = reactive<FormRules>({
+    roleName: [
+      {
+        required: true,
+        message: '请输入角色名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    roleCode: [
+      {
+        required: true,
+        message: '请输入角色标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /** 保存编辑 */
+  const save = () => {
+    formRef.value?.validate?.((valid) => {
+      if (!valid) {
+        return;
+      }
+      loading.value = true;
+      const saveOrUpdate = isUpdate.value ? updateRole : addRole;
+      saveOrUpdate(form)
+        .then((msg) => {
+          loading.value = false;
+          EleMessage.success({ message: msg, plain: true });
+          handleCancel();
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          EleMessage.error({ message: e.message, plain: true });
+        });
+    });
+  };
+
+  /** 监听弹窗打开 */
+  watch(visible, () => {
+    if (visible.value) {
+      if (props.data) {
+        assignFields(props.data);
+        isUpdate.value = true;
+      } else {
+        resetFields();
+        isUpdate.value = false;
+      }
+    }
+  });
+</script>

z_ele/src/views/member/user/components/member-search.vue

@@ -0,0 +1,64 @@
+<!-- 搜索表单 -->
+<template>
+  <ele-card :body-style="{ paddingBottom: '2px' }">
+    <el-form
+      label-width="72px"
+      @keyup.enter.prevent="search"
+      @submit.prevent=""
+    >
+      <el-row :gutter="8">
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="角色名称">
+            <el-input
+              clearable
+              v-model.trim="form.roleName"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="8" :sm="12" :xs="24">
+          <el-form-item label="角色标识">
+            <el-input
+              clearable
+              v-model.trim="form.roleCode"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12" :md="8" :sm="24" :xs="24">
+          <el-form-item label-width="16px">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button @click="reset">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </ele-card>
+</template>
+
+<script lang="ts" setup>
+  import { useFormData } from '@/utils/use-form-data';
+  import type { RoleParam } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'search', where?: RoleParam): void;
+  }>();
+
+  /** 表单数据 */
+  const [form, resetFields] = useFormData<RoleParam>({
+    roleName: '',
+    roleCode: '',
+    comments: ''
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  /**  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>

z_ele/src/views/member/user/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <ele-page>
+    <!-- 搜索表单 -->
+    <member-search @search="reload" />
+    <ele-card :body-style="{ paddingTop: '8px' }">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="roleId"
+        :columns="columns"
+        :datasource="datasource"
+        :show-overflow-tooltip="true"
+        v-model:selections="selections"
+        :highlight-current-row="true"
+        cache-key="systemRoleTable"
+      >
+        <template #toolbar> </template>
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click="openEdit(row)">
+            详情
+          </el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" underline="never" @click="remove(row)">
+            注销
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </ele-card>
+    <!-- 编辑弹窗 -->
+    <member-edit v-model="showEdit" :data="current" @done="reload" />
+  </ele-page>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMessageBox } from 'element-plus';
+  import { EleMessage } from 'ele-admin-plus';
+  import type { EleProTable } from 'ele-admin-plus';
+  import type {
+    DatasourceFunction,
+    Columns
+  } from 'ele-admin-plus/es/ele-pro-table/types';
+  import MemberSearch from './components/member-search.vue';
+  import MemberEdit from './components/member-edit.vue';
+  import { removeRoles } from '@/api/system/role';
+  import type { Role, RoleParam } from '@/api/system/role/model';
+  import { pageMembers } from '@/api/member/member';
+
+  defineOptions({ name: 'SystemRole' });
+
+  /** 表格实例 */
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center' /* ,
+      fixed: 'left' */
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'roleName',
+      label: '角色名称',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'roleCode',
+      label: '角色标识',
+      sortable: 'custom',
+      minWidth: 120
+    },
+    {
+      prop: 'comments',
+      label: '备注',
+      sortable: 'custom',
+      minWidth: 140
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      sortable: 'custom',
+      width: 180,
+      align: 'center'
+    },
+    {
+      columnKey: 'action',
+      label: '操作',
+      width: 200,
+      align: 'center' /* ,
+      fixed: 'right' */,
+      slot: 'action',
+      hideInPrint: true,
+      hideInExport: true
+    }
+  ]);
+
+  /** 表格选中数据 */
+  const selections = ref<Role[]>([]);
+
+  /** 当前编辑数据 */
+  const current = ref<Role | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showEdit = ref(false);
+
+  /** 是否显示权限分配弹窗 */
+  const showAuth = ref(false);
+
+  /** 表格数据源 */
+  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
+    return pageMembers({ ...where, ...orders, ...pages });
+  };
+
+  /** 搜索 */
+  const reload = (where?: RoleParam) => {
+    selections.value = [];
+    tableRef.value?.reload?.({ page: 1, where });
+  };
+
+  /** 打开编辑弹窗 */
+  const openEdit = (row?: Role) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /** 打开权限分配弹窗 */
+  const openAuth = (row?: Role) => {
+    current.value = row ?? null;
+    showAuth.value = true;
+  };
+
+  /** 删除单个 */
+  const remove = (row?: Role) => {
+    const rows = row == null ? selections.value : [row];
+    if (!rows.length) {
+      EleMessage.error({ message: '请至少选择一条数据', plain: true });
+      return;
+    }
+    ElMessageBox.confirm(
+      '确定要删除“' + rows.map((d) => d.roleName).join(', ') + '”吗?',
+      '系统提示',
+      { type: 'warning', draggable: true }
+    )
+      .then(() => {
+        const loading = EleMessage.loading({
+          message: '请求中..',
+          plain: true
+        });
+        removeRoles(rows.map((d) => d.roleId))
+          .then((msg) => {
+            loading.close();
+            EleMessage.success({ message: msg, plain: true });
+            reload();
+          })
+          .catch((e) => {
+            loading.close();
+            EleMessage.error({ message: e.message, plain: true });
+          });
+      })
+      .catch(() => {});
+  };
+</script>