小小的大脑子 2022-11-08 07:21 采纳率: 71.3%
浏览 176
已结题

关于#Table#的问题,如何解决?

我想去掉右侧的滚动条,高度设置无效,怎么解决呢

img


<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>

展开全部

  • 写回答

4条回答 默认 最新

  • 管那么多 2022-11-08 08:14
    关注

    给 <el-dialog class="XXXX" 加class

    .XXXX{
      height:100%;
        overflow: hidden;
    }
    .XXXX .el-dialog__body{
      height:100%;
        overflow: hidden;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月8日
  • 已采纳回答 11月8日
  • 创建了问题 11月8日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了

问题事件

  • 已结题 (查看结题原因) 11月8日
  • 已采纳回答 11月8日
  • 创建了问题 11月8日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部