角色管理添加权限树-修改button

src/theme/index.scss

@@ -14,7 +14,7 @@
 .el-textarea,
 .el-textarea__inner,
 .el-input__wrapper {
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .el-input__wrapper.is-focus {
   box-shadow: 0 0 0 1px #ac014d inset;

src/views/userManagement/account/index.vue

@@ -11,7 +11,7 @@
       <div class="box account-tree">
         <el-tree :data="data" :props="defaultProps" default-expand-all @node-click="handleNodeClick" />
       </div>
-      <Table class="account-table" :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+      <Table class="account-table" BtnGroupWidth="250px" :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
     </div>
     <!--删除弹框-->
     <Dialog :flag="flag" msgTitle="删除账号" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />

src/views/userManagement/accountGroup/index.vue

@@ -1,9 +1,155 @@
 <template>
-  <div>账号组</div>
+  <div class="application scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">账号组管理</div>
+      <div class="flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content">
+      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除账号组" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @resetForm="resetForm(ruleFormRef)" :show-flag="true">
+      <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="demo-ruleForm">
+        <el-form-item label="账号组名称" prop="appName">
+          <el-input v-model="ruleForm.appName" size="default" placeholder="请输入账号组名称" />
+        </el-form-item>
+        <el-form-item label="账号组描述" prop="appDesc">
+          <el-input v-model="ruleForm.appDesc" size="default" type="textarea" :rows="3" placeholder="请输入账号组描述" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import Table from "@/components/tableTemp/index.vue";
+import Search from "@/components/search/index.vue";
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = [
+  { label: "账号组名称", key: "appName" },
+  { label: "账号组描述", key: "appDesc" },
+];
+const tableData = ref([
+  {
+    id: 1,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 2,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const dT = ref("add");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增账号组");
+const ruleForm = reactive({
+  appName: "",
+  appDesc: "",
+  appId: "",
+});
+const rowIndex = ref(1);
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+const btnClick = (index, row, param) => {
+  rowIndex.value = index;
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.appName;
+  } else {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑账号组";
+    ruleForm.appDesc = row.appDesc;
+    ruleForm.appName = row.appName;
+    ruleForm.appId = row.appId;
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = () => {
+  tableData.value.splice(rowIndex.value, 1);
+  ElMessage.success("删除成功");
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增账号组";
+  dT.value = "add";
+  ruleForm.appDesc = "";
+  ruleForm.appName = "";
+  ruleForm.appId = "";
+};
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (dT.value == "add") {
+        const len = tableData.value.length;
+        tableData.value.push({
+          id: len + 1,
+          appName: ruleForm.appName,
+          appDesc: ruleForm.appDesc,
+          appId: ruleForm.appId,
+        });
+        ElMessage.success("新增成功");
+      } else {
+        tableData.value[rowIndex.value] = {
+          id: tableData.value[rowIndex.value].id,
+          appName: ruleForm.appName,
+          appDesc: ruleForm.appDesc,
+          appId: ruleForm.appId,
+        };
+        ElMessage.success("编辑成功");
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
 </style>

src/views/userManagement/role/auth.vue

@@ -22,6 +22,9 @@
       </div>
       <div class="box auth-list">
         <div class="manageTitle">权限树</div>
+        <div class="t30">
+          <el-tree :data="data" show-checkbox :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
       </div>
       <div class="box auth-list">
         <div class="flex">
@@ -74,6 +77,77 @@ const form = reactive({
   EditRow: "",
   EditCol: "",
 });
+interface Tree {
+  label: string;
+  children?: Tree[];
+}
+
+const handleNodeClick = (data: Tree) => {
+  console.log(data);
+};
+
+const data: Tree[] = [
+  {
+    label: "Level one 1",
+    children: [
+      {
+        label: "Level two 1-1",
+        children: [
+          {
+            label: "Level three 1-1-1",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Level one 2",
+    children: [
+      {
+        label: "Level two 2-1",
+        children: [
+          {
+            label: "Level three 2-1-1",
+          },
+        ],
+      },
+      {
+        label: "Level two 2-2",
+        children: [
+          {
+            label: "Level three 2-2-1",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Level one 3",
+    children: [
+      {
+        label: "Level two 3-1",
+        children: [
+          {
+            label: "Level three 3-1-1",
+          },
+        ],
+      },
+      {
+        label: "Level two 3-2",
+        children: [
+          {
+            label: "Level three 3-2-1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const defaultProps = {
+  children: "children",
+  label: "label",
+};
 </script>
 
 <style lang="scss" scoped>