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

src/views/admin/institution/components/InstitutionAreaLeftTree.vue

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

src/views/monitor/datasource/DataSourceDrawer.vue

@@ -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>

src/views/monitor/datasource/DataSourceModal.vue

@@ -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'];
     // 获取以上字段的值，并清除校验状态

src/views/monitor/datasource/datasource.api.ts

@@ -9,17 +9,18 @@ enum Api {
   delete = '/sys/dataSource/delete',
   testConnection = '/online/cgreport/api/testConnection',
   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 });
+};

src/views/monitor/datasource/datasource.data.ts

@@ -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',
-  },
+    align: 'left',
-  {
-    title: '用户名',
-    dataIndex: 'dbUsername',
-    width: 200,
   },
 ];
 
 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 }) => {
+    dynamicDisabled: true
-      return !!values.id;
-    },
   },
   {
     field: 'name',

src/views/monitor/datasource/index.vue

@@ -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>
+<!--        <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">
           <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: {
+    // exportConfig: {
-      name: '数据源列表',
+    //   name: '数据源列表',
-      url: getExportUrl,
+    //   url: getExportUrl,
-    },
+    // },
-    importConifg: {
+    // importConifg: {
-      url: getImportUrl,
+    //   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,
     });
   }