global-web/src/views/BasicData/productCassification.vue

<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" :gutter="10">
    <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <a-tabs defaultActiveKey="user-info">
          <a-tab-pane tab="产品分类(Product Classification)" key="base-info" forceRender>
              <productCassificationTree @select="selectId" ref="treeListRef"/>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
    <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
      <a-card :bordered="false" style="height: 100%">
        <a-tabs defaultActiveKey="user-info">
          <a-tab-pane tab="分类列表(Classification List)" key="base-info" forceRender>
            <productCassification2 ref="classListRef" @success="addListSuccess"/>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup name="system-depart-user">
  import { provide, ref } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  import productCassificationTree from './productCassificationTree.vue';
  import productCassification2 from './productCassification1.vue';
  // import DepartUserInfoTab from './components/DepartUserInfoTab.vue';
  // import DepartRoleInfoTab from './components/DepartRoleInfoTab.vue';

  const { prefixCls } = useDesign('depart-user');
  provide('prefixCls', prefixCls);
  const classListRef = ref();
  const treeListRef = ref();
  // 左侧树选择后触发
  async function selectId(data) {
      await classListRef.value.getAppointRow(data)    
  }
  function addListSuccess(){
    treeListRef.value.loadDepartTreeData()    
  }
</script>

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