|
|
|
|
@@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="user">
|
|
|
|
|
<!-- 筛选 -->
|
|
|
|
|
<!-- 排序筛选 -->
|
|
|
|
|
<wd-drop-menu>
|
|
|
|
|
<wd-drop-menu-item v-model="sortValue" :options="sortOptions" @change="handleSortChange" />
|
|
|
|
|
<wd-drop-menu-item ref="dropMenuRef" title="筛选">
|
|
|
|
|
@@ -8,10 +8,13 @@
|
|
|
|
|
<wd-input
|
|
|
|
|
v-model="queryParams.keywords"
|
|
|
|
|
label="关键字"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="请输入关键字"
|
|
|
|
|
placeholder="用户名/昵称/手机号"
|
|
|
|
|
/>
|
|
|
|
|
<wd-datetime-picker v-model="daterange" label="创建时间" />
|
|
|
|
|
<wd-datetime-picker v-model="createTimeRange" type="date" label="创建时间" />
|
|
|
|
|
<view class="flex-between py-2">
|
|
|
|
|
<wd-button class="w-20%" type="info" @click="hendleResetQuery">重置</wd-button>
|
|
|
|
|
<wd-button class="w-70%" @click="handleQuery">确定</wd-button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</wd-drop-menu-item>
|
|
|
|
|
</wd-drop-menu>
|
|
|
|
|
@@ -25,12 +28,11 @@
|
|
|
|
|
<view class="font-bold">
|
|
|
|
|
{{ item.nickname }}
|
|
|
|
|
<wd-icon v-if="item.gender == 1" name="gender-male" class="color-#4D80F0" />
|
|
|
|
|
<wd-icon v-else-if="item.gender == 2" name="gender-female" class="color-#fa4350" />
|
|
|
|
|
<wd-icon v-else-if="item.gender == 2" name="gender-female" class="color-#FA4350" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="mt-1"><wd-text :text="item.deptName" size="12px" /></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view>
|
|
|
|
|
<wd-tag v-if="item.status === 1" type="success" plain>正常</wd-tag>
|
|
|
|
|
<wd-tag v-else-if="item.status === 0" plain>禁用</wd-tag>
|
|
|
|
|
@@ -61,33 +63,28 @@
|
|
|
|
|
</template>
|
|
|
|
|
</wd-card>
|
|
|
|
|
|
|
|
|
|
<wd-loadmore :state="state" @reload="loadmore" />
|
|
|
|
|
<wd-loadmore v-if="total > 0" :state="state" @reload="loadmore" />
|
|
|
|
|
<wd-message-box />
|
|
|
|
|
|
|
|
|
|
<wd-popup v-model="dialog.visible" position="bottom">
|
|
|
|
|
<wd-form ref="userFormRef" :model="formData" :rules="rules">
|
|
|
|
|
<wd-cell-group border>
|
|
|
|
|
<wd-input v-model="formData.username" label="用户名" :readonly="!formData.id" required />
|
|
|
|
|
|
|
|
|
|
<wd-input v-model="formData.nickname" label="昵称" required />
|
|
|
|
|
|
|
|
|
|
<wd-select-picker
|
|
|
|
|
v-model="formData.roleIds"
|
|
|
|
|
label="角色"
|
|
|
|
|
:columns="roleOptions"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<vut-picker
|
|
|
|
|
v-model="formData.deptId"
|
|
|
|
|
v-model:data="deptOptions"
|
|
|
|
|
label="部门"
|
|
|
|
|
:required="true"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<wd-input v-model="formData.mobile" label="手机号" prop="mobile" />
|
|
|
|
|
|
|
|
|
|
<wd-input v-model="formData.email" label="邮箱" prop="email" />
|
|
|
|
|
|
|
|
|
|
<wd-cell title="状态">
|
|
|
|
|
<wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" required />
|
|
|
|
|
</wd-cell>
|
|
|
|
|
@@ -103,44 +100,68 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
|
|
|
|
|
import { FormRules } from "wot-design-uni/components/wd-form/types";
|
|
|
|
|
import { useMessage } from "wot-design-uni";
|
|
|
|
|
import { dayjs } from "wot-design-uni";
|
|
|
|
|
|
|
|
|
|
import UserAPI, { type UserPageQuery, UserPageVO, UserForm } from "@/api/system/user";
|
|
|
|
|
import RoleAPI from "@/api/system/role";
|
|
|
|
|
import DeptAPI from "@/api/system/dept";
|
|
|
|
|
|
|
|
|
|
import VutPicker from "@/components/VutPicker.vue";
|
|
|
|
|
|
|
|
|
|
import { useMessage } from "wot-design-uni";
|
|
|
|
|
|
|
|
|
|
const message = useMessage();
|
|
|
|
|
|
|
|
|
|
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
|
|
|
|
|
// 加载状态 loading, finished:, error
|
|
|
|
|
const state = ref<LoadMoreState>("loading");
|
|
|
|
|
const dataList = ref<UserPageVO[]>([]);
|
|
|
|
|
|
|
|
|
|
const sortValue = ref(1);
|
|
|
|
|
const sortOptions = ref<Record<string, any>[]>([
|
|
|
|
|
{ label: "最近创建", value: 1 },
|
|
|
|
|
{ label: "最近更新", value: 2 },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const queryParams: UserPageQuery = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const daterange = ref<any[]>(["", Date.now()]);
|
|
|
|
|
const createTimeRange = ref<any[]>([, Date.now()]);
|
|
|
|
|
|
|
|
|
|
const dropMenuRef = ref();
|
|
|
|
|
|
|
|
|
|
const total = ref(0);
|
|
|
|
|
|
|
|
|
|
const dialog = reactive({
|
|
|
|
|
visible: false,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const formData = reactive<UserForm>({
|
|
|
|
|
roleIds: [],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const userFormRef = ref();
|
|
|
|
|
const roleOptions = ref<Record<string, any>[]>([]);
|
|
|
|
|
const deptOptions = ref<OptionType[]>([]);
|
|
|
|
|
|
|
|
|
|
const rules: FormRules = {
|
|
|
|
|
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
|
|
|
|
nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
|
|
|
|
|
roleIds: [{ required: true, message: "请选择角色", trigger: "blur" }],
|
|
|
|
|
deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
|
|
|
|
|
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
|
|
|
|
username: [{ required: true, message: "请输入用户名" }],
|
|
|
|
|
nickname: [{ required: true, message: "请输入昵称" }],
|
|
|
|
|
roleIds: [{ required: true, message: "请选择角色" }],
|
|
|
|
|
deptId: [{ required: true, message: "请选择部门" }],
|
|
|
|
|
status: [{ required: true, message: "请选择状态" }],
|
|
|
|
|
mobile: [
|
|
|
|
|
{ required: false, pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
|
|
|
|
|
{
|
|
|
|
|
required: false,
|
|
|
|
|
message: "手机号格式不正确",
|
|
|
|
|
validator: (value) => {
|
|
|
|
|
if (!value) {
|
|
|
|
|
return Promise.resolve();
|
|
|
|
|
}
|
|
|
|
|
if (!/^1[3456789]\d{9}$/.test(value)) {
|
|
|
|
|
return Promise.reject("手机号格式不正确");
|
|
|
|
|
} else {
|
|
|
|
|
return Promise.resolve();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
email: [
|
|
|
|
|
{
|
|
|
|
|
@@ -160,24 +181,10 @@ const rules: FormRules = {
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const userFormRef = ref();
|
|
|
|
|
const roleOptions = ref<Record<string, any>[]>([]);
|
|
|
|
|
const deptOptions = ref<OptionType[]>([]);
|
|
|
|
|
|
|
|
|
|
const sortValue = ref(1);
|
|
|
|
|
|
|
|
|
|
const sortOptions = ref<Record<string, any>[]>([
|
|
|
|
|
{ label: "最近创建", value: 1 },
|
|
|
|
|
{ label: "最近更新", value: 2 },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 排序改变
|
|
|
|
|
*/
|
|
|
|
|
const handleSortChange = ({ value }: { value: number }) => {
|
|
|
|
|
console.log("排序", value);
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
queryParams.field = "create_time";
|
|
|
|
|
queryParams.direction = "DESC";
|
|
|
|
|
@@ -185,17 +192,34 @@ const handleSortChange = ({ value }: { value: number }) => {
|
|
|
|
|
queryParams.field = "update_time";
|
|
|
|
|
queryParams.direction = "DESC";
|
|
|
|
|
}
|
|
|
|
|
handleQuery();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 查询
|
|
|
|
|
*/
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
dropMenuRef.value?.close();
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
|
|
|
|
|
queryParams.createTime = [
|
|
|
|
|
createTimeRange.value[0] ? dayjs(createTimeRange.value[0]).format("YYYY-MM-DD") : "",
|
|
|
|
|
createTimeRange.value[1] ? dayjs(createTimeRange.value[1]).format("YYYY-MM-DD") : "",
|
|
|
|
|
];
|
|
|
|
|
console.log(queryParams.createTime);
|
|
|
|
|
loadmore();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onReachBottom(() => {
|
|
|
|
|
if (queryParams.pageNum * queryParams.pageSize < total.value) {
|
|
|
|
|
loadmore();
|
|
|
|
|
} else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
|
|
|
|
|
state.value = "finished";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/**
|
|
|
|
|
* 重置查询
|
|
|
|
|
*/
|
|
|
|
|
const hendleResetQuery = () => {
|
|
|
|
|
dropMenuRef.value?.close();
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
queryParams.keywords = "";
|
|
|
|
|
createTimeRange.value = ["", Date.now()];
|
|
|
|
|
loadmore();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载更多
|
|
|
|
|
@@ -213,31 +237,13 @@ function loadmore() {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载角色下拉项
|
|
|
|
|
*/
|
|
|
|
|
async function loadRoleOptions() {
|
|
|
|
|
RoleAPI.getOptions().then((data) => {
|
|
|
|
|
roleOptions.value = data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载部门下拉项
|
|
|
|
|
*/
|
|
|
|
|
async function loadDeptOptions() {
|
|
|
|
|
DeptAPI.getOptions().then((data) => {
|
|
|
|
|
deptOptions.value = data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 打开弹窗
|
|
|
|
|
*/
|
|
|
|
|
async function handleOpenDialog(id?: number) {
|
|
|
|
|
dialog.visible = true;
|
|
|
|
|
await loadRoleOptions();
|
|
|
|
|
await loadDeptOptions();
|
|
|
|
|
roleOptions.value = await RoleAPI.getOptions();
|
|
|
|
|
deptOptions.value = await DeptAPI.getOptions();
|
|
|
|
|
if (id) {
|
|
|
|
|
UserAPI.getFormData(id).then((data) => {
|
|
|
|
|
Object.assign(formData, { ...data });
|
|
|
|
|
@@ -249,7 +255,6 @@ async function handleOpenDialog(id?: number) {
|
|
|
|
|
* 提交保存
|
|
|
|
|
*/
|
|
|
|
|
function handleSubmit() {
|
|
|
|
|
console.log("提交", formData);
|
|
|
|
|
userFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
const userId = formData.id;
|
|
|
|
|
@@ -257,15 +262,13 @@ function handleSubmit() {
|
|
|
|
|
UserAPI.update(userId, formData).then(() => {
|
|
|
|
|
message.show("修改成功");
|
|
|
|
|
dialog.visible = false;
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
loadmore();
|
|
|
|
|
handleQuery();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
UserAPI.add(formData).then(() => {
|
|
|
|
|
message.show("添加成功");
|
|
|
|
|
dialog.visible = false;
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
loadmore();
|
|
|
|
|
handleQuery();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@@ -286,44 +289,36 @@ function handleDelete(id: number) {
|
|
|
|
|
.then(() => {
|
|
|
|
|
UserAPI.deleteByIds(id + "").then(() => {
|
|
|
|
|
message.show("删除成功");
|
|
|
|
|
queryParams.pageNum = 1;
|
|
|
|
|
loadmore();
|
|
|
|
|
handleQuery();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
console.log("点击了取消按钮");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 监听下拉菜单打开事件
|
|
|
|
|
onReachBottom(() => {
|
|
|
|
|
if (queryParams.pageNum * queryParams.pageSize < total.value) {
|
|
|
|
|
loadmore();
|
|
|
|
|
} else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
|
|
|
|
|
state.value = "finished";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 页面加载时执行查询
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
loadmore();
|
|
|
|
|
handleQuery();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
/* stylelint-disable selector-type-no-unknown */
|
|
|
|
|
page {
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
}
|
|
|
|
|
/* stylelint-enable selector-type-no-unknown */
|
|
|
|
|
|
|
|
|
|
.custom-class {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: col;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 230rpx;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-card {
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
:deep(.wd-cell__wrapper) {
|
|
|
|
|
padding: 8rpx 0;
|
|
|
|
|
padding: 4rpx 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.wd-cell) {
|
|
|
|
|
padding-right: 10rpx;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|