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

<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>