初始版本，目前线上可用

frontEnd/src/pages/system/role/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <el-row>
+      <baseTableHeader
+        title="角色管理"
+        @resetSearch="resetSearch"
+        @search="search">
+        <template #content>
+          <el-form
+            :model="searchForm"
+            :inline="true"
+            label-position="right"
+            :label-suffix="'：'">
+            <!-- <el-form-item label="所属角色">
+              <el-select
+                v-model="searchForm.roleValue"
+                clearable
+                filterable
+                placeholder="请选择角色"
+                style="width: 150px">
+                <el-option
+                  v-for="item in menues"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="String(item.id)">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <el-form-item label="角色名">
+              <el-input
+                v-model="searchForm.name"
+                placeholder="请输入角色名"></el-input>
+            </el-form-item>
+          </el-form>
+        </template>
+        <template #operateBtns>
+          <el-button size="small" type="primary" @click="add">
+            <el-icon> <CirclePlus /> </el-icon>新增
+          </el-button>
+        </template>
+      </baseTableHeader>
+    </el-row>
+    <el-card style="margin-top: 8px">
+      <base-table :option="tableOption" ref="table">
+        <el-table-column type="index"></el-table-column>
+        <el-table-column prop="name" label="角色名" align="center" />
+        <el-table-column prop="createDate" label="创建时间" align="center" />
+        <el-table-column
+          prop="updateData"
+          label="最后更改时间"
+          align="center" />
+        <!-- <el-table-column label="角色状态" align="center">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.roleState"
+            size="large"
+            width="65px"
+            inline-prompt
+            active-text="启用"
+            :active-value="1"
+            :inactive-value="0"
+            @change="roleStateChange"
+            inactive-text="禁用" />
+        </template>
+      </el-table-column> -->
+        <el-table-column #default="scope" label="操作" align="center">
+          <el-button size="small" type="primary" @click="examine(scope.row)"
+            >查看</el-button
+          >
+          <el-button size="small" type="warning" @click="update(scope.row)"
+            >修改</el-button
+          >
+          <el-button size="small" type="danger" @click="deleteData(scope.row)"
+            >删除</el-button
+          >
+        </el-table-column>
+      </base-table>
+    </el-card>
+    <base-curd-dialog
+      v-model="pageVisibleState.show2LevelPage.value"
+      :title="pageVisibleState.dialogTitle.value"
+      width="50%"
+      :before-close="handleDialogClose"
+      @addConfim="addConfim"
+      @editConfim="editConfim"
+      @closeConfirm="handleDialogClose"
+      :showPageType="pageVisibleState.showPageType">
+      <template #content>
+        <addOrEdite
+          :data="currentRole"
+          @updateData="getRoleData"
+          :executeType="pageVisibleState.executeType.value"
+          v-if="
+            pageVisibleState.showPageType.edit ||
+            pageVisibleState.showPageType.add
+          "></addOrEdite>
+        <roleView :data="currentRole" v-if="pageVisibleState.showPageType.view">
+        </roleView>
+      </template>
+    </base-curd-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import pageVisible from "@/components/curdDialog/pageVisibleState";
+import api from "@/lib/request";
+import { roleType } from "@/types/role";
+import roleView from "./page/view.vue";
+import addOrEdite from "./page/addOrEdit.vue";
+import { systemMenueType } from "@/types/systemMenue";
+import { tableOptionType } from "@/types/table";
+
+const pageVisibleState = new pageVisible({
+  add: "新增角色",
+  edit: "角色编辑",
+  view: "角色查看",
+});
+
+let currentRole = ref<roleType>({});
+let menues = ref<systemMenueType[]>();
+
+const searchForm = reactive({
+  roleValue: "",
+  name: "",
+});
+let table = ref();
+let tableOption = ref<tableOptionType>({
+  url: "/role/list",
+  searchUrl: "/role/query",
+  searchParams: searchForm,
+  executeType: "list",
+});
+
+onMounted(async () => {
+  let respone = await api().get("/system-menue/list?all=true");
+  menues.value = respone.data.list;
+});
+
+function examine(row: roleType) {
+  currentRole.value = row;
+  pageVisibleState.show2LevelPage.value = true;
+  pageVisibleState.showPageType.view = true;
+}
+function update(row: roleType) {
+  currentRole.value = row;
+  pageVisibleState.show2LevelPage.value = true;
+  pageVisibleState.showPageType.edit = true;
+}
+async function deleteData(row: roleType) {
+  ElMessageBox.confirm("确定要删除该用户吗？", "警告", {
+    type: "error",
+  }).then(async () => {
+    let respone = await api().get("/role/delete?id=" + row.id);
+    if (respone.code === 200) {
+      ElMessage.success("角色删除成功！");
+      table.value.methods.setDataType("list");
+    } else {
+      ElMessage.error(respone.msg);
+    }
+  });
+}
+function search() {
+  table.value.methods.setDataType("search");
+}
+function resetSearch() {
+  searchForm.roleValue = "";
+  searchForm.name = "";
+  table.value.methods.setDataType("list");
+  ElMessage.success("重置成功！");
+}
+function handleDialogClose() {
+  pageVisibleState.show2LevelPage.value = false;
+}
+function addConfim() {
+  ElMessageBox.confirm("确定增加数据吗？", "提示", { type: "warning" }).then(
+    async () => {
+      let res = await api().post("/role/add", currentRole.value);
+      if (res.code === 200) {
+        ElMessage.success("添加成功");
+        pageVisibleState.show2LevelPage.value = false;
+        table.value.methods.setDataType("list");
+      }
+    }
+  );
+}
+function editConfim() {
+  ElMessageBox.confirm("确定要修改数据吗？", "提示", { type: "warning" }).then(
+    async () => {
+      let respone = await api().post("/role/update", currentRole.value);
+      if (respone.code == 200) {
+        ElMessage.success("修改成功！");
+        pageVisibleState.show2LevelPage.value = false;
+        table.value.methods.setDataType("list");
+      }
+    }
+  );
+}
+
+function getRoleData(newVal: roleType) {
+  currentRole.value = { ...newVal };
+}
+
+function add() {
+  pageVisibleState.show2LevelPage.value = true;
+  pageVisibleState.showPageType.add = true;
+}
+
+function roleStateChange(state: any) {}
+</script>
+<style lang="scss" scoped></style>