You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
8.8 KiB
Vue
287 lines
8.8 KiB
Vue
<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
|
|
@click="handleadd">增加
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { selectList } from "@/api/eashier.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
staffList: [], //选择员工数组
|
|
staffLists: [{ ratio: 100 }], //员工占比初始化 //主员工数组
|
|
editIndex: -1, //员工占比修改下标
|
|
staffListCopy: [], //复制选择员工数组
|
|
storeId: null, //当前门店id
|
|
nums:"",
|
|
};
|
|
},
|
|
methods: {
|
|
handleadd(){
|
|
if(this.staffLists.length>=4)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.staffId) {
|
|
item.staffNames = item.brandNumber + "-" + item.staffName;
|
|
} else {
|
|
item.staffNames = "";
|
|
}
|
|
});
|
|
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);
|
|
},
|
|
//改变员工 去除未选择员工列表中的员工
|
|
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: "" };
|
|
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>
|