yangjun
/
hldy_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/admin/institution/components/InstitutionAreaLeftTree.vue
View File

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

146
src/views/monitor/datasource/DataSourceDrawer.vue Normal file
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>

33
src/views/monitor/datasource/DataSourceModal.vue
View File

@ -11,6 +11,15 @@
</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>
</BasicModal>
</template>
@ -19,13 +28,14 @@
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
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';
const { createMessage } = useMessage();
// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);
const departOptions = ref<any[]>([]);
//表单配置
const [registerForm, { getFieldsValue, resetFields, validateFields, setFieldsValue, validate }] = useForm({
// labelWidth: 150,
@ -36,8 +46,14 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
//重置表单
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)){
await getDepartOptions('');
}else{
await getDepartOptions('1');
}
if (unref(isUpdate)) {
//获取详情
data.record = await getDataSourceById({ id: data.record.id });
@ -50,6 +66,21 @@
//设置标题
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() {
let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword'];
// 获取以上字段的值，并清除校验状态

29
src/views/monitor/datasource/datasource.api.ts
View File

@ -9,17 +9,18 @@ enum Api {
delete = '/sys/dataSource/delete',
testConnection = '/online/cgreport/api/testConnection',
deleteBatch = '/sys/dataSource/deleteBatch',
exportXlsUrl = 'sys/dataSource/exportXls',
importExcelUrl = 'sys/dataSource/importExcel',
departList = '/sys/dataSource/departList',
// exportXlsUrl = 'sys/dataSource/exportXls',
// importExcelUrl = 'sys/dataSource/importExcel',
}
/**
* 导出api
*/
export const getExportUrl = Api.exportXlsUrl;
/**
* 导入api
*/
export const getImportUrl = Api.importExcelUrl;
// /**
// * 导出api
// */
// export const getExportUrl = Api.exportXlsUrl;
// /**
// * 导入api
// */
// 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 });
};

49
src/views/monitor/datasource/datasource.data.ts
View File

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

47
src/views/monitor/datasource/index.vue
View File

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