Skip to content

F
fk-spider-web
Commit 85fdc758 by liucan
Options

pref:调整任务信息页面、系统管理页面显示

parent cff37174
Showing with 147 additions and 85 deletions
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/os-system/index.vue
<template> <template>
<div> <div class="sys-content">
<div class="text-left p-8"> <el-card>
<el-form inline> <div class="title">系统管理</div>
<el-form-item> <div class="low-titme">System Admin</div>
<el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog">创建用户</el-button> <el-divider class="divider" />
</el-form-item> <div class="btns">
<el-form-item> <el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog"
>创建用户</el-button
>
<el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button> <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
</el-form-item>
</el-form>
</div> </div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" </el-card>
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }" <el-table
@selection-change="handleSelectionChange"> :data="tableData"
style="width: 100%"
border
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
:row-style="{ height: '58px' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="40" /> <el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" type="index" /> <el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="username" label="用户账号" show-overflow-tooltip /> <el-table-column property="username" label="用户账号" show-overflow-tooltip />
<el-table-column property="nickname" label="用户名称" show-overflow-tooltip /> <el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
<el-table-column property="role" label="用户角色" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.role == 1 ? "管理员" : "普通用户" }}
</template>
</el-table-column>
<el-table-column property="status" label="用户状态" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.status ? "启用" : "停用" }}
</template>
</el-table-column>
<el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip /> <el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220"> <el-table-column label="操作" width="220">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> <el-button type="primary" plain @click="handleEdit(scope.row)" id="editUser"> 编辑 </el-button>
编辑 <el-button type="danger" plain @click="handleDelete(scope.row)"> 删除 </el-button>
</el-button>
<el-button type="danger" plain @click="handleDelete(scope.row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" <Pagination
@pagination="getUserListData" /> :total="pageObj.total"
v-model:page="pageObj.pageNo"
v-model:limit="pageObj.pageSize"
@pagination="getUserListData"
/>
</div> </div>
<!-- 删除弹窗组件 --> <!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getUserListData" <deleteDialog
:ids="userIds" :deleteMode="deleteMode" :id="userId" /> v-model:dialogVisible="showDeleteDialog"
@get-user-list="getUserListData"
:ids="userIds"
:deleteMode="deleteMode"
:id="userId"
/>
<!-- 创建用户弹窗组件 --> <!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nickName="nickName" :userName="userName" <addUserDialog
:id="userId" :userRole="userRole" :userStatus="userStatus" :userPassword="userPassword" v-model:dialogVisible="dialogVisible"
@get-user-list="getUserListData" /> :mode="mode"
:nickName="nickName"
:userName="userName"
:id="userId"
:userRole="userRole"
:userStatus="userStatus"
:userPassword="userPassword"
@get-user-list="getUserListData"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from "vue";
import Pagination from '@/components/pagination/index.vue' import Pagination from "@/components/pagination/index.vue";
import deleteDialog from '@/components/Delete/index.vue' import deleteDialog from "@/components/Delete/index.vue";
import addUserDialog from './components/addUserDialog.vue' import addUserDialog from "./components/addUserDialog.vue";
import { getUserList } from '@/api/user.ts' import { getUserList } from "@/api/user.ts";
import { DeleteMode } from '@/components/Delete/enum.ts' import { DeleteMode } from "@/components/Delete/enum.ts";
import { AddMode } from './components/enum.ts'; import { AddMode } from "./components/enum.ts";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
const userId = ref<any>([]) const userId = ref<any>([]);
const userIds = ref<any>() const userIds = ref<any>();
const nickName = ref<string>('') const nickName = ref<string>("");
const userName = ref<string>('') const userName = ref<string>("");
const userRole = ref<number>(0) const userRole = ref<number>(0);
const userStatus = ref<boolean>(true) const userStatus = ref<boolean>(true);
const userPassword = ref<string>('') const userPassword = ref<string>("");
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false);
const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE) const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE);
const dialogVisible = ref<boolean>(false) const dialogVisible = ref<boolean>(false);
const mode = ref<AddMode>(AddMode.ADD_MODE) const mode = ref<AddMode>(AddMode.ADD_MODE);
const tableData = ref() const tableData = ref();
const pageObj = ref({ const pageObj = ref({
total: 0, total: 0,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1,
}) });
// 编辑用户信息的方法 // 编辑用户信息的方法
const handleEdit = async (row: any) => { const handleEdit = async (row: any) => {
mode.value = AddMode.UPDATE_MODE mode.value = AddMode.UPDATE_MODE;
nickName.value = row.nickname nickName.value = row.nickname;
userName.value = row.username userName.value = row.username;
userRole.value = row.role userRole.value = row.role;
userStatus.value = row.status userStatus.value = row.status;
userPassword.value = row.password userPassword.value = row.password;
dialogVisible.value = true dialogVisible.value = true;
userId.value = row.id userId.value = row.id;
} };
// 弹窗关闭的方法 // 弹窗关闭的方法
const handleDelete = async (row: any) => { const handleDelete = async (row: any) => {
showDeleteDialog.value = true showDeleteDialog.value = true;
deleteMode.value = DeleteMode.SINGLE_DELETE deleteMode.value = DeleteMode.SINGLE_DELETE;
userId.value = row.id userId.value = row.id;
console.log(userId.value); console.log(userId.value);
} };
// 批量删除用户的方法 // 批量删除用户的方法
const handleBatchDelete = async () => { const handleBatchDelete = async () => {
if(userIds.value == undefined){ if (userIds.value == undefined) {
ElMessage({ ElMessage({
message: '请先选择要删除的用户', message: "请先选择要删除的用户",
type: 'warning' type: "warning",
}) });
return return;
}else{ } else {
deleteMode.value = DeleteMode.BATCH_DELETE deleteMode.value = DeleteMode.BATCH_DELETE;
showDeleteDialog.value = true showDeleteDialog.value = true;
} }
} };
// 多选框改变后的方法 // 多选框改变后的方法
const handleSelectionChange = (data: any) => { const handleSelectionChange = (data: any) => {
let array = [] let array = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
array.push(data[i].id) array.push(data[i].id);
} }
userIds.value = array userIds.value = array;
} };
const openAddUserDialog = () => { const openAddUserDialog = () => {
mode.value = AddMode.ADD_MODE mode.value = AddMode.ADD_MODE;
dialogVisible.value = true dialogVisible.value = true;
} };
// 获取用户列表数据的方法 // 获取用户列表数据的方法
const getUserListData = async () => { const getUserListData = async () => {
const userList = await getUserList({ const userList = await getUserList({
page: pageObj.value.pageNo, page: pageObj.value.pageNo,
size: pageObj.value.pageSize size: pageObj.value.pageSize,
}) });
tableData.value = userList.data.list tableData.value = userList.data.list;
pageObj.value.total = userList.data.total pageObj.value.total = userList.data.total;
console.log(userList); console.log(userList);
};
}
onMounted(async () => { onMounted(async () => {
getUserListData() getUserListData();
}) });
</script> </script>
<style scoped> <style scoped>
...@@ -134,6 +163,27 @@ onMounted(async () => { ...@@ -134,6 +163,27 @@ onMounted(async () => {
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
.sys-content {
padding: 10px;
}
.title {
text-align: left;
font-size: 18px;
font-weight: 500;
color: white;
}
.low-titme {
color: #ccc;
text-align: left;
margin-left: 20px;
}
.divider {
margin-top: 15px;
}
.btns {
display: flex;
justify-content: end;
}
</style> </style>
<style> <style>
...@@ -153,4 +203,16 @@ onMounted(async () => { ...@@ -153,4 +203,16 @@ onMounted(async () => {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
/* 卡片外层容器透明 */
.el-card {
background-color: transparent !important;
border: none; /* 可选：去除边框 */
}
/* 卡片内容区域透明 */
.el-card__body {
background-color: transparent !important;
padding: 16px; /* 保持默认内边距，可按需调整 */
}
</style> </style>
vite.config.ts
...@@ -31,7 +31,7 @@ export default defineConfig({ ...@@ -31,7 +31,7 @@ export default defineConfig({
proxy: { proxy: {
// 代理API请求，使用更精确的路径匹配 // 代理API请求，使用更精确的路径匹配
'/api': { '/api': {
target: 'http://192.168.0.176:5001/', target: 'http://192.168.3.10:5001/',
changeOrigin: true, changeOrigin: true,
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment