\\s*

wujingjing

2024-09-20 924f3850b1295e5f699bea843fcee83ae860feb6

 src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue

@@ -81,24 +81,74 @@
                              <el-option v-for="item in databaseList" :key="item.id" :value="item.id" :label="item.title"></el-option>
                           </el-select>
                        </div>
                        <codemirror
                           class="overflow-auto"
                           style="height: calc(100% - 36px)"
                           v-model="currentDockConfig.sql"
                           :autofocus="true"
                           :indent-with-tab="true"
                           :tab-size="2"
                           :extensions="sqlEditorExtensions"
                           @change="sqlCodeChange"
                           @focus="log('focus', $event)"
                           @blur="log('blur', $event)"
                        />
                        <el-tabs v-model="sqlActiveTab" class="overflow-auto" style="height: calc(100% - 36px)">
                           <el-tab-pane :label="sqlTabMap[SqlTabType.LinkSql]" :name="SqlTabType.LinkSql" class="h-full">
                              <codemirror
                                 class="overflow-auto"
                                 style="height: 100%"
                                 v-model="currentDockConfig.sql"
                                 :autofocus="true"
                                 :indent-with-tab="true"
                                 :tab-size="2"
                                 :extensions="sqlEditorExtensions"
                                 @change="sqlCodeChange"
                                 @focus="log('focus', $event)"
                                 @blur="log('blur', $event)"
                              />
                           </el-tab-pane>
                           <el-tab-pane :label="sqlTabMap[SqlTabType.Others]" :name="SqlTabType.Others">
                              <div class="flex-column">
                                 <div class="flex-0 flex mb-3.5">
                                    <el-button class="ml-auto" type="danger" @click="deleteUnLinkSql">删除所有未使用</el-button>
                                 </div>
                                 <el-table
                                    ref="draggableTableRef"
                                    class="flex-auto"
                                    border
                                    row-class-name="cursor-pointer"
                                    :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>
													
                                    </el-table-column>

                                    <el-table-column label="操作" width="120" fixed="right" show-overflow-tooltip>
                                       <template #default="scope">
                                          <div class="space-x-3 items-center flex">
                                             <el-tooltip effect="dark" content="查看SQL" placement="top">
                                                <i
                                                   class="ywifont ywicon-didaima !text-[21px] text-blue-400 cursor-pointer"
                                                   @click="openShowSqlDlg(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="deleteCurrentSql(scope.row)"
                                                ></i>
                                             </el-tooltip>
                                          </div>
                                       </template>
                                    </el-table-column>
                                 </el-table>
                              </div>
                           </el-tab-pane>
                        </el-tabs>
                     </template>
                  </div>
               </Pane>
            </Splitpanes>
         </Pane>
      </Splitpanes>

      <SqlCodeViewDlg v-model="optDlgIsShow" :item="optDlgMapRow"></SqlCodeViewDlg>
   </div>
</template>

@@ -108,7 +158,7 @@
import { xml } from '@codemirror/lang-xml';
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
import type { TableInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import _, { debounce } from 'lodash';
import { Pane, Splitpanes } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
@@ -122,6 +172,8 @@
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';

const props = defineProps(['supervisor']);
const emit = defineEmits(['backLastPage', 'updatePublished']);
@@ -145,6 +197,7 @@
   if (currentDockConfig.value) {
      currentDockConfig.value.database = val;
   }
   sqlActiveTab.value = SqlTabType.LinkSql;
   updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
};
const backLastPage = () => {
@@ -154,37 +207,49 @@
   emit('backLastPage');
};
const currentRs = ref<AmisDockConfig>(null);

const otherSqlList = computed(() => {
   const sqlConfig = dockConfigList.value.filter((item) => {
      return item.type === AmisDockType.Sql;
   });
   if (!currentDockConfig.value) {
      return sqlConfig;
   }
   // 排除当前
   return sqlConfig.filter((item) => {
      return currentDockConfig.value.id !== item.id;
   });
});
const getWithTemplateDataCommentSql = (sql: string, data: any) => {
   const reg = new RegExp(`^\\s*(\\s*--\\s*".*"\\s*:.*\\n)+\\s*`);
   const isMatchReg = reg.test(sql);
   if (!Array.isArray(data)) {
      return sql;
      return isMatchReg ? sql.replace(reg, '') : sql;
   }
   const first = data[0];
   if (!_.isObjectLike(first)) {
      return sql;
      return isMatchReg ? sql.replace(reg, '') : sql;
   }
   const firstKeyList = Object.keys(first);
   // 值为对象
   if (_.isObjectLike(first[firstKeyList[0]])) {
      return sql;
      return isMatchReg ? sql.replace(reg, '') : sql;
   }

	

   let comment = '';
   firstKeyList.map((key, index, array) => {
      const value = JSON.stringify(first[key]);
      comment += `-- "${key}": ${value}\n`;
      // 最后一个再换行
      comment += index === array.length - 1 ? '\n' : '';
   });

   const reg = new RegExp(`^\\s*(\\s*--\\s*".*"\\s*:.*\\n)+`)
   // 已经存在，一定要替换成最新的
   if (reg.test(sql)) {
      const replaceStr =  sql.replace(reg,comment);
   if (isMatchReg) {
      const replaceStr = sql.replace(reg, comment);
      return replaceStr;
   }

   const result = comment+sql;
   const result = comment + sql;
   return result;
};
const dockRowChange = (row) => {
@@ -197,7 +262,7 @@
   };
   const templateData = extraInfoMap.value.get(row.recordId).templateData;

   currentDockConfig.value.sql =  getWithTemplateDataCommentSql(currentDockConfig.value.sql,templateData)
   currentDockConfig.value.sql = getWithTemplateDataCommentSql(currentDockConfig.value.sql, templateData);
};
const currentDockConfig = ref(null);
/** @description 路径分隔符 */
@@ -320,9 +385,6 @@
      return;
   }

   const recordIds = apiConfig?.map((item) => item.recordId) ?? [];
   // 过滤出 apiConfig 中有的record;
   dockConfigList.value = dockConfigList.value?.filter((item) => recordIds.includes(item.id)) ?? [];
   const asyncRsList = apiConfig.map((item) => ({
      amis_path: item.path,
      async_id: item.asyncId,
@@ -443,6 +505,11 @@
};

const databaseList = ref([]);

const getMapDatabase = (id:string)=>{
   const foundItem = databaseList.value.find(item=>item.id===id);
   return foundItem;
}
//#endregion
onMounted(async () => {
   xmlJson = await supervisorApi.getLowCodeJson({
@@ -479,7 +546,51 @@
      updateSqlAndRs();
   }
});
//#region ====================== sql 保存历史 ======================
const enum SqlTabType {
   LinkSql = 'link-sql',
   Others = 'sql-list',
}
const sqlTabMap = {
   [SqlTabType.LinkSql]: '关联SQL',
   [SqlTabType.Others]: '其它',
};
const sqlActiveTab = ref<SqlTabType>(SqlTabType.LinkSql);

// 删除当前
const deleteCurrentSql = (row) => {
   ElMessageBox.confirm('确定要删除当前SQL吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
   }).then(async () => {
      dockConfigList.value = dockConfigList.value.filter((item) => item.id !== row.id);
      updateSqlAndRs();
   });
};
// 删除未连接
const deleteUnLinkSql = () => {
   ElMessageBox.confirm('确定要删除所有未使用的SQL吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
   }).then(async () => {
      const apiConfig = configList.value.filter((item) => item.type === AmisDockType.Sql);
      const recordIds = apiConfig?.map((item) => item.recordId) ?? [];
      // 过滤出 apiConfig 中有的record;
      dockConfigList.value = dockConfigList.value?.filter((item) => recordIds.includes(item.id)) ?? [];
      updateSqlAndRs();
   });
};

const optDlgIsShow = ref(false);
const optDlgMapRow = ref(null);
const openShowSqlDlg = (row?: any) => {
   optDlgMapRow.value = row;
   optDlgIsShow.value = true;
};

//#endregion
// watch(() => sqlCodemirrorRef.value, (codeMirrorRef) => {
//    codeMirrorRef.
// })