xyc
2024-08-02 ea744c63bf10f14fe5a51addf37083c384093e21
web/src/views/modules/basicInfo/ProductModelTree.vue
@@ -1,13 +1,15 @@
<template>
  <div class="product-tree-container " :style="'height:' + tree_Hei +'px'">
    <el-input
      placeholder="输入名称进行过滤"
      style="width: 80%"
      v-model="filterText"
      size="small"
      clearable
    ></el-input>
    <el-button type="primary" @click="add()" style="margin-top: 10px">新增</el-button>
  <div class="product-tree-container">
    <!-- <el-input
       placeholder="输入名称进行过滤"
       style="width: 60%"
       v-model="filterText"
       size="small"
       clearable
     ></el-input>-->
    <el-button v-if="isShow" type="primary" @click="add()"
               style="margin: 10px 0 0 10px;padding: 9px 18px !important;">新增型号
    </el-button>
    <el-divider></el-divider>
    <el-tree
      style="height: 90%;overflow: auto"
@@ -15,6 +17,8 @@
      :data="productList"
      :props="defaultProps"
      default-expand-all
      node-key="id"
      :current-node-key="defaultId"
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="handleNodeClick"
@@ -30,38 +34,81 @@
  export default {
    name: 'ProductModelTree',
    props: {},
    props: {
      showXdy: {
        type: Boolean,
        default: true
      },
      isShow: {
        type: Boolean,
        default: true
      },
      basic: {
        type: Number,
        default: 1
      },
      productId: {
        type: Number,
        default: null
      },
    },
    data() {
      return {
        filterText: '',
        productList: [],
        tree_Hei: document.documentElement.clientHeight - 200,
        defaultId: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    }
    ,
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    }
    ,
    components: {
      AddOrUpdate
    },
    mounted() {
      this.getProductList()
    },
    }
    ,
    /* mounted() {
       this.getProductList()
     },*/
    methods: {
      // 获取系统列表
      async getProductList() {
        let res = await this.$http.get('/basicInfo/XhProductModel/tree')
        let params = {
          showXdy: this.showXdy,
          ztShow: this.basic,
          productId: this.productId
        }
        let res = await this.$http.get('/basicInfo/XhProductModel/tree', {params: params})
        this.productList = res.data
        if (this.basic === '3') {
          if (this.productList && this.productList[0].children) {
            this.defaultId = this.productList[0].children[0].id
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
            });
            this.$emit('on-default', this.defaultId)
          }
        } else{
          if (this.productList[0].id) {
            this.defaultId = this.productList[0].id
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
            });
            this.$emit('on-default', this.defaultId)
          }
        }
        console.log(res.data, 'async getProductList()')
      },
      add() {
        this.$refs.AddOrUpdate.$refs.dialog.init(null,{id: null, type: 'tree'})
        this.$refs.AddOrUpdate.$refs.dialog.init(null, {id: null, type: 'xh'})
      },
      filterNode(value, data) {
        if (!value) return true
@@ -69,7 +116,12 @@
      },
      handleNodeClick(data) {
        this.$emit('on-selected', data)
      }
      },
    }
  }
</script>
<style>
  .product-tree-container {
    height: 100%;
  }
</style>