添加账号管理

src/views/userManagement/account/index.vue

@@ -1,9 +1,235 @@
 <template>
-  <div>账号管理</div>
+  <div class="application account 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 flex">
+      <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" />
+    </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="roleName">
+          <el-input v-model="ruleForm.roleName" size="default" placeholder="请输入账号名称" />
+        </el-form-item>
+        <el-form-item label="账号密码" prop="rolePwd">
+          <el-input v-model="ruleForm.rolePwd" type="password" show-password size="default" placeholder="请输入账号名称" />
+        </el-form-item>
+        <el-form-item label="账号描述" prop="roleDesc">
+          <el-input v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入账号描述" />
+        </el-form-item>
+        <el-form-item label="是否启用" prop="roleStatus">
+          <el-radio-group v-model="ruleForm.roleStatus">
+            <el-radio label="1">启用</el-radio>
+            <el-radio label="2"> 禁用</el-radio>
+          </el-radio-group>
+        </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";
+interface Tree {
+  label: string;
+  children?: Tree[];
+}
+const router = useRouter();
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = [
+  { label: "账号名称", key: "roleName" },
+  { label: "账号数", key: "accountNum" },
+  { label: "权限项数", key: "authNum" },
+  { label: "是否存在互斥", key: "isHc" },
+  { label: "启用状态", key: "status" },
+  { label: "描述", key: "desc" },
+];
+const tableData = ref([
+  {
+    id: 1,
+    roleName: "11",
+    accountNum: "22",
+    authNum: "33",
+    isHc: "是",
+    status: "启用",
+    desc: "555",
+    pwd: "",
+  },
+  {
+    id: 2,
+    roleName: "11",
+    accountNum: "22",
+    authNum: "33",
+    isHc: "是",
+    status: "启用",
+    desc: "555",
+    pwd: "",
+  },
+]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "查看权限",
+    className: "editBtn",
+    param: "auth",
+  },
+  {
+    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({
+  roleName: "",
+  roleDesc: "",
+  roleStatus: "",
+  rolePwd: "",
+});
+const rowIndex = ref(1);
+
+const handleNodeClick = (data: Tree) => {
+  console.log(data);
+};
+
+const data: Tree[] = [
+  {
+    label: "全部账号组",
+    children: [
+      {
+        label: "账号组名称",
+        children: [],
+      },
+      {
+        label: "账号组名称",
+        children: [],
+      },
+    ],
+  },
+];
+
+const defaultProps = {
+  children: "children",
+  label: "label",
+};
+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.roleName;
+  } else if (param == "edit") {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑账号";
+    ruleForm.roleName = row.roleName;
+    ruleForm.roleDesc = row.desc;
+    ruleForm.roleStatus = row.status;
+    ruleForm.rolePwd = row.pwd;
+  } else {
+    router.push("/userManagement/auth");
+  }
+};
+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.roleDesc = "";
+  ruleForm.roleName = "";
+  ruleForm.roleStatus = "";
+};
+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,
+          roleName: ruleForm.roleName,
+          desc: ruleForm.roleDesc,
+          status: ruleForm.roleStatus,
+          pwd: ruleForm.rolePwd,
+          accountNum: "22",
+          authNum: "33",
+          isHc: "是",
+        });
+        ElMessage.success("新增成功");
+      } else {
+        tableData.value[rowIndex.value] = {
+          id: tableData.value[rowIndex.value].id,
+          roleName: ruleForm.roleName,
+          desc: ruleForm.roleDesc,
+          status: ruleForm.roleStatus,
+          pwd: ruleForm.rolePwd,
+          accountNum: "22",
+          authNum: "33",
+          isHc: "是",
+        };
+        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);
+  }
+}
+.account {
+  &-tree {
+    width: 488px;
+    margin-right: 24px;
+  }
+  &-table {
+    flex: 1;
+  }
+}
 </style>