tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: API类型声明优化调整

Browse Source 
Former-commit-id: 0ae696c2e872fa90feba0c5df9a92391c02d3e0b
This commit is contained in:
haoxr
2022-11-08 22:53:42 +08:00
parent 94b93f02a1
commit b39ff7b1f6
38 changed files with 468 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/views/system/user/index.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export default {
name: 'user'
name: 'user',
};
</script>
@@ -11,13 +11,13 @@ import {
watchEffect,
onMounted,
getCurrentInstance,
toRefs
toRefs,
} from 'vue';
// api
import {
listUserPages,
getUserFormData,
getUserForm,
deleteUsers,
addUser,
updateUser,
@@ -25,37 +25,33 @@ import {
updateUserPassword,
downloadTemplate,
exportUser,
importUser
importUser,
} from '@/api/user';
import { listDeptOptions } from '@/api/dept';
import { listRoleOptions } from '@/api/role';
import {
ElMessage,
ElMessageBox,
ElTree,
ElForm,
UploadFile
ElMessageBox,
ElMessage,
UploadFile,
} from 'element-plus';
import {
Search,
Plus,
Edit,
Refresh,
Delete,
Lock,
Download,
Top,
UploadFilled
UploadFilled,
} from '@element-plus/icons-vue';
import {
UserItem,
UserQueryParam,
UserFormData,
UserImportData
} from '@/types/api/user';
import { Option, Dialog } from '@/types/common';
UserForm,
UserImportData,
UserQuery,
UserType,
} from '@/api/user/types';
const deptTreeRef = ref(ElTree); // 部门树
const queryFormRef = ref(ElForm); // 查询表单
@@ -71,28 +67,28 @@ const state = reactive({
ids: [] as number[],
// 总条数
total: 0,
userList: [] as UserItem[],
userList: [] as UserType[],
dialog: {
visible: false
} as Dialog,
visible: false,
} as DialogType,
deptName: undefined,
// 部门下拉项
deptOptions: [] as Option[],
deptOptions: [] as OptionType[],
// 性别下拉项
genderOptions: [] as Option[],
genderOptions: [] as OptionType[],
// 角色下拉项
roleOptions: [] as Option[],
roleOptions: [] as OptionType[],
formData: {
status: 1
} as UserFormData,
status: 1,
} as UserForm,
queryParams: {
pageNum: 1,
pageSize: 10
} as UserQueryParam,
pageSize: 10,
} as UserQuery,
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
],
deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@@ -100,25 +96,25 @@ const state = reactive({
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}
trigger: 'blur',
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
importDialog: {
title: '用户搭配',
visible: false
} as Dialog,
visible: false,
} as DialogType,
importFormData: {} as UserImportData,
excelFile: undefined as any,
excelFilelist: [] as File[]
excelFilelist: [] as File[],
});
const {
@@ -135,7 +131,7 @@ const {
roleOptions,
importDialog,
importFormData,
excelFilelist
excelFilelist,
} = toRefs(state);
watchEffect(
@@ -143,7 +139,7 @@ watchEffect(
deptTreeRef.value.filter(state.deptName);
},
{
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
@@ -169,7 +165,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
* 获取角色下拉项
*/
async function getRoleOptions() {
listRoleOptions().then(response => {
listRoleOptions().then((response) => {
state.roleOptions = response.data;
});
}
@@ -185,7 +181,7 @@ function handleStatusChange(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(() => {
@@ -235,7 +231,7 @@ function resetPassword(row: { [key: string]: any }) {
'重置密码',
{
confirmButtonText: '确定',
cancelButtonText: '取消'
cancelButtonText: '取消',
}
)
.then(({ value }) => {
@@ -256,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
async function handleAdd() {
state.dialog = {
title: '添加用户',
visible: true
visible: true,
};
await getDeptOptions();
await getRoleOptions();
@@ -266,15 +262,15 @@ async function handleAdd() {
* 修改用户
**/
async function handleUpdate(row: { [key: string]: any }) {
state.dialog = {
dialog.value = {
title: '修改用户',
visible: true
visible: true,
};
const userId = row.id || state.ids;
await getDeptOptions();
await getRoleOptions();
getUserFormData(userId).then(({ data }) => {
getUserForm(userId).then(({ data }) => {
formData.value = data;
});
}
@@ -314,7 +310,7 @@ function handleDelete(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(function () {
@@ -339,7 +335,7 @@ function closeDialog() {
* 获取部门下拉项
*/
async function getDeptOptions() {
listDeptOptions().then(response => {
listDeptOptions().then((response) => {
state.deptOptions = response.data;
});
}
@@ -359,7 +355,7 @@ function getGenderOptions() {
function handleDownloadTemplate() {
downloadTemplate().then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载链接
@@ -411,7 +407,7 @@ function submitImportForm() {
const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then(response => {
importUser(deptId, roleIds, state.excelFile).then((response) => {
ElMessage.success(response.data);
closeImportDialog();
handleQuery();
@@ -436,7 +432,7 @@ function closeImportDialog() {
function handleExport() {
exportUser(queryParams.value).then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载的链接
@@ -573,7 +569,7 @@ onMounted(() => {
<el-table-column type="selection" width="50" align="center" />
<el-table-column
key="id"
label="用户编号"
label="编号"
align="center"
prop="id"
width="100"
@@ -584,11 +580,11 @@ onMounted(() => {
align="center"
prop="username"
/>
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="用户昵称" width="120" align="center" prop="nickname" />
<el-table-column label="性别" align="center" prop="genderLabel" />
<el-table-column label="性别" width="100" align="center" prop="genderLabel" />
<el-table-column label="部门" align="center" prop="deptName" />
<el-table-column label="部门" width="120" align="center" prop="deptName" />
<el-table-column
label="手机号码"
align="center"
@@ -612,31 +608,25 @@ onMounted(() => {
prop="createTime"
width="180"
></el-table-column>
<el-table-column label="操作" align="center" width="150">
<el-table-column label="操作" align="left" width="200">
<template #default="scope">
<el-button type="success" link @click="resetPassword(scope.row)"
>重置密码</el-button
>
<el-button
type="primary"
:icon="Edit"
circle
plain
link
@click="handleUpdate(scope.row)"
v-hasPerm="['sys:user:edit']"
></el-button>
>修改</el-button
>
<el-button
type="danger"
:icon="Delete"
circle
plain
link
@click="handleDelete(scope.row)"
v-hasPerm="['sys:user:delete']"
></el-button>
<el-button
type="warning"
:icon="Lock"
circle
plain
@click="resetPassword(scope.row)"
></el-button>
v-hasPerm="['sys:user:del']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>