TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 16:00:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化机器脚本添加参数的前端交互

Browse Source
This commit is contained in:
meilin.huang
2022-07-26 18:32:45 +08:00
parent 366563a0fe
commit 1e3e183930
6 changed files with 123 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -161,9 +161,14 @@
size="small"
>
<template #prepend>
<el-popover trigger="click" :width="270" placement="right">
<el-popover v-model:visible="dt.selectColumnPopoverVisible" :width="320" placement="right">
<template #reference>
<el-link type="success" :underline="false">选择列</el-link>
<el-link
@click="dt.selectColumnPopoverVisible = !dt.selectColumnPopoverVisible"
type="success"
:underline="false"
>选择列</el-link
>
</template>
<el-table
:data="getColumns4Map(dt.name)"
@@ -174,6 +179,7 @@
onConditionRowClick(event, dt);
}
"
style="cursor: pointer"
>
<el-table-column property="columnName" label="列名" show-overflow-tooltip> </el-table-column>
<el-table-column property="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
@@ -233,6 +239,30 @@
</el-tab-pane>
</el-tabs>
</el-container>
<el-dialog v-model="conditionDialog.visible" :title="conditionDialog.title" width="420px">
<el-row>
<el-col :span="5">
<el-select v-model="conditionDialog.condition">
<el-option label="=" value="="> </el-option>
<el-option label="LIKE" value="LIKE"> </el-option>
<el-option label=">" value=">"> </el-option>
<el-option label=">=" value=">="> </el-option>
<el-option label="<" value="<"> </el-option>
<el-option label="<=" value="<="> </el-option>
</el-select>
</el-col>
<el-col :span="19">
<el-input v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" />
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancelCondition">取消</el-button>
<el-button type="primary" @click="onConfirmCondition">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
@@ -313,6 +343,16 @@ export default defineComponent({
left: '',
top: '',
},
selectColumnPopoverVisible: false,
conditionDialog: {
title: '',
placeholder: '',
columnRow: null,
dataTab: null,
visible: false,
condition: '=',
value: null,
},
cmOptions: {
tabSize: 4,
mode: 'text/x-sql',
@@ -677,6 +717,7 @@ export default defineComponent({
columnNames: [],
pageNum: 1,
count: 0,
selectColumnPopoverVisible: false,
};
tab.columnNames = await getColumnNames(tableName);
state.dataTabs[tableName] = tab;
@@ -716,24 +757,36 @@ export default defineComponent({
* 条件查询，点击列信息后显示输入对应的值
*/
const onConditionRowClick = (event: any, dataTab: any) => {
dataTab.selectColumnPopoverVisible = false;
const row = event[0];
ElMessageBox.prompt(`请输入 [${row.columnName}] 的值`, '查询条件', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: `${row.columnType} ${row.columnComment}`,
})
.then(({ value }) => {
if (!value) {
value = '';
}
let condition = dataTab.condition;
if (condition) {
condition += ` AND `;
}
condition += `${row.columnName} = `;
dataTab.condition = condition + wrapColumnValue(row, value);
})
.catch(() => {});
state.conditionDialog.title = `请输入 [${row.columnName}] 的值`;
state.conditionDialog.placeholder = `${row.columnType} ${row.columnComment}`;
state.conditionDialog.columnRow = row;
state.conditionDialog.dataTab = dataTab;
state.conditionDialog.visible = true;
};
// 确认条件
const onConfirmCondition = () => {
const conditionDialog = state.conditionDialog;
const dataTab = state.conditionDialog.dataTab as any;
let condition = dataTab.condition;
if (condition) {
condition += ` AND `;
}
const row = conditionDialog.columnRow as any;
condition += `${row.columnName} ${conditionDialog.condition} `;
dataTab.condition = condition + wrapColumnValue(row, conditionDialog.value);
onCancelCondition();
};
const onCancelCondition = () => {
state.conditionDialog.visible = false;
state.conditionDialog.title = ``;
state.conditionDialog.placeholder = ``;
state.conditionDialog.value = null;
state.conditionDialog.columnRow = null;
state.conditionDialog.dataTab = null;
};
const onRefresh = async (tableName: string) => {
@@ -793,10 +846,10 @@ export default defineComponent({
const getDefaultSelectSql = (tableName: string, where: string = '', orderBy: string = '', pageNum: number = 1) => {
const baseSql = `SELECT * FROM ${tableName} ${where ? 'WHERE ' + where : ''} ${orderBy ? orderBy : ''}`;
if (state.dbType == 'mysql') {
return `${baseSql} LIMIT ${(pageNum - 1) * state.defalutLimit}, ${state.defalutLimit};`
return `${baseSql} LIMIT ${(pageNum - 1) * state.defalutLimit}, ${state.defalutLimit};`;
}
if (state.dbType == 'postgres') {
return `${baseSql} OFFSET ${(pageNum - 1) * state.defalutLimit} LIMIT ${state.defalutLimit};`
return `${baseSql} OFFSET ${(pageNum - 1) * state.defalutLimit} LIMIT ${state.defalutLimit};`;
}
return baseSql;
};
@@ -1121,6 +1174,8 @@ export default defineComponent({
getColumnTip,
getColumns4Map,
onConditionRowClick,
onConfirmCondition,
onCancelCondition,
changeSqlTemplate,
deleteSql,
saveSql,

48
mayfly_go_web/src/views/ops/machine/ScriptEdit.vue
View File

@@ -9,7 +9,7 @@
:destroy-on-close="true"
width="800px"
>
<el-form :model="form" ref="mockDataForm" label-width="70px">
<el-form :model="form" ref="scriptForm" label-width="70px">
<el-form-item prop="method" label="名称">
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
@@ -24,8 +24,19 @@
</el-select>
</el-form-item>
<el-form-item prop="params" label="参数">
<el-input v-model="form.params" placeholder="参数数组json，若无可不填"></el-input>
<el-row style="margin-left: 30px; margin-bottom: 5px">
<el-button @click="onAddParam" size="small" type="success">新增占位符参数</el-button>
</el-row>
<el-form-item :key="param" v-for="(param, index) in params" prop="params" :label="`参数${index + 1}`">
<el-row>
<el-col :span="6"><el-input v-model="param.model" placeholder="内容中用{{.model}}替换"></el-input></el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="6"><el-input v-model="param.name" placeholder="字段名"></el-input></el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="6"><el-input v-model="param.placeholder" placeholder="字段说明"></el-input></el-col>
<el-divider :span="1" direction="vertical" border-style="dashed" />
<el-col :span="3"><el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button></el-col>
</el-row>
</el-form-item>
<el-form-item prop="script" label="内容" id="content">
@@ -84,41 +95,59 @@ export default defineComponent({
},
setup(props: any, { emit }) {
const { isCommon, machineId } = toRefs(props);
const mockDataForm: any = ref(null);
const scriptForm: any = ref(null);
const state = reactive({
dialogVisible: false,
submitDisabled: false,
params: [] as any,
form: {
id: null,
name: '',
machineId: 0,
description: '',
script: '',
params: null,
params: '',
type: null,
},
btnLoading: false,
});
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (!newValue.visible) {
return;
}
if (newValue.data) {
state.form = { ...newValue.data };
if (state.form.params) {
state.params = JSON.parse(state.form.params);
}
} else {
state.form = {} as any;
state.form.script = '';
}
state.dialogVisible = newValue.visible;
});
const onAddParam = () => {
state.params.push({ name: '', model: '', placeholder: '' });
};
const onDeleteParam = (idx: number) => {
state.params.splice(idx, 1);
};
const btnOk = () => {
state.form.machineId = isCommon.value ? 9999999 : (machineId.value as any);
console.log('machineid:', machineId);
mockDataForm.value.validate((valid: any) => {
scriptForm.value.validate((valid: any) => {
if (valid) {
notEmpty(state.form.name, '名称不能为空');
notEmpty(state.form.description, '描述不能为空');
notEmpty(state.form.script, '内容不能为空');
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
machineApi.saveScript.request(state.form).then(
() => {
ElMessage.success('保存成功');
@@ -139,12 +168,15 @@ export default defineComponent({
const cancel = () => {
emit('update:visible', false);
emit('cancel');
state.params = [];
};
return {
...toRefs(state),
enums,
mockDataForm,
onAddParam,
onDeleteParam,
scriptForm,
btnOk,
cancel,
};

7
mayfly_go_web/src/views/ops/machine/ServiceManage.vue
View File

@@ -196,8 +196,11 @@ export default defineComponent({
// 如果存在参数，则弹窗输入参数后执行
if (script.params) {
state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
state.scriptParamsDialog.visible = true;
return;
console.log(state.scriptParamsDialog.paramsFormItem);
if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
state.scriptParamsDialog.visible = true;
return;
}
}
run(script);

3
mayfly_go_web/src/views/ops/mongo/MongoEdit.vue
View File

@@ -61,7 +61,6 @@ import { mongoApi } from './api';
import { projectApi } from '../project/api.ts';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import { RsaEncrypt } from '@/common/rsa';
export default defineComponent({
name: 'MongoEdit',
@@ -181,7 +180,7 @@ export default defineComponent({
mongoForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
reqForm.uri = await RsaEncrypt(reqForm.uri);
// reqForm.uri = await RsaEncrypt(reqForm.uri);
mongoApi.saveMongo.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);

4
server/internal/devops/api/mongo.go
View File

@@ -38,10 +38,6 @@ func (m *Mongo) Save(rc *ctx.ReqCtx) {
mongo := new(entity.Mongo)
utils.Copy(mongo, form)
// 解密uri，并使用解密后的赋值
originUri, err := utils.DefaultRsaDecrypt(form.Uri, true)
biz.ErrIsNilAppendErr(err, "解密uri错误: %s")
mongo.Uri = originUri
mongo.SetBaseInfo(rc.LoginAccount)
m.MongoApp.Save(mongo)

2
server/internal/devops/application/db_app.go
View File

@@ -180,7 +180,7 @@ func (da *dbAppImpl) GetDbInstance(id uint64, db string) *DbInstance {
return load.(*DbInstance)
}
}
biz.IsTrue(mutex.TryLock(), "有数据库实例在连接中...请稍后重试")
mutex.Lock()
defer mutex.Unlock()
d := da.GetById(id)