123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- <template>
- <fs-page>
- <el-row class="document-el-row">
- <el-col :span="3">
- <div class="document-box document-left-box">
- <TreeList ref="treeListRef" :treeData="documentTreeData"
- @treeClick="handleTreeClick"
- @updateDocument="handleUpdateDocument"
- @deleteDocument="handleDeleteDocument" />
- </div>
- </el-col>
- <el-col :span="21">
- <div class="document-box document-right-box">
- <fs-crud ref="crudRef" :dialog-width="800" v-bind="crudBinding">
- <template #cell-chinese_explanation="scope">
- <el-tooltip
- v-if="scope.row.chinese_explanation"
- :content="scope.row.chinese_explanation"
- placement="top"
- :hide-after="2000"
- >
- <span>{{ scope.row.chinese_explanation }}</span>
- </el-tooltip>
- <span v-else>-</span>
- </template>
- </fs-crud>
- </div>
- </el-col>
- </el-row>
- <!-- <TreeList ref="treeListRef" :treeData="treeData" /> -->
-
- <PermissionDrawerCom />
- <BatchTagsDialog ref="batchTagsDialogRef" :crudExpose="crudExpose" />
- <BatchCategoryDialog ref="batchCategoryDialogRef" :crudExpose="crudExpose" />
- <BatchCompetencyTagsDialog ref="batchCompetencyTagsDialogRef" :crudExpose="crudExpose" />
- </fs-page>
- </template>
- <script lang="ts" setup name="role">
- import { defineAsyncComponent, onMounted, ref } from 'vue';
- import { useFs } from '@fast-crud/fast-crud';
- import { createCrudOptions } from './crud';
- import { RoleDrawerStores } from './stores/RoleDrawerStores';
- import { RoleMenuBtnStores } from './stores/RoleMenuBtnStores';
- import { RoleMenuFieldStores } from './stores/RoleMenuFieldStores';
- import { RoleUsersStores } from './stores/RoleUsersStores';
- import { successMessage } from '../../../utils/message';
- import TreeList from './components/treeList.vue';
- import { GetDocumentTree, GetCategoryList, GetTagList } from '../positionList/api';
- const PermissionDrawerCom = defineAsyncComponent(() => import('./components/RoleDrawer.vue'));
- const BatchTagsDialog = defineAsyncComponent(() => import('./components/BatchTagsDialog.vue'));
- const BatchCategoryDialog = defineAsyncComponent(() => import('./components/BatchCategoryDialog.vue'));
- const BatchCompetencyTagsDialog = defineAsyncComponent(() => import('./components/BatchCompetencyTagsDialog.vue'));
- const batchTagsDialogRef = ref();
- const batchCategoryDialogRef = ref();
- const batchCompetencyTagsDialogRef = ref();
- const RoleDrawer = RoleDrawerStores(); // 角色-抽屉
- const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单
- const RoleMenuField = RoleMenuFieldStores();// 角色-菜单-字段
- const RoleUsers = RoleUsersStores();// 角色-用户
- const treeListRef = ref();
- const treeData = ref([]);
- // 定义树节点的类型
- interface TreeNode {
- id: string;
- title: string;
- children?: TreeNode[];
- question_type?: string;
- chinese_explanation?: string;
- name?: string;
- category_id?: string | number;
- }
- const documentTreeData = ref<TreeNode[]>([]); // 使用定义的类型
- const { crudBinding, crudRef, crudExpose } = useFs({
- createCrudOptions,
- context: {
- RoleDrawer,
- RoleMenuBtn,
- RoleMenuField,
- $message: {
- warning: (msg: string) => successMessage(msg)
- },
- openBatchTagsDialog: (selection: any) => {
- batchTagsDialogRef.value.open(selection);
- },
- openBatchCategoryDialog: (selection: any) => {
- batchCategoryDialogRef.value.open(selection);
- },
- openBatchCompetencyTagsDialog: (selection: any) => {
- batchCompetencyTagsDialogRef.value.open(selection);
- },
- selectedRows: [] // 存储选中的行
- },
- });
- const selectedCategoryId = ref(1);
- const handleTreeClick = (node: any) => {
- console.log('record', node);
-
- // 获取当前节点ID并处理前缀
- const currentNodeId = node?.currentNode?.id || '';
- const originalId = currentNodeId.replace(/^(open_|prof_|category_|tag_)/, '');
-
- // 保存当前选中的分类ID,如果ID不是数字则使用默认值1
- selectedCategoryId.value = (!isNaN(Number(originalId)) && originalId !== null) ? originalId : 1;
-
- // 根据不同的问题类型设置question_form
- let question_form;
- const firstLevelId = node?.firstLevel?.id;
- const nodeType = currentNodeId.startsWith('open_') ? 'open' :
- currentNodeId.startsWith('prof_') ? 'professional' :
- currentNodeId.startsWith('category_') ? 'category' :
- currentNodeId.startsWith('tag_') ? 'tag' :
- firstLevelId;
-
-
- if (nodeType === 'open' || firstLevelId === 'root') {
- question_form = '0'; // 职位开放题
- } else if (firstLevelId === 'psychology_questions') {
- question_form = '4'; // 心理题库
- } else if (firstLevelId === 'common_questions') {
- question_form = '1'; // 常识题库
- } else if (nodeType === 'professional' || firstLevelId === 'professional_questions') {
- question_form = '1,2,3,4,6'; // 专业考察题库
- } /* else {
- question_form = '0'; // 默认为职位开放题
- } */
- /* // 重置上传文件状态
- uploadedFile.value = null; */
-
- // 构建搜索参数
- const searchParams = {
- form: {
- limit: 20,
- position_types: selectedCategoryId.value,
- question_form: question_form,
- ...(nodeType === 'category' ? { question_category: originalId } : {}),
- ...(nodeType === 'tag' ? { question_tags: originalId } : {})
- }
- };
-
- // 执行搜索
- crudExpose.doSearch(searchParams);
- };
- const handleUpdateDocument = (node: any) => {
- console.log('node', node);
- };
- const handleDeleteDocument = (node: any) => {
- console.log('node', node);
- };
- // 获取文档树数据
- const getTreeData = () => {
- GetDocumentTree({}).then((ret: any) => {
- console.log('ret', ret);
- const responseData = ret.data;
- GetCategoryList({}).then((res: any) => {
- console.log('res', res);
- const categoryList = res.data.items;
- GetTagList({}).then((res: any) => {
- console.log('res', res);
- const tagList = res.data.items;
-
- // 创建根节点
- const rootNode = [
- {
- id: 'root',
- title: '职位开放题',
- children: responseData.map((item: any) => ({
- ...item,
- id: `open_${item.id}`,
- title: item.name || item.title,
- question_type: 'open',
- chinese_explanation: item.chinese_explanation || ''
- }))
- },
- {
- id: 'professional_questions',
- title: '专业考察题库',
- children: responseData.map((item: any) => ({
- ...item,
- id: `prof_${item.id}`,
- title: item.name || item.title,
- question_type: 'professional',
- chinese_explanation: item.chinese_explanation || ''
- }))
- },
- ...categoryList.map((item: any) => ({
- id: `category_${item.id}`,
- title: item.name,
- children: tagList.filter((tag: any) => tag.category_id === item.id).map((tag: any) => ({
- id: `tag_${tag.id}`,
- title: tag.name,
- chinese_explanation: tag.chinese_explanation || ''
- }))
- }))
- ];
- documentTreeData.value = rootNode;
- });
- });
- });
- };
- // 页面打开后获取列表数据
- onMounted(async () => {
- getTreeData()
- // 刷新
- crudExpose.doRefresh();
- // 获取全部用户
- RoleUsers.get_all_users();
- });
- </script>
- <style lang="scss" scoped>
- .document-el-row {
- height: 100%;
- overflow: hidden;
- .el-col {
- height: 100%;
- padding: 10px 0;
- box-sizing: border-box;
- }
- }
- .document-box {
- height: 100%;
- padding: 10px;
- background-color: var(--el-fill-color-blank);
- box-sizing: border-box;
- }
- .document-left-box {
- position: relative;
- border-radius: 0 8px 8px 0;
- margin-right: 10px;
- overflow-y: auto;
- }
- .document-right-box {
- border-radius: 8px 0 0 8px;
- }
- /* 添加中文释义相关样式 */
- .chinese-explanation {
- color: #666;
- font-size: 14px;
- margin-top: 4px;
-
- &:hover {
- color: #409EFF;
- }
- }
- .tooltip-content {
- max-width: 300px;
- word-break: break-all;
- white-space: pre-wrap;
- }
- </style>
|