简柏林 / thingskit-front · Commits

Commit 154bd8753ff88bc6faad3f4194e0bab3368b6691

Authored by gesilong
1 parent 1cfc0eb0

commit: 创建定义数据路链接

Inline Side-by-side
Showing 8 changed files with 708 additions and 0 deletions
@@ -13,6 +13,10 @@ enum API { @@ -13,6 +13,10 @@ enum API {
13 UPLOAD = '/oss/upload', 13 UPLOAD = '/oss/upload',
14 //大屏公共接口 14 //大屏公共接口
15 DATA_VIEW_INTERFACE = '/data_view_interface', 15 DATA_VIEW_INTERFACE = '/data_view_interface',
  16 + DATA_VIEW_SQL = '/dbConnect',
  17 + DATA_SAVE_SQL = '/dbConnect/save',
  18 + DATA_DELETE_SQL = '/dbConnect/delete',
  19 + DATA_GET_SQL = '/dbConnect/get',
16 20
17 SHARE = '/data_view/share', 21 SHARE = '/data_view/share',
18 } 22 }
@@ -68,6 +72,27 @@ export const bigScreenCancelPublish = (id) => { @@ -68,6 +72,27 @@ export const bigScreenCancelPublish = (id) => {
68 * 大屏公共接口 72 * 大屏公共接口
69 */ 73 */
70 74
  75 +export const getDataViewSqlPage = (params: queryPageParams) => {
  76 + return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_SQL);
  77 +};
  78 +export const saveDataViewSql = (params: BigScreenInterfaceParams) => {
  79 + return defHttp.post({
  80 + url: API.DATA_SAVE_SQL,
  81 + data: params,
  82 + });
  83 +};
  84 +export const deleteBigViewSql = (id: string) => {
  85 + return defHttp.get({
  86 + url: API.DATA_DELETE_SQL + '?id=' + id,
  87 + });
  88 +};
  89 +
  90 +export const getBigViewSql = (id: string) => {
  91 + return defHttp.get({
  92 + url: API.DATA_GET_SQL + '?id=' + id,
  93 + });
  94 +};
  95 +
71 export const getDataViewInterfacePage = (params: queryPageParams) => { 96 export const getDataViewInterfacePage = (params: queryPageParams) => {
72 return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE); 97 return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
73 }; 98 };
@@ -3,6 +3,7 @@ export default { @@ -3,6 +3,7 @@ export default {
3 buttonAddName: '新增大屏', 3 buttonAddName: '新增大屏',
4 buttonEditName: '编辑大屏', 4 buttonEditName: '编辑大屏',
5 buttonManagement: '公共接口管理', 5 buttonManagement: '公共接口管理',
  6 + sqlManagement: '定义数据链接',
6 textPreview: '预览', 7 textPreview: '预览',
7 textCopyLink: '点击复制分享链接', 8 textCopyLink: '点击复制分享链接',
8 textPublishStatus: '发布状态', 9 textPublishStatus: '发布状态',
@@ -17,6 +18,25 @@ export default { @@ -17,6 +18,25 @@ export default {
17 isShareText: '公开性', 18 isShareText: '公开性',
18 shareAccess: '访问凭证', 19 shareAccess: '访问凭证',
19 20
  21 + // sql管理
  22 + sqlTitle: '定义数据链接页',
  23 + sqlName: '数据库名称',
  24 + sqlType: '数据库类型',
  25 + postName: '自定义数据库名称',
  26 + ipText: '主机IP',
  27 + portText: '端口号',
  28 + sqlAdd: '新增数据库连接',
  29 + username: '用户名',
  30 + password: '密码',
  31 + publicKey: '公钥',
  32 + privateKey: '私钥',
  33 + sshSetting: '使用SSH通道',
  34 + verifyMethod: '验证方法',
  35 + maxPoolSize: '最大链接数',
  36 + connectTimeout: '最大链接时间(毫秒)',
  37 + connectTestQuery: '校验语句',
  38 + minIdle: '最小空闲连接数',
  39 +
20 // 公共接口管理页 40 // 公共接口管理页
21 publicTitle: '公共接口管理页', 41 publicTitle: '公共接口管理页',
22 publicView: '查看', 42 publicView: '查看',
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 import { AuthIcon } from '/@/components/Widget'; 22 import { AuthIcon } from '/@/components/Widget';
23 import AuthDropDown from '/@/components/Widget/AuthDropDown.vue'; 23 import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
24 import { PublicApiDrawer } from './publicApi/index'; 24 import { PublicApiDrawer } from './publicApi/index';
  25 + import { SqlApiDrawer } from './sqlApi/index';
25 import { useModal } from '/@/components/Modal'; 26 import { useModal } from '/@/components/Modal';
26 import { ShareModal } from '/@/views/common/ShareModal'; 27 import { ShareModal } from '/@/views/common/ShareModal';
27 import { ViewTypeEnum } from '../common/ShareModal/config'; 28 import { ViewTypeEnum } from '../common/ShareModal/config';
@@ -63,6 +64,7 @@ @@ -63,6 +64,7 @@
63 const [registerDrawer, { openDrawer }] = useDrawer(); 64 const [registerDrawer, { openDrawer }] = useDrawer();
64 65
65 const [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer(); 66 const [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
  67 + const [registerSqlDrawer, { openDrawer: openSqlApiDrawer }] = useDrawer();
66 68
67 const { createMessage } = useMessage(); 69 const { createMessage } = useMessage();
68 70
@@ -82,6 +84,7 @@ @@ -82,6 +84,7 @@
82 }; 84 };
83 85
84 const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true); 86 const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
  87 + const handleCreateOrUpdateSqlApi = () => openSqlApiDrawer(true);
85 88
86 const { largeDesignerPrefix } = useGlobSetting(); 89 const { largeDesignerPrefix } = useGlobSetting();
87 90
@@ -168,6 +171,14 @@ @@ -168,6 +171,14 @@
168 t('visual.dataview.buttonManagement') 171 t('visual.dataview.buttonManagement')
169 }}</Button> 172 }}</Button>
170 </Authority> 173 </Authority>
  174 + <Authority
  175 + v-if="hasPublicInterfacePermission"
  176 + :value="ConfigurationPermission.PUBLISH_INTERFACE"
  177 + >
  178 + <Button type="primary" @click="handleCreateOrUpdateSqlApi()">{{
  179 + t('visual.dataview.sqlManagement')
  180 + }}</Button>
  181 + </Authority>
171 </section> 182 </section>
172 </template> 183 </template>
173 <template #renderItem="{ item }: BasicCardListRenderItem<BigScreenCenterItemsModel>"> 184 <template #renderItem="{ item }: BasicCardListRenderItem<BigScreenCenterItemsModel>">
@@ -290,6 +301,7 @@ @@ -290,6 +301,7 @@
290 <ShareModal @register="registerShareModal" :shareApi="shareLargeScreen" @success="reload()" /> 301 <ShareModal @register="registerShareModal" :shareApi="shareLargeScreen" @success="reload()" />
291 <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" /> 302 <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
292 <PublicApiDrawer @register="registerPublicDrawer" /> 303 <PublicApiDrawer @register="registerPublicDrawer" />
  304 + <SqlApiDrawer @register="registerSqlDrawer" />
293 </PageWrapper> 305 </PageWrapper>
294 </template> 306 </template>
295 307
  1 +import {FormSchema} from "/@/components/Form";
  2 +import {useI18n} from "/@/hooks/web/useI18n";
  3 +import {BasicColumn} from "/@/components/Table";
  4 +const { t } = useI18n();
  5 +import {uploadThumbnail} from "/@/api/configuration/center/configurationCenter";
  6 +import { FileItem } from '/@/components/Upload/src/typing';
  7 +import {createImgPreview} from "/@/components/Preview";
  8 +// 类型定义
  9 +// type JDBCPatterns = Record<string, RegExp>;
  10 +
  11 +// URL生成器（可复用）
  12 +// const generateJdbcUrl = (
  13 +// type: string,
  14 +// ip: string,
  15 +// port: string,
  16 +// dbName: string
  17 +// ): string => {
  18 +// const connectors: Record<string, string> = {
  19 +// MySql: `jdbc:mysql://${ip}:${port}/${dbName}`,
  20 +// SQLServer: `jdbc:sqlserver://${ip}:${port};databaseName=${dbName}`,
  21 +// Postgresql: `jdbc:postgresql://${ip}:${port}/${dbName}`,
  22 +// Oracle: `jdbc:oracle:thin:@${ip}:${port}:${dbName}`
  23 +// };
  24 +// return connectors[type] || '';
  25 +// };
  26 +
  27 +const typeOptions = [
  28 + {
  29 + label: 'MySql',
  30 + value: 'MySql',
  31 + },
  32 + {
  33 + label: 'Postgresql',
  34 + value: 'Postgresql',
  35 + },
  36 + {
  37 + label: 'Oracle',
  38 + value: 'Oracle',
  39 + },
  40 + {
  41 + label: 'SQLServer',
  42 + value: 'SQLServer',
  43 + },
  44 +]
  45 +
  46 +export const schemas = (): FormSchema[] => {
  47 + // const { isPlatformAdmin, isSysadmin } = useRole();
  48 + return [
  49 + {
  50 + field: 'name',
  51 + label: t('visual.dataview.postName'),
  52 + colProps: { span: 24 },
  53 + required: true,
  54 + component: 'Input',
  55 + componentProps: {
  56 + maxLength: 20,
  57 + placeholder: t('common.inputText') + t('visual.dataview.postName'),
  58 + },
  59 + },
  60 + {
  61 + field: 'type',
  62 + label: t('visual.dataview.sqlType'),
  63 + colProps: { span: 24 },
  64 + required: true,
  65 + component: 'Select',
  66 + componentProps: {
  67 + options: typeOptions,
  68 + placeholder: t('common.chooseText') + t('visual.dataview.sqlType'),
  69 + },
  70 + },
  71 + {
  72 + field: 'ip',
  73 + label: t('visual.dataview.ipText'),
  74 + colProps: { span: 24 },
  75 + required: true,
  76 + component: 'Input',
  77 + componentProps: {
  78 + placeholder: t('common.inputText') + t('visual.dataview.ipText'),
  79 + },
  80 + },
  81 + {
  82 + field: 'port',
  83 + label: t('visual.dataview.portText'),
  84 + colProps: { span: 24 },
  85 + required: true,
  86 + component: 'Input',
  87 + componentProps: {
  88 + placeholder: t('common.inputText') + t('visual.dataview.portText'),
  89 + },
  90 + },
  91 + {
  92 + field: 'dbName',
  93 + label: t('visual.dataview.sqlName'),
  94 + colProps: { span: 24 },
  95 + required: true,
  96 + component: 'Input',
  97 + componentProps: {
  98 + placeholder: t('common.inputText') + t('visual.dataview.sqlName'),
  99 + },
  100 + },
  101 + {
  102 + field: 'userName',
  103 + label: t('visual.dataview.username'),
  104 + colProps: { span: 12 },
  105 + required: true,
  106 + component: 'Input',
  107 + componentProps: {
  108 + placeholder: t('common.inputText') + t('visual.dataview.username'),
  109 + },
  110 + },
  111 + {
  112 + field: 'password',
  113 + label: t('visual.dataview.password'),
  114 + colProps: { span: 12 },
  115 + required: true,
  116 + component: 'InputPassword',
  117 + componentProps: {
  118 + placeholder: t('common.inputText') + t('visual.dataview.password'),
  119 + },
  120 + },
  121 + {
  122 + field: 'url',
  123 + label: 'URL',
  124 + colProps: {span: 24},
  125 + required: true,
  126 + component: 'Input',
  127 + componentProps: {
  128 + placeholder: t('common.inputText') + 'URL',
  129 + },
  130 + },
  131 + // {
  132 + // field: 'url',
  133 + // label: 'URL',
  134 + // colProps: { span: 24 },
  135 + // required: true,
  136 + // component: 'Input',
  137 + // componentProps: ({ formModel }) => ({
  138 + // placeholder: t('common.inputText') + 'URL',
  139 + // // 自动组合值
  140 + // defaultValue: '666',
  141 + // // 允许手动输入
  142 + // allowInput: true,
  143 + // // 双向绑定更新
  144 + // onChange: (e: ChangeEvent) => {
  145 + // const [port = '', dbName = ''] = e.target.value.split('/');
  146 + // formModel.port = port;
  147 + // formModel.dbName = dbName;
  148 + // }
  149 + // }),
  150 + // // // 表单值处理
  151 + // // dynamicValue: (values) =>
  152 + // // `${values.port || ''}/${values.dbName || ''}`.replace(/\/$/, ''),
  153 + // // 自动更新规则
  154 + // dependencies: ['port', 'dbName']
  155 + // },
  156 + // {
  157 + // field: 'url',
  158 + // label: 'URL',
  159 + // component: 'Input',
  160 + // required: true,
  161 + // colProps: { span: 24 },
  162 + // componentProps: ({ formModel }) => {
  163 + // console.log(formModel,'formModel')
  164 + // // 在函数体内计算URL
  165 + // let generatedUrl = '';
  166 + // if (formModel.type) {
  167 + // switch (formModel.type) {
  168 + // case 'MySql':
  169 + // generatedUrl = `jdbc:mysql://${formModel.ip}:${formModel.port}/${formModel.dbName}`;
  170 + // break;
  171 + // case 'SQLServer':
  172 + // generatedUrl = `jdbc:sqlserver://${formModel.ip}:${formModel.port};databaseName=${formModel.dbName}`;
  173 + // break;
  174 + // case 'Postgresql':
  175 + // generatedUrl = `jdbc:postgresql://${formModel.ip}:${formModel.port}/${formModel.dbName}`;
  176 + // break;
  177 + // case 'Oracle':
  178 + // generatedUrl = `jdbc:oracle:thin:@${formModel.ip}:${formModel.port}:${formModel.dbName}`;
  179 + // break;
  180 + // default:
  181 + // generatedUrl = '';
  182 + // }
  183 + // }
  184 + // console.log(generatedUrl,'generatedUrl')
  185 + // return {
  186 + // placeholder: t('common.inputText') + 'URL',
  187 + // value: generatedUrl,
  188 + // allowInput: true,
  189 + // // 添加输入提示
  190 + // title: '可手动修改URL，格式需符合当前数据库类型要求',
  191 + // // 更智能的逆向解析（需要根据不同类型处理）
  192 + // onChange: (e: ChangeEvent) => {
  193 + // const manualUrl = e.target.value;
  194 + // // 解析逻辑需要根据不同类型处理（此处以MySQL为例）
  195 + // if (formModel.type === 'MySql') {
  196 + // const matches = manualUrl.match(/jdbc:mysql:\/\/(.+):(\d+)\/(.+)/);
  197 + // if (matches) {
  198 + // formModel.ip = matches[1];
  199 + // formModel.port = matches[2];
  200 + // formModel.dbName = matches[3];
  201 + // }
  202 + // }
  203 + // // 其他类型需要单独处理...
  204 + // }
  205 + // };
  206 + // },
  207 + // // 声明依赖字段
  208 + // dependencies: ['type', 'ip', 'port', 'dbName'],
  209 + //
  210 + // },
  211 + {
  212 + field: 'openSsh',
  213 + label: t('visual.dataview.sshSetting'),
  214 + colProps: { span: 24 },
  215 + component: 'Checkbox',
  216 + },
  217 + {
  218 + field: 'ssh_ip',
  219 + label: t('visual.dataview.ipText'),
  220 + colProps: { span: 24 },
  221 + required: true,
  222 + component: 'Input',
  223 + componentProps: {
  224 + placeholder: t('common.inputText') + t('visual.dataview.ipText'),
  225 + },
  226 + ifShow: ({ values }) => values['openSsh'],
  227 +
  228 + },
  229 + {
  230 + field: 'ssh_port',
  231 + label: t('visual.dataview.portText'),
  232 + colProps: { span: 24 },
  233 + required: true,
  234 + component: 'Input',
  235 + componentProps: {
  236 + placeholder: t('common.inputText') + t('visual.dataview.portText'),
  237 + },
  238 + ifShow: ({ values }) => values['openSsh'],
  239 + },
  240 + {
  241 + field: 'ssh_sshName',
  242 + label: t('visual.dataview.username'),
  243 + colProps: { span: 12 },
  244 + required: true,
  245 + component: 'Input',
  246 + componentProps: {
  247 + placeholder: t('common.inputText') + t('visual.dataview.username'),
  248 + },
  249 + ifShow: ({ values }) => values['openSsh'],
  250 + },
  251 + {
  252 + field: 'ssh_verifyMethod',
  253 + label: t('visual.dataview.verifyMethod'),
  254 + colProps: { span: 12 },
  255 + required: true,
  256 + component: 'Select',
  257 + componentProps: {
  258 + options: [
  259 + {
  260 + label: t('visual.dataview.password'),
  261 + value: 'PASSWORD',
  262 + },
  263 + {
  264 + label: t('visual.dataview.publicKey'),
  265 + value: 'PUBLIC_KEY',
  266 + },
  267 + ],
  268 + placeholder: t('common.chooseText') + t('visual.dataview.verifyMethod'),
  269 + },
  270 + ifShow: ({ values }) => values['openSsh'],
  271 + },
  272 + {
  273 + field: 'ssh_privateKey',
  274 + label: t('visual.dataview.privateKey'),
  275 + component: 'ApiUpload',
  276 + changeEvent: 'update:fileList',
  277 + valueField: 'fileList',
  278 + componentProps: ({ formModel }) => {
  279 + return {
  280 + listType: 'text',
  281 + maxFileLimit: 1,
  282 + accept: '.txt,.doc,.docx,.xls,.xlsx',
  283 + api: async (file: File) => {
  284 + try {
  285 + const formData = new FormData();
  286 + formData.set('file', file);
  287 + const { fileStaticUri, fileName } = await uploadThumbnail(formData);
  288 + return {
  289 + uid: fileStaticUri,
  290 + name: fileName,
  291 + url: fileStaticUri,
  292 + };
  293 + } catch (error) {
  294 + return {};
  295 + }
  296 + },
  297 + // showUploadList: true,
  298 + onDownload() {},
  299 + onPreview: (fileList: FileItem) => {
  300 + //@ts-ignore
  301 + createImgPreview({ imageList: [fileList.url!] });
  302 + },
  303 + onDelete(url: string) {
  304 + formModel.deleteLogoUrl = url!;
  305 + },
  306 + };
  307 + },
  308 + colProps: { span: 12 },
  309 + required: true,
  310 + ifShow: ({ values }) => values['ssh_verifyMethod'] === 'PUBLIC_KEY' && values['openSsh'],
  311 + },
  312 + {
  313 + field: 'ssh_sshPassword',
  314 + label: t('visual.dataview.password'),
  315 + colProps: { span: 12 },
  316 + required: true,
  317 + component: 'InputPassword',
  318 + componentProps: {
  319 + placeholder: t('common.inputText') + t('visual.dataview.password'),
  320 + },
  321 + ifShow: ({ values }) => values['openSsh'],
  322 + },
  323 + {
  324 + field: 'maxPoolSize',
  325 + label: t('visual.dataview.maxPoolSize'),
  326 + colProps: { span: 12 },
  327 + required: true,
  328 + component: 'InputNumber',
  329 + componentProps: {
  330 + style: { width: '100%' },
  331 + placeholder: t('common.chooseText') + t('visual.dataview.maxPoolSize'),
  332 + },
  333 + },
  334 + {
  335 + field: 'connectTestQuery',
  336 + label: t('visual.dataview.connectTestQuery'),
  337 + colProps: { span: 12 },
  338 + component: 'Input',
  339 + componentProps: {
  340 + placeholder: '为空使用默认语句',
  341 + },
  342 + },
  343 + {
  344 + field: 'connectTimeout',
  345 + label: t('visual.dataview.connectTimeout'),
  346 + colProps: { span: 12 },
  347 + required: true,
  348 + component: 'InputNumber',
  349 + componentProps: {
  350 + style: { width: '100%' },
  351 + placeholder: t('common.chooseText') + t('visual.dataview.connectTimeout'),
  352 + },
  353 + },
  354 + {
  355 + field: 'minIdle',
  356 + label: t('visual.dataview.minIdle'),
  357 + colProps: { span: 12 },
  358 + required: true,
  359 + component: 'InputNumber',
  360 + componentProps: {
  361 + style: { width: '100%' },
  362 + placeholder: t('common.chooseText') + t('visual.dataview.minIdle'),
  363 + },
  364 + },
  365 +]
  366 +}
  367 +
  368 +export const searchFormSchema: FormSchema[] = [
  369 + {
  370 + field: 'name',
  371 + label: t('visual.dataview.postName'),
  372 + component: 'Input',
  373 + componentProps: {
  374 + maxLength: 36,
  375 + placeholder: t('common.inputText') + t('visual.dataview.postName'),
  376 + },
  377 + },
  378 +];
  379 +
  380 +export const columns: BasicColumn[] = [
  381 + {
  382 + title: t('visual.dataview.postName'),
  383 + dataIndex: 'name',
  384 + width: 150,
  385 + },
  386 + {
  387 + title: t('visual.dataview.sqlName'),
  388 + dataIndex: 'dbName',
  389 + width: 150,
  390 + },
  391 + {
  392 + title: t('visual.dataview.sqlType'),
  393 + dataIndex: 'type',
  394 + width: 80,
  395 + },
  396 + {
  397 + title: t('visual.dataview.ipText'),
  398 + dataIndex: 'ip',
  399 + width: 80,
  400 + },
  401 + {
  402 + title: t('visual.dataview.portText'),
  403 + dataIndex: 'port',
  404 + width: 80,
  405 + }
  406 +]
  1 +<template>
  2 + <div>
  3 + <BasicDrawer
  4 + destroyOnClose
  5 + showFooter
  6 + v-bind="$attrs"
  7 + @register="registerDrawer"
  8 + width="50%"
  9 + @ok="handleSubmit"
  10 + >
  11 + <BasicForm @register="registerForm">
  12 +
  13 + </BasicForm>
  14 + </BasicDrawer>
  15 + </div>
  16 +</template>
  17 +<script lang="ts" setup name="sqlApi">
  18 +import {
  19 + getBigViewSql,
  20 + saveDataViewSql
  21 +} from "/@/api/bigscreen/center/bigscreenCenter";
  22 +import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
  23 +import {BasicForm, useForm} from "/@/components/Form";
  24 +import {schemas} from "/@/views/dataview/sqlApi/config/config";
  25 +import {nextTick, ref} from "vue";
  26 +import {useUtils} from "/@/views/dataview/publicApi/hooks/useUtils";
  27 +import {useI18n} from "/@/hooks/web/useI18n";
  28 +import {useMessage} from "/@/hooks/web/useMessage";
  29 +import {buildUUID} from "/@/utils/uuid";
  30 +const { t } = useI18n();
  31 +const isUpdate = ref(false);
  32 +const { createMessage } = useMessage();
  33 +const emits = defineEmits(['success', 'register']);
  34 +const putId = ref('');
  35 +const sshId = ref('');
  36 +const sslId = ref('');
  37 +const {
  38 + resetReqHttpType,
  39 + resetUpdateSchema,
  40 +} = useUtils();
  41 +
  42 +const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  43 + await resetFields();
  44 + await nextTick();
  45 + setFieldsValue(resetReqHttpType);
  46 + const title = `${
  47 + !data.isUpdate ? t('visual.dataview.addtext') : t('visual.dataview.editText')
  48 + }${t('visual.dataview.publicInterface')}`;
  49 + setDrawerProps({ title });
  50 + updateSchema(resetUpdateSchema);
  51 + isUpdate.value = data.isUpdate;
  52 + !isUpdate.value ? (putId.value = '') : (putId.value = data.record?.id);
  53 + if (isUpdate.value) {
  54 + const _data = await getBigViewSql(data?.record?.id)
  55 + !isUpdate.value ? (sshId.value = '') : (sshId.value = _data?.ssh?.id);
  56 + !isUpdate.value ? (sslId.value = '') : (sslId.value = _data?.ssl?.id);
  57 + console.log(_data,'_data')
  58 + await setFieldsValue({
  59 + ..._data,
  60 + ssh_ip: _data?.ssh?.ip,
  61 + ssh_port: _data?.ssh?.port,
  62 + ssh_sshName: _data?.ssh?.sshName,
  63 + ssh_privateKey: _data?.ssh?.privateKey ? [{ uid: buildUUID(), name: '公钥文件', url: _data?.ssh?.privateKey }] : [],
  64 + ssh_sshPassword: _data?.ssh?.sshPassword,
  65 + ssh_verifyMethod: _data?.ssh?.verifyMethod
  66 + });
  67 + }
  68 + });
  69 +
  70 +const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({
  71 + labelWidth: 160,
  72 + schemas: schemas(),
  73 + showActionButtonGroup: false,
  74 +});
  75 +
  76 +const handleSubmit = async () => {
  77 + try {
  78 + setDrawerProps({ loading: true });
  79 + const values = await validate();
  80 + if (!values) return;
  81 + const processedData = {
  82 + ...values,
  83 + id: !putId.value ? null : putId.value,
  84 + ssl: !sslId.value ? null : {id: sslId.value},
  85 + ssh: {
  86 + id: !sshId.value ? null : sshId.value,
  87 + ip: values.ssh_ip,
  88 + port: values.ssh_port,
  89 + sshName: values.ssh_sshName,
  90 + privateKey: values.ssh_privateKey?.[0]?.url || '',
  91 + privateKeyFileName: values.ssh_privateKey?.[0]?.name || '',
  92 + sshPassword: values.ssh_sshPassword,
  93 + verifyMethod: values.ssh_verifyMethod
  94 + }
  95 + }
  96 + delete processedData.ssh_ip
  97 + delete processedData.ssh_port
  98 + delete processedData.ssh_privateKey
  99 + delete processedData.ssh_sshPassword
  100 + delete processedData.ssh_verifyMethod
  101 + const res = await saveDataViewSql(processedData);
  102 + if (res?.id) {
  103 + createMessage.success(t('common.createSuccessText'));
  104 + closeDrawer();
  105 + emits('success');
  106 + }else {
  107 + createMessage.error(t('common.createFailedText'))
  108 + }
  109 + } finally {
  110 + setDrawerProps({ loading: false });
  111 + }
  112 +}
  113 +</script>
  1 +import SqlApiList from './list.vue'
  2 +import SqlApiDrawer from './index.vue';
  3 +import SqlApiForm from './form.vue';
  4 +
  5 +export {SqlApiList, SqlApiDrawer, SqlApiForm};
  1 +<template>
  2 + <div>
  3 + <BasicDrawer
  4 + v-bind="$attrs"
  5 + @register="registerDrawer"
  6 + :title="t('visual.dataview.sqlTitle')"
  7 + width="50%"
  8 + >
  9 + <SqlApiList ref="sqlApiListRef" />
  10 + </BasicDrawer>
  11 + </div>
  12 +</template>
  13 +<script setup lang="ts" name="sqlApi">
  14 +import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
  15 +import { SqlApiList } from './index'
  16 +import {useI18n} from "/@/hooks/web/useI18n";
  17 +const { t } = useI18n();
  18 +
  19 +const [registerDrawer] = useDrawerInner();
  20 +</script>
  1 +<template>
  2 + <div>
  3 + <BasicTable
  4 + @register="registerTable"
  5 + class="bg-neutral-100 dark:bg-dark-700"
  6 + >
  7 + <template #toolbar>
  8 + <Authority :value="PublicInterface.CREATE">
  9 + <a-button type="primary" @click="handleCreateOrEdit(null)">
  10 + {{ t('visual.dataview.sqlAdd') }}
  11 + </a-button>
  12 + </Authority>
  13 + </template>
  14 + <template #action="{ record }">
  15 + <TableAction
  16 + :actions="[
  17 + {
  18 + label: t('common.editText'),
  19 + icon: 'clarity:note-edit-line',
  20 + auth: PublicInterface.UPDATE,
  21 + onClick: handleCreateOrEdit.bind(null, record),
  22 + },
  23 + {
  24 + label: t('common.delText'),
  25 + icon: 'ant-design:delete-outlined',
  26 + auth: PublicInterface.DELETE,
  27 + color: 'error',
  28 + popConfirm: {
  29 + title: t('common.isDelete'),
  30 + confirm: handleDeleteOrBatchDelete.bind(null, record),
  31 + },
  32 + }]"
  33 + />
  34 +
  35 + </template>
  36 + </BasicTable>
  37 + </div>
  38 + <SqlApiForm @register="registerDrawer" @success="handleSuccess"/>
  39 +</template>
  40 +<script lang="ts" setup name="list">
  41 +import {BasicTable, TableAction, useTable} from "/@/components/Table";
  42 +import {
  43 + deleteBigViewSql,
  44 + getDataViewSqlPage
  45 +} from "/@/api/bigscreen/center/bigscreenCenter";
  46 +import {columns, searchFormSchema} from "/@/views/dataview/sqlApi/config/config";
  47 +import {useI18n} from "/@/hooks/web/useI18n";
  48 +import {PublicInterface} from "/@/views/dataview/config";
  49 +import {Authority} from "/@/components/Authority";
  50 +import {useDrawer} from "/@/components/Drawer";
  51 +import {SqlApiForm} from "./index";
  52 +import {useMessage} from "/@/hooks/web/useMessage";
  53 +const { t } = useI18n();
  54 +const [registerDrawer, { openDrawer }] = useDrawer();
  55 +const { createMessage } = useMessage();
  56 +const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
  57 + api: getDataViewSqlPage,
  58 + columns,
  59 + showIndexColumn: false,
  60 + clickToRowSelect: false,
  61 + showTableSetting: true,
  62 + bordered: true,
  63 + formConfig: {
  64 + labelWidth: 120,
  65 + schemas: searchFormSchema,
  66 + baseColProps: { span: 9 },
  67 + actionColOptions: { span: 6 },
  68 + },
  69 + useSearchForm: true,
  70 + actionColumn: {
  71 + width: 180,
  72 + title: t('common.actionText'),
  73 + dataIndex: 'action',
  74 + slots: { customRender: 'action' },
  75 + fixed: 'right',
  76 + },
  77 +});
  78 +
  79 +const handleCreateOrEdit = (record) => {
  80 + const isUpdate = record === null ? false : true;
  81 + const recordContent = record === null ? null : record;
  82 + openDrawer(true, {
  83 + isUpdate,
  84 + record: recordContent,
  85 + });
  86 +}
  87 +
  88 +const handleSuccess = () => {
  89 + reload();
  90 +}
  91 +
  92 +const handleDeleteOrBatchDelete = async (record) => {
  93 + try {
  94 + const ids = record?.id;
  95 + await deleteBigViewSql(ids);
  96 + createMessage.success(
  97 + `${ t('common.delText')}${t(
  98 + 'common.successText'
  99 + )}`
  100 + );
  101 + } finally {
  102 + handleSuccess();
  103 + }
  104 +}
  105 +</script>
  106 +<script setup lang="ts">
  107 +</script>