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