<template>
|
<HMContainer type="card">
|
<template #header>
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams">
|
<el-form-item label="名称" prop="user_name">
|
<el-input v-model="queryParams.user_name" style="width: 226.4px" placeholder="名称" clearable @input="debounceQueryTable" />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button icon="ele-Plus" @click="openOptDlg()" type="primary"> 添加 </el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #main>
|
<div class="h-full" ref="chatDragContainerRef">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="displayTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="user_name" label="用户名" width="120" fixed="left" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="中文名" prop="real_name" width="90" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="性别" prop="sex" width="70" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="角色" prop="user_roles" width="250" show-overflow-tooltip>
|
<template #default="{ row }">
|
<el-tag class="table-tag-space" v-for="(role, index) in row.user_roles" :key="index + ''">{{
|
roleMap[role].title
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="部门" prop="part" width="100" show-overflow-tooltip> </el-table-column>
|
|
<el-table-column label="手机号" prop="phone" width="120" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="邮件" prop="email" width="190" show-overflow-tooltip> </el-table-column>
|
|
<el-table-column prop="note" label="说明" show-overflow-tooltip />
|
|
<el-table-column label="操作" width="180" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="space-x-3 items-center flex">
|
<el-tooltip effect="dark" content="编辑" placement="top">
|
<i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="修改密码" placement="top">
|
<i
|
class="ywifont ywicon-mima !text-[15px] text-blue-400 cursor-pointer font-bold"
|
@click="openOptPasswordDlg(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="修改角色" placement="top">
|
<i
|
class="ywifont ywicon-jiaose !text-[15px] text-blue-400 cursor-pointer font-bold"
|
@click="openOptRoleDlg(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="删除" placement="top">
|
<i class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" @click="deleteCurrentRow(scope.row)"></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :roleList="roleList"></OptDlg>
|
<OptPasswordDlg
|
v-model="optPasswordDlgIsShow"
|
:item="optPasswordDlgMapRow"
|
@update="updatePasswordOpt"
|
:roleList="roleList"
|
></OptPasswordDlg>
|
<OptRoleDlg v-model="optRoleDlgIsShow" :item="optRoleDlgMapRow" @update="updateRoleOpt" :roleList="roleList"></OptRoleDlg>
|
|
<!-- <MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt>
|
<MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName> -->
|
</HMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { debounce, getItemMap } from '/@/utils/util';
|
|
import { onMounted, ref } from 'vue';
|
import { usePageDisplay } from '/@/hooks/usePageDisplay';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
// import { useTableSort } from '/@/hooks/useTableSort';
|
// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import OptDlg from './optDlg/OptDlg.vue';
|
import OptPasswordDlg from './optDlg/OptPasswordDlg.vue';
|
import OptRoleDlg from './optDlg/OptRoleDlg.vue';
|
|
import * as userApi from '/@/api/auth/user';
|
|
import { getRoleInfoListByPost } from '/@/api/auth/role';
|
import HMContainer from '/@/components/layout/HMContainer.vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { computed } from 'vue';
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
const res = await userApi.getUserInfoListByPost();
|
|
tableData.value = (res?.values ?? []).map((item) => ({
|
user_id: item.id,
|
user_name: item.name,
|
phone: item.phone,
|
real_name: item.real_name,
|
part: item.part,
|
sex: item.sex,
|
email: item.email,
|
note: item.note,
|
user_roles: item.roles,
|
}));
|
};
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
|
const queryParams = ref({
|
user_name: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
|
displayTableData.value = tableData.value;
|
});
|
const debounceQueryTable = debounce(handleQueryTable, 400);
|
|
//#endregion
|
|
//#region ====================== 查询快捷键 ======================
|
const queryFormRef = ref(null);
|
const pressEnterSearch = (ev: KeyboardEvent) => {
|
if (ev.key === 'Enter') {
|
handleQueryTable();
|
}
|
};
|
usePageDisplay(
|
() => {
|
queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch);
|
},
|
() => {
|
queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch);
|
}
|
);
|
//#endregion
|
|
//#region ====================== 添加修改操作 ======================
|
const optDlgIsShow = ref(false);
|
const optDlgMapRow = ref(null);
|
const openOptDlg = (row?: any) => {
|
optDlgMapRow.value = row;
|
optDlgIsShow.value = true;
|
};
|
|
const updateOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
const insertOpt = (newData) => {
|
tableData.value.push({ ...newData });
|
};
|
//#endregion
|
|
const deleteCurrentRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除用户：【${row.user_name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await userApi.deleteUserInfoByPost({
|
user_id: row.user_id,
|
});
|
const foundIndex = tableData.value.findIndex((item) => item === row);
|
foundIndex > -1 && tableData.value.splice(foundIndex, 1);
|
ElMessage.success('删除用户成功');
|
});
|
};
|
//#region ====================== 修改密码操作 ======================
|
const optPasswordDlgIsShow = ref(false);
|
const optPasswordDlgMapRow = ref(null);
|
const openOptPasswordDlg = (row?: any) => {
|
optPasswordDlgMapRow.value = row;
|
optPasswordDlgIsShow.value = true;
|
};
|
|
const updatePasswordOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 修改角色操作 ======================
|
const optRoleDlgIsShow = ref(false);
|
const optRoleDlgMapRow = ref(null);
|
const openOptRoleDlg = (row?: any) => {
|
optRoleDlgMapRow.value = row;
|
optRoleDlgIsShow.value = true;
|
};
|
|
const updateRoleOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
//#endregion
|
|
|
const roleList = ref([]);
|
const roleMap = computed(() => getItemMap(roleList.value, 'id'));
|
const getRoleList = async () => {
|
const res = await getRoleInfoListByPost();
|
|
roleList.value = res?.values ?? [];
|
};
|
onMounted(async () => {
|
await getRoleList();
|
|
getTableData();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
