coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

用户管理增删改查全部完成

Browse Source
This commit is contained in:
小墨
2023-03-29 17:24:27 +08:00
parent cf962a92da
commit 14907e3e26
24 changed files with 775 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
frontend/src/components/manage-list.vue
View File

@@ -1,25 +1,23 @@
<template>
<div class="manage-list-container">
<div v-if="tableData">
<!-- {{ query }} -->
<!-- 筛选 -->
<div class="handle-box">
<template v-for="field in searchFields">
<el-input v-if="field.searchType == 'input'" v-model="query[field.field]"
@keyup.enter.native="handleSearch" :placeholder="field.placeholder"
class="handle-input mr10"></el-input>
<el-select v-else-if="field.searchType == 'select'" v-model="query[field.field]" @change="handleSearch"
:placeholder="field.placeholder" class="handle-select mr10">
<el-option key="" :label="'全部' + field.placeholder" value=""></el-option>
<el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]" :value="optKey"></el-option>
<el-select v-else-if="field.searchType == 'select'" v-model="query[field.field]" :clearable="true"
@change="handleSearch" :placeholder="field.placeholder" class="handle-select mr10">
<el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]"
:value="optKey"></el-option>
</el-select>
<template v-else>{{ field }}</template>
</template>
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<el-button type="primary" :icon="Plus" @click="handleNew" v-permiss="props.editPermiss">新增</el-button>
</div>
<div>
{{ query }}
</div>
<!-- 表格 -->
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
@@ -49,25 +47,28 @@
</div>
<!-- 新增 / 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
<el-option key="1" label="管理员" value="管理员"></el-option>
<el-option key="2" label="普通用户" value="普通用户"></el-option>
<el-dialog :title="formId > 0 ? '编辑' : '新增'" v-model="editVisible" style="width: 40%; min-width: 280px;">
<!-- {{ form }} -->
<el-form ref="editForm" label-width="80px" :rules="rules" :model="form">
<el-form-item v-if="editVisible" v-for="field in dialogFields" :label="field.label" :prop="field.field">
<el-input v-if="(formId > 0 ? field.editType : field.addType) == 'input'"
:placeholder="formId > 0 ? field.editPlaceholder : field.addPlaceholder" class="popup-item"
v-model="form[field.field]"></el-input>
<el-select v-else-if="(formId > 0 ? field.editType : field.addType) == 'select'" class="popup-item"
v-model="form[field.field]" :clearable="true">
<el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]"
:value="optKey"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.telephone"></el-input>
<el-input v-else-if="(formId > 0 ? field.editType : field.addType) == 'plainText'" class="popup-item"
v-model="form[field.field]" :disabled="true"></el-input>
<!-- {{ field }} -->
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="doMockData(formId > 0)" type="danger" round>随机填充测试数据</el-button>
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
</span>
</template>
</el-dialog>
@@ -76,13 +77,29 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import send_request from '../utils/send_request';
import Mock from 'mockjs';
const props = defineProps({
// 获取列表 接口函数
'getListFunc': {
'listFunc': {
type: Function,
required: true,
},
// 新增 接口函数
'addFunc': {
type: Function,
required: true,
},
// 修改 接口函数
'editFunc': {
type: Function,
required: true,
},
// 修改 接口函数
'deleteFunc': {
type: Function,
required: true,
},
@@ -93,35 +110,38 @@ const props = defineProps({
}
})
// 筛选列
const searchFields: any = ref([]);
// 筛选条件
const searchFields: any = ref([]); // 筛选条件字段
const query = reactive({
pageIndex: 1,
pageSize: 10
// 其他筛选条件
});
}); // 筛选条件的值
// 表格数据
const tableData: any = ref(null);
// 表格列
const tableFields: any = ref([]);
// 总页数
const pageTotal = ref(0);
// 新增/编辑 弹窗列
const dialogFields: any = ref([]);
// 表格
const tableData: any = ref(null); // 表格数据
const tableFields: any = ref([]); // 表格列
const pageTotal = ref(0); // 总页数
// 新增/编辑 弹窗
const editVisible = ref(false);
let form = reactive({} as any);
let idx: number = -1;
const dialogFields: any = ref([]); // 弹窗字段
const editVisible = ref(false); // 是否显示弹窗
let form = reactive({} as any); // 弹窗字段的值
let idx: number = -1; // 表格中编辑行的 index; 新增为 -1
let formId: number = -1; // 数据库 id; 新增为 -1
let idFieldName: string = ''; // id列列名
// 添加/修改记录时表单验证
const editForm = ref<FormInstance>();
// const rules: FormRules = {};
const rules = ref({} as FormRules);
//
let mockData: any = []
// 获取表格数据
const getData = async () => {
props.getListFunc(query).then((data: any) => {
props.listFunc(query).then((data: any) => {
console.log(data)
// 深拷贝一份
@@ -141,19 +161,27 @@ const getData = async () => {
}
}
console.log("data.columns", data.columns)
// 表格列
tableFields.value = data.columns
.filter((field: any) => field.showInTable)
.map((field: any) => {
return { prop: field.prop, label: field.label }
});
console.log("tableFields", tableFields.value)
// 表格数据
tableData.value = _tableData;
// 总页数
pageTotal.value = data.total;
// id列列名
idFieldName = data.idFieldName;
console.log("idFieldName", idFieldName)
// 筛选字段
searchFields.value = data.columns
.filter((field: any) => field.canSearch)
.filter((field: any) => field.searchType != "null")
.map((field: any) => {
let f: any = {
placeholder: field.label,
@@ -162,6 +190,7 @@ const getData = async () => {
}
switch (field.searchType) {
case 'select':
// 如果是下拉框，那么找到下拉框的 option 数据
f.options = fieldsMapper.find((field: any) => field.key == f.field).mapper
break;
default:
@@ -174,20 +203,59 @@ const getData = async () => {
// 新增/修改弹窗列
dialogFields.value = data.columns
.map((field: any) => {
// 拼装 新增/修改弹窗 字段
if (typeof (query[field.field]) === "undefined") {
query[field.field] = ''
}
let f: any = {
label: field.label,
field: field.field,
addType: field.addType,
addPlaceholder: field.addPlaceholder,
editType: field.editType,
editPlaceholder: field.editPlaceholder,
default: field.default,
}
switch (field.searchType) {
case 'select':
// 如果是下拉框，那么找到下拉框的 option 数据
f.options = fieldsMapper.find((field: any) => field.key == f.field).mapper
break;
default:
break;
}
return f
});
console.log("dialogFields", dialogFields.value);
// 拼装 新增/修改弹窗 字段
// form =
// 表单验证
for (let field of data.columns) {
rules.value[field.field] = field.validateRules
// .map((rule: any) => {
// if (rule.pattern) {
// rule.pattern = new RegExp(rule.pattern)
// console.log(rule.pattern)
// }
// return rule
// })
}
console.log("rules", rules.value)
// 测试数据
mockData = data.columns
.map((field: any) => {
let spaceIndex = field.mockRegex.indexOf(' ')
if (spaceIndex == -1) return
let type = field.mockRegex.substring(0, spaceIndex)
let str = field.mockRegex.substring(spaceIndex + 1)
return {
canEdit: field.editType != "plainText",
field: field.field,
type: type,
str: str,
}
})
console.log("mockData", mockData)
})
};
@@ -203,65 +271,133 @@ const handlePageChange = (val: number) => {
getData();
};
// 点击进入编辑框
const handleEdit = (index: number, row: any) => {
idx = index;
formId = row[idFieldName];
form[idFieldName] = formId;
// 遍历所有编辑项，并将 row 的值赋给表格
for (let f of dialogFields.value) {
switch (f.editType) {
case "select":
// 下拉框的值要为 string 类型
form[f.field] = String(row[f.field]);
break;
default:
form[f.field] = row[f.field];
break;
}
}
editVisible.value = true;
};
// 点击进入新建框
const handleNew = () => {
idx = -1;
formId = -1;
form[idFieldName] = -1;
// 遍历所有编辑项，并将 row 的值赋给表格
for (let f of dialogFields.value) {
switch (f.editType) {
case "select":
// 下拉框的值要为 string 类型
form[f.field] = String(f.default);
break;
default:
form[f.field] = f.default;
break;
}
}
editVisible.value = true;
};
// 编辑保存到数据库
const saveEdit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
console.log("formEl", formEl);
formEl.validate(async (valid: boolean, invalidFields: any) => {
// 表单校验
if (!valid) {
// console.log("invalidFields", invalidFields);
// 对表单中的每一个不合法输入框进行遍历
Object.values(invalidFields).forEach((input: any) => {
// 对该不合法输入框的提示信息进行遍历
input.forEach((element: any) => {
ElMessage.error({ message: element.message, grouping: true });
});
});
return;
}
var result;
if (formId > 0) {
// 修改记录
var result = await props.editFunc(form)
} else {
// 新增记录
var result = await props.addFunc(form)
query.pageIndex = Math.ceil((pageTotal.value + 1) / query.pageSize);
}
console.log("result", result)
if (!result) {
ElMessage.error({ message: "添加失败" });
return
}
// 关闭弹窗
editVisible.value = false;
// 更新表格中数据
await getData();
ElMessage.success(formId > 0 ? `修改成功` : `添加成功`);
});
};
// 删除操作
const handleDelete = (index: number, row: any) => {
idx = index;
// 二次确认删除
ElMessageBox.confirm('确定要删除吗？', '提示', { type: 'warning' })
.then(async () => {
await send_request('v1/user/delete', "POST", {
userId: row.id
}, (data: any) => {
// console.log("delete index", index);
// console.log(data);
if (data) {
ElMessage.success('删除成功');
tableData.value.splice(idx, 1);
var result = await props.deleteFunc({
id: row[idFieldName],
})
if (result) {
ElMessage.success('删除成功');
if (tableData.value.length == 1) {
// 删除了当前页面的最后一条记录，那么往前翻一页
if (query.pageIndex > 0) {
query.pageIndex -= 1;
}
}
});
tableData.value.splice(idx, 1);
// 更新表格中数据
await getData();
} else {
ElMessage.error('删除失败');
}
})
.catch(() => { });
};
// 点击进入编辑框
const handleEdit = (index: number, row: any) => {
idx = index;
form.id = row.id;
form.username = row.username;
form.roleName = row.roleName;
form.roleId = row.roleId;
form.telephone = row.telephone;
editVisible.value = true;
};
// 编辑保存到数据库
const saveEdit = async () => {
editVisible.value = false;
await send_request('v1/user/edit', "POST", {
id: form.id,
username: form.username,
roleId: form.roleId,
roleName: form.roleName,
telephone: form.telephone
}, (data: any) => {
if (data) {
ElMessage.success('修改成功');
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
// 生成测试数据
const doMockData = (isEdit: boolean) => {
for (let mock of mockData) {
if (isEdit && !mock.canEdit) continue; // 跳过不允许修改的列，例如 用户名
switch (mock.type) {
case "DTD":
let regexp = new RegExp(mock.str.substring(1, mock.str.length - 2))
// console.log(regexp)
form[mock.field] = Mock.mock({ 'regexp': regexp })['regexp']
break;
case "DPD":
form[mock.field] = Mock.mock(mock.str)
break;
}
});
};
const handleNew = () => {
editVisible.value = true;
ElMessage.success(`修改第 ${idx + 1} 行成功`);
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
};
}
}
// 网页加载完成后加载数据
onMounted(() => {
@@ -302,4 +438,8 @@ onMounted(() => {
width: 40px;
height: 40px;
}
.popup-item {
width: 100%;
}
</style>