物料新增+用户修改

src/apis/material/materialInfo.ts

@@ -0,0 +1,52 @@
+import http from '@/utils/http'
+
+const BASE_URL = '/admin/meterialInfo'
+
+export interface MeterialInfoResp {
+  materialName: string
+  encoding: string
+  unitWeight: string
+  maxWeight: string
+  photoUrl: string
+  createUser: string
+  createTime: string
+  createUserString: string
+  updateUserString: string
+  disabled: boolean
+}
+export interface MaterialInfoQuery {
+  materialName: string | undefined
+  encoding: string | undefined
+  sort: Array<string>
+}
+export interface MaterialInfoPageQuery extends MaterialInfoQuery, PageQuery {}
+
+/** @desc 查询物料信息列表 */
+export function listMaterialInfo(query: MaterialInfoPageQuery) {
+  return http.get<PageRes<MeterialInfoResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询物料信息详情 */
+export function getMaterialInfo(id: string) {
+  return http.get<MeterialInfoDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增物料信息 */
+export function addMaterialInfo(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改物料信息 */
+export function updateMaterialInfo(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除物料信息 */
+export function deleteMaterialInfo(id: string) {
+  return http.del(`${BASE_URL}/${id}`)
+}
+
+/** @desc 导出物料信息 */
+export function exportMaterialInfo(query: MeterialInfoQuery) {
+  return http.download(`${BASE_URL}/export`, query)
+}

src/views/material/MaterialInfoAddModal.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 600 ? 600 : '100%'"
+    draggable
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { addMaterialInfo, getMaterialInfo, updateMaterialInfo } from '@/apis/material/materialInfo'
+import { type ColumnItem, GiForm } from '@/components/GiForm'
+import { useResetReactive } from '@/hooks'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const dataId = ref('')
+const visible = ref(false)
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改物料管理' : '新增物料管理'))
+const formRef = ref<InstanceType<typeof GiForm>>()
+
+const [form, resetForm] = useResetReactive({
+  // todo 待补充
+})
+
+const columns: ColumnItem[] = reactive([
+  {
+    label: '物料名称',
+    field: 'materialName',
+    type: 'input',
+    span: 24,
+    required: true,
+  },
+  {
+    label: '物料编码',
+    field: 'encoding',
+    type: 'input',
+    span: 24,
+    required: true,
+  },
+  {
+    label: '物料单位重量，单位(g)',
+    field: 'unitWeight',
+    type: 'input-number',
+    span: 24,
+  },
+  {
+    label: '物料单次可称量最大重量(kg)',
+    field: 'maxWeight',
+    type: 'input-number',
+    span: 24,
+  },
+  {
+    label: '物料照片上传',
+    field: 'photoUrl',
+    type: 'image',
+    savePath: 'material/',
+    span: 24,
+  },
+])
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    if (isUpdate.value) {
+      await updateMaterialInfo(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addMaterialInfo(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 新增
+const onAdd = async () => {
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getMaterialInfo(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
+defineExpose({ onAdd, onUpdate })
+</script>
+
+<style scoped lang="scss"></style>

src/views/material/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="gi_table_page">
+    <GiTable
+      title="物料管理管理"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
+        <a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['admin:materialInfo:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+        <a-button v-permission="['admin:materialInfo:export']" @click="onExport">
+          <template #icon><icon-download /></template>
+          <template #default>导出</template>
+        </a-button>
+      </template>
+      <!-- 物料照片插槽：核心新增部分 -->
+      <template #photoUrl="{ record }">
+        <div class="photo-container">
+          <img
+            v-if="record.photoUrl"
+            :src="record.photoUrl"
+            alt="物料照片"
+            class="material-photo"
+            @error="handleImgError($event)"
+          />
+          <span v-else class="no-photo">暂无照片</span>
+        </div>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['admin:materialInfo:delete']"
+            status="danger"
+            :disabled="record.disabled"
+            :title="record.disabled ? '不可删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <MaterialInfoAddModal ref="MaterialInfoAddModalRef" @save-success="search" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
+import { type MaterialInfoQuery, type MaterialInfoResp, deleteMaterialInfo, exportMaterialInfo, listMaterialInfo } from '@/apis/material/materialInfo'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useDownload, useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+defineOptions({ name: 'MaterialInfo' })
+
+const queryForm = reactive<MaterialInfoQuery>({
+  materialName: undefined,
+  encoding: undefined,
+  sort: ['id,desc'],
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
+const columns = ref<TableInstanceColumns[]>([
+  { title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
+  { title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
+  { title: '物料单位重量(g)', dataIndex: 'unitWeight', slotName: 'unitWeight' },
+  { title: '物料单次可称量最大重量(kg)', dataIndex: 'maxWeight', slotName: 'maxWeight' },
+  // 可给photoUrl列添加宽度，优化显示
+  { title: '物料照片', dataIndex: 'photoUrl', slotName: 'photoUrl', width: 120, align: 'center' },
+  { title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
+  { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 160,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['admin:materialInfo:detail', 'admin:materialInfo:update', 'admin:materialInfo:delete']),
+  },
+])
+
+// 重置
+const reset = () => {
+  queryForm.materialName = undefined
+  queryForm.encoding = undefined
+  search()
+}
+
+// 删除
+const onDelete = (record: MaterialInfoResp) => {
+  return handleDelete(() => deleteMaterialInfo(record.id), {
+    content: `是否确定删除该条数据？`,
+    showModal: true,
+  })
+}
+
+// 导出
+const onExport = () => {
+  useDownload(() => exportMaterialInfo(queryForm))
+}
+
+// 图片加载失败处理函数（新增）
+const handleImgError = (e: Event) => {
+  // 替换为你的默认图片地址（建议放在/static目录下）
+  const target = e.target as HTMLImageElement
+  target.src = '/static/images/default-material.png'
+}
+
+const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
+// 新增
+const onAdd = () => {
+  MaterialInfoAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: MaterialInfoResp) => {
+  MaterialInfoAddModalRef.value?.onUpdate(record.id)
+}
+
+// 详情（补充定义，避免报错）
+const onDetail = (record: MaterialInfoResp) => {
+  // 可补充详情逻辑，如打开详情弹窗
+  console.log('物料详情', record)
+}
+</script>
+
+<style scoped lang="scss">
+// 物料照片样式（新增）
+.photo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+}
+
+.material-photo {
+  width: 80px;
+  height: 80px;
+  object-fit: cover; // 保持图片比例，避免拉伸
+  border-radius: 4px;
+}
+
+.no-photo {
+  color: #999;
+  font-size: 12px;
+}
+</style>

src/views/system/user/UserAddDrawer.vue

@@ -53,16 +53,6 @@ const columns: ColumnItem[] = reactive([
       maxLength: 64,
     },
   },
-  {
-    label: '昵称',
-    field: 'nickname',
-    type: 'input',
-    span: 24,
-    required: true,
-    props: {
-      maxLength: 30,
-    },
-  },
   {
     label: '密码',
     field: 'password',
@@ -85,13 +75,10 @@ const columns: ColumnItem[] = reactive([
     },
   },
   {
-    label: '邮箱',
+    label: '卡号',
-    field: 'email',
+    field: 'cardNo',
     type: 'input',
     span: 24,
-    props: {
-      maxLength: 255,
-    },
   },
   {
     label: '性别',
@@ -102,25 +89,6 @@ const columns: ColumnItem[] = reactive([
       options: GenderList,
     },
   },
-  {
-    label: '所属部门',
-    field: 'deptId',
-    type: 'tree-select',
-    span: 24,
-    required: true,
-    props: {
-      data: deptList,
-      allowClear: true,
-      allowSearch: true,
-      fallbackOption: false,
-      filterTreeNode(searchKey: string, nodeData: TreeNodeData) {
-        if (nodeData.title) {
-          return nodeData.title.toLowerCase().includes(searchKey.toLowerCase())
-        }
-        return false
-      },
-    },
-  },
   {
     label: '角色',
     field: 'roleIds',

src/views/system/user/index.vue

@@ -1,99 +1,99 @@
 <template>
-  <div class="gi_page">
+  <div class="gi_table_page">
-    <SplitPanel size="20%">
+    <GiTable
-      <template #left>
+      title="用户管理"
-        <DeptTree @node-click="handleSelectDept" />
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['nickname']"
+      @refresh="search"
+    >
+      <template #top>
+        <GiForm
+          v-model="queryForm"
+          search :columns="queryFormColumns"
+          size="medium"
+          @search="search"
+          @reset="reset"
+        ></GiForm>
       </template>
-      <template #main>
+      <template #toolbar-left>
-        <GiTable
+        <a-button v-permission="['system:user:add']" type="primary" style="margin-right: 8px;" @click="onAdd">
-          row-key="id"
+          <template #icon><icon-plus /></template>
-          :data="dataList"
+          <template #default>新增</template>
-          :columns="columns"
+        </a-button>
-          :loading="loading"
+        <a-button v-permission="['system:user:import']" style="margin-right: 8px;" @click="onImport">
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+          <template #icon><icon-upload /></template>
-          :pagination="pagination"
+          <template #default>导入</template>
-          :disabled-tools="['size']"
+        </a-button>
-          :disabled-column-keys="['nickname']"
+        <a-button v-permission="['system:user:export']" @click="onExport">
-          @refresh="search"
+          <template #icon><icon-download /></template>
-        >
+          <template #default>导出</template>
-          <template #top>
+        </a-button>
-            <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
+      </template>
-          </template>
+      <template #toolbar-right>
-          <template #toolbar-left>
-            <a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
-              <template #icon><icon-plus /></template>
-              <template #default>新增</template>
-            </a-button>
-            <a-button v-permission="['system:user:import']" @click="onImport">
-              <template #icon><icon-upload /></template>
-              <template #default>导入</template>
-            </a-button>
-          </template>
-          <template #toolbar-right>
-            <a-button v-permission="['system:user:export']" @click="onExport">
-              <template #icon><icon-download /></template>
-              <template #default>导出</template>
-            </a-button>
-          </template>
-          <template #nickname="{ record }">
-            <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
-          </template>
-          <template #gender="{ record }">
-            <GiCellGender :gender="record.gender" />
-          </template>
-          <template #roleNames="{ record }">
-            <GiCellTags :data="record.roleNames" />
-          </template>
-          <template #status="{ record }">
-            <GiCellStatus :status="record.status" />
-          </template>
-          <template #isSystem="{ record }">
-            <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-            <a-tag v-else color="arcoblue" size="small">否</a-tag>
-          </template>
-          <template #action="{ record }">
-            <a-space>
-              <a-link v-permission="['system:user:detail']" title="详情" @click="onDetail(record)">详情</a-link>
-              <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
-              <a-link
-                v-permission="['system:user:delete']"
-                status="danger"
-                :disabled="record.isSystem"
-                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                @click="onDelete(record)"
-              >
-                删除
-              </a-link>
-              <a-dropdown>
-                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
-                  <template #icon>
-                    <icon-more :size="16" />
-                  </template>
-                </a-button>
-                <template #content>
-                  <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
-                  <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
-                </template>
-              </a-dropdown>
-            </a-space>
-          </template>
-        </GiTable>
       </template>
-    </SplitPanel>
 
+      <!-- 表格插槽内容 -->
+      <template #nickname="{ record }">
+        <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
+      </template>
+      <template #gender="{ record }">
+        <GiCellGender :gender="record.gender" />
+      </template>
+      <template #roleNames="{ record }">
+        <GiCellTags :data="record.roleNames" />
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #isSystem="{ record }">
+        <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+        <a-tag v-else color="arcoblue" size="small">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['system:user:delete']"
+            status="danger"
+            :disabled="record.isSystem"
+            :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
+              <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
+            </template>
+          </a-dropdown>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <!-- 弹窗/抽屉组件 -->
     <UserAddDrawer ref="UserAddDrawerRef" @save-success="search" />
     <UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
-    <UserDetailDrawer ref="UserDetailDrawerRef" />
     <UserResetPwdModal ref="UserResetPwdModalRef" />
     <UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" />
   </div>
 </template>
 
 <script setup lang="ts">
-import DeptTree from './dept/index.vue'
+import { onMounted } from 'vue'
 import UserAddDrawer from './UserAddDrawer.vue'
 import UserImportDrawer from './UserImportDrawer.vue'
-import UserDetailDrawer from './UserDetailDrawer.vue'
 import UserResetPwdModal from './UserResetPwdModal.vue'
 import UserUpdateRoleModal from './UserUpdateRoleModal.vue'
 import { type UserResp, deleteUser, exportUser, listUser } from '@/apis/system/user'
@@ -102,18 +102,22 @@ import { DisEnableStatusList } from '@/constant/common'
 import { useDownload, useResetReactive, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
-import type { ColumnItem } from '@/components/GiForm'
 
 defineOptions({ name: 'SystemUser' })
 
+// 查询表单
 const [queryForm, resetForm] = useResetReactive({
+  description: undefined,
+  status: undefined,
+  createTime: undefined,
   sort: ['t1.id,desc'],
 })
+
 const queryFormColumns: ColumnItem[] = reactive([
   {
     type: 'input',
     field: 'description',
-    span: { xs: 24, sm: 8, xxl: 8 },
+    span: { xs: 24, sm: 4, xxl: 3 },
     formItemProps: {
       hideLabel: true,
     },
@@ -125,7 +129,7 @@ const queryFormColumns: ColumnItem[] = reactive([
   {
     type: 'select',
     field: 'status',
-    span: { xs: 24, sm: 6, xxl: 8 },
+    span: { xs: 24, sm: 4, xxl: 4 },
     formItemProps: {
       hideLabel: true,
     },
@@ -137,13 +141,14 @@ const queryFormColumns: ColumnItem[] = reactive([
   {
     type: 'range-picker',
     field: 'createTime',
-    span: { xs: 24, sm: 10, xxl: 8 },
+    span: { xs: 24, sm: 8, xxl: 5 },
     formItemProps: {
       hideLabel: true,
     },
   },
 ])
 
+// 表格数据
 const {
   tableData: dataList,
   loading,
@@ -151,6 +156,8 @@ const {
   search,
   handleDelete,
 } = useTable((page) => listUser({ ...queryForm, ...page }), { immediate: false })
+
+// 表格列配置
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -159,22 +166,12 @@ const columns: TableInstanceColumns[] = [
     render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
     fixed: !isMobile() ? 'left' : undefined,
   },
-  {
+  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 100, ellipsis: true, tooltip: true },
-    title: '昵称',
+  { title:'卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
-    dataIndex: 'nickname',
-    slotName: 'nickname',
-    minWidth: 140,
-    ellipsis: true,
-    tooltip: true,
-    fixed: !isMobile() ? 'left' : undefined,
-  },
-  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 140, ellipsis: true, tooltip: true },
   { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
   { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
-  { title: '所属部门', dataIndex: 'deptName', minWidth: 180, ellipsis: true, tooltip: true },
   { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', minWidth: 165 },
   { title: '手机号', dataIndex: 'phone', minWidth: 170, ellipsis: true, tooltip: true },
-  { title: '邮箱', dataIndex: 'email', minWidth: 170, ellipsis: true, tooltip: true },
   { title: '系统内置', dataIndex: 'isSystem', slotName: 'isSystem', width: 100, align: 'center', show: false },
   { title: '描述', dataIndex: 'description', minWidth: 130, ellipsis: true, tooltip: true },
   { title: '创建人', dataIndex: 'createUserString', width: 140, ellipsis: true, tooltip: true, show: false },
@@ -198,13 +195,12 @@ const columns: TableInstanceColumns[] = [
   },
 ]
 
-// 重置
+// 方法定义
 const reset = () => {
   resetForm()
   search()
 }
 
-// 删除
 const onDelete = (record: UserResp) => {
   return handleDelete(() => deleteUser(record.id), {
     content: `是否确定删除用户「${record.nickname}(${record.username})」？`,
@@ -212,60 +208,69 @@ const onDelete = (record: UserResp) => {
   })
 }
 
-// 导出
 const onExport = () => {
   useDownload(() => exportUser(queryForm))
 }
 
-// 根据选中部门查询
-const handleSelectDept = (keys: Array<any>) => {
-  queryForm.deptId = keys.length === 1 ? keys[0] : undefined
-  search()
-}
-
 const UserImportDrawerRef = ref<InstanceType<typeof UserImportDrawer>>()
-// 导入
 const onImport = () => {
   UserImportDrawerRef.value?.onOpen()
 }
 
 const UserAddDrawerRef = ref<InstanceType<typeof UserAddDrawer>>()
-// 新增
 const onAdd = () => {
   UserAddDrawerRef.value?.onAdd()
 }
 
-// 修改
 const onUpdate = (record: UserResp) => {
   UserAddDrawerRef.value?.onUpdate(record.id)
 }
 
 const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
-// 详情
 const onDetail = (record: UserResp) => {
   UserDetailDrawerRef.value?.onOpen(record.id)
 }
 
 const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
-// 重置密码
 const onResetPwd = (record: UserResp) => {
   UserResetPwdModalRef.value?.onOpen(record.id)
 }
 
 const UserUpdateRoleModalRef = ref<InstanceType<typeof UserUpdateRoleModal>>()
-// 分配角色
 const onUpdateRole = (record: UserResp) => {
   UserUpdateRoleModalRef.value?.onOpen(record.id)
 }
+
+onMounted(() => {
+  search()
+})
 </script>
 
 <style scoped lang="scss">
-.page_header {
+.gi_table_page {
-  flex: 0 0 auto;
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.page_content {
+:deep(.gi-table) {
-  flex: 1;
+  background: #ffffff;
-  overflow: auto;
+}
+:deep(.arco-table-toolbar-left) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; // 允许在小屏幕换行
+  gap: 8px; // 统一间距
+
+  .arco-input-search,
+  .arco-select,
+  .arco-range-picker {
+  }
+}
+
+:deep(.arco-table-toolbar-right) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 </style>