<template>
|
<AHMContainer type="card">
|
<template #aside>
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
ref="leftTreeRef"
|
:treedata="listTreeData"
|
title-name="类目管理"
|
:show-more-operate="true"
|
:show-add="true"
|
:folderIcon="() => false"
|
:defaultProps="{
|
children: 'Children',
|
label: 'title',
|
id: 'id',
|
}"
|
:current-node-key="currentListID"
|
:expand-on-click-node="false"
|
:default-expand-all="true"
|
@click="handleClickNode"
|
:customDropdown="true"
|
@tree-add="openOperateFormulaGroupDialog"
|
>
|
<template #customDropdown="{ data, node }">
|
<el-dropdown-menu>
|
<el-dropdown-item>
|
<el-button
|
@click.stop="() => openOperateFormulaGroupDialog(data)"
|
link
|
type="primary"
|
icon="ele-Edit"
|
style="cursor: pointer"
|
>
|
编辑
|
</el-button>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<el-button
|
link
|
type="danger"
|
@click.stop="() => deleteCurrentFormulaGroup(node, data)"
|
icon="ele-Delete"
|
style="cursor: pointer"
|
>
|
删除
|
</el-button>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</LeftTreeByMgr>
|
</template>
|
|
<template #header>
|
<!-- 查询、重置、排序、增加表单 -->
|
<el-form :inline="true" :model="graphQueryParams">
|
<el-form-item label="名称" prop="title">
|
<el-input v-model="graphQueryParams.title" style="width: 226.4px" placeholder="文件名称" clearable></el-input>
|
</el-form-item>
|
<!-- <el-form-item>
|
<el-select v-model="graphQueryParams.Code" autocomplete="off" style="width: 226.4px" clearable>
|
<el-option v-for="item in Object.keys(analyzeMap)" :key="item" :value="parseInt(item)" :label="analyzeMap[item]">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="importData()"> 导入数据 </el-button>
|
</el-form-item>
|
</el-form></template
|
>
|
<template #main
|
><!-- 数据展示表格 -->
|
<div class="flex-auto flex-column h-full" v-if="state.isShowTrendFun">
|
<el-table
|
v-loading="formulaTableLoading"
|
ref="draggableFormulaTableRef"
|
border
|
row-key="id"
|
class="flex-auto"
|
:row-class-name="isFormulaTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="name" label="文件名称" fixed="left" show-overflow-tooltip align="left" />
|
<el-table-column prop="type" width="120" label="文件格式" show-overflow-tooltip align="center" />
|
<el-table-column prop="time" label="上传时间" show-overflow-tooltip width="280" align="center"></el-table-column>
|
<el-table-column label="操作" width="80" fixed="right" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<!-- <el-button icon="ele-Tickets" size="small" text type="primary" @click="openOperateDemoPage(scope.row)"> 详情</el-button> -->
|
<el-tooltip effect="dark" content="删除" placement="top">
|
<i
|
class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
|
@click="deleteCurrentFormulaRow(scope.row)"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<!-- 增加、修改数据对话框 -->
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="dataGroupDialogIsShow"
|
width="400"
|
:close-on-click-modal="false"
|
@closed="closeDataGroupDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon
|
:name="formulaGroupDialogHeaderIcon"
|
:size="16"
|
style="margin-right: 3px; display: inline; vertical-align: middle"
|
/>
|
<span> {{ formulaGroupDialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="dataGroupDialogFormValue" ref="formulaGroupDialogFormRef" :rules="formulaGroupDialogFormRules" label-width="55">
|
<el-form-item label="父级" v-if="!isEditDataGroupDialog" prop="parent_group">
|
<el-tree-select
|
default-expand-all
|
filterable
|
style="width: 100%"
|
v-model="dataGroupDialogFormValue.parent_group"
|
:props="{
|
id: 'id',
|
label: 'title',
|
children: 'Children',
|
}"
|
:data="listTreeData"
|
node-key="id"
|
:clearable="true"
|
:accordion="true"
|
:expandNode="false"
|
:check-strictly="true"
|
placeholder="请选择父级"
|
>
|
</el-tree-select>
|
</el-form-item>
|
<el-form-item label="名称" prop="title">
|
<el-input placeholder="请输入名称" v-model="dataGroupDialogFormValue.title"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeDataGroupDialog">取 消</el-button>
|
<el-button type="primary" @click="submitDataGroupFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</AHMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import {
|
add_knowledge_group,
|
delete_knowledge_file,
|
delete_knowledge_group,
|
get_knowledge_group_list,
|
list_knowledge_file,
|
update_knowledge_group,
|
} from '/@/api/knowledge/group';
|
import AHMContainer from '/@/components/layout/AHMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { deepClone } from '/@/utils/other';
|
import { convertListToTree } from '/@/utils/util';
|
const state = reactive({
|
tableParams: {
|
PageIndex: 1,
|
PageSize: 10,
|
},
|
tableTotal: 0,
|
isShowTrendFun: true,
|
showViewBack: false,
|
detailTitle: '',
|
});
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = ref(null);
|
const treeLoading = ref(false);
|
const listTreeData = ref([]);
|
const currentTreeNode = ref(null);
|
const currentListID = computed(() => currentTreeNode.value?.id);
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
|
});
|
currentTreeNode.value = data;
|
getCategoryTableData();
|
};
|
const getListTreeData = async (selectFirst = false) => {
|
treeLoading.value = true;
|
const res = await get_knowledge_group_list().finally(() => {
|
treeLoading.value = false;
|
});
|
if (res?.json_ok) {
|
const resData = (res.values || []) as [];
|
listTreeData.value = convertListToTree(resData, {
|
ID: 'id',
|
Children: 'Children',
|
ParentID: 'parent',
|
});
|
if (selectFirst) {
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
categoryTableData.value = [];
|
}
|
} else {
|
currentTreeNode.value && handleClickNode(currentTreeNode.value);
|
}
|
}
|
};
|
//#endregion
|
//#region ====================== 获取、删除表格数据 ======================
|
const formulaTableLoading = ref(false);
|
const categoryTableData = ref([]);
|
const isFormulaTableDrag = ref(false);
|
const getCategoryTableData = async () => {
|
const res = await list_knowledge_file().finally(() => {});
|
if (res?.json_ok) {
|
const resData = (res.values || []) as [];
|
resData.forEach((item) => {
|
const type = item?.name.split('.')[1];
|
item.type = type;
|
});
|
categoryTableData.value = resData;
|
} else {
|
ElMessage.error('获取文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
|
}
|
};
|
const deleteCurrentFormulaRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除文档列表：【${row.name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await delete_knowledge_file({
|
file_id: row.id,
|
});
|
|
if (res.json_ok) {
|
ElMessage.success('删除文档列表成功');
|
const index = categoryTableData.value.findIndex((d) => d.id === row.id);
|
categoryTableData.value.splice(index, 1);
|
} else {
|
ElMessage.error('删除文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#endregion
|
|
//#region ====================== 搜索表格，对表格排序 ======================
|
const graphQueryParams = ref({
|
title: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(categoryTableData, graphQueryParams, () => {
|
displayTableData.value = categoryTableData.value;
|
});
|
//#endregion
|
|
//#region ====================== 跳转文档详情页面 init======================
|
const router = useRouter();
|
const openOperateDemoPage = (row: any) => {
|
router.push({
|
name: 'GraphDetail',
|
params: {
|
id: row.id,
|
},
|
});
|
};
|
|
//导入数据
|
const importData = () => {
|
router.push({
|
name: 'AddGraph',
|
query: {
|
group_id: currentListID.value,
|
},
|
});
|
};
|
//#endregion
|
|
//#region ====================== 删除左侧树文档分组数据 ======================
|
|
const deleteCurrentFormulaGroup = (node, row: any) => {
|
ElMessageBox.confirm(`确定删除文档分组：【${row.title}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await delete_knowledge_group({
|
id: row.id,
|
});
|
|
if (res.json_ok) {
|
ElMessage.success('删除文档分组成功');
|
const parent = node.parent;
|
const children = parent.data.Children || parent.data;
|
const index = children.findIndex((d) => d.id === row.id);
|
children.splice(index, 1);
|
} else {
|
ElMessage.error('删除文档分组失败');
|
}
|
});
|
};
|
//#endregion
|
|
//#region ====================== 增加、删除文档分组操作, dialog init======================
|
const isEditDataGroupDialog = ref(false);
|
const formulaGroupDialogTitle = computed(() => {
|
return isEditDataGroupDialog.value ? '修改文档分组' : '添加文档分组';
|
});
|
const formulaGroupDialogHeaderIcon = computed(() => {
|
return isEditDataGroupDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const dataGroupDialogFormValue = ref(null);
|
const dataGroupDialogIsShow = ref(false);
|
|
const formulaGroupDialogFormRef = ref<FormInstance>(null);
|
|
const formulaGroupDialogFormRules = ref<FormRules>({
|
title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
});
|
const openOperateFormulaGroupDialog = (data?) => {
|
if (data) {
|
isEditDataGroupDialog.value = true;
|
const { id, title } = data;
|
dataGroupDialogFormValue.value = deepClone({ id, title });
|
} else {
|
isEditDataGroupDialog.value = false;
|
dataGroupDialogFormValue.value = { title: '', parent_group: '' };
|
}
|
dataGroupDialogIsShow.value = true;
|
};
|
|
const closeDataGroupDialog = () => {
|
dataGroupDialogIsShow.value = false;
|
formulaGroupDialogFormRef.value.clearValidate();
|
};
|
|
const submitDataGroupFormValue = async () => {
|
const valid = await formulaGroupDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditDataGroupDialog.value) {
|
const res = await update_knowledge_group(dataGroupDialogFormValue.value);
|
|
if (res.json_ok) {
|
getListTreeData();
|
closeDataGroupDialog();
|
ElMessage.success('修改文档分组成功');
|
} else {
|
ElMessage.error('修改文档分组失败');
|
}
|
} else {
|
const res = await add_knowledge_group({
|
...dataGroupDialogFormValue.value,
|
parent_group: dataGroupDialogFormValue.value.parent_group || '0',
|
});
|
if (res.json_ok) {
|
getListTreeData();
|
closeDataGroupDialog();
|
ElMessage.success('添加文档分组成功');
|
} else {
|
ElMessage.error('添加文档分组失败');
|
}
|
}
|
};
|
//#endregion
|
|
//#region ====================== 挂载时获取初始数据 ======================
|
onMounted(() => {
|
getListTreeData(true);
|
});
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
padding-bottom: unset;
|
}
|
</style>
|
