# DgMode

> 数据不同方式展现

::: demo 组件 Mode 使用示例

```vue
<template>
  <dg-mode
    :showInput="showInput"
    :inputValue.sync="formDate.key"
    :selectValue.sync="queryFilter"
    :currentPage="tableModule.pageNumber"
    :pageSize="tableModule.pageSize"
    :total="tableModule.total"
    :tableItems="tableItems"
    :allCardData.sync="testData"
    :chooseMode="chooseMode"
    @queryBtn="queryBtn"
    @queryFilterChange="queryFilterChange"
    @handleCardClick="handleCardClick"
    @handleCardlineClick="handleCardlineClick"
    @handleCardtxtClick="handleCardtxtClick"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
  ></dg-mode>
</template>

<script>
export default {
  name: 'testDgMode',
  data() {
    return {
      showInput: true,
      formDate: {
        key: 'aa',
      },
      queryFilter: '1',
      tableModule: {
        tableData: [],
        tableCols: [],
        pageNumber: 1, // 表格分页：当前页
        pageSize: 100, // 表格分页：每页显示条目个数
        total: 0, // 表格分页：总记录数
      },
      tableItems: [
        { field: '', title: '序号', type: 'index', width: 50 },
        { title: '数据源名称', field: 'ENT_ID', width: 100 },
        { title: '模式名', field: 'SYS_ID', width: 120 },
        { title: '中文名', field: 'DB_CNNAME', width: 120, card: 'title' },
        { title: '表名', field: 'DB_NAME', width: 120, card: 'subTitle' },
        { title: '域名', field: 'URL', width: 120, card: 'url' },
        { title: '开放', field: 'DB_NAME2', width: 120 },
        { title: '大小', field: 'DB_NAME3', width: 120 },
        { title: '字段数', field: 'DB_TYPE', width: 100 },
        { title: '备注', field: 'DB_TYPE1', card: 'remark' },
        { title: '创建时间', field: 'OBJ_CNNAME', width: 120 },
        { title: '共享', field: 'DB_TYPE3' },
        {
          title: '操作',
          width: 100,
          fixed: 'right',
          actions: [
            {
              tooltip: '下载',
              fn: this.detailInfo,
              type: 'primary',
              icon: 'el-icon-download',
              plain: true,
              style: 'padding: 8px;border: none',
            },
            {
              tooltip: '详细',
              fn: this.detailInfo,
              type: 'primary',
              icon: 'el-icon-tickets',
              plain: true,
              style: 'padding: 8px;border: none',
            },
          ],
        },
      ],
      testData: [
        {
          DB_ID: 'DB-32de8d',
          DB_NAME: 'MysqlRportTest',
          SYS_ID: null,
          DB_CNNAME: 'MysqlRport测试库',
          DRIVER_CLASSNAME: null,
          URL: '192.168.2.87:8080',
          USER_NAME: 'admin',
          PASSWORD: '1S9tFKoeBjQ=',
          JNDI_NAME: null,
          DB_TYPE: 'mysql',
          DB_FLAG: null,
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: null,
          CONTAIN_OBJTYPE: '[]',
        },
        {
          DB_ID: 'DB-344cdb',
          DB_NAME: 'OceanBase-QDZH',
          SYS_ID: 'XAYH-B-01-02',
          DB_CNNAME: '互联网开发平台',
          DRIVER_CLASSNAME: 'com.alipay.oceanbase.obproxy.mysql.jdbc.Driver',
          URL: 'jdbc:oceanbase://10.202.18.238:3306/QDZH?useServerPrepStmts=true',
          USER_NAME: 'QDZH@tenant_dzqd_test#xianbanktest',
          PASSWORD: 'nbMlExvnmps=',
          JNDI_NAME: null,
          DB_TYPE: 'OceanBase',
          DB_FLAG: 'test',
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: 'aaaa',
          ENT_ID: 'XAYH-0',
          CONTAIN_OBJTYPE: '[TAB, COLUMN]',
        },
        {
          DB_ID: 'DB-50f0a6',
          DB_NAME: 'MysqlTaskTest',
          SYS_ID: null,
          DB_CNNAME: 'MysqlTask测试库',
          DRIVER_CLASSNAME: 'com.mysql.jdbc.Driver',
          URL: 'jdbc:mysql://192.168.2.50:50001/datago_kettle',
          USER_NAME: 'root',
          PASSWORD: 'L+RdRy6IUse2KvT0itTD3g==',
          JNDI_NAME: null,
          DB_TYPE: 'mysql',
          DB_FLAG: null,
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: null,
          CONTAIN_OBJTYPE: '[]',
        },
        {
          DB_ID: 'DB-aef058',
          DB_NAME: 'Oracle-ODM',
          SYS_ID: 'XAYH-B-01-02',
          DB_CNNAME: '数据仓库',
          DRIVER_CLASSNAME: 'oracle.jdbc.driver.OracleDriver',
          URL: 'jdbc:oracle:thin:@//172.16.1.195:1521/ODM',
          USER_NAME: 'ytodm',
          PASSWORD: '13uTRaCm0i0=',
          JNDI_NAME: null,
          DB_TYPE: 'ORACLE',
          DB_FLAG: 'test',
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: 'XAYH-0',
          CONTAIN_OBJTYPE: '[TAB, COLUMN, UDF, VIEW, INDEX, USER, INTER]',
        },
        {
          DB_ID: 'DB-def058',
          DB_NAME: 'Informix-SMS',
          SYS_ID: 'XAYH-B-08-01',
          DB_CNNAME: '短信平台',
          DRIVER_CLASSNAME: 'com.informix.jdbc.IfxDriver',
          URL: 'jdbc:informix-sqli://172.16.1.231:50000/xacb:INFORMIXSERVER=;NEWCODESET=GB18030-2000,8859-1,819;CLIENT_LOCALE=en_US.8859-1;DB_LOCALE=en_US.8859-1;DBDATE=Y4MD;user=yx;password=xacbxacb',
          USER_NAME: 'lz',
          PASSWORD: 'fULP9bAwrVY=',
          JNDI_NAME: null,
          DB_TYPE: 'Informix',
          DB_FLAG: 'test',
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: 'XAYH-0',
          CONTAIN_OBJTYPE: '[TAB, COLUMN]',
        },
        {
          DB_ID: 'kqjulrmvpbs0',
          DB_NAME: '我的名字。',
          SYS_ID: null,
          DB_CNNAME: '我的中文名字。',
          DRIVER_CLASSNAME: null,
          URL: null,
          USER_NAME: null,
          PASSWORD: null,
          JNDI_NAME: null,
          DB_TYPE: null,
          DB_FLAG: null,
          EFF_TIME: null,
          STATE: null,
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: null,
          CONTAIN_OBJTYPE: null,
        },
        {
          DB_ID: 'MysqlTestWwz',
          DB_NAME: 'MysqlTestWwz',
          SYS_ID: 'XAYH-B-01-02',
          DB_CNNAME: 'Mysql测试库-王文宗',
          DRIVER_CLASSNAME: 'com.mysql.jdbc.Driver',
          URL: 'jdbc:mysql://192.168.2.50:50001/wangwz',
          USER_NAME: 'root',
          PASSWORD: 'L+RdRy6IUse2KvT0itTD3g==',
          JNDI_NAME: null,
          DB_TYPE: 'mysql',
          DB_FLAG: 'prod',
          EFF_TIME: null,
          STATE: 'init',
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: 'XAYH-0',
          CONTAIN_OBJTYPE: '[INTER, TAB, COLUMN, UDF, VIEW, INDEX, OPENAPI, ZB, DIM, APP, USER, DATATRANS]',
        },
        {
          DB_ID: 'ZHX-B-03-05-04',
          DB_NAME: 'METADB',
          SYS_ID: 'XAYH-B-01-02',
          DB_CNNAME: '元数据库',
          DRIVER_CLASSNAME: 'com.mysql.jdbc.Driver',
          URL: 'jdbc:mysql://192.168.2.50:50001/datago_db',
          USER_NAME: 'root',
          PASSWORD: 'L+RdRy6IUse2KvT0itTD3g==',
          JNDI_NAME: null,
          DB_TYPE: 'mysql',
          DB_FLAG: 'prod',
          EFF_TIME: null,
          STATE: 'init',
          STATE_TIME: null,
          REMARK: null,
          ENT_ID: 'XAYH-0',
          CONTAIN_OBJTYPE: '[INTER, TAB, COLUMN, UDF, VIEW, INDEX, OPENAPI, ZB, DIM, APP, USER, DATATRANS]',
        },
      ],
      chooseMode: ['table', 'card', 'cardline'],
    }
  },
  created() {},
  methods: {
    queryBtn() {
      this.tableModule.pageNumber = 1 // 表格分页：当前页
      this.tableModule.pageSize = 100 // 表格分页：每页显示条目个数
      this.refreshTableData()
    },
    // 表格搜索下拉框过滤查询
    queryFilterChange(val) {
      this.queryFilter = val
    },
    handleCardClick(row) {},
    handleCardlineClick(row) {},
    handleCardtxtClick(row) {},
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
  },
}
</script>
```

:::
`

## 属性

| 属性          | 说明                                                                                                     |   类型    |                  默认值                  | 可选值 |
| ------------- | -------------------------------------------------------------------------------------------------------- | :-------: | :--------------------------------------: | :----: |
| chooseMode    | 控制可显示哪几种模式                                                                                     |  `array`  | ['table', 'card', 'cardline', 'cardtxt'] |        |
| defaultLayout | 控制默认显示的是哪种模式                                                                                 | `string`  |                  'card'                  |        |
| showInput     | 控制 input 框是否显示                                                                                    | `boolean` |                   true                   |        |
| inputValue    | input 框的双向绑定值 （可用 .sync 修饰符）                                                               | `string`  |                    ''                    |        |
| needSelect    | input 框内嵌的前缀 select 框是否需要                                                                     | `boolean` |                   true                   |        |
| selectValue   | 内嵌 select 的双向绑定值 （可用 .sync 修饰符）                                                           | `string`  |                    ''                    |        |
| apiCode       | dg-table 传 apiCode（内部请求获取数据）                                                                  | `string`  |                    ''                    |        |
| tableData     | 若 dg-table 传的数据不与其他三种模式相同，可单独通过 apicode 或 传 tableData （可用 .sync 修饰符）传数据 |  `array`  |                    []                    |        |
| tableItems    | dg-table 传 tableItems （表格配置信息）                                                                  |  `array`  |                    []                    |        |
| toolbarItems  | dg-table 传 toolbarItems （表头配置信息）                                                                |  `array`  |                    []                    |        |
| formItems     | dg-table 中的表单配置项 formItems                                                                        |  `array`  |                    []                    |        |
| allCardData   | 所有模式的数据相同，可通过 allCardData 传数据 （可用 .sync 修饰符）                                      |  `array`  |                    []                    |        |

## 事件

| 事件名              | 说明                              |        参数        |
| ------------------- | --------------------------------- | :----------------: |
| queryBtn            | input 框的 enter & click 搜索事件 |                    |
| selectionChange     | dg-table 表格开启勾选选中事件     |                    |
| rowClick            | dg-table 表格的行点击事件         | row, column, event |
| handleCardClick     | card 组件的每个 item 点击事件     |                    |
| handleCardlineClick | cardline 组件的每个 item 点击事件 |                    |
| handleCardlineClick | cardtxt 组件的每个 item 点击事件  |                    |

### 分页相关

    - 每页显示条目数改变时(对应 element-ui 的 size-change 事件)触发的事件 -> @handleSizeChange="外部自定义函数处理"
    - 当前页码改变时(对应 element-ui 的 current-change 事件)触发的事件 -> @handleCurrentChange="外部自定义函数处理"
    - 当前页码 -> currentPage -> number 默认为 1
    - 每页显示条目个数 -> pageSize -> number 默认为 10
    - 总条目数 -> total -> number 默认为空