feat: 组织架构

src/router/modules/background.ts

@@ -13,32 +13,34 @@ export default {
       },
       children: [
         {
-          path: "/background/framework/prosonDepartment",
+          path: "/background/framework/proson/prosonDepartment",
           name: "prosonDepartment",
           meta: {
             title: "人员与部门",
             showParent: true
           },
           component: () =>
-            import("@/views/background/framework/prosonDepartment.vue")
+            import("@/views/background/framework/proson/prosonDepartment.vue")
         },
         {
-          path: "/background/framework/rolePower",
+          path: "/background/framework/roles/rolePower",
           name: "rolePower",
           meta: {
             title: "角色与权限",
             showParent: true
           },
-          component: () => import("@/views/background/framework/rolePower.vue")
+          component: () =>
+            import("@/views/background/framework/roles/rolePower.vue")
         },
         {
-          path: "/background/framework/users",
+          path: "/background/framework/users/index",
           name: "users",
           meta: {
             title: "用户组",
             showParent: true
           },
-          component: () => import("@/views/background/framework/users.vue")
+          component: () =>
+            import("@/views/background/framework/users/index.vue")
         }
       ]
     }

src/views/background/framework/components/prosonEditDrawer.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import { ElMessageBox } from "element-plus";
-import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
-// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
-const drawer = ref(false);
-const direction = ref<DrawerProps["direction"]>("rtl");
-const formLabelAlign = reactive({
-  name: "",
-  region: "",
-  type: ""
-});
-const handleClose = (done: () => void) => {
-  ElMessageBox.confirm("配置项未保存，确认关闭", {
-    type: "warning"
-  }).then(() => {
-    drawer.value = false;
-  });
-};
-function cancelClick() {
-  drawer.value = false;
-}
-function confirmClick() {
-  console.log(1111);
-}
-const open = row => {
-  drawer.value = true;
-};
-defineExpose({
-  open
-});
-const timer = ref("");
-</script>
-
-<template>
-  <div>
-    <el-drawer
-      v-model="drawer"
-      :direction="direction"
-      :before-close="handleClose"
-    >
-      <template #header>
-        <h4>指标详情</h4>
-      </template>
-      <template #default>
-        <div>
-          <el-form
-            label-position="top"
-            label-width="auto"
-            :model="formLabelAlign"
-          >
-            <el-form-item label="指标编号" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="指标名称" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="门诊收住院率" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="指标分类" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="指标定义" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="指标口径" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="SQL语句" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="指标状态" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="来源" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="操作用户" label-position="top">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="创建时间" label-position="top">
-              <el-date-picker
-                v-model="timer"
-                type="datetime"
-                placeholder="Select date and time"
-              />
-            </el-form-item>
-            <el-form-item label="更新时间" label-position="top">
-              <el-date-picker
-                v-model="timer"
-                type="datetime"
-                placeholder="Select date and time"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-      </template>
-      <template #footer>
-        <div>
-          <el-button @click="cancelClick">取消</el-button>
-          <el-button type="primary" @click="confirmClick">确认</el-button>
-        </div>
-      </template>
-    </el-drawer>
-  </div>
-</template>

src/views/background/framework/proson/components/addPerson.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = () => {
+  dialogVisibleAdd.value = true;
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="添加成员"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item
+          prop="name"
+          label="姓名"
+          :rules="[
+            {
+              required: true,
+              message: '请填写部门名称',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="工号">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="部门">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="年龄">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="职称">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="form.name" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/proson/components/changeRole.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = () => {
+  dialogVisibleAdd.value = true;
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="配置角色"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item label="配置角色">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/proson/components/newDepartment.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = () => {
+  dialogVisibleAdd.value = true;
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="新建部门"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item
+          prop="name"
+          label="部门名称"
+          :rules="[
+            {
+              required: true,
+              message: '请填写部门名称',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="部门编号">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="上级部门">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门负责人">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/proson/components/personDetailsDrawer.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const disabledValue = ref(true);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+    disabledValue.value = true;
+    editShow.value = true;
+  });
+};
+function cancelClick() {
+  disabledValue.value = true;
+  editShow.value = true;
+}
+function confirmClick() {
+  console.log(1111);
+  disabledValue.value = true;
+  editShow.value = true;
+  drawer.value = !drawer.value;
+  ElMessage({
+    message: "保存成功",
+    type: "success"
+  });
+}
+const open = row => {
+  drawer.value = true;
+};
+const editShow = ref(true);
+// 编辑
+const editClick = () => {
+  editShow.value = false;
+  disabledValue.value = false;
+};
+defineExpose({
+  open
+});
+const timer = ref("");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>成员详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="姓名" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="工号" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="员工ID" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="部门" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="性别" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="年龄" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="职称" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="手机号" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <el-button v-if="editShow" type="warning" @click="editClick"
+          >编辑</el-button
+        >
+        <div v-else>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/background/framework/proson/components/prosonEditDrawer.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const disabledValue = ref(true);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+    disabledValue.value = true;
+    editShow.value = true;
+  });
+};
+function cancelClick() {
+  // drawer.value = false;
+  disabledValue.value = true;
+  editShow.value = true;
+}
+function confirmClick() {
+  console.log(1111);
+  disabledValue.value = true;
+  editShow.value = true;
+  drawer.value = !drawer.value;
+  ElMessage({
+    message: "保存成功",
+    type: "success"
+  });
+}
+const open = row => {
+  drawer.value = true;
+};
+const editShow = ref(true);
+// 编辑
+const editClick = () => {
+  editShow.value = false;
+  disabledValue.value = false;
+};
+defineExpose({
+  open
+});
+const timer = ref("");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>指标详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="消化科" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="部门编号" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="部门ID" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="部门负责人" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <el-button v-if="editShow" type="warning" @click="editClick"
+          >编辑</el-button
+        >
+        <div v-else>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/background/framework/prosonDepartment.vue → src/views/background/framework/proson/prosonDepartment.vue

@@ -5,11 +5,26 @@ defineOptions({
 });
 import { ref, reactive } from "vue";
 import { ElMessageBox, ElMessage } from "element-plus";
-const dialogVisibleAdd = ref(false);
-const handleNodeClick = data => {
-  console.log(data);
-};
-
+import prosonEditDrawer from "./components/prosonEditDrawer.vue";
+import newDepartment from "./components/newDepartment.vue";
+import addPerson from "./components/addPerson.vue";
+import personDetailsDrawer from "./components/personDetailsDrawer.vue";
+import changeRole from "./components/changeRole.vue";
+// 添加部门
+const newDepartmentRef = ref(null);
+const newDepartmentShow = ref(false);
+// 编辑部门
+const prosonEditDrawerRef = ref(null);
+const prosonEditDrawerShow = ref(false);
+// 添加成员
+const addPersonDrawerRef = ref(null);
+const addPersonDrawerShow = ref(false);
+// 成员详情
+const personDetailsDrawerRef = ref(null);
+const personDetailsDrawerShow = ref(false);
+// 配置角色
+const changeRoleRef = ref(null);
+const changeRoleShow = ref(false);
 const data = [
   {
     label: "Level one 1",
@@ -67,11 +82,6 @@ const data = [
     ]
   }
 ];
-
-const defaultProps = {
-  children: "children",
-  label: "label"
-};
 const tableData = [
   {
     date: "2016-05-03",
@@ -96,14 +106,17 @@ const tableData = [
 ];
 // 添加部门弹窗
 const addDepartment = () => {
-  dialogVisibleAdd.value = !dialogVisibleAdd.value;
+  newDepartmentRef.value.open();
 };
-const handleClose = () => {
-  ElMessageBox.confirm("确认关闭弹窗吗？")
+// 删除人员
+const deletePerson = row => {
+  console.log(row);
+  ElMessageBox.confirm("删除后不可恢复，确定要删除吗？", "确认删除该人员吗？", {
+    type: "warning"
+  })
     .then(() => {
-      dialogVisibleAdd.value = !dialogVisibleAdd.value;
       ElMessage({
-        message: "已关闭",
+        message: "删除成功",
         type: "success"
       });
     })
@@ -111,31 +124,62 @@ const handleClose = () => {
       // catch error
     });
 };
-// 添加部门保存
-const saveDepartment = () => {
-  dialogVisibleAdd.value = false;
-  ElMessage({
-    message: "添加成功",
-    type: "success"
-  });
+// 编辑部门弹窗
+const editDepartment = () => {
+  prosonEditDrawerRef.value.open();
 };
-const form = reactive({
-  name: "",
-  region: "",
-  date1: "",
-  date2: "",
-  delivery: false,
-  type: [],
-  resource: "",
-  desc: ""
-});
-const deleteRow = row => {
+// 删除部门
+const deleteDepartment = () => {
+  ElMessageBox.confirm(
+    "请先移除部门内的所有人员再进行删除部门操作",
+    "确认删除该部门吗？",
+    {
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        message: "删除成功",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加成员弹窗
+const AddPerson = () => {
+  addPersonDrawerRef.value.open();
+};
+const personDetails = row => {
+  personDetailsDrawerRef.value.open();
+  console.log(row);
+};
+const ChangeRole = row => {
+  changeRoleRef.value.open();
   console.log(row);
 };
 </script>
 
 <template>
   <div class="flex w-full h-full">
+    <!-- 编辑部门 -->
+    <prosonEditDrawer
+      ref="prosonEditDrawerRef"
+      v-model="prosonEditDrawerShow"
+    />
+    <!-- 添加部门 -->
+    <newDepartment ref="newDepartmentRef" v-model="newDepartmentShow" />
+    <!-- 添加成员 -->
+    <addPerson ref="addPersonDrawerRef" v-model="addPersonDrawerShow" />
+    <!-- 成员详情 -->
+    <personDetailsDrawer
+      ref="personDetailsDrawerRef"
+      v-model="personDetailsDrawerShow"
+    />
+    <!-- 配置角色 -->
+    <changeRole ref="changeRoleRef" v-model="changeRoleShow" />
+    <!-- 主体内容 -->
     <div class="box-left">
       <el-input placeholder="搜索" class="mb-2" />
       <el-tree
@@ -154,11 +198,15 @@ const deleteRow = row => {
             </span>
             <template #dropdown>
               <el-dropdown-menu class="setting">
-                <el-dropdown-item> 编辑部门 </el-dropdown-item>
+                <el-dropdown-item @click="editDepartment">
+                  编辑部门
+                </el-dropdown-item>
                 <el-dropdown-item> 添加子部门 </el-dropdown-item>
                 <el-dropdown-item> 配置角色 </el-dropdown-item>
                 <el-dropdown-item>
-                  <el-link type="danger">删除</el-link>
+                  <el-link type="danger" @click="deleteDepartment"
+                    >删除</el-link
+                  >
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -172,7 +220,7 @@ const deleteRow = row => {
     <div class="box-right">
       <div class="flex justify-between mb-3">
         <el-input placeholder="搜索" class="mb-2" style="max-width: 300px" />
-        <el-button type="primary">添加成员</el-button>
+        <el-button type="primary" @click="AddPerson">添加成员</el-button>
       </div>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="date" label="姓名" />
@@ -184,18 +232,20 @@ const deleteRow = row => {
         <el-table-column label="操作">
           <template #default="{ row }">
             <el-dropdown trigger="click" class="mr-2">
-              <el-icon><View /></el-icon>
+              <el-icon @click="personDetails(row)"><View /></el-icon>
             </el-dropdown>
             <el-dropdown trigger="click">
               <el-icon><Operation /></el-icon>
               <template #dropdown>
                 <el-dropdown-menu class="setting">
                   <el-dropdown-item>
-                    <el-link type="danger" @click="deleteRow(row)"
+                    <el-link type="danger" @click="deletePerson(row)"
                       >删除</el-link
                     >
                   </el-dropdown-item>
-                  <el-dropdown-item> 配置角色 </el-dropdown-item>
+                  <el-dropdown-item @click="ChangeRole(row)">
+                    配置角色
+                  </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -203,56 +253,6 @@ const deleteRow = row => {
         </el-table-column>
       </el-table>
     </div>
-    <!-- 添加部门 -->
-    <el-dialog
-      v-model="dialogVisibleAdd"
-      title="新建部门"
-      width="500"
-      :before-close="handleClose"
-    >
-      <el-form :model="form" label-width="auto" style="max-width: 600px">
-        <el-form-item
-          prop="name"
-          label="部门名称"
-          :rules="[
-            {
-              required: true,
-              message: '请填写部门名称',
-              trigger: 'blur'
-            }
-          ]"
-        >
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="部门编号">
-          <el-input v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="上级部门">
-          <el-select
-            v-model="form.region"
-            placeholder="please select your zone"
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="部门负责人">
-          <el-select
-            v-model="form.region"
-            placeholder="please select your zone"
-          >
-            <el-option label="Zone one" value="shanghai" />
-            <el-option label="Zone two" value="beijing" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="handleClose">取消</el-button>
-          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 <style lang="scss" scoped>

src/views/background/framework/rolePower.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  // name 作为一种规范最好必须写上并且和路由的name保持一致
-  name: "rolePower"
-});
-</script>
-
-<template>
-  <h1>角色与权限</h1>
-</template>

src/views/background/framework/roles/components/addPerson.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = item => {
+  dialogVisibleAdd.value = true;
+  console.log(item);
+};
+// 树选择
+const defaultProps = {
+  children: "children",
+  label: "label"
+};
+const data = [
+  {
+    id: 1,
+    label: "Level one 1",
+    children: [
+      {
+        id: 4,
+        label: "Level two 1-1",
+        children: [
+          {
+            id: 9,
+            label: "Level three 1-1-1"
+          },
+          {
+            id: 10,
+            label: "Level three 1-1-2"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: "Level one 2",
+    children: [
+      {
+        id: 5,
+        label: "Level two 2-1"
+      },
+      {
+        id: 6,
+        label: "Level two 2-2"
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: "Level one 3",
+    children: [
+      {
+        id: 7,
+        label: "Level two 3-1"
+      },
+      {
+        id: 8,
+        label: "Level two 3-2"
+      }
+    ]
+  }
+];
+const tree = ref(null);
+
+const handleCheck = (node, checked) => {
+  // if (checked) {
+  //   tree.value.expandNode(node, true);
+  // } else {
+  //   tree.value.collapseNode(node, true);
+  // }
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="人员"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-input
+        placeholder="请搜索员工姓名"
+        class="mb-2"
+        :prefix-icon="Search"
+      />
+      <el-tree
+        ref="tree"
+        style="max-width: 600px"
+        :data="data"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+        @check="handleCheck"
+      />
+      <!-- :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/roles/components/addRole.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const dialogTitle = ref("新增角色");
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = item => {
+  if (item) {
+    dialogTitle.value = "编辑角色";
+    form.name = item.name;
+  } else {
+    dialogTitle.value = "新增角色";
+    form.name = "";
+  }
+  dialogVisibleAdd.value = true;
+  console.log(item);
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      :title="dialogTitle"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item
+          prop="name"
+          label="角色"
+          :rules="[
+            {
+              required: true,
+              message: '请填写部门名称',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.name" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/roles/rolePower.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: "rolePower"
+});
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import addRole from "./components/addRole.vue";
+import addPerson from "./components/addPerson.vue";
+// 新增角色
+const addRoleRef = ref();
+const addRoleShow = ref(false);
+// 新增角色组人员
+const addPersonRef = ref();
+const addPersonShow = ref(false);
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189"
+  }
+];
+const rolesList = reactive({
+  data: [
+    { name: "管理员", id: 1 },
+    { name: "科室主任", id: 2 },
+    { name: "医生", id: 3 },
+    { name: "员工", id: 4 },
+    { name: "张三", id: 5 },
+    { name: "李四", id: 6 }
+  ],
+  rolesName: ""
+});
+// 查看角色组
+const bgColor = ref(null);
+const lookRoles = item => {
+  console.log(item);
+  bgColor.value = item.id;
+  rolesList.rolesName = item.name;
+};
+// 添加角色
+const addRoles = () => {
+  addRoleRef.value.open();
+  addRoleShow.value = true;
+};
+// 编辑角色
+const editRoleName = item => {
+  addRoleRef.value.open(item);
+  addRoleShow.value = true;
+};
+// 删除角色
+const deleteRole = item => {
+  console.log(item);
+  ElMessageBox.confirm(
+    `角色删除后不能恢复,是否确认删除角色【${item.name}】吗?`,
+    "确认删除角色吗",
+    {
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        message: "删除成功",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+      ElMessage({
+        message: "已取消"
+      });
+    });
+};
+// 标签选择
+const activeName = ref("first");
+
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+// 添加角色组成员
+const AddRolesPerson = () => {
+  addPersonRef.value.open();
+  addPersonShow.value = true;
+};
+// 删除角色组成员
+const deltetePerson = item => {
+  console.log(item);
+  ElMessageBox.confirm(
+    `人员删除后不能恢复,是否确认删除【${item.name}】吗?`,
+    "确认删除人员吗",
+    {
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        message: "删除成功",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+      ElMessage({
+        message: "已取消"
+      });
+    });
+};
+</script>
+
+<template>
+  <div class="flex w-full h-full">
+    <!-- 新增角色 -->
+    <addRole ref="addRoleRef" v-model="addRoleShow" />
+    <!-- 新增角色组成员 -->
+    <addPerson ref="addPersonRef" v-model="addPersonShow" />
+    <!-- 主体内容 -->
+    <div class="box-left">
+      <div class="w-[100%]">
+        <div><el-text type="info">系统角色</el-text></div>
+      </div>
+      <div
+        v-for="item in rolesList.data"
+        :key="item.id"
+        class="w-[100%] flex justify-between items-center"
+      >
+        <div
+          :class="[
+            'w-[100%] flex justify-between items-center mt-2 cursor-pointer',
+            { 'bg-blue-200': bgColor === item.id }
+          ]"
+        >
+          <div
+            class="flex justify-between items-center"
+            @click="lookRoles(item)"
+          >
+            <el-icon class="mr-2"><Avatar /></el-icon>
+            <el-text class="">{{ item.name }}</el-text>
+          </div>
+          <div class="flex justify-between items-center">
+            <el-dropdown trigger="click">
+              <span>
+                <el-icon><Operation /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu class="setting">
+                  <el-dropdown-item @click="editRoleName(item)">
+                    编辑名称
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-link type="danger" @click="deleteRole(item)"
+                      >删除</el-link
+                    >
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+      <el-divider />
+      <el-button type="primary" class="addRole" plain @click="addRoles()"
+        >新增角色</el-button
+      >
+    </div>
+    <div v-if="rolesList.rolesName" class="box-right">
+      <h3>{{ rolesList.rolesName }}</h3>
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="成员管理" name="first">
+          <div class="flex justify-between mb-3">
+            <el-input
+              placeholder="搜索姓名"
+              class="mb-2"
+              style="max-width: 300px"
+              :prefix-icon="Search"
+            />
+            <el-button type="primary" @click="AddRolesPerson"
+              >添加成员</el-button
+            >
+          </div>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="姓名" />
+            <el-table-column prop="name" label="工号" />
+            <el-table-column prop="address" label="性别" />
+            <el-table-column prop="address" label="年龄" />
+            <el-table-column prop="address" label="职称" />
+            <el-table-column prop="address" label="部门" />
+            <el-table-column label="操作">
+              <template #default="{ row }">
+                <el-dropdown trigger="click" class="mr-2">
+                  <el-text type="danger" @click="deltetePerson(row)">
+                    移除
+                  </el-text>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="权限管理" name="second">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="date" label="模块">
+              <template #default="{ row }">
+                <div><input checked type="checkbox" />{{ row.date }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="菜单">
+              <template #default="{ row }">
+                <div><input checked type="checkbox" />{{ row.date }}</div>
+                <div><input checked type="checkbox" />{{ row.date }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="全选">
+              <template #default="{ row }">
+                <div><input checked type="checkbox" />{{ row.date }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="权限点">
+              <template #default="{ row }">
+                <div><input checked type="checkbox" />{{ row.date }}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.box-left {
+  width: 25%;
+  // border: 1px solid red;
+  height: 100%;
+  padding: 10px 20px;
+  border-right: 1px solid #999;
+}
+
+.box-right {
+  width: 70%;
+  height: 100%;
+  padding: 10px 20px;
+}
+
+.addRole {
+  position: absolute;
+  bottom: 70px;
+}
+// ::v-deep .el-dropdown {
+//   line-height: 1;
+// }
+// ::v-deep .el-tree-node__expand-icon {
+//   line-height: 10px;
+//   border: 1px solid red;
+// }
+</style>

src/views/background/framework/users.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: "users"
-});
-</script>
-
-<template>
-  <h1>用户组</h1>
-</template>

src/views/background/framework/users/components/addPerson.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = item => {
+  dialogVisibleAdd.value = true;
+  console.log(item);
+};
+// 树选择
+const defaultProps = {
+  children: "children",
+  label: "label"
+};
+const data = [
+  {
+    id: 1,
+    label: "Level one 1",
+    children: [
+      {
+        id: 4,
+        label: "Level two 1-1",
+        children: [
+          {
+            id: 9,
+            label: "Level three 1-1-1"
+          },
+          {
+            id: 10,
+            label: "Level three 1-1-2"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: "Level one 2",
+    children: [
+      {
+        id: 5,
+        label: "Level two 2-1"
+      },
+      {
+        id: 6,
+        label: "Level two 2-2"
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: "Level one 3",
+    children: [
+      {
+        id: 7,
+        label: "Level two 3-1"
+      },
+      {
+        id: 8,
+        label: "Level two 3-2"
+      }
+    ]
+  }
+];
+const tree = ref(null);
+
+const handleCheck = (node, checked) => {
+  // if (checked) {
+  //   tree.value.expandNode(node, true);
+  // } else {
+  //   tree.value.collapseNode(node, true);
+  // }
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="人员"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-input
+        placeholder="请搜索员工姓名"
+        class="mb-2"
+        :prefix-icon="Search"
+      />
+      <el-tree
+        ref="tree"
+        style="max-width: 600px"
+        :data="data"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+        @check="handleCheck"
+      />
+      <!-- :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/users/components/addUsers.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const dialogTitle = ref("");
+const dialogForm = ref(false);
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const open = item => {
+  if (item) {
+    dialogTitle.value = "配置角色";
+    form.name = item.name;
+    dialogForm.value = false;
+  } else {
+    dialogTitle.value = "新建用户组";
+    form.name = "";
+    dialogForm.value = true;
+  }
+  dialogVisibleAdd.value = true;
+  console.log(item);
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="新增用户组"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form
+        v-if="dialogForm"
+        :model="form"
+        label-width="auto"
+        style="max-width: 600px"
+      >
+        <el-form-item
+          prop="name"
+          label="用户组名称"
+          :rules="[
+            {
+              required: true,
+              message: '请填写部门名称',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="用户组编号">
+          <el-input v-model="form.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="用户组负责人">
+          <el-select v-model="form.name" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-form v-else :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item label="配置角色">
+          <el-select v-model="form.name" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

src/views/background/framework/users/components/editPerson.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const disabledValue = ref(true);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+    disabledValue.value = true;
+    editShow.value = true;
+  });
+};
+function cancelClick() {
+  // drawer.value = false;
+  disabledValue.value = true;
+  editShow.value = true;
+}
+function confirmClick() {
+  console.log(1111);
+  disabledValue.value = true;
+  editShow.value = true;
+  drawer.value = !drawer.value;
+  ElMessage({
+    message: "保存成功",
+    type: "success"
+  });
+}
+const open = row => {
+  drawer.value = true;
+};
+const editShow = ref(true);
+// 编辑
+const editClick = () => {
+  editShow.value = false;
+  disabledValue.value = false;
+};
+defineExpose({
+  open
+});
+const timer = ref("");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>用户组详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="用户组名称" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="用户组编号" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+            <el-form-item label="用户组ID" label-position="top">
+              <el-input disabled />
+            </el-form-item>
+            <el-form-item label="用户组负责人" label-position="top">
+              <el-input :disabled="disabledValue" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <el-button v-if="editShow" type="warning" @click="editClick"
+          >编辑</el-button
+        >
+        <div v-else>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/background/framework/users/index.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: "users"
+});
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import addPerson from "./components/addPerson.vue";
+import addUsers from "./components/addUsers.vue";
+import editPerson from "./components/editPerson.vue";
+// 新增用户组
+const addUsersRef = ref();
+const addUsersShow = ref(false);
+// 新增人员
+const addPersonRef = ref();
+const addPersonShow = ref(false);
+// 编辑
+const editPersonRef = ref();
+const editPersonShow = ref(false);
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189"
+  }
+];
+const rolesList = reactive({
+  data: [
+    { name: "管理员", id: 1 },
+    { name: "科室主任", id: 2 },
+    { name: "医生", id: 3 },
+    { name: "员工", id: 4 },
+    { name: "张三", id: 5 },
+    { name: "李四", id: 6 }
+  ],
+  rolesName: ""
+});
+// 查看角色组
+const bgColor = ref(null);
+const lookRoles = item => {
+  console.log(item);
+  bgColor.value = item.id;
+  rolesList.rolesName = item.name;
+};
+// 标签选择
+const activeName = ref("first");
+
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+// 删除用户组
+const deleteUsers = row => {
+  ElMessageBox.confirm(
+    `角色删除不能恢复，是否确认删除用户组【${row.name}】吗`,
+    "确定删除该用户组吗？",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }
+  ).then(() => {
+    ElMessage({
+      type: "success",
+      message: "删除成功"
+    });
+  });
+};
+const AddUsersPerson = () => {
+  addPersonRef.value.open();
+};
+// 新增用户组
+const addUsersList = () => {
+  addUsersRef.value.open();
+};
+// 配置角色
+const changeUsers = item => {
+  addUsersRef.value.open(item);
+};
+// 编辑
+const editUsers = row => {
+  editPersonRef.value.open(row);
+};
+// 删除用户
+const deltetePerson = row => {
+  ElMessageBox.confirm(
+    `用户删除不能恢复，是否确认删除用户【${row.name}】吗`,
+    "确定删除该用户吗？",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: "success",
+        message: "删除成功"
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        message: "取消删除"
+      });
+    });
+};
+</script>
+
+<template>
+  <div class="flex w-full h-full">
+    <!-- 添加成员 -->
+    <addPerson ref="addPersonRef" v-model="addPersonShow" />
+    <!-- 添加成员 -->
+    <addUsers ref="addUsersRef" v-model="addUsersShow" />
+    <!-- 编辑 -->
+    <editPerson ref="editPersonRef" v-model="editPersonShow" />
+    <!-- 主体内容 -->
+    <div class="box-left">
+      <div class="w-[100%]">
+        <div>
+          <el-input
+            placeholder="搜索姓名"
+            class="mb-2"
+            style="max-width: 300px"
+            :prefix-icon="Search"
+          />
+        </div>
+      </div>
+      <div
+        v-for="item in rolesList.data"
+        :key="item.id"
+        class="w-[100%] flex justify-between items-center"
+      >
+        <div
+          :class="[
+            'w-[100%] flex justify-between items-center mt-2 cursor-pointer',
+            { 'bg-blue-200': bgColor === item.id }
+          ]"
+        >
+          <div
+            class="flex justify-between items-center'"
+            @click="lookRoles(item)"
+          >
+            <el-icon class="mr-2"><Avatar /></el-icon>
+            <el-text class="">{{ item.name }}</el-text>
+          </div>
+          <div class="flex justify-between items-center">
+            <el-dropdown trigger="click">
+              <span>
+                <el-icon><Operation /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu class="setting">
+                  <el-dropdown-item @click="editUsers(item)">
+                    编辑
+                  </el-dropdown-item>
+                  <el-dropdown-item @click="changeUsers(item)">
+                    配置角色
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-link type="danger" @click="deleteUsers(item)"
+                      >删除</el-link
+                    >
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+      <el-divider />
+      <el-button type="primary" class="addRole" plain @click="addUsersList()"
+        >新增用户组</el-button
+      >
+    </div>
+    <div v-if="rolesList.rolesName" class="box-right">
+      <h3>{{ rolesList.rolesName }}</h3>
+      <div class="flex justify-between mb-3">
+        <el-input
+          placeholder="搜索医生姓名"
+          class="mb-2"
+          style="max-width: 300px"
+          :prefix-icon="Search"
+        />
+        <el-button type="primary" @click="AddUsersPerson">添加成员</el-button>
+      </div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="姓名" />
+        <el-table-column prop="name" label="工号" />
+        <el-table-column prop="address" label="性别" />
+        <el-table-column prop="address" label="年龄" />
+        <el-table-column prop="address" label="职称" />
+        <el-table-column prop="address" label="部门" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-dropdown trigger="click" class="mr-2">
+              <el-text type="danger" @click="deltetePerson(row)">
+                移除
+              </el-text>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.box-left {
+  width: 25%;
+  // border: 1px solid red;
+  height: 100%;
+  padding: 10px 20px;
+  border-right: 1px solid #999;
+}
+
+.box-right {
+  width: 70%;
+  height: 100%;
+  padding: 10px 20px;
+}
+
+.addRole {
+  position: absolute;
+  bottom: 70px;
+}
+
+.userName {
+  background-color: #022bbd80;
+}
+// ::v-deep .el-dropdown {
+//   line-height: 1;
+// }
+// ::v-deep .el-tree-node__expand-icon {
+//   line-height: 10px;
+//   border: 1px solid red;
+// }
+</style>