添加角色管理

components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     Minheader: typeof import('./src/components/minheader/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Search: typeof import('./src/components/search/index.vue')['default']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
     TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']

src/components/search/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="search">
+    <div class="flex">
+      <el-input class="search-input" @clear="clear" clearable v-model="input" size="default" :placeholder="placeholder" :prefix-icon="Search" />
+      <el-button class="search-button" size="default" @click="search" type="primary">搜索</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Search } from "@element-plus/icons-vue";
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "请输入您要搜索的内容",
+  },
+});
+const emits = defineEmits(["clear", "search"]);
+const { placeholder } = props;
+const input = ref("");
+const clear = () => {
+  emits("clear");
+};
+const search = () => {
+  emits("search", input.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+  &-input {
+    width: 240px;
+    margin-right: 12px;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+  }
+  &-button {
+    margin-right: 16px;
+  }
+}
+</style>

src/router/routes/routes-file-two.ts

@@ -38,6 +38,13 @@ const HomeRoutes = {
       meta: { title: '应用管理', elSvgIcon: 'Fold', icon: 'table' },
       component: () => import('@/views/userManagement/application/index.vue'),
     },
+    {
+      path: 'auth',
+      name: 'Auth',
+      hidden: true,
+      meta: { title: '角色授权', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/userManagement/role/auth.vue'),
+    },
   ],
 }
 

src/theme/index.scss

@@ -16,6 +16,21 @@
 .el-input__wrapper {
   border-radius: 2px;
 }
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px #ac014d inset;
+}
+.el-textarea__inner {
+  &:focus {
+    box-shadow: 0 0 0 1px #ac014d inset;
+  }
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background: #ac014d;
+  border-color: #ac014d;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: #ac014d;
+}
 .manageTitle {
   position: relative;
   padding-left: 12px;
@@ -29,7 +44,7 @@
   line-height: 30px;
   &::after {
     position: absolute;
-    content: "";
+    content: '';
     width: 4px;
     height: 20px;
     top: 0;

src/views/userManagement/role/auth.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="auth scroll-y">到底</div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/userManagement/role/index.vue

@@ -1,9 +1,185 @@
 <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="roleName">
+          <el-input v-model="ruleForm.roleName" 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";
+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",
+  },
+  {
+    id: 2,
+    roleName: "11",
+    accountNum: "22",
+    authNum: "33",
+    isHc: "是",
+    status: "启用",
+    desc: "555",
+  },
+]);
+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: "",
+});
+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.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;
+  } 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,
+          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,
+          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);
+  }
+}
 </style>