From fa5b8c94d2b62ca2828e1296e96b80b7fd2b5da6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 十月 2024 13:37:29 +0800
Subject: [PATCH] 为空传空数组
---
src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue | 252 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 201 insertions(+), 51 deletions(-)
diff --git a/src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue b/src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue
index 2a79d2a..9644719 100644
--- a/src/views/project/yw/lowCode/sqlAmis/edit/SqlAmisEdit.vue
+++ b/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]">
@@ -81,24 +107,71 @@
<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 +181,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';
@@ -117,12 +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;
@@ -145,7 +220,9 @@
if (currentDockConfig.value) {
currentDockConfig.value.database = val;
}
- updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
+ sqlActiveTab.value = SqlTabType.LinkSql;
+ updateSql(currentDockConfig.value.id, currentDockConfig.value);
+ // updateSqlAndRs(currentDockConfig.value.id, currentDockConfig.value);
};
const backLastPage = () => {
// setTimeout(() => {
@@ -154,9 +231,20 @@
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)+`);
+ 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;
@@ -175,6 +263,8 @@
firstKeyList.map((key, index, array) => {
const value = JSON.stringify(first[key]);
comment += `-- "${key}": ${value}\n`;
+ // 鏈�鍚庝竴涓啀鎹㈣
+ comment += index === array.length - 1 ? '\n' : '';
});
// 宸茬粡瀛樺湪锛屼竴瀹氳鏇挎崲鎴愭渶鏂扮殑
@@ -288,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({
@@ -312,22 +402,37 @@
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)) {
return;
}
- const recordIds = apiConfig?.map((item) => item.recordId) ?? [];
- // 杩囨护鍑� apiConfig 涓湁鐨剅ecord;
- dockConfigList.value = dockConfigList.value?.filter((item) => recordIds.includes(item.id)) ?? [];
const asyncRsList = apiConfig.map((item) => ({
amis_path: item.path,
async_id: item.asyncId,
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),
+ matchs: !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) {
@@ -353,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) => {
@@ -377,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);
@@ -413,10 +508,12 @@
});
};
+// 鍖归厤璇�
+const matchList = ref([]);
//#region ====================== 鍙紪杈戣〃鏍� ======================
const args = ref([]);
const debounceUpdateInput = debounce(() => {
- updateSqlAndRs();
+ // updateSqlAndRs();
}, 400);
const argsInput = (val) => {
debounceUpdateInput();
@@ -433,15 +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);
+ return foundItem;
+};
//#endregion
onMounted(async () => {
xmlJson = await supervisorApi.getLowCodeJson({
@@ -460,7 +562,7 @@
) ?? [];
dockConfigList.value = xmlJson.def_rs_json ?? null;
args.value = xmlJson.args ?? [];
-
+ matchList.value = xmlJson.matchs ??[];
configList.value = parseJSONData(xmlJson.amis_json, originConfig);
const res = await supervisorApi.getAmisDatabaseList();
databaseList.value = res.values ?? [];
@@ -468,17 +570,65 @@
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 淇濆瓨鍘嗗彶 ======================
+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('纭畾瑕佸垹闄ゅ綋鍓峉QL鍚楋紵', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(async () => {
+ dockConfigList.value = dockConfigList.value.filter((item) => item.id !== row.id);
+ // updateSqlAndRs();
+ });
+};
+// 鍒犻櫎鏈繛鎺�
+const deleteUnLinkSql = () => {
+ ElMessageBox.confirm('纭畾瑕佸垹闄ゆ墍鏈夋湭浣跨敤鐨凷QL鍚楋紵', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(async () => {
+ const apiConfig = configList.value.filter((item) => item.type === AmisDockType.Sql);
+ const recordIds = apiConfig?.map((item) => item.recordId) ?? [];
+ // 杩囨护鍑� apiConfig 涓湁鐨剅ecord;
+ 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;
+};
+
+const saveClick = () => {
+ updateSqlAndRs();
+};
+
+//#endregion
// watch(() => sqlCodemirrorRef.value, (codeMirrorRef) => {
// codeMirrorRef.
// })
--
Gitblit v1.9.3