Ant Design Pro of Vue记录_ant design pro 是vue 还是react-CSDN博客

本文链接：https://blog.csdn.net/palapple163/article/details/101761841

Ant Design Pro of Vue记录

Antd本身是基于React，而Vue版本是移植过来的，大致就移植了90%的功能，而其中的路由配置，权限配置，都是可以在router.config.js进行配置；
整个项目的框架
```
- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表（项目/应用/文章）
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功
```
在官网上是可以得到大致的框架说明：

Ant Design Pro of Vue：https://pro.loacg.com/docs/getting-started

根据需求，你可以在不同页面里面得到大致的模板，然后你就可以微调，根据需求进行调配
1. Antd pro 里面是配合着Ant Design 组件库进行使用的，组件中的具体api可以在
Ant Design：https://vue.ant.design/docs/vue/introduce-cn/

针对组件的属性进行调整
1. 就例如s-table组件为例，基本难点包括：数据加载loaddata，列表头的设置，api的设置，查询query的设置，初始化表格，重置表格等等

个人觉得几个难点：

表头的设置，title，主要是dataIndex，这个属性你要跟api返回的数据的对象的属性值一致，才能展示数据；
loadDate，Antd Pro的sTable数据加载是封装好的，不需要再写数据加载的方法，而loadData的写法是promiser，有固定写法。 then的回调函数中，需要注意看一下后台api的json格式，框架默认加载的是 result下的data属性，如果你json不是data属性，而是其他的等等，你要提前转一下转化，框架才能识别，（例如：res.result.data = res.result.listOprLog;）
查询功能，查询按钮使用了双向数据绑定v-model，把输入的数据暂时存储在queryParam中一个属性，动态生成，再按下查询的按钮的时候，绑定一个方法；首先需要开启一个table中的localLoading，然后，把queryParam这个对象的属性值都加载进去，然后回调，将 this.$refs.table.localDataSource = r.data ，将得到的数据重新加载到table之中，最后关闭localLoading，需要注意的是，查询的属性值，你要提前看看api已经写好了有什么，不然stable不会返回对应的值，因为api没有开放端口。
整个sTable中很多功能都是封装好的，例如refresh功能，

refreshTable () {
      this.$refs.table.clearSelected()
      this.$refs.table.refresh()
      if (this.$refs.table.localDataSource.length > 0) { this.$message.info(`刷新成功!`) }
    }
//步骤，1.清除已选项；2.table进行重置；3.如果获取的数据有，弹窗进行说明

还有自动分页系统，返回的数据中带有分页页码，sTable中就可以自动带有分页功能，在sTable中的属性值可以设定showPagination=“auto”，同时它对服务器的请求也是按照分页进行的，例如在查询的时候，得到多条数据，只会加载一个页面的数据，但是在第一次请求中，就会得到total条数，（底部栏会显示所有条数，但是不会加载数据），当你点击第二页的时候，你才会发送请求，所以是已经封装好的请求机制。

      <template>
        <a-card :bordered="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                  <a-col :md="6" :sm="24">
                    <a-form-item label="日志名称">
                      <a-input v-model="queryParam.startDate" style="width: 100%"/>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-item label="日志信息">
                      <a-input v-model="queryParam.endData" style="width: 100%"/>
                    </a-form-item>
                  </a-col>
                <a-col :md="!advanced && 6 || 24" :sm="24">
                  <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="queryData()">查询</a-button>
                    <!-- 下面相当于function(){queryParam={}; return queryParam;} -->
                    <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
      
          <div class="table-operator">
            <!-- <a-button type="primary" icon="plus" v-action:用户新增 @click="createUser()">新增</a-button> -->
            <a-button type="primary" icon="loading-3-quarters" @click="refreshTable()">刷新表格</a-button>
             <!-- 一条以上的数据被选中，才显示该部分 -->
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay">
                <a-menu-item key="1" v-action:用户启用 @click="enable()"><a-icon type="delete" />启用</a-menu-item>
                <!-- lock | unlock -->
                <a-menu-item key="2" v-action:用户停用 @click="disable()"><a-icon type="lock" />停用</a-menu-item>
                <a-menu-item key="4" v-action:用户删除 @click="deleteUser()"><a-icon type="lock" />删除</a-menu-item>
                <a-menu-item key="5" v-action:用户解锁 @click="unlockUser()"><a-icon type="lock" />解锁</a-menu-item>
                <a-menu-item key="6" v-action:用户重置密码 @click="resetPassword()"><a-icon type="lock" />重置密码</a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px">
                批量操作 <a-icon type="down" />
              </a-button>
            </a-dropdown>
          </div>
          <s-table
            ref="table"
            size="default"
            :columns="columns"
            :data="loadData"
            :alert="options.alert"
            :rowSelection="options.rowSelection"
            showPagination="auto"
          >
          <!-- 这是最后修改的选项 -->
            <!-- <template slot="action" slot-scope="text, record">
              <a class="edit" v-action:用户修改 @click="() => handleEdit(record)">修改</a>
            </template> -->
          </s-table>
          <!-- 这里是新增表单，当按下新增按钮的时候，触发这个事件, 这里的handleok
          跟click一样是自带事件，当表单完成时触发后面的方法-->
          <!-- create-form是外面引进了的组件，里面的设置你要看组件内部构造 -->
          <create-form ref="createModal" @handleok="refreshTable()" @handleCancel="record=null" :record="record" :title="title" />
        </a-card>
      </template>
              <script>
      import moment from 'moment'
      import { STable } from '../components'
      import { Ellipsis } from '@/components'
      import createForm from './modules/userCreateForm'
      import { showMessage } from '../utils/index'
      import { getRoleList, getUserList, startUser, stopUser, unlockUser, resetUserPassword, cancelUser, index, getOprList, test } from './api/manage'
      
      export default {
        name: 'UserTableList',
        components: {
          STable,
          Ellipsis,
          createForm
        },
        data () {
          return {
            mdl: {},
            // 高级搜索 展开/关闭
            advanced: false,
            // 查询参数
            queryParam: {},
            // 向子组件传值
            record: null,
            // 子组件标题
            title: null,
            pubBranchList: null,
            roles: null,
            columns: [
              {
                title: '时间',
                dataIndex: 'event_id', //对应的key，对应数据中的key值
                width: 90,
                sorter: true //是否带排序按钮
              },
              {
                title: '日志名称',
                dataIndex: 'logger_name',
                width: 90,
                sorter: true
              },
              {
                title: '日志信息',
                dataIndex: 'formatted_message',
                width: 90,
                sorter: true
              },
            ],
// 加载数据方法 必须为 Promise 对象
            // 下面代码相当于
            // function(parameter){console.log('loadData.parameter',parameter) 
            // return getServiceList(Object.assign(parameter,this.queryParam)).then(function(res){return res.result})}
            loadData: parameter => {
              console.log('loadData.parameter', parameter)
              return test(Object.assign(parameter, this.queryParam))
                .then(res => {
                  //  这里做一下数据替换，因为框架只认result下的data,如果你
                  // 你的json返回是result下其他，你需要重新赋值一下
                  // res.result.data = res.result.listOprLog;
                  return res.result
                })
            },
            selectedRowKeys: [],
            selectedRows: [],
      
            // custom table alert & rowSelection
            options: {
              alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
              rowSelection: {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange
              }
            },
            optionAlertShow: false
          }
        },
        created () {
          // 初始化表格参数
          this.tableOption()
          // 获取机构列表和角色名列表，这里的数值是在 从服务器中传送回来的
          index().then(res => {
            this.pubBranchList = res.result.pubBranchList
            this.roles = res.result.roles
          })
        },
                  methods: {
          tableOption () {
            if (!this.optionAlertShow) {
              // 如果没有开启预警
              this.options = {
                alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                rowSelection: {
                  selectedRowKeys: this.selectedRowKeys,
                  onChange: this.onSelectChange
      
                }
              }
              this.optionAlertShow = true
            } else {
              this.options = {
                alert: false,
                rowSelection: null
              }
              this.optionAlertShow = false
            }
          },
          // 更改信息
          handleEdit (record) {
            this.record = record
            this.title = '修改'
          },
          onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
          },
          // 展开和收起
          toggleAdvanced () {
            this.advanced = !this.advanced
          },
                      // 高级查询功能
          queryData () {
            this.$refs.table.localLoading = true
            this.loadData(this.queryParam).then(
              r => {
      
                this.$refs.table.localDataSource = r.data
                if (this.$refs.table.localDataSource.length > 0) {console.log("queryData中得到的r.data数据："+ r.data);
                this.$message.info(`标准查询成功!`) } else { this.$message.error('标准查询无记录!') }
                this.$refs.table.localLoading = false
              }
            )
          },
          // 刷新功能
          refreshTable () {
            this.$refs.table.clearSelected()
            this.$refs.table.refresh()
            if (this.$refs.table.localDataSource.length > 0) { this.$message.info(`刷新成功!`) }
          },
          //  注册功能
          createUser () {
            this.title = '注册'
            this.$refs.createModal.add()
          },
          //  重置功能
          resetSearchForm () {
            this.queryParam = {
              date: moment(new Date())
            }
          },
          // 启用功能
          enable () {
            this.selectedRows.map((item) => {
              startUser({ 'id': item.id }).then(res => {
                showMessage(this, res)
              })
            })
            this.refreshTable()
          },
                      // 停用功能
          disable () {
            this.selectedRows.map((item) => {
              stopUser({ 'id': item.id }).then(res => {
                showMessage(this, res)
              })
            })
            this.refreshTable()
          },
          // 删除用户功能
          deleteUser () {
            const that = this
            this.$confirm({
              title: '提示',
              content: '真的要删除吗 ?',
              onOk () {
                that.selectedRows.map((item) => {
                  cancelUser({ 'id': item.id }).then(res => {
                    showMessage(this, res)
                  })
                })
                that.refreshTable()
              }
            })
          },
          // 解锁功能
          unlockUser () {
            this.selectedRows.map((item) => {
              unlockUser({ 'id': item.id }).then(res => {
                showMessage(this, res)
              })
            })
            this.refreshTable()
          },
          // 重置密码功能
          resetPassword () {
            this.selectedRows.map((item) => {
              resetUserPassword({ 'id': item.id }).then(res => {
                showMessage(this, res)
              })
            })
            this.refreshTable()
          }
      
        }
      }
      </script>
      ```