补充内容
Wangxubin1999
3 years ago
parent
be4baf6eb6
commit
8b42cd2108
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div style="width: 300px;overflow: hidden;" class="border-radius-10 border margin-right-xs bg-white ">
|
||||
<el-table :data="staffLists" max-height="300" class="margin-xs" style="width:280px" :row-class-name="rowClassName">
|
||||
<el-table-column align="left" prop="brandNumber" label="水牌号--员工名字" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-select style="width:180px" v-model="scope.row.staffNames" clearable @clear="clear(scope.$index)"
|
||||
no-match-text="重新选择员工" placeholder="请选择" @change="ratioChange($event, scope.$index)" filterable
|
||||
default-first-option>
|
||||
<el-option v-for="(item, index) in staffList" :key="index" :label="item.brandNumber + '--' + item.staffName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="ratio" label="占比(%)" width="80">
|
||||
<template slot-scope="scope">
|
||||
<div class="form-input-width" v-if="editIndex != scope.$index"
|
||||
@click="openStaffRatio(scope.$index, scope.row)">
|
||||
{{ scope.row.ratio }}
|
||||
<i class="el-icon-edit text-cyan" v-if="scope.$index != 0"></i>
|
||||
</div>
|
||||
<el-input v-focus class="form-input-width-xs" size="samll" type="number" v-else v-model="scope.row.ratio" @blur="endStaffRatio(scope.row, scope.$index)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="width: 150px;margin:10px auto;" class="flex justify-between align-center">
|
||||
<el-button size="mini" type="info" :disabled="staffLists.length == 0" @click="delsalesman">撤销</el-button>
|
||||
<el-button size="mini" type="primary" plain :disabled='isTrue'
|
||||
@click="handleadd">增加
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectList } from "@/api/eashier.js";
|
||||
export default {
|
||||
props:{
|
||||
isTrue:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
staffList: [], //选择员工数组
|
||||
staffLists: [{ ratio: 100 }], //员工占比初始化 //主员工数组
|
||||
editIndex: -1, //员工占比修改下标
|
||||
staffListCopy: [], //复制选择员工数组
|
||||
storeId: null, //当前门店id
|
||||
nums:"",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 限制最多添加八个
|
||||
handleadd(){
|
||||
if(this.staffLists.length>=8)return this.$message({message: '最多只能添加八条', type: 'warning'});
|
||||
this.staffLists.push({ brandNumber: '', staffName: '', ratio: 0 })
|
||||
},
|
||||
rowClassName({ row, rowIndex }) {
|
||||
row.index = rowIndex;
|
||||
},
|
||||
//下拉选择方法
|
||||
ratioChange(v, index) {
|
||||
this.staffList.forEach((item) => {
|
||||
if (item.id == v) {
|
||||
item.ratio = this.staffLists[index].ratio;
|
||||
item.staffNames = item.brandNumber + "--" + item.staffName;
|
||||
this.staffLists.splice(index, 1, item);
|
||||
}
|
||||
});
|
||||
this.staffLists.forEach((item, indexs) => {
|
||||
if (index != indexs && v == item.id) {
|
||||
this.staffLists.splice(index, 1, { ratio: 0 });
|
||||
|
||||
this.setRatio();
|
||||
this.$message.warning({ message: "员工已存在列表中" });
|
||||
}
|
||||
});
|
||||
let length = this.staffLists.length - 1;
|
||||
if (this.staffLists[length].id) {
|
||||
this.staffLists.push({ ratio: 0 });
|
||||
}
|
||||
this.changeStaff();
|
||||
this.confirm();
|
||||
},
|
||||
setRatio() {
|
||||
let num = 0;
|
||||
this.staffLists.forEach((item, i) => {
|
||||
if (i != 0) {
|
||||
num += item.ratio * 1;
|
||||
}
|
||||
});
|
||||
this.nums=this.staffLists[0].ratio;
|
||||
this.staffLists[0].ratio = 100 - num;
|
||||
},
|
||||
//删除当前选择
|
||||
clear(index) {
|
||||
this.staffLists.splice(index, 1);
|
||||
this.setRatio();
|
||||
this.changeStaff();
|
||||
this.confirm();
|
||||
},
|
||||
//打开员工修改输入框
|
||||
openStaffRatio(index, row) {
|
||||
if (index != 0 || row.ratio * 1 != 100) {
|
||||
let form = { ...row };
|
||||
this.editIndex = index;
|
||||
this.staffLists.splice(index, 1, form);
|
||||
}
|
||||
},
|
||||
//关闭员工修改输入框
|
||||
endStaffRatio(row, index) {
|
||||
if (index != 0) {
|
||||
this.setRatio();
|
||||
if (this.staffLists[0].ratio < 1) {
|
||||
this.$message.error({
|
||||
message: "第一位员工占比过低",
|
||||
});
|
||||
this.staffLists.forEach((item) => {
|
||||
if (item.ratio >= this.nums) {
|
||||
item.ratio = 0;
|
||||
|
||||
}
|
||||
});
|
||||
let number = 0;
|
||||
this.staffLists.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
console.l
|
||||
}
|
||||
this.staffLists[0].ratio = 100 - number
|
||||
});
|
||||
|
||||
} else if (this.staffLists[0].ratio > 100) {
|
||||
this.$message.error({
|
||||
message: "第一位员工占比过高",
|
||||
});
|
||||
this.staffLists.forEach((item) => {
|
||||
if (item.ratio < 1) {
|
||||
item.ratio = 0;
|
||||
|
||||
}
|
||||
});
|
||||
let number = 0;
|
||||
this.staffLists.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
console.l
|
||||
}
|
||||
this.staffLists[0].ratio = 100 - number
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (!row.ratio) {
|
||||
row.ratio = 0;
|
||||
} else {
|
||||
if (row.ratio < 0) {
|
||||
// this.staffLists.forEach((item, index) => {
|
||||
this.$message.error({
|
||||
message: "输入不能小于0",
|
||||
});
|
||||
row.ratio = 0;
|
||||
|
||||
// });
|
||||
let number = 0;
|
||||
this.staffLists.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
}
|
||||
this.staffLists[0].ratio = 100 - number
|
||||
});
|
||||
} else {
|
||||
row.ratio = row.ratio * 1;
|
||||
}
|
||||
|
||||
}
|
||||
let form = this.staffLists[index];
|
||||
this.editIndex = -1;
|
||||
this.staffLists.splice(index, 1, form);
|
||||
}
|
||||
}
|
||||
this.changeStaff();
|
||||
this.confirm();
|
||||
},
|
||||
//撤销增加员工
|
||||
delsalesman() {
|
||||
let index = this.staffLists.length - 1;
|
||||
if (index == 0) {
|
||||
this.$message.warning({ message: "第一行员工只能修改" });
|
||||
} else {
|
||||
let ratio = this.staffLists[index].ratio;
|
||||
this.staffLists[0].ratio += ratio;
|
||||
this.staffLists.splice(index, 1);
|
||||
}
|
||||
this.changeStaff();
|
||||
this.confirm();
|
||||
},
|
||||
//组件传值
|
||||
show(list, storeId) {
|
||||
this.staffLists = [...list];
|
||||
|
||||
this.staffLists.forEach((item) => {
|
||||
if (item.id || item.saleStaffId) {
|
||||
item.staffNames = item.brandNumber + "-" + item.staffName;
|
||||
} else {
|
||||
item.staffNames = "";
|
||||
}
|
||||
});
|
||||
console.log("🚀 ~ file: index.vue ~ line 202 ~ show ~ this.staffLists", this.staffLists)
|
||||
if (storeId) {
|
||||
this.storeId = storeId;
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
//确定返回方法
|
||||
confirm() {
|
||||
let list = [];
|
||||
this.staffLists.forEach((item) => {
|
||||
let items = {
|
||||
id: item.id,
|
||||
ratio: item.ratio,
|
||||
brandNumber: item.brandNumber,
|
||||
staffName: item.staffName,
|
||||
identityCard: item.identityCard,
|
||||
storeId: item.storeId,
|
||||
storeName: item.storeName,
|
||||
staffNames: item.brandNumber + "--" + item.staffName,
|
||||
staffType: 2,
|
||||
};
|
||||
list.push(items);
|
||||
});
|
||||
|
||||
this.$emit("staffslesData", list);
|
||||
console.log("🚀 ~ file: index.vue ~ line 222 ~ confirm ~ list", list)
|
||||
},
|
||||
//改变员工 去除未选择员工列表中的员工
|
||||
changeStaff() {
|
||||
var that = this;
|
||||
let arr = [];
|
||||
this.staffLists.forEach((item) => {
|
||||
let list = [];
|
||||
this.staffListCopy.forEach((items) => {
|
||||
if (item.id != items.id) {
|
||||
list.push(items);
|
||||
}
|
||||
});
|
||||
arr = list;
|
||||
});
|
||||
// var list = that.staffLists
|
||||
// .concat(that.staffListCopy)
|
||||
// .filter(function (v) {
|
||||
// return (
|
||||
// that.staffLists.indexOf(v) === -1 ||
|
||||
// that.staffListCopy.indexOf(v) === -1
|
||||
// );
|
||||
// });
|
||||
// list.forEach((item) => {
|
||||
// if (item.id) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
|
||||
this.staffList = this.noRepeat(arr);
|
||||
},
|
||||
//获取员工数据
|
||||
//获取数据
|
||||
async getData() {
|
||||
let form = { id: this.storeId };
|
||||
if (this.storeId) {
|
||||
form.storeId = this.storeId;
|
||||
}
|
||||
selectList(form).then((res) => {
|
||||
if (res.code == "000000") {
|
||||
res.rows.forEach((item) => {
|
||||
item.editStaffRatioShow = false;
|
||||
});
|
||||
this.staffList = res.rows;
|
||||
this.staffListCopy = res.rows;
|
||||
this.changeStaff();
|
||||
} else {
|
||||
this.$alert(res.message, "加载员工提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-model="false" v-dialogDrag :title="staffTitle" :visible.sync="dialogVisible" width="500px"
|
||||
append-to-body :before-close="handleClose">
|
||||
<el-button size="mini" type="primary" @click="add()">添加</el-button>
|
||||
<el-button size="mini" type="primary" @click="del()">删除</el-button>
|
||||
<div class="flex">
|
||||
<el-table :data="list" max-height="600">
|
||||
<el-table-column align="center" :label="staffTitle">
|
||||
<el-table-column min-width="140" align="center" label="员工">
|
||||
<template slot-scope="scope">
|
||||
<el-select filterable default-first-option v-model="scope.row.label" placeholder="请选择"
|
||||
@click="editclick($event, scope.$index)" @change="editChange($event, scope.$index)">
|
||||
<el-option v-for="item in openList" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" align="center" label="占比">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-focus type="number" @blur="endEdit(scope.row, scope.$index)" :disabled="scope.$index == 0"
|
||||
size="samll" v-model="scope.row.ratio"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="confirms()">确 定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectList, selectListType, QuerCompetent } from "@/api/eashier.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹窗开关
|
||||
staffList: [],
|
||||
list: [], //主数组
|
||||
form: {}, //主对象
|
||||
openList: [],
|
||||
staffText: "",
|
||||
staffTexts: "",
|
||||
staffTitle: "",
|
||||
staffTitles: "",
|
||||
staffListCopy: [],
|
||||
lists: [],
|
||||
len: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
|
||||
let forms = {
|
||||
// text: this.staffTexts,
|
||||
list: this.lists
|
||||
};
|
||||
|
||||
this.$emit("staffratioData", forms);
|
||||
this.dialogVisible = false;
|
||||
|
||||
},
|
||||
add() {
|
||||
this.list.push({ label: "", ratio: 0 });
|
||||
this.changeStaff();
|
||||
},
|
||||
endEdit(row, index) {
|
||||
console.log("🚀 ~ file: staffratio.vue ~ line 71 ~ endEdit ~ row", row)
|
||||
|
||||
if (row.ratio * 1 > 100) {
|
||||
this.$alert("输入值不能大于100", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
row.ratio = 0;
|
||||
} else if (row.ratio * 1 < 0) {
|
||||
this.$alert("输入值不能小于0", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
row.ratio = 0;
|
||||
}
|
||||
else {
|
||||
row.ratio = row.ratio * 1;
|
||||
}
|
||||
let number = 0;
|
||||
this.list.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
}
|
||||
});
|
||||
this.list[0].ratio = 100 - number;
|
||||
if (this.list[0].ratio < 0) {
|
||||
this.$alert("第一个人员占比过低", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
this.list[0].ratio = this.list[0].ratio + row.ratio
|
||||
row.ratio = 0;
|
||||
|
||||
}
|
||||
this.changeStaff();
|
||||
},
|
||||
editChange(e, index) {
|
||||
let number = 0;
|
||||
let row = this.list[index];
|
||||
if (this.list.length == 1) {
|
||||
row.ratio = 100;
|
||||
} else {
|
||||
row.ratio = 0
|
||||
this.list.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
}
|
||||
this.list[0].ratio = 100 - number;
|
||||
})
|
||||
|
||||
}
|
||||
let form = {};
|
||||
this.openList.forEach((item) => {
|
||||
if (e == item.id) {
|
||||
form = { ...item };
|
||||
}
|
||||
})
|
||||
form.ratio = row.ratio;
|
||||
this.list.splice(index, 1, form);
|
||||
|
||||
this.changeStaff();
|
||||
},
|
||||
editclick(index) {
|
||||
let row = this.list[index];
|
||||
row.ratio=0
|
||||
let number = 0;
|
||||
this.list.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.ratio * 1;
|
||||
}
|
||||
this.list[0].ratio = 100 - number;
|
||||
})
|
||||
|
||||
},
|
||||
del() {
|
||||
let index = this.list.length - 1;
|
||||
this.list[0].ratio += this.list[index].ratio;
|
||||
this.list.splice(index, 1);
|
||||
this.changeStaff();
|
||||
},
|
||||
showdetele() {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
let row = JSON.parse(localStorage.getItem('row'));
|
||||
this.lists = JSON.parse(JSON.stringify([]))
|
||||
this.lists = row;
|
||||
this.len = this.lists.length
|
||||
this.lists.forEach((item) => {
|
||||
if (item.id) {
|
||||
item.label = item.brandNumber + "-" + item.staffName;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
this.getData();
|
||||
this.changeStaff();
|
||||
let number = 0;
|
||||
this.lists.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.sale_ratio * 1;
|
||||
}
|
||||
});
|
||||
if (this.lists.length > 0) {
|
||||
this.lists[0].sale_ratio = (100 - number).toFixed(2) * 1;
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
|
||||
},
|
||||
show(form) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.list = JSON.parse(JSON.stringify([]));
|
||||
this.form = { ...form };
|
||||
this.list = form;
|
||||
this.list.forEach((item) => {
|
||||
if (item.id) {
|
||||
item.label = item.brandNumber + "-" + item.staffName;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
this.getData();
|
||||
this.changeStaff();
|
||||
let number = 0;
|
||||
this.list.forEach((item, index) => {
|
||||
if (index != 0) {
|
||||
number += item.sale_ratio* 1;
|
||||
}
|
||||
});
|
||||
if (this.list.length > 0) {
|
||||
this.list[0].sale_ratio = (100 - number).toFixed(2) * 1;
|
||||
}
|
||||
this.list.push({ label: "", ratio: 0 });
|
||||
});
|
||||
}, 300);
|
||||
},
|
||||
changeStaff() {
|
||||
var that = this;
|
||||
let arr = [];
|
||||
// var list = that.list.concat(that.staffListCopy).filter(function (v) {
|
||||
// return (
|
||||
// that.list.indexOf(v) === -1 || that.staffListCopy.indexOf(v) === -1
|
||||
// );
|
||||
// });
|
||||
// list.forEach((item) => {
|
||||
// if (item.id) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
// this.openList = arr;
|
||||
},
|
||||
//获取数据
|
||||
async getData() {
|
||||
|
||||
let form = { id: "" };
|
||||
if (this.staffName) {
|
||||
form.staffName = this.staffName;
|
||||
}
|
||||
selectList(form).then((res) => {
|
||||
if (res.code == "000000") {
|
||||
res.rows.forEach((item) => {
|
||||
item.label = item.brandNumber + "-" + item.staffName;
|
||||
item.ratio = 0;
|
||||
});
|
||||
this.openList = res.rows;
|
||||
this.staffListCopy = res.rows;
|
||||
} else {
|
||||
this.$alert(res.message, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
isRepeat(arr, key) {
|
||||
var obj = {};
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (obj[arr[i][key]]) {
|
||||
return false; // 存在
|
||||
} else {
|
||||
obj[arr[i][key]] = arr[i];
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
confirms() {
|
||||
let flag = this.isRepeat(this.list, "brandNumber");
|
||||
|
||||
|
||||
this.list.forEach((item,index)=>{
|
||||
if(item.staffName==""){
|
||||
this.list.splice(index,1)
|
||||
}
|
||||
})
|
||||
let form = {
|
||||
// text: this.staffText,
|
||||
list: this.list,
|
||||
};
|
||||
|
||||
if (flag) {
|
||||
this.$emit("staffratioData", form);
|
||||
|
||||
this.dialogVisible = false;
|
||||
} else {
|
||||
this.$alert("选择员工存在重复", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
confirmButtonClass: "confirmbtnFalses",
|
||||
type: "warning",
|
||||
center: true,
|
||||
callback: (action) => { },
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue