Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

.gitignore

@@ -8,8 +8,8 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
 dist-ssr
+dist
 *.local
 
 # Editor directories and files

src/layout/Header/components/Hamburger.vue

@@ -32,7 +32,6 @@ const handleLink = (item)=>{
 
 const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
 
-console.log('======matched=======',matched)
 
 </script>
 

src/mock/system.ts

@@ -53,6 +53,132 @@ export const userData =[
 ]
 
 
+export const deptData =[
+    {
+    "id": "0",
+    "deptName": "华东分部",
+    "orderNo": 1,
+    "createTime": "2011-02-25 18:37:39",
+    "remark": "世上无难事，只要肯登攀",
+    "status": false,
+    "children": [{
+        "id": "0-0",
+        "deptName": "研发部",
+        "orderNo": 1,
+        "createTime": "1995-10-07 03:22:40",
+        "remark": "不曾扬帆，何以至远方",
+        "status": true,
+        "parentDept": "0"
+    }, {
+        "id": "0-1",
+        "deptName": "市场部",
+        "orderNo": 2,
+        "createTime": "1972-06-20 09:33:40",
+        "remark": "努力到无能为力，拼搏到感动自己",
+        "status": false,
+        "parentDept": "0"
+    }, {
+        "id": "0-2",
+        "deptName": "商务部",
+        "orderNo": 3,
+        "createTime": "1992-10-31 02:54:45",
+        "remark": "没有过不了的坎，就怕自己不奋斗",
+        "status": false,
+        "parentDept": "0"
+    }, {
+        "id": "0-3",
+        "deptName": "财务部",
+        "orderNo": 4,
+        "createTime": "1971-07-06 13:01:49",
+        "remark": "没有口水与汗水，就没有成功的泪水。",
+        "status": true,
+        "parentDept": "0"
+    }]
+}, {
+    "id": "1",
+    "deptName": "华南分部",
+    "orderNo": 2,
+    "createTime": "1995-12-24 06:36:26",
+    "remark": "这个世界从来不缺乏机遇，而是缺少抓住机遇的手。",
+    "status": false,
+    "children": [{
+        "id": "1-0",
+        "deptName": "研发部",
+        "orderNo": 1,
+        "createTime": "2022-05-10 12:44:05",
+        "remark": "奋斗令我们的生活充满生机，责任让我们的生命充满意义！",
+        "status": true,
+        "parentDept": "1"
+    }, {
+        "id": "1-1",
+        "deptName": "市场部",
+        "orderNo": 2,
+        "createTime": "2022-07-15 02:53:29",
+        "remark": "学习之心不可无，懒惰之心不可有。",
+        "status": true,
+        "parentDept": "1"
+    },
+        {
+        "id": "1-2",
+        "deptName": "商务部",
+        "orderNo": 3,
+        "createTime": "2022-08-11 22:44:55",
+        "remark": "学会等待，学会坚持，成功是一个循序渐进的过程。",
+        "status": true,
+        "parentDept": "1"
+    }, {
+        "id": "1-3",
+        "deptName": "财务部",
+        "orderNo": 4,
+        "createTime": "2022-10-26 19:38:29",
+        "remark": "能克服困难的人，可使困难化为良机",
+        "status": false,
+        "parentDept": "1"
+    }
+    ]
+}, {
+    "id": "2",
+    "deptName": "西北分部",
+    "orderNo": 3,
+    "createTime": "2022-08-27 16:49:21",
+    "remark": "行为决定性格，性格决定命运",
+    "status": false,
+    "children": [{
+        "id": "2-0",
+        "deptName": "研发部",
+        "orderNo": 1,
+        "createTime": "2022-12-11 03:49:33",
+        "remark": "带着自己的梦，以一种骄傲的姿态走下去",
+        "status": false,
+        "parentDept": "2"
+    }, {
+        "id": "2-1",
+        "deptName": "市场部",
+        "orderNo": 2,
+        "createTime": "2022-06-18 20:15:34",
+        "remark": "当世界都在说放弃的时候，轻轻的告诉自己：再试一次",
+        "status": true,
+        "parentDept": "2"
+    }, {
+        "id": "2-2",
+        "deptName": "商务部",
+        "orderNo": 3,
+        "createTime": "2022-07-17 09:37:41",
+        "remark": "不怕万人阻挡在前方，只怕自己先行投降",
+        "status": true,
+        "parentDept": "2"
+    }, {
+        "id": "2-3",
+        "deptName": "财务部",
+        "orderNo": 4,
+        "createTime": "2022-11-23 04:34:33",
+        "remark": "胸怀临云志，莫负少年时",
+        "status": false,
+        "parentDept": "2"
+    }]
+}]
+
+
 export const roleData =[
     {
         roleName:'超级管理员',

src/router/modules/system.ts

@@ -18,6 +18,12 @@ const systemRouter = [{
             name: 'user',
             meta: { title: '用户管理' , icon: 'MenuIcon'}
         },
+        {
+            path: 'dept',
+            component: () => import('@/views/system/dept/index.vue'),
+            name: 'dept',
+            meta: { title: '部门管理' , icon: 'MenuIcon'}
+        },
         {
             path: 'role',
             component: () => import('@/views/system/role/index.vue'),

src/views/login/components/LoginForm.vue

@@ -66,7 +66,7 @@ const rules = reactive({
 })
 // 表单数据
 const ruleForm = reactive({
-  username: 'admin',
+  username: 'vue-admin-perfect',
   password: '123456',
 })
 

src/views/system/dept/components/deptDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+    >
+      <el-form-item label="上级部门" prop="id">
+        <el-cascader v-model="ruleForm.id" :options="deptDataOptions" :props="deptProps" clearable style="width: 100%"/>
+      </el-form-item>
+      <el-form-item label="部门名称" prop="deptName">
+        <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称"/>
+      </el-form-item>
+      <el-form-item label="状态" >
+        <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
+      </el-form-item>
+      <el-form-item label="备注"  >
+        <el-input v-model="ruleForm.remark"
+                  type="textarea"
+                  placeholder="请输入备注"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleConfim(ruleFormRef)">确定</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+import {reactive, ref} from "vue";
+import { deptData } from '@/mock/system'
+
+const ruleFormRef = ref<FormInstance>()
+const dialogVisible = ref<boolean>(false)
+const deptDataOptions = ref(deptData)
+const title = ref('新增部门')
+const deptProps = {
+  value: 'id',
+  label: 'deptName',
+  checkStrictly:true
+}
+
+const rules = reactive({
+  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
+  id: [{required: true, message: '请选择上级部门', trigger: 'change',},],
+})
+
+const ruleForm = reactive({
+  deptName: '',
+  id:'',
+  remark:null,
+  status:true
+})
+
+function close() {
+  ruleFormRef.value.resetFields()
+  Object.keys(ruleForm).forEach(key=>{
+    if(key==='sex') ruleForm[key] = '男'
+    else if(key==='status') ruleForm[key] = true
+    else ruleForm[key] = null
+
+  })
+}
+
+const show = (item={})=>{
+  title.value = '新增部门'
+  if(item.deptName){
+    title.value = '编辑部门'
+    Object.keys(item).forEach(key=>{
+      ruleForm[key] = item[key]
+    })
+  }
+  dialogVisible.value = true
+}
+
+const handleConfim = async (done: () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false
+      ElMessage.success( `提交数据：${JSON.stringify(ruleForm)}`)
+      console.log('submit!', ruleForm)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+defineExpose({
+  show,
+})
+
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/system/dept/index.scss

@@ -0,0 +1,37 @@
+.header{
+  display: flex;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .util{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .table-inner{
+    flex: 1;
+    position: relative;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}

src/views/system/dept/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="app-container">
+    <div class="header">
+      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
+        <el-form-item label="部门名称" prop="username">
+          <el-input v-model="formInline.username" placeholder="请输入部门名称"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
+          <el-button @click="reset(ruleFormRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div class="util">
+        <el-button type="primary" @click="addHandler">
+          <el-icon><Plus /></el-icon>
+          新增部门
+        </el-button>
+      </div>
+      <div class="table-inner">
+        <el-table
+            v-loading="loading"
+            row-key="id"
+            :data="tableData"
+            style="width: 100%"
+            border>
+          <el-table-column prop="deptName" label="部门名称" align="center"/>
+          <el-table-column prop="status" label="状态" align="center">
+            <template #default="scope">
+              <el-switch
+                  inline-prompt
+                  active-text="启用" inactive-text="禁用"
+                  v-model="scope.row.status" @change="changeStatus(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark"
+                           :show-overflow-tooltip="true"
+                           width="300"
+                           label="备注" align="center"/>
+          <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
+          <el-table-column prop="operator" label="操作" width="200px" align="center">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
+                编辑
+              </el-button>
+              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <DeptDialog ref="deptDialog"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+  import {Search } from '@element-plus/icons-vue'
+  import {onMounted, reactive, ref} from 'vue'
+  import { deptData } from '@/mock/system'
+  import DeptDialog from './components/deptDialog.vue'
+
+  const tableData = ref(deptData)
+  const loading = ref(true)
+  const dialogVisible = ref(false)
+  const deptDialog = ref()
+  const ruleFormRef = ref<FormInstance>()
+  const formInline = reactive({})
+
+  onMounted(()=>{
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  })
+
+  const onSubmit = () => {
+    console.log('submit!', formInline)
+    loading.value = true
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  }
+
+  const reset = (formEl: FormInstance | undefined) => {
+    loading.value = true
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  }
+
+  const addHandler = () => {
+    deptDialog.value.show()
+  }
+  const editHandler = (row) => {
+    deptDialog.value.show(row)
+  }
+
+  const del = (row) => {
+    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true,
+    })
+      .then(() => {})
+      .catch(() => {})
+  }
+  const changeStatus = (row) => {
+    ElMessageBox.confirm(
+      `确定要${!row.status ? '禁用' : '启用'} ${row.deptName} 账户吗？`,
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    )
+      .then(async () => {})
+      .catch(() => {
+        row.status = !row.status
+      })
+  }
+</script>
+
+<style scoped lang="scss">
+@import "./index";
+</style>

src/views/system/menu/index.vue

@@ -2,8 +2,8 @@
   <div class="app-container">
     <div class="header">
       <el-form :inline="true" :model="formInline" ref="ruleFormRef">
-        <el-form-item label="用户名" prop="username">
+        <el-form-item label="菜单名称" prop="username">
-          <el-input v-model="formInline.username" />
+          <el-input v-model="formInline.username" placeholder="请输入菜单名称"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>

src/views/system/role/index.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
         <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="formInline.roleName" />
+          <el-input v-model="formInline.roleName" placeholder="请输入角色名称"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
@@ -19,7 +19,9 @@
         </el-button>
       </div>
       <div class="table-inner">
-        <el-table :data="tableData" style="width: 100%" border>
+        <el-table
+            v-loading="loading"
+            :data="tableData" style="width: 100%" border>
           <el-table-column prop="roleName" label="角色名称" />
           <el-table-column prop="roleIdentification" label="角色标识" />
           <el-table-column prop="status" label="角色状态" align="center">
@@ -54,13 +56,13 @@
 
 <script lang="ts" setup>
   import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
-  import { reactive, ref } from 'vue'
+  import {onMounted, reactive, ref} from 'vue'
   import {Search } from '@element-plus/icons-vue'
   import RoleDrawer from './components/roleDrawer.vue'
   import { roleData } from '@/mock/system'
-  import * as dayjs from 'dayjs'
   const tableData = ref(roleData)
 
+  const loading = ref(true)
   const roleDrawer = ref()
   const formSize = ref('default')
   const ruleFormRef = ref<FormInstance>()
@@ -68,8 +70,18 @@
 
   const onSubmit = () => {
     console.log('submit!', formInline)
+    loading.value = true
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  }
+
+  const reset = (formEl: FormInstance | undefined) => {
+    loading.value = true
+    setTimeout(()=>{
+      loading.value = false
+    },500)
   }
-  const reset = (formEl: FormInstance | undefined) => {}
   const add = () => {
     roleDrawer.value.show()
   }
@@ -105,6 +117,12 @@
         })
   }
 
+  onMounted(()=>{
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  })
+
 
 </script>
 

src/views/system/user/components/userSide.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-card class="m-dept-side" >
+    <div class="title">部门列表</div>
+    <el-input v-model="filterText" placeholder="输入关键字进行过滤" class="filter-search"/>
+    <div class="filter-tree">
+      <el-tree
+          ref="treeRef"
+          :data="tableData"
+          :props="defaultProps"
+          default-expand-all
+          :filter-node-method="filterNode"
+      />
+    </div>
+
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import {onBeforeMount, ref, watch} from 'vue'
+import { ElTree } from 'element-plus'
+import { deptData } from '@/mock/system'
+
+const tableData = ref<Tree[]>(deptData)
+interface Tree {
+  id: string
+  deptName: string
+  orderNo: number
+  createTime?:string
+  remark?:string
+  status?:boolean
+  children?: Tree[]
+}
+
+onBeforeMount( () => {
+  let allObj = {"id": "", "deptName": "全部"}
+  tableData.value = [allObj,...deptData]
+});
+
+const filterText = ref('')
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+const defaultProps = {
+  children: 'children',
+  label: 'deptName',
+  value:'id'
+}
+
+// 监听输入
+watch(filterText, (val) => {
+  treeRef.value!.filter(val)
+})
+
+// 搜索
+const filterNode = (value: string, data: Tree) => {
+  console.log(data)
+  if (!value) return true
+  return data.deptName.includes(value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../index.scss";
+</style>

src/views/system/user/components/userTable.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="m-user-table">
+    <div class="header">
+      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="formInline.username" placeholder="请输入用户名"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
+          <el-button @click="reset(ruleFormRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div class="util">
+        <el-button type="primary" @click="addHandler">
+          <el-icon><Plus /></el-icon>
+          新增用户
+        </el-button>
+      </div>
+      <div class="table-inner">
+        <el-table
+            v-loading="loading"
+            :data="tableData" style="width: 100%;height: 100%" border>
+          <el-table-column prop="username" label="用户名" align="center" width="100"/>
+          <el-table-column prop="nickname" label="昵称" align="center"/>
+          <el-table-column prop="sex" label="性别" align="center"/>
+          <el-table-column prop="role" label="关联角色" align="center" width="120"/>
+          <el-table-column prop="photo" label="手机号" align="center" width="120"/>
+          <el-table-column prop="status" label="用户状态" align="center">
+            <template #default="scope">
+              <el-switch
+                  inline-prompt
+                  active-text="启用" inactive-text="禁用"
+                  v-model="scope.row.status" @change="changeStatus(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="describe"
+                           :show-overflow-tooltip="true"
+                           width="180"
+                           label="用户描述" align="center"/>
+          <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
+          <el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
+                编辑
+              </el-button>
+              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination">
+        <el-pagination
+            v-model:currentPage="currentPage1"
+            :page-size="10"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="1000"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <UserDialog ref="userDialog"/>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+import {Search } from '@element-plus/icons-vue'
+import {onMounted, reactive, ref} from 'vue'
+import { userData } from '@/mock/system'
+import UserDialog from './userDialog.vue'
+
+const tableData = ref(userData)
+const dialogVisible = ref(false)
+const userDialog = ref()
+const ruleFormRef = ref<FormInstance>()
+const formInline = reactive({})
+const loading = ref(true)
+const currentPage1 = ref(1)
+
+const onSubmit = () => {
+  console.log('submit!', formInline)
+  loading.value = true
+  setTimeout(()=>{
+    loading.value = false
+  },1000)
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  loading.value = true
+  setTimeout(()=>{
+    loading.value = false
+  },1000)
+}
+
+
+const addHandler = () => {
+  userDialog.value.show()
+}
+const editHandler = (row) => {
+  userDialog.value.show(row)
+}
+
+const del = (row) => {
+  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {})
+      .catch(() => {})
+}
+const changeStatus = (row) => {
+  ElMessageBox.confirm(
+      `确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+  )
+      .then(async () => {})
+      .catch(() => {
+        row.status = !row.status
+      })
+}
+
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+
+const handleCurrentChange = (val: number) => {
+  currentPage1.value = val
+}
+
+onMounted(()=>{
+  setTimeout(()=>{
+    loading.value = false
+  },1000)
+})
+
+</script>
+<style lang="scss" scoped>
+@import "../index";
+</style>

src/views/system/user/index.scss

@@ -1,37 +1,98 @@
-.header{
+.m-user{
   display: flex;
-  padding: 16px 16px 0px 16px;
+  flex-direction: row;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
-.footer{
+.m-user-table{
-  flex: 1;
   display: flex;
-  padding: 16px;
   flex-direction: column;
-  border-radius: 4px;
+  flex: 1;
-  overflow: hidden;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
   position: relative;
-  box-sizing: border-box;
+  width: calc(100% - 230px);
-  .util{
+  .header{
-    margin-bottom: 15px;
+    display: flex;
+    padding: 16px 16px 0px 16px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  }
+  .footer{
+    flex: 1;
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    border-radius: 4px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    position: relative;
+    box-sizing: border-box;
+    .util{
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: flex-end;
+      flex-shrink: 0;
+    }
+    .table-inner{
+      flex: 1;
+      position: relative;
+    }
+    .table{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%
+    }
+  }
+  .pagination{
+    width: 100%;
     display: flex;
     justify-content: flex-end;
+    padding-top: 20px;
+    box-sizing: border-box;
     flex-shrink: 0;
   }
-  .table-inner{
+}
+
+
+.m-dept-side{
+  box-sizing: border-box;
+  width: 220px;
+  height: 100%;
+  padding: 18px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  ::v-deep(.el-card__body){
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0!important;
+    .el-tree-node__content{
+      height: 33px;
+    }
+    .el-tree{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+  .filter-search{
+    flex-shrink: 0;
+    margin-bottom: 10px;
+  }
+  .title{
+    flex-shrink: 0;
+    margin: 0 0 15px;
+    font-size: 18px;
+    font-weight: 700;
+  }
+  .filter-tree{
     flex: 1;
+    overflow: hidden;
     position: relative;
   }
-  .table{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%
-  }
 }

src/views/system/user/index.vue

@@ -1,112 +1,14 @@
 <template>
-  <div class="app-container">
+  <div class="app-container m-user">
-    <div class="header">
+    <UserSide/>
-      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
+    <UserTable/>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="formInline.username" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
-          <el-button @click="reset(ruleFormRef)">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="footer">
-      <div class="util">
-        <el-button type="primary" @click="addHandler">
-          <el-icon><Plus /></el-icon>
-          新增用户
-        </el-button>
-      </div>
-      <div class="table-inner">
-        <el-table :data="tableData" style="width: 100%" border>
-          <el-table-column prop="username" label="用户名" align="center"/>
-          <el-table-column prop="nickname" label="昵称" align="center"/>
-          <el-table-column prop="sex" label="性别" align="center"/>
-          <el-table-column prop="role" label="关联角色" align="center" width="120"/>
-          <el-table-column prop="photo" label="手机号" align="center" width="120"/>
-
-          <el-table-column prop="status" label="用户状态" align="center">
-            <template #default="scope">
-              <el-switch
-                  inline-prompt
-                  active-text="启用" inactive-text="禁用"
-                  v-model="scope.row.status" @change="changeStatus(scope.row)" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="describe"
-                           :show-overflow-tooltip="true"
-                           width="180"
-                           label="用户描述" align="center"/>
-          <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
-          <el-table-column prop="operator" label="操作" width="200px" align="center">
-            <template #default="scope">
-              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
-                编辑
-              </el-button>
-              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-    <UserDialog ref="userDialog"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+  import UserTable from './components/userTable.vue'
-  import {Search } from '@element-plus/icons-vue'
+  import UserSide from './components/userSide.vue'
-  import { reactive, ref } from 'vue'
-  import { userData } from '@/mock/system'
-  import UserDialog from './components/userDialog.vue'
-  import * as dayjs from 'dayjs'
-  const tableData = ref(userData)
-  const dialogVisible = ref(false)
-  const userDialog = ref()
-  const ruleFormRef = ref<FormInstance>()
-  const formInline = reactive({})
 
-  const onSubmit = () => {
-    console.log('submit!', formInline)
-  }
-  const reset = (formEl: FormInstance | undefined) => {}
-
-
-  const addHandler = () => {
-    userDialog.value.show()
-  }
-  const editHandler = (row) => {
-    userDialog.value.show(row)
-  }
-
-  const del = (row) => {
-    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
-    })
-      .then(() => {})
-      .catch(() => {})
-  }
-  const changeStatus = (row) => {
-    ElMessageBox.confirm(
-      `确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
-      '温馨提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      },
-    )
-      .then(async () => {})
-      .catch(() => {
-        row.status = !row.status
-      })
-  }
 </script>
 
 <style scoped lang="scss">