|
@@ -0,0 +1,112 @@
|
|
|
+<template>
|
|
|
+ <v-card class="card-box d-flex pa-3" height="80vh">
|
|
|
+ <v-row no-gutters justify="space-between">
|
|
|
+ <v-col cols="3">
|
|
|
+ <v-treeview
|
|
|
+ :items="items"
|
|
|
+ activatable
|
|
|
+ color="primary"
|
|
|
+ item-value="id"
|
|
|
+ mandatory
|
|
|
+ item-title="anotherName"
|
|
|
+ open-strategy="single"
|
|
|
+ @update:activated="handleClick"
|
|
|
+ @update:opened="handleClick"
|
|
|
+ ></v-treeview>
|
|
|
+ </v-col>
|
|
|
+ <v-divider vertical></v-divider>
|
|
|
+ <v-col class="ml-10">
|
|
|
+ <TextInput v-model="query.name" :item="textItem" @change="getUserList"></TextInput>
|
|
|
+ <v-data-table
|
|
|
+ :loading="loading"
|
|
|
+ color="#00897B"
|
|
|
+ :items="tableData"
|
|
|
+ :headers="headers"
|
|
|
+ >
|
|
|
+ <template #bottom>
|
|
|
+ <CtPagination
|
|
|
+ v-if="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page="query.pageNo"
|
|
|
+ :limit="query.pageSize"
|
|
|
+ @handleChange="handleChangePage"
|
|
|
+ ></CtPagination>
|
|
|
+ </template>
|
|
|
+ </v-data-table>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'group-account'})
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useI18n } from '@/hooks/web/useI18n'
|
|
|
+import { getEnterpriseUserList } from '@/api/recruit/enterprise/system/user'
|
|
|
+import { getEnterpriseTree } from '@/api/recruit/enterprise/system/group'
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+const total = ref(0)
|
|
|
+const loading = ref(false)
|
|
|
+const query = ref({
|
|
|
+ pageSize: 10,
|
|
|
+ pageNo: 1,
|
|
|
+ enterpriseId: '',
|
|
|
+ name: null
|
|
|
+})
|
|
|
+const tableData = ref([])
|
|
|
+const items = ref([])
|
|
|
+const headers = [
|
|
|
+ { title: t('login.username'), key: 'name', sortable: false },
|
|
|
+ { title: t('enterprise.userManagement.affiliatedEnterprise'), key: 'enterpriseAnotherName', sortable: false },
|
|
|
+ { title: t('enterprise.userManagement.post'), key: 'post.nameCn', sortable: false },
|
|
|
+ { title: t('enterprise.userManagement.phone'), key: 'phone', sortable: false }
|
|
|
+]
|
|
|
+const textItem = ref({
|
|
|
+ type: 'text',
|
|
|
+ value: null,
|
|
|
+ width: 250,
|
|
|
+ clearable: true,
|
|
|
+ label: '请输入用户名称搜索'
|
|
|
+})
|
|
|
+
|
|
|
+// 获取用户列表
|
|
|
+const getUserList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const { list, total: number } = await getEnterpriseUserList(query.value)
|
|
|
+ tableData.value = list
|
|
|
+ total.value = number
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取树形列表
|
|
|
+const getTreeData = async () => {
|
|
|
+ const data = await getEnterpriseTree()
|
|
|
+ if (!data) return
|
|
|
+ items.value = [data]
|
|
|
+ query.value.enterpriseId = data.id
|
|
|
+ // 获取用户列表
|
|
|
+ getUserList()
|
|
|
+}
|
|
|
+getTreeData()
|
|
|
+
|
|
|
+// 分页
|
|
|
+const handleChangePage = (e) => {
|
|
|
+ query.value.pageNo = e
|
|
|
+ getUserList()
|
|
|
+}
|
|
|
+
|
|
|
+// 树形click
|
|
|
+const handleClick = (e) => {
|
|
|
+ if (!e.length) return
|
|
|
+ query.value.enterpriseId = e[0]
|
|
|
+ getUserList()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|