您好,登錄后才能下訂單哦!
<!-- 下布轉(zhuǎn)數(shù) -->
<el-table-column align="right" width="87px">
<template slot="header" slot-scope="scope">
<span class="sort-table-header">下布轉(zhuǎn)數(shù)</span>
</template>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.revolutions_count"
placeholder="請(qǐng)輸入"
size="mini"
class="align-right-input count_input table_input"
@input="changeSalary(scope.row,scope.$index,'revolutions_count')"
@keyup.native="keyboard($event, scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
<!-- 保底轉(zhuǎn)數(shù) -->
<el-table-column v-if="wage_scheme != 3" align="right" width="87px">
<template slot="header" slot-scope="scope">
<span class="sort-table-header">保底轉(zhuǎn)數(shù)</span>
</template>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.overproduction"
placeholder="請(qǐng)輸入"
size="mini"
class="align-right-input over_input table_input"
@input="changeSalary(scope.row,scope.$index,'overproduction')"
@keyup.native="keyboard($event, scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
<!-- 單價(jià)(元/轉(zhuǎn)) -->
<el-table-column v-if="wage_scheme != 3 || price_mode !=0" align="right" width="87px">
<template slot="header" slot-scope="scope">
<span class="sort-table-header">單價(jià)(元/轉(zhuǎn))</span>
</template>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.revolution_price"
placeholder="請(qǐng)輸入"
size="mini"
class="align-right-input revolution_input table_input"
@input="changeSalary(scope.row,scope.$index,'revolution_price')"
@keyup.native="keyboard($event, scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
<!-- 保底工資 -->
<el-table-column
v-if="wage_scheme == 1 && price_mode ==1 || wage_scheme == 2 && price_mode ==1"
align="right"
width="87px"
>
<template slot="header" slot-scope="scope">
<span class="sort-table-header">保底工資</span>
</template>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.knit_loom_price"
placeholder="請(qǐng)輸入"
size="mini"
class="align-right-input knit_input table_input"
@input="changeSalary(scope.row,scope.$index,'knit_loom_price')"
@keyup.native="keyboard($event, scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
<!-- 加機(jī)費(fèi) -->
<el-table-column v-if="wage_scheme == 1 && price_mode ==1" align="right" width="87px">
<template slot="header" slot-scope="scope">
<span class="sort-table-header">加機(jī)費(fèi)</span>
</template>
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.add_machine_reward"
placeholder="請(qǐng)輸入"
size="mini"
class="align-right-input add_input table_input"
@input="changeSalary(scope.row,scope.$index,'add_machine_reward')"
@keyup.native="keyboard($event, scope.$index)"
></el-input>
</div>
</template>
</el-table-column>
// 雙向綁定 輸入框(下布轉(zhuǎn)數(shù)、保底轉(zhuǎn)數(shù)、單價(jià)(元/轉(zhuǎn))、保底工資、加機(jī)費(fèi)) - 限制輸入
changeSalary(row, index, type) {
this.$nextTick(() => {
// 先把非數(shù)字的都替換掉(空),除了數(shù)字和.
this.clothProduceData[index][type] = this.clothProduceData[index][
type
].replace(/[^\d.]/g, "");
// 必須保證第一個(gè)為數(shù)字而不是.
this.clothProduceData[index][type] = this.clothProduceData[index][
type
].replace(/^\./g, "");
// 保證只有出現(xiàn)一個(gè).而沒有多個(gè).
this.clothProduceData[index][type] = this.clothProduceData[index][
type
].replace(/\.{3,}/g, "");
// 保證.只出現(xiàn)一次,而不能出現(xiàn)兩次以上
this.clothProduceData[index][type] = this.clothProduceData[index][type]
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
// 限制幾位小數(shù)
let subscript = -1;
for (let i in this.clothProduceData[index][type]) {
if (this.clothProduceData[index][type][i] === ".") {
subscript = i;
}
if (subscript !== -1) {
if (i - subscript > this.decimalNum(type)) {
this.clothProduceData[index][type] = this.clothProduceData[index][
type
].substring(0, this.clothProduceData[index][type].length - 1);
}
}
}
});
},
// 下布轉(zhuǎn)數(shù)、保底轉(zhuǎn)數(shù):整數(shù);單價(jià)(元/轉(zhuǎn)):4位小數(shù); 保底工資、加機(jī)費(fèi):2位小數(shù)
decimalNum(type) {
if (type == "revolutions_count" || type == "overproduction") {
return -1;
}
if (type == "revolution_price") {
return 4;
}
if (type == "knit_loom_price" || type == "add_machine_reward") {
return 2;
}
},
// 鍵盤事件(向上、向下)
keyboard(evt, index) {
let newIndex;
let _this = this;
let ev = evt ? evt : window.event;
let clssName = ev.target.offsetParent.className;
if (clssName.indexOf("count_input") != -1) {
newIndex = index * this.paramNum;
} else if (clssName.indexOf("over_input") != -1) {
newIndex = index * this.paramNum + 1;
} else if (clssName.indexOf("revolution_input") != -1) {
let num = this.paramNum === 2 ? 1 : 2;
newIndex = index * this.paramNum + num;
} else if (clssName.indexOf("knit_input") != -1) {
newIndex = index * this.paramNum + 3;
} else if (clssName.indexOf("add_input") != -1) {
newIndex = index * this.paramNum + 4;
}
// 獲取每一列input
let inputAll = document.querySelectorAll(".table_input input");
let allLength = inputAll.length;
// 向上
if (ev.keyCode == 38) {
if (newIndex <= this.paramNum - 1) {
return false;
} else {
newIndex -= this.paramNum;
}
if (inputAll[newIndex]) {
inputAll[newIndex].focus();
}
}
// 向下
if (ev.keyCode == 40) {
if (newIndex >= allLength - this.paramNum) {
return false;
} else {
newIndex += this.paramNum;
}
if (inputAll[newIndex]) {
inputAll[newIndex].focus();
}
}
},
因?yàn)槟俏鍌€(gè)字段是判斷顯示的,相應(yīng)的,paramNum這個(gè)參數(shù)是一行顯示有多少個(gè)輸入框
clothProduceData是表格綁定的值,也就是tableData
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。