Commit 60826c0e authored by 徐来柯's avatar 徐来柯

update

parent 896c3b7a
...@@ -28,8 +28,24 @@ ...@@ -28,8 +28,24 @@
height: calc(100% - 110px) !important; height: calc(100% - 110px) !important;
} }
.el-table__header-wrapper{
background: #5A6C98;
}
.el-table th.is-leaf{
background: #5A6C98;
color:#fff;
}
.el-table td, .el-table th.is-leaf{
text-align: center;
}
.el-table--border th{
border:1px solid #EBEEF5;
}
}
// 分页样式 // 分页样式
.conterFool_bottom{ .page_bottom{
width:97%; width:97%;
margin: auto; margin: auto;
height:50px; height:50px;
...@@ -121,18 +137,3 @@ ...@@ -121,18 +137,3 @@
} }
} }
} }
\ No newline at end of file
.el-table__header-wrapper{
background: #5A6C98;
}
.el-table th.is-leaf{
background: #5A6C98;
color:#fff;
}
.el-table td, .el-table th.is-leaf{
text-align: center;
}
.el-table--border th{
border:1px solid #EBEEF5;
}
}
\ No newline at end of file
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="conterFool_bottom" > <div class="page_bottom" >
<div class="bottom_text"> <div class="bottom_text">
<span>{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span> <span>{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span>
</div> </div>
...@@ -85,10 +85,10 @@ ...@@ -85,10 +85,10 @@
<div class="bottom_btns"> <div class="bottom_btns">
<div class="bottom_firest" @click="first">首页</div> <div class="bottom_firest" @click="first">首页</div>
<div ref="last" :class="num <= 1 ? 'bottom_disabled' : 'bottom_next'" @click="last" >上一页</div> <div ref="last" :class="num <= 1 ? 'bottom_disabled' : 'bottom_next'" @click="last" >上一页</div>
<div ref="next" :class="num === totalPage ? 'bottom_disabled' : 'bottom_next'" @click="next" >下一页</div> <div ref="next" :class="num === totalPage || num <= 0 ? 'bottom_disabled' : 'bottom_next'" @click="next" >下一页</div>
<div class="bottom_end" @click="end" > 末页</div> <div class="bottom_end" @click="end" > 末页</div>
<span></span> <span></span>
<input v-model="num" class="text" type="text"/> <input v-model="num" class="text" @input="handleBlur" type="text"/>
<span></span> <span></span>
<div @click="jump" class="bottom_jump">跳转</div> <div @click="jump" class="bottom_jump">跳转</div>
</div> </div>
...@@ -179,6 +179,13 @@ export default { ...@@ -179,6 +179,13 @@ export default {
console.log('上一页') console.log('上一页')
} }
}, },
handleBlur () {
if (this.num > this.totalPage) {
this.num = this.totalPage
} else if(Number(this.num <= 0)) {
this.num = 1
}
},
delData () { delData () {
if (this.checkList.length === 0) { if (this.checkList.length === 0) {
this.deleteShow = true this.deleteShow = true
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<div class="popCenten_box"> <div class="popCenten_box">
<div class="popCenten"> <div class="popCenten">
<div class="centen_row" style="margin-top: 10px" > <div class="centen_row" >
<span class="centen_row_text" style="margin-left: 30px" >线体编号:</span> <span class="centen_row_text">线体编号:</span>
<div class="centen_row_select"> <div class="centen_row_select">
<el-select v-model="value" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option <el-option
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div class="centen_row" style="margin-top:10px"> <div class="centen_row" style="margin-top:10px">
<span class="centen_row_text" style="margin-left: 30px" >物料编号:</span> <span class="centen_row_text" >物料编号:</span>
<div class="centen_row_select"> <div class="centen_row_select">
<el-select v-model="value1" placeholder="请选择"> <el-select v-model="value1" placeholder="请选择">
<el-option <el-option
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="centen_row" style="margin-top:10px"> <div class="centen_row" style="margin-top:10px">
<span class="centen_row_text" style="margin-left: 30px" >入库数量:</span> <span class="centen_row_text" >入库数量:</span>
<div class="centen_row_select"> <div class="centen_row_select">
<el-input @change="numFun()" v-model="count" placeholder="请输入入库数量"></el-input> <el-input @change="numFun()" v-model="count" placeholder="请输入入库数量"></el-input>
</div> </div>
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
position: relative; position: relative;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
width:820px; width: 100%;
height:60px; height:60px;
background:rgba(37,92,193,1); background:rgba(37,92,193,1);
font-size:18px; font-size:18px;
...@@ -181,20 +181,20 @@ export default { ...@@ -181,20 +181,20 @@ export default {
cursor: pointer; cursor: pointer;
} }
.popCenten_box{ .popCenten_box{
height:480px;
width:100%; width:100%;
height:480px;
background: #EEEEEE; background: #EEEEEE;
box-sizing: border-box;
padding: 30px 30px 20px 30px;
.popCenten{ .popCenten{
width:737px; width: 100%;
height:380px; height: 86%;
background: #fff; background: #fff;
margin-top:30px;
margin-left:30px;
padding-top:42px; padding-top:42px;
.centen_row{ .centen_row{
width: 60%; width: 55%;
margin: auto;
height: 40px; height: 40px;
margin: 0 auto;
line-height: 40px; line-height: 40px;
} }
.centen_row_text{ .centen_row_text{
...@@ -211,7 +211,9 @@ export default { ...@@ -211,7 +211,9 @@ export default {
width:100%; width:100%;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
margin:20px 0 0 280px; display: flex;
justify-content: center;
margin-top: 20px;
.cancle{ .cancle{
width: 160px; width: 160px;
height: 40px; height: 40px;
......
<template> <template>
<div class="innerDialog-mask"> <div class="innerDialog-mask">
<div class="scPopBox"> <div class="innerBox">
<div v-drag class="head">{{titleText}} <div v-drag class="head">选择变量
<div @click="close()" class="headImg"></div> <div @click="close()" class="headImg"></div>
</div> </div>
<div class="popCenten_box"> <div class="popCenten_box" >
<div class="popCenten"> <div class="popCenten" >
<div class="centen_row" style="margin-top: 10px" > <!--第一部分 查询条件部分 -->
<span class="centen_row_text" style="margin-left: 30px" >线体编号:</span> <div class="searchForm" >
<div class="centen_row_select"> <div class="search-block">
<el-select v-model="value" placeholder="请选择"> <span class="search" >设备:</span>
<el-select class="selectName" v-model="equipValue" placeholder="请选择">
<el-option <el-option
v-for="item in planList" v-for="item in equipList"
:key="item.PlanType" :key="item.name"
:label="item.PlanType" :label="item.name"
:value="item.PlanType"> :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search-block">
<span class="search" >组名:</span>
<el-select class="selectName" v-model="equipValue" placeholder="请选择">
<el-option
v-for="item in equipList"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</div> </div>
<div class="centen_row" style="margin-top:10px">
<span class="centen_row_text" style="margin-left: 30px" >物料编号:</span> <div class="search-block">
<div class="centen_row_select"> <span class="search" >数据类型:</span>
<el-select v-model="value1" placeholder="请选择"> <el-select class="selectName" v-model="equipValue" placeholder="请选择">
<el-option <el-option
v-for="item in materList" v-for="item in equipList"
:key="item.LineName" :key="item.name"
:label="item.LineName" :label="item.name"
:value="item.LineName"> :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search-block search-input" style="margin-left: 20px">
<el-input type="text" v-model="equipValue" placeholder="关键字" ></el-input>
</div> </div>
<div class="centen_row" style="margin-top:10px"> <div class="search-btn" >查询</div>
<span class="centen_row_text" style="margin-left: 30px" >入库数量:</span>
<div class="centen_row_select"> </div>
<el-input @change="numFun()" v-model="count" placeholder="请输入入库数量"></el-input> <!-- 第二部分 table部分 -->
<el-table
border
height="675"
ref="multipleTable"
:data="innerTableData"
class="inner-table"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
label="设备名"
:show-overflow-tooltip="true"
prop="NO">
</el-table-column>
<el-table-column
label="数据类型"
:show-overflow-tooltip="true"
prop="SID"
>
</el-table-column>
<el-table-column
prop="ProductName"
label="变量名"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
label="描述"
:show-overflow-tooltip="true"
prop="ProductType"
>
</el-table-column>
<el-table-column
label="变量地址"
:show-overflow-tooltip="true"
prop="PlanType"
>
</el-table-column>
</el-table>
<!-- 第三部分 分页 -->
<div class="page_bottom" >
<div class="bottom_text">
<span>{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span>
</div>
<div class="bottom_btns">
<div class="bottom_firest" @click="first">首页</div>
<div ref="last" :class="num <= 1 ? 'bottom_disabled' : 'bottom_next'" @click="last" >上一页</div>
<div ref="next" :class="num === totalPage || num <= 0 ? 'bottom_disabled' : 'bottom_next'" @click="next" >下一页</div>
<div class="bottom_end" @click="end" > 末页</div>
<span></span>
<input v-model="num" @input="handleBlur" class="text" type="text"/>
<span></span>
<div @click="jump" class="bottom_jump">跳转</div>
</div> </div>
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
<div @click="close()" class="cancle">取消</div> <div @click="close()" class="cancle"> </div>
<div @click="conserve()" class="add">保存</div> <div @click="conserve()" class="add"> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -55,24 +123,22 @@ ...@@ -55,24 +123,22 @@
export default { export default {
data() { data() {
return { return {
count: '', equipValue: '',
value: '', equipList: [],
value1 : '', innerTableData: [],
planList: [], num: 1,
materList: [] // 首字母已改为小写
} totalCount: 1,
}, pageIndex: 1,
props: { totalPage: 10,
titleText: { pageSize: 50,
type: String,
default: '选择变量'
} }
}, },
directives: { directives: {
drag: function(el) { drag: function(el) {
let dragBox = el; //获取当前元素 let dragBox = el; //获取当前元素
dragBox.onmousedown = e => { dragBox.onmousedown = e => {
let box = document.querySelector('.scPopBox') let box = document.querySelector('.innerBox')
//算出鼠标相对元素的位置 //算出鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft; let disX = e.clientX - dragBox.offsetLeft;
let disY = e.clientY - dragBox.offsetTop; let disY = e.clientY - dragBox.offsetTop;
...@@ -100,6 +166,65 @@ export default { ...@@ -100,6 +166,65 @@ export default {
// }); // });
// }, // },
handleBlur () {
if (this.num > this.totalPage) {
this.num = this.totalPage
} else if(Number(this.num <= 0)) {
this.num = 1
}
},
// 分页方法
pageFun(num){
if(num == 1){
this.innerTableData = this.innerTableData.slice(0,50)
}else{
this.innerTableData = this.innerTableData.slice((num-1)*this.pageSize + 1,this.pageSize*num)
}
},
//跳转
jump(){
if(this.pageIndex != this.num){
if(this.num>this.totalPage || this.num < 1){
this.typeV = '3'
this.deleteShow = true
}else{
this.pageIndex = this.num
this.pageFun(this.pageIndex)
}
}
},
// 首页
first () {
this.pageIndex = 1
this.num = this.pageIndex
this.pageFun(this.pageIndex)
console.log('首页')
},
//末页
end(){
this.pageIndex = this.totalPage
this.num = this.pageIndex
this.pageFun(this.pageIndex)
console.log('尾页')
},
//下一页
next(){
if(this.pageIndex<this.totalPage){
this.pageIndex = this.pageIndex + 1
this.num = this.pageIndex
this.pageFun(this.pageIndex)
console.log('下一页')
}
},
//上一页
last(){
if(this.pageIndex>1){
this.pageIndex = this.pageIndex - 1
this.num = this.pageIndex
this.pageFun(this.pageIndex)
console.log('上一页')
}
},
close(){ close(){
this.count = '' this.count = ''
this.value = '' this.value = ''
...@@ -128,26 +253,26 @@ export default { ...@@ -128,26 +253,26 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: -80px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
z-index: 29; z-index: 29;
} }
.scPopBox{ .innerBox{
.el-select{ .el-select{
width:310px; width:190px;
} }
.el-date-editor.el-input, .el-date-editor.el-input__inner{ .el-date-editor.el-input, .el-date-editor.el-input__inner{
width:310px; width:190px;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.scPopBox{ .innerBox{
width:820px; width:1320px;
height:550px; height:750px;
background:rgba(238,238,238,1); background:rgba(238,238,238,1);
box-shadow:-7px 7px 50px 0px rgba(51,51,51,0.5); box-shadow:-7px 7px 50px 0px rgba(51,51,51,0.5);
position: absolute; position: absolute;
...@@ -161,8 +286,8 @@ export default { ...@@ -161,8 +286,8 @@ export default {
position: relative; position: relative;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
width:820px; width: 100%;
height:60px; height: 60px;
background:rgba(37,92,193,1); background:rgba(37,92,193,1);
font-size:18px; font-size:18px;
font-family:Microsoft YaHei; font-family:Microsoft YaHei;
...@@ -180,40 +305,59 @@ export default { ...@@ -180,40 +305,59 @@ export default {
background-size:cover ; background-size:cover ;
cursor: pointer; cursor: pointer;
} }
.inner-table {
height: calc(100% - 110px) !important;
}
.popCenten_box{ .popCenten_box{
height:480px;
width:100%; width:100%;
height: calc(100% - 40px);
background: #EEEEEE; background: #EEEEEE;
box-sizing: border-box;
padding: 30px 30px 0px 30px;
.popCenten{ .popCenten{
width:737px; width: 100%;
height:380px; height: 88%;
background: #fff; background: #fff;
margin-top:30px;
margin-left:30px;
padding-top:42px; padding-top:42px;
.centen_row{ box-sizing: border-box;
width: 60%; padding: 20px;
margin: auto; .searchForm {
height: 40px; height: 60px;
line-height: 60px;
display: flex;
align-items: center;
}
.search-btn {
width:120px;
height:40px;
margin-left: 20px;
background:rgba(66,112,228,1);
border-radius:4px;
font-size:16px;
font-family:Microsoft YaHei;
font-weight:bold;
color:rgba(255,255,255,1);
text-align: center;
line-height: 40px; line-height: 40px;
cursor: pointer;
user-select: none;
} }
.centen_row_text{ .search-block {
float: left; margin-left: 15px;
span {
margin-right: 15px
} }
.centen_row_select{
float: right;
width: 310px;
height: 40px;
} }
} }
} }
.btn{ .btn{
width:100%; width:100%;
height: 40px; height: 40px;
overflow: hidden; display: flex;
margin:20px 0 0 280px; justify-content: flex-end;
margin-top: 20px;
.cancle{ .cancle{
width: 160px; width: 110px;
height: 40px; height: 40px;
float: left; float: left;
text-align: center; text-align: center;
...@@ -231,7 +375,7 @@ export default { ...@@ -231,7 +375,7 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
.add{ .add{
width: 160px; width: 110px;
height: 40px; height: 40px;
float: left; float: left;
text-align: center; text-align: center;
...@@ -249,4 +393,5 @@ export default { ...@@ -249,4 +393,5 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment