|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <div class="page-admin-portal">
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ v-loading="true"
|
|
|
+ style="
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ "
|
|
|
+ class=""
|
|
|
+ element-loading-text="Loading..."
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.3)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-if="pwd !== '123458'"
|
|
|
+ class="main-content flex center"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="pwd"
|
|
|
+ placeholder="天王盖地虎"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="main-content"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="margin: 0 auto"
|
|
|
+ >
|
|
|
+ <div class="logo-area">
|
|
|
+ <img
|
|
|
+ :src="getLogoPath()"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="page-title">企业微信用户列表</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex start">
|
|
|
+ <div style="width: 360px">
|
|
|
+ <div
|
|
|
+ v-for="item in deptList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="dept-item"
|
|
|
+ :class="{ active: item.id === currentDept }"
|
|
|
+ @click="clickDept(item)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <template v-if="item.children && item.children.length">
|
|
|
+ <div
|
|
|
+ v-for="subItem in item.children"
|
|
|
+ :key="subItem.id"
|
|
|
+ class="dept-sub-item"
|
|
|
+ :class="{ active: subItem.id === currentDept }"
|
|
|
+ @click="clickDept(item)"
|
|
|
+ >
|
|
|
+ {{ subItem.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-auto">
|
|
|
+ <el-table :data="userList">
|
|
|
+ <el-table-column
|
|
|
+ label="Name"
|
|
|
+ prop="name"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="User ID"
|
|
|
+ prop="userid"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+export default defineComponent({
|
|
|
+ name: 'WecomApproval',
|
|
|
+})
|
|
|
+</script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { defineComponent, ref } from 'vue'
|
|
|
+import request from '@/utils/axios'
|
|
|
+import { ElMessage, ElTable, ElTableColumn, ElInput } from 'element-plus'
|
|
|
+const loading = ref(false)
|
|
|
+const pwd = ref('')
|
|
|
+
|
|
|
+const getLogoPath = function () {
|
|
|
+ return new URL('/assets/logo@2x.png', import.meta.url).href
|
|
|
+}
|
|
|
+interface dept {
|
|
|
+ id: number
|
|
|
+ parentid: number
|
|
|
+ name: string
|
|
|
+ order?: number
|
|
|
+ department_leader?: string[]
|
|
|
+ children?: dept[]
|
|
|
+}
|
|
|
+const deptList = ref([] as dept[])
|
|
|
+const currentDept = ref(0)
|
|
|
+const defaultMenu = ref('')
|
|
|
+
|
|
|
+loading.value = true
|
|
|
+request.post('/Shipping_tracking/getDepartmentList').then((res) => {
|
|
|
+ // console.log(res, 'res')
|
|
|
+ const d = res.data.result
|
|
|
+ if (res.data.code !== 1 || !Array.isArray(d.message.department)) {
|
|
|
+ ElMessage.error('获取部门列表数据出错')
|
|
|
+ }
|
|
|
+
|
|
|
+ const temp: dept[] = []
|
|
|
+
|
|
|
+ d.message.department
|
|
|
+ .sort((a: dept, b: dept) => a.id - b.id)
|
|
|
+ .forEach((i: dept) => {
|
|
|
+ if (i.parentid === 1) {
|
|
|
+ temp.push({
|
|
|
+ ...i,
|
|
|
+ children: [],
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ const index = temp.findIndex((a) => a.id === i.parentid)
|
|
|
+ if (index > -1) {
|
|
|
+ temp[index].children!.push(i)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ deptList.value = temp
|
|
|
+ currentDept.value = deptList.value[0]?.id
|
|
|
+ defaultMenu.value = deptList.value[0]?.id.toString()
|
|
|
+ getDeptDetail()
|
|
|
+})
|
|
|
+const userList = ref([])
|
|
|
+const clickDept = function (item: dept) {
|
|
|
+ currentDept.value = item.id
|
|
|
+ getDeptDetail()
|
|
|
+}
|
|
|
+const getDeptDetail = function () {
|
|
|
+ request
|
|
|
+ .post('/Shipping_tracking/getDepartmentListDetail', {
|
|
|
+ id: Number(currentDept.value),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, 'res')
|
|
|
+ const d = res.data.result
|
|
|
+ if (res.data.code !== 1 || !Array.isArray(d.message.userlist)) {
|
|
|
+ ElMessage.error('获取部门数据出错')
|
|
|
+ }
|
|
|
+ userList.value = d.message.userlist
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main-content {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 12px 40px 12px;
|
|
|
+ width: 1600px;
|
|
|
+ min-width: 1200px;
|
|
|
+ min-height: 100vh;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
|
|
|
+ 0 0.5em 1em rgba(0, 0, 0, 0.6);
|
|
|
+}
|
|
|
+.logo-area {
|
|
|
+ padding: 12px 0 12px;
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ left: -16px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.page-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222;
|
|
|
+}
|
|
|
+.dept-item,
|
|
|
+.dept-sub-item {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background-color: #eee;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dept-sub-item {
|
|
|
+ border-left: 1px solid #ddd;
|
|
|
+ &::before {
|
|
|
+ content: '---- ';
|
|
|
+ color: #ddd;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
