新增页面示例

# 新增页面示例

提示

此处提供使用通用模板的页面使用方法，若要添加常规页面请参考 Vue (opens new window) 官网提供的说明。使用此方法前需要已经在配置表配置好需要调用的单表信息。

首先在 src>api>views 中新建文件夹 user-example ，进入文件夹新建文件 user-example.ts，写入以下信息

import { Component, Prop, Vue } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import Common from '@/api/mixins/Common'

@Component({
  name: 'userExample'
})
export default class extends mixins(Common) {
}

1
2
3
4
5
6
7
8
9

添加默认配置信息，需要使用者根据注释及页面需求更改配置

import { Component, Prop, Vue } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import Common from '@/api/mixins/Common'
import StringUtils from '@/common/StringUtils'

@Component({
  name: 'userExample'
})
export default class extends mixins(Common) {
  // 表格中 '操作'列的宽度
  private operationWidth = 200

  async created() {
    // 设置默认排序
    this.sort = 'UPDATE_TIME'
    this.order = 'DESC'
    // 设置表别名
    this.tableAlias = 'user'
    // 获取表头及表单信息
    await this.acquireTableInfo()
    // 获取基表信息格式化下拉框及表格数据
    await this.getBaseTableInfo()
    // 获取列表信息
    this.acquireTable()
    // 设置默认校验构造
    this.formRules = {
      PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
    }
    // 设置默认禁用字段
    this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
  }

  // 编辑表格新增行
  addRow() {
    const obj: any = {
      index: this.editList.length,
      edit: true
    }
    this.editList.push(obj)
  }

  // 可编辑表格select
  editTableSelectionChange(val: any) {
    this.editTableSelectList = val
  }

  // 表格校验规则
  tableRules(val: any) {
    const { rows, rules, callback } = val
    let message = ''
    Object.getOwnPropertyNames(rules).forEach(function(key) {
      if (key !== '__ob__') {
        if (StringUtils.isEmpty(rows[key])) {
          message += rules[key][0].message
          message += ','
        }
      }
    })
    callback(message)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在路径 src>views 新建文件夹 user-example , 进入 user-example 文件夹，新建文件 user-example.vue，并写入以下信息，scss请根据页面设计自行更改，或者复制通用页面示例中的scss，这里先不再显示。
```
<template>
  <div class="dashboard-editor-container">
  </div>
</template>

<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>

<style lang="scss">
 
</style>
```
1
2
3
4
5
6
7
8
9
10
11

在 src>router>index.ts 中增加 user-example.vue 的路由指向。

export const asyncRoutes: RouteConfig[] = [
....,
{
  path: '/userExample',
  component: Layout,
  children: [
    {
      path: 'userExample',
      component: () => import(/* webpackChunkName: "icons" */ '@/views/user-example/userExample.vue'),
      name: 'userExample',
      meta: {
        title: 'userExample',
        icon: 'example',
        noCache: true
      }
    }
  ]
},
....
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

此时可以看到目录上多了刚刚我们添加的路由

router

此时目录还未显示中文，由于框架使用i18n插件，此时我们需要进入语言目录下进行设置，进入 src>lang>zh.ts 中设置显示中文。

注意

此处设置需要添加到router对象下，且key值需要与路由中的title设置一致
```
export default {
  route: {
    userExample:'用户示例',
    ...
  }
}   
```
1
2
3
4
5
6
然后我们就可以看到显示目录变成中文。

然后，我们添加通用组件到ts文件及页面中。

首先引入组件到ts文件中

import { Component, Prop, Vue } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import Common from '@/api/mixins/Common'
import StringUtils from '@/common/StringUtils'
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
@Component({
  name: 'commonExample',
  components: {
    tableHeadCo,
  }
})
export default class extends mixins(Common) {
  // 表格中 '操作'列的宽度
  private operationWidth = 200

  async created() {
    // 设置默认排序
    this.sort = 'UPDATE_TIME'
    this.order = 'DESC'
    // 设置表别名
    this.tableAlias = 'user'
    // 获取表头及表单信息
    await this.acquireTableInfo()
    // 获取基表信息格式化下拉框及表格数据
    await this.getBaseTableInfo()
    // 获取列表信息
    this.acquireTable()
    // 设置默认校验构造
    this.formRules = {
      PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
    }
    // 设置默认禁用字段
    this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
  }

  // 编辑表格新增行
  addRow() {
    const obj: any = {
      index: this.editList.length,
      edit: true
    }
    this.editList.push(obj)
  }

  // 可编辑表格select
  editTableSelectionChange(val: any) {
    this.editTableSelectList = val
  }

  // 表格校验规则
  tableRules(val: any) {
    const { rows, rules, callback } = val
    let message = ''
    Object.getOwnPropertyNames(rules).forEach(function(key) {
      if (key !== '__ob__') {
        if (StringUtils.isEmpty(rows[key])) {
          message += rules[key][0].message
          message += ','
        }
      }
    })
    callback(message)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

然后再vue实例中引入组件

<template>
  <div class="dashboard-editor-container">
    <table-head-co
    ref="tableCo"
    :check-box-visible="true"
    :formatter="tableFomatter"
    :form-list="tableList"
    :table-heads="tableHead"
    :loading="loading"
    :slot-visible="true"
    :width="operationWidth"
    @handle-sort-change="handleSortChange"
    @handle-selection-change="handleSelectionChange"
    />
  </div>
</template>

<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>

<style lang="scss">
 
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后我们刷新页面，就可以看到刚刚引入的组件了。

table

页面实例讲解完毕，最后，请按照使用者按照需要进行页面相关的开发或引入其他组件进行开发。

上次更新: 2021/02/03, 17:01:33

← Api示例通用表格组件→