kd-aiot-frontend-eom/src/BIZComponents/selectStockLedger/selectStockLedgerDialog1.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible="selectStockLedgerDialogFLag"
    title="库存台账"
    append-to-body
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <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>
  </ele-modal>
</template>

<script>
  import itemList from './item-list';
  import AssetTree from '@/components/AssetTree';
  import { getWarehouseTrees } from '@/api/wms';

  export default {
    components: { itemList, AssetTree },
    props: {
      selectStockLedgerDialogFLag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        currentTab: 'products',
        treeData: [],
        current: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currentId: '',
        treeList: [],
        treeLoading: false
      };
    },

    methods: {
      open() {
        this.getTreeData();
      },
      async getTreeData() {
        try {
          this.treeLoading = true;
          let res = null;
          res = await getWarehouseTrees();
          this.treeLoading = false;
          if (res?.code === '0') {
            this.treeList = res.data;
            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;
        }
      },
      cancel() {
        this.$emit('update:selectStockLedgerDialogFLag', false);
      }
    }
  };
</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>