web-retail-admin/src/views/configManage/retailLevel/jxpz.vue

857 lines
25 KiB
Vue
Raw Normal View History

2025-03-23 10:03:12 +08:00
<template>
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:moren="moren"
></topBar>
<div class="main">
<div class="maintop">
<div class="mainbtn">
<el-button
size="small"
class="thebtn1"
v-hasButtons="['AwardAllocationRetailAdd']"
@click="adddate()"
>{{ $t("w_0328") }}</el-button
>
<!-- <el-button size="small" class="thebtn2">
{{ $t("MN_T_8") }}</el-button
> -->
</div>
</div>
<div class="maintable">
<el-table
height="750px"
:data="tableData"
v-loading="loading"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
align="center"
prop=""
:label="$t('MN_F_T_351')"
width="180"
>
<template slot-scope="scope">
<img
style="width: 44px; height: 44px"
:src="scope.row.image"
alt=""
/>
</template>
</el-table-column>
<el-table-column
align="center"
prop="awardsName"
:label="$t('CK_KS_16')"
width="180"
>
</el-table-column>
<!-- <el-table-column
align="center"
prop="awardsValue"
label="奖衔值"
width="180"
>
</el-table-column> -->
<el-table-column
align="center"
prop="communityCheck"
:label="'小区考核开始' + `(${isLocals()})`"
width="180"
>
<template slot-scope="scope">
{{ scope.row.communityCheck | numberToCurrency }}
</template>
</el-table-column>
<el-table-column
align="center"
prop="communityCheckEnd"
:label="'小区考核结束' + `(${isLocals()})`"
width="180"
>
<template slot-scope="scope">
{{ scope.row.communityCheckEnd | numberToCurrency }}
</template>
</el-table-column>
<el-table-column
align="center"
prop="purchaseCheck"
width="140"
:label="$t('ENU_ASS_T_0') + `(${isLocals()})`"
>
<template slot-scope="scope">
{{ scope.row.purchaseCheck | numberToCurrency }}
</template>
</el-table-column>
<el-table-column
align="center"
prop="shareCheck"
width="140"
:label="$t('ENU_ASS_T_1') + '(BV)'"
>
</el-table-column>
<el-table-column align="center" prop="algebra" label="代数">
</el-table-column>
<el-table-column
align="center"
prop="globalDividend"
label="全球分红"
>
</el-table-column>
<el-table-column align="center" prop="placeDeptNum" label="部门数量">
</el-table-column>
<el-table-column align="center" prop="totalCheck" label="累计业绩">
</el-table-column>
<el-table-column
align="center"
prop="shareCommunityCheck"
label="分红小区考核PV"
width="150"
>
</el-table-column>
<el-table-column
align="center"
prop="shareCommunityCheckEnd"
width="200"
label="分红小区考核结束PV"
>
</el-table-column>
<el-table-column
align="center"
prop="shareTotalCheck"
label="分红累计业绩"
width="150"
>
</el-table-column>
<el-table-column align="center" prop="rangeRatio" label="极差比例">
</el-table-column>
<el-table-column
align="center"
prop="benefitAvgRatio"
label="福利平均比例"
width="140"
>
</el-table-column>
<el-table-column
align="center"
prop="benefitShareRatio"
label="福利加权比例"
width="140"
>
</el-table-column>
<el-table-column
align="center"
prop="pkCheckAwardsLeftVal"
:label="$t('MN_F_T_1234')"
>
</el-table-column>
<el-table-column
align="center"
prop="pkCheckAwardsRightVal"
:label="$t('MN_F_T_1235')"
></el-table-column>
<el-table-column
align="center"
prop="relationType"
:label="$t('MN_F_T_1236')"
:formatter="checkRelation"
></el-table-column>
<el-table-column
align="center"
prop="time"
:label="$t('MY_ORD_14')"
fixed="right"
>
<template slot-scope="scope">
<el-button
@click.native.prevent="update(scope.row, tableData)"
type="text"
size="small"
class="button-s"
style="color: #4391fd"
v-has-buttons="['AwardAllocationRetailEdit']"
>
{{ $t("ENU_CONTROL_TYPE_2") }}
</el-button>
<el-button
@click.native.prevent="updateState(scope.row, tableData)"
type="text"
size="small"
class="button-s"
style="color: #c73030"
>
<!-- 0启用1禁用 -->
{{
scope.row.enableState == 1
? $t("MN_F_T_372")
: $t("MN_F_T_373")
}}
</el-button>
<!-- <el-button
class="button-s"
@click.native.prevent="deleteRow(scope.row, tableData)"
type="text"
size="small"
style="color: #c73030"
>
删除
</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getAwardsList"
/>
<el-dialog
:title="dialogTitle"
:visible.sync="updateShow"
width="50%"
center
:close-on-click-modal="false"
:before-close="handleClose"
>
<el-form ref="form" :rules="rules" :model="form" label-width="auto">
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="奖衔名称" prop="awardsName">
<el-input
clearable
v-model="form.awardsName"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item
:label="'小区考核开始' + `(${isLocals()})`"
prop="communityCheck"
>
<el-input
clearable
v-model="form.communityCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item
:label="$t('ENU_ASS_T_0') + `(${isLocals()})`"
prop="purchaseCheck"
>
<el-input
clearable
v-model="form.purchaseCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item
:label="'小区考核结束' + `(${isLocals()})`"
prop="communityCheckEnd"
>
<el-input
clearable
v-model="form.communityCheckEnd"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="代数" prop="algebra">
<el-input
clearable
v-model="form.algebra"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="分红考核" prop="shareCheck">
<el-input
clearable
v-model="form.shareCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="全球分红" prop="globalDividend">
<el-input
clearable
v-model="form.globalDividend"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="部门数量" prop="placeDeptNum">
<el-input
clearable
v-model="form.placeDeptNum"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="累计业绩" prop="totalCheck">
<el-input
clearable
v-model="form.totalCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="极差比例" prop="rangeRatio">
<el-input
clearable
v-model="form.rangeRatio"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="福利平均比例" prop="benefitAvgRatio">
<el-input
clearable
v-model="form.benefitAvgRatio"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="福利加权比例" prop="benefitShareRatio">
<el-input
clearable
v-model="form.benefitShareRatio"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<!-- <el-col :span="11" style="margin-left: -20px">
<el-form-item label="全球分红(%)" prop="globalDividend">
<el-input
clearable
v-model="form.globalDividend"
placeholder=""
></el-input>
</el-form-item>
</el-col> -->
<el-col :span="11" style="margin-left: -20px">
<el-form-item :label="$t('MN_F_T_1234')" prop="pkCheckAwardsLeft">
<el-select
clearable
v-model="form.pkCheckAwardsLeft"
placeholder=""
>
<el-option
v-for="item in awardsListChiose"
:key="item.pkId"
:label="item.awardsName"
:value="item.pkId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item :label="$t('MN_F_T_1235')" prop="pkCheckAwardsRight">
<el-select
clearable
v-model="form.pkCheckAwardsRight"
placeholder=""
>
<el-option
v-for="item in awardsListChiose"
:key="item.pkId"
:label="item.awardsName"
:value="item.pkId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item :label="$t('MN_F_T_1236')" prop="relationType">
<el-select clearable v-model="form.relationType" placeholder="">
<el-option
v-for="item in relationList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" style="margin-left: 30px">
<el-form-item required label="奖衔属性" prop="awardsValue">
<el-select clearable v-model="form.awardsValue" placeholder="">
<el-option
v-for="item in awardsSxList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="分红小区考核PV" prop="shareCommunityCheck">
<el-input
clearable
v-model="form.shareCommunityCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="分红累计业绩" prop="shareTotalCheck">
<el-input
clearable
v-model="form.shareTotalCheck"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="display: flex; justify-content: space-between">
<el-col :span="11" style="margin-left: -20px">
<el-form-item
label="分红小区考核结束PV"
prop="shareCommunityCheckEnd"
>
<el-input
clearable
v-model="form.shareCommunityCheckEnd"
placeholder=""
></el-input>
</el-form-item>
</el-col>
<el-col :span="11"> </el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label="$t('CK_KS_46')" prop="image">
<imageUpload v-model="form.image" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="form.color"></el-color-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11" style="margin-left: -20px">
<el-form-item label="文字内容" prop="textContent">
<el-input
clearable
v-model="form.textContent"
placeholder=""
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="cancels" @click="handleClose">
{{ $t("ENU_P_TYPE0") }}</el-button
>
<el-button class="submit" type="primary" @click="onSubmit('form')">{{
$t("w_0035")
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import topBar from "@/components/topBar";
import ImageUpload from "@/components/ImageUpload";
import {
getAwardsList,
getAwardsListChiose,
getRelationList,
getOneAwards,
deleteAwards,
scGenerate,
updateAwards,
updateStatusAwards,
getAwardsValueList,
} from "@/api/retailLevel";
import { isLocals } from "@/utils/numberToCurrency";
export default {
name: "retailJxpz",
components: {
topBar,
ImageUpload,
},
data() {
return {
moren: "retailJxpz",
topList: [
{
name: this.$t("MN_F_T_1166"),
path: "retailLevel",
},
{
name: this.$t("MN_F_T_109"),
path: "retailJxpz",
},
{
name: this.$t("MN_F_T_110"),
path: "retailFgjc",
},
],
queryParams: {
pageNum: 1,
pageSize: 50,
},
total: 0,
multipleSelection: [],
tableData: [],
loading: false,
updateShow: false,
awardsListChiose: [], //奖衔选择列表
relationList: [], //考核选择列表
form: {
awardsName: "", //奖衔名称
communityCheck: "", //小区考核
purchaseCheck: "", //复购考核
communityCheckEnd: "", //分红考核
globalDividend: "", //全球分红
pkCheckAwardsLeft: "", //左区奖衔
pkCheckAwardsRight: "", //右区奖衔
relationType: "", //考核
awardsValue: "", //奖衔属性
color: "",
image: "",
textContent: "",
algebra: "",
shareCheck: "",
placeDeptNum: "",
totalCheck: "",
rangeRatio: "",
benefitAvgRatio: "",
benefitShareRatio: "",
shareCommunityCheck: "",
shareCommunityCheckEnd: "",
shareTotalCheck: "",
},
rules: {
awardsName: [
{ required: true, message: "请输入奖衔名称", trigger: "blur" },
],
communityCheck: [
{ required: true, message: "请输入", trigger: "blur" },
],
purchaseCheck: [
{ required: true, message: "请输入PV", trigger: "blur" },
],
communityCheckEnd: [
{ required: true, message: "请输入", trigger: "blur" },
],
// globalDividend: [
// { required: true, message: "请输入全球分红", trigger: "blur" },
// ],
// pkCheckAwardsLeft: [
// { required: true, message: "请选择左区奖衔", trigger: "change" },
// ],
// pkCheckAwardsRight: [
// { required: true, message: "请选择右区奖衔", trigger: "change" },
// ],
// relationType: [
// { required: true, message: "请选择考核", trigger: "change" },
// ],
color: [{ required: true, message: "请选择颜色", trigger: "change" }],
// image: [
// { required: true, message: "请选择图片", trigger: "change" },
// ],
},
dialogTitle: "",
addEdit: "",
awardsSxList: [], //奖衔属性
};
},
created() {
this.getAwardsList();
this.getAwardsListChiose();
this.getRelationList();
this.getAwardsValueList();
},
methods: {
isLocals,
//奖衔属性
getAwardsValueList() {
getAwardsValueList().then((res) => {
this.awardsSxList = res.data;
});
},
//启用/禁用
updateState(row) {
this.$confirm(this.$t("MN_F_T_804"), this.$t("w_0034"), {
confirmButtonText: this.$t("w_0035"),
cancelButtonText: this.$t("ENU_P_TYPE0"),
type: "warning",
}).then(() => {
var thestate = "";
if (row.enableState == 0) {
thestate = 1;
} else if (row.enableState == 1) {
thestate = 0;
}
updateStatusAwards({ pkId: row.pkId, enableState: thestate }).then(
(res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: "success",
});
// 获取列表
this.getAwardsList();
}
}
);
});
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url = "";
if (this.addEdit == 1) {
//添加
url = scGenerate;
} else {
//修改
url = updateAwards;
}
//修改
url(this.form).then((res) => {
if (res.code == 200) {
this.updateShow = false;
this.$message({
message: res.msg,
type: "success",
});
this.getAwardsList();
this.addEdit = "";
}
});
} else {
return false;
}
});
},
//点击添加
adddate() {
this.dialogTitle = this.$t("w_0328");
this.updateShow = true;
this.addEdit = 1;
this.$refs["form"].clearValidate();
this.$refs["form"].resetFields();
// scGenerate({}).then(res=>{
// if(res.code==200){
// this.getAwardsList()
// }
// })
},
//修改
update(row, item) {
this.addEdit = 2;
this.updateShow = true;
this.dialogTitle = this.$t("PER_DA_20");
getOneAwards(row.pkId).then((res) => {
this.form = res.data;
});
},
getAwardsListChiose() {
//奖衔配置下拉选
getAwardsListChiose().then((res) => {
this.awardsListChiose = res.rows;
});
},
//奖衔列表
getAwardsList() {
this.loading = true;
getAwardsList(this.queryParams).then((res) => {
this.tableData = res.rows;
this.total = res.total;
this.loading = false;
});
},
//关闭弹窗
handleClose() {
this.updateShow = false;
this.$refs["form"].clearValidate();
this.$refs["form"].resetFields();
},
//考核类型枚举列表下拉
getRelationList() {
getRelationList().then((res) => {
this.relationList = res.data;
});
},
//列表展示考核
checkRelation(row) {
let kaohe = "";
if (this.relationList) {
this.relationList.map((item) => {
if (row.relationType == item.value) {
kaohe = item.label;
}
});
}
return kaohe;
},
//列表展示左右区奖衔
checkAwards(row) {
let state = "";
if (this.awardsListChiose) {
this.awardsListChiose.map((element) => {
if (row.pkCheckAwardsLeft == element.awardsValue) {
state = element.awardsName;
}
});
}
return state;
},
checkAwards2(row) {
let state2 = "";
if (this.awardsListChiose) {
this.awardsListChiose.map((element) => {
if (row.pkCheckAwardsRight == element.awardsValue) {
state2 = element.awardsName;
}
});
}
return state2;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
//删除
deleteRow(row, item) {
this.$confirm(this.$t("MN_F_T_431")).then((_) => {
deleteAwards(row.pkId).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: "success",
});
this.getAwardsList();
}
});
});
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
} else if (rowIndex % 2 == 0) {
return "success-row";
}
return "";
},
},
};
</script>
<style lang="scss" scoped>
.button-s {
padding: 3px 0;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
::v-deep .el-select {
width: 100%;
}
.submit {
width: 209px;
height: 48px;
background: #c8161d;
border-radius: 5px;
color: #fff;
font-size: 18px;
border-color: #c8161d;
margin-left: 20px;
}
.cancels {
width: 209px;
height: 48px;
background: #cccccc;
border-radius: 5px;
color: #fff;
font-size: 18px;
border-color: #ccc;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
.page {
padding: 10px 20px;
background: #f9f9f9;
font-size: 14px;
.main {
//margin-top: 20px;
//background: #ffffff;
//border-radius: 8px;
//box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
background: #f9f9f9;
.maintop {
display: flex;
// padding: 10px 0;
justify-content: space-between;
align-items: center;
.mainbtn {
.thebtn1 {
color: #ffffff;
background: #3181e5;
}
.thebtn2 {
color: #ffffff;
background: #ffad41;
}
}
}
}
}
</style>