阅读 2724

解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之三表格

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

前言

阅读前请按照顺序参看系列文章,效果更佳!

据说系列文章很难火爆,因为知识点包袱不够多,所以大家看往后不太愿意收藏, 不过没关系了, 系列文章的好处是看着舒服,碎片化时间内很快就看完了,不是吗?

1. Common 公共页面

前面几个小节已经阐述过,如果需要完成我们的低代码列表设计,那么必然会涉及到公共组件的设计。

1.1灵活的动态组件

我们设计了 CommonLayout 组件以完成公共的功能,当然它的内容非常少,仅仅是引入了 Component组件而已。

下面是摘自Vue文档介绍:

有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,上述内容可以通过 Vue 的 元素加一个特殊的 is attribute 来实现:。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
复制代码

在上述示例中,currentTabComponent 可以包括已注册组件的名字,或一个组件的选项对象。

由于这一个组件会对应多个路由,由于vue的优化,导致其created方法仅被调用一次。因此我们需要完成路由切换时的加载工作。

1.2 难堪的异步api调用

前节的实现有些问题,因为涉及到api的调用,这个异步的方法会导致更新页面时状态刷新并不那么及时,因此对上节的组件需要进行优化,以便其能够顺利加载数据。

  • 先控制显示,这里引入initCom变量,在未准备好之前先不显示组件。这样做会有少许时间页面空白~~~ 暂时未找到合适的方案;
<template>
  <div class="app-container">
    <keep-alive v-if="initCom">
      <component :is="realCompoonent" v-if="realCompoonent" :guid="guid" />
      <common-layout v-else :guid="guid" />
    </keep-alive>

  </div>
</template>
复制代码
  • 再控制api请求,在路由切换前,加载列表定义模型数据,一旦加载完毕,再刷新vuex数据,并加载实际的组件
beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.guid = vm.getGuid(to)
      if (vm.hasExpire(vm.udf, vm.guid)) {
        const http = new Http()
        http.fetch({
          url: `/Tools/GetModelDefine/${vm.guid}`,
          method: 'get',
        }).then(data => {
          vm.$store.dispatch('udf/setUdfModelData', { guid: vm.guid, data })
          vm.init(to)
        })
      } else {
        vm.init(to)
      }
    })
  },

init(route) {
      const path = route.path
      try {
        this.realCompoonent = require(`@/views${path}`).default
        // this.$router.push(this.realCompoonent)
      } catch (ex) {
        console.log(`load sub com [${path}] failed. ${ex}`)
        this.realCompoonent = null
      }
      this.initCom = true
    },
复制代码

按照这样的修改,终于在页面刷新、菜单来回切换时表现正常了。

2.CommonLayout 组件

在没有定义 realCompoonent 组件页面时,我们会自动的使用 CommonLayout组件显示。

2.1 这个表格有点丑

其主要按照列表形式展现我们定义的表单,做好的效果如下: 在这里插入图片描述

2.2 模型元数据

其主要按照模型定义,进行解析并展现。 在这里插入图片描述 通过Common页面组件,我们已经顺利的拿到模型定义数据,并放在vuex内,因此本组件只需要拿到guid参数,然后到vuex内查询数据即可。

2.3 那我们就定义一个guid属性先。

export default {
  name: 'CommonLayout',
  mixins: [mixClass],
  props: {
    guid: { type: String, default: '' },
  },
  data() {
    return {}
  },
 }
复制代码

2.4 引入 mapGetters 获取vuex数据。

import { mapGetters } from 'vuex'
...
computed: {
    ...mapGetters(['udf']),
    templateModel() {
      // console.log(this.udf.get(this.guid))
      return this.udf.get(this.guid)
    },
    showSummary() {
      const index = this.templateModel.listTemplate.findIndex(
        item => item.isSum == 1,
      )
      return index != -1
    },
  },
复制代码

2.5 为了获取后台列表数据,我们引用mixins扩展类。

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。 更多合并规则,可以参考vue文档

在混入类,我们会按照约定规则调用分页数据api。

getlistApi(params) {
  const model = this.templateModel.model.modelName
  return this.$http.fetch({
    url: `/${model}/Get${model}Page`,
    method: 'post',
    params: params,
  })
},
复制代码

2.6 同样的,为了保证数据的加载,我们监视$route

监视$rout,以便在created方法不被调用时刷新数据。

 watch: {
    $route: function(to, from) {
      this.reset()
      this.fetchData()
    },
  },
复制代码

2.7 按照模型定义,我们显示或隐藏表格的序号和多选框列。

<el-table-column
v-if="templateModel.model.listShowSelect == 1"
 type="selection"
 width="55"
/>
<el-table-column
 v-if="templateModel.model.listShowNo == 1"
 type="index"
 align="center"
 width="50"
 label="#"
 :index="table_index"
/>
复制代码

2.8 增加列表的排序功能以及合并功能

<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :show-summary="showSummary"
      :summary-method="getSummaries"
      @current-change="handleCurrentChange"
      @sort-change="sortList"
    >
复制代码

2.9 列表合计功能

合并功能需要按照列设置进行显示,因此需要自定义getSummaries方法。实现的方法如下:

getSummaries(param) {
      const list = this.templateModel.listTemplate
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }

        if (column.property) {
          const item = list.find(o => o.fieldName.toLowerCase() == column.property.toLowerCase())
          console.log(item)
          if (item && item.isSum == 1) {
            const values = data.map(item => Number(item[column.property]))
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          // sums[index]
          }
        }
      })
      return sums
    },
复制代码

2.10 列定义

按照模型的列表定义,拉取列,并显示。这里定义了宽度、列名、对齐、属性、以及对日期数据进行格式化。当然还可以按照控件类型进行扩展。

<el-table-column
        v-for="(item, index) in templateModel.listTemplate"
        :key="index"
        :label="$t(templateModel.model.modelName + '.' + item.fieldName)"
        :width="item.width <= 0 ? 0 : item.width"
        :align="item.controlType == 'Number' ? 'right' : 'left'"
        :sortable="item.isSort == 1 ? 'custom' : false"
        :prop="firstLower(item.fieldName)"
      >
        <template slot-scope="scope">
          <template v-if="item.controlType == 'Text'">
            {{ scope.row[firstLower(item.fieldName)] }}
          </template>
          <template v-else-if="item.controlType == 'DateTime'">
            {{ scope.row[firstLower(item.fieldName)] | formatDate }}
          </template>
          <template v-else>
            {{ scope.row[firstLower(item.fieldName)] }}
          </template>
        </template>
      </el-table-column>
复制代码

2.11 分页组件也可以按照配置进行显示。

<el-pagination
      v-if="templateModel.model.listShowPage == 1"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100, 500]"
      :page-size="listQuery.limit"
      :total="total"
      @size-change="changeSize"
      @current-change="fetchPage"
      @prev-click="fetchPrev"
      @next-click="fetchNext"
    />
复制代码

2.12 遗留的问题之一列名资源化

列名资源化是个问题,因为如果让前端不介入的话,那资源化的工作需要完全放在后端,定义好资源文件后,前端通过接口获取资源并自动合并到资源化词典内。

2.13 遗留的问题之二,按钮自定义

增删改查可以按照通用的定义一套,如果需要扩展新的按钮,那么之前设计的模型需要增加按钮元数据,这块尚在设计中,有时间再分享。

3.小结

列表的自定义大致功能基本已经实现了,通过这几次的介绍,你有没有学会呢?

在低代码项目设计中,列表自定义设计和表单自定义设计一般是绕不过的槛,如果你有更好的想法,可以留言。

文章分类
前端
文章标签