像这种页面四个页面下面的展示格式都一样，这个时候就把公共部分代码抽取出来作为组件使用
直接把中间部分代码赋值过来
<template>
<div>
<div v-for="(items, index) in ford" :key="index">
<div v-if="items.shopCode != null">
<div class="title_stle">
<h3 v-if="inx === '0'" class="tar_stle">天猫</h3>
<h3 v-if="inx === '1'" class="tar_stle">唯品</h3>
<h3 v-if="inx === '2'" class="tar_stle">抖音旗舰店</h3>
<h3 v-if="inx === '3'" class="tar_stle">抖音构美店</h3>
<div>
<h3
class="tar_stle01"
:class="inx == '2' || inx == '3' ? 'sp05' : ''"
>
活动仓<span class="span_stal">{{
items.activityWarehouseName
}}</span>
</h3>
<h3
class="tar_stle02"
:class="
inx == '1'
? 'sp02'
: inx == '2'
? 'sp03'
: inx == '3'
? 'sp03'
: 'sp04'
"
>
独占仓<span class="span_stal">{{
items.exclusiveWarehouseName
}}</span>
</h3>
<h3 class="tar_stle03">
共享仓<span class="span_stal">{{
items.shareWarehouseName
}}</span>
</h3>
<div class="button_style">
<el-button type="primary" size="medium" @click="saveRegulations"
>保存</el-button
>
</div>
</div>
</div>
<div class="content">
<div class="tableBoxTitle">
独占判断
<div class="tableBoxContent">
<div
class="elDivClass"
v-for="item in (items.regulationDetailList || []).filter(
(item) => item.type == '01'
)"
:key="item.id"
>
<el-checkbox
v-model="item.participation"
class="elCheckBoxClass"
:label="item.parameterName"
>
<span class="checkoutlabelClass">{{
item.stringArray[0]
}}</span>
<span class="symBolTextClass">{{ item.stringArray[1] }}</span>
<span class="inputSpanClass"
><el-input
class="inputClass"
v-model="item.parameterValue"
οnkeypress="return event.keyCode>=48&&event.keyCode<=57"
οnpaste="return !clipboardData.getData('text').math(/\D/)"
οndragenter="return false"
maxlength="8"
>
</el-input
></span>
<span
v-if="
item.stringArray.length > 0 &&
item.stringArray.length == 4
"
class="utilText"
>{{ item.stringArray[3] }}</span
>
</el-checkbox>
</div>
</div>
</div>
</div>
<div class="share_content">
<div class="tableBoxTitle">
共享判定
<div class="tableBoxContent">
<div
class="elDivClass"
v-for="item in (items.regulationDetailList || []).filter(
(item) => item.type == '02'
)"
:key="item.id"
>
<el-checkbox
v-model="item.participation"
class="elCheckBoxClass"
:label="item.parameterName"
>
<span class="checkoutlabelClass">{{
item.stringArray[0]
}}</span>
<span class="symBolTextClass">{{ item.stringArray[1] }}</span>
<span class="inputSpanClass"
><el-input
class="inputClass"
v-model="item.parameterValue"
οnkeypress="return event.keyCode>=48&&event.keyCode<=57"
οnpaste="return !clipboardData.getData('text').math(/\D/)"
οndragenter="return false"
maxlength="8"
>
</el-input
></span>
<span
v-if="
item.stringArray.length > 0 &&
item.stringArray.length == 4
"
class="utilText"
>{{ item.stringArray[3] }}</span
>
</el-checkbox>
</div>
</div>
</div>
</div>
<div class="general_content">
<div class="general_tableBoxTitle">
通用
<div class="tableBoxContent">
<div
class="elDivClass"
v-for="item in (items.regulationDetailList || []).filter(
(item) => item.type == '03'
)"
:key="item.id"
>
<el-checkbox
v-model="item.participation"
class="elCheckBoxClass"
:label="item.parameterName"
>
<span class="checkoutlabelClass">{{
item.stringArray[0]
}}</span>
<span class="symBolTextClass">{{ item.stringArray[1] }}</span>
<span class="inputSpanClass"
><el-input
class="inputClass"
v-model="item.parameterValue"
οnkeypress="return event.keyCode>=48&&event.keyCode<=57"
οnpaste="return !clipboardData.getData('text').math(/\D/)"
οndragenter="return false"
maxlength="8"
>
</el-input
></span>
<span
v-if="
item.stringArray.length > 0 &&
item.stringArray.length == 4
"
class="utilText"
>{{ item.stringArray[3] }}</span
>
</el-checkbox>
</div>
</div>
</div>
</div>
<div class="people_content">
<div class="people_tableBoxTitle">
人工指定
<div
v-for="item in (items.regulationDetailList || []).filter(
(item) =>
item.parameterCode == 'SHOP.ALLOT.EXCLUSIVE.PRODUCT.HOLDUP'
)"
:key="item.id"
class="people_BoxContent"
>
<h3 class="within_Content">独占款</h3>
<textarea
v-if="
item.parameterCode != null &&
item.parameterCode == 'SHOP.ALLOT.EXCLUSIVE.PRODUCT.HOLDUP'
"
v-model="item.parameterValue"
class="specialinput"
placeholder="多个款号请用逗号隔开!"
οnkeypress="javascript:if(event.keyCode == 32 || event.keyCode == 13)event.returnValue = false;"
></textarea>
</div>
<div
class="people_BoxContent special"
v-for="item in (items.regulationDetailList || []).filter(
(item) =>
item.parameterCode == 'SHOP.ALLOT.SHARE.PRODUCT.HOLDUP'
)"
:key="item.id"
>
<h3 class="within_Content">共享款</h3>
<textarea
v-if="
item.parameterCode != null &&
item.parameterCode == 'SHOP.ALLOT.SHARE.PRODUCT.HOLDUP'
"
v-model="item.parameterValue"
class="specialinput"
placeholder="多个款号请用逗号隔开!"
οnkeypress="javascript:if(event.keyCode == 32 || event.keyCode == 13)event.returnValue = false;"
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["inx", "ford"],
data() {
return {
pagination: {},
regulations: [],
tabIndex: "0",
copy: [],
};
},
watch: {
inx(nv, ov) {
this.regulations = this.ford;
},
},
created() {
this.init();
},
mounted() {},
methods: {
init() {},
//1.查询所有规则信息
queryRegulations() {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.queryRegulationInfos)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
//赋值操作[0为有效状态]
const newData = response.data.data;
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
detailItem.participation = detailItem.participation == "0";
});
}
});
}
//解析规则明细字段
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
let stringArry = detailItem.expression.split("|");
detailItem["stringArray"] = stringArry;
});
}
});
}
console.log(newData, "newDatanewData");
_self.regulations = newData;
} else {
_self.$message.error(response.data.message);
}
});
},
//2.保存
saveRegulations() {
this.$emit("forUpdate", this.ford);
},
//调用修改接口
updateRegulations(parameterData) {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.updateRegulations, this.ford)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
_self.$message.success({ message: "保存成功！" });
_self.queryRegulations();
} else {
_self.$message.error(response.data.message);
}
});
},
//全局加载loading图标
openLoading() {
const loading = this.$loading({
lock: true,
fullScreen: true,
background: "rgba(255,255,255,0.7)",
});
return loading;
},
},
};
</script>
<style lang="less" scoped>
.regulation-tag {
height: 100%;
background-color: #fff;
.rfm-model-header {
height: 30px;
margin-bottom: 10px;
}
.rfm-model-header > span {
display: block;
float: left;
line-height: 60px;
}
.rfm-model-header-title {
width: 120px;
float: left;
font-weight: 500;
margin-top: 10px;
}
.tool-bar {
font-size: 12px;
color: #fff;
overflow: auto;
padding: 5px 0;
}
.el-tab-pane {
height: calc(100% - 40px);
}
.tar-tianMao {
height: 100px;
background-color: pink;
}
.tar-tianMao h4 {
display: inline-block;
}
.content {
float: left;
position: relative;
display: block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 30px;
}
.tableBoxTitle {
display: inline-block;
width: 70px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.tableBoxContent {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20px;
}
.share_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_tableBoxTitle {
display: inline-block;
width: 35px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_content {
position: relative;
margin-left: 30px;
margin-top: 20px;
width: 1290px;
height: 250px;
border: 1px solid #999;
}
.people_tableBoxTitle {
display: inline-block;
width: 70px;
height: 50px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_BoxContent {
display: inline-block;
margin-top: 30px;
width: 623px;
height: 180px;
background-color: #fff;
border: 1px solid #999;
}
.special {
position: absolute;
top: 21px;
left: 629px;
}
.specialinput {
width: 100%;
height: 125px;
//border: none !important;
}
.within_Content {
height: 40px;
background-color: #fff;
text-align: center;
padding-top: 10px;
border: 1px solid #ccc;
}
.title_stle {
margin-top: 0px;
height: 100px;
background-color: #fff;
}
.tar_stle {
margin-left: 30px;
padding-top: 35px;
}
.tar_stle01 {
float: left;
margin-left: 120px;
// padding-left: 200px;
}
.sp05 {
float: left;
margin-left: 180px;
// padding-left: 200px;
}
.gou_stle01 {
float: left;
margin-left: 180px;
// padding-left: 200px;
}
.dou_stle01 {
float: left;
margin-left: 170px;
// padding-left: 200px;
}
.tar_stle02 {
position: relative;
top: -45px;
// left: -20px;
// padding-top: -80px;
// padding-left: 200px;
}
.sp02 {
left: -227px !important;
}
.sp03 {
left: -77px !important;
}
.sp04 {
left: -305px !important;
}
.gou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.wei_stle01 {
position: relative;
top: -45px;
left: -220px;
// padding-top: -80px;
// padding-left: 200px;
}
.dou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.span_stal {
margin-left: 20px;
}
.tar_stle03 {
position: relative;
top: -45px;
left: 480px;
}
.button_style {
position: relative;
top: -55px;
left: 1200px;
}
.elDivClass {
margin-top: 10px;
}
/* .elCheckBoxClass{
display: block;
margin-top: 20px;
} */
.checkoutlabelClass {
width: 130px;
display: inline-block;
}
.symBolTextClass {
width: 60px;
display: inline-block;
margin-right: 10px;
}
.inputSpanClass {
width: 200px;
}
.inputClass {
width: 25%;
}
}
</style>
定义模板，注册，使用
<template>
<div class="regulation-tag">
<div class="rfm-model-header">
<h4 class="rfm-model-header-title" style="width: 120px">规则配置</h4>
</div>
<el-tabs v-model="tabIndex" type="card" @tab-click="tabChange">
<el-tab-pane :key="0" label="天猫" name="0">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="1" label="唯品" name="1">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="2" label="抖音旗舰店" name="2">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="3" label="抖音构美店" name="3">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import tableBox from "./components/tableBox/index.vue";
import com from "./components/com.vue";
export default {
components: { tableBox, com },
data() {
return {
pagination: {},
regulations: [],
tabIndex: "0",
forData: [],
tabInx: 0,
};
},
created() {
this.init();
},
mounted() {},
methods: {
init() {
let _self = this;
//初始化数据
_self.queryRegulations();
//_self.deleteString();
},
//1.查询所有规则信息
queryRegulations() {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.queryRegulationInfos)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
//赋值操作[0为有效状态]
const newData = response.data.data;
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
detailItem.participation = detailItem.participation == "0";
});
}
});
}
//解析规则明细字段
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
let stringArry = detailItem.expression.split("|");
detailItem["stringArray"] = stringArry;
});
}
});
}
_self.regulations = newData;
let data = newData[this.tabInx];
this.forData = [];
this.forData.push(data);
} else {
_self.$message.error(response.data.message);
}
});
},
//2.保存
saveRegulations(parameterData) {
// this.updateRegulations(parameterData);
let _self = this;
//const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
//勾选数据进行还原
if (_self.regulations && _self.regulations.length > 0) {
_self.regulations.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
detailItem.participation = detailItem.participation ? "0" : "1";
});
}
});
}
//tabIndex 为0代表天猫店1唯品店2抖音旗舰店3构美店
if (_self.tabIndex != null && _self.tabIndex === "0") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出天猫门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "TM-ES") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出唯品会数据
if (_self.tabIndex != null && _self.tabIndex === "1") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "WPH-ES") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出抖音旗舰店数据
if (_self.tabIndex != null && _self.tabIndex === "2") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "ESDYQJD") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出抖音旗舰店数据
if (_self.tabIndex != null && _self.tabIndex === "3") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "ESDYDYY") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
},
//调用修改接口
updateRegulations(parameterData) {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.updateRegulations, parameterData)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
_self.$message.success({ message: "保存成功！" });
_self.queryRegulations();
} else {
_self.$message.error(response.data.message);
}
});
},
tabChange(tab) {
let _self = this;
_self.tabIndex = tab.index;
this.tabInx = parseInt(tab.index);
_self.pagination = {};
if (tab.index === "0") {
let data = this.regulations[0];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "1") {
let data = this.regulations[1];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "2") {
let data = this.regulations[2];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "3") {
let data = this.regulations[3];
this.forData = [];
this.forData.push(data);
}
},
//全局加载loading图标
openLoading() {
const loading = this.$loading({
lock: true,
fullScreen: true,
background: "rgba(255,255,255,0.7)",
});
return loading;
},
},
};
</script>
<style lang="scss">
.regulation-tag {
height: 100%;
background-color: #fff;
.rfm-model-header {
height: 30px;
margin-bottom: 10px;
}
.rfm-model-header > span {
display: block;
float: left;
line-height: 60px;
}
.rfm-model-header-title {
width: 120px;
float: left;
font-weight: 500;
margin-top: 10px;
}
.tool-bar {
font-size: 12px;
color: #fff;
overflow: auto;
padding: 5px 0;
}
.el-tab-pane {
height: calc(100% - 40px);
}
.tar-tianMao {
height: 100px;
background-color: pink;
}
.tar-tianMao h4 {
display: inline-block;
}
.content {
float: left;
position: relative;
display: block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 30px;
}
.tableBoxTitle {
display: inline-block;
width: 70px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.tableBoxContent {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20px;
}
.share_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_tableBoxTitle {
display: inline-block;
width: 35px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_content {
position: relative;
margin-left: 30px;
margin-top: 20px;
width: 1290px;
height: 250px;
border: 1px solid #999;
}
.people_tableBoxTitle {
display: inline-block;
width: 70px;
height: 50px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_BoxContent {
display: inline-block;
margin-top: 30px;
width: 623px;
height: 180px;
background-color: #fff;
border: 1px solid #999;
}
.special {
position: absolute;
top: 21px;
left: 629px;
}
.specialinput {
width: 100%;
height: 125px;
//border: none !important;
}
.within_Content {
height: 40px;
background-color: #fff;
text-align: center;
padding-top: 10px;
border: 1px solid #ccc;
}
.title_stle {
height: 100px;
background-color: #fff;
}
.tar_stle {
margin-left: 30px;
padding-top: 35px;
}
.tar_stle01 {
float: left;
margin-left: 120px;
// padding-left: 200px;
}
.gou_stle01 {
float: left;
margin-left: 180px;
// padding-left: 200px;
}
.dou_stle01 {
float: left;
margin-left: 170px;
// padding-left: 200px;
}
.tar_stle02 {
position: relative;
top: -45px;
// left: -20px;
// padding-top: -80px;
// padding-left: 200px;
}
.gou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.wei_stle01 {
position: relative;
top: -45px;
left: -220px;
// padding-top: -80px;
// padding-left: 200px;
}
.dou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.span_stal {
margin-left: 20px;
}
.tar_stle03 {
position: relative;
top: -45px;
left: 480px;
}
.button_style {
position: relative;
top: -55px;
left: 1200px;
}
.elDivClass {
margin-top: 10px;
}
/* .elCheckBoxClass{
display: block;
margin-top: 20px;
} */
.checkoutlabelClass {
width: 130px;
display: inline-block;
}
.symBolTextClass {
width: 60px;
display: inline-block;
margin-right: 10px;
}
.inputSpanClass {
width: 200px;
}
.inputClass {
width: 25%;
}
}
</style>
<template>
<div class="regulation-tag">
<div class="rfm-model-header">
<h4 class="rfm-model-header-title" style="width: 120px">规则配置</h4>
</div>
<el-tabs v-model="tabIndex" type="card" @tab-click="tabChange">
<el-tab-pane :key="0" label="天猫" name="0">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="1" label="唯品" name="1">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="2" label="抖音旗舰店" name="2">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
<el-tab-pane :key="3" label="抖音构美店" name="3">
<com :inx="tabIndex" :ford="forData" @forUpdate="saveRegulations"></com>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import tableBox from "./components/tableBox/index.vue";
import com from "./components/com.vue";
export default {
components: { tableBox, com },
data() {
return {
pagination: {},
regulations: [],
tabIndex: "0",
forData: [],
tabInx: 0,
};
},
created() {
this.init();
},
mounted() {},
methods: {
init() {
let _self = this;
//初始化数据
_self.queryRegulations();
//_self.deleteString();
},
//1.查询所有规则信息
queryRegulations() {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.queryRegulationInfos)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
//赋值操作[0为有效状态]
const newData = response.data.data;
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
detailItem.participation = detailItem.participation == "0";
});
}
});
}
//解析规则明细字段
if (newData && newData.length > 0) {
newData.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
let stringArry = detailItem.expression.split("|");
detailItem["stringArray"] = stringArry;
});
}
});
}
_self.regulations = newData;
let data = newData[this.tabInx];
this.forData = [];
this.forData.push(data);
} else {
_self.$message.error(response.data.message);
}
});
},
//2.保存
saveRegulations(parameterData) {
// this.updateRegulations(parameterData);
let _self = this;
//const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
//勾选数据进行还原
if (_self.regulations && _self.regulations.length > 0) {
_self.regulations.map((item) => {
if (
item.regulationDetailList &&
item.regulationDetailList.length > 0
) {
item.regulationDetailList.map((detailItem) => {
detailItem.participation = detailItem.participation ? "0" : "1";
});
}
});
}
//tabIndex 为0代表天猫店1唯品店2抖音旗舰店3构美店
if (_self.tabIndex != null && _self.tabIndex === "0") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出天猫门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "TM-ES") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出唯品会数据
if (_self.tabIndex != null && _self.tabIndex === "1") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "WPH-ES") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出抖音旗舰店数据
if (_self.tabIndex != null && _self.tabIndex === "2") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "ESDYQJD") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
//过滤出抖音旗舰店数据
if (_self.tabIndex != null && _self.tabIndex === "3") {
if (_self.regulations && _self.regulations.length > 0) {
//过滤出唯品门店数据
const parameterData = _self.regulations.filter((item) => {
if (item.shopCode != null && item.shopCode === "ESDYDYY") {
return true;
} else {
return false;
}
});
_self.updateRegulations(parameterData);
}
}
},
//调用修改接口
updateRegulations(parameterData) {
let _self = this;
const pageLoading = _self.openLoading(); //调用方法，打开loading遮罩层
_self.$http
.post(_self.$api.updateRegulations, parameterData)
.then(function (response) {
pageLoading.close(); //请求成功之后就关闭遮罩层
if (response.data.code == "1") {
_self.$message.success({ message: "保存成功！" });
_self.queryRegulations();
} else {
_self.$message.error(response.data.message);
}
});
},
tabChange(tab) {
let _self = this;
_self.tabIndex = tab.index;
this.tabInx = parseInt(tab.index);
_self.pagination = {};
if (tab.index === "0") {
let data = this.regulations[0];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "1") {
let data = this.regulations[1];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "2") {
let data = this.regulations[2];
this.forData = [];
this.forData.push(data);
}
if (tab.index === "3") {
let data = this.regulations[3];
this.forData = [];
this.forData.push(data);
}
},
//全局加载loading图标
openLoading() {
const loading = this.$loading({
lock: true,
fullScreen: true,
background: "rgba(255,255,255,0.7)",
});
return loading;
},
},
};
</script>
<style lang="scss">
.regulation-tag {
height: 100%;
background-color: #fff;
.rfm-model-header {
height: 30px;
margin-bottom: 10px;
}
.rfm-model-header > span {
display: block;
float: left;
line-height: 60px;
}
.rfm-model-header-title {
width: 120px;
float: left;
font-weight: 500;
margin-top: 10px;
}
.tool-bar {
font-size: 12px;
color: #fff;
overflow: auto;
padding: 5px 0;
}
.el-tab-pane {
height: calc(100% - 40px);
}
.tar-tianMao {
height: 100px;
background-color: pink;
}
.tar-tianMao h4 {
display: inline-block;
}
.content {
float: left;
position: relative;
display: block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 30px;
}
.tableBoxTitle {
display: inline-block;
width: 70px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.tableBoxContent {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20px;
}
.share_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_content {
position: relative;
display: inline-block;
width: 400px;
height: 450px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 40px;
}
.general_tableBoxTitle {
display: inline-block;
width: 35px;
height: 60px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_content {
position: relative;
margin-left: 30px;
margin-top: 20px;
width: 1290px;
height: 250px;
border: 1px solid #999;
}
.people_tableBoxTitle {
display: inline-block;
width: 70px;
height: 50px;
background-color: #fff;
position: absolute;
top: -12px;
left: 14px;
padding: 0 6px;
}
.people_BoxContent {
display: inline-block;
margin-top: 30px;
width: 623px;
height: 180px;
background-color: #fff;
border: 1px solid #999;
}
.special {
position: absolute;
top: 21px;
left: 629px;
}
.specialinput {
width: 100%;
height: 125px;
//border: none !important;
}
.within_Content {
height: 40px;
background-color: #fff;
text-align: center;
padding-top: 10px;
border: 1px solid #ccc;
}
.title_stle {
height: 100px;
background-color: #fff;
}
.tar_stle {
margin-left: 30px;
padding-top: 35px;
}
.tar_stle01 {
float: left;
margin-left: 120px;
// padding-left: 200px;
}
.gou_stle01 {
float: left;
margin-left: 180px;
// padding-left: 200px;
}
.dou_stle01 {
float: left;
margin-left: 170px;
// padding-left: 200px;
}
.tar_stle02 {
position: relative;
top: -45px;
// left: -20px;
// padding-top: -80px;
// padding-left: 200px;
}
.gou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.wei_stle01 {
position: relative;
top: -45px;
left: -220px;
// padding-top: -80px;
// padding-left: 200px;
}
.dou_stle02 {
position: relative;
top: -45px;
left: -75px;
// padding-top: -80px;
// padding-left: 200px;
}
.span_stal {
margin-left: 20px;
}
.tar_stle03 {
position: relative;
top: -45px;
left: 480px;
}
.button_style {
position: relative;
top: -55px;
left: 1200px;
}
.elDivClass {
margin-top: 10px;
}
/* .elCheckBoxClass{
display: block;
margin-top: 20px;
} */
.checkoutlabelClass {
width: 130px;
display: inline-block;
}
.symBolTextClass {
width: 60px;
display: inline-block;
margin-right: 10px;
}
.inputSpanClass {
width: 200px;
}
.inputClass {
width: 25%;
}
}
</style>
