«

修改多个数据时,调用的接口是同一个,但是传参根据不同的类型改变

yang 发布于 阅读:336 项目


    <div class="header">
      <!-- 优先级 -->
      <div class="ProjectPhase">
        <el-popover ref="priorityNameRef" placement="bottom-start" width="180" trigger="click">
          <div class="priorityList" v-for="(v,i) in priorityData" :key="i" @click="btnClickFun('priorityName', v)">
            <FrameUnit
              style="padding: 7px 8px;"
              :name="v.name"
              :ico="v.ico"
              :icoColour="v.icoColour"
              :wordColor="v.wordColor"
              :background="v.background" />
          </div>

          <div slot="reference" class="btnmedium" size="medium">
            <p class="text">优先级:</p>
            <p>{{ priorityName  }}</p>
          </div>
        </el-popover>

        <!-- <div v-else class="btnmedium">
        <p class="text">优先级:</p>
        <p>{{ stateString }}</p>
      </div> -->
      </div>

      <!-- 状态 -->
      <div class="ProjectPhase">
        <el-popover ref="StateNameRef" placement="bottom-start" width="180" trigger="click">
          <!-- <div class="priorityList" v-for="(v,i) in StateData" :key="i" @click="StateClick(v)"> -->
          <div class="priorityList" v-for="(v,i) in StateData" :key="i" @click="btnClickFun('StateName', v)">
            <FrameUnit
              style="padding: 7px 8px; "
              :name="v.name"
              :ico="v.ico"
              :icoColour="v.icoColour"
              :wordColor="v.wordColor"
              :background="v.background" />
          </div>

          <div slot="reference" class="btnmedium" size="medium">
            <p class="text">状态:</p>
            <p>{{ StateName  }}</p>
          </div>
        </el-popover>

        <!-- <div v-else class="btnmedium">
        <p class="text">优先级:</p>
        <p>{{ stateString }}</p>
      </div> -->
      </div>

      <!-- 类型 -->
      <div class="ProjectPhase">
        <el-popover ref="TypeNameRef" placement="bottom-start" width="180" trigger="click">
          <div class="priorityList" v-for="(v,i) in TypeData" :key="i" @click="btnClickFun('TypeName', v)">
            <FrameUnit
              style="padding: 7px 8px;"
              :name="v.name"
              :ico="v.ico"
              :icoColour="v.icoColour"
              :wordColor="v.wordColor"
              :background="v.background" />
          </div>

          <div slot="reference" class="btnmedium" size="medium">
            <p class="text">类型:</p>
            <p>{{ TypeName  }}</p>
          </div>
        </el-popover>

        <!-- <div v-else class="btnmedium">
        <p class="text">优先级:</p>
        <p>{{ stateString }}</p>
      </div> -->
      </div>
 </div>
  methods: {
    // 筛选按钮的切换
    btnClickFun(type, val) {
      this.$refs[type + "Ref"].showPopper = false; // 关闭筛选弹框
      this[type] = val.name;
      this.modifyClick(type, val);
    },

// 调用修改方法
    modifyClick(type, val) {
      // 验证参数
      if (!type || !val || !val.code) {
        return;
      }

      // 使用对象映射替换 switch 语句以提高可读性和可维护性
      const fieldCodeMap = {
        priorityName: 32,
        StateName: 34,
        TypeName: 33,
        SeverityName: 31,
        SourceyName: 30
      };

      // 获取对应的 fieldCode
      let fieldCode = fieldCodeMap[type] || "";
      if (typeof fieldCode === "undefined") {
        return;
      }

      // 构造参数对象
      let oParam = {
        id: this.demandInfo.id,
        fieldCode: fieldCode,
        fieldValue: val.code
      };

      ApidemandUpdateInfo(oParam).then((res) => {
        if (res.code == "200") {
          this.getData();
          this.$emit("getdemandInfo");
          this.$message.success("操作成功 !");
        }
      });
    },
 },
.header {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .ProjectPhase {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      width: 25%;
      cursor: pointer;
    }

    .text {
      font-size: 15px;
      color: #5f6e8e;
    }

    .text {
      cursor: pointer;
      font-size: 15px;
      color: #5f6e8e;
    }

    .btnmedium {
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #47a1fb;
        cursor: pointer;
      }
    }
  }
  .priorityList {
    padding: 5px 20px;
    font-size: 17px;
    margin-bottom: 8px;
    border-radius: 10px;
    line-height: 40px;
    cursor: pointer;
    // border: 1px solid #47a1fb;

    // #icons {
    //   margin-right: 8px;
    // }

    &:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
  }

版权所有:微4e
文章标题:修改多个数据时,调用的接口是同一个,但是传参根据不同的类型改变
除非注明,文章均为 微4e 原创,请勿用于任何商业用途,禁止转载

推荐阅读:


扫描二维码,在手机上阅读
请先 登录 再评论