kd-aiot-frontend-wms/src/views/warehouseManagement/stockLedger/index.vue

<template>
  <div id="stockLedger__index">
    <el-card shadow="never">
      <ele-split-layout
        width="256px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="el-tree_box">
          <div class="tabs_box">
            <el-radio-group v-model="currentTab" @change="tabsChange">
              <el-radio-button label="products">分类维度</el-radio-button>
              <el-radio-button label="warehouse">仓库维度</el-radio-button>
            </el-radio-group>
          </div>
          <div class="ele-border-lighter sys-organization-list">
            <!-- <asset-tree
              @handleNodeClick="onNodeClick"
              ref="commonTree"
              :treeFormate="
                (list) => {
                  return [
                    {
                      children: list,
                      id: '0',
                      level: 0,
                      name: '库存台账',
                      originId: null,
                      originType: {},
                      parentId: null,
                      type: '',
                      weight: 0
                    }
                  ];
                }
              "
            /> -->
            <el-tree
              :data="treeList"
              :props="defaultProps"
              ref="treeRef"
              :default-expanded-keys="current && current.id ? [current.id] : []"
              :highlight-current="true"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              ><span class="custom-tree-node" slot-scope="{ node, data }">
                <span
                  >{{ data.factoryName ? data.factoryName + '-' : ''
                  }}{{ data.name }}</span
                >
              </span></el-tree
            >
          </div>
        </div>
        <template v-slot:content>
          <item-list ref="listRef" :current="current" :type="currentTab" />
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import itemList from './components/item-list';
  import AssetTree from '@/components/AssetTree';
  import { getTreeByGroup } from '@/api/classifyManage';
  import storageApi from '@/api/warehouseManagement';
  export default {
    components: { itemList, AssetTree },
    data() {
      return {
        currentTab: 'products',
        treeData: [],
        current: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currentId: '',
        treeList: [],
        treeLoading: false,
        cacheKeyUrl: 'eos-439decaa-warehouseManagement-stockLedger-products2'
      };
    },
    async created() {
      this.getTreeData();
    },
    methods: {
      tabsChange(val) {
        this.currentTab = val;
        this.getTreeData();
        
        // //切换左侧维度,获取服务列表配置
        if (val === 'products') {
          this.cacheKeyUrl= "eos-439decaa-warehouseManagement-stockLedger-products2"
        } else if (val === 'warehouse') {
          this.cacheKeyUrl= "eos-439decaa-warehouseManagement-stockLedger-warehouse"
        }

        this.$refs.listRef.getTabColumns(this.cacheKeyUrl)
      },
      async getTreeData() {
        try {
          this.treeLoading = true;
          let res = null;
          if (this.currentTab === 'warehouse') {
            res = await storageApi.getWarehouseTrees();
          } else {
            res = await getTreeByGroup({ type: 2 });
          }
          this.treeLoading = false;
          if (res?.code === '0') {
            this.treeList = res.data;
            // this.$nextTick(() => {
            //   // 默认高亮第一级树节点
            //   if (this.treeList[0]) {
            //     this.$refs.treeRef.setCurrentKey(this.treeList[0].id);
            //     this.current = this.treeList[0];
            //   }
            // });
            return this.treeList;
          }
        } catch (error) {
          console.log(error);
        }
        this.treeLoading = false;
      },
      handleNodeClick(data, node) {
        if (data.id == this.currentId) {
          this.$refs.treeRef.setCurrentKey(null);
          this.currentId = '';
          this.current = {};
          this.$refs.listRef.reload();
        } else {
          this.currentId = data.id;
          this.current = node;
        }
      },
      openEdit() {
        const data = this.$refs.commonTree.getSelectList();
        if (data?.id) {
          let node = this.$refs.commonTree.getInstance().getNode(data.id);
          const urlIdList = [data.id];
          while (node.parent?.data?.id) {
            urlIdList.unshift(node.parent?.data?.id);
            node = node.parent;
          }
          data.urlIdList = urlIdList.filter((i) => i !== '0');
        }
        this.$router.push({
          path: '/classifyManage/itemInformation/add',
          query: {
            pageTitle: '新建物品',
            selectNode: JSON.stringify(data)
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  #stockLedger__index {
    padding: 6px;
    .el-tree_box {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .tabs_box {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin-bottom: 3px;
      width: 100%;
      > div {
        width: 100%;
        display: flex;
        :deep(.el-radio-button) {
          flex: 1;
          .el-radio-button__inner {
            width: 100%;
          }
        }
      }
    }
    .sys-organization-list {
      height: calc(100vh - 185px);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      overflow: auto;
    }

    .sys-organization-list :deep(.el-tree-node__content) {
      height: 40px;

      & > .el-tree-node__expand-icon {
        margin-left: 10px;
      }
    }
  }
</style>