|
@@ -0,0 +1,383 @@
|
|
|
|
+<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>
|