wujingjing
2024-10-09 38c2db097d4d9a3e52f3a325ccecda8ad540dcbc
src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue
@@ -1,6 +1,6 @@
<template>
   <div class="h-full flex flex-col">
      <titleBox class="flex-0" style="background-color: #fff" :title="supervisor?.title">
   <div class="h-full flex flex-col bg-white">
      <titleBox class="flex-0 my-3.5" style="background-color: #fff" :title="supervisor?.title">
         <template v-slot:left>
            <el-button
               icon="ele-ArrowLeft"
@@ -10,6 +10,10 @@
               @click="backLastPage"
            >
            </el-button>
         </template>
         <template #right>
            <el-button type="primary" size="large" @click="saveClick">保存</el-button>
         </template>
      </titleBox>
@@ -32,17 +36,32 @@
               <!-- <el-table-column label="请求地址" ></el-table-column> -->
            </el-table></Pane
         >
         <Pane :size="60">
         <Pane :size="60" class="pl-2">
            <Splitpanes class="default-theme h100" :horizontal="true">
               <Pane :size="35" class="flex-col flex">
               <Pane :size="45" class="flex-col flex">
                  <!-- #region ====================== 关键词匹配 ======================-->
                  <div class="flex-0 flex justify-between items-center mb-1 ml-1 h-[36px]">
                     <span class="font-bold">关键词</span>
                  </div>
                  <TagInput class="mb-1" v-model="matchList"></TagInput>
                  <!-- #endregion -->
                  <div class="flex-0 flex justify-between items-center mb-1 ml-1 h-[36px]">
                     <span class="font-bold">参数</span>
                     <el-button type="primary" @click="addArg">添加</el-button>
                     <el-button size="small" type="default" @click="addArg">添加参数</el-button>
                  </div>
                  <el-table class="flex-auto" :data="args" border>
                     <el-table-column prop="name" width="150" label="名称" show-overflow-tooltip>
                     <el-table-column prop="name" width="150" label="参数名" fixed show-overflow-tooltip>
                        <template #default="scope">
                           <el-input v-model="scope.row.name" @input="argsInput"></el-input>
                        </template>
                     </el-table-column>
                     <el-table-column prop="type" width="120" label="类型" show-overflow-tooltip>
                        <template #default="scope">
                           <el-select v-model="scope.row.type">
                              <el-option v-for="item in Object.keys(argTypeMap)" :key="item" :value="item" :label="argTypeMap[item]"></el-option>
                           </el-select>
                        </template>
                     </el-table-column>
                     <el-table-column prop="prompt" width="450" label="提示词" show-overflow-tooltip>
@@ -50,6 +69,12 @@
                           <el-input type="textarea" :rows="2" v-model="scope.row.prompt" @input="argsInput"></el-input>
                        </template>
                     </el-table-column>
                     <el-table-column prop="required" width="56" label="必填" show-overflow-tooltip>
                        <template #default="scope">
                           <el-checkbox v-model="scope.row.required"></el-checkbox>
                        </template>
                     </el-table-column>
                     <el-table-column prop="check" label="缺省值" show-overflow-tooltip>
                        <template #default="scope">
                           <el-input v-model="scope.row.check" @input="argsInput"></el-input>
@@ -64,7 +89,8 @@
                     </el-table-column>
                  </el-table>
               </Pane>
               <Pane :size="65">
               <Pane :size="55">
                  <div class="h-full">
                     <template v-if="currentDockConfig">
                        <div class="flex justify-between items-center my-1 ml-1 h-[36px]">
@@ -109,14 +135,11 @@
                                    :data="otherSqlList"
                                    highlight-current-row
                                 >
                                    <el-table-column prop="id" label="id" width="220" fixed="left" show-overflow-tooltip> </el-table-column>
                                    <el-table-column label="数据库" prop="database" show-overflow-tooltip>
                                          <template #default="scope">
                                             {{ getMapDatabase(scope.row.database)?.title }}
                                          </template>
                                       <template #default="scope">
                                          {{ getMapDatabase(scope.row.database)?.title }}
                                       </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="120" fixed="right" show-overflow-tooltip>
@@ -167,14 +190,14 @@
import { Codemirror } from 'vue-codemirror';
import { SupervisorPublished } from '../types';
import * as codeExample from './testData';
import { amisDockTypeMap } from './types';
import { amisDockTypeMap, argTypeMap } from './types';
import * as supervisorApi from '/@/api/supervisorAdmin';
import { updateSqlApi } from '/@/api/supervisorAdmin';
import titleBox from '/@/components/titleBox.vue';
import { useCompRef } from '/@/utils/types';
import { computed } from 'vue';
import SqlCodeViewDlg from './optDlg/SqlCodeViewDlg.vue';
import TagInput from '/@/components/form/tagInput/TagInput.vue';
const props = defineProps(['supervisor']);
const emit = defineEmits(['backLastPage', 'updatePublished']);
const log = console.log;
@@ -198,7 +221,8 @@
      currentDockConfig.value.database = val;
   }
   sqlActiveTab.value = SqlTabType.LinkSql;
   updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
   updateSql(currentDockConfig.value.id, currentDockConfig.value);
   // updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
};
const backLastPage = () => {
   // setTimeout(() => {
@@ -220,7 +244,7 @@
   });
});
const getWithTemplateDataCommentSql = (sql: string, data: any) => {
   const reg = new RegExp(`^\\s*(\\s*--\\s*".*"\\s*:.*\\n)+`);
   const reg = new RegExp(`^\\s*(\\s*--\\s*".*"\\s*:.*\\n)+\\s*`);
   const isMatchReg = reg.test(sql);
   if (!Array.isArray(data)) {
      return isMatchReg ? sql.replace(reg, '') : sql;
@@ -354,7 +378,7 @@
         extraInfoMap.value.set(recordId, {
            url: value.url,
            templateData: getAmisData(item.data),
            templateData: getAmisData(item.template ?? item.data),
         });
         // const recordId = uniqueId()
         jsonConfigList.push({
@@ -378,7 +402,7 @@
   return !foundWithNoDatabase;
};
const updateSqlAndRs = (id?, sqlValue?: { database?: string; sql?: string; type?: AmisDockType }) => {
const updateSqlAndRs = () => {
   const apiConfig = configList.value.filter((item) => item.type === AmisDockType.Sql);
   if (!checkValid(true)) {
@@ -391,6 +415,24 @@
      rec_id: item.recordId,
   }));
   updateSqlApi(
      {
         id: props.supervisor.id,
         def_rs_json: dockConfigList.value.length === 0 ? JSON.stringify([]) : JSON.stringify(dockConfigList.value),
         async_rs_json: asyncRsList.length === 0 ? JSON.stringify([]) : JSON.stringify(asyncRsList),
         args: args.value.length === 0 ? JSON.stringify([]) : JSON.stringify(args.value),
         matches: !matchList.value || matchList.value.length === 0 ? JSON.stringify([]) : JSON.stringify(matchList.value),
      },
      {
         loading: false,
      }
   ).then(() => {
      ElMessage.success('保存成功');
      emit('updatePublished', props.supervisor.id, SupervisorPublished.N);
   });
};
const updateSql = (id?, sqlValue?: { database?: string; sql?: string; type?: AmisDockType }) => {
   if (id && sqlValue) {
      const foundIndex = dockConfigList.value?.findIndex((item) => item.id === id);
      if (foundIndex > -1) {
@@ -416,20 +458,6 @@
         }
      }
   }
   updateSqlApi(
      {
         id: props.supervisor.id,
         def_rs_json: dockConfigList.value.length === 0 ? null : JSON.stringify(dockConfigList.value),
         async_rs_json: asyncRsList.length === 0 ? null : JSON.stringify(asyncRsList),
         args: args.value.length === 0 ? null : JSON.stringify(args.value),
      },
      {
         loading: false,
      }
   ).then(() => {
      emit('updatePublished', props.supervisor.id, SupervisorPublished.N);
   });
};
const sqlCodeChange = debounce((val) => {
@@ -440,7 +468,11 @@
         return;
      }
   }
   updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
   const id = currentDockConfig.value.id;
   const sqlValue = currentDockConfig.value;
   updateSql(id, sqlValue);
   // updateSqlAndRs();
}, 1000);
const dockConfigList = ref([]);
const rsTableRef = ref<TableInstance>(null);
@@ -476,10 +508,12 @@
   });
};
// 匹配词
const matchList = ref([]);
//#region ====================== 可编辑表格 ======================
const args = ref([]);
const debounceUpdateInput = debounce(() => {
   updateSqlAndRs();
   // updateSqlAndRs();
}, 400);
const argsInput = (val) => {
   debounceUpdateInput();
@@ -496,20 +530,20 @@
      args.value.push(initData);
   }
   updateSqlAndRs();
   // updateSqlAndRs();
};
const deleteArg = (index) => {
   args.value.splice(index, 1);
   updateSqlAndRs();
   // updateSqlAndRs();
};
const databaseList = ref([]);
const getMapDatabase = (id:string)=>{
   const foundItem = databaseList.value.find(item=>item.id===id);
const getMapDatabase = (id: string) => {
   const foundItem = databaseList.value.find((item) => item.id === id);
   return foundItem;
}
};
//#endregion
onMounted(async () => {
   xmlJson = await supervisorApi.getLowCodeJson({
@@ -528,7 +562,7 @@
      ) ?? [];
   dockConfigList.value = xmlJson.def_rs_json ?? null;
   args.value = xmlJson.args ?? [];
   matchList.value = xmlJson.matches ??[];
   configList.value = parseJSONData(xmlJson.amis_json, originConfig);
   const res = await supervisorApi.getAmisDatabaseList();
   databaseList.value = res.values ?? [];
@@ -536,14 +570,14 @@
      rsTableRef.value.setCurrentRow(configList.value[0]);
   }
   if (!configList || configList.value.length === 0) {
   if (!configList.value || configList.value.length === 0) {
      ElMessage.warning('暂无对接配置');
   }
   const isRsUpdate = checkRsUpdate(originConfig, configList.value);
   if (isRsUpdate) {
      // 自动更新Rs
      updateSqlAndRs();
      // updateSqlAndRs();
   }
});
//#region ====================== sql 保存历史 ======================
@@ -565,7 +599,7 @@
      type: 'warning',
   }).then(async () => {
      dockConfigList.value = dockConfigList.value.filter((item) => item.id !== row.id);
      updateSqlAndRs();
      // updateSqlAndRs();
   });
};
// 删除未连接
@@ -579,7 +613,7 @@
      const recordIds = apiConfig?.map((item) => item.recordId) ?? [];
      // 过滤出 apiConfig 中有的record;
      dockConfigList.value = dockConfigList.value?.filter((item) => recordIds.includes(item.id)) ?? [];
      updateSqlAndRs();
      // updateSqlAndRs();
   });
};
@@ -590,6 +624,10 @@
   optDlgIsShow.value = true;
};
const saveClick = () => {
   updateSqlAndRs();
};
//#endregion
// watch(() => sqlCodemirrorRef.value, (codeMirrorRef) => {
//    codeMirrorRef.