低代码平台的探索之路(二)——实战案例：使用低码资产重构UMC报告中心列表

Mothpro lv-3

写在最前面的话

今天接到这么一个需求：

  • 【UMC】报告中心单独抽取为一个工作站

经过详细了解，原来很简单，就是把已经开发好了的三个页面迁移到一个新个工作站（git源项目）去。

我们通过wg-cli脚手架用一条命令的方式灰常方便的创建了带有全新git源的工作站项目。

在这个时候，突然脑子里回想起了这么一段思考：

公司因为紧急赶项目的原因，有很多后端的同学也在进行前端的开发，因为前端基础相对薄弱，对这些同学来说，最大的痛苦莫过于前端的布局和各种样式的微调。

为了解决上面的问题，我们萌发了创建低代码平台WG-LCode的想法，而这个想法第一步推出的资产即blendPage

正好，在迁移的过程中，我们发现其中一个页面报告中心列表非常适合用blendPage页面去重构改造，从而达到更好的用户体验和后期可维护性。

为了更好的用户体验，也为了过来紧急支援前端的各位同学的开发体验，同时也为了咱们项目的健壮性，这里特意把这一次重构的过程记录的下来，供大家做参考，希望能用blendPage这个项目给同学们带来不一样的开发体验。

先来看看我们的重构成果

耗时

从git的提交记录，我们可以看出，在上一个任务完成以后，开始重构到完成并自测完成

整体重构耗时 < 60min

image.png

报告中心列表 - 原界面UI

image.png

报告中心列表 - 使用blendPage重构以后的UI

image.png

报告中心列表 - 原代码

image.png

ReportCenter.vue

<template>
  <div class="p16 height-100 flex flex-column">
    <!--表单 -->
    <wg-form :inline="true" :model="keyPageSize" label-width="100px">
      <div>
        <wg-el-form-item label="患者ID：">
          <wg-el-input class="width" v-model="keyPageSize.patientId" placeholder="患者ID"> </wg-el-input>
        </wg-el-form-item>
        <wg-el-form-item label="报告单号：">
          <wg-el-input class="width" v-model="keyPageSize.reportNo" placeholder="报告单号"> </wg-el-input>
        </wg-el-form-item>
        <wg-el-form-item label="开始时间：">
          <el-date-picker
            @click="getdatatime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
            v-model="keyPageSize.startTime"
            style="width: 172px"
          >
          </el-date-picker>
        </wg-el-form-item>

        <wg-el-form-item label="结束时间：">
          <el-date-picker
            @click="getNow"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
            v-model="keyPageSize.endTime"
            style="width: 172px"
          >
          </el-date-picker>
        </wg-el-form-item>

        <wg-el-form-item label="状态：">
          <wg-el-select class="width" v-model="keyPageSize.reportStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="A"></el-option>
            <el-option label="作废" value="D"></el-option>
            <el-option label="已打印" value="P"></el-option>
          </wg-el-select>
        </wg-el-form-item>
      </div>

      <div>
        <wg-el-form-item label="患者姓名：">
          <wg-el-input class="width" v-model="keyPageSize.patientName" placeholder="患者姓名"> </wg-el-input>
        </wg-el-form-item>

        <wg-el-form-item label="申请单号：">
          <wg-el-input class="width" v-model="keyPageSize.applyNo" placeholder="申请单号"> </wg-el-input>
        </wg-el-form-item>
        <wg-el-form-item label="发布系统：">
          <wg-el-input class="width" v-model="keyPageSize.publishSystemName" placeholder="发布系统"> </wg-el-input>
        </wg-el-form-item>

        <wg-el-form-item label="归属分类：">
          <wg-select
            class="width"
            v-model="keyPageSize.reportBelongType"
            :config="{ code: 'YB0089' }"
            placeholder="请选择"
          >
            <el-option label="全部" value=""></el-option>
          </wg-select>
        </wg-el-form-item>

        <wg-el-form-item label="分类：">
          <wg-select
            class="width"
            v-model="keyPageSize.reportClassStr"
            :config="{ code: 'YB0090' }"
            placeholder="请选择"
          ></wg-select>
        </wg-el-form-item>

        <wg-el-form-item>
          <wg-button primary @click="onSubmit" class="el-icon-search">查询</wg-button>
        </wg-el-form-item>
      </div>
    </wg-form>
    <!--  表格-->
    <wg-table height="600px" max-height="100%" :data="tableform" border stripe tooltip-effect="center">
      <wg-table-column prop="requestDate" label="请求时间" width="180"></wg-table-column>
      <wg-table-column prop="patientId" label="患者ID" width="90"></wg-table-column>
      <wg-table-column prop="patientName" label="患者姓名" width="100"></wg-table-column>
      <wg-table-column prop="printCount" label="次数" width="70"></wg-table-column>
      <wg-table-column prop="reportName" label="报告名称" width="180"></wg-table-column>
      <wg-table-column prop="reportNo" label="报告单号" width="180"></wg-table-column>
      <wg-table-column prop="applyNo" label="申请单号" width="180"></wg-table-column>
      <wg-table-column prop="reportClassStr" label="归属" width="90"></wg-table-column>
      <wg-table-column prop="reportType" label="类别" width="90"></wg-table-column>
      <wg-table-column prop="publishDate" label="报告时间" width="180" show-overflow-tooltip></wg-table-column>
      <wg-table-column prop="effectiveTime" label="生效时间" width="180" show-overflow-tooltip></wg-table-column>
      <wg-table-column prop="publishSystemName" label="发布系统" width="90"></wg-table-column>
      <wg-table-column prop="publishOrg" label="发布科室" width="90"></wg-table-column>
      <wg-table-column prop="areaCode" label="院区" width="100"></wg-table-column>
      <wg-table-column prop="imageNo" label="影像号" width="180"></wg-table-column>
      <wg-table-column prop="reportStatus" :formatter="reportStatusFormatter" label="状态" width="90">
      </wg-table-column>
      <wg-table-column prop="status" :formatter="statusFormatter" label="处理状态" width="90"> </wg-table-column>
      <wg-table-column prop="descn" label="备注"></wg-table-column>
      <wg-table-column label="报告预览" width="310" show-overflow-tooltip>
        <template slot-scope="scope">
          <a :href="scope.row.urlPrefix + '/' + scope.row.fileDir" target="_blank" class="buttonText">{{
            scope.row.fileName
          }}</a>
        </template>
      </wg-table-column>
    </wg-table>
    <!--    分页-->
    <div class="page _marginTop">
      <wg-pagination
        class="button_bar"
        :page="table.currentPage"
        :limit="keyPageSize.pageSize"
        :total="table.total"
        background
        layout="total, prev, pager, next, sizes, jumper"
        @pagination="pagination"
      >
      </wg-pagination>
    </div>
  </div>
</template>
<script>
import { repCenterApi } from '@api/index';

export default {
  data() {
    return {
      table: [],
      tableform: [],
      reportBelongType: [],
      urlStr: '',
      keyPageSize: {
        currentPage: 1,
        pageSize: 20,
        patientId: '',
        reportNo: '',
        reportStatus: '',
        patientName: '',
        applyNo: '',
        publishSystemName: '',
        reportClassStr: '',
        reportClass: '',
        createTime: '',
        printCount: 0,
        reportName: '',
        reportType: '',
        publishDate: '',
        effectiveTime: '',
        publishOrg: '',
        areaCode: '',
        imageNo: '',
        status: '',
        descn: '',
        fileDir: '',
        fileName: '',
        startTime: '',
        endTime: '',
        urlPrefix: '',
      },
    };
  },
  methods: {
    /**
     * 默认显示当前日期的前一天
     */
    getdatatime() {
      const start = new Date();
      const date = {
        year: start.getFullYear(),
        month: start.getMonth() + 1,
        date: start.getDate() - 2,
        hh: start.getHours(),
        // mf : start.getMinutes()<10 ? '0'+start.getMinutes() : start.getMinutes(),
        // ss : start.getSeconds()<10 ? '0'+start.getSeconds() : start.getSeconds(),
      };
      this.keyPageSize.startTime = date.year + '/' + date.month + '/' + date.date;
    },
    /**
     *默认显示当前时间
     */
    getNow() {
      const end = new Date();
      const date = {
        year: end.getFullYear(),
        month: end.getMonth() + 1,
        date: end.getDate(),
      };
      this.keyPageSize.endTime = date.year + '/' + date.month + '/' + date.date;
    },
    /**
     * 状态格式化
     */
    reportStatusFormatter(row) {
      const { reportStatus } = row;
      if (reportStatus === 'A') {
        return '正常';
      } else if (reportStatus === 'P') {
        return '已打印';
      } else if (reportStatus === 'D') {
        return '作废';
      } else {
        return '';
      }
    },
    /**
     * 处理状态格式化
     */
    statusFormatter(row) {
      const { status } = row;
      if (status === '1') {
        return '成功';
      } else if (status === '2') {
        return '失败';
      } else {
        return '';
      }
    },
    /**
     * 分页接口的实现
     */
    handleClickChange() {
      this.getPageList();
    },
    async getPageList() {
      this.keyPageSize.currentPage = 1;
      const res = await repCenterApi.logPageList(this.keyPageSize);
      this.tableform = res.data.records;
      this.table = res.data;
    },
    /**
     *查询参数输入模块 搜索按钮
     */
    async onSubmit() {
      this.keyPageSize.currentPage = 1;
      const res = await repCenterApi.logPageList(this.keyPageSize);
      this.tableform = res.data.records;
      this.table = res.data;
      console.log(this.tableform);
    },
    /**
     * 切换页面时触发方法
     */
    pagination(data) {
      const { page, limit } = data;
      // const page = data.page
      this.keyPageSize.currentPage = page;
      this.keyPageSize.pageSize = limit;
      this.getPageList();
    },
    /**
     * 调用归属分类编码接口
     */
    // async getFindReportType() {
    //   findReportType().then((res) => {
    //     this.reportBelongType = res.data;
    //     this.reportBelongType.push({
    //       reportBelongType: '',
    //       reportBelongTypeStr: '全部',
    //     });
    //     console.log('归属分类代码返回:', res.data);
    //   });
    // },
  },
  created() {
    // this.getFindReportType();
    this.getdatatime();
    this.getNow();
    this.onSubmit();
  },
};
</script>

<style scoped>
/*.button_bar{*/
/*  margin-left: 75%;*/
/*}*/
.width {
  width: 172px;
  height: 28px;
}

.page {
  text-align: right;
}
._marginTop {
  margin-top: 16px;
  margin-bottom: 16px;
}
.margin-right {
  width: 72px;
  height: 32px;
}
.right {
  text-align: right;
}
</style>

复制代码

报告中心列表 - 重构后代码

image.png

index.vue

<template>
  <wg-layout-new class="height-100">
    <wgBlendPage
      class="p12"
      ref="wgBlendPage"
      mode="base"
      :searchOption="searchOption"
      :searchs="searchs"
      :loading="loading"
      :request="request"
      :columns="columns"
      :showSelect="showSelect"
      :showIndex="showIndex"
      :columnsOption="columnsOption"
      :pageNum="pageNum"
      :pageSizes="[20, 40, 60, 80, 100]"
      @selection-change="handleSelectionChange"
    />
  </wg-layout-new>
</template>
<script>
import { repCenterApi } from '@/api/index';
import { isEmpty } from '@utils/validate';

export default {
  data() {
    return {
      pageNum: 40,
      loading: false,
      showSelect: false,
      showIndex: false,
      searchOption: {
        labelWidth: '75',
        resetRefresh: true,
      },
      searchs: [
        {
          label: '患者ID',
          placeholder: '患者ID',
          hasSelectAll: true,
          prop: 'patientId',
          tag: 'wg-el-input',
          // code: 'BCS0011',
        },
        {
          label: '报告单号',
          placeholder: '报告单号',
          prop: 'reportNo',
          tag: 'wg-el-input',
        },
        {
          label: '开始时间',
          placeholder: '选择日期',
          prop: 'startTime',
          valueFormat: 'yyyy/MM/dd',
          tag: 'wg-date-picker',
        },
        {
          label: '结束时间',
          placeholder: '选择日期',
          valueFormat: 'yyyy/MM/dd',
          prop: 'endTime',
          tag: 'wg-date-picker',
        },
        {
          label: '状态',
          prop: 'reportStatus',
          tag: 'wg-el-select',
          hasSelectAll: true,
          options: [
            { label: '正常', value: 'A' },
            { label: '作废', value: 'D' },
            { label: '已打印', value: 'P' },
          ],
          placeholder: '请选择',
          clearable: true,
        },
        {
          label: '患者姓名',
          placeholder: '患者姓名',
          prop: 'patientName',
          tag: 'wg-el-input',
        },
        {
          label: '申请单号',
          placeholder: '申请单号',
          prop: 'applyNo',
          tag: 'wg-el-input',
        },
        {
          label: '发布系统',
          placeholder: '发布系统',
          prop: 'publishSystemName',
          tag: 'wg-el-input',
        },
        {
          label: '归属分类',
          placeholder: '请选择',
          hasSelectAll: true,
          prop: 'reportBelongType',
          tag: 'codeSelect',
          code: 'YB0089',
        },
        {
          label: '分类',
          placeholder: '请选择',
          prop: 'reportClassStr',
          tag: 'codeSelect',
          code: 'YB0090',
        },
      ],
      columnsOption: {
        fixed: 'false',
        noRemove: true, // 操作列不显示删除按钮，同理还有noEdit
        noEdit: true,
        // switchKey: 'isEnable', // 表头的操作列，switchKey 为操作列中的开关按钮对应的colums值，一般用于有效标志：启用、停用
      },
      columns: [
        { prop: 'requestDate', label: '请求时间', 'show-overflow-tooltip': true, width: '180' },
        { prop: 'patientId', label: '患者ID', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'patientName', label: '次数', 'show-overflow-tooltip': true, width: '70' },
        { prop: 'reportName', label: '报告名称', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'reportNo', label: '报告单号', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'applyNo', label: '申请单号', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'reportClassStr', label: '归属', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'reportType', label: '类别', 'show-overflow-tooltip': true, Width: '90' },
        { prop: 'publishDate', label: '报告时间', 'show-overflow-tooltip': true, minWidth: '150' },
        { prop: 'effectiveTime', label: '生效时间', 'show-overflow-tooltip': true, width: '150' },
        { prop: 'publishSystemName', label: '发布系统', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'publishOrg', label: '发布科室', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'areaCode', label: '院区', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'imageNo', label: '影像号', 'show-overflow-tooltip': true, width: '120' },
        {
          prop: 'reportStatus',
          label: '状态',
          'show-overflow-tooltip': true,
          width: '90',
          render: (props) => {
            const { reportStatus } = props.row;
            let status = '';
            switch (reportStatus) {
              case 'A':
                status = '正常';
                break;
              case 'P':
                status = '已打印';
                break;
              case 'D':
                status = '作废';
                break;
              default:
                break;
            }
            return status;
          },
        },
        {
          prop: 'status',
          label: '处理状态',
          'show-overflow-tooltip': true,
          width: '90',
          render: (props) => {
            const { status } = props.row;
            let t = '';
            switch (status) {
              case '1':
                t = '成功';
                break;
              case '2':
                t = '失败';
                break;
              default:
                break;
            }
            return t;
          },
        },
        { prop: 'descn', label: '备注', 'show-overflow-tooltip': true, minWidth: '90' },
        {
          prop: '',
          label: '报告预览',
          'show-overflow-tooltip': true,
          minWidth: '310',
          render: (props) => {
            const { row } = props;
            const href = row.urlPrefix + '/' + row.fileDir;
            return (
              <a href={href} target="_blank" className="buttonText">
                {row.fileName}
              </a>
            );
          },
        },
      ],
    };
  },
  methods: {
    request(params, sorter, filter) {
      return repCenterApi.logPageList({
        ...params,
      });
    },
    handleSelectionChange(rows) {
      console.log('rows:', rows);
    },
    // 刷新当前blendPage
    onwerRefresh() {
      this.$message.success('操作成功');
      this.$refs.wgBlendPage.refresh();
    },
  },
};
</script>

<style lang="less" scoped>
// @import './userMng.less';
</style>

复制代码

Step1：新建页面并使用blendPage组件

<template>
  <wg-layout-new class="height-100">
    <wgBlendPage
      class="p12"
      ref="wgBlendPage"
      mode="base"
    />
  </wg-layout-new>
</template>
复制代码

首先，我们为blendPage添加了样式p12，

该样式的效果是为页面设置上下12px，左右16px的标准页面外边距，因为blendPage自身是不会添加任何边距效果的。

注意mode属性，blendPage会根据mode的属性值渲染出不同样式和布局的页面

详见blendPage关于mode的属性说明：

Mode

名称说明详细文档
base基础页面，支持单表格单行查询，单表格多行查询，单表格多行查询+表按钮操作说明
tree基础树页面，上查询，下树说明

如果没有出现意外的话，你会得到这么一个界面：

image.png

index.vue?6ced:82 Uncaught (in promise) TypeError: _this.request is not a function

有报错很正常，不要着急，根据报错我们添加request属性和相对应的方法。

Step2：为页面添加网络请求requset属性

<template>
  <wg-layout-new class="height-100">
    <wgBlendPage
      class="p12"
      ref="wgBlendPage"
      mode="base"
      :request="request"
    />
  </wg-layout-new>
</template>
<script>
import { repCenterApi } from '@/api/index';
import { isEmpty } from '@utils/validate';

export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    request(params, sorter, filter) {
      return repCenterApi.logPageList({
        ...params,
      });
    },
  },
};
</script>
复制代码

image.png

从上图我们可以看出，这个时候blendPage已经自动请求了request属性传递过去的网络接口，而且接口也有正常的返回值，但是还是没有数据是什么原因呢？

当然是你没有传递columns属性啦！

Attributes

参数说明类型可选值默认值
columns表格列的配置信息，用于表格内容的展示Arraycolumns-
request接口请求方法，页面的表格渲染，搜索，翻页，都依赖于该方法Function，Perm

columns

名称说明类型可选值默认值
render表格单元格的自定义渲染方式，传入格式为jsxJSX--
tagtag或者是render2选一，如果tag命中了，不会继续执行render，因为内部的tag预设了render方法StringcolumnsTag-
更多选项支持wgTable组件columns的所有属性---

Step3：设置columns属性

<template>
  <wg-layout-new class="height-100">
    <wgBlendPage
      class="p12"
      ref="wgBlendPage"
      mode="base"
      :request="request"
      :columns="columns"
    />
  </wg-layout-new>
</template>
<script>
import { repCenterApi } from '@/api/index';
import { isEmpty } from '@utils/validate';

export default {
  data() {
    return {
      columns: [
        { prop: 'requestDate', label: '请求时间', 'show-overflow-tooltip': true, width: '180' },
        { prop: 'patientId', label: '患者ID', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'patientName', label: '次数', 'show-overflow-tooltip': true, width: '70' },
        { prop: 'reportName', label: '报告名称', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'reportNo', label: '报告单号', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'applyNo', label: '申请单号', 'show-overflow-tooltip': true, minWidth: '180' },
        { prop: 'reportClassStr', label: '归属', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'reportType', label: '类别', 'show-overflow-tooltip': true, Width: '90' },
        { prop: 'publishDate', label: '报告时间', 'show-overflow-tooltip': true, minWidth: '150' },
        { prop: 'effectiveTime', label: '生效时间', 'show-overflow-tooltip': true, width: '150' },
        { prop: 'publishSystemName', label: '发布系统', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'publishOrg', label: '发布科室', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'areaCode', label: '院区', 'show-overflow-tooltip': true, width: '90' },
        { prop: 'imageNo', label: '影像号', 'show-overflow-tooltip': true, width: '120' },
        {
          prop: 'reportStatus',
          label: '状态',
          'show-overflow-tooltip': true,
          width: '90',
          render: (props) => {
            const { reportStatus } = props.row;
            let status = '';
            switch (reportStatus) {
              case 'A':
                status = '正常';
                break;
              case 'P':
                status = '已打印';
                break;
              case 'D':
                status = '作废';
                break;
              default:
                break;
            }
            return status;
          },
        },
        {
          prop: 'status',
          label: '处理状态',
          'show-overflow-tooltip': true,
          width: '90',
          render: (props) => {
            const { status } = props.row;
            let t = '';
            switch (status) {
              case '1':
                t = '成功';
                break;
              case '2':
                t = '失败';
                break;
              default:
                break;
            }
            return t;
          },
        },
        { prop: 'descn', label: '备注', 'show-overflow-tooltip': true, minWidth: '90' },
        {
          prop: '',
          label: '报告预览',
          'show-overflow-tooltip': true,
          minWidth: '310',
          render: (props) => {
            const { row } = props;
            const href = row.urlPrefix + '/' + row.fileDir;
            return (
              <a href={href} target="_blank" className="buttonText">
                {row.fileName}
              </a>
            );
          },
        },
      ],
    };
  },
  methods: {
    request(params, sorter, filter) {
      return repCenterApi.logPageList({
        ...params,
      });
    },
  },
};
</script>
复制代码

image.png

通过设置columns属性以后，表格已经能够成功渲染出我们所想要的表头了，因为这里接口没有返回数据的关系，所以我们忽略掉暂无数据的提示，这是正常的现象。

如果接口能够正常返回出我们想要的data数据，我们就能得到我们需要的表格了。

比如：

image.png

Step4： 添加搜索区域searchs和searchOption属性

<template>
  <wg-layout-new class="height-100">
    <wgBlendPage
      class="p12"
      ref="wgBlendPage"
      mode="base"
      :request="request"
      :columns="columns"
      :searchs="searchs"
      :searchOption="searchOption"
    />
  </wg-layout-new>
</template>
<script>
import { repCenterApi } from '@/api/index';
import { isEmpty } from '@utils/validate';

export default {
  data() {
    return {
      searchOption: {
        labelWidth: '75',
        resetRefresh: true,
      },
      searchs: [
        {
          label: '患者ID',
          placeholder: '患者ID',
          hasSelectAll: true,
          prop: 'patientId',
          tag: 'wg-el-input',
          // code: 'BCS0011',
        },
        {
          label: '报告单号',
          placeholder: '报告单号',
          prop: 'reportNo',
          tag: 'wg-el-input',
        },
        {
          label: '开始时间',
          placeholder: '选择日期',
          prop: 'startTime',
          valueFormat: 'yyyy/MM/dd',
          tag: 'wg-date-picker',
        },
        {
          label: '结束时间',
          placeholder: '选择日期',
          valueFormat: 'yyyy/MM/dd',
          prop: 'endTime',
          tag: 'wg-date-picker',
        },
        {
          label: '状态',
          prop: 'reportStatus',
          tag: 'wg-el-select',
          hasSelectAll: true,
          options: [
            { label: '正常', value: 'A' },
            { label: '作废', value: 'D' },
            { label: '已打印', value: 'P' },
          ],
          placeholder: '请选择',
          clearable: true,
        },
        {
          label: '患者姓名',
          placeholder: '患者姓名',
          prop: 'patientName',
          tag: 'wg-el-input',
        },
        {
          label: '申请单号',
          placeholder: '申请单号',
          prop: 'applyNo',
          tag: 'wg-el-input',
        },
        {
          label: '发布系统',
          placeholder: '发布系统',
          prop: 'publishSystemName',
          tag: 'wg-el-input',
        },
        {
          label: '归属分类',
          placeholder: '请选择',
          hasSelectAll: true,
          prop: 'reportBelongType',
          tag: 'codeSelect',
          code: 'YB0089',
        },
        {
          label: '分类',
          placeholder: '请选择',
          prop: 'reportClassStr',
          tag: 'codeSelect',
          code: 'YB0090',
        },
      ],
    };
  },
  methods: {
    request(params, sorter, filter) {
      return repCenterApi.logPageList({
        ...params,
      });
    },
  },
};
</script>
复制代码

image.png

通过配置searchs和searchOption两个属性，我们成功渲染出了我们所需要的所有搜索项目

并且searchBar自带查询和重置两个操作按钮

在blendPage中，我们不需要关心查询和重置的触发事件是什么，还记得你在Step2：为页面添加网络请求requset属性中设置的requset属性吗？

blendPage在触发搜索查询或者是搜索查询重置的动作后，会自动把searchs属性列请求的字段带在请求体中，并向requset发起请求。

其中，searchs列表中每一项的prop非常关键，它是接口请求所需要的参数key值。

prop: 搜索项的关键key，触发搜索查询的时候，会把prop对应的键值回传出来，并且也是rules校验规则的适配key

Attributes

参数说明类型可选值默认值
searchOption搜索区域SearchBar的配置项ObjectsearchOption-
searchs搜索区域的搜索项目配置Arraysearch-

searchOption

名称说明
labelWidthSearchBar下全局的label宽度，支持String和Nubmer，用法同Form组件的labelWidth
rulesSeachBar的校验规则集合，用法同Form组件的rules
resetRefresh点击重置按钮，是否要刷新页面，默认为false
noeLine当wbBlendPage为simple模式的时候， searchBar也会变为simple模式（不带查询、重置操作按钮，不会被form表单包裹），默认search区域会带底部分割线，该参数指定不显示底部分割线

search

名称说明类型可选值默认值
labelitem的名称，默认会自带中文：，传入英文冒号或者中文冒号会自动替换String--
prop搜索项的关键key，触发搜索查询的时候，会把prop对应的键值回传出来，并且也是rules校验规则的适配keyString--
tag搜索项的显示形式，默认是input，会默认渲染出输入框，支持渲染的组件查看可选值StringSearchTaginput
longersearchBar默认采用24格layout，兼容1440小屏模式和1980大屏模式，小屏模式下span值为4，大屏模式下span值为3，开启longer后，搜索项所占空间为2倍的span值Boolean-false
labelWidth　单独指定该项搜索的label长度，优先级高于searchOption的labelWidthString--
options用于组件组合的配置项，比如radio，checkbox，支持属性透传Arrar[{itemLabel:'', itemValue:'', disabled: false}]-
更多选项除了以上列出来的属性之外，支持对于tag下所有的属性透传，比如如果tag是input，支持wg-el-input的所有属性，具体查看对应组件的属性说明文档

总结

到此，我们的报告中心页面重构已经全部完成啦！

我们设计的低码平台第一资产————blendPage当然支持更多的属性和更多的配置项，它的功能远远不止这些本次我们所展现的这些。

但是，这真的是一次最最基础的实战应用啦！

我们希望通过blendPage能够让不熟悉前端领域并且对前端布局和模糊不清的交互苦恨仇深的同学释放天性，

通过blendPage，你完全不用去管页面的布局和样式，更不需要关心页面有哪些交互需要如何去实现，因为在blendPage里面，你所能想到的，它都已经实现好啦，你只需要传递相应的配置进去就行了。

而所有的event行动点，我们都会通过回调的方式把你所需要的关键字段信息，比如行号传递给你。

让你更专注于业务功能的实现和交互逻辑的编写。

而我上面所介绍的这些，我们已经在blendPage中全部实现好啦，想要我们埋下的宝藏吗？

去挖掘吧：传送门

分类：
前端
标签：
前端
相关推荐
  • Mothpro
    11月前
    前端
    低代码平台的探索之路(二)——实战案例：使用低码资产重构UMC报告中心列表
    写在最前面的话 今天接到这么一个需求： 【UMC】报告中心单独抽取为一个工作站 经过详细了解，原来很简单，就是把已经开发好了的三个页面迁移到一个新个工作站（git源项目）去。 我们通过wg-cli脚手
    • 297
    • 评论

    • 友情链接：

    全栈打杂 @ 才华有限公司
    私信
    获得点赞  61
    文章被阅读  7,966
    相关文章
    手把手教你实现自己的requset🌊，先来了解一下ajax、axios 和 fetch
    14点赞
     · 
    6评论
    同事偷偷git commit导致分支被污染怎么办？
    6点赞
     · 
    4评论
    我们来更好的使用Vuex吧 - Vuex交互规范
    1点赞
     · 
    0评论
    centOS一次版本升级事故记录和复盘
    2点赞
     · 
    1评论
    前端错误与异常数据上报 - WGTracker
    3点赞
     · 
    0评论