From a08e2511bc5437c4264a6f57421450ac0312ac01 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期一, 21 十月 2024 14:40:37 +0800 Subject: [PATCH] 主应用场景包括次应用场景的所有清单 --- src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue | 652 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 592 insertions(+), 60 deletions(-) diff --git a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue b/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue index f2f6b51..23bbdf8 100644 --- a/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue +++ b/src/views/project/yw/lowCode/sqlAmis/SqlAmis.vue @@ -1,67 +1,599 @@ <template> - <div class="h-full flex flex-col"> - <div class="grid grid-cols-2 gap-2 h-2/3 flex-0"> - <div class="h-full overflow-auto"> - <!-- <codemirror - v-model="dockCode" - :style="{ height: '100%' }" - :autofocus="true" - :indent-with-tab="true" - :tab-size="2" - :extensions="dockEditorExtensions" - @change="log('change', $event)" - @focus="log('focus', $event)" - @blur="log('blur', $event)" - /> --> - + <AHMContainer type="card" v-if="supervisorMgrShow"> + <template #aside> + <!-- 鐩綍鏍� --> + <LeftTreeByMgr + v-loading="treeLoading" + class="h100" + ref="leftTreeRef" + :defaultProps="{ + id: 'group_id', + label: 'group_name', + children: 'children', + }" + :treedata="listTreeData" + title-name="鍦烘櫙鍒楄〃" + :show-more-operate="false" + defaultExpandAll + :show-add="false" + :current-node-key="currentListID" + :node-icon="() => 'ele-Document'" + @click="handleClickNode" + > + </LeftTreeByMgr> + </template> + <template #header> + <el-form ref="queryFormRef" :inline="true" :model="queryParams"> + <el-form-item label="鏍囬" prop="title"> + <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="鏍囬" clearable /> + </el-form-item> + <el-form-item> + <el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button> + <el-button icon="ele-Plus" @click="openOptDlg()"> 娣诲姞 </el-button> + </el-form-item> + </el-form> + </template> + <template #main> + <div class="h-full flex-column"> + <div class="flex-0 flex"> + <ColFilter class="ml-auto" :columnList="columnList" /> + </div> + <el-table + v-loading="tableLoading" + ref="draggableTableRef" + class="flex-auto" + border + :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" + :data="showPageList" + highlight-current-row + > + <template v-for="item in columnList" :key="item.prop"> + <el-table-column + v-if="item.isShow ?? true" + :prop="item.prop" + :label="item.label" + :fixed="item.fixed" + :width="item.width" + showOverflowTooltip + > + <template #default="scope" v-if="item.prop === 'published'"> + <el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{ + supervisorPublishedMap[scope.row.published] + }}</el-tag> + </template> + + <template #default="scope" v-else-if="item.prop === 'operate'"> + <div class="space-x-3 items-center flex"> + <el-tooltip effect="dark" content="AMIS浣庝唬鐮佺紪杈�" placement="top"> + <i class="ywifont ywicon-didaima !text-[21px] text-blue-400 cursor-pointer" @click="gotoAmisPage(scope.row)"></i> + </el-tooltip> + <el-tooltip effect="dark" content="鏁版嵁瀵规帴" placement="top"> + <i class="ywifont ywicon-sjdj !text-[17px] text-blue-400 cursor-pointer" @click="editSqlClick(scope.row)"></i> + </el-tooltip> + + <el-tooltip effect="dark" content="瀵硅瘽娴嬭瘯" placement="top"> + <i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(scope.row)"></i> + </el-tooltip> + + <el-tooltip + effect="dark" + :content="scope.row.published === SupervisorPublished.Y ? '鍙栨秷鍙戝竷' : '鍙戝竷'" + placement="top" + > + <i + class="ywifont !text-[20px] cursor-pointer" + :class="[ + scope.row.published === SupervisorPublished.Y ? 'ywicon-quxiaofabu text-red-400' : 'ywicon-fabu text-blue-400', + ]" + @click=" + publishStatusChange( + scope.row.published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y, + scope.row.id, + scope.$index + ) + " + ></i> + </el-tooltip> + <el-tooltip effect="dark" content="缂栬緫" placement="top"> + <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i> + </el-tooltip> + <el-tooltip effect="dark" content="鍒犻櫎" placement="top"> + <i + class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" + @click=" + () => { + deleteCurrentRow(scope.row, '椤甸潰', supervisorAdminApi.deleteSupervisor, () => { + const foundIndex = tableData.findIndex((item) => item === scope.row); + foundIndex > -1 && tableData.splice(foundIndex, 1); + }); + } + " + ></i> + </el-tooltip> + </div> + </template> + </el-table-column> + </template> + </el-table> + <div + v-if="chatTestIsShow" + ref="draggableChatRef" + :style="style" + class="fixed z-50 w-[700px] h-[800px] flex flex-col bg-[rgb(239,244,253)] right-0 bottom-0 rounded-lg" + > + <div ref="chatDragHandlerRef" class="flex-0"> + <div class="flex items-center justify-between py-2 px-4"> + <div class="font-bold cursor-move"> + WI姘村姟鏅鸿兘绠″鈥斺�斻�恵{ chatTestMapRow?.title }}銆戞祴璇� + <!-- <img src="/static/images/logo/logo-mini.svg" width="10" height="10" /> --> + </div> + <i class="ywifont ywicon-guanbi font-[10px] font-bold cursor-pointer" @click="closeChatTest"></i> + </div> + </div> + <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat> + </div> </div> - <div class="h-full overflow-auto"> - <codemirror - class="h-full overflow-auto" - v-model="sqlCode" - :style="{ height: '100%' }" - :autofocus="true" - :indent-with-tab="true" - :tab-size="2" - :extensions="sqlEditorExtensions" - @change="log('change', $event)" - @focus="log('focus', $event)" - @blur="log('blur', $event)" - /> - </div> - </div> - <div class="flex-auto overflow-auto mt-3"> - <codemirror - disabled - class="h-full overflow-auto" - v-model="jsonCode" - :style="{ height: '100%' }" - :autofocus="true" - :indent-with-tab="true" - :tab-size="2" - :extensions="jsonEditorExtensions" - @change="log('change', $event)" - @focus="log('focus', $event)" - @blur="log('blur', $event)" - /> - </div> - </div> + </template> + + <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :groupId="currentListID"></OptDlg> + + <!-- 澧炲姞銆佷慨鏀规暟鎹璇濇 --> + <el-dialog + :destroy-on-close="true" + v-model="moduleDialogIsShow" + width="300" + :close-on-click-modal="false" + @closed="closeModuleDialog" + > + <template #header> + <div style="color: #fff"> + <SvgIcon :name="moduleDialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" /> + <span> {{ moduleDialogTitle }} </span> + </div> + </template> + + <el-form :model="moduleDialogFormValue" ref="moduleDialogFormRef" :rules="moduleDialogFormRules" label-width="55"> + <el-form-item label="鍚嶇О" prop="title"> + <el-input placeholder="璇疯緭鍏ュ悕绉�" v-model="moduleDialogFormValue.title"></el-input> + </el-form-item> + <el-form-item label="鐖剁骇" prop="parent_id" v-if="!isEditModuleDialog"> + <el-tree-select + filterable + class="w100" + v-model="moduleDialogFormValue.parent_id" + :props="{ + id: 'id', + label: 'title', + children: 'children', + }" + defaultExpandAll + :data="parentSelectOptions" + node-key="id" + :clearable="true" + :accordion="false" + :expandNode="false" + :check-strictly="true" + placeholder="璇烽�夋嫨鐖剁骇" + > + </el-tree-select> + </el-form-item> + </el-form> + <template #footer> + <div> + <el-button @click="closeModuleDialog">鍙� 娑�</el-button> + <el-button type="primary" @click="submitModuleFormValue">纭� 瀹�</el-button> + </div> + </template> + </el-dialog> + </AHMContainer> + <SqlAmisEdit + v-else + :supervisor="sqlEditMapSupervisor" + @backLastPage="backLastPage" + @updatePublished="updatePublishedById" + ></SqlAmisEdit> </template> <script setup lang="ts"> -import { defineComponent, ref, shallowRef } from 'vue'; -import { Codemirror } from 'vue-codemirror'; -import { json } from '@codemirror/lang-json'; -import { vscodeDark, vscodeLight, vscodeLightInit } from '@uiw/codemirror-theme-vscode'; -import * as codeExample from './testData'; -import { sql } from '@codemirror/lang-sql'; -import { xml } from '@codemirror/lang-xml'; -const log = console.log; -const jsonCode = ref(codeExample.jsonCode); -const dockCode = ref(codeExample.dockCode); -const sqlCode = ref(codeExample.sqlCode); +import { useDraggable } from '@vueuse/core'; +import axios, { CancelTokenSource } from 'axios'; +import type { FormInstance, FormRules } from 'element-plus'; +import { ElMessage, ElMessageBox } from 'element-plus'; +import { computed, nextTick, onMounted, ref, watch } from 'vue'; +import SqlAmisEdit from './edit/SqlAmisEdit.vue'; +import OptDlg from './optDlg/OptDlg.vue'; +import { SupervisorPublished, supervisorPublishedMap } from './types'; +import * as agentGroupApi from '/@/api/ai/agentGroup'; +import * as supervisorAdminApi from '/@/api/supervisorAdmin'; +import { checkSupervisorValidate, updatePublishStatus } from '/@/api/supervisorAdmin'; +import * as supervisorGroupApi from '/@/api/supervisorAdmin/supervisorGroup'; +import Chat from '/@/components/chat/Chat.vue'; +import AHMContainer from '/@/components/layout/AHMContainer.vue'; +import ColFilter from '/@/components/table/colFilter/ColFilter.vue'; +import { TableCol } from '/@/components/table/colFilter/types'; +import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; +import { usePageDisplay } from '/@/hooks/usePageDisplay'; +import { useQueryTable } from '/@/hooks/useQueryTable'; +import { useSearch } from '/@/hooks/useSearch'; +import { useUpdateData } from '/@/hooks/useUpdateData'; +import emitter from '/@/utils/mitt'; +import { deepClone } from '/@/utils/other'; +import { gotoRoute } from '/@/utils/route'; +import { useCompRef } from '/@/utils/types'; +import { convertListToTree, debounce, travelTree } from '/@/utils/util'; +import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics'; +const columnList = ref<TableCol[]>([ + { prop: 'title', label: '鏍囬', width: 300, fixed: 'left' }, + { prop: 'published', label: '鍙戝竷鐘舵��', width: 85 }, + { prop: 'prompt', label: '鎻愮ず璇�', width: 300 }, + { prop: 'question', label: '闂', width: 300 }, + { prop: 'creator', label: '鍒涘缓浜�', width: 100 }, + { prop: 'create_time', label: '鍒涘缓鏃堕棿', width: 105 }, + { prop: 'update_time', label: '鏇存柊鏃堕棿', width: 105 }, + { prop: 'note', label: '澶囨敞' }, + { prop: 'operate', label: '鎿嶄綔', width: 200, fixed: 'right' }, +]); +//#region ====================== 宸︿晶鏍戞暟鎹紝tree init ====================== +const leftTreeRef = useCompRef(LeftTreeByMgr); +const treeLoading = ref(false); +const listData = ref([]); +const currentListID = computed(() => currentNode.value?.group_id); +const currentNode = ref(null); +const listTreeData = computed(() => { + const byParentData = convertListToTree(listData.value, { + ID: 'group_id', + ParentID: 'p_group_id', + Children: 'children', + }); + const result = []; + byParentData.forEach((item) => { + if ( + item.group_type != OptClassificationMap[classificationEnum.Office] && + item.group_type != OptClassificationMap[classificationEnum.Knowledge] + ) { + result.push(item); + } + }); + return result; +}); -const jsonEditorExtensions = [json(), vscodeDark]; -const sqlEditorExtensions = [sql(), vscodeDark]; -const dockEditorExtensions = [xml(), vscodeDark]; +const updateRelatedType = (extendType) => { + emitter.emit('basic.sys.type.update', { + ExtendType: extendType, + }); +}; +const handleClickNode = (data) => { + nextTick(() => { + leftTreeRef.value?.treeRef.setCurrentKey(data.id); + }); + currentNode.value = data; + getTableData(); +}; +const getListTreeData = async () => { + const res = await agentGroupApi.getSceneGroupTreeByPost(); + listData.value = res.groups || []; + const firstListTreeNode = listTreeData.value[0]; + if (firstListTreeNode) { + handleClickNode(firstListTreeNode); + } else { + tableData.value = []; + currentNode.value = null; + } +}; +//#endregion + +//#region ====================== 鍒犻櫎宸︿晶鏍戠郴缁熸ā鍧楁暟鎹� ====================== + +const deleteCurrentModule = (row: any) => { + ElMessageBox.confirm(`纭畾鍒犻櫎椤甸潰鍒嗙粍锛氥��${row.title}銆�?`, '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning', + }).then(async () => { + const res = await supervisorGroupApi.deleteSupervisorGroup({ + group_id: row.id, + }); + ElMessage.success('鍒犻櫎鎴愬姛锛�'); + const foundIndex = listData.value.findIndex((item) => row.id === item.id); + listData.value.splice(foundIndex, 1); + if (listData.value.length > 0) { + handleClickNode(listData.value[foundIndex]); + } + }); +}; +//#endregion + +//#region ====================== 澧炲姞銆佸垹闄ょ郴缁熸ā鍧楁搷浣�, dialog init====================== +const isEditModuleDialog = ref(false); +const moduleDialogTitle = computed(() => { + return isEditModuleDialog.value ? '淇敼椤甸潰鍒嗙粍' : '娣诲姞椤甸潰鍒嗙粍'; +}); +const moduleDialogHeaderIcon = computed(() => { + return isEditModuleDialog.value ? 'ele-Edit' : 'ele-Plus'; +}); +const moduleDialogFormValue = ref({ + Name: '', + Code: '', + Description: '', +}) as any; +const moduleDialogIsShow = ref(false); +const moduleDialogFormRef = ref<FormInstance>(null); + +const moduleDialogFormRules = ref<FormRules>({ + title: [{ required: true, message: '璇疯緭鍏ユ爣棰�', trigger: 'blur' }], +}); +const openOperateModuleDialog = (data?) => { + if (data) { + isEditModuleDialog.value = true; + const { id, title } = data; + moduleDialogFormValue.value = deepClone({ group_id: id, title }); + } else { + isEditModuleDialog.value = false; + moduleDialogFormValue.value = { title: '', parent_id: '' }; + } + moduleDialogIsShow.value = true; +}; + +const closeModuleDialog = () => { + moduleDialogIsShow.value = false; + moduleDialogFormRef.value.clearValidate(); +}; +const parentSelectOptions = computed(() => { + const cloneTreeData = deepClone(listTreeData.value); + travelTree(cloneTreeData, (value, index, array, parent) => { + if ((value as any).id === moduleDialogFormValue.value.id) { + if (parent === array) { + parent?.splice(index, 1); + } else { + parent?.Children?.splice(index, 1); + } + } + }); + return cloneTreeData; +}); + +const submitModuleFormValue = async () => { + const valid = await moduleDialogFormRef.value.validate().catch(() => {}); + if (!valid) return; + + if (isEditModuleDialog.value) { + const res = await supervisorGroupApi.updateSupervisorGroup(moduleDialogFormValue.value); + const foundIndex = listData.value.findIndex((item) => item.id === moduleDialogFormValue.value.id); + if (foundIndex > -1) { + listData.value[foundIndex] = { + ...listData.value[foundIndex], + title: moduleDialogFormValue.value.title, + }; + } + getListTreeData(); + moduleDialogIsShow.value = false; + ElMessage.success('淇敼椤甸潰鍒嗙粍鎴愬姛'); + } else { + const res = await supervisorGroupApi.addSupervisorGroup(moduleDialogFormValue.value); + const newNode = { + ...moduleDialogFormValue.value, + id: res.group_id, + parent: moduleDialogFormValue.value.parent_id, + }; + Reflect.deleteProperty(newNode, 'parent_id'); + listData.value.push(newNode); + handleClickNode(newNode); + moduleDialogIsShow.value = false; + ElMessage.success('娣诲姞椤甸潰鍒嗙粍鎴愬姛'); + } +}; +//#endregion + +//#region ====================== 琛ㄦ牸鏁版嵁锛宼able init ====================== +const tableLoading = ref(false); +const tableData = ref([]); +const isDragStatus = ref(false); +const allTableData = ref(null); +const getTableData = async () => { + if (!allTableData.value) { + const res = await supervisorAdminApi.getSupervisorList(); + allTableData.value = (res.values || []).map((item) => { + item.create_time = item.create_time?.slice(0, 10); + item.update_time = item.update_time?.slice(0, 10); + + return item; + }); + } + let selNode = currentNode.value; + let curGroupID = []; + if (selNode.children && selNode.children.length > 0) { + selNode.children.forEach((item) => { + curGroupID.push(item.group_id); + }); + } else { + curGroupID.push(selNode.group_id); + } + let page_data = []; + curGroupID.forEach((curItem) => { + allTableData.value.forEach((sample) => { + if (curItem == sample.group_id) page_data.push(sample); + }); + }); + tableData.value = page_data; +}; +//#endregion + +//#region ====================== 琛ㄦ牸鏌ヨ銆佹帓搴忥紝search form init ====================== + +const queryParams = ref({ + title: '', +}); +const { query: queryTerminology, queryData: showPageList } = useSearch(tableData, queryParams); +const pageQuery = debounce(queryTerminology); +watch( + () => queryParams.value.title, + (val) => { + pageQuery(); + } +); +const { resetQuery, handleQueryTable } = useQueryTable(tableData, queryParams, () => { + showPageList.value = tableData.value; +}); +//#endregion + +//#region ====================== 鏌ヨ蹇嵎閿� ====================== +const queryFormRef = ref(null); +const pressEnterSearch = (ev: KeyboardEvent) => { + if (ev.key === 'Enter') { + handleQueryTable(); + } +}; +usePageDisplay( + () => { + queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch); + }, + () => { + queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch); + } +); +//#endregion + +//#region ====================== sql ====================== + +const supervisorMgrShow = ref(true); +const sqlEditMapSupervisor = ref(null); +const editSqlClick = (item) => { + sqlEditMapSupervisor.value = item; + supervisorMgrShow.value = false; +}; + +const backLastPage = () => { + supervisorMgrShow.value = true; + nextTick(() => { + leftTreeRef.value?.treeRef.setCurrentKey(currentListID.value); + }); +}; +//#endregion + +//#region ====================== 娣诲姞淇敼鎿嶄綔 ====================== +const optDlgIsShow = ref(false); +const optDlgMapRow = ref(null); +const openOptDlg = (row?: any) => { + optDlgMapRow.value = row; + optDlgIsShow.value = true; +}; + +const updateOpt = (formValue) => { + const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id); + if (foundIndex > -1) { + tableData.value[foundIndex] = { + ...tableData.value[foundIndex], + ...formValue, + }; + } +}; + +const insertOpt = (newData) => { + tableData.value.unshift({ ...newData, published: SupervisorPublished.N }); +}; +//#endregion + +const updatePublishedById = (id: string, published: SupervisorPublished) => { + const row = tableData.value.find((item) => item.id === id); + if (row) { + row.published = published; + } +}; +//#region ====================== 鏀瑰彉鍙戝竷鐘舵�� ====================== +const publishStatusChange = async (published: SupervisorPublished, id, index) => { + const res = await updatePublishStatus( + { + id: id, + publish: published, + }, + { + loading: false, + } + ); + const origin = published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y; + const final = res.publish ?? origin; + if (final === origin) { + ElMessage.warning('鎿嶄綔澶辫触' + (res.fail_msg ? `锛�${res.fail_msg}` : '')); + return; + } + + tableData.value[index].published = final; + + published === SupervisorPublished.Y ? ElMessage.success('鍙戝竷鎴愬姛') : ElMessage.info('宸插彇娑堝彂甯�'); +}; +//#endregion + +//#region ====================== 璺宠浆浣庝唬鐮佺紪杈戦〉闈� ====================== +const gotoAmisPage = (row) => { + window.currentPage = row; + gotoRoute({ + name: 'AmisEditor', + }); +}; +//#endregion + +//#region ====================== Chat 娴嬭瘯 ====================== + +const chatRef = useCompRef(Chat); +const chatTestMapRow = ref(null); +const chatTestIsShow = ref(false); +const openChatTest = (row) => { + chatTestMapRow.value = row; + chatTestIsShow.value = true; + + nextTick(() => { + chatRef.value.clear(); + setTimeout(() => { + chatRef.value.autoSend(row.question); + }, 30); + }); +}; + +const closeChatTest = () => { + chatTestMapRow.value = null; + chatTestIsShow.value = false; +}; + +const draggableChatRef = ref<HTMLElement | null>(null); +const chatDragHandlerRef = ref<HTMLDivElement>(null); + +// `style` will be a helper computed for `left: ?px; top: ?px;` +const { x, y, style } = useDraggable(draggableChatRef, { + handle: chatDragHandlerRef, + initialValue: { + x: document.body.clientWidth / 2 - 350, + y: document.body.clientHeight / 2 - 400, + }, +}); + +const questionAi = async (text, sourceObj: { source: CancelTokenSource }) => { + const currentSource = axios.CancelToken.source(); + sourceObj.source = currentSource; + const res = await checkSupervisorValidate( + { + id: chatTestMapRow.value.id, + question: text, + }, + { + loading: false, + cancelToken: currentSource.token, + } + ); + return res; +}; +//#endregion + +//#region ====================== 鏇存柊鍙戝竷鐘舵�� ====================== +useUpdateData({ + event: 'supervisor.publish', + updateFun({ id, published }) { + updatePublishedById(id, published); + }, +}); +//#endregion +onMounted(() => { + getListTreeData(); +}); </script> +<style scoped lang="scss"></style> +, watch -- Gitblit v1.9.3