xt-ems-front/src/views/systemInterface/components/Basics/getGradesAndSpecifications.vue

<template>
  <!-- 查询WMS及炼钢MES钢种规格数据 -->
  <div class="getGradesAndSpecifications">
    <div class="box">
        <div class="box-top">
          <el-form style="overflow: hidden;" :style="filterForm.show ? null : { height: '0px' }"
            class="box-top-form" size="mini" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="WMS钢种">
                  <el-input clearable v-model="filterForm.data.steelName"
                    placeholder="WMS钢种: HPB235" style="width: 95%;" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="WMS规格">
                  <el-input clearable v-model="filterForm.data.specName"
                    placeholder="WMS规格: 12.5" style="width: 95%;" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="炼钢钢种">
                  <el-input clearable v-model="filterForm.data.name"
                    placeholder="炼钢钢种: 750×370×90×95" style="width: 98%;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="box-top-gjl">
            <el-row :gutter="10">
              <el-col :span="8">
                <div style="float:right; text-align: right;">
                  <el-button class="button" type="primary" size="mini" icon="el-icon-search"
                    v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="getWMSGrades()" >查询</el-button>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="float:right; text-align: right;">
                  <el-button class="button" type="primary" size="mini" icon="el-icon-search"
                    v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="getWMSSpecifications()" >查询</el-button>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="float:right; text-align: right;">
                  <el-button class="button" type="primary" size="mini" icon="el-icon-search"
                    v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="getLgMESSpecifications()" >查询</el-button>
                  <el-button class="button" type="primary" size="mini" icon="el-icon-refresh"
                    v-privilege="activeMenu + 'QUERY'" :loading="rightTable.loading" @click="tableDataCancel();" >重置</el-button>
                  <el-button size="mini" :icon="filterForm.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                    :title="filterForm.show ? '收起搜索区' : '展开搜索区'" @click="filterForm.show = !filterForm.show;
                      $nextTick(() => { singleTableHeight = getRoleHeight($refs['singleTable'].$el) - 45; });"
                  >{{ filterForm.show ? '收起' : '展开' }}</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="box-bottom">
          <el-row :gutter="10" ref="singleTable">
            <el-col :span="8">
              <el-table stripe border highlight-current-row id="leftSingleTable" ref="leftSingleTable" style="width: 100%;" size="mini"
                :data="leftFrontEndPageChange" title="WMS钢种信息" v-loading="leftTable.loading" :height="singleTableHeight" show-summary :summary-method="getSummaries">
                <el-table-column sortable prop="steelName" label="WMS钢种" min-width="86px" align="center"
                  :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" style="text-align: right;margin-top: 10px;"
            :page-sizes="[10, 20, 50, 100, 500, 1000]"
            :total="leftTable.total" :page-size="leftTable.pageSize" :current-page.sync="leftTable.pageNum"
            @size-change="leftTableSizeChange" ></el-pagination>
          </el-col>
          <el-col :span="8">
              <el-table stripe border highlight-current-row id="centerSingleTable" ref="centerSingleTable" style="width: 100%;" size="mini"
                :data="centerFrontEndPageChange" label="WMS规格信息" v-loading="centerTable.loading" :height="singleTableHeight" show-summary :summary-method="getSummaries">
                <el-table-column sortable prop="specName" label="WMS规格" min-width="86px" align="center"
                  :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" style="text-align: right;margin-top: 10px;"
            :page-sizes="[10, 20, 50, 100, 500, 1000]"
            :total="centerTable.total" :page-size="centerTable.pageSize" :current-page.sync="centerTable.pageNum"
            @size-change="centerTableSizeChange" ></el-pagination>
          </el-col>
          <el-col :span="8">
              <el-table stripe border highlight-current-row id="rightSingleTable" ref="rightSingleTable" style="width: 100%;" size="mini"
                :data="rightFrontEndPageChange" label="炼钢钢种信息" v-loading="rightTable.loading" :height="singleTableHeight" show-summary :summary-method="getSummaries">
                <el-table-column sortable prop="name" label="炼钢钢种" min-width="86px" align="center"
                  :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" style="text-align: right;margin-top: 10px;"
            :page-sizes="[10, 20, 50, 100, 500, 1000]"
            :total="rightTable.total" :page-size="rightTable.pageSize" :current-page.sync="rightTable.pageNum"
            @size-change="rightTableSizeChange" ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { zCheckNumber1 } from '~/utils/validator.js';
import store from '@/store/index.js';
import {formatDate, XtcommonSummaries} from '@/utils/util.js';
export default {
  name: 'getGradesAndSpecifications',
  data () {
    return {
      activeMenu: '',
      singleTableHeight: 100,
      filterForm: {
        show: true,
        data: {
          steelName: '',
          specName: '',
          name: ''
        }
      },
      leftTable: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        loading: false,
        tableLoading: false,
        tableData: {
          arr: [],
          obj: {}
        }
      },
      centerTable: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        loading: false,
        tableLoading: false,
        tableData: {
          arr: [],
          obj: {}
        }
      },
      rightTable: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        loading: false,
        tableLoading: false,
        tableData: {
          arr: [],
          obj: {}
        }
      }
    }
  },
  created () {
      this.activeMenu = window.localStorage.getItem('activeMenu');
  },
  mounted () {
    let that = this;
    window.PEDataObj = {
      // 将数据绑定到window上，供main页面使用
      vm: that,
      // tableArr：用于导出成Excel的表格的信息
      tableArr: [{
        name: 'WMS钢种信息',
        id: 'leftSingleTable'
      }, {
        name: 'WMS规格信息',
        id: 'centerSingleTable'
      }, {
        name: '炼钢钢种信息',
        id: 'rightSingleTable'
      }]
    };
    that.$nextTick(() => {
      // 立即获取的height有一定偏差，通过setTimeout延迟来解决
      setTimeout(() => {
        that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 45;
      }, 100);
    });
    // 这里写页面加载需要调用的代码
    that.getTableData();
  },
  computed: {
    leftFrontEndPageChange () {
      let that = this;
      let Tdata = [];
      let start = (that.leftTable.pageNum - 1) * that.leftTable.pageSize;
      if (start >= that.leftTable.tableData.arr.length) start = 0;
      let end = that.leftTable.pageNum * that.leftTable.pageSize;
      if (end >= that.leftTable.tableData.arr.length) end = that.leftTable.tableData.arr.length;
      that.leftTable.total = that.leftTable.tableData.arr.length;
      Tdata = that.leftTable.tableData.arr;
      Tdata = Tdata.filter(data => (!that.filterForm.data.steelName || !data.steelName) || data.steelName.toLowerCase()
        .includes(that.filterForm.data.steelName.toLowerCase()));
      that.leftTable.total = Tdata.length;
      return Tdata.slice(start, end);
    },
    centerFrontEndPageChange () {
      let that = this;
      let Tdata = [];
      let start = (that.centerTable.pageNum - 1) * that.centerTable.pageSize;
      if (start >= that.centerTable.tableData.arr.length) start = 0;
      let end = that.centerTable.pageNum * that.centerTable.pageSize;
      if (end >= that.centerTable.tableData.arr.length) end = that.centerTable.tableData.arr.length;
      that.centerTable.total = that.centerTable.tableData.arr.length;
      Tdata = that.centerTable.tableData.arr;
      Tdata = Tdata.filter(data => (!that.filterForm.data.specName || !data.specName) || data.specName.toLowerCase()
        .includes(that.filterForm.data.specName.toLowerCase()));
      that.centerTable.total = Tdata.length;
      return Tdata.slice(start, end);
    },
    rightFrontEndPageChange () {
      let that = this;
      let Tdata = [];
      let start = (that.rightTable.pageNum - 1) * that.rightTable.pageSize;
      if (start >= that.rightTable.tableData.arr.length) start = 0;
      let end = that.rightTable.pageNum * that.rightTable.pageSize;
      if (end >= that.rightTable.tableData.arr.length) end = that.rightTable.tableData.arr.length;
      that.rightTable.total = that.rightTable.tableData.arr.length;
      Tdata = that.rightTable.tableData.arr;
      Tdata = Tdata.filter(data => (!that.filterForm.data.name || !data.name) || data.name.toLowerCase()
        .includes(that.filterForm.data.name.toLowerCase()));
      that.rightTable.total = Tdata.length;
      return Tdata.slice(start, end);
    }
  },
  methods: {
    //  计算树区域高度
    getRoleHeight (dom) {
        return window.innerHeight - dom.offsetTop;
    },
    // 自定义的表格合计方法：只给指定列进行合计
    getSummaries (param) {
        const prop = []; // 合计列绑定的prop
        return XtcommonSummaries(param, prop);
    },
    // 获取表格中的数据
    getTableData () {
        let that = this;
        that.getWMSGrades();
        that.getWMSSpecifications();
        that.getLgMESSpecifications();
    },
    // 获取wms钢种
    getWMSGrades () {
        let that = this, obj = {};
        let url = 'pass/product/v1/emssteel/getGrades';
        that.leftTable.loading = true;
        that.axios.get(url)
          .then(function (res) {
            if (res.code === '0') {
              that.leftTable.tableData.arr = res.data;
            }
            that.leftTable.loading = false;
          }).catch(function () {
            that.leftTable.loading = false;
          });
    },
    // 获取wms规格
    getWMSSpecifications () {
        let that = this, obj = {};
        let url = 'pass/product/v1/emssteel/getSpecifications/?type=' + '高线';
        that.centerTable.loading = true;
        that.axios.get(url)
          .then(function (res) {
            if (res.code === '0') {
              that.centerTable.tableData.arr = res.data;
            }
            that.centerTable.loading = false;
          }).catch(function () {
            that.centerTable.loading = false;
          });
    },
    // 获取炼钢规格
    getLgMESSpecifications () {
        let that = this, obj = {};
        let url = 'pass/product/v1/emsvqcmbasespecbillet/getbasespecbillet';
        that.rightTable.loading = true;
        that.axios.get(url)
          .then(function (res) {
            if (res.code === '0') {
              that.rightTable.tableData.arr = res.data;
            }
            that.rightTable.loading = false;
          }).catch(function () {
            that.rightTable.loading = false;
          });
    },
    // 改变表格显示条数
    leftTableSizeChange (val) {
        let that = this;
        that.rightTable.pageSize = val;
    },
    // 改变表格显示条数
    centerTableSizeChange (val) {
        let that = this;
        that.rightTable.pageSize = val;
    },
    // 改变表格显示条数
    rightTableSizeChange (val) {
        let that = this;
        that.rightTable.pageSize = val;
    },
    // 重置搜索
    tableDataCancel () {
      let that = this;
      that.filterForm.data.steelName = '';
      that.filterForm.data.specName = '';
      that.filterForm.data.name = '';
    },
    rounding (row, column) {
      return parseFloat(row[column.property]).toFixed(2)
    }
  }
}
</script>

<style lang="less">
.getGradesAndSpecifications {
  min-width: 700px;
  height: 100%;
  .box {
    height: 100%;
    padding: 15px 15px 0 15px;
    .box-left {
      float: left;
      width: 200px;
      height: calc(100% - 3px);
      overflow: auto;
      .box-left-bt {
        line-height: 35px;
        font-size: 16px;
        border-bottom: 1px solid #ccc;
      }
      .box-left-tree {
        height: calc(100% - 50px);
        overflow: auto;
        padding: 7px 7px 0 0;
          .tree-row-on {
            color: #3279e8;
            font-weight: 600;
          }
      }
    }
    .box-top {
      .box-top-form {
        padding-left: 7px;
        .el-form-item {
          margin-bottom: 7px;
        }
      }
      .box-top-gjl {
        overflow: hidden;
        padding: 7px 0 7px 7px;
        border-top: 1px solid #ccc;
      }
    }
    .box-bottom {
      padding-left: 7px;
    }

    .el-table .el-table__row {
      height: 35px;
    }
    .el-table__body .el-form-item--mini.el-form-item {
      margin: 0px;
      .error {
        overflow: hidden;
        color: #f56c6c;
        font-size: 12px;
        line-height: 1;
      }
    }
  }
  .color_no {
    color: #7a7a7a;
  }
  .color_yes {
    color: #1a9f17;
  }
}
</style>