数据源管理增加所属机构,并将数据源编码指定为机构编码,将弹窗改成抽屉

This commit is contained in:
曹磊 2025-04-03 16:37:52 +08:00
parent 09ce1cf0fd
commit 04eca1de43
6 changed files with 266 additions and 40 deletions

View File

@ -252,7 +252,7 @@
}); });
} }
// // pnp
async function onSearch(value: string) { async function onSearch(value: string) {
if (value) { if (value) {
try { try {

View File

@ -0,0 +1,146 @@
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
:title="getTitle"
:width="adaptiveWidth"
@ok="handleSubmit"
:showFooter="showFooter"
destroyOnClose
>
<BasicForm @register="registerForm">
<template #pwd="{ model, field }">
<a-row :gutter="8">
<a-col :sm="15" :md="16" :lg="17" :xl="19">
<a-input-password v-model:value="model[field]" placeholder="请输入密码" />
</a-col>
<a-col :sm="9" :md="7" :lg="7" :xl="5">
<a-button type="primary" style="width: 100%" @click="handleTest">测试</a-button>
</a-col>
</a-row>
</template>
<template #departSelect ="{model,field}">
<a-select v-model:value="model[field]" :disabled="model['id']!=null" @change="(value,option) => handleChange(value,model)">
<template v-for="item in departOptions" :key="`${item.code}`">
<a-select-option :value="item.code" :label="item.departName">
{{item.departName}}
</a-select-option>
</template>
</a-select>
</template>
</BasicForm>
</BasicDrawer>
</template>
<script lang="ts" setup>
import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
import { formSchema } from './datasource.data';
import { saveOrUpdateDataSource, getDataSourceById, testConnection, queryDeparts } from './datasource.api';
import {useMessage} from "@/hooks/web/useMessage";
const { createMessage } = useMessage();
// Emits
const emit = defineEmits(['success', 'register']);
const attrs = useAttrs();
const isUpdate = ref(true);
const rowId = ref('');
let isFormDepartUser = false;
//
const [registerForm, { setProps, resetFields, validateFields, getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
labelWidth: 90,
schemas: formSchema,
showActionButtonGroup: false,
});
const showFooter = ref(true);
const departOptions = ref<any[]>([]);
//
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
showFooter.value = data?.showFooter ?? true;
setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
isUpdate.value = !!data?.isUpdate;
console.log(unref(isUpdate));
if (unref(isUpdate)){
await getDepartOptions('');
}else{
await getDepartOptions('1');
}
if (unref(isUpdate)) {
//
data.record = await getDataSourceById({ id: data.record.id });
//
await setFieldsValue({
...data.record,
});
}
//
setProps({ disabled: !showFooter.value });
});
//
const getTitle = computed(() => {
if (!unref(isUpdate)) {
return '新增数据源';
} else {
return unref(showFooter) ? '编辑数据源' : '数据源详情';
}
});
const { adaptiveWidth } = useDrawerAdaptiveWidth();
async function getDepartOptions(addFLag){
departOptions.value = [];
const data = await queryDeparts({ addFLag : addFLag });
console.log(data);
Object.assign(departOptions.value, data);
}
async function handleChange(value,formData){
if(value == null){
formData["code"] = "";
}else{
formData["code"] = value;
}
}
async function handleTest() {
let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword'];
//
let fieldsValues = getFieldsValue(keys);
let setFields = {};
keys.forEach((key) => (setFields[key] = { value: fieldsValues[key], errors: null }));
await validateFields(keys).then((values) => {
let loading = createMessage.loading('连接中....', 0);
testConnection(values)
.then((data) => {
if (data.success) {
createMessage.success('连接成功');
}
})
.catch((error) => {})
.finally(() => loading());
});
}
//
async function handleSubmit() {
try {
let values = await validate();
setDrawerProps({ confirmLoading: true });
await saveOrUpdateDataSource(values, isUpdate.value);
//
closeDrawer();
//
emit('success');
} finally {
setDrawerProps({ confirmLoading: false });
}
}
</script>
<style scoped>
</style>

View File

@ -11,6 +11,15 @@
</a-col> </a-col>
</a-row> </a-row>
</template> </template>
<template #departSelect ="{model,field}">
<a-select v-model:value="model[field]" :disabled="model['id']!=null" @change="(value,option) => handleChange(value,model)">
<template v-for="item in departOptions" :key="`${item.code}`">
<a-select-option :value="item.code" :label="item.departName">
{{item.departName}}
</a-select-option>
</template>
</a-select>
</template>
</BasicForm> </BasicForm>
</BasicModal> </BasicModal>
</template> </template>
@ -19,13 +28,14 @@
import { BasicModal, useModalInner } from '/@/components/Modal'; import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index'; import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './datasource.data'; import { formSchema } from './datasource.data';
import { saveOrUpdateDataSource, getDataSourceById, testConnection } from './datasource.api'; import { saveOrUpdateDataSource, getDataSourceById, testConnection, queryDeparts } from './datasource.api';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
// Emits // Emits
const emit = defineEmits(['register', 'success']); const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true); const isUpdate = ref(true);
const departOptions = ref<any[]>([]);
// //
const [registerForm, { getFieldsValue, resetFields, validateFields, setFieldsValue, validate }] = useForm({ const [registerForm, { getFieldsValue, resetFields, validateFields, setFieldsValue, validate }] = useForm({
// labelWidth: 150, // labelWidth: 150,
@ -36,8 +46,14 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
// //
await resetFields(); await resetFields();
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate; isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)){
await getDepartOptions('');
}else{
await getDepartOptions('1');
}
if (unref(isUpdate)) { if (unref(isUpdate)) {
// //
data.record = await getDataSourceById({ id: data.record.id }); data.record = await getDataSourceById({ id: data.record.id });
@ -50,6 +66,21 @@
// //
const title = computed(() => (!unref(isUpdate) ? '新增数据源' : '编辑数据源')); const title = computed(() => (!unref(isUpdate) ? '新增数据源' : '编辑数据源'));
async function getDepartOptions(addFLag){
departOptions.value = [];
const data = await queryDeparts({ addFLag : addFLag });
console.log(data);
Object.assign(departOptions.value, data);
}
async function handleChange(value,formData){
if(value == null){
formData["code"] = "";
}else{
formData["code"] = value;
}
}
async function handleTest() { async function handleTest() {
let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword']; let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword'];
// //

View File

@ -9,17 +9,18 @@ enum Api {
delete = '/sys/dataSource/delete', delete = '/sys/dataSource/delete',
testConnection = '/online/cgreport/api/testConnection', testConnection = '/online/cgreport/api/testConnection',
deleteBatch = '/sys/dataSource/deleteBatch', deleteBatch = '/sys/dataSource/deleteBatch',
exportXlsUrl = 'sys/dataSource/exportXls', departList = '/sys/dataSource/departList',
importExcelUrl = 'sys/dataSource/importExcel', // exportXlsUrl = 'sys/dataSource/exportXls',
// importExcelUrl = 'sys/dataSource/importExcel',
} }
/** // /**
* api // * 导出api
*/ // */
export const getExportUrl = Api.exportXlsUrl; // export const getExportUrl = Api.exportXlsUrl;
/** // /**
* api // * 导入api
*/ // */
export const getImportUrl = Api.importExcelUrl; // export const getImportUrl = Api.importExcelUrl;
/** /**
* *
@ -81,3 +82,11 @@ export const batchDeleteDataSource = (params, handleSuccess) => {
}, },
}); });
}; };
/**
*
* @param params
*/
export const queryDeparts = (params) => {
return defHttp.get({ url: Api.departList, params });
};

View File

@ -69,45 +69,65 @@ const dbUrlMap = {
}; };
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{
title: '所属机构',
dataIndex: 'sysOrgCode_dictText',
width: 150,
align: 'left',
},
{
title: '数据源编码',
dataIndex: 'code',
width: 150,
align: 'left',
},
{ {
title: '数据源名称', title: '数据源名称',
dataIndex: 'name', dataIndex: 'name',
width: 200, width: 150,
align: 'left', align: 'left',
}, },
{ {
title: '数据库类型', title: '数据库类型',
dataIndex: 'dbType_dictText', dataIndex: 'dbType_dictText',
width: 200, width: 150,
align: 'left',
}, },
{ {
title: '驱动类', title: '驱动类',
dataIndex: 'dbDriver', dataIndex: 'dbDriver',
width: 200, width: 200,
align: 'left',
}, },
{ {
title: '数据源地址', title: '数据源地址',
dataIndex: 'dbUrl', dataIndex: 'dbUrl',
}, align: 'left',
{
title: '用户名',
dataIndex: 'dbUsername',
width: 200,
}, },
]; ];
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
{
field: 'sysOrgCode',
label: '所属机构',
component: 'JDictSelectTag',
componentProps: {
dictCode: "sys_depart,depart_name,org_code,org_category='1' and del_flag = '0' order by org_code",
placeholder: '请选择机构',
},
colProps: { span: 6 },
},
{ {
field: 'name', field: 'name',
label: '数据源名称', label: '数据源名称',
component: 'Input', component: 'Input',
colProps: { span: 8 }, colProps: { span: 6 },
}, },
{ {
field: 'dbType', field: 'dbType',
label: '数据库类型', label: '数据库类型',
component: 'JDictSelectTag', component: 'JDictSelectTag',
colProps: { span: 8 }, colProps: { span: 6 },
componentProps: () => { componentProps: () => {
return { return {
dictCode: 'database_type', dictCode: 'database_type',
@ -123,14 +143,19 @@ export const formSchema: FormSchema[] = [
component: 'Input', component: 'Input',
show: false, show: false,
}, },
{
field: 'sysOrgCode',
label: '所属机构',
component: 'Input',
required: true,
slot: 'departSelect',
},
{ {
field: 'code', field: 'code',
label: '数据源编码', label: '数据源编码',
component: 'Input', component: 'Input',
required: true, required: true,
dynamicDisabled: ({ values }) => { dynamicDisabled: true
return !!values.id;
},
}, },
{ {
field: 'name', field: 'name',

View File

@ -3,8 +3,8 @@
<BasicTable @register="registerTable" :rowSelection="rowSelection"> <BasicTable @register="registerTable" :rowSelection="rowSelection">
<template #tableTitle> <template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-right: 5px">新增</a-button> <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-right: 5px">新增</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>-->
<a-dropdown v-if="selectedRowKeys.length > 0"> <a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay> <template #overlay>
<a-menu> <a-menu>
@ -24,26 +24,30 @@
<TableAction :actions="getActions(record)" /> <TableAction :actions="getActions(record)" />
</template> </template>
</BasicTable> </BasicTable>
<DataSourceModal @register="registerModal" @success="reload" /> <!-- <DataSourceModal @register="registerModal" @success="reload" />-->
<DataSourceDrawer @register="registerDrawer" @success="reload" />
</div> </div>
</template> </template>
<script lang="ts" name="monitor-datasource" setup> <script lang="ts" name="monitor-datasource" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table'; import { BasicTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import { getDataSourceList, deleteDataSource, batchDeleteDataSource, getExportUrl, getImportUrl } from './datasource.api'; import { getDataSourceList, deleteDataSource, batchDeleteDataSource } from './datasource.api';
import { columns, searchFormSchema } from './datasource.data'; import { columns, searchFormSchema } from './datasource.data';
import DataSourceModal from './DataSourceModal.vue'; // import DataSourceModal from './DataSourceModal.vue';
import DataSourceDrawer from './DataSourceDrawer.vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useListPage } from '/@/hooks/system/useListPage'; import { useListPage } from '/@/hooks/system/useListPage';
import {useDrawer} from "@/components/Drawer";
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); // const [registerModal, { openModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
// //
const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({ const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
designScope: 'quartz-template', designScope: 'quartz-template',
tableProps: { tableProps: {
title: '任务列表', title: '数据源列表',
api: getDataSourceList, api: getDataSourceList,
columns: columns, columns: columns,
formConfig: { formConfig: {
@ -52,13 +56,13 @@
fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']], fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
}, },
}, },
exportConfig: { // exportConfig: {
name: '数据源列表', // name: '',
url: getExportUrl, // url: getExportUrl,
}, // },
importConifg: { // importConifg: {
url: getImportUrl, // url: getImportUrl,
}, // },
}); });
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
@ -87,8 +91,13 @@
* 新增事件 * 新增事件
*/ */
function handleAdd() { function handleAdd() {
openModal(true, { // openModal(true, {
// isUpdate: false,
// });
openDrawer(true, {
isUpdate: false, isUpdate: false,
showFooter: true,
tenantSaas: false,
}); });
} }
@ -96,9 +105,15 @@
* 编辑事件 * 编辑事件
*/ */
function handleEdit(record) { function handleEdit(record) {
openModal(true, { // openModal(true, {
// record,
// isUpdate: true,
// });
openDrawer(true, {
record, record,
isUpdate: true, isUpdate: true,
showFooter: true,
tenantSaas: false,
}); });
} }