diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
index 500faf9f..801330bd 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
@@ -50,6 +50,8 @@
       :cols="childColsHandler(child)"
       :level="props.level + 1"
       :grid-props="gridProps"
+      :row-key="props.rowKey"
+      :selection="props.selection"
     ></TreeGridRow>
   </template>
 </template>
@@ -82,6 +84,7 @@ const props = defineProps({
     },
   },
   rowKey: { type: String, default: 'rowKey_' },
+  selection: { type: String, default: 'single' },
 });
 
 const table = inject('table');
@@ -242,6 +245,10 @@ const childColsHandler = (child) => {
 };
 
 const click = (el, row, rowIndex) => {
-  selectedFun(!row.selected, row);
+  table.rows.forEach((item) => {
+    selectedFun(false, item);
+  });
+  table.selected.splice(0, table.selected.length);
+  selectedFun(true, row);
 };
 </script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index 57f5893b..862bbe17 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -13,9 +13,7 @@
       separator="cell"
       :rows="table.rows"
       :columns="extractTableColumns"
-      :rows-per-page-options="
-        table.pagination.rowsPerPage && pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []
-      "
+      :rows-per-page-options="pageable && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
       :loading="table.loading"
       :class="tableClassComputed"
       :table-style="tableHeightComputed"
@@ -82,7 +80,7 @@
             >
               <q-checkbox v-model="scope.selected" flat
             /></q-th>
-            <q-th v-else></q-th>
+            <q-th v-else-if="props.checkboxSelection"></q-th>
             <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
               {{ col.label }}
             </q-th>
@@ -91,7 +89,14 @@
       </template>
       <template #body="scope">
         <template v-if="tree">
-          <TreeGridRow :columns-map="tableColumnsMap" :row="scope.row" :cols="scope.cols" :grid-props="props" :row-key="rowKey_"></TreeGridRow>
+          <TreeGridRow
+            :columns-map="tableColumnsMap"
+            :row="scope.row"
+            :cols="scope.cols"
+            :grid-props="props"
+            :row-key="rowKey_"
+            :selection="selectionComputed"
+          ></TreeGridRow>
         </template>
         <q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
           <q-td v-if="props.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
@@ -142,7 +147,7 @@
         </q-inner-loading>
       </template>
       <template #pagination="scope">
-        <template v-if="table.pagination.rowsPerPage || table.pagination.rowsPerPage > 0">
+        <template v-if="pageable">
           <template v-if="table.refHeightWidth.middleWidth > 600">
             <q-pagination
               v-model="table.pagination.page"
@@ -213,6 +218,7 @@ const props = defineProps({
   title: { type: String, default: '' }, // 表格标题
   autoFetchData: { type: Boolean, default: true }, // 自动加载数据
   draggable: { type: Boolean, default: false }, // 开启行拖拽
+  pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
   fullScreenButton: { type: Boolean, default: true }, // 是否显示全屏按钮
   dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
   fetchDataUrl: { type: String, default: '' }, // 获取数据URL
@@ -645,11 +651,11 @@ const table = reactive({
       ellipses: false, // 页面可用时显示省略号
       maxPages: 5, // 一次显示的最大页面链接数；0表示无限
     },
-    sortBy: props.pagination.sortBy ? props.pagination.sortBy : '',
-    descending: props.pagination.descending ? props.pagination.descending : false,
-    reqPageStart: Object.hasOwnProperty.call(props.pagination, 'reqPageStart') ? props.pagination.reqPageStart : 1,
+    sortBy: props.pagination.sortBy || '',
+    descending: props.pagination.descending || false,
+    reqPageStart: props.pagination.reqPageStart || 0,
     page: 1,
-    rowsPerPage: props.pagination.rowsPerPage,
+    rowsPerPage: props.pagination.rowsPerPage || 10,
     rowsNumber: 10,
     rowsPerPageOptions: [5, 10, 20, 50, 100],
   },
@@ -911,19 +917,8 @@ const tableFullscreenFun = (value) => {
 };
 
 const rowClick = (evt: any, row: any, index: any) => {
-  if (selectionComputed.value === 'multiple') {
-    if (table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]) < 0) {
-      table.selected.push(row);
-    } else {
-      table.selected.splice(
-        table.selected.findIndex((item) => item[rowKey_] === row[rowKey_]),
-        1,
-      );
-    }
-  } else {
-    table.selected = [];
-    table.selected.push(row);
-  }
+  table.selected = [];
+  table.selected.push(row);
   if (props.onRowClick) {
     emit('rowClick', evt, row, index);
   }
@@ -1009,10 +1004,11 @@ const pageChange = (value) => {
 };
 const requestHandler = async (ops) => {
   const reqParams: any = {};
-  if (props.pagination.rowsPerPage) {
+  if (props.pageable) {
     reqParams.page = ops.pagination.page;
     reqParams.size = ops.pagination.rowsPerPage;
   }
+  reqParams.pageable = props.pageable;
   if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
     if (ops.pagination.descending) {
       reqParams.sortBy = '-' + ops.pagination.sortBy;
@@ -1043,11 +1039,10 @@ const onRequest = async (ops: any) => {
     if (Array.isArray(responseData)) {
       table.rows = responseData;
       table.pagination.rowsNumber = responseData.length;
-      table.pagination.rowsPerPage = 0;
     } else if (typeof responseData === 'object') {
-      if (props.pagination.rowsPerPage) {
+      if (props.pageable) {
         table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
-        table.pagination.rowsPerPage = responseData.size;
+        table.pagination.rowsPerPage = responseData.size || table.pagination.rowsPerPage;
       }
       table.pagination.rowsNumber = responseData.totalElements;
       table.pagination.sortBy = ops.pagination.sortBy;
diff --git a/io.sc.platform.core.frontend/src/views/likm/Grid.vue b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
index 8bbccc7d..f4fce02c 100644
--- a/io.sc.platform.core.frontend/src/views/likm/Grid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
@@ -4,10 +4,8 @@
       :title="testGrid.title"
       draggable
       :data-url="testGrid.tableDataUrl"
-      sort-no
+      :checkbox-selection="false"
       selection="multiple"
-      :query-criteria="testGrid.queryCriteria"
-      :checkbox-selection="true"
       :columns="testGrid.tableColumns"
       :toolbar-actions="testGrid.toolbar"
       :query-form-fields="testGrid.queryForm"
@@ -108,72 +106,74 @@ const testGrid = reactive({
     // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
   ],
   tableColumns: [
-    {
-      name: 'info',
-      label: '用户信息',
-      childrenColumns: [
-        { name: 'loginName', label: '登录名', align: 'right' },
-        { name: 'userName', label: '用户名' },
-      ],
-    },
-    {
-      name: 'lxxx',
-      label: '联系方式',
-      childrenColumns: [
-        { name: 'email', label: '邮箱地址' },
-        {
-          name: 'tx',
-          label: '通讯',
-          childrenColumns: [
-            { name: 'phone', label: '电话' },
-            { name: 'mobile', label: '手机号' },
-          ],
-        },
-        { name: 'qq', label: 'QQ' },
-      ],
-    },
-    { name: 'description', label: '描述', width: 400 },
-    {
-      name: 'enable',
-      label: '是否可用',
-      align: 'center',
-      format: (val, row) => {
-        return '1<br/>2';
-        // return {
-        //   _vuecomp_: true,
-        //   type: EnableIcon,
-        //   props: {
-        //     value: val,
-        //     showNoEnable: true,
-        //   },
-        // };
-        // return {
-        //   _vuecomp_: true,
-        //   type: 'q-chip',
-        //   props: {
-        //     label: val ? '是' : '否',
-        //     icon: val ? IconEnum.是状态 : IconEnum.否状态,
-        //     color: val ? 'green' : 'red',
-        //   },
-        // };
-        // return {
-        // componentsType: 'q-icon',
-        // attrs: {
-        //   name: val ? IconEnum.是状态 : IconEnum.否状态,
-        //   color: val ? 'green' : 'red',
-        //   size: 'sm',
-        // },
-        // };
-        // return {
-        //   _vuecomp_: true,
-        //   type: 'w-text',
-        //   props: {
-        //     name: 'aaa',
-        //     label: '请输入',
-        //   },
-        // };
-      },
-    },
+    // {
+    //   name: 'info',
+    //   label: '用户信息',
+    //   childrenColumns: [
+    //     { name: 'loginName', label: '登录名', align: 'right' },
+    //     { name: 'userName', label: '用户名' },
+    //   ],
+    // },
+    // {
+    //   name: 'lxxx',
+    //   label: '联系方式',
+    //   childrenColumns: [
+    //     { name: 'email', label: '邮箱地址' },
+    //     {
+    //       name: 'tx',
+    //       label: '通讯',
+    //       childrenColumns: [
+    //         { name: 'phone', label: '电话' },
+    //         { name: 'mobile', label: '手机号' },
+    //       ],
+    //     },
+    //     { name: 'qq', label: 'QQ' },
+    //   ],
+    // },
+    // { name: 'description', label: '描述', width: 400 },
+    // {
+    //   name: 'enable',
+    //   label: '是否可用',
+    //   align: 'center',
+    //   format: (val, row) => {
+    //     return '1<br/>2';
+    //     // return {
+    //     //   _vuecomp_: true,
+    //     //   type: EnableIcon,
+    //     //   props: {
+    //     //     value: val,
+    //     //     showNoEnable: true,
+    //     //   },
+    //     // };
+    //     // return {
+    //     //   _vuecomp_: true,
+    //     //   type: 'q-chip',
+    //     //   props: {
+    //     //     label: val ? '是' : '否',
+    //     //     icon: val ? IconEnum.是状态 : IconEnum.否状态,
+    //     //     color: val ? 'green' : 'red',
+    //     //   },
+    //     // };
+    //     // return {
+    //     // componentsType: 'q-icon',
+    //     // attrs: {
+    //     //   name: val ? IconEnum.是状态 : IconEnum.否状态,
+    //     //   color: val ? 'green' : 'red',
+    //     //   size: 'sm',
+    //     // },
+    //     // };
+    //     // return {
+    //     //   _vuecomp_: true,
+    //     //   type: 'w-text',
+    //     //   props: {
+    //     //     name: 'aaa',
+    //     //     label: '请输入',
+    //     //   },
+    //     // };
+    //   },
+    // },
+    { name: 'loginName', label: '登录名', align: 'right' },
+    { name: 'userName', label: '用户名' },
     { name: 'lastModifier', label: '最后修改人' },
     { name: 'lastModifyDate', label: '最后修改时间' },
   ],
diff --git a/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
index 578ed353..86b6d9e3 100644
--- a/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue
@@ -1,148 +1,452 @@
 <template>
-  <div>
-    <q-table title="Treats" table-style="height: 500px;" :rows="rows" :columns="columns" row-key="name" :flat="true" :selection="'single'" :separator="'cell'">
-      <template #body="bodyProps">
-        <TableRow :cols="bodyProps.cols" :data="bodyProps.row"></TableRow>
-      </template>
-    </q-table>
-  </div>
-</template>
+  <q-splitter :model-value="65" class="w-full h-full">
+    <template #before>
+      <div class="px-1">
+        <w-grid
+          ref="userGridRef"
+          :title="$t('system.user.grid.title')"
+          selection="multiple"
+          :query-form-fields="[
+            { name: 'loginName', label: $t('loginName'), type: 'text' },
+            { name: 'userName', label: $t('userName'), type: 'text' },
+            { name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() },
+            { name: 'dataComeFrom', label: $t('dataComeFrom'), type: 'select', options: Options.enum(DataComeFromEnum) },
+          ]"
+          :toolbar-configure="{ noIcon: false }"
+          :toolbar-actions="[
+            'query',
+            'refresh',
+            'separator',
+            'add',
+            'clone',
+            'edit',
+            'remove',
+            'separator',
+            {
+              name: 'setPassword',
+              label: t('system.user.action.setPassword'),
+              icon: 'bi-shield-check',
+              enableIf: function (selecteds) {
+                return selecteds.length > 0;
+              },
+              click: function (selecteds) {
+                setPasswordDialogRef.open('setPassword', selecteds);
+              },
+            },
+            {
+              name: 'setAllPassword',
+              label: t('system.user.action.setAllPassword'),
+              icon: 'bi-shield',
+              enableIf: function (selecteds) {
+                return true;
+              },
+              click: function () {
+                setPasswordDialogRef.open('setAllPassword');
+              },
+            },
+            'separator',
+            {
+              name: 'resetPassword',
+              label: t('system.user.action.resetPassword'),
+              icon: 'bi-shield-fill-check',
+              enableIf: function (selecteds) {
+                return selecteds.length > 0;
+              },
+              click: function (selecteds) {
+                DialogManager.confirm(t('system.user.confirm.resetPassword'), () => {
+                  const userIds = Tools.extractProperties(selecteds, 'id');
+                  axios.post(Environment.apiContextPath('/api/system/user/resetPassword'), userIds).then(() => {
+                    NotifyManager.info(t('operationSuccess'));
+                  });
+                });
+              },
+            },
+            {
+              name: 'resetAllPassword',
+              label: t('system.user.action.resetAllPassword'),
+              icon: 'bi-shield-fill',
+              enableIf: function (selecteds) {
+                return true;
+              },
+              click: function () {
+                DialogManager.confirm(t('system.user.confirm.resetAllPassword'), () => {
+                  axios.post(Environment.apiContextPath('/api/system/user/resetAllPassword')).then(() => {
+                    setPasswordDialogRef.value.hide();
+                    NotifyManager.info(t('operationSuccess'));
+                  });
+                });
+              },
+            },
+            'separator',
+            'view',
+            'export',
+          ]"
+          :data-url="Environment.apiContextPath('/api/system/user')"
+          row-key="id"
+          :columns="[
+            { name: 'loginName', label: t('loginName') },
+            { name: 'userName', label: t('userName') },
+            {
+              name: 'status',
+              label: t('status'),
+              format: (value, row) => {
+                return {
+                  componentType: UserStatusTag,
+                  attrs: row,
+                };
+              },
+            },
+            { name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
+            { name: 'lastModifier', label: t('lastModifier') },
+            { name: 'lastModifyDate', label: t('lastModifyDate'), format: Formater.dateOnly() },
+          ]"
+          :editor="{
+            dialog: {
+              width: '600px',
+              height: '610px',
+            },
+            form: {
+              colsNum: 4,
+              fields: [
+                { name: 'loginName', label: t('loginName'), type: 'text', required: true, colspan: 4 },
+                { name: 'userName', label: t('userName'), type: 'text', required: true, colspan: 4 },
+                { name: 'description', label: t('description'), type: 'textarea', rows: 1, colspan: 4 },
+                { name: 'password', label: t('password'), type: 'password', colspan: 4 },
+                {
+                  name: 'confirmPassword',
+                  label: t('confirmPassword'),
+                  type: 'password',
+                  colspan: 4,
+                  rules: [
+                    (value) => {
+                      return Tools.stringEquals(userGridRef.getAddEditFormRef().value.getData().password, value)
+                        ? true
+                        : t('passwordAndConfirmPasswordMustEqual');
+                    },
+                  ],
+                },
+                { name: 'mobile', label: t('mobile'), type: 'text', colsFirst: true, colspan: 4 },
+                { name: 'phone', label: t('phone'), type: 'text', colsFirst: true, colspan: 4 },
+                { name: 'email', label: t('email'), type: 'text', colsFirst: true, colspan: 4 },
+                { name: 'weixin', label: t('weixin'), type: 'text', colsFirst: true, colspan: 4 },
+                { name: 'qq', label: t('qq'), type: 'text', colsFirst: true, colspan: 4 },
+
+                { name: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true },
+                { name: 'accountExpired', label: t('accountExpired'), type: 'checkbox', defaultValue: false },
+                { name: 'accountLocked', label: t('accountLocked'), type: 'checkbox', defaultValue: false },
+                { name: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox', defaultValue: false },
+              ],
+            },
+          }"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'id', label: t('id') },
+                { name: 'loginName', label: t('loginName') },
+                { name: 'userName', label: t('userName') },
+                { name: 'description', label: t('description') },
+                { name: 'enable', label: t('enable'), format: Formater.yesNo() },
+                { name: 'accountExpired', label: t('accountExpired'), format: Formater.yesNo() },
+                { name: 'accountLocked', label: t('accountLocked'), format: Formater.yesNo() },
+                { name: 'credentialsExpired', label: t('credentialsExpired'), format: Formater.yesNo() },
+                { name: 'email', label: t('email') },
+                { name: 'phone', label: t('phone') },
+                { name: 'mobile', label: t('mobile') },
+                { name: 'weixin', label: t('weixin') },
+                { name: 'qq', label: t('qq') },
+                { name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
+                { name: 'creator', label: t('creator') },
+                { name: 'createDate', label: t('createDate') },
+                { name: 'lastModifier', label: t('lastModifier') },
+                { name: 'lastModifyDate', label: t('lastModifyDate') },
+                { name: 'corporationCode', label: t('corporationCode') },
+              ],
+            },
+          }"
+          @row-click="
+            (evt, row, index) => {
+              currentSelectedUserId = row.id;
+              if (roleGridRef) {
+                roleGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id);
+                roleGridRef.refresh();
+              }
+              if (orgTreeGridRef) {
+                orgTreeGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id);
+                orgTreeGridRef.refresh();
+              }
+            }
+          "
+        ></w-grid>
+      </div>
+    </template>
+    <template #after>
+      <div class="px-1">
+        <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
+          <q-tab name="role" icon="bi-people" :label="$t('role')" />
+          <q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
+        </q-tabs>
 
+        <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive class="">
+          <q-tab-panel name="role" class="p-0">
+            <w-grid
+              ref="roleGridRef"
+              :title="$t('system.role.grid.title')"
+              :data-url="Environment.apiContextPath('/api/system/role/queryRolesByUser') + currentSelectedUserId"
+              :auto-fetch-data="false"
+              selection="multiple"
+              :full-screen-button="false"
+              :toolbar-configure="{ noIcon: true }"
+              :toolbar-actions="[
+                'refresh',
+                'separator',
+                {
+                  name: 'addRole',
+                  label: $t('system.role.action.addRole'),
+                  enableIf: () => {
+                    if (userGridRef) {
+                      return userGridRef.getSelectedRows().length > 0;
+                    }
+                    return false;
+                  },
+                  click: () => {
+                    selectRoleDialog.open({ userId: userGridRef.getSelectedRows()[0].id, userGrid: userGridRef, roleGrid: roleGridRef });
+                  },
+                },
+                {
+                  name: 'addAllRole',
+                  label: t('system.role.action.addAllRole'),
+                  enableIf: () => {
+                    if (userGridRef) {
+                      return userGridRef.getSelectedRows().length > 0;
+                    }
+                    return false;
+                  },
+                  click: () => {
+                    const selectedUser = userGridRef.getSelectedRows()[0];
+                    DialogManager.confirm(
+                      t('system.role.action.addAllRole.confirm', { userLoginName: selectedUser.loginName, userName: selectedUser.userName }),
+                      () => {
+                        axios
+                          .post(Environment.apiContextPath('/api/system/user/addAllRoles'), {
+                            one: selectedUser.id,
+                            many: [],
+                          })
+                          .then((response) => {
+                            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
+                              roleGridRef.replaceRows(response.data.content);
+                            });
+                          });
+                      },
+                    );
+                  },
+                },
+                'separator',
+                {
+                  name: 'removeRole',
+                  label: t('system.role.action.removeRole'),
+                  enableIf: () => {
+                    if (userGridRef && roleGridRef) {
+                      return userGridRef.getSelectedRows().length > 0 && roleGridRef.getSelectedRows().length > 0;
+                    }
+                    return false;
+                  },
+                  click: (selecteds) => {
+                    const selectedUser = userGridRef.getSelectedRows()[0];
+                    const roleIds = Tools.extractProperties(selecteds, 'id');
+                    const messageKey = roleIds.length > 1 ? 'system.role.action.removeRole.confirms' : 'system.role.action.removeRole.confirm';
+                    DialogManager.confirm(
+                      t(messageKey, {
+                        userLoginName: selectedUser.loginName,
+                        userName: selectedUser.userName,
+                        roleCode: selecteds[0].code,
+                        roleName: selecteds[0].name,
+                        counter: selecteds.length,
+                      }),
+                      () => {
+                        axios
+                          .post(Environment.apiContextPath('/api/system/user/removeRoles'), {
+                            one: selectedUser.id,
+                            many: roleIds,
+                          })
+                          .then((response) => {
+                            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
+                              roleGridRef.replaceRows(response.data.content);
+                            });
+                          });
+                      },
+                    );
+                  },
+                },
+                {
+                  name: 'removeAllRole',
+                  label: $t('system.role.action.removeAllRole'),
+                  enableIf: () => {
+                    if (userGridRef && roleGridRef) {
+                      return userGridRef.getSelectedRows().length > 0 && roleGridRef.getRows().length > 0;
+                    }
+                    return false;
+                  },
+                  click: () => {
+                    const selectedUser = userGridRef.getSelectedRows()[0];
+                    DialogManager.confirm(
+                      t('system.role.action.removeAllRole.confirm', { userLoginName: selectedUser.loginName, userName: selectedUser.userName }),
+                      () => {
+                        axios
+                          .post(Environment.apiContextPath('/api/system/user/removeAllRoles'), {
+                            one: selectedUser.id,
+                            many: [],
+                          })
+                          .then((response) => {
+                            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + selectedUser.id).then((response) => {
+                              roleGridRef.replaceRows(response.data.content);
+                            });
+                          });
+                      },
+                    );
+                  },
+                },
+                'separator',
+                'view',
+              ]"
+              :columns="[
+                { width: 100, name: 'code', label: $t('code') },
+                { width: 100, name: 'name', label: $t('name') },
+                {
+                  width: 60,
+                  name: 'status',
+                  label: t('status'),
+                  format: (value, row) => {
+                    return {
+                      componentType: RoleStatusTag,
+                      attrs: row,
+                    };
+                  },
+                },
+              ]"
+              :viewer="{
+                panel: {
+                  columnNum: 1,
+                  fields: [
+                    { name: 'id', label: t('id') },
+                    { name: 'code', label: t('code') },
+                    { name: 'name', label: t('name') },
+                    { name: 'description', label: t('description') },
+                    { name: 'enable', label: t('enable'), format: Formater.yesNo() },
+                    { name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
+                    { name: 'creator', label: t('creator') },
+                    { name: 'createDate', label: t('createDate') },
+                    { name: 'lastModifier', label: t('lastModifier') },
+                    { name: 'lastModifyDate', label: t('lastModifyDate') },
+                    { name: 'corporationCode', label: t('corporationCode') },
+                  ],
+                },
+              }"
+            ></w-grid>
+          </q-tab-panel>
+          <q-tab-panel name="org" class="px-0">
+            <w-grid
+              ref="orgTreeGridRef"
+              :tree="true"
+              :title="$t('system.org.grid.title')"
+              :data-url="Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + currentSelectedUserId"
+              selection="multiple"
+              :full-screen-button="false"
+              :toolbar-configure="{ noIcon: true }"
+              :toolbar-actions="[
+                'refresh',
+                'separator',
+                {
+                  name: 'save',
+                  label: $t('save'),
+                  click: () => {},
+                },
+                'view',
+              ]"
+              :pagination="{
+                sortBy: 'name',
+                descending: false,
+                reqPageStart: 0,
+                rowsPerPage: 0,
+              }"
+              :columns="[
+                { width: 100, name: 'code', label: $t('code') },
+                { width: 100, name: 'name', label: $t('name') },
+                {
+                  width: 60,
+                  name: 'status',
+                  label: t('status'),
+                  format: (value, row) => {
+                    return {
+                      componentType: RoleStatusTag,
+                      attrs: row,
+                    };
+                  },
+                },
+              ]"
+              :viewer="{
+                panel: {
+                  columnNum: 1,
+                  fields: [
+                    { name: 'id', label: t('id') },
+                    { name: 'code', label: t('code') },
+                    { name: 'name', label: t('name') },
+                    { name: 'description', label: t('description') },
+                    { name: 'enable', label: t('enable'), format: Formater.yesNo() },
+                    { name: 'dataComeFrom', label: t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
+                    { name: 'creator', label: t('creator') },
+                    { name: 'createDate', label: t('createDate') },
+                    { name: 'lastModifier', label: t('lastModifier') },
+                    { name: 'lastModifyDate', label: t('lastModifyDate') },
+                    { name: 'corporationCode', label: t('corporationCode') },
+                  ],
+                },
+              }"
+            ></w-grid>
+          </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </template>
+    <SelectRoleDialog ref="selectRoleDialog"></SelectRoleDialog>
+    <SetPasswordDialog ref="setPasswordDialogRef"></SetPasswordDialog>
+  </q-splitter>
+</template>
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Environment, axios, EnumTools, NotifyManager, DialogManager, Formater, Options, Tools } from '@/platform';
+import SelectRoleDialog from './SelectRoleDialog.vue';
+import SetPasswordDialog from './SetPasswordDialog.vue';
+import UserStatusTag from './UserStatusTag.vue';
+import RoleStatusTag from './RoleStatusTag.vue';
+
+const { t } = useI18n();
+
+const userGridRef = ref();
+const roleGridRef = ref();
+const orgTreeGridRef = ref();
+
+const selectRoleDialog = ref();
+const selectedTabRef = ref('role');
+const setPasswordDialogRef = ref();
 
-const columns = [
-  {
-    name: 'name',
-    required: true,
-    label: 'Dessert (100g serving)',
-    align: 'left',
-    field: (row) => row.name,
-    format: (val) => `${val}`,
-    sortable: true,
-  },
-  { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
-  { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
-  { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
-  { name: 'protein', label: 'Protein (g)', field: 'protein' },
-  { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
-  { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
-  { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
-];
+const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom');
+const currentSelectedUserId = ref();
 
-const rows = ref([
-  {
-    name: 'Frozen Yogurt',
-    calories: 159,
-    fat: 6.0,
-    carbs: 24,
-    protein: 4.0,
-    sodium: 87,
-    calcium: '14%',
-    iron: '1%',
-    selected: true,
-    children: [
-      {
-        name: 'Ice cream sandwich3',
-        calories: 237,
-        fat: 9.0,
-        carbs: 37,
-        protein: 4.3,
-        sodium: 129,
-        calcium: '8%',
-        iron: '1%',
+const orgConfigure = {
+  actions: [
+    {
+      name: 'save',
+      label: '保存',
+      click: () => {
+        axios
+          .post(Environment.apiContextPath('/api/system/user/updateOrgs'), {
+            one: userGridRef.value.getSelectedRows()[0].id,
+            many: orgTreeGridRef.value.getTicked(),
+          })
+          .then((response) => {});
       },
-    ],
-  },
-  {
-    name: 'Ice cream sandwich',
-    calories: 237,
-    fat: 9.0,
-    carbs: 37,
-    protein: 4.3,
-    sodium: 129,
-    calcium: '8%',
-    iron: '1%',
-  },
-  {
-    name: 'Eclair',
-    calories: 262,
-    fat: 16.0,
-    carbs: 23,
-    protein: 6.0,
-    sodium: 337,
-    calcium: '6%',
-    iron: '7%',
-  },
-  {
-    name: 'Cupcake',
-    calories: 305,
-    fat: 3.7,
-    carbs: 67,
-    protein: 4.3,
-    sodium: 413,
-    calcium: '3%',
-    iron: '8%',
-  },
-  {
-    name: 'Gingerbread',
-    calories: 356,
-    fat: 16.0,
-    carbs: 49,
-    protein: 3.9,
-    sodium: 327,
-    calcium: '7%',
-    iron: '16%',
-  },
-  {
-    name: 'Jelly bean',
-    calories: 375,
-    fat: 0.0,
-    carbs: 94,
-    protein: 0.0,
-    sodium: 50,
-    calcium: '0%',
-    iron: '0%',
-  },
-  {
-    name: '<span style="color: red">This should be red.</span>',
-    calories: 392,
-    fat: 0.2,
-    carbs: 98,
-    protein: 0,
-    sodium: 38,
-    calcium: '0%',
-    iron: '2%',
-  },
-  {
-    name: 'Honeycomb',
-    calories: 408,
-    fat: 3.2,
-    carbs: 87,
-    protein: 6.5,
-    sodium: 562,
-    calcium: '0%',
-    iron: '45%',
-  },
-  {
-    name: 'Donut',
-    calories: 452,
-    fat: 25.0,
-    carbs: 51,
-    protein: 4.9,
-    sodium: 326,
-    calcium: '2%',
-    iron: '22%',
-  },
-  {
-    name: 'KitKat',
-    calories: 518,
-    fat: 26.0,
-    carbs: 65,
-    protein: 7,
-    sodium: 54,
-    calcium: '12%',
-    iron: '6%',
-  },
-]);
+    },
+  ],
+};
 </script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue b/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
index 547a1d78..9a40f933 100644
--- a/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
@@ -87,6 +87,7 @@ const testGrid = {
     {
       name: 'name',
       label: '菜单名称',
+      width: 200,
       format: (val, row) => {
         return t(val);
       },
@@ -94,6 +95,7 @@ const testGrid = {
     {
       name: 'icon',
       label: '图标',
+      width: 200,
       format: (val, row) => {
         return {
           componentType: 'q-icon',
@@ -104,8 +106,8 @@ const testGrid = {
         };
       },
     },
-    { name: 'type', label: '菜单类型' },
-    { name: 'order', label: '排序号' },
+    { name: 'type', label: '菜单类型', width: 200 },
+    { name: 'order', label: '排序号', width: 200 },
     {
       name: 'enable',
       label: '是否可用',