platform/io.sc.platform.system.frontend/src/views/datasource/Datasource.vue

<template>
  <div style="height: 100%">
    <w-grid
      ref="gridRef"
      :title="$t('system.i18n.grid.title')"
      :config-button="true"
      db-click-operation="edit"
      selection="multiple"
      :checkbox-selection="true"
      :data-url="Environment.apiContextPath('/api/system/datasource')"
      :query-form-fields="[
        { name: 'name', label: $t('name'), type: 'w-text', clearable: true },
        { name: 'type', label: $t('type'), type: 'w-select', options: Options.enum(DatasourceTypeEnum), queryOperator: 'equals', clearable: true },
      ]"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="[
        'query',
        'refresh',
        'separator',
        'add',
        'clone',
        'edit',
        'remove',
        'separator',
        {
          name: 'connectionProperties',
          label: $t('system.datasource.grid.toolbar.connectionProperties'),
          icon: 'bi-card-list',
          enableIf: (arg) => {
            return arg.selected && arg.selected.type === 'JDBC';
          },
          click: (arg) => {
            if (arg.selected) {
              dialogRef.open(arg.selected.id);
            }
          },
        },
        'separator',
        'view',
        'separator',
        'export',
      ]"
      :columns="[
        { width: 150, name: 'name', label: $t('name') },
        { width: 80, name: 'type', label: $t('type') },
        { width: 100, name: 'jndiName', label: $t('system.datasource.grid.entity.jndiName'), sortable: false },
        { width: 100, name: 'databaseType', label: $t('system.datasource.grid.entity.databaseType'), sortable: false },
        { width: 200, name: 'jdbcDriver', label: $t('system.datasource.grid.entity.jdbcDriver'), sortable: false },
        { width: 100, name: 'username', label: $t('userName'), sortable: false },
        { width: '100%', name: 'jdbcUrl', label: $t('system.datasource.grid.entity.jdbcUrl'), sortable: false },
      ]"
      :editor="{
        dialog: {
          width: '800px',
        },
        form: {
          colsNum: 1,
          fields: [
            { name: 'name', label: $t('name'), type: 'w-text', requiredIf: true },
            { name: 'type', label: $t('type'), type: 'w-select', requiredIf: true, options: Options.enum(DatasourceTypeEnum), defaultValue: 'JDBC' },
            {
              name: 'jndiName',
              label: $t('system.datasource.grid.entity.jndiName'),
              type: 'w-text',
              requiredIf: true,
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JNDI';
              },
            },
            {
              name: 'databaseType',
              label: $t('system.datasource.grid.entity.databaseType'),
              type: 'w-select',
              options: databaseTypeRef,
              dense: true,
              requiredIf: true,
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JDBC';
              },
              'onUpdate:modelValue': (value) => {
                gridRef.getEditorForm().setFieldValue('jdbcDriver', databaseTypeMapRef[value].driver);
                gridRef.getEditorForm().setFieldValue('jdbcUrl', databaseTypeMapRef[value].urlSample);
              },
            },
            {
              name: 'jdbcDriver',
              label: $t('system.datasource.grid.entity.jdbcDriver'),
              type: 'w-text',
              requiredIf: true,
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JDBC';
              },
            },
            {
              name: 'jdbcUrl',
              label: $t('system.datasource.grid.entity.jdbcUrl'),
              type: 'w-text',
              requiredIf: true,
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JDBC';
              },
            },
            {
              name: 'username',
              label: $t('userName'),
              type: 'w-text',
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JDBC';
              },
            },
            {
              name: 'password',
              label: $t('password'),
              type: 'w-text',
              showIf: (arg) => {
                return arg.form.getFieldValue('type') === 'JDBC';
              },
            },
          ],
        },
      }"
      :viewer="{
        panel: {
          columnNum: 1,
          fields: [
            { name: 'name', label: $t('name') },
            { name: 'type', label: $t('type') },
            { name: 'jndiName', label: $t('system.datasource.grid.entity.jndiName') },
            { name: 'databaseType', label: $t('system.datasource.grid.entity.databaseType') },
            { name: 'jdbcDriver', label: $t('system.datasource.grid.entity.jdbcDriver') },
            { name: 'jdbcUrl', label: $t('system.datasource.grid.entity.jdbcUrl') },
            { name: 'username', label: $t('userName') },
            { name: 'dataComeFrom', label: $t('dataComeFrom') },
            { name: 'creator', label: $t('creator') },
            { name: 'createDate', label: $t('createDate') },
            { name: 'lastModifier', label: $t('lastModifier') },
            { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
            { name: 'corporationCode', label: $t('corporationCode') },
          ],
        },
      }"
      @row-click="(args) => {}"
    ></w-grid>
    <ConnectionPropertiesDialog ref="dialogRef"></ConnectionPropertiesDialog>
  </div>
</template>
<script setup lang="ts">
import 'tailwindcss/utilities.css';
import { ref } from 'vue';
import { axios, Environment, EnumTools, Formater, Options } from 'platform-core';
import ConnectionPropertiesDialog from './ConnectionPropertiesDialog.vue';

const gridRef = ref();
const dialogRef = ref();
const DatasourceTypeEnum = await EnumTools.fetch('io.sc.platform.jdbc.datasource.DatasourceType');
const databaseTypeRef = ref([]);
const databaseTypeMapRef = ref({});
axios.get(Environment.apiContextPath('/api/jdbc/jdbcConnectionTemplate')).then((response) => {
  const templates = response.data;
  databaseTypeRef.value.splice(0, databaseTypeRef.value.length);
  databaseTypeMapRef.value = {};
  for (let template of templates) {
    databaseTypeRef.value.push(template.type);
    databaseTypeMapRef.value[template.type] = template;
  }
});
</script>