内控开发第一周

2019-04-01  本文已影响0人  谁还不是个小仙女似的

本周重构了后台管理的某些功能,其中包括后台框架,系统配置的交通工具,人员级别,以及实现了选择iconfont图标库图标的组件

1.后台框架

使用ivew的tree组件实现单位的选择

使用mixin的方式封装了一个计算树结构的函数

// 从Vuex中获取的当前用户可操作组织树注入
export default {
  computed: {
    orgTreeX() {
      let orgTree = _.cloneDeep(this.$store.state.orgTree);
      treeHelper.fixProperties(orgTree, [
        treeNode => {
          treeNode.title = treeNode.name
        }
      ]);
      return orgTree;
    }}
//获取树结构
<Tree :data="orgTreeX" @on-select-change="handleSelectChange"></Tree>

 // 处理树选中事件
      handleSelectChange(selections, data) {
        // 关闭弹出层
        this.$refs.popTip.visible = false;
        // 发送请求,通知后端切换组织
        api.organization.switchCurrentOrganization({id: data.id}, res => {
          tips.notice1('成功', '成功切换当前组织')
        });
        // 更新Vuex,将当前组织进行刷新
        this.$store.commit('init', {key: 'org', value: data})
      },
使用Menu组件时的路由跳转
//template
 <Menu
      mode="vertical"
      ref="side_menu"
      :active-name="activeName"
      @on-select="chooseContact"
      :open-names="initialActiveSubMenu"
    >
//script
         this.activeName = this.menuList[0].url.toString();
          this.initialActiveSubMenu.push(this.menuList[0].code);
          this.$router.push(this.menuList[0].url);
          this.$nextTick(() => {
            this.$refs.side_menu.updateOpened();
            this.$refs.side_menu.updateActiveName();
          })

2.复选框列表

table组件点击非checkbox之外的区域选中
//点击某一行触发的函数
 handleRowClick(row, index) {
        this.$refs.personFradeTable.toggleSelect(index)
      }
上一篇 下一篇

猜你喜欢

热点阅读