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

update

parent 896c3b7a
......@@ -28,99 +28,6 @@
height: calc(100% - 110px) !important;
}
// 分页样式
.conterFool_bottom{
width:97%;
margin: auto;
height:50px;
padding-top:12px;
user-select: none;
display: flex;
justify-content: space-between;
.bottom_text{
line-height: 28px;
color:#929292;
font-size: 14px;
}
.bottom_btns{
display: flex;
color:#9C9C9C;
span {
line-height: 30px;
margin: 0 5px;
}
.text{
display: inline-block;
width:65px;
height:30px;
margin:0 5px;
text-align: center;
color:#FDA100;
}
.bottom_firest{
width:65px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
cursor: pointer;
}
.bottom_disabled {
cursor: pointer;
pointer-events: none;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#F9D79C;
border: 1px solid #F8CA7A;
box-sizing: border-box;
background: #f9f9f9;
border-radius: 5px;
margin-left:10px;
}
.bottom_next{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
.bottom_end{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
.bottom_jump{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
}
}
.el-table__header-wrapper{
background: #5A6C98;
}
......@@ -135,4 +42,98 @@
.el-table--border th{
border:1px solid #EBEEF5;
}
}
\ No newline at end of file
}
// 分页样式
.page_bottom{
width:97%;
margin: auto;
height:50px;
padding-top:12px;
user-select: none;
display: flex;
justify-content: space-between;
.bottom_text{
line-height: 28px;
color:#929292;
font-size: 14px;
}
.bottom_btns{
display: flex;
color:#9C9C9C;
span {
line-height: 30px;
margin: 0 5px;
}
.text{
display: inline-block;
width:65px;
height:30px;
margin:0 5px;
text-align: center;
color:#FDA100;
}
.bottom_firest{
width:65px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
cursor: pointer;
}
.bottom_disabled {
cursor: pointer;
pointer-events: none;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#F9D79C;
border: 1px solid #F8CA7A;
box-sizing: border-box;
background: #f9f9f9;
border-radius: 5px;
margin-left:10px;
}
.bottom_next{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
.bottom_end{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
.bottom_jump{
cursor: pointer;
width:80px;
height:30px;
line-height: 28px;
text-align:center;
color:#FDA100;
border: 1px solid #FDA100;
box-sizing: border-box;
border-radius: 5px;
margin-left:10px;
}
}
}
\ No newline at end of file
......@@ -77,7 +77,7 @@
</el-table-column>
</el-table>
<div class="conterFool_bottom" >
<div class="page_bottom" >
<div class="bottom_text">
<span>{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span>
</div>
......@@ -85,10 +85,10 @@
<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 ? '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>
<span></span>
<input v-model="num" class="text" type="text"/>
<input v-model="num" class="text" @input="handleBlur" type="text"/>
<span></span>
<div @click="jump" class="bottom_jump">跳转</div>
</div>
......@@ -179,6 +179,13 @@ export default {
console.log('上一页')
}
},
handleBlur () {
if (this.num > this.totalPage) {
this.num = this.totalPage
} else if(Number(this.num <= 0)) {
this.num = 1
}
},
delData () {
if (this.checkList.length === 0) {
this.deleteShow = true
......
......@@ -7,8 +7,8 @@
<div class="popCenten_box">
<div class="popCenten">
<div class="centen_row" style="margin-top: 10px" >
<span class="centen_row_text" style="margin-left: 30px" >线体编号:</span>
<div class="centen_row" >
<span class="centen_row_text">线体编号:</span>
<div class="centen_row_select">
<el-select v-model="value" placeholder="请选择">
<el-option
......@@ -21,7 +21,7 @@
</div>
</div>
<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">
<el-select v-model="value1" placeholder="请选择">
<el-option
......@@ -35,7 +35,7 @@
</div>
<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">
<el-input @change="numFun()" v-model="count" placeholder="请输入入库数量"></el-input>
</div>
......@@ -161,7 +161,7 @@ export default {
position: relative;
line-height: 60px;
text-align: center;
width:820px;
width: 100%;
height:60px;
background:rgba(37,92,193,1);
font-size:18px;
......@@ -181,20 +181,20 @@ export default {
cursor: pointer;
}
.popCenten_box{
height:480px;
width:100%;
height:480px;
background: #EEEEEE;
box-sizing: border-box;
padding: 30px 30px 20px 30px;
.popCenten{
width:737px;
height:380px;
width: 100%;
height: 86%;
background: #fff;
margin-top:30px;
margin-left:30px;
padding-top:42px;
.centen_row{
width: 60%;
margin: auto;
width: 55%;
height: 40px;
margin: 0 auto;
line-height: 40px;
}
.centen_row_text{
......@@ -211,7 +211,9 @@ export default {
width:100%;
height: 40px;
overflow: hidden;
margin:20px 0 0 280px;
display: flex;
justify-content: center;
margin-top: 20px;
.cancle{
width: 160px;
height: 40px;
......
<template>
<div class="innerDialog-mask">
<div class="scPopBox">
<div v-drag class="head">{{titleText}}
<div class="innerBox">
<div v-drag class="head">选择变量
<div @click="close()" class="headImg"></div>
</div>
<div class="popCenten_box">
<div class="popCenten">
<div class="centen_row" style="margin-top: 10px" >
<span class="centen_row_text" style="margin-left: 30px" >线体编号:</span>
<div class="centen_row_select">
<el-select v-model="value" placeholder="请选择">
<div class="popCenten_box" >
<div class="popCenten" >
<!--第一部分 查询条件部分 -->
<div class="searchForm" >
<div class="search-block">
<span class="search" >设备:</span>
<el-select class="selectName" v-model="equipValue" placeholder="请选择">
<el-option
v-for="item in planList"
:key="item.PlanType"
:label="item.PlanType"
:value="item.PlanType">
</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="centen_row_select">
<el-select v-model="value1" placeholder="请选择">
<el-option
v-for="item in materList"
:key="item.LineName"
:label="item.LineName"
:value="item.LineName">
</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 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="search-block search-input" style="margin-left: 20px">
<el-input type="text" v-model="equipValue" placeholder="关键字" ></el-input>
</div>
<div class="search-btn" >查询</div>
</div>
<div class="centen_row" style="margin-top:10px">
<span class="centen_row_text" style="margin-left: 30px" >入库数量:</span>
<div class="centen_row_select">
<el-input @change="numFun()" v-model="count" placeholder="请输入入库数量"></el-input>
</div>
<!-- 第二部分 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 class="btn">
<div @click="close()" class="cancle">取消</div>
<div @click="conserve()" class="add">保存</div>
<div @click="close()" class="cancle"> </div>
<div @click="conserve()" class="add"> </div>
</div>
</div>
</div>
......@@ -55,24 +123,22 @@
export default {
data() {
return {
count: '',
value: '',
value1 : '',
planList: [],
materList: []
}
},
props: {
titleText: {
type: String,
default: '选择变量'
equipValue: '',
equipList: [],
innerTableData: [],
num: 1,
// 首字母已改为小写
totalCount: 1,
pageIndex: 1,
totalPage: 10,
pageSize: 50,
}
},
directives: {
drag: function(el) {
let dragBox = el; //获取当前元素
dragBox.onmousedown = e => {
let box = document.querySelector('.scPopBox')
let box = document.querySelector('.innerBox')
//算出鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft;
let disY = e.clientY - dragBox.offsetTop;
......@@ -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(){
this.count = ''
this.value = ''
......@@ -126,28 +251,28 @@ export default {
<style lang="scss">
.innerDialog-mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 29;
height: 100%;
position: absolute;
top: -80px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 29;
}
.scPopBox{
.innerBox{
.el-select{
width:310px;
width:190px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
width:310px;
width:190px;
}
}
</style>
<style lang="scss" scoped>
.scPopBox{
width:820px;
height:550px;
.innerBox{
width:1320px;
height:750px;
background:rgba(238,238,238,1);
box-shadow:-7px 7px 50px 0px rgba(51,51,51,0.5);
position: absolute;
......@@ -161,8 +286,8 @@ export default {
position: relative;
line-height: 60px;
text-align: center;
width:820px;
height:60px;
width: 100%;
height: 60px;
background:rgba(37,92,193,1);
font-size:18px;
font-family:Microsoft YaHei;
......@@ -180,40 +305,59 @@ export default {
background-size:cover ;
cursor: pointer;
}
.inner-table {
height: calc(100% - 110px) !important;
}
.popCenten_box{
height:480px;
width:100%;
height: calc(100% - 40px);
background: #EEEEEE;
box-sizing: border-box;
padding: 30px 30px 0px 30px;
.popCenten{
width:737px;
height:380px;
width: 100%;
height: 88%;
background: #fff;
margin-top:30px;
margin-left:30px;
padding-top:42px;
.centen_row{
width: 60%;
margin: auto;
height: 40px;
line-height: 40px;
box-sizing: border-box;
padding: 20px;
.searchForm {
height: 60px;
line-height: 60px;
display: flex;
align-items: center;
}
.centen_row_text{
float: left;
.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;
cursor: pointer;
user-select: none;
}
.centen_row_select{
float: right;
width: 310px;
height: 40px;
.search-block {
margin-left: 15px;
span {
margin-right: 15px
}
}
}
}
.btn{
width:100%;
height: 40px;
overflow: hidden;
margin:20px 0 0 280px;
display: flex;
justify-content: flex-end;
margin-top: 20px;
.cancle{
width: 160px;
width: 110px;
height: 40px;
float: left;
text-align: center;
......@@ -231,7 +375,7 @@ export default {
margin-right: 20px;
}
.add{
width: 160px;
width: 110px;
height: 40px;
float: left;
text-align: center;
......@@ -249,4 +393,5 @@ export default {
}
}
}
</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