role

src/components/GlobalMenu.vue

@@ -72,6 +72,7 @@ const handleSelect = (index: string) => {
   background-color: #fff;
   height: 100%;
   border: none;
+  flex-shrink: 0;
 }
 .layout-menu .el-menu-item.is-active {
   background-color: var(--el-color-primary);

src/components/ProTable.vue

@@ -8,7 +8,6 @@ export default {
 import router from '@/router'
 import { ElMessage, ElMessageBox, type DialogProps } from 'element-plus'
 import type { AdvancedForm, BasicForm } from '@/types/form'
-import type { TableProps } from 'element-plus/es/components/table/src/table/defaults'
 
 interface CRUD {
   create: Function
@@ -30,11 +29,13 @@ interface Props {
   formConfig: BasicForm | AdvancedForm
   dialogConfig?: DialogProps
   tableConfig?: CustomTable
+  showToolbar?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   pageSize: 10,
-  selection: true
+  selection: true,
+  showToolbar: true
 })
 
 // ============== 查询部分开始 ===============
@@ -95,6 +96,10 @@ getTableData()
 const pageChange = () => {
   getTableData()
 }
+const refresh = () => {
+  curPage.value = 1
+  getTableData()
+}
 
 const multipleSelection = ref<any[]>([])
 const handleSelectionChange = (columns: any[]) => {
@@ -158,8 +163,10 @@ const dialogVisible = ref(false)
 // ============== 表单部分结束 ===============
 
 defineExpose({
+  handleCreate,
   handleDelete,
-  handleUpdate
+  handleUpdate,
+  refresh
 })
 </script>
 
@@ -179,7 +186,8 @@ defineExpose({
 
     <el-card class="h-full flex-grow-1" :body-style="{ height: '100%' }" shadow="never">
       <div class="flex flex-col h-full">
-        <div class="flex justify-between mb-20px">
+        <slot name="header"></slot>
+        <div class="flex justify-between mb-20px" v-if="showToolbar">
           <div>
             <el-button type="primary" icon="Plus" @click="handleCreate">新增</el-button>
             <el-button
@@ -191,6 +199,7 @@ defineExpose({
             >
               删除
             </el-button>
+            <slot name="toolbar"></slot>
           </div>
         </div>
         <el-table

src/components/org/OrgLayout.vue

@@ -14,8 +14,8 @@ const handleClick = (item: any) => {
 <template>
   <div class="flex" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
     <org-list @click="handleClick"></org-list>
-    <div class="flex-grow bg-white ml-[16px]">
-      <slot :orgId="userInfo.orgId"></slot>
+    <div class="flex-grow bg-white ml-[16px] h-full overflow-y-auto">
+      <slot></slot>
     </div>
   </div>
 </template>

src/components/org/OrgList.vue

@@ -31,18 +31,10 @@ watch(
     immediate: true
   }
 )
-// 更新
-// const updateOrgFunc = async row => {
-//   const res = await findOrg({ ID: row.ID })
-//   type.value = 'update'
-//   if (res.code === 0) {
-//     formData.value = res.data.reorg
-//     dialogFormVisible.value = true
-//   }
-// }
+
 // 删除
-const handleDel = async (row: any) => {
-  if (!curOrg.id) {
+const handleDel = async () => {
+  if (!curOrg.value.id) {
     return ElMessage({
       type: 'error',
       message: '请先选择需要删除的项'
@@ -53,21 +45,19 @@ const handleDel = async (row: any) => {
     cancelButtonText: '取消',
     type: 'warning'
   }).then(async () => {
-    const res = await deleteOrg({ ID: row.ID })
-    if (res) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
+    await deleteOrg({ id: curOrg.value.id })
+    curOrg.value = {}
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
 
-      fetchOrgList()
-    }
+    fetchOrgList()
   })
 }
 
 const handleOrgClick = (item: any) => {
   curOrg.value = item
-  formData.value = item
   emits('click', item)
 }
 

src/views/system/Dict.vue

@@ -41,8 +41,11 @@ const dictFormConfig = reactive<BasicForm>({
     }
   ]
 })
+
+const curRow = ref<any>(null)
 const handleRowClick = (row: any, column: any, event: any) => {
   console.log(row, column, event)
+  curRow.value = row
 }
 
 const dictItemFormConfig = reactive<BasicForm>({
@@ -83,12 +86,13 @@ const dictItemFormConfig = reactive<BasicForm>({
         <el-table-column prop="value" label="字典值"></el-table-column>
       </pro-table>
     </el-col>
-    <el-col :span="12">
-      <pro-table :crud="CRUD" :formConfig="dictItemFormConfig">
+    <el-col :span="12" class="bg-white">
+      <pro-table :crud="CRUD" :formConfig="dictItemFormConfig" v-if="curRow">
         <el-table-column prop="name" label="标签"></el-table-column>
         <el-table-column prop="phone" label="键值"></el-table-column>
         <el-table-column prop="gender" label="排序"></el-table-column>
       </pro-table>
+      <el-empty v-else description="请选择左侧数据后操作"></el-empty>
     </el-col>
   </el-row>
 </template>

src/views/system/Role.vue

@@ -57,6 +57,48 @@ const handleSearchUser = () => {
 const handleDelete = (id: any) => {
   console.log(id)
 }
+
+// 用户table
+const userTableData = ref([])
+const total = ref(0)
+const curPage = ref(1)
+const loading = ref(false)
+
+const getUserTableData = () => {
+  loading.value = true
+  // props.crud
+  //   ?.getList({
+  //     ...query.value,
+  //     pageSize: props.pageSize,
+  //     page: curPage.value
+  //   })
+  //   .then((res: any) => {
+  //     tableData.value = res.data
+  //     total.value = res.total
+  //   })
+  //   .finally(() => {
+  //     loading.value = false
+  //   })
+}
+getUserTableData()
+
+const pageChange = () => {
+  getUserTableData()
+}
+
+const dialogVisible = ref(false)
+const slectedUser = ref<any>([])
+const userList = ref<any>([])
+
+const handleAddUser = () => {
+  dialogVisible.value = true
+}
+const closeDialog = () => {
+  dialogVisible.value = false
+}
+const handleSubmit = () => {
+  //
+}
 </script>
 
 <template>
@@ -72,34 +114,53 @@ const handleDelete = (id: any) => {
       </pro-table>
     </el-col>
     <el-col :span="12" v-if="curRole">
-      <el-card>
+      <el-card class="h-full" :body-style="{ height: '100%' }">
         <template #header>
           <div class="flex justify-between">
             <div>分配用户</div>
             <el-button icon="back" link @click="curRole = null">关闭</el-button>
           </div>
         </template>
-        <div class="flex justify-between mb-sm">
-          <el-button type="primary">添加用户</el-button>
-          <div>
-            <el-input placeholder="姓名">
-              <template #append><el-button icon="Search" @click="handleSearchUser" /></template>
-            </el-input>
+        <div class="flex flex-col" style="height: calc(100% - 53px)">
+          <div class="flex justify-between mb-sm">
+            <el-button type="primary" @click="handleAddUser">添加用户</el-button>
+            <div>
+              <el-input placeholder="姓名">
+                <template #append><el-button icon="Search" @click="handleSearchUser" /></template>
+              </el-input>
+            </div>
+          </div>
+          <el-table class="flex-grow-1 h-full" border :data="userTableData">
+            <el-table-column prop="name" label="登录名"></el-table-column>
+            <el-table-column prop="name" label="姓名"></el-table-column>
+            <el-table-column prop="phone" label="手机号"></el-table-column>
+            <el-table-column label="操作">
+              <template #default="{ row }">
+                <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="flex justify-end shrink-0">
+            <el-pagination
+              background
+              layout="prev, pager, next, jumper, total"
+              :page-size="10"
+              :total="total"
+              @current-change="pageChange"
+              class="mt-16px"
+            />
           </div>
         </div>
-        <el-table border>
-          <el-table-column prop="name" label="登录名"></el-table-column>
-          <el-table-column prop="name" label="姓名"></el-table-column>
-          <el-table-column prop="phone" label="手机号"></el-table-column>
-          <el-table-column label="操作">
-            <template #default="{ row }">
-              <el-button link type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
       </el-card>
     </el-col>
   </el-row>
+  <el-dialog v-model="dialogVisible" title="添加用户" @close="closeDialog">
+    <el-transfer v-model="slectedUser" :data="userList" :titles="['用户列表', '已选用户']" />
+    <template #footer>
+      <el-button icon="Close" @click="closeDialog">取消</el-button>
+      <el-button icon="Check" type="primary" @click="handleSubmit">保存</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped></style>

src/views/system/user.vue

@@ -28,7 +28,7 @@ const CRUD = {
 
 const testGetRole = () => {
   Promise.resolve().then(() => {
-    form.formItems[3].options = [
+    formConfig.formItems[3].options = [
       {
         label: '测试角色',
         value: '1'
@@ -38,7 +38,7 @@ const testGetRole = () => {
 }
 testGetRole()
 
-const form = reactive<BasicForm>({
+const formConfig = reactive<BasicForm>({
   span: 12,
   formItems: [
     {
@@ -101,7 +101,7 @@ const form = reactive<BasicForm>({
 </script>
 
 <template>
-  <pro-table :crud="CRUD" :formConfig="form">
+  <pro-table :crud="CRUD" :formConfig="formConfig">
     <el-table-column prop="name" label="用户名"></el-table-column>
     <el-table-column prop="phone" label="手机号"></el-table-column>
     <el-table-column prop="gender" label="性别"></el-table-column>