修改数据管理

yangyin

2024-10-10 eac6d7b13f49d9d686853f409af1ea323e107776

 src/views/project/yw/dataManage/graph/GraphIndex.vue

@@ -1,53 +1,23 @@
<template>
   <AHMContainer type="card">
      <template #aside>
         <!-- 目录树 -->
         <LeftTreeByMgr
            v-loading="treeLoading"
            class="h100"
            ref="leftTreeRef"
            :treedata="listTreeData"
            title-name="类目管理"
            :show-more-operate="true"
            :show-add="true"
            :folderIcon="() => false"
            :defaultProps="{
               children: 'Children',
               label: 'title',
               id: 'id',
               id: 'group_id',
               label: 'group_name',
               children: 'children',
            }"
            :treedata="listTreeData"
            title-name="分组列表"
            :show-more-operate="false"
            :show-add="false"
            :current-node-key="currentListID"
            :expand-on-click-node="false"
            :default-expand-all="true"
            :node-icon="() => 'ele-Document'"
            @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>

@@ -57,13 +27,6 @@
            <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>
@@ -116,78 +79,20 @@
            </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 * as agentGroupApi from '/@/api/ai/agentGroup';
import { delete_knowledge_file, list_knowledge_file } 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 mittBus from '/@/utils/mitt';
import { useCompRef } from '/@/utils/types';
import { convertFileSize, convertListToTree } from '/@/utils/util';
const state = reactive({
   tableParams: {
@@ -200,40 +105,37 @@
   detailTitle: '',
});
//#region ====================== 左侧树数据，tree init ======================
const leftTreeRef = ref(null);
const leftTreeRef = useCompRef(LeftTreeByMgr);
const treeLoading = ref(false);
const listTreeData = ref([]);
const currentTreeNode = ref(null);
const currentListID = computed(() => currentTreeNode.value?.id);
const listData = ref([]);
const currentListID = computed(() => currentNode.value?.group_id);
const currentNode = ref(null);

const listTreeData = computed(() => {
   const result = convertListToTree(listData.value, {
      ID: 'group_id',
      ParentID: 'p_group_id',
      Children: 'children',
   });
   return result;
});

const handleClickNode = (data) => {
   nextTick(() => {
      leftTreeRef.value?.treeRef.setCurrentKey(data.id);
   });
   currentTreeNode.value = data;
   currentNode.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);
      }
const getListTreeData = async () => {
   const res = await agentGroupApi.getSceneGroupTreeByPost();
   listData.value = res.groups || [];
   const firstListTreeNode = listTreeData.value[0];
   if (firstListTreeNode) {
      handleClickNode(firstListTreeNode);
   } else {
      categoryTableData.value = [];
      currentNode.value = null;
   }
};
//#endregion
@@ -290,6 +192,7 @@
//#region ====================== 跳转文档详情页面 init======================
const router = useRouter();
const openOperateDemoPage = (row: any) => {
   console.log('🚀 ~ row:', row);
   router.push({
      name: 'ViewFile',
      query: {
@@ -311,103 +214,17 @@
      name: 'AddGraph',
      query: {
         group_id: currentListID.value,
         title: currentTreeNode.value.title,
         title: currentNode.value.group_name,
      },
   });
};
//#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);
   getListTreeData();
   mittBus.on('addGraphObj', (obj) => {
      categoryTableData.value.push(obj);
   });
});
//#endregion
</script>