From 332297d22741db5375fa057d7d8356c5b384cae6 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Wed, 23 Aug 2023 13:57:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=8F=9C=E5=8D=95=E5=92=8C?=
 =?UTF-8?q?=E8=A7=92=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user_menu.ts          |  26 +++
 src/api/user_role.ts          |  26 +++
 src/views/user_menu/edit.vue  | 289 ++++++++++++++++++++++++++++++++++
 src/views/user_menu/index.vue | 251 +++++++++++++++++++++++++++++
 src/views/user_role/edit.vue  | 126 +++++++++++++++
 src/views/user_role/index.vue | 140 ++++++++++++++++
 6 files changed, 858 insertions(+)
 create mode 100644 src/api/user_menu.ts
 create mode 100644 src/api/user_role.ts
 create mode 100644 src/views/user_menu/edit.vue
 create mode 100644 src/views/user_menu/index.vue
 create mode 100644 src/views/user_role/edit.vue
 create mode 100644 src/views/user_role/index.vue

diff --git a/src/api/user_menu.ts b/src/api/user_menu.ts
new file mode 100644
index 0000000..4eac3ca
--- /dev/null
+++ b/src/api/user_menu.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 系统菜单表列表
+export function apiUserMenuLists(params: any) {
+    return request.get({ url: '/user.user_menu/lists', params })
+}
+
+// 添加系统菜单表
+export function apiUserMenuAdd(params: any) {
+    return request.post({ url: '/user.user_menu/add', params })
+}
+
+// 编辑系统菜单表
+export function apiUserMenuEdit(params: any) {
+    return request.post({ url: '/user.user_menu/edit', params })
+}
+
+// 删除系统菜单表
+export function apiUserMenuDelete(params: any) {
+    return request.post({ url: '/user.user_menu/delete', params })
+}
+
+// 系统菜单表详情
+export function apiUserMenuDetail(params: any) {
+    return request.get({ url: '/user.user_menu/detail', params })
+}
\ No newline at end of file
diff --git a/src/api/user_role.ts b/src/api/user_role.ts
new file mode 100644
index 0000000..be92aa6
--- /dev/null
+++ b/src/api/user_role.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 角色表列表
+export function apiUserRoleLists(params: any) {
+    return request.get({ url: '/user.user_role/lists', params })
+}
+
+// 添加角色表
+export function apiUserRoleAdd(params: any) {
+    return request.post({ url: '/user.user_role/add', params })
+}
+
+// 编辑角色表
+export function apiUserRoleEdit(params: any) {
+    return request.post({ url: '/user.user_role/edit', params })
+}
+
+// 删除角色表
+export function apiUserRoleDelete(params: any) {
+    return request.post({ url: '/user.user_role/delete', params })
+}
+
+// 角色表详情
+export function apiUserRoleDetail(params: any) {
+    return request.get({ url: '/user.user_role/detail', params })
+}
\ No newline at end of file
diff --git a/src/views/user_menu/edit.vue b/src/views/user_menu/edit.vue
new file mode 100644
index 0000000..7ae2718
--- /dev/null
+++ b/src/views/user_menu/edit.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      :title="popupTitle"
+      :async="true"
+      width="550px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="90px"
+        :rules="formRules"
+      >
+        <!-- <el-form-item label="菜单类型:" prop="type">
+          <el-radio-group v-model="formData.type">
+            <el-radio :label="MenuEnum.CATALOGUE">目录</el-radio>
+            <el-radio :label="MenuEnum.MENU">菜单</el-radio>
+          </el-radio-group>
+        </el-form-item> -->
+        <el-form-item label="上级目录" prop="pid">
+          <el-tree-select
+            class="flex-1"
+            v-model="formData.pid"
+            :data="previousMenuList"
+            clearable
+            node-key="id"
+            :props="{
+              label: 'name',
+            }"
+            :default-expand-all="true"
+            placeholder="请选择父级目录"
+            check-strictly
+          />
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="name">
+          <el-input
+            v-model="formData.name"
+            clearable
+            placeholder="请输入菜单名称"
+          />
+        </el-form-item>
+        <el-form-item label="菜单图标" prop="icon">
+          <el-upload
+            class="avatar-uploader"
+            style="
+              border: 1px dashed var(--el-border-color);
+              border-radius: 6px;
+              overflow: hidden;
+            "
+            v-model="formData.icon"
+            action="https://worker-task.lihaink.cn/api/upload/image"
+            :show-file-list="false"
+            :data="{ cid: 1 }"
+            :on-success="handleMenuIcon"
+          >
+            <img v-if="formData.icon" :src="formData.icon" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="sort">
+          <el-input
+            v-model="formData.sort"
+            clearable
+            placeholder="请输入菜单排序"
+            type="number"
+          />
+        </el-form-item>
+        <el-form-item label="路由地址" prop="paths">
+          <el-input
+            v-model="formData.paths"
+            clearable
+            placeholder="请输入路由地址"
+          />
+        </el-form-item>
+        <el-form-item label="路由参数" prop="params">
+          <el-input
+            v-model="formData.params"
+            clearable
+            placeholder="请输入路由参数"
+          />
+        </el-form-item>
+        <el-form-item label="是否显示:" prop="is_show">
+          <el-radio-group v-model="formData.is_show">
+            <el-radio :label="1">显示</el-radio>
+            <el-radio :label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否禁用:" prop="is_disable">
+          <el-radio-group v-model="formData.is_disable">
+            <el-radio :label="0">正常</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="userMenuEdit">
+import type { FormInstance } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import {
+  apiUserMenuAdd,
+  apiUserMenuEdit,
+  apiUserMenuDetail,
+} from "@/api/user_menu";
+import { timeFormat } from "@/utils/util";
+import type { PropType } from "vue";
+import { MenuEnum } from "@/enums/appEnums";
+defineProps({
+  dictData: {
+    type: Object as PropType<Record<string, any[]>>,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(["success", "close"]);
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+
+const isDisabled = ref(false);
+
+const handleMenuIcon = (res: any) => {
+  formData.icon = res.data.uri;
+};
+
+const previousMenuList = reactive([{ id: 0, name: "顶级", children: [] }]);
+
+// 弹窗标题
+const popupTitle = computed(() => {
+  return mode.value == "edit" ? "编辑系统菜单表" : "新增系统菜单表";
+});
+
+// 表单数据
+const formData = reactive({
+  id: "",
+  pid: "",
+  type: MenuEnum.MENU,
+  name: "",
+  icon: "",
+  sort: 0,
+  paths: "",
+  params: "",
+  is_show: 1,
+  is_disable: 0,
+});
+
+// 表单验证
+const formRules = reactive<any>({
+  pid: [
+    {
+      required: true,
+      message: "请输入上级菜单",
+      trigger: ["blur"],
+    },
+  ],
+  type: [
+    {
+      required: true,
+      message: "请输入权限类型: M=目录，C=菜单，A=按钮",
+      trigger: ["blur"],
+    },
+  ],
+  name: [
+    {
+      required: true,
+      message: "请输入菜单名称",
+      trigger: ["blur"],
+    },
+  ],
+  icon: [
+    {
+      required: true,
+      message: "请输入菜单图标",
+      trigger: ["blur"],
+    },
+  ],
+  sort: [
+    {
+      required: true,
+      message: "请输入菜单排序",
+      trigger: ["blur"],
+    },
+  ],
+  paths: [
+    {
+      required: true,
+      message: "请输入路由地址",
+      trigger: ["blur"],
+    },
+  ],
+  params: [
+    {
+      required: false,
+      message: "请输入路由参数",
+      trigger: ["blur"],
+    },
+  ],
+  is_show: [
+    {
+      required: true,
+      message: "请输入是否显示",
+      trigger: ["blur"],
+    },
+  ],
+  is_disable: [
+    {
+      required: true,
+      message: "请输入是否禁用",
+      trigger: ["blur"],
+    },
+  ],
+});
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await apiUserMenuDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 提交按钮
+const handleSubmit = async () => {
+  await formRef.value?.validate();
+  const data = { ...formData };
+  mode.value == "edit"
+    ? await apiUserMenuEdit(data)
+    : await apiUserMenuAdd(data);
+  popupRef.value?.close();
+  emit("success");
+};
+
+//打开弹窗
+const open = (type = "add") => {
+  mode.value = type;
+  popupRef.value?.open();
+};
+
+// 关闭回调
+const handleClose = () => {
+  emit("close");
+};
+
+defineExpose({
+  open,
+  setFormData,
+  getDetail,
+});
+</script>
+
+<style lang="scss" scoped>
+.avatar-uploader .avatar {
+  width: 80px;
+  height: 80px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color) !important;
+  border-radius: 6px;
+  cursor: pointer;
+  overflow: hidden;
+  /* transition: var(--el-transition-duration-fast); */
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px;
+  height: 80px;
+  text-align: center;
+}
+</style>
diff --git a/src/views/user_menu/index.vue b/src/views/user_menu/index.vue
new file mode 100644
index 0000000..30c13d8
--- /dev/null
+++ b/src/views/user_menu/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px]" :model="queryParams" inline>
+        <!-- <el-form-item label="上级菜单" prop="pid">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.pid"
+            clearable
+            placeholder="请输入上级菜单"
+          />
+        </el-form-item> -->
+        <!-- <el-form-item label="权限类型: M=目录，C=菜单，A=按钮" prop="type">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.type"
+            clearable
+            placeholder="请输入权限类型: M=目录，C=菜单，A=按钮"
+          />
+        </el-form-item> -->
+        <el-form-item label="菜单名称" prop="name">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.name"
+            clearable
+            placeholder="请输入菜单名称"
+          />
+        </el-form-item>
+        <el-form-item label="菜单图标" prop="icon">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.icon"
+            clearable
+            placeholder="请输入菜单图标"
+          />
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="sort">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.sort"
+            clearable
+            placeholder="请输入菜单排序"
+          />
+        </el-form-item>
+        <el-form-item label="路由地址" prop="paths">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.paths"
+            clearable
+            placeholder="请输入路由地址"
+          />
+        </el-form-item>
+        <el-form-item label="路由参数" prop="params">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.params"
+            clearable
+            placeholder="请输入路由参数"
+          />
+        </el-form-item>
+        <el-form-item label="是否显示:" prop="is_show">
+          <el-select
+            v-model="queryParams.is_show"
+            placeholder="是否显示"
+            clearable
+            class="w-[240px]"
+          >
+            <el-option label="显示" value="1"></el-option>
+            <el-option label="隐藏" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否禁用:" prop="is_disable">
+          <el-select
+            v-model="queryParams.is_disable"
+            placeholder="是否禁用"
+            clearable
+            class="w-[240px]"
+          >
+            <el-option label="正常" value="0"></el-option>
+            <el-option label="禁用" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+      <el-button
+        v-perms="['user.user_menu/add']"
+        type="primary"
+        @click="handleAdd"
+      >
+        <template #icon>
+          <icon name="el-icon-Plus" />
+        </template>
+        新增
+      </el-button>
+      <el-button
+        v-perms="['user.user_menu/delete']"
+        :disabled="!selectData.length"
+        @click="handleDelete(selectData)"
+      >
+        删除
+      </el-button>
+      <div class="mt-4">
+        <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="上级目录" prop="pid" show-overflow-tooltip />
+          <!-- <el-table-column
+            label="权限类型: M=目录，C=菜单，A=按钮"
+            prop="type"
+            show-overflow-tooltip
+          /> -->
+          <el-table-column label="菜单名称" prop="name" show-overflow-tooltip />
+          <el-table-column label="菜单图标" prop="icon" show-overflow-tooltip />
+          <el-table-column label="菜单排序" prop="sort" show-overflow-tooltip />
+          <el-table-column
+            label="路由地址"
+            prop="paths"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="路由参数"
+            prop="params"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="是否显示"
+            prop="is_show"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <el-tag v-if="row.is_show == 1">显示</el-tag>
+              <el-tag v-else type="danger">隐藏</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="是否禁用"
+            prop="is_disable"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <el-tag v-if="row.is_disable == 0">正常</el-tag>
+              <el-tag v-else type="danger">禁用</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-perms="['user.user_menu/edit']"
+                type="primary"
+                link
+                @click="handleEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                v-perms="['user.user_menu/delete']"
+                type="danger"
+                link
+                @click="handleDelete(row.id)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="flex mt-4 justify-end">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      :dict-data="dictData"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="userMenuLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import { apiUserMenuLists, apiUserMenuDelete } from "@/api/user_menu";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+import EditPopup from "./edit.vue";
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+// 是否显示编辑框
+const showEdit = ref(false);
+
+// 查询条件
+const queryParams = reactive({
+  pid: "",
+  type: "",
+  name: "",
+  icon: "",
+  sort: "",
+  paths: "",
+  params: "",
+  is_show: "",
+  is_disable: "",
+});
+
+// 选中数据
+const selectData = ref<any[]>([]);
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+  selectData.value = val.map(({ id }) => id);
+};
+
+// 获取字典数据
+const { dictData } = useDictData("");
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiUserMenuLists,
+  params: queryParams,
+});
+
+// 添加
+const handleAdd = async () => {
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("add");
+};
+
+// 编辑
+const handleEdit = async (data: any) => {
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("edit");
+  editRef.value?.setFormData(data);
+};
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+  await feedback.confirm("确定要删除？");
+  await apiUserMenuDelete({ id });
+  getLists();
+};
+
+getLists();
+</script>
+
diff --git a/src/views/user_role/edit.vue b/src/views/user_role/edit.vue
new file mode 100644
index 0000000..1bb3c5c
--- /dev/null
+++ b/src/views/user_role/edit.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="edit-popup">
+        <popup
+            ref="popupRef"
+            :title="popupTitle"
+            :async="true"
+            width="550px"
+            @confirm="handleSubmit"
+            @close="handleClose"
+        >
+            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
+                <el-form-item label="名称" prop="name">
+                    <el-input v-model="formData.name" clearable placeholder="请输入名称" />
+                </el-form-item>
+                <el-form-item label="描述" prop="desc">
+                    <el-input v-model="formData.desc" clearable placeholder="请输入描述" />
+                </el-form-item>
+                <el-form-item label="权限id" prop="menu_arr">
+                    <el-input v-model="formData.menu_arr" clearable placeholder="请输入权限id" />
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input v-model="formData.sort" clearable placeholder="请输入排序" />
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="userRoleEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiUserRoleAdd, apiUserRoleEdit, apiUserRoleDetail } from '@/api/user_role'
+import { timeFormat } from '@/utils/util'
+import type { PropType } from 'vue'
+defineProps({
+    dictData: {
+        type: Object as PropType<Record<string, any[]>>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+
+
+// 弹窗标题
+const popupTitle = computed(() => {
+    return mode.value == 'edit' ? '编辑角色表' : '新增角色表'
+})
+
+// 表单数据
+const formData = reactive({
+    id: '',
+    name: '',
+    desc: '',
+    menu_arr: '',
+    sort: '',
+})
+
+
+// 表单验证
+const formRules = reactive<any>({
+    name: [{
+        required: true,
+        message: '请输入名称',
+        trigger: ['blur']
+    }],
+    desc: [{
+        required: true,
+        message: '请输入描述',
+        trigger: ['blur']
+    }]
+})
+
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key]
+        }
+    }
+    
+    
+}
+
+const getDetail = async (row: Record<string, any>) => {
+    const data = await apiUserRoleDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiUserRoleEdit(data) 
+        : await apiUserRoleAdd(data)
+    popupRef.value?.close()
+    emit('success')
+}
+
+//打开弹窗
+const open = (type = 'add') => {
+    mode.value = type
+    popupRef.value?.open()
+}
+
+// 关闭回调
+const handleClose = () => {
+    emit('close')
+}
+
+
+
+defineExpose({
+    open,
+    setFormData,
+    getDetail
+})
+</script>
diff --git a/src/views/user_role/index.vue b/src/views/user_role/index.vue
new file mode 100644
index 0000000..6fc0832
--- /dev/null
+++ b/src/views/user_role/index.vue
@@ -0,0 +1,140 @@
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form
+                class="mb-[-16px]"
+                :model="queryParams"
+                inline
+            >
+                <el-form-item label="名称" prop="name">
+                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入名称" />
+                </el-form-item>
+                <el-form-item label="描述" prop="desc">
+                    <el-input class="w-[280px]" v-model="queryParams.desc" clearable placeholder="请输入描述" />
+                </el-form-item>
+                <el-form-item label="权限id" prop="menu_arr">
+                    <el-input class="w-[280px]" v-model="queryParams.menu_arr" clearable placeholder="请输入权限id" />
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input class="w-[280px]" v-model="queryParams.sort" clearable placeholder="请输入排序" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button @click="resetParams">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+            <el-button v-perms="['user.user_role/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button
+                v-perms="['user.user_role/delete']"
+                :disabled="!selectData.length"
+                @click="handleDelete(selectData)"
+            >
+                删除
+            </el-button>
+            <div class="mt-4">
+                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column label="名称" prop="name" show-overflow-tooltip />
+                    <el-table-column label="描述" prop="desc" show-overflow-tooltip />
+                    <el-table-column label="权限id" prop="menu_arr" show-overflow-tooltip />
+                    <el-table-column label="排序" prop="sort" show-overflow-tooltip />
+                    <el-table-column label="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                             <el-button
+                                v-perms="['user.user_role/edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['user.user_role/delete']"
+                                type="danger"
+                                link
+                                @click="handleDelete(row.id)"
+                            >
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="flex mt-4 justify-end">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+    </div>
+</template>
+
+<script lang="ts" setup name="userRoleLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiUserRoleLists, apiUserRoleDelete } from '@/api/user_role'
+import { timeFormat } from '@/utils/util'
+import feedback from '@/utils/feedback'
+import EditPopup from './edit.vue'
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+// 是否显示编辑框
+const showEdit = ref(false)
+
+
+// 查询条件
+const queryParams = reactive({
+    name: '',
+    desc: '',
+    menu_arr: '',
+    sort: ''
+})
+
+// 选中数据
+const selectData = ref<any[]>([])
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
+
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiUserRoleLists,
+    params: queryParams
+})
+
+// 添加
+const handleAdd = async () => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('add')
+}
+
+// 编辑
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm('确定要删除？')
+    await apiUserRoleDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+