我想去掉右侧的滚动条,高度设置无效,怎么解决呢
<template>
<el-dialog
title="选择需要新增的入库单明细"
:visible.sync="visible"
width="1700px"
append-to-body
:close-on-click-modal="false"
>
<el-form :inline="true" :model="queryParams">
<el-form-item label="名称">
<el-input
size="small"
v-model="queryParams.material.name"
@keyup.enter.native="queryToolInventory"
/>
</el-form-item>
<el-form-item label="出厂编号">
<el-input
size="small"
v-model="queryParams.toolCode"
@keyup.enter.native="queryToolInventory"
/>
</el-form-item>
<el-form-item label="规格型号">
<el-input
size="small"
v-model="queryParams.material.invspec"
@keyup.enter.native="queryToolInventory"
/>
</el-form-item>
<el-form-item label="层架位码">
<el-input
size="small"
v-model="queryParams.params.positionCode"
@keyup.enter.native="queryToolInventory"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="queryToolInventory">
查询
</el-button>
<el-button size="mini" @click="resetQueryToolInventory">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="20">
<el-col :span="11">
<el-table
ref="toolInventoryList"
v-loading="leftLoading"
:data="toolInventoryList"
:row-key="getRowKey"
:row-style="rowStyle"
fit
highlight-current-row
@selection-change="leftSelectionChange"
border
>
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
/>
<el-table-column
label="货位id"
align="center"
prop="locationId"
v-if="false"
/>
<el-table-column
label="物料编码"
align="center"
prop="material.code"
:show-overflow-tooltip="true"
/>
<el-table-column
label="物料名称"
align="center"
prop="material.name"
:show-overflow-tooltip="true"
/>
<el-table-column
label="货位编码"
align="center"
prop="cargoLocation.code"
:show-overflow-tooltip="true"
/>
<el-table-column label="可用数量" align="center" prop="quantity">
<template slot-scope="scope">
{{ scope.row.quantity - scope.row.frozenQuantity }}
</template>
</el-table-column>
</el-table>
<pagination
v-show="leftTotal > 0"
:total="leftTotal"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getToolInventoryList"
:page-sizes="[5]"
/>
</el-col>
<el-col :span="2" style="text-align: center">
<el-button
@click="addStaff"
type="primary"
:disabled="!addData.length"
icon="el-icon-arrow-right"
circle
/>
<el-button
@click="removeStaff"
type="primary"
:disabled="!removeData.length"
icon="el-icon-arrow-left"
circle
style="margin-left: 0; margin-top: 10px"
/>
</el-col>
<el-col :span="11">
<el-table
ref="selectedToolInventoryList"
v-loading="rightLoading"
:data="rightPageList"
:row-key="getRowKey"
border
fit
highlight-current-row
@selection-change="rightSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
/>
<el-table-column
label="货位id"
align="center"
prop="locationId"
v-if="false"
/>
<el-table-column
label="物料编码"
align="center"
prop="materialCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="物料名称"
align="center"
prop="materialName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="货位编码"
align="center"
prop="locationCode"
:show-overflow-tooltip="true"
/>
<el-table-column label="借用数量" prop="quantity" align="center">
<template slot-scope="{ row }">
<el-input-number
style="width: 100%"
:max="row.usableQuantity"
:min="1"
v-model="row.lendNumber"
placeholder="点击修改数量"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="rightTotal > 0"
:total="rightTotal"
:page.sync="rightPageNum"
:limit.sync="rightPageSize"
@pagination="handleRightPage"
:page-sizes="[5]"
/>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="batchSubmit">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</el-dialog>
</template>
<script>
import store from "@/store";
export default {
name: "TableTransfer",
data() {
return {
/** 当前登录人 */
user: store.state.user,
/** 站点id */
deptId:
store.state.user.station === store.state.user.company.deptId ||
store.state.user.station,
// 弹窗是否可见
visible: false,
// 表格加载状态
leftLoading: true,
/** 查询参数 */
queryParams: {
pageNum: 1,
pageSize: 5,
sorter: "",
material: {
name: undefined,
invspec: undefined,
},
toolCode: undefined,
params: { positionCode: undefined },
deptId: store.state.user.station,
},
/** 左侧原始库存数据 */
toolInventoryList: [],
/** 可用的库存数据 */
usableToolInventoryList: [],
/** 左侧选中的数据 */
addData: [],
/** 左侧数据总条数 */
leftTotal: undefined,
rightLoading: false,
/** 提交的数据 */
submitDataList: [],
/** 右侧分页数据 */
rightPageList: [],
/** 右侧选中的数据 */
removeData: [],
rightTotal: undefined,
rightPageNum: 1,
rightPageSize: 5,
staffOptions: [
{ key: 28, display_name: "补货员" },
{ key: 29, display_name: "测试员" },
],
};
},
props: {
lendOrder: {},
},
watch: {
visible: {
deep: true,
immediate: true,
handler: function (newValue, oldValue) {
if (newValue) {
this.resetQueryParams();
this.getList();
}
},
},
},
methods: {
rowStyle({ row, rowIndex }) {
let stylejson = {};
stylejson.height = "57px";
return stylejson;
},
// 从后台获取左边表格的数据
getList() {
this.rightLoading = true;
this.leftLoading = true;
// 查询左侧库存明细
this.$api.listToolInventory(this.queryParams).then((res2) => {
this.leftTotal = res2.total;
this.toolInventoryList = res2.rows;
this.leftLoading = false;
// 查询右侧的借用单明细
this.$api
.listLendDetails({ lendId: this.lendOrder.id })
.then((res1) => {
this.rightTotal = res1.total;
this.submitDataList = res1.rows;
// 处理右侧借用数量为计数器最大值,从左侧再添加一次可以变更其可用数量为右侧借用数量最大值
for (let i = 0; i < this.submitDataList.length; i++) {
this.submitDataList[i].usableQuantity = parseFloat(
this.submitDataList[i].lendNumber
);
}
this.handleRightPage();
this.$forceUpdate();
this.rightLoading = false;
});
});
},
/** 查询可借用的工具库存 */
getToolInventoryList() {
this.leftLoading = true;
this.$api.listToolInventory(this.queryParams).then((res2) => {
this.leftTotal = res2.total;
this.toolInventoryList = res2.rows;
this.leftLoading = false;
});
},
// 将左边表格选择项存入addData中
leftSelectionChange(rows) {
this.addData = [];
if (rows) {
rows.forEach((row) => {
if (row) {
this.addData.push(row);
}
});
}
},
// 左边表格选择项移到右边
addStaff() {
setTimeout(() => {
this.$refs["toolInventoryList"].clearSelection();
this.$refs["selectedToolInventoryList"].clearSelection();
}, 0);
let submitLocationIds = this.submitDataList.map((val) => {
return val.locationId;
});
for (let i = 0; i < this.addData.length; i++) {
let item = this.addData[i];
// submitDataList中不存在的货位push,存在的不做处理
let index = submitLocationIds.indexOf(item.locationId);
if (index > -1) {
this.submitDataList.splice(index, 1);
}
this.submitDataList.push({
locationId: item.locationId,
materialId: item.material.id,
materialCode: item.material.code,
materialName: item.material.name,
locationCode: item.cargoLocation.code,
lendNumber: item.quantity - item.frozenQuantity,
usableQuantity:
parseFloat(item.quantity) - parseFloat(item.frozenQuantity),
});
}
// this.$forceUpdate();
this.addData = [];
this.handleRightPage();
},
// 将右边表格选择项存入selectedStaffData中
rightSelectionChange(rows) {
this.removeData = [];
if (rows) {
rows.forEach((row) => {
if (row) {
this.removeData.push(row);
}
});
}
},
// 右边表格选择项移到左边
removeStaff() {
setTimeout(() => {
this.$refs["toolInventoryList"].clearSelection();
this.$refs["selectedToolInventoryList"].clearSelection();
}, 0);
for (let i = 0; i < this.removeData.length; i++) {
let itemi = this.removeData[i];
for (let j = 0; j < this.submitDataList.length; j++) {
let itemj = this.submitDataList[j];
if (itemi.locationId === itemj.locationId) {
this.submitDataList.splice(j, 1);
}
}
}
this.removeData = [];
this.handleRightPage();
},
getRowKey(row) {
return row.locationId;
},
/** 提交 */
batchSubmit() {
if (this.submitDataList && this.submitDataList.length > 0) {
let dataArr = [];
this.submitDataList.forEach((item) => {
dataArr.push(
Object.assign(item, {
lendId: this.lendOrder.id,
deptId: this.deptId,
})
);
});
this.$api.batchAddLendDetails(dataArr).then((res) => {
this.$modal.msgSuccess("保存成功");
this.visible = false;
this.$emit("refreshData", this.lendOrder.lendCode);
});
} else {
this.$modal.msgError("右侧数据不能为空");
return;
}
},
/** 处理右侧数据分页 */
handleRightPage() {
this.rightLoading = true;
this.rightTotal = this.submitDataList.length;
this.rightPageList = [];
for (let i = 0; i < this.submitDataList.length; i++) {
if (
i >= 0 + this.rightPageSize * (this.rightPageNum - 1) &&
i < 5 + this.rightPageSize * (this.rightPageNum - 1)
) {
this.rightPageList.push(this.submitDataList[i]);
}
}
this.rightLoading = false;
},
/** 查询按钮 */
queryToolInventory() {
this.queryParams.pageNum = 1;
this.getToolInventoryList();
},
/** 重置按钮 */
resetQueryToolInventory() {
this.resetQueryParams();
this.queryToolInventory();
},
/** 重置查询参数 */
resetQueryParams() {
this.queryParams = {
pageNum: 1,
pageSize: 5,
sorter: "",
material: {
name: undefined,
invspec: undefined,
},
toolCase: { toolCode: undefined },
params: { position: undefined },
deptId: this.user.station,
};
},
},
};
</script>