smart-power-ui/src/views/profile/attribute/index.vue

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="自定义参数" name="attribute">
        <div class="tabs-body">
          <attribute-view
            v-if="activeName === 'attribute'"
            ref="attributeref"
            :sourceId="sourceId"
            @handleClick="attributeEvent"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="参数分组" name="group">
        <div class="tabs-body">
          <group-view
            v-if="activeName === 'group'"
            ref="groupref"
            :sourceId="sourceId"
            @handleClick="groupEvent"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="功能" name="function">
        <div class="tabs-body">
          <function-view
            v-if="activeName === 'function'"
            ref="functionref"
            :sourceId="sourceId"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="事件" name="event">
        <div class="tabs-body">
          <event-view
            v-if="activeName === 'event'"
            ref="eventref"
            :sourceId="sourceId"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import attributeView from "./attributeView";
import groupView from "./groupView";
import FunctionView from "./functionView";
import EventView from "./eventView";
export default {
  components: { FunctionView, attributeView, groupView, EventView },
  props: {
    groupList: {
      type: String,
      default: "[]"
    },
    arttributeList: {
      type: String,
      default: "[]"
    },
    sourceId: {
      type: String,
      default: ""
    }
  },
  name: "attribute",
  created() {
    // 处理数据
    this.handleInitData();
  },
  data() {
    return {
      activeName: "attribute"
    };
  },
  methods: {
    attributeEvent(data) {
      switch (data.type) {
        case "add":
          // 执行add
          this.$emit("handleEvent", {
            type: data.type,
            title: "新增参数",
            component: "attributeForm",
            paramIdx: null
          });
          break;

        case "update":
          this.$emit("handleEvent", {
            type: data.type,
            title: "修改参数",
            component: "attributeForm",
            paramIdx: data.idx,
            row: data.row
          });
          break;

        case "list":
          this.$refs.attributeref.getList();
          break;

        case "param":
          this.$emit("handleEvent", {
            type: data.type,
            title: "物模型",
            component: "paramsJson",
            paramIdx: null
          });
          break;
      }
    },
    groupEvent(data) {
      switch (data.type) {
        case "add":
          // 执行add
          this.$emit("handleEvent", {
            type: data.type,
            title: "新增分组",
            component: "groupForm",
            paramIdx: null
          });
          break;

        case "update":
          this.$emit("handleEvent", {
            type: data.type,
            title: "修改分组",
            component: "groupForm",
            paramIdx: data.idx
          });
          break;

        case "list":
          this.$refs.groupref.getList();
          break;
      }
    },
    forceUpdate(component) {
      if (component === "groupForm") {
        this.$refs.groupref && this.$refs.groupref.getList();
      } else if (component === "attributeForm") {
        this.$refs.attributeref && this.$refs.attributeref.getList();
      } else if (component === "functionForm") {
        this.$refs.functionref && this.$refs.functionref.getList();
      }
    },
    forceUpdateList(component) {
      let arttributeList = [],
        groupList = [],
        functionList = [],
        eventList = [];

      try {
        let json = JSON.parse(this.arttributeList);
        // if (json.properties) {
        arttributeList = json.properties;
        groupList = JSON.parse(this.groupList);
        functionList = json.functions;
        eventList = json.events;
        // } else {
        //   arttributeList = json;
        //   groupList = JSON.parse(this.groupList);
        //   functionList = json.functions;
        //   eventList = json.events;
        // }
      } catch (error) {
        arttributeList = [];
        groupList = [];
        functionList = [];
        eventList = [];
      }

      if (component === "groupForm") {
        this.$refs.groupref && this.$refs.groupref.setList(groupList);
      } else if (component === "attributeForm") {
        this.$refs.attributeref &&
          this.$refs.attributeref.setList(arttributeList.properties);
      } else if (component === "functionForm") {
        this.$refs.functionref &&
          this.$refs.functionref.setList(arttributeList.functions);
      } else if (component === "eventForm") {
        this.$refs.eventref &&
          this.$refs.eventref.setList(arttributeList.events);
      }
    },
    handleInitData() {
      let arttributeList = [],
        groupList = [],
        functionList = [],
        eventList = [];

      try {
        let json = JSON.parse(this.arttributeList);
        // if (json.properties) {
          arttributeList = json.properties;
          groupList = JSON.parse(this.groupList);
          functionList = json.functions;
          eventList = json.events;
        // } else {
        //   arttributeList = json;
        //   groupList = JSON.parse(this.groupList);
        //   functionList = json.functions;
        //   eventList = json.events;
        // }
      } catch (error) {
        arttributeList = [];
        groupList = [];
        functionList = [];
        eventList = [];
      }

      this.$store.dispatch("InitAttributeAndGroup", {
        attrList: arttributeList,
        groupList: groupList,
        functionList: functionList,
        eventList: eventList
      });
    }
  }
};
</script>