diff --git a/src/pages.json b/src/pages.json
index 699a4ff..a4dd732 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -40,7 +40,7 @@
{
"path": "pages/work/user/index",
"style": {
- "navigationBarTitleText": "用户管理"
+ "navigationStyle": "custom"
}
},
{
diff --git a/src/pages/work/user/index.vue b/src/pages/work/user/index.vue
index 09dcf76..05f7605 100644
--- a/src/pages/work/user/index.vue
+++ b/src/pages/work/user/index.vue
@@ -1,4 +1,9 @@
+
+
+
+
+
@@ -51,18 +56,23 @@
-
-
-
-
+
+
+
+
+
+
+
+ 编辑
+
-
- 编辑
-
+
+
+
删除
-
-
+
+
@@ -70,7 +80,7 @@
-
+
@@ -98,6 +108,9 @@
提交
+
+
+
@@ -113,6 +126,8 @@ import DeptAPI from "@/api/system/dept";
import VutPicker from "@/components/VutPicker.vue";
const message = useMessage();
+
+const loading = ref(false);
const state = ref("loading");
const dataList = ref([]);
@@ -135,9 +150,19 @@ const total = ref(0);
const dialog = reactive({
visible: false,
});
-const formData = reactive({
+
+const initialFormData: UserForm = {
+ id: undefined,
roleIds: [],
-});
+ username: undefined,
+ nickname: undefined,
+ deptId: undefined,
+ mobile: undefined,
+ email: undefined,
+ status: 1,
+};
+
+const formData = reactive({ ...initialFormData });
const userFormRef = ref();
const roleOptions = ref[]>([]);
@@ -252,13 +277,20 @@ function loadmore() {
* 打开弹窗
*/
async function handleOpenDialog(id?: number) {
+ loading.value = true;
dialog.visible = true;
roleOptions.value = await RoleAPI.getOptions();
deptOptions.value = await DeptAPI.getOptions();
if (id) {
- UserAPI.getFormData(id).then((data) => {
- Object.assign(formData, { ...data });
- });
+ UserAPI.getFormData(id)
+ .then((data) => {
+ Object.assign(formData, { ...data });
+ })
+ .finally(() => {
+ loading.value = false;
+ });
+ } else {
+ loading.value = false;
}
}
@@ -266,19 +298,20 @@ async function handleOpenDialog(id?: number) {
* 提交保存
*/
function handleSubmit() {
+ hancleCloseDialog();
userFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
if (valid) {
const userId = formData.id;
if (userId) {
UserAPI.update(userId, formData).then(() => {
message.show("修改成功");
- dialog.visible = false;
+ hancleCloseDialog();
handleQuery();
});
} else {
UserAPI.add(formData).then(() => {
message.show("添加成功");
- dialog.visible = false;
+ hancleCloseDialog();
handleQuery();
});
}
@@ -286,6 +319,18 @@ function handleSubmit() {
});
}
+// 重置表单
+function resetForm() {
+ userFormRef.value.reset();
+ Object.assign(formData, initialFormData);
+}
+
+// 关闭弹窗
+function hancleCloseDialog() {
+ dialog.visible = false;
+ resetForm();
+}
+
/**
* 删除
*
@@ -305,7 +350,7 @@ function handleDelete(id: number) {
});
}
-// 监听下拉菜单打开事件
+// 触底事件
onReachBottom(() => {
if (queryParams.pageNum * queryParams.pageSize < total.value) {
loadmore();
@@ -314,7 +359,6 @@ onReachBottom(() => {
}
});
-// 页面加载时执行查询
onLoad(() => {
handleQuery();
});