Skip to content

H
haoban-4
Commit d780726e by 无尘
Options

fix: 修改路由

parent 19c902ad
Showing with 788 additions and 2 deletions
src/api/target-manage-app.js
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2020-11-09 10:15:36
* @LastEditors: 无尘
* @LastEditTime: 2020-11-09 10:17:03
* @LastEditTime: 2020-11-12 11:26:09
*/
import getFetch from './get-fetch.js';
......@@ -13,6 +13,20 @@ let api = {
// 指标管理
getTargetList: '/', // 获取指标列表
getDaySet: '/', // 获取日指标设置
saveDaySet: { // 保存日指标设置
url: '/',
method: 'post',
useFormData: true,
useIntercept: false
},
getSaleSet: '/', // 获取导购指标设置
saveSaleSet: { // 保存导购指标设置
url: '/',
method: 'post',
useFormData: true,
useIntercept: false
},
};
api = getFetch(api, '/hb-app-customer-web');
......
src/router/routes.js
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2020-07-16 16:37:05
* @LastEditors: 无尘
* @LastEditTime: 2020-11-09 10:39:13
* @LastEditTime: 2020-11-12 11:33:51
*/
import _import from './_import.js';
......@@ -233,6 +233,16 @@ export const routes = [
component: _import('apps/target-manage', 'target-store')
},
{
path: '/perfect-sale-target',
name: '完善导购指标',
component: _import('apps/target-manage', 'perfect-sale-target')
},
{
path: '/perfect-day-target',
name: '完善日指标',
component: _import('apps/target-manage', 'perfect-day-target')
},
{
path: '/set-month-target',
name: '设置月指标',
component: _import('apps/target-manage', 'set-month-target')
......
src/views/apps/target-manage/perfect-day-target.vue 0 → 100644
<!--
* @Descripttion: 完善日指标
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-11-12 10:47:17
* @LastEditors: 无尘
* @LastEditTime: 2020-11-12 11:19:24
-->
<template>
<div class="app-detail-wrap common-right-wrap">
<div class="day-set-content border-box">
<div class="day-set-title m-b-20">
<span class="font-18 color-303133">{{ yearMonth }}</span><el-tooltip class="item" effect="dark" placement="right">
<div slot="content">首次设置提交即下发门店月指标任务；<br />门店月指标将依照日权重自动分配，日指标=当月月指标*（日权重/∑当月日权重）；</div>
<span class="font-14 color-606266 m-l-10" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">{{ brandName }}日权重</span>
</el-tooltip>
</div>
<section>
<div class="week">
<div class="week-head day w-p-14">周日</div>
<div class="week-head day w-p-14">周一</div>
<div class="week-head day w-p-14">周二</div>
<div class="week-head day w-p-14">周三</div>
<div class="week-head day w-p-14">周四</div>
<div class="week-head day w-p-14">周五</div>
<div class="week-head day w-p-14">周六</div>
</div>
<div class="week week-body">
<!-- 空格 -->
<template v-if="myObject.hasEmptyGrid">
<div class="day grid white-color" v-for="(it, index) in myObject.empytGrids" :key="index + 'empytGrids'"></div>
</template>
<div class="day w-p-14 selectable" :class="day == 0 ? 'hide' : ''" v-for="(day, index) in myObject.days" :key="index">
<div class="w-120 font-14 color-909399 day-performance">{{ day.month + '-' + day.performanceDay }}</div>
<div class="target-value ">
<el-input class="w-120" maxlength="50" v-model="day.weightValue" placeholder="请输入权重值" :disabled="settingAble == 0"></el-input>
</div>
</div>
<template v-if="myObject.hasLastEmptyGrid">
<div class="day grid white-color" v-for="(it, index) in myObject.lastEmpytGrids" :key="index + 'lastEmpytGrids'"></div>
</template>
</div>
</section>
<div class="day-set-btn m-t-24 text-center" v-if="settingAble == 1">
<el-button type="primary" plain @click="resetData">重置</el-button>
<el-button type="primary" @click="saveSet">提交</el-button>
</div>
</div>
</div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import fetch from '@/api/target-manage-app.js';
const { saveDaySet, getDaySet } = fetch;
export default {
name: 'PerfectDayTarget',
components: {},
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
activeTab: '1',
brandName: '', // 商户(品牌) 名
activeBrand: this.brandId, // 商户(品牌) id
yearMonth: '',
activeId: '3',
myObject: {
hasEmptyGrid: false,
empytGrids: [],
days: [],
hasLastEmptyGrid: false,
lastEmpytGrids: [],
beginDate: '',
endDate: ''
},
performanceWeightSettingList: [],
settingStatus: 1, // 权重设置状态（0：未设置，1：已设置）
settingAble: 1 // 是否可设置权重（0：不可设置，1：可设置）
};
},
mounted() {
let that = this;
document.documentElement.style.backgroundColor = '#f0f2f5';
that.$emit('showTab', '/target-list');
if (!!that.brandId) {
that.yearMonth = that.$route.query.yearMonth;
that.getData();
}
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
methods: {
/**
* @description: 判断闰年还是平年
* @param {Number} year
* @returns {Boolean}
* @author: 无尘
*/
isLeap: function(year) {
return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0) ? true : false;
},
/**
* @description: 获取某一年各月的天数
* @param {Number} year
* @returns {Number}
* @author: 无尘
*/
monthDays: function(year) {
return [ 31, 28 + this.isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
},
/**
* @description: 一位数添加 0
* @param {Number} num
* @returns {String}
* @author: 无尘
*/
addZero(num) {
return num < 10 ? '0' + parseInt(num) : num;
},
// 获取当月有多少天（下个月月初是多少）
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
// 获取当月第一周第一天是周几
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
// 获取当月最后一天是周几
getLastDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, this.getThisMonthDays(year, month))).getDay();
},
// 获取当年月日是周几
getYearMonthDayWeek(year, month, day) {
return new Date(year, month - 1, day).getDay();
},
// 判断是否跨月
isOverMonth(beginDate, endDate) {
return beginDate.split('-')[1] == endDate.split('-')[1];
},
// 计算当前年月空的几天
async calculateEmptyGrids(year, month) {
const firstDayOfWeek = await this.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
empytGrids.push(i);
}
}
return empytGrids;
},
// 计算当前年月日 之前空的几天
async calDayEmptyGrids(year, month, day) {
const beginDayOfWeek = await this.getYearMonthDayWeek(year, month, day);
let beginEmpytGrids = [];
if (beginDayOfWeek > 0) {
for (let i = 0; i < beginDayOfWeek; i++) {
beginEmpytGrids.push(i);
}
}
return beginEmpytGrids;
},
// 计算当前年月最后几天空的几天
async calculateLastEmptyGrids(year, month) {
const lastDayOfWeek = await this.getLastDayOfWeek(year, month);
let lastEmpytGrids = [];
if (lastDayOfWeek >= 0) {
for (let i = 0; i < 6 - lastDayOfWeek; i++) {
lastEmpytGrids.push(i);
}
}
return lastEmpytGrids;
},
// 计算当前年月日 后空的几天
async calLastEmptyGrids(year, month, day) {
const endDayOfWeek = await this.getYearMonthDayWeek(year, month, day);
let endEmpytGrids = [];
if (endDayOfWeek >= 0) {
for (let i = 0; i < 6 - endDayOfWeek; i++) {
endEmpytGrids.push(i);
}
}
return endEmpytGrids;
},
async calculateDays(year, month, beginDate, endDate) {
let that = this;
let myObject = {}; // 月对象
myObject['beginDate'] = beginDate; // 开始日期
myObject['endDate'] = endDate; // 结束日期
myObject['year'] = year;
myObject['month'] = await that.addZero(month);
let startDayArr = beginDate.split('-');
let endDayArr = endDate.split('-');
let isOverFlag = await that.isOverMonth(beginDate, endDate); // 是否跨月
// 计算当前开始日期 年月日空的几天
let empytGrids = await that.calDayEmptyGrids(startDayArr[0], startDayArr[1], startDayArr[2]);
if (empytGrids.length > 0) {
myObject['hasEmptyGrid'] = true;
myObject['empytGrids'] = empytGrids;
} else {
myObject['hasEmptyGrid'] = false;
myObject['empytGrids'] = [];
}
// 最后空格
let lastEmpytGrids = await that.calLastEmptyGrids(endDayArr[0], endDayArr[1], endDayArr[2]);
if (lastEmpytGrids.length > 0) {
myObject['hasLastEmptyGrid'] = true;
myObject['lastEmpytGrids'] = lastEmpytGrids;
} else {
myObject['hasLastEmptyGrid'] = false;
myObject['lastEmpytGrids'] = [];
}
if (!!isOverFlag) {
// 不跨月
myObject['days'] = await that.setCurrentMonth(startDayArr[0], startDayArr[1], startDayArr[2], endDayArr[2]);
} else {
// 跨月（先计算当月+再计算下月）
let thisMonthDays = await that.getThisMonthDays(startDayArr[0], startDayArr[1]); // 这个月有多少天
let currentDays = await that.setCurrentMonth(startDayArr[0], startDayArr[1], startDayArr[2], thisMonthDays);
let nextDays = await that.setCurrentMonth(endDayArr[0], endDayArr[1], 1, endDayArr[2]);
myObject['days'] = [ ...currentDays, ...nextDays ];
}
that.myObject = myObject;
return myObject;
},
/**
* @description: 设置权重
* @param {Number} year
* @param {Number} month
* @param {Number} startDay
* @param {Number} endDay
* @returns {Array}
* @author: 无尘
*/
setCurrentMonth(year, month, startDay, endDay) {
let that = this;
let days = [];
for (let i = startDay; i <= endDay; i++) {
let day = {};
/* 判断权重值 */
if (!!that.performanceWeightSettingList.length) {
that.performanceWeightSettingList.forEach(function(ele, index) {
if (parseInt(ele.date.split('-')[2]) == i) {
day['weightValue'] = Number(ele.weightValue).toFixed(2);
}
});
} else {
let dayWeek = that.getYearMonthDayWeek(year, month, i);
if (dayWeek == 5) {
day['weightValue'] = Number(1.8).toFixed(2);
} else if (dayWeek == 6 || dayWeek == 0) {
day['weightValue'] = Number(2.0).toFixed(2);
} else {
day['weightValue'] = Number(1.0).toFixed(2);
}
}
day['performanceDay'] = that.addZero(i);
day['date'] = year + '-' + that.addZero(month) + '-' + that.addZero(i);
day['month'] = that.addZero(month);
days.push(day);
}
return days;
},
/**
* @description: 重置
* @author: 无尘
*/
resetData() {
let that = this;
that.performanceWeightSettingList = [];
let yearMonthArr = that.yearMonth.split('-');
that.calculateDays(yearMonthArr[0], yearMonthArr[1], that.myObject.beginDate, that.myObject.endDate);
},
/**
* @description: 保存
* @author: 无尘
*/
saveSet: _debounce(function() {
const that = this;
let flagTip = true;
that.myObject.days.forEach(ele => {
if (!ele.weightValue || ele.weightValue <= 0 || !Number(ele.weightValue)) {
flagTip = false;
}
});
if (!flagTip) {
that.$confirm('每日的权重不能为空,必须为数字,且不小于 0 ?', '提示', {
confirmButtonText: '确定',
showCancelButton: false,
type: 'warning'
}).then(() => {});
return false;
}
that
.$confirm(that.settingStatus == 0 ? '点击即下发门店月指标任务，请确认是否提交？' : '此次提交只影响日指标值，不会触发月指标任务，请确认是否提交？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postSave(that.myObject.days);
})
.catch(() => {});
}, 500),
postSave(data) {
let that = this;
let para = {
enterpriseId: that.activeBrand,
yearMonth: that.yearMonth,
performanceWeightSettingList: JSON.stringify(data)
};
saveDaySet( para)
.then(res => {
if (res.code == '0000') {
showMsg.showmsg('保存成功', 'success');
// 重新获取设置数据，有些设置后不可修改
that.getData();
return;
}
errMsg.errorMsg(res);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取设置数据
*/
getData() {
let that = this;
let para = {
enterpriseId: that.activeBrand,
yearMonth: that.yearMonth
};
getDaySet(para)
.then(res => {
let yearMonthArr = that.yearMonth.split('-');
if (res.code == '0000') {
that.performanceWeightSettingList = res.result.performanceWeightSettingList || [];
that.settingStatus = res.result.settingStatus;
that.settingAble = res.result.settingAble;
that.brandName = res.result.enterpriseName;
that.myObject.beginDate = res.result.beginDate;
that.myObject.endDate = res.result.endDate;
// 计算 填充日期和权重值
that.calculateDays(yearMonthArr[0], yearMonthArr[1], res.result.beginDate, res.result.endDate);
return;
}
errMsg.errorMsg(res);
// 未与 GIC 商户关联 处理
that.settingAble = 0;
// that.calculateDays(yearMonthArr[0], yearMonthArr[1]);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.activeBrand = newData;
that.yearMonth = that.$route.query.yearMonth;
that.getData();
}
}
},
};
</script>
<style type="text/less" lang="less" scoped>
.day-set-content {
padding: 20px;
box-sizing: border-box;
.w-p-14 {
width: 14%;
}
.w-120 {
width: 120px;
}
.m-t-16 {
margin-top: 16px;
}
.m-t-24 {
margin-top: 24px;
}
.p-l-18 {
padding-left: 18px;
}
.p-l-8 {
padding-left: 8px;
}
.font-8 {
font-size: 8px;
}
.color-c0c4cc {
color: #c0c4cc;
}
.week {
display: block;
clear: both;
overflow: hidden;
.week-head {
height: 44px;
border: 1px solid #e3e5e9;
background: #f1f3f7;
justify-content: center;
& + .week-head {
border-left: none;
}
}
&.week-body {
.white-color {
width: 14%;
height: 80px;
}
.day-performance {
margin: 5px 0 16px 0;
}
.day {
border: 1px solid #e3e5e9;
height: 80px;
border-top: none;
&.day:nth-child(7n + 1) {
border-left: 1px solid #e3e5e9;
}
& + .day {
border-left: none;
}
}
}
.day {
float: left;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
&.week-head {
justify-content: center;
}
}
.target-value {
height: 20px;
line-height: 20px;
}
}
}
</style>
src/views/apps/target-manage/perfect-sale-target.vue 0 → 100644
<!--
* @Descripttion: 完善导购指标
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-11-12 10:48:40
* @LastEditors: 无尘
* @LastEditTime: 2020-11-12 11:32:52
-->
<template>
<div class="app-detail-wrap common-right-wrap">
<div class="task-set-content border-box">
<div class="saler-set-title flex flex-space-between m-b-15">
<div class="saler-set-title_left">
<span>{{ clerkObj.yearMonth }}</span><span class="p-l-18">{{ clerkObj.storeName }}门店导购月指标详情</span>
</div>
<!-- <div class="saler-set-title_right"><span>门店月指标：</span><el-input class="w-105 p-l-8" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)"></el-input></div> -->
</div>
<div class="saler-set-table">
<el-table class="select-table" ref="multipleTable" :span-method="objectSpanMethod" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column label="导购">
<template slot-scope="scope">
<div>{{ scope.row.clerkName }}</div>
</template>
</el-table-column>
<el-table-column label="月指标">
<template slot-scope="scope">
<div>
<el-input class="w-120 p-l-8" maxlength="50" v-model="scope.row.clerkPerformance" placeholder="请输入" :disabled="clerkObj.settingAble == 0 || scope.row.bindFlag == 0" @blur="value => inputPerformance(value, scope.$index, scope.row)">
<i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 12px;">￥</i>
</el-input>
</div>
</template>
</el-table-column>
<el-table-column label="总计=门店月指标" width="418px">
<template >
<div><span class="font-14 color-606266 text-left">总计</span><span class=" p-l-175 font-14 color-606266 text-left">门店月指标</span></div>
<div style="margin-top: 4px;">
<el-input class="w-161" v-model="performanceSum" disabled>
<i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 10px;">￥</i>
</el-input>
<span class="p-l-10 p-r-10">=</span>
<el-input class="w-161 p-l-8" maxlength="50" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)">
<i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 16px;">￥</i>
</el-input>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="task-set-save text-center m-t-30">
<el-button v-if="clerkObj.settingAble == 1" :disabled="!equalFlag ? true : false" type="primary" @click="saveSet">确认</el-button>
</div>
</div>
</div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import fetch from '@/api/target-manage-app.js';
const { saveSaleSet, getSaleSet } = fetch;
export default {
name: 'PerfectSaleTarget',
components: {},
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
tableH: window.screen.availHeight - 464 - 126,
activeTab: '1',
activeBrand: this.brandId, // 商户(品牌) id
operationStaffName: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).staffDTO['staffName'] : '',
activeId: '4',
tableData: [],
performanceSum: '0.00', // 总指标
clerkObj: {
storeId: '',
storeName: '',
yearMonth: '',
settingAble: 1,
storePerformance: ''
},
equalFlag: true // 相等标志
};
},
mounted() {
let that = this;
document.documentElement.style.backgroundColor = '#f0f2f5';
that.$emit('showTab', '1');
if (!!that.brandId) {
that.clerkObj.yearMonth = that.$route.query.yearMonth;
that.clerkObj.storeId = that.$route.query.storeId;
that.getData();
}
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const that = this;
if (columnIndex === 2) {
if (rowIndex == 0) {
return {
rowspan: that.tableData.length,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
/**
* @description:输入
* @param {Function} val
* @param {Number} index
* @param {Object} row
* @author: 无尘
*/
inputPerformance: function(val, index, row) {
const that = this;
row.clerkPerformance = !!Number(row.clerkPerformance.replace(/[^\d.]/g, '')) ? row.clerkPerformance.replace(/[^\d+(.\d+)]/g, '') : '';
row.clerkPerformance = Number(row.clerkPerformance).toFixed(2);
let sumData = 0;
that.tableData.forEach(ele => {
sumData += Number(ele.clerkPerformance);
});
that.performanceSum = Number(sumData).toFixed(2);
that.diffData();
},
inputMonthPerformance: function(val) {
let that = this;
that.clerkObj.storePerformance = !!Number(that.clerkObj.storePerformance.replace(/[^\d.]/g, '')) ? that.clerkObj.storePerformance.replace(/[^\d+(.\d+)]/g, '') : '';
that.clerkObj.storePerformance = Number(that.clerkObj.storePerformance).toFixed(2);
that.diffData();
},
diffData() {
let that = this;
let dataFlag = Number(that.performanceSum) == Number(that.clerkObj.storePerformance);
if (!dataFlag) {
that.equalFlag = false;
} else {
that.equalFlag = true;
}
return dataFlag;
},
/**
* @description:保存
* @author: 无尘
*/
saveSet: _debounce(function() {
const that = this;
if (!that.diffData()) {
return false;
}
/* 非空验证 */
if (that.clerkObj.storePerformance == '') {
that.$message.error({
duration: 1000,
message: '请输入门店月指标'
});
return false;
}
const data = {
clerkPerformanceList: that.tableData,
storePerformance: that.clerkObj.storePerformance,
operationStaffName: that.operationStaffName
};
that.postSave(data);
}, 500),
postSave(data) {
const that = this;
const para = {
enterpriseId: that.activeBrand,
storeId: that.clerkObj.storeId,
yearMonth: that.clerkObj.yearMonth,
performance: JSON.stringify(data)
};
saveSaleSet(para)
.then(res => {
if (res.code == '0000') {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(res);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* @description:获取设置数据
* @author: 无尘
*/
getData() {
const that = this;
const para = {
enterpriseId: that.activeBrand,
storeId: that.clerkObj.storeId,
yearMonth: that.clerkObj.yearMonth
};
getSaleSet(para)
.then(res => {
if (res.code == '0000') {
if (!!res.result.clerkPerformanceList && !!res.result.clerkPerformanceList.length) {
res.result.clerkPerformanceList.forEach(ele => {
ele.clerkPerformance = Number(ele.clerkPerformance).toFixed(2);
});
that.tableData = res.result.clerkPerformanceList || [];
}
res.result.storePerformance = Number(res.result.storePerformance).toFixed(2);
that.clerkObj = res.result;
let allSum = 0;
that.tableData.forEach(ele => {
allSum += Number(ele.clerkPerformance);
});
that.performanceSum = Number(allSum).toFixed(2);
return;
}
errMsg.errorMsg(res);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
if (!!newData) {
that.activeBrand = newData;
that.clerkObj.yearMonth = that.$route.query.yearMonth;
that.clerkObj.storeId = that.$route.query.storeId;
that.getData();
}
}
},
};
</script>
<style type="text/scss" lang="scss" scoped>
.task-set-content {
padding: 20px;
box-sizing: border-box;
.w-105 {
width: 105px;
}
.w-120 {
width: 120px;
}
.w-161 {
width: 161px;
}
.m-b-15 {
margin-bottom: 15px;
}
.p-l-8 {
padding-left: 8px;
}
.p-l-18 {
padding-left: 18px;
}
.p-l-24 {
padding-left: 24px;
}
.p-l-175 {
padding-left: 175px;
}
.color-1890ff {
color: #2f54eb;
}
.color-f5222d {
color: #f5222d;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment