forked from kongfp/Tp_Web2.0
feat: 完成接口联调（用户、部门）
JINGYJ
2 years ago
parent
35ca8e393c
commit
3d3a6788e6
@ -0,0 +1,84 @@
|
||||
import { http } from "@/utils/http";
|
||||
import { baseUrlApi } from "./utils";
|
||||
|
||||
type deptResult = {
|
||||
data: Array<any>;
|
||||
};
|
||||
|
||||
/** 部门列表查询 */
|
||||
export const getDeptList = (params?: object) => {
|
||||
return http.request<deptResult>("get", baseUrlApi("departments/"), {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
type deptStatus = {
|
||||
success: boolean;
|
||||
msg: any;
|
||||
};
|
||||
|
||||
/** 新增部门 */
|
||||
export const addDept = (data?: object) => {
|
||||
return http.request<deptStatus>("post", baseUrlApi("departments/"), {
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/** 更新部门 */
|
||||
export const updateDept = (data?: object | any) => {
|
||||
return http.request<deptStatus>(
|
||||
"put",
|
||||
baseUrlApi(`departments/${data.id}/`),
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/** 删除部门 */
|
||||
export const deleteDept = (data?: object | any) => {
|
||||
return http.request<deptStatus>(
|
||||
"delete",
|
||||
baseUrlApi(`departments/${data}/`),
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type userList = {
|
||||
count: number;
|
||||
next: any;
|
||||
previous: any;
|
||||
results?: Array<any>;
|
||||
};
|
||||
|
||||
/** 用户列表查询 */
|
||||
export const getUserList = (params?: object) => {
|
||||
return http.request<userList>("get", baseUrlApi("user/"), {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
type userStatus = {
|
||||
success: boolean;
|
||||
msg: any;
|
||||
};
|
||||
/** 新增用户 */
|
||||
export const addUser = (data?: object) => {
|
||||
return http.request<userStatus>("post", baseUrlApi("user/"), { data });
|
||||
};
|
||||
|
||||
/** 更新用户 */
|
||||
export const updateUser = (data?: object | any) => {
|
||||
return http.request<userStatus>("put", baseUrlApi(`user/${data.id}/`), {
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除用户 */
|
||||
export const deleteUser = (data?: object | any) => {
|
||||
return http.request<userStatus>("delete", baseUrlApi(`user/${data}/`), {
|
||||
data
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
// import { handleTree } from "@/utils/tree";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
|
||||
import { useUser } from "./utils/hook";
|
||||
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import ExpandIcon from "./svg/expand.svg?component";
|
||||
import UnExpandIcon from "./svg/unexpand.svg?component";
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
name: string;
|
||||
highlight?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
const { form, onSearch } = useUser();
|
||||
const treeRef = ref();
|
||||
const treeData = ref([]);
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name"
|
||||
};
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
return data.name.includes(value);
|
||||
};
|
||||
|
||||
function nodeClick(value) {
|
||||
const nodeId = value.$treeNodeId;
|
||||
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
|
||||
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: false
|
||||
})
|
||||
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
|
||||
highlight: true
|
||||
});
|
||||
Object.values(highlightMap.value).forEach((v: Tree) => {
|
||||
if (v.id !== nodeId) {
|
||||
v.highlight = false;
|
||||
}
|
||||
});
|
||||
form.department_id = value.id;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(status) {
|
||||
isExpand.value = status;
|
||||
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status;
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置状态（选中状态、搜索框值、树初始化） */
|
||||
function onReset() {
|
||||
highlightMap.value = {};
|
||||
searchValue.value = "";
|
||||
toggleRowExpansionAll(true);
|
||||
form.department_id = searchValue.value;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
watch(searchValue, val => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
// const deptList = reactive({});
|
||||
|
||||
// function getDeptList() {
|
||||
// // http.request("post", "/login")
|
||||
// return deptList;
|
||||
// }
|
||||
onMounted(async () => {
|
||||
const { data } = await getDeptList();
|
||||
// treeData.value = handleTree(data.data);
|
||||
treeData.value = data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
:style="{ minHeight: `calc(100vh - 133px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[34px]">
|
||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||
部门列表
|
||||
</p>
|
||||
<el-input
|
||||
style="flex: 2"
|
||||
size="small"
|
||||
v-model="searchValue"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
:icon="Search"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<IconifyIconOffline
|
||||
class="w-[28px] cursor-pointer"
|
||||
width="18px"
|
||||
:icon="More2Fill"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
@click="onReset"
|
||||
>
|
||||
重置状态
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
size="small"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span
|
||||
:class="[
|
||||
'pl-1',
|
||||
'pr-1',
|
||||
'rounded',
|
||||
'flex',
|
||||
'items-center',
|
||||
'select-none',
|
||||
searchValue.trim().length > 0 &&
|
||||
node.label.includes(searchValue) &&
|
||||
'text-red-500',
|
||||
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
|
||||
]"
|
||||
:style="{
|
||||
background: highlightMap[node.id]?.highlight
|
||||
? 'var(--el-color-primary-light-7)'
|
||||
: 'transparent'
|
||||
}"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.type === 1
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { ref, h } from "vue";
|
||||
// import { http } from "@/utils/http";
|
||||
|
||||
export function welcomeUtil() {
|
||||
const currentPlayingIndex = ref(-1);
|
||||
function openDialog(title = "视频", row, index: number) {
|
||||
console.log(row.video_dir, "row.video_dir");
|
||||
addDialog({
|
||||
title: `${title}用户`,
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => {
|
||||
return h(
|
||||
"video",
|
||||
{
|
||||
controls: true,
|
||||
id: "video-" + index,
|
||||
onPlay: () => playVideo(row, index)
|
||||
},
|
||||
[h("source", { src: row.video_dir, type: "video/mp4" })]
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
function playVideo(row, index) {
|
||||
if (currentPlayingIndex.value !== -1) {
|
||||
const videoElement = document.getElementById(
|
||||
"video-" + currentPlayingIndex.value
|
||||
);
|
||||
videoElement.pause(); // 暂停当前正在播放的视频
|
||||
}
|
||||
currentPlayingIndex.value = index;
|
||||
}
|
||||
|
||||
return {
|
||||
openDialog
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue