qa-regulatory-gwj-vue/src/views/Label/components/selectLable.vue

<template>
  <el-dialog
    v-loading="loading"
    v-if="dialogVisible"
    :append-to-body="appendToBody"
    :visible.sync="dialogVisible"
    :fullscreen = "fullscreen"
    :title="title"
    width="70%">
    <el-input v-model="filterText" style="padding-bottom: 10px" placeholder="输入关键字进行过滤"/>
    <div class="information">
      <el-scrollbar style="height: 500px;margin-bottom: 10px">
        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          :lazy="lazy"
          :load="getCategory"
          :check-strictly="checkStrictly"
          show-checkbox
          node-key="id"
        />
      </el-scrollbar>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="goBack">取 消</el-button>
      <el-button v-if="false" type="primary" @click="clearInfo">清空查询条件</el-button>
      <el-button v-if="!fullscreen" @click="implementFullscreen(true)">全 屏</el-button>
      <el-button v-if="fullscreen" @click="implementFullscreen(false)">退出全屏</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
    <edit-son-label ref="editSonLabel" append-to-body @getResult="getResult"/>
  </el-dialog>
</template>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-divider--vertical{
  height: 100%;
}
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

<script>
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import uploadFile from '../../../components/upload-file'
import { requestFN } from '@/utils/request'
import editSonLabel from './editSonLabel'

export default {
  components: { uploadFile, Pagination, editSonLabel },
  directives: { waves },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '编辑'
    },
    lazy: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'NAME'
      },
      filterText: '',
      primogenitor: '',
      label: '',
      newPrimogenitor: '',
      A_options: [],
      B_options: [],
      addFlag: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      fullscreen: false,
      labelList: [],
      type: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    init(e) {
      this.dialogVisible = true
      if (e.labels && e.labels.length > 0) {
        this.data = e.labels
      } else {
        requestFN(
          '/labelFactory/tree',
          {
            IS_ANCESTORS_FLAG: '1'
          }
        ).then((data) => {
          this.loading = false
          this.data = data.tree
        }).catch((e) => {
          this.loading = false
        })
      }
    },
    goBack() {
      this.dialogVisible = false
      this.clear()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.NAME.indexOf(value) !== -1
    },
    getResult(e) {
      this.analysis(this.data, e)
      this.$forceUpdate()
    },
    analysis(arr, e) {
      const index = arr.findIndex(item => item.BUS_LABEL_FACTORY_ID === e.BUS_LABEL_FACTORY_ID)
      if (index !== -1) {
        this.$set(arr[index], 'aa', e.NAME)
      } else {
        for (const arrKey in arr) {
          (arr[arrKey].children && arr[arrKey].children.length > 0) && this.analysis(arr[arrKey].children, e)
        }
      }
    },
    save() {
      const list = this.$refs.tree.getCheckedNodes()
      if (this.limit !== 0) {
        if (list.length > this.limit) {
          this.$message.error('超出可选个数')
          return
        }
      }
      this.$emit('getResult', { chooseList: this.$refs.tree.getCheckedNodes(), e: this.$refs.tree.getCheckedNodes(false, true), TYPE: this.type })
      this.dialogVisible = false
      this.clear()
    },
    implementFullscreen(e) {
      this.fullscreen = e
    },
    clearInfo(row) {
      this.$refs.table.setCurrentRow(row)
      this.label = ''
      this.primogenitor = ''
      requestFN(
        '/labelFactory/getAncestors'
      ).then((data) => {
        this.loading = false
        this.labelList = data.list
      }).catch((e) => {
        this.loading = false
      })
    },
    clear() {
      this.label = ''
      this.A_options = []
      this.labelList = []
      this.data = []
    },
    getCategory(node, resolve) {
      console.log(node)
      if (node.level === 0) {
        return resolve(node.data)
      }
      if (node.level >= 1) {
        requestFN(
          'dictionaries/getLevels', { DICTIONARIES_ID: node.data.DICTIONARIES_ID }
        ).then((data) => {
          return resolve(data.list)
        }).catch((e) => {
          console.log(e)
        })
      }
      return resolve([])
    }
  }
}

</script>