物料新增+用户修改

src/views/system/user/index.vue

@@ -1,99 +1,99 @@
 <template>
-  <div class="gi_page">
-    <SplitPanel size="20%">
-      <template #left>
-        <DeptTree @node-click="handleSelectDept" />
+  <div class="gi_table_page">
+    <GiTable
+      title="用户管理"
+      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>
-        <GiTable
-          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 #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 #toolbar-left>
+        <a-button v-permission="['system:user:add']" type="primary" style="margin-right: 8px;" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+        <a-button v-permission="['system:user:import']" style="margin-right: 8px;" @click="onImport">
+          <template #icon><icon-upload /></template>
+          <template #default>导入</template>
+        </a-button>
+        <a-button v-permission="['system:user:export']" @click="onExport">
+          <template #icon><icon-download /></template>
+          <template #default>导出</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
       </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: '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: 'username', slotName: 'username', minWidth: 100, ellipsis: true, tooltip: true },
+  { title:'卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
   { 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 {
-  flex: 0 0 auto;
+.gi_table_page {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.page_content {
-  flex: 1;
-  overflow: auto;
+:deep(.gi-table) {
+  background: #ffffff;
+}
+: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>