演示
:max="row.max"@blur="updateFooterEvent(row, $event)" @input=" if (row[item.field] > row.max) { row[item.field] = row.max; } "controlrowcell({ row, column }: any) {
this.setMax(column.title, row);
return true;
},
setMax(field: any, row: any) {
let max = row.detailqty;
for (const key in row) {
if (key !== "detailqty" && key !== "deptId" && key !== "spe" && key !== "deptName" && key !== "id" && key !== "_XID" && key !== "partname" && key !== field && key !== "" && key !== "max") {
console.log(key);
max -= row[key];
}
}
row.max = max;
console.log(row.max);
},
updateFooterEvent(row: any, event: any) {
console.log(row);
console.log(event.value);
let spe = row.max - event.value;
let qty = row.detailqty;
row.spe = qty + "/" + spe;
},
res.data.map((v: any) => {
//业务所需自行修改
if (v.partname.indexOf("机架") !== -1) {
v.spe = v.detailqty + "/0";
} else {
let spe = v.detailqty;
for (const key in v) {
if (key !== "detailqty" && key !== "deptId" && key !== "spe" && key !== "deptName" && key !== "id" && key !== "_XID" && key !== "partname" && key !== "" && key !== "max") {
spe -= v[key];
}
}
v.spe = v.detailqty + "/" + spe;
v.max = spe;
}
});
在这里插入代码片<vxe-column v-for="item in columnList" :key="item.field" :field="item.field" :title="item.title" :edit-render="{}" min-width="100">
<template #edit="{ row }">
<vxe-input
v-model="row[item.field]"
type="number"
:max="row.max"
placeholder="请输入"
@blur="updateFooterEvent(row, $event)"
@input="
if (row[item.field] > row.max) {
row[item.field] = row.max;
}
"
></vxe-input>
</template>
</vxe-column>
<!-- 表格 -->
<vxe-toolbar>
<template #buttons>
<vxe-button @click="insertEvent(0)">新增</vxe-button>
<vxe-button @click="deleteSelect">删除</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="xTable"
border
show-footer
show-overflow
:loading="loading"
:data="partData"
:column-config="{ resizable: false }"
:edit-config="{ showIcon: false, trigger: 'click', mode: 'cell', activeMethod: controlrowcell }"
:footer-method="footerMethod"
:row-config="{ isHover: true }"
:export-config="{}"
class="editable-footer"
>
<vxe-column type="checkbox" width="50" fixed="left"></vxe-column>
<vxe-column type="seq" title="序号" width="50" fixed="left"></vxe-column>
<vxe-column v-for="item in columnList" :key="item.field" :field="item.field" :title="item.title" :edit-render="{}" min-width="100">
<template #edit="{ row }">
<vxe-input
v-model="row[item.field]"
type="number"
:max="row.max"
placeholder="请输入"
@blur="updateFooterEvent(row, $event)"
@input="
if (row[item.field] > row.max) {
row[item.field] = row.max;
}
"
></vxe-input>
</template>
</vxe-column>
</vxe-table>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
export default defineComponent({
setup() {
return reactive({
visible: false as boolean,
loading: false as boolean,
proPlan: {
id: "",
dateValue: [] as any
} as any,
columnList: [] as any,
partData: [] as any,
partList: [] as any,
allPart: [] as any,
oldval: 0
});
},
methods: {
controlrowcell({ row, column, columnIndex }: any) {
this.setMax(column.title, row);
return true;
},
// 设置当前点击单元格输入框的最大值
setMax(field: any, row: any) {
let max = row.detailqty;
for (const key in row) {
if (key !== "detailqty" && key !== "deptId" && key !== "spe" && key !== "deptName" && key !== "id" && key !== "_XID" && key !== "partname" && key !== field && key !== "" && key !== "max") {
console.log(key);
max -= row[key];
}
}
row.max = max;
console.log(row.max);
},
updateFooterEvent(row: any, event: any) {
console.log(row);
console.log(event.value);
let spe = row.max - event.value;
let qty = row.detailqty;
row.spe = qty + "/" + spe;
},
deleteSelect() {
const $table = this.$refs.xTable;
const selectRecords = $table.getCheckboxRecords();
if (selectRecords.length === 0) {
this.$message.error("至少选择一条数据!");
return false;
}
$table.removeCheckboxRow();
},
async insertEvent(row: any) {
const $table = this.$refs.xTable;
const record = {
type: "add",
partname: "",
deptName: "",
deptId: ""
};
const { row: newRow } = await $table.insertAt(record, row);
await $table.setActiveCell(newRow, "partname");
},
changeDept(e: any) {
for (let i = 0; i < this.deptList.length; i++) {
if (e === this.deptList[i].id) {
this.handDepData(e, this.deptList[i].name);
}
}
},
handDepData(id: any, name: any) {
if (this.partData.length === 0) {
return;
}
for (let i = 0; i < this.partData.length; i++) {
if (this.partData[i].deptName == null || !this.partData[i].deptName) {
this.partData[i].deptName = name;
this.partData[i].deptId = id;
this.$refs.xTable.isUpdateByRow(this.partData[i]);
}
}
},
selectPart(row: any) {
for (let i = 0; i < this.partList.length; i++) {
if (this.partList[i].id === row.id) {
row.partname = this.partList[i].partname;
row.detailqty = this.partList[i].detailqty;
}
}
},
selectDept(row: any) {
console.log(row);
for (let i = 0; i < this.deptList.length; i++) {
if (this.deptList[i].id === row.id) {
row.deptName = this.deptList[i].name;
row.deptId = this.deptList[i].id;
}
}
},
footerMethod({ columns, data }: any) {
return [
columns.map((column: { property: string }, columnIndex: number) => {
if (columnIndex === 0) {
return "";
}
if (columnIndex === 1) {
return "汇总";
}
if (!["partname", "deptId"].includes(column.property)) {
if (column.property === "spe") {
return this.sumNum(data, "detailqty");
}
return this.sumNum(data, column.property);
}
return null;
}),
columns.map((column: { property: string }, columnIndex: number) => {
if (columnIndex === 0) {
return "";
}
if (columnIndex === 1) {
return "人数";
}
if (!["partname", "deptId"].includes(column.property)) {
if (this.capDate.length > 0) {
for (let i = 0; i < this.capDate.length; i++) {
if (this.capDate[i].date.includes(column.property)) {
return this.sumPerson(data, column.property, Number(this.capDate[i].number));
}
}
}
}
return null;
})
];
},
sumNum(list: { [x: string]: any }[], field: string | number) {
let count = 0;
list.forEach((item: { [x: string]: any }) => {
if (item[field]) {
count += Number(item[field]);
}
});
return count;
},
sumPerson(list: { [x: string]: any }[], field: string | number, num: number) {
let count = 0;
list.forEach((item: { [x: string]: any }) => {
if (item[field]) {
count += Number(item[field]);
}
});
return Math.ceil(count / num);
},
/**
* 获取计划明细信息
*/
getInfo() {
if (this.plan.id) {
this.loading = true;
this.proPlan = this.plan;
this.proPlan.dateValue = [];
if (this.plan.startdate || this.plan.enddate) {
this.proPlan.dateValue.push(this.plan.startdate);
this.proPlan.dateValue.push(this.plan.enddate);
}
this.changeDate(this.proPlan.dateValue);
baseService.get("xxxx", { planId: this.plan.id }).then((res) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
console.log(res.data);
res.data.map((v: any) => {
if (v.partname.indexOf("机架") !== -1) {
v.spe = v.detailqty + "/0";
} else {
let spe = v.detailqty;
for (const key in v) {
if (key !== "detailqty" && key !== "deptId" && key !== "spe" && key !== "deptName" && key !== "id" && key !== "_XID" && key !== "partname" && key !== "" && key !== "max") {
spe -= v[key];
}
}
v.spe = v.detailqty + "/" + spe;
v.max = spe;
}
});
this.partData = res.data;
this.getPart(this.plan.bdEquipId, res.data);
this.loading = false;
});
}
},
/**
* 根据时间加载列
* @param val
*/
changeDate(val: any) {
console.log(val.length > 0);
if (val.length > 0) {
this.getCapDate(val);
}
},
InitColumns(val: any) {
let all = this.getAll(val[0], val[1]);
this.columnList = reactive([]);
for (let i = 0; i < all.length; i++) {
let column = reactive({
field: all[i],
title: all[i]
});
this.columnList.push(column);
}
//排序
this.columnList.sort(function (A: number, B: number) {
return A - B;
});
},
/**
* 根据时间加载 每一天时间
* @param start 开始时间
* @param end 结束时间
*/
getAll(start: any, end: any) {
let dateList = [];
let startTime = this.getDate(start);
let endTime = this.getDate(end);
while (endTime.getTime() - startTime.getTime() >= 0) {
let year = startTime.getFullYear();
let month = startTime.getMonth() + 1 < 10 ? "0" + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
let day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
dateList.push(year + "-" + month + "-" + day);
startTime.setDate(startTime.getDate() + 1);
}
return dateList;
},
/**
* 时间格式处理 2022-11-11
* @param datestr 传入的时间
*/
getDate(datestr: any) {
let temp = datestr.split("-");
return new Date(temp[0], temp[1] - 1, temp[2]);
}
});
</script>