ibms/src/components/config_point/dictionaryCascader.vue

<template>
  <div>
    <el-form ref="form" :rules='rules' :model="form">
      <el-form-item prop="dict">
        <el-cascader style='width: 100%;' :options='options' v-model='form.dict' @active-item-change='handleChange' :props='props' filterable
          @change="changeSelect" ref="dictCas"></el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getDataDictionary,//查询信息点
  queryPhysicsAllType,//查询所有部件类型
  queryDictionaryHead,//查询所有空间类型

} from "@/api/scan/request"
import { mapGetters, mapActions } from "vuex";
import tools from "@/utils/scan/tools";
export default {
  data() {
    return {
      options: [
        {
          Code: 'Pj',
          Name: '项目',
          children: []
        }, {
          Code: 'Bd',
          Name: '建筑',
          children: []
        }, {
          Code: 'Fl',
          Name: '楼层',
          children: []
        }, {
          Code: 'Eq',
          Name: '设备',
          children: []
        }, {
          Code: 'Ec',
          Name: '部件',
          children: []
        }, {
          Code: 'Sy',
          Name: '系统',
          children: []
        }, {
          Code: 'Sp',
          Name: '空间',
          children: []
        }, {
          Code: 'VOTn',
          Name: '租户',
          children: []
        },
      ],
      form: {
        dict: [],
      },
      props: {
        value: 'Code',
        label: 'Name',
        children: 'children'
      },
      rules: {
        dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAllData()
  },
  methods: {
    //选择
    handleChange(val) {
      let type = val[0];
      let singleStr = "Pj-Bd-Fl-VOTn";
      console.log(val)
      if (type == "Eq" && val.length == 2) {
        this.getDataPoint(val[1])
      } else if (type == "Ec" && val.length == 2) {
        this.getDataPoint(val[1])
      } else if (type == "Sy" && val.length == 3) {
        this.getDataPoint(val[2])
      } else if (type == "Sp" && val.length == 2) {
        this.getDataPoint(val[1])
      } else if (singleStr.indexOf(type) > -1) {
        this.hasChildren(type) && this.getDataPoint(type)
      }
    },
    //获取物理世界所有设备类型
    getAllData() {
      queryPhysicsAllType('Equipment', res => {
        this.options[3].children = this.formatOptions(res.Content)
      })
      queryPhysicsAllType('Component', res => {
        this.options[4].children = this.formatOptions(res.Content)
      })
      queryPhysicsAllType('Major-System', res => {
        let data = JSON.parse(JSON.stringify(res.Content).replace(/ListClassDef/g, 'children'));
        this.options[5].children = this.formatOptions(data)
      })
      let param1 = {
        Distinct: true,
        Filters: "ParentId='Space'"
      }
      queryDictionaryHead(param1, res => {
        this.options[6].children = this.formatOptions(res.Content)
      })
    },
    //格式化options数据
    formatOptions(arr) {
      return arr.map(item => {
        return {
          Code: item.Code,
          Name: item.Name,
          children: item.children && item.children.length ? this.formatOptions(item.children) : []
        }
      })
    },
    //请求信息点
    getDataPoint(type) {
      let param = {
        data: {
          Filters: "InputMode='M' or InputMode='L'",
          PageNumber: 1,
          PageSize: 500
        },
        type: type
      }
      getDataDictionary(param, res => {
        let tempArr = res.Content.map(item => {
          return {
            Code: item.InfoPointCode,
            Name: item.InfoPointName
          }
        })
        this.pushPoints(this.options, tempArr, type);
        this.pointDataSource = {}
        res.Content.map(item => {
          let code = item.InfoPointCode
          this.pointDataSource[code] = item
        })
        this.$nextTick(() => {
          this.changeSelect(this.form.dict)
        })
      })
    },
    //根据返回数据拼接options
    pushPoints(options, arr, Code) {
      options.map(option => {
        if (option.Code == Code) {
          option.children = arr;
        } else {
          if (option.children) {
            this.pushPoints(option.children, arr, Code)
          }
        }
      })
    },
    changeSelect(val) {
      let labels = this.$refs.dictCas.currentLabels
      this.$emit('change', { val: val, labels: labels })
    },
    //减少请求次数
    hasChildren(Code) {
      let flag = true;
      this.options.map(option => {
        if (option.Code == Code && option.children.length) {
          flag = false;
        }
      })
      return flag;
    },
    //设置值
    setCascaderVal(value) {
      this.form.dict = tools.deepCopy(value)
      value.splice(value.length - 1, 1)
      this.handleChange(value)
    },
    //校验是否选择
    validate(cb) {
      this.$refs.form.validate(valid => {
        if (valid) {
          cb(true)
        } else {
          cb(false)
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
</style>