vue管理人页面以及详情页

最新推荐文章于 2025-05-26 22:00:00 发布

原创最新推荐文章于 2025-05-26 22:00:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客详细介绍了使用Vue.js构建fund-manager-header和manager-menu组件的过程，包括组件间的通信、事件监听、数据传递以及接口调用。组件通过props从父组件接收配置信息，并利用计算属性和方法处理数据。例如，manager-menu组件通过ref引用调用子组件的方法，同时实现了表格双击事件触发详情页跳转。fund-manager-header组件则引入biz-header并传递业务类型和ID。

fund-manager-header.vue

manager-menu.vue

<template lang="pug">                         --组件的模板结构,采用pug语法
.manager-menu                                 --页面名称
  op-query-header.manager-menu__query-header(--引入query-header组件到manager-menu的请求头
    slot='search',                           --定义slot属性，直接赋值   
    :config='headerConfig',                  --定义config属性，下面需要为headerConfig赋值
    @search='doQuery',                       --定义search事件为doQuery
    ref='queryHeader',   --定义别名为queryHeader,可以调用query-header的所有属性和方法
    @click-add='add'                       --定义点击事件新增
  )
  op-grid-table(ref='fundManagerTable', :config='tableConfig')  
    --引入列表组件，别名为fundManagerTable，定义config属性，在下面需要为tableConfig赋值
  op-biz-block-form-dialog(            --引入form表单
    ref='BizBlockFormDialog',     --定义biz-block-form-dialog的别名为BizBlockFormDialog
    :block-id='blockId',          --定义block-id属性，下面需要为blockId赋值
    biz-type='FUND_MANAGER',      --定义biz-type属性，直接赋值
    :hidden-data='hiddenData',    --定义隐藏参数属性，下面需要为hiddenData赋值
    @success='onSuccess'          --定义success点击事件
  )
</template>

<script>
import magicButtonConfigHelper from '@/components/buttons/utils/magic-button-config-helper';              --引入magicButtonConfigHelper，为button参数进行转换
export default {      --出口默认值
  name: 'manager-menu',    --命名
  props: {                 --子组件获取父组件属性和方法的唯一出口
    menuMeta: {            --定义一个变量，获取父组件的属性
      type: Object,
      default: () => ({}),
    },
    buttons: {            --定义一个变量，获取父组件的属性
      type: Array,
      default: () => [],
    },
  },
  data() {                --参数
    return {
      tableConfig: {      --为template中grid-table定义的config赋值
        url: '/fund/manager/page',    --后台接口
        listeners: {                  --定义一个监听器
          // 双击事件
          'row-dblclick': (row) => this.toDetail(row),   --双击事件，启动详情页
        },
        columns: this.menuMeta.columns,    --为columns赋值，从menuMeta中获取
        pagination: true,                  
        pageNumber: 1,
        queryParams: {},                   --定义参数queryParams，接收参数
        pageList: [20, 50, 100, 200],
      },
      blockId: this.menuMeta.blockId,      --为blockId赋值，从menuMeta中获取
      hiddenData: this.menuMeta.hiddenData, --为hiddenData赋值，从menuMeta中获取
    };
  },
  computed: {                            --计算函数
    headerConfig() {                    --定义headerConfig方法
      return {
        filters: this.menuMeta.queryHeader?.filters ?? [],
        buttons: magicButtonConfigHelper(this.buttons),
      };
    },
  },
  methods: {                               --方法
    onSuccess() {
      this.$refs.fundManagerTable.reload();
    },
    add() {                      
  --因为上面通过ref定义了组件的别名，新增可以通过this.$refs直接调用别名对应组件里的所有方法
      this.$refs.BizBlockFormDialog.open({});
    },
    doQuery(query) {
      this.tableConfig.queryParams = Object.assign(  --？？？？？？
        {},
        this.tableConfig.queryParams,
        query
      );
      this.$refs.fundManagerTable.reload();
    },
    toDetail(row) {        --$http里面封装了ajax
      this.$http.jumpDetail('FUND_MANAGER', row.managerId); 
    },
  },
};
</script>

<style lang="scss" scoped>
.manager-menu {      --为整个manager-menu进行css渲染
  padding: var(--gutter);
  &__query-header {
    padding-bottom: var(--gutter);
  }
  &__grid {         --为grid-table进行修饰渲染
    &::v-deep .search-grid__header {   --grid-table的header部分
      padding: var(--gutter) 0;
    }
    &::v-deep .search-grid__body {     --grid-table的body部分
      .search-grid__body-content {
        margin: 0;
      }
    }
  }
}
</style>

fund-manager-header.vue

<template lang='pug'>
.fund-manager-header
  biz-header(   --？？？
    ref='bizHeader',
    :biz-type='bizType',
    :biz-id='bizId',
    :info-config='meta'
  )
</template>

<script>
import BizHeader from '@/components/block/biz-header';
export default {
  name: 'fund-manager-header',
  components: {
    BizHeader,
  },
  props: {
    meta: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    bizId() {
      return this.$route.query.bizId;
    },
    bizType() {
      return this.$route.query.bizType;
    },
  },
};
</script>