vue点编辑渲染

前言

接到一个需求，规则回显。其意思就是已经创建好了一条规则，但当我点击编辑功能时，里面的值是之前我创建的值。这个功能说简单其实挺简单的，难点可能就是这个系统的前端是各种父子层级的关系，稍微不清楚一个父子关系可能就得把自己绕晕。再加上还得看别人的代码，弄懂整个逻辑才好下手编写代码。真是怪难受的，把自己给绕晕了。下面是我对这个功能的总结

1，带参数跳转页面

详情：在编辑按钮有个click事件，这个事件的方法如下：

 editData() {
      this.editDataList.push(this.ruleId);
      this.editDataList.push(this.ruleName);
      this.editDataList.push(this.ruleMessage);
      this.$router.push({
        name: "mainCanves",
        query: {
          editData: this.editDataList,  //这是传过去的参数
          t: Date.now(),
        },
      });

2，规则父页面接收传过来的值

created() {
  
    this.editDataList = this.$route.query.editData;
    if (this.editDataList != null) {
      this.ruleName = this.editDataList[1];
      this.ruleNote = this.editDataList[2];
      this.queryRuleByRuleId();
    }
    this.showComponentContent();
  },

根据规则id查询流程画布id

   queryRuleByRuleId() {
      var vm = this;
      //这里会从还从中拿到ruleId
      console.log("进入queryRuleByRuleId");
      var ruleId = this.editDataList[0];
      vm.$axios.get(queryRuleById + ruleId).then((res) => {
        this.processGraphId = res.data.data.processGraphId;
        localStorage.setItem("processGraphId", this.processGraphId);
        if (res.data.code === "0000") {
        } else {
          vm.$message.error("查询规则失败，稍后再试");
          return false;
        }
      });
    },

调用子页面的代码

  <div v-show="isRuleName">
        <!--设置规则名称-->
        <newName
          :rule-name="ruleName"
          @ListenRuleName="transRuleName"  //这个是子页面接收到给父页面传值，父页面把这个值传给ruleName
        ></newName>
      </div>

父页面把值传给ruleName

 transRuleName(name) {
      this.ruleName = name;
    },

注意，此时的页面在的还是规则的父页面，这里的ruleName和ruleNote值是通过v-bind绑定传值给子页面的。

2.1 规则子页面通过监听和props接收父页面传过来的值

 //  接收父組件傳來的值
  props: ['ruleName'],
  data: function() {
    return {
      name: this.ruleName,  //这里的name是子页面规则名称的值
    }
  },

监听事件

 watch: {
    ruleName(val, newval) {
      this.name = val
    },
  },

规则名称输入框有一个属性@input这个值是通过监听传给父页面的

 //子組件向父組件通信
    transRuleName() {
      this.$emit('ListenRuleName', this.name)
    },

这个控件代码：

 <el-input
            class="input"
            ref="code"
            v-model.trim="name"
            @input="transRuleName"
            placeholder="请输入规则名称  按Enter下一步"
            maxlength="9"
            show-word-limit
            type="text"
            @keydown.enter.native="enterNextClick"
            @focus="focus($event)"
          ></el-input>

2.2 流程画布子页面

在父页面中selectGraphId是决定显示不显示流程画布子页面的设置框的。其中对应的绑定值，流程画布页面出现就开始++出现

这个方法是决定流程画布控件出不出现的

showisCanvas() {
      // console.log("进入showisCanvas");

      this.isRuleName = false;
      this.isRuleNote = false;
      this.graphId++;
      this.isCanvas = true; //流程画布出现

      this.isPublish = false;
    },

 <div v-show="isCanvas">
        <!--设置流程画布-->
        <Canvas
          @ListenFilterSelect="transFilterSelect"
          @ListenAudienceSelect="transAudienceSelect"
          @ListenProcessAll="transProcessAll"
          @ListenDelPolicyId="delPolicy"
          @ListenGoPolice="isGoPolice"
          v-bind:selectGraphId="graphId"   //子页面将会引入这个值
          v-bind:backGraphData="backGraphData"
        />
      </div>

子页面newCan

 watch: {
//1，  条件名称的渲染
    selectGraphId() {
      var vm = this;
      vm.processGraphId = localStorage.getItem("processGraphId");
      if (vm.processGraphId != "") {
        // console.log("进来了流程画布id不为空");
        this.pressureSurface(vm.processGraphId);
      } else {
        this.dataFirst();
        this.initPos();
        this.draw();
      }
    },

渲染流程画布核心代码

 async pressureSurface(processGraphId) {
      var vm = this;
      //调用查询流程画布接口
      await vm.$axios.get(queryProcessGraph + vm.processGraphId).then((res) => {
        vm.processModel = res.data.data;
        vm.filterName = vm.processModel.dataId;
        vm.userList = vm.processModel.userIdList;
      });
      //需要修改--有值渲染
      // vm.audienceSelect = this.userList.map(ele => ele.userId);
      //将库中的数据转值为渲染前端的数据
      vm.audienceSelect = [];
      for (let i = 0; i < vm.userList.length; i++) {
        vm.user = [];
        vm.user.push(vm.userList[i].organizationId);
        vm.user.push(vm.userList[i].userId);
        vm.audienceSelect.push(vm.user);
      }

      //将数据源list和受众list传给父组件--如果没有触发改变事件则需要使用存储在库中的原值
      this.$emit("ListenFilterSelect", vm.filterName);
      this.$emit("ListenAudienceSelect", vm.audienceSelect);
      //调用根据流程画布id查询策略器名称和条件名称接口
      await vm.$axios
        .get(queryProcessByProcessId + vm.processGraphId)
        .then((res) => {
          vm.policyList = res.data.data;
        });
      //拼接两个请求返回的数据，供流程画布渲染
      this.loadProcessGraphAllPage();
    },

 loadProcessGraphAllPage() {
      // console.log("进入allpage调用方法");
      var vm = this;
      // 把从两个接口查出来的数据拼起来
      for (
        let x = 0;
        x < vm.processModel.policyrRelevanceModelList.length;
        x++
      ) {
        for (let y = 0; y < vm.policyList.length; y++) {
          if (
            vm.processModel.policyrRelevanceModelList[x].policyCanId ==
            vm.policyList[y].policyId
          ) {
            this.listPolicy = [];
            vm.listPolicy.serialNumber =
              vm.processModel.policyrRelevanceModelList[x].serialNumber;
            vm.listPolicy.hierarchy =
              vm.processModel.policyrRelevanceModelList[x].hierarchy;
            vm.listPolicy.policyId =
              vm.processModel.policyrRelevanceModelList[x].policyCanId;
            vm.listPolicy.policyName = vm.policyList[y].policyName;
            vm.listPolicy.conditionNameList = vm.policyList[y].condition;
            this.policyImgList.push(vm.listPolicy);
          }
        }
      }
      //渲染第一条假的数据
      this.dataFirst();
      //整理成渲染页面需要的格式的数据
      for (let a = 0; a < this.policyImgList.length; a++) {
        var policyObj = new Object();

        var conditionNameList = [];

        //获取前两条条件的条件名称
        if (this.policyImgList[a].conditionNameList[0] != undefined) {
          var one = this.policyImgList[a].conditionNameList[0].titleName;
          let conditionName = new Object();
          conditionName.conditionName = one;
          conditionNameList.push(conditionName);
        }
        if (this.policyImgList[a].conditionNameList[1] != undefined) {
          var two = this.policyImgList[a].conditionNameList[1].titleName;
          let conditionName = new Object();
          conditionName.conditionName = two;
          conditionNameList.push(conditionName);
        }
        policyObj.id = this.policyImgList[a].serialNumber;
        policyObj.pid = this.policyImgList[a].hierarchy;
        policyObj.policyName = this.policyImgList[a].policyName;
        policyObj.policyId = this.policyImgList[a].policyId;

        policyObj.conditionNameList = conditionNameList;

        list.push(policyObj);
       
      }

      this.dataList1(); //这是将list传值给父组件rulemain，这里需要通过监听传给父组件，然后父组件插入流程画布里

      this.$emit("ListenProcessAll", this.listData);

     

      this.initPos();
      this.draw();
    },

接收值的控件是这样的

 <div class="dom-item-cont" @mousedown="mouseDown($event, key)">
          <p
            :title="item.policyName"
            :class="{ flowText: isFlowText }"
            class="cantitlestyle"
          >
            {{ item.policyName }}
          </p>

          <p
            v-for="(title, index) in item.conditionNameList"
            :key="index"
            :title="title.conditionName"
            :class="{ flowText: isFlowText }"
            class="cantitlestyle"
          >
            条件{{ ++index }}：{{ title.conditionName }}
          </p>
        </div>
      </div>

//2，策略器名称的渲染

 //这个也是从父组件那边穿过来的
 backGraphData() {
      console.log("---进来了backGraphData---");
      // 从策略器那边的缓存中取出插入策略器之后返回的值
      this.policyModel = JSON.parse(localStorage.getItem("backProcessModel"));
      //获取本策略器的id和policyId
      this.processlist = JSON.parse(localStorage.getItem("processList"));
      //判断设置完成返回的id或policyId是否和此策略器相同
      if (this.processlist[0].id == this.policyModel.id) {
        var policyBox = new Object();

        var conditionNameList = [];
        policyBox.id = this.policyModel.id;
        policyBox.pid = this.processlist[0].pid;
        policyBox.policyId = this.policyModel.policyId;
        policyBox.policyName = this.policyModel.policyName;

        if (this.policyModel.conditionList[0] != undefined) {
          var one = this.policyModel.conditionList[0];
          let conditionName = new Object();
          conditionName.conditionName = one;
          conditionNameList.push(conditionName);
        }

        if (this.policyModel.conditionList[1] != undefined) {
          var two = this.policyModel.conditionList[1];
          let conditionName = new Object();
          conditionName.conditionName = two;
          conditionNameList.push(conditionName);
        }

        policyBox.conditionNameList = conditionNameList;

        var index = this.list.findIndex(function (item) {
          return item.id == policyBox.id;
        });
        list[index] = policyBox;
      }
      this.dataList1();
      this.initPos();
      this.draw();
      this.listDataToRulemain();
    },
  },

其中这里的设置点击方法，可将本页面的策略器的id，名称传到策略器页面去

 get(item) {
      //点击设置将当前策略器id传出去
      // let itemId = item.pid;
      var list = [
        {
          id: item.id,
          pid: item.pid,
          policyId: item.policyId == undefined ? "" : item.policyId,
        },
      ];
      // console.log(item);
      // console.log("pro中的list");
      // console.log(list);
      localStorage.setItem("processList", JSON.stringify(list));
      // console.log("newcan放到缓存中的值");

      // console.log(list);

      // console.log("newcan传递出去往策略器的信号");

      this.$emit("ListenGoPolice", true);

    },