修改多个数据时,调用的接口是同一个,但是传参根据不同的类型改变
<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;
}
}
推荐阅读:
扫描二维码,在手机上阅读