|
@@ -1,49 +1,77 @@
|
|
|
<script setup lang="ts">
|
|
|
import { useColumns } from "./columns";
|
|
|
-import { getRoleList } from "/@/api/system";
|
|
|
+import { httpList, httpStatus } from "/@/api/interest/role";
|
|
|
import { reactive, ref, onMounted } from "vue";
|
|
|
import { type FormInstance } from "element-plus";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
import { TableProBar } from "/@/components/ReTable";
|
|
|
import { type PaginationProps } from "@pureadmin/table";
|
|
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
|
|
-
|
|
|
+import { useNav } from "/@/layout/hooks/nav";
|
|
|
+import { statusList } from "/@/utils/status";
|
|
|
+import menuType from "./types";
|
|
|
+import addEdit from "./addEdit.vue";
|
|
|
+const { logout } = useNav();
|
|
|
defineOptions({
|
|
|
- name: "Role"
|
|
|
+ name: "role"
|
|
|
});
|
|
|
|
|
|
const form = reactive({
|
|
|
- name: "",
|
|
|
- code: "",
|
|
|
- status: ""
|
|
|
+ level: "",
|
|
|
+ role_name: "",
|
|
|
+ status: "",
|
|
|
+ page: 1,
|
|
|
+ size: 15
|
|
|
});
|
|
|
|
|
|
-let dataList = ref([]);
|
|
|
-let loading = ref(true);
|
|
|
+const dataList = ref([]);
|
|
|
+const loading = ref(true);
|
|
|
const { columns } = useColumns();
|
|
|
-
|
|
|
+const showModel = ref(false);
|
|
|
+const itemId = ref("");
|
|
|
+const isDetails = ref("add");
|
|
|
+const sitem = reactive<menuType>({
|
|
|
+ id: "", //账户id
|
|
|
+ role_name: "", //真实姓名
|
|
|
+ mobile: "", //手机号
|
|
|
+ email: "", //邮箱
|
|
|
+ role: "" //角色
|
|
|
+});
|
|
|
const formRef = ref<FormInstance>();
|
|
|
|
|
|
const pagination = reactive<PaginationProps>({
|
|
|
total: 0,
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 15,
|
|
|
currentPage: 1,
|
|
|
background: true
|
|
|
});
|
|
|
+//重置密码
|
|
|
|
|
|
-function handleUpdate(row) {
|
|
|
- console.log(row);
|
|
|
-}
|
|
|
-
|
|
|
-function handleDelete(row) {
|
|
|
- console.log(row);
|
|
|
-}
|
|
|
+//修改状态
|
|
|
+const handleStatus = async row => {
|
|
|
+ const { id, status } = row;
|
|
|
+ const { code, message } = await httpStatus({
|
|
|
+ id,
|
|
|
+ status: status + "" === "1" ? "0" : "1"
|
|
|
+ });
|
|
|
+ if (code === 0) {
|
|
|
+ onSearch();
|
|
|
+ } else if (code > 100 && code < 140) {
|
|
|
+ logout();
|
|
|
+ } else {
|
|
|
+ ElMessage.error(message);
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
-function handleCurrentChange(val: number) {
|
|
|
- console.log(`current page: ${val}`);
|
|
|
+async function handleCurrentChange(val: number) {
|
|
|
+ form.page = val;
|
|
|
+ await onSearch();
|
|
|
}
|
|
|
|
|
|
-function handleSizeChange(val: number) {
|
|
|
- console.log(`${val} items per page`);
|
|
|
+async function handleSizeChange(val: number) {
|
|
|
+ form.size = val;
|
|
|
+ form.page = 1;
|
|
|
+ await onSearch();
|
|
|
}
|
|
|
|
|
|
function handleSelectionChange(val) {
|
|
@@ -52,17 +80,45 @@ function handleSelectionChange(val) {
|
|
|
|
|
|
async function onSearch() {
|
|
|
loading.value = true;
|
|
|
- let { data } = await getRoleList();
|
|
|
- dataList.value = data.list;
|
|
|
- pagination.total = data.total;
|
|
|
- setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
- }, 500);
|
|
|
+ const { code, data, message } = await httpList(form);
|
|
|
+ if (code === 0) {
|
|
|
+ const { list, count } = data;
|
|
|
+ dataList.value = list ?? [];
|
|
|
+ pagination.total = count ?? 0;
|
|
|
+ pagination.pageSize = form.size;
|
|
|
+ pagination.currentPage = form.page;
|
|
|
+ } else if (code > 100 && code < 140) {
|
|
|
+ logout();
|
|
|
+ } else {
|
|
|
+ ElMessage.error(message);
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+async function resetSearch() {
|
|
|
+ form.page = 1;
|
|
|
+ await onSearch();
|
|
|
+}
|
|
|
+//新建/编辑/详情弹窗
|
|
|
+function editItem(id, type, item) {
|
|
|
+ itemId.value = id;
|
|
|
+ isDetails.value = type;
|
|
|
+ for (let key in item) {
|
|
|
+ sitem[key] = item[key];
|
|
|
+ }
|
|
|
+ showModel.value = true;
|
|
|
}
|
|
|
+const submitRefresh = () => {
|
|
|
+ showModel.value = false;
|
|
|
+ onSearch();
|
|
|
+};
|
|
|
+const submitCancel = () => {
|
|
|
+ showModel.value = false;
|
|
|
+};
|
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
+ form.page = 1;
|
|
|
onSearch();
|
|
|
};
|
|
|
|
|
@@ -77,26 +133,33 @@ onMounted(() => {
|
|
|
ref="formRef"
|
|
|
:inline="true"
|
|
|
:model="form"
|
|
|
+ :label-width="0"
|
|
|
class="bg-white w-99/100 pl-8 pt-4"
|
|
|
>
|
|
|
- <el-form-item label="角色名称:" prop="name">
|
|
|
- <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="角色标识:" prop="code">
|
|
|
- <el-input v-model="form.code" placeholder="请输入角色标识" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态:" prop="status">
|
|
|
- <el-select v-model="form.status" placeholder="请选择状态" clearable>
|
|
|
- <el-option label="已开启" value="1" />
|
|
|
- <el-option label="已关闭" value="0" />
|
|
|
+ <el-form-item prop="status">
|
|
|
+ <el-select
|
|
|
+ v-model="form.status"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="角色状态"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(si, sii) in statusList"
|
|
|
+ :key="'status' + si.value + sii"
|
|
|
+ :label="si.label"
|
|
|
+ :value="si.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="role_name">
|
|
|
+ <el-input v-model="form.role_name" placeholder="角色名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="useRenderIcon('search')"
|
|
|
:loading="loading"
|
|
|
- @click="onSearch"
|
|
|
+ @click="resetSearch"
|
|
|
>
|
|
|
搜索
|
|
|
</el-button>
|
|
@@ -107,20 +170,24 @@ onMounted(() => {
|
|
|
</el-form>
|
|
|
|
|
|
<TableProBar
|
|
|
- title="角色列表"
|
|
|
+ title="角色管理"
|
|
|
:loading="loading"
|
|
|
:dataList="dataList"
|
|
|
@refresh="onSearch"
|
|
|
>
|
|
|
<template #buttons>
|
|
|
- <el-button type="primary" :icon="useRenderIcon('add')">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="useRenderIcon('add')"
|
|
|
+ @click="editItem('', 'add', {})"
|
|
|
+ >
|
|
|
新增角色
|
|
|
</el-button>
|
|
|
</template>
|
|
|
<template v-slot="{ size, checkList }">
|
|
|
<PureTable
|
|
|
border
|
|
|
- align="center"
|
|
|
+ align="left"
|
|
|
showOverflowTooltip
|
|
|
table-layout="auto"
|
|
|
:size="size"
|
|
@@ -140,65 +207,47 @@ onMounted(() => {
|
|
|
link
|
|
|
type="primary"
|
|
|
:size="size"
|
|
|
- @click="handleUpdate(row)"
|
|
|
+ @click="editItem(row.id, 'view', row)"
|
|
|
+ :icon="useRenderIcon('eye-view')"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ class="reset-margin"
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ :size="size"
|
|
|
+ @click="editItem(row.id, 'edit', row)"
|
|
|
:icon="useRenderIcon('edits')"
|
|
|
+ />
|
|
|
+ <el-popconfirm
|
|
|
+ :title="row.status === '1' ? '改为禁用?' : '改为启用?'"
|
|
|
+ @confirm="handleStatus(row)"
|
|
|
>
|
|
|
- 修改
|
|
|
- </el-button>
|
|
|
- <el-popconfirm title="是否确认删除?">
|
|
|
<template #reference>
|
|
|
<el-button
|
|
|
class="reset-margin"
|
|
|
link
|
|
|
type="primary"
|
|
|
:size="size"
|
|
|
- :icon="useRenderIcon('delete')"
|
|
|
- @click="handleDelete(row)"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-popconfirm>
|
|
|
- <el-dropdown>
|
|
|
- <el-button
|
|
|
- class="ml-3"
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :size="size"
|
|
|
- @click="handleUpdate(row)"
|
|
|
- :icon="useRenderIcon('more')"
|
|
|
- />
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item>
|
|
|
- <el-button
|
|
|
- class="reset-margin !h-20px !text-gray-500"
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :size="size"
|
|
|
- :icon="useRenderIcon('menu')"
|
|
|
- >
|
|
|
- 菜单权限
|
|
|
- </el-button>
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item>
|
|
|
- <el-button
|
|
|
- class="reset-margin !h-20px !text-gray-500"
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- :size="size"
|
|
|
- :icon="useRenderIcon('database')"
|
|
|
- >
|
|
|
- 数据权限
|
|
|
- </el-button>
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
+ :icon="
|
|
|
+ useRenderIcon(
|
|
|
+ row.status === '1'
|
|
|
+ ? 'close-circle-line'
|
|
|
+ : 'checkbox-circle-line'
|
|
|
+ )
|
|
|
+ " /></template
|
|
|
+ ></el-popconfirm>
|
|
|
</template>
|
|
|
</PureTable>
|
|
|
</template>
|
|
|
</TableProBar>
|
|
|
+ <addEdit
|
|
|
+ :itemId="itemId"
|
|
|
+ :isDetails="isDetails"
|
|
|
+ :show-model="showModel"
|
|
|
+ @refresh="submitRefresh"
|
|
|
+ @cancel="submitCancel"
|
|
|
+ :sitem="sitem"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|