yos_web/src/HDrpManagement/ProductMag/modules/addClass.vue

<template>
  <div>
    <el-button type="primary" size="small" @click="dialogFormVisible=true" >{{$t(`设置分类`)}}</el-button>
    <el-dialog append-to-body :title="$t(`设置分类`)" :visible.sync="dialogFormVisible" width="900px">
      <el-input style="width:200px;" :placeholder="$t('搜索')" :suffix-icon="condition?condition.length > 0?'':'':'el-icon-search'" v-model="condition" @keyup.native.enter="getClassList()" @clear="getClassList" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
      </el-input>
      <el-table
        :data="classList"
        stripe
        row-key="itemclassid"
        size="small"
        height="500px"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column width="100">
        </el-table-column>
        <el-table-column
            prop="itemclassnum"
            :label="$t(`分类编号`)">
        </el-table-column>
        <el-table-column
          prop="itemclassname"
          :label="$t(`分类名称`)">
        </el-table-column>
        <el-table-column
          :label="$t('操作')"
          width="50">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="scope.row.disabled" @click="onSubmit(scope.row)">{{$t('添 加')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
        <!-- <el-tree
          ref="tree"
          :data="classList"
          show-checkbox
          node-key="itemclassid"
          :default-expand-all="true"
          :default-checked-keys="data.checkArr">
        </el-tree> -->
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible=false" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">{{$t('确 定')}}</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import selectTable from '@/components/selectTable/index'
import { log } from '@antv/g2plot/lib/utils'
export default {
  props:['data'],
  components:{selectTable},
  data () {
    return {
      dialogFormVisible:false,
      classList:[],
      disabledId:[],
      tableList:[],
      tablecols:[],
      result:[],
      condition:''
    }
  },
  methods:{
    // async onSubmit () {
    //   let arr = this.$refs.tree.getCheckedNodes().map(item => item.itemclassid)
    //   let res = await this.$api.requested({
    //     "id": 20220927090102,
    //     "content": {
    //         "itemclassids":arr,
    //         "itemid": this.data.data.itemid,
    //         "itemno":this.data.data.itemno
    //     },
    //   })
    //   this.tool.showMessage(res,() => {
    //     this.$emit('onSuccess')
    //     this.dialogFormVisible = false
    //   })
    // },
    async onSubmit (data) {
      let res = await this.$api.requested({
        "id": 20220927090102,
        "content": {
            "itemclassids":[data.itemclassid],
            "itemid": this.data.data.itemid,
            "itemno":this.data.data.itemno
        },
      })
      this.tool.showMessage(res,() => {
        this.$emit('onSuccess')
        this.getClassList()
      })
    },
    async getClassList () {
      let res = await this.$api.requested({
          "id": "20230325141103",
          "content": {
            "sa_brandid":0,
            "itemid": this.$route.query.id,
            "where": {
              istool: this.data.data.istool ? 1 : 0,
              condition:this.condition
            }
          }
      })
      console.log(res.data);
      res.data = res.data.map((item,index) => {
        return {
          itemclassname:item.brandname,
          itemclassid:index + 1,
          subdep: item.ttemclass,
        }
      })
      this.classList = this.createDeep(res.data)
      console.log(this.classList);
    },
    // createDeep (data) {
    //   let arr = []
    //   function createNodes (node) {
    //     let elNode = {
    //       label:node.itemclassname,
    //       itemclassid:node.itemclassid,
    //       disabled:node.disabled ? true : false,
    //       children:[]
    //     }
    //     if (node.subdep && node.subdep.length > 0) {
    //       for (let index = 0; index < node.subdep.length; index++) {
    //         elNode.children.push(createNodes(node.subdep[index]))
    //       }
    //     }
    //     return elNode
    //   }

    //   data.forEach(item => {
    //     this.disabledId.push(item.itemclassid)
    //     arr.push(createNodes(item))
    //   })
    //   return arr
    // },
    createDeep (data) {
      let arr = []
      function createNodes (node,first) {
        let elNode = {
          itemclassname:node.itemclassfullname ? node.itemclassfullname : node.itemclassname,
          itemclassid:node.itemclassid,
          itemclassnum:node.itemclassnum,
          children:[],
          disabled:first ? false : true
        }
        if (node.subdep && node.subdep.length > 0) {
          for (let index = 0; index < node.subdep.length; index++) {
            elNode.children.push(createNodes(node.subdep[index]))
          }
        }
        return elNode
      }

      data.forEach(item => {
        this.disabledId.push(item.itemclassid)
        arr.push(createNodes(item,true))
      })
      return arr
    },
  },
  created () {
    this.getClassList()
    this.tablecols = this.tool.tabelCol(this.$route.name)['selectClassTable'].tablecols
  }
}

</script>
<style scoped>
/deep/.el-dialog__body {
  padding-bottom: 0 !important;
}
</style>