-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
270 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
249 changes: 249 additions & 0 deletions
249
superclient/src/views/computer/computerManage/index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,249 @@ | ||
| <script lang="ts" setup> | ||
| import { reactive, ref, watch } from "vue" | ||
| import { createTableDataApi, deleteTableDataApi, updateTableDataApi } from "@/api/table" | ||
| import { type IGetTableData } from "@/api/table/types/table" | ||
| import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus" | ||
| import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue" | ||
| import { usePagination } from "@/hooks/usePagination" | ||
| import { Access } from "@/api/permissions/types" | ||
| import { listPermissionAccess } from "@/api/permissions" | ||
| defineOptions({ | ||
| name: "ComputerManage" | ||
| }) | ||
| const loading = ref<boolean>(false) | ||
| const { paginationData, handleCurrentChange, handleSizeChange } = usePagination() | ||
| //#region 增 | ||
| const dialogVisible = ref<boolean>(false) | ||
| const formRef = ref<FormInstance | null>(null) | ||
| const formData = reactive({ | ||
| username: "", | ||
| password: "" | ||
| }) | ||
| const formRules: FormRules = reactive({ | ||
| username: [{ required: true, trigger: "blur", message: "请输入用户名" }], | ||
| password: [{ required: true, trigger: "blur", message: "请输入密码" }] | ||
| }) | ||
| const handleCreate = () => { | ||
| formRef.value?.validate((valid: boolean) => { | ||
| if (valid) { | ||
| if (currentUpdateId.value === undefined) { | ||
| createTableDataApi({ | ||
| username: formData.username, | ||
| password: formData.password | ||
| }).then(() => { | ||
| ElMessage.success("新增成功") | ||
| dialogVisible.value = false | ||
| getTableData() | ||
| }) | ||
| } else { | ||
| updateTableDataApi({ | ||
| id: currentUpdateId.value, | ||
| username: formData.username | ||
| }).then(() => { | ||
| ElMessage.success("修改成功") | ||
| dialogVisible.value = false | ||
| getTableData() | ||
| }) | ||
| } | ||
| } else { | ||
| return false | ||
| } | ||
| }) | ||
| } | ||
| const resetForm = () => { | ||
| currentUpdateId.value = undefined | ||
| formData.username = "" | ||
| formData.password = "" | ||
| } | ||
| //#endregion | ||
| //#region 删 | ||
| const handleDelete = (row: IGetTableData) => { | ||
| ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, "提示", { | ||
| confirmButtonText: "确定", | ||
| cancelButtonText: "取消", | ||
| type: "warning" | ||
| }).then(() => { | ||
| deleteTableDataApi(row.id).then(() => { | ||
| ElMessage.success("删除成功") | ||
| getTableData() | ||
| }) | ||
| }) | ||
| } | ||
| //#endregion | ||
| //#region 改 | ||
| const currentUpdateId = ref<undefined | string>(undefined) | ||
| const handleUpdate = (row: IGetTableData) => { | ||
| currentUpdateId.value = row.id | ||
| formData.username = row.username | ||
| dialogVisible.value = true | ||
| } | ||
| //#endregion | ||
| //#region 查 | ||
| const tableData = ref<Access[]>([]) | ||
| const searchFormRef = ref<FormInstance | null>(null) | ||
| const searchData = reactive({ | ||
| username: "", | ||
| phone: "" | ||
| }) | ||
| const getTableData = () => { | ||
| loading.value = true | ||
| listPermissionAccess({ | ||
| page: { | ||
| index: paginationData.currentPage, | ||
| size: paginationData.pageSize, | ||
| disabled: false, | ||
| count: paginationData.total | ||
| }, | ||
| filter: {} | ||
| }) | ||
| .then((resp) => { | ||
| paginationData.total = resp.data.page.count | ||
| tableData.value = resp.data.search | ||
| }) | ||
| .catch(() => { | ||
| tableData.value = [] | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false | ||
| }) | ||
| } | ||
| const handleSearch = () => { | ||
| if (paginationData.currentPage === 1) { | ||
| getTableData() | ||
| } | ||
| paginationData.currentPage = 1 | ||
| } | ||
| const resetSearch = () => { | ||
| searchFormRef.value?.resetFields() | ||
| if (paginationData.currentPage === 1) { | ||
| getTableData() | ||
| } | ||
| paginationData.currentPage = 1 | ||
| } | ||
| const handleRefresh = () => { | ||
| getTableData() | ||
| } | ||
| //#endregion | ||
| /** 监听分页参数的变化 */ | ||
| watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="app-container"> | ||
| <el-card v-loading="loading" shadow="never" class="search-wrapper"> | ||
| <el-form ref="searchFormRef" :inline="true" :model="searchData"> | ||
| <el-form-item prop="username" label="用户名"> | ||
| <el-input v-model="searchData.username" placeholder="请输入" /> | ||
| </el-form-item> | ||
| <el-form-item prop="phone" label="手机号"> | ||
| <el-input v-model="searchData.phone" placeholder="请输入" /> | ||
| </el-form-item> | ||
| <el-form-item> | ||
| <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button> | ||
| <el-button :icon="Refresh" @click="resetSearch">重置</el-button> | ||
| </el-form-item> | ||
| </el-form> | ||
| </el-card> | ||
| <el-card v-loading="loading" shadow="never"> | ||
| <div class="toolbar-wrapper"> | ||
| <div> | ||
| <el-button type="primary" :icon="CirclePlus" @click="dialogVisible = true">新增用户</el-button> | ||
| <el-button type="danger" :icon="Delete">批量删除</el-button> | ||
| </div> | ||
| <div> | ||
| <el-tooltip content="下载"> | ||
| <el-button type="primary" :icon="Download" circle /> | ||
| </el-tooltip> | ||
| <el-tooltip content="刷新表格"> | ||
| <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" /> | ||
| </el-tooltip> | ||
| </div> | ||
| </div> | ||
| <div class="table-wrapper"> | ||
| <el-table :data="tableData"> | ||
| <el-table-column type="selection" width="50" align="center" /> | ||
| <el-table-column prop="id" label="ID" align="center" /> | ||
| <el-table-column prop="method" label="方法" align="center" /> | ||
| <el-table-column prop="path" label="路径" align="center" /> | ||
| <el-table-column prop="handler" label="函数" align="center" /> | ||
| <el-table-column prop="create_time" label="创建时间" align="center" /> | ||
| <el-table-column prop="create_time" label="创建时间" align="center" /> | ||
| <el-table-column fixed="right" label="操作" width="150" align="center"> | ||
| <template #default="scope"> | ||
| <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)" | ||
| >修改</el-button | ||
| > | ||
| <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)" | ||
| >删除</el-button | ||
| > | ||
| </template> | ||
| </el-table-column> | ||
| </el-table> | ||
| </div> | ||
| <div class="pager-wrapper"> | ||
| <el-pagination | ||
| background | ||
| :layout="paginationData.layout" | ||
| :page-sizes="paginationData.pageSizes" | ||
| :total="paginationData.total" | ||
| :page-size="paginationData.pageSize" | ||
| :currentPage="paginationData.currentPage" | ||
| @size-change="handleSizeChange" | ||
| @current-change="handleCurrentChange" | ||
| /> | ||
| </div> | ||
| </el-card> | ||
| <!-- 新增/修改 --> | ||
| <el-dialog | ||
| v-model="dialogVisible" | ||
| :title="currentUpdateId === undefined ? '新增用户' : '修改用户'" | ||
| @close="resetForm" | ||
| width="30%" | ||
| > | ||
| <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left"> | ||
| <el-form-item prop="username" label="用户名"> | ||
| <el-input v-model="formData.username" placeholder="请输入" /> | ||
| </el-form-item> | ||
| <el-form-item prop="password" label="密码" v-if="currentUpdateId === undefined"> | ||
| <el-input v-model="formData.password" placeholder="请输入" /> | ||
| </el-form-item> | ||
| </el-form> | ||
| <template #footer> | ||
| <el-button @click="dialogVisible = false">取消</el-button> | ||
| <el-button type="primary" @click="handleCreate">确认</el-button> | ||
| </template> | ||
| </el-dialog> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .search-wrapper { | ||
| margin-bottom: 20px; | ||
| :deep(.el-card__body) { | ||
| padding-bottom: 2px; | ||
| } | ||
| } | ||
| .toolbar-wrapper { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-bottom: 20px; | ||
| } | ||
| .table-wrapper { | ||
| margin-bottom: 20px; | ||
| } | ||
| .pager-wrapper { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| } | ||
| </style> |