仿真字体 数量提示 箭头缝隙

wente

2024-10-28 3b3521961c246eda35cde1fde685e3931f8af529

 web/src/views/modules/basicInfo/ProductModelTree.vue

@@ -1,109 +1,157 @@
<template>
  <div class="product-tree-container">
    <el-input
      placeholder="输入名称进行过滤"
      style="width: 60%"
      v-model="filterText"
      size="small"
      clearable
    ></el-input>
    <el-button 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"
      class="filter-tree"
      :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"
      :filter-node-method="filterNode"
      ref="tree"
    ></el-tree>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update @refreshDataList="getProductList()" ref="AddOrUpdate"/>
  </div>
    <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" size="mini" @click="add()"
                   style="margin: 10px 0 0 7px;padding: 8px 17px !important;">新增型号
        </el-button>
        <el-button v-if="isShow" type="primary" size="mini" @click="updateXh()"
                   style="margin: 10px 0 0 7px;padding: 8px 17px !important;">修改型号
        </el-button>
        <el-button v-if="isShow" type="primary" size="mini" @click="deleteXh()"
                   style="margin: 10px 0 0 7px;padding: 8px 17px !important;">删除型号
        </el-button>
        <el-divider></el-divider>
        <el-tree
                style="height: 90%;overflow: auto"
                class="filter-tree"
                :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"
                :filter-node-method="filterNode"
                ref="tree"
        ></el-tree>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="getProductList()" ref="AddOrUpdate"/>
    </div>
</template>
<script>
  import AddOrUpdate from './XhProductModel-AddOrUpdate'
    import AddOrUpdate from './XhProductModel-AddOrUpdate'

  export default {
    name: 'ProductModelTree',
    props: {
      showXdy: {
        type: Boolean,
        default: true
      },
      basic: {
        type: Number,
        default: 1
      },
    },
    export default {
        name: 'ProductModelTree',
        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: [],
        defaultId: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        data() {
            return {
                filterText: '',
                productList: [],
                defaultId: '',
                id: '',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        }
      }
    }
    ,
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    }
    ,
    components: {
      AddOrUpdate
    }
    ,
    mounted() {
      this.getProductList()
    },
    methods: {
      // 获取系统列表
      async getProductList() {
        let params = {
          showXdy: this.showXdy,
          ztShow: this.basic
        ,
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            }
        }
        let res = await this.$http.get('/basicInfo/XhProductModel/tree', {params: params})
        this.productList = res.data
        if (this.basic) {
          if (this.productList && this.productList[0].children) {
            this.defaultId = this.productList[0].children[0].id
            console.log(this.defaultId, 'this.defaultID')
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
            });
            this.$emit('on-default', this.defaultId)
          }
        ,
        components: {
            AddOrUpdate
        }
        console.log(res.data, 'async getProductList()')
      },
      add() {
        this.$refs.AddOrUpdate.$refs.dialog.init(null, {id: null, type: 'xh'})
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      handleNodeClick(data) {
        this.$emit('on-selected', data)
      },
        ,
        /* mounted() {
           this.getProductList()
         },*/
        methods: {
            // 获取系统列表
            async getProductList() {
                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: 'xh'})
            },
            updateXh() {
                this.$refs.AddOrUpdate.$refs.dialog.init(this.id, {id: null, type: 'xh'})
            },
            async deleteXh() {
                if (this.id) {
                    this.$tip.alert(this.$t('prompt.deleteBatch'))
                    if (await this.$tip.confirm(this.$t('', {'handle': this.$t('delete')}))) {
                        let res = await this.$http.delete(
                            '/basicInfo/XhProductModel/',
                            {
                                'data': [this.id]
                            }
                        )
                        if (res.success) {
                            await this.$tip.success()
                            await this.getProductList()
                        }
                    }
                } else {
                    this.$tip.alert('未选择型号')
                }
            },
            filterNode(value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
            handleNodeClick(data) {
                this.id = data.id
                this.$emit('on-selected', data)
            },
        }
    }
  }
</script>
<style>
  .product-tree-container {
    height: 100%;
  }
    .product-tree-container {
        height: 100%;
    }
</style>