|
|
@@ -1,20 +1,234 @@
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { useUserStore } from '@/stores/system/user';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+const userStore = useUserStore();
|
|
|
+const { tableData, total, pageNum, pageSize } = storeToRefs(userStore);
|
|
|
+// 选中的⽤户ID数组
|
|
|
+const selectedUserIds = ref([]);
|
|
|
+const queryFunction = function () {
|
|
|
+ userStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value
|
|
|
+ });
|
|
|
+}
|
|
|
+const userAddFrom = ref({
|
|
|
+ userName: '',
|
|
|
+ password: '',
|
|
|
+ fullName: '',
|
|
|
+ phoneNumber: '',
|
|
|
+ avatarAddress: ''
|
|
|
+});
|
|
|
+const userAddFromRules = {
|
|
|
+ userName: [{ required: true, message: '请输⼊⽤户名', trigger: 'blur' }],
|
|
|
+ password: [{ required: true, message: '请输⼊密码', trigger: 'blur' }],
|
|
|
+ fullName: [{ required: true, message: '请输⼊姓名', trigger: 'blur' }]
|
|
|
+};
|
|
|
+// 创建表单引⽤
|
|
|
+const userAddFromRef = ref();
|
|
|
+onMounted(() => {
|
|
|
+ queryFunction();
|
|
|
+})
|
|
|
+const handleSizeChange = function (val) {
|
|
|
+ userStore.pageSize = val;
|
|
|
+ queryFunction();
|
|
|
+}
|
|
|
+const handleCurrentChange = function (val) {
|
|
|
+ userStore.pageNum = val;
|
|
|
+ queryFunction();
|
|
|
+}
|
|
|
+const handleAdd = async () => {
|
|
|
+ if (!userAddFromRef.value) return
|
|
|
+ try {
|
|
|
+ // 这⾥可以打开添加⽤户对话框，并传递userAddFrom数据
|
|
|
+ const valid = await userAddFromRef.value.validate();
|
|
|
+ if (valid) {
|
|
|
+ userStore.addUser(userAddFrom.value);
|
|
|
+ userStore.dialogFormVisible = false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // console.error('添加⽤户失败:', error);
|
|
|
+ // 可以显示错误提示给⽤户，例如使⽤ElMessage
|
|
|
+ ElMessage.error('添加⽤户失败，请重试');
|
|
|
+ }
|
|
|
+};
|
|
|
+const handleEdit = (row) => {
|
|
|
+ // 这⾥可以打开编辑⽤户对话框，并传递row数据
|
|
|
+ userStore.editUser(row);
|
|
|
+};
|
|
|
+// 当前选中的⾏
|
|
|
+const handleSelectionChange = (rows) => {
|
|
|
+ // 获取选中⾏的ID
|
|
|
+ selectedUserIds.value = rows.map(row => row.id);
|
|
|
+};
|
|
|
+const handleDelete = (row) => {
|
|
|
+ // 使⽤Element Plus的MessageBox组件实现确认对话框
|
|
|
+ ElMessageBox.confirm('确定要删除这个⽤户吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ userStore.deleteUser(row.id);
|
|
|
+ }).catch(() => {
|
|
|
+ // ⽤户点击取消时的处理
|
|
|
+ });
|
|
|
+};
|
|
|
+// 批量删除选中的⽤户
|
|
|
+const handleBatchDelete = () => {
|
|
|
+ if (selectedUserIds.value.length === 0) {
|
|
|
+ ElMessage.warning('请⾄少选择⼀条记录进⾏删除');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ElMessageBox.confirm('确定要批量删除选中的⽤户吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ userStore.batchDeleteUser(selectedUserIds.value);
|
|
|
+ }).catch(() => {
|
|
|
+ // ⽤户点击取消时的处理
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <h1>欢迎使用管理系统</h1>
|
|
|
- <p>这是您的首页内容区域</p>
|
|
|
+ <div class="data-table-container">
|
|
|
+ <div class="search-from">
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ </div>
|
|
|
+ <div class="operate-buttons">
|
|
|
+ <el-button size="default" type="primary" @click="userStore.dialogFo
|
|
|
+rmVisible = true">
|
|
|
+ <i class="el-icon-plus el-icon--left"></i>新增
|
|
|
+ </el-button>
|
|
|
+ <el-button size="default" type="danger" @click="handleBatchDelete">
|
|
|
+ <i class="el-icon-delete el-icon--left"></i>批量删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="data-table">
|
|
|
+ <div class="table-container">
|
|
|
+ <el-table
|
|
|
+ height="600"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ stripe
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="600"
|
|
|
+ v-loading="userStore.loading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.1)"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column type="index" label="序号" width="55" />
|
|
|
+ <el-table-column prop="userName" label="⽤户名" />
|
|
|
+ <el-table-column prop="fullName" label="姓名" />
|
|
|
+ <el-table-column prop="phoneNumber" label="⼿机号" />
|
|
|
+ <el-table-column label="头像" width="88">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ style="width: 40px; height: 40px"
|
|
|
+ :src="row.avatarAddress"
|
|
|
+ :zoom-rate="1.2"
|
|
|
+ :max-scale="7"
|
|
|
+ :min-scale="0.2"
|
|
|
+ show-progress
|
|
|
+ :initial-index="4"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" />
|
|
|
+ <el-table-column fixed="right" label="操作" min-width="80">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" size="small" @click="handleD
|
|
|
+elete(row)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="primary" size="small" @click="handleE
|
|
|
+dit(row)">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ :currentPage="pageNum"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-dialog v-model="userStore.dialogFormVisible" title="新增⽤户" width
|
|
|
+ ="600" center>
|
|
|
+ <el-form ref="userAddFromRef" :model="userAddFrom" :rules="userAddFromRules">
|
|
|
+ <el-form-item prop="userName">
|
|
|
+ <el-input v-model="userAddFrom.userName" autocomplete="off" place
|
|
|
+ holder="请输⼊⽤户名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input v-model="userAddFrom.password" type="password" autocomp
|
|
|
+ lete="off" placeholder="请输⼊⽤户名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="fullName">
|
|
|
+ <el-input v-model="userAddFrom.fullName" autocomplete="off" place
|
|
|
+ holder="请输⼊姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="userAddFrom.phoneNumber" autocomplete="off" pl
|
|
|
+ aceholder="请输⼊⼿机号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="userAddFrom.avatarAddress" autocomplete="off"
|
|
|
+ placeholder="请上传头像" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="userStore.dialogFormVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleAdd">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-// 这里可以添加首页需要的业务逻辑
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.home {
|
|
|
- padding: 20px;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-h1 {
|
|
|
- color: #1890ff;
|
|
|
+<style scoped lang="less">
|
|
|
+.data-table-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .search-from {
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .operate-buttons {
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ }
|
|
|
+ .data-table {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .table-container {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .pagination-container {
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Bsheng123