Commit b3b8e80d authored by 王文琼's avatar 王文琼

针车派工单

parent c1f4a48a
* {
list-style: none;
padding: 0;
margin: 0;
border: 0;
touch-action: none;
}
html,
body,
#app {
width: 100%;
height: 100%;
}
[v-cloak] {
display: none !important;
}
.dis {
background: #bababa;
opacity: 0.8;
}
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main {
width: 100%;
height: 100%;
}
.top {
width: 100%;
height: 50px;
}
.top header {
width: 40%;
}
.select {
height: 44px;
width: 60%;
float: right;
overflow: hidden;
}
.select-left {
width: 80px;
height: 44px;
float: right;
border: 1px solid #c8c7cc;
}
.select-left select {
background-color: rgba(0, 0, 0, .1);
padding: 0;
padding-left: 5px;
text-align: center;
height: 43px;
margin: 0;
border-radius: 0;
}
.mui-search {
width: calc(100% - 280px);
float: right;
}
.mui-search input {
height: 44px;
border-radius: 0;
margin: 0;
}
.mui-search .mui-placeholder {
line-height: 44px;
}
.mui-search:before {
top: 65%;
}
.pickerData {
width: 200px;
float: right;
border-radius: 3px;
margin-top: 5px;
text-align: center;
}
.pickerData .mui-icon {
border: 0px;
color: royalblue;
}
.pickerData .mui-icon:last-of-type {
float: right;
}
.pickerData2 {
width: calc(100% - 290px);
float: right;
border-radius: 3px;
margin-top: 5px;
border: 1px solid #E2E2E9;
margin-left: 10px;
}
.pickerData2 .mui-icon {
border: 0px;
color: royalblue;
}
.pickerData2 .mui-icon:last-of-type {
float: right;
}
#selectdate2 {
border: 0;
width: calc(100% - 105px);
height: 36px;
}
#selectdate {
border: 0;
width: calc(100% - 105px);
height: 36px;
}
.mui-inner-wrap {
height: 100%;
}
/*****表格*****/
.detail-list {
width: 100%;
height: calc(100% - 50px);
background: #fff;
}
.item_table {
position: relative;
height: calc(100% - 40px);
padding-bottom: 40px;
box-sizing: border-box;
}
.mui-table td {
text-align: center;
height: 35px;
line-height: 35px;
}
.mui-table th {
text-align: center;
height: 35px;
line-height: 35px;
background: #E2E2E9;
}
.mui-table tr {
border-bottom: 1px solid #c8c7cc;
}
.mui-table-view:before {
content: none;
}
.mui-table .swidth {
width: 5%;
}
.mui-table .bwidth {
width: 8%;
}
.sDetail {
padding: 0;
background: #fff;
overflow-y: scroll;
}
.countInfor {
position: fixed;
text-align: center;
line-height: 40px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 40px;
z-index: 5;
background: #E2E2E9;
}
.countInfor label{
font-weight: bold;
color: red;
}
/*****底部选择*****/
.showChange {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 125px;
z-index: 50;
}
.mui-card {
margin: 0;
position: relative;
width: 100%;
padding-bottom: 10px;
}
.showChange .mui-card .mui-title {
position: inherit;
}
.mui-input-group .mui-input-row:after {
height: 0;
}
.showChange .mui-card .mui-checkbox {
width: 14.25%;
float: left;
clear: none;
}
.bottomBtn {
width: 120px;
position: absolute;
bottom: 20px;
left: calc((100% - 120px)/2);
}
.mui-checkbox.mui-left label {
padding-right: 5px;
padding-left: 30px;
}
.mui-checkbox.mui-left input[type=checkbox] {
left: 2px;
}
@media screen and (max-width: 700px) {
.mui-checkbox.mui-left label {
padding-right: 5px;
padding-left: 30px;
font-size: 12px;
}
}
.mui-card .mui-title .mui-btn {
width: 50px;
height: 30px;
box-sizing: border-box;
text-align: center;
padding: 0;
margin-top: 5px;
}
/*******侧滑样式******/
.right-main {
padding-top: 5px;
position: relative;
}
.top1 {
height: 45px;
}
.selectdate1 {
border: 0;
}
.top1 label {
padding-left: 10px;
width: 40%;
display: block;
float: left;
line-height: 35px;
}
.top1 button.mui-btn-danger {
float: right;
margin-right: 10px;
}
.data01 {
width: 40%;
height: 35px;
float: left;
}
.pickerData1 {
width: 200px;
border-radius: 3px;
text-align: center;
margin-left: 10px;
border: 1px solid #c8c7cc;
}
.pickerData1 #selectdate1 {
border: 0;
padding-top: 9px;
}
.pickerData1 .mui-icon {
border: 0px;
color: royalblue;
}
.pickerData1 .mui-icon:last-of-type {
float: right;
}
.top-btn {
width: 122px;
/* border: 1px solid #c8c7cc; */
height: 35px;
line-height: 34px;
float: left;
text-align: center;
}
.top-btn span {
display: block;
width: 60px;
text-align: center;
float: left;
}
.top-btn span:first-of-type {
border-right: 1px solid #c8c7cc;
}
.right-list {
height: 400px;
}
.table-list {
height: 350px;
overflow-y: scroll;
}
#right-dis {
width: 100%;
position: absolute;
top: 0px;
background: white;
}
.rightDetail{
background:#fff;height: 100%;
}
.table-header{
background: #9BD3F6;
}
.altrowstable{
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>针车派工单</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../dest/css/mui.min.css" rel="stylesheet" />
<link href="../dest/css/mui.picker.min.css" rel="stylesheet" />
<link href="../dest/css/NeedleDispatch/NeedleDispatch.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../dest/css/icons-extra.css" />
</head>
<body>
<div id="app" v-cloak class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<!-------主体------->
<div class="main">
<div class="top">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">{{tittle}}</h1>
<a class="mui-icon mui-icon-bars mui-pull-right" @tap="showColumn"></a>
</header>
<div class="select">
<div class="pickerData">
<button class="mui-icon mui-icon-arrowleft mui-btn-outlined ;" @click="nextMonth(-1)"></button>
<button class="mui-btn-outlined" id="selectdate" data-options='{"type":"month"}' name="shipdate" @click="selecttime()">{{dateTime}}</button>
<button class="mui-icon mui-icon-arrowright mui-btn-outlined " @click="nextMonth(1)"></button>
</div>
<div class="mui-input-row mui-search" v-show="!isData">
<input class="mui-input-clear search" placeholder="搜索" v-model="searchText" type="search" pattern="\d*"
@keyup.enter="goSearch($event)">
</div>
<div id="pickerData2" class="pickerData2" v-show="isData">
<button class="mui-icon mui-icon-arrowleft mui-btn-outlined ;" @click="nextday2(-1)"></button>
<button class="mui-btn-outlined" id="selectdate2" data-options='{"type":"date"}' name="shipdate" @click="selecttime2()">{{dateTime2}}</button>
<button class="mui-icon mui-icon-arrowright mui-btn-outlined " @click="nextday2(1)"></button>
</div>
<div class="select-left">
<select v-model="current" @change="changeSearchType">
<option :value="item.id" v-for="item in searchData">{{item.name}}</option>
</select>
</div>
</div>
</div>
<div class="detail-list">
<table class="mui-table ">
<thead class="mui-table-view">
<tr>
<th v-show="showStyleName" class="bwidth text-overflow">品名</th>
<th v-show="showCustomPO" class="bwidth text-overflow">订单号</th>
<th v-show="showIndexNo" class="bwidth text-overflow">指令号</th>
<th v-show="showStyleCode" class="bwidth text-overflow">货号</th>
<th v-show="showColor" class="swidth text-overflow">颜色</th>
<th v-show="showTotalCount" class="swidth text-overflow">数量</th>
<th v-show="showPrice" class="swidth text-overflow">单价</th>
<th v-show="showTotalMoney" class="swidth text-overflow">金额</th>
<th v-show="showMatchDate" class="bwidth text-overflow">裁断配套</th>
<th v-show="showConfirmDate" class="bwidth text-overflow">扣件/鞋带</th>
<th v-show="showZCPlanBeginDate" class="bwidth text-overflow">上线计划</th>
<th v-show="showZCPlanDeliveryDate" class="bwidth text-overflow">计划交期</th>
<th v-show="showPlanDate" class="bwidth text-overflow">实际上线</th>
<th v-show="showFinishDate" class="bwidth text-overflow">实际完成</th>
</tr>
</thead>
</table>
<div class="item_table mui-scroll-wrapper" id="pullrefresh">
<div class="mui-scroll ">
<table class="mui-table ">
<tbody class=" sDetail " id="sDetail">
<tr v-for="(item,index) in itemsList" :key="index" @tap="showDetail(item)">
<td :style="{color:'rgb('+item.StyleName_1+')',background:'rgb('+ item.StyleName_2 +')' }"
v-show="showStyleName" class="bwidth text-overflow" >{{item.StyleName}}</td>
<td :style="{color:'rgb('+item.CustomPO_1+')',background:'rgb('+ item.CustomPO_2 +')' }"
v-show="showCustomPO" class="bwidth text-overflow">{{item.CustomPO}}</td>
<td :style="{color:'rgb('+item.IndexNo_1+')',background:'rgb('+ item.IndexNo_2 +')' }"
v-show="showIndexNo" class="bwidth text-overflow">{{item.IndexNo}}</td>
<td :style="{color:'rgb('+item.StyleCode_1+')',background:'rgb('+ item.StyleCode_2 +')' }"
v-show="showStyleCode" class="bwidth text-overflow">{{item.StyleCode}}</td>
<td :style="{color:'rgb('+item.ColorName_1+')',background:'rgb('+ item.ColorName_2 +')' }"
v-show="showColor" class="swidth text-overflow">{{item.ColorName}}</td>
<td :style="{color:'rgb('+item.TotalCount_1+')',background:'rgb('+ item.TotalCount_2 +')' }"
v-show="showTotalCount" class="swidth text-overflow">{{item.TotalCount}}</td>
<td :style="{color:'rgb('+item.Price_1+')',background:'rgb('+ item.Price_2 +')' }"
v-show="showPrice" class="swidth text-overflow">{{item.Price}}</td>
<td :style="{color:'rgb('+item.TotalMoney_1+')',background:'rgb('+ item.TotalMoney_2 +')' }"
v-show="showTotalMoney" class="swidth text-overflow">{{item.TotalMoney}}</td>
<td :style="{color:'rgb('+item.MatchDate_1+')',background:'rgb('+ item.MatchDate_2 +')' }"
v-show="showMatchDate" class="bwidth text-overflow">{{item.MatchDate}}</td>
<td :style="{color:'rgb('+item.ConfirmDate_1+')',background:'rgb('+ item.ConfirmDate_2 +')' }"
v-show="showConfirmDate" class="bwidth text-overflow">{{item.ConfirmDate}}</td>
<td :style="{color:'rgb('+item.ZCPlanBeginDate_1+')',background:'rgb('+ item.ZCPlanBeginDate_2 +')' }"
v-show="showZCPlanBeginDate" class="bwidth text-overflow">{{item.ZCPlanBeginDate}}</td>
<td :style="{color:'rgb('+item.ZCPlanDeliveryDate_1+')',background:'rgb('+ item.ZCPlanDeliveryDate_2 +')' }"
v-show="showZCPlanDeliveryDate" class="bwidth text-overflow">{{item.ZCPlanDeliveryDate}}</td>
<td :style="{color:'rgb('+item.PlanDate_1+')',background:'rgb('+ item.PlanDate_2 +')' }"
v-show="showPlanDate" class="bwidth text-overflow">{{item.PlanDate}}</td>
<td :style="{color:'rgb('+item.FinishDate_1+')',background:'rgb('+ item.FinishDate_2 +')' }"
v-show="showFinishDate" class="bwidth text-overflow">{{item.FinishDate}}</td>
</tr>
<!-- <tr @tap="showDetail(item)">
<td class="bwidth text-overflow">bbbbbbbbbbb</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
<div class="countInfor">
<!-- <label> 当前共{{TotalIndexNo}}个指令单,共{{TotalCount}}双</label> -->
<label>{{Summary}}</label>
</div>
<div class="showChange" v-show="show">
<div class="mui-card">
<h2 class="mui-title">请选择显示的列<button type="button" class="mui-btn mui-btn-primary mui-pull-right" @click="escChange">确定</button></h2>
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>品名</label>
<input name="checkbox" type="checkbox" v-model="showStyleName" @click="change(0)">
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>指令号</label>
<input name="checkbox" type="checkbox" v-model="showIndexNo" @click="change(1)">
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>订单号</label>
<input name="checkbox" type="checkbox" v-model="showCustomPO" @click="change(2)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>货号</label>
<input name="checkbox" type="checkbox" v-model="showStyleCode" @click="change(3)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>颜色</label>
<input name="checkbox" type="checkbox" v-model="showColor" @click="change(4)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>数量</label>
<input name="checkbox" type="checkbox" v-model="showTotalCount" @click="change(5)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>单价</label>
<input name="checkbox" type="checkbox" v-model="showPrice" @click="change(6)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>金额</label>
<input name="checkbox" type="checkbox" v-model="showTotalMoney" @click="change(7)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>裁断配套</label>
<input name="checkbox" type="checkbox" v-model="showMatchDate" @click="change(8)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>扣件/鞋带</label>
<input name="checkbox" type="checkbox" v-model="showConfirmDate" @click="change(9)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>上线计划</label>
<input name="checkbox" type="checkbox" v-model="showZCPlanBeginDate" @click="change(10)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>计划交期</label>
<input name="checkbox" type="checkbox" v-model="showZCPlanDeliveryDate" @click="change(11)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>实际上线</label>
<input name="checkbox" type="checkbox" v-model="showPlanDate" @click="change(12)">
</div>
<div class="mui-input-row mui-checkbox mui-left ">
<label>实际完成</label>
<input name="checkbox" type="checkbox" v-model="showFinishDate" @click="change(13)">
</div>
</form>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
<!-------主体------->
<!--------侧滑-------->
<aside class="mui-off-canvas-right">
<div class="rightDetail">
<div class="right-main">
<div class="right-top">
<div class="top1">
<label class="text-overflow">指令号:{{IndexNo}}</label>
<label class="text-overflow">货号:{{StyleCode}}</label>
<button type="button" class="mui-btn mui-btn-danger" @tap="closeRight">关闭</button>
</div>
<div class="top1">
<div class="data01">
<div class="pickerData1">
<button class="mui-icon mui-icon-arrowleft mui-btn-outlined ;" @click="nextday(-1)"></button>
<button class="mui-btn-outlined" id="selectdate1" data-options='{"type":"date"}' name="shipdate" @click="selecttime1()">{{dateTime1}}</button>
<button class="mui-icon mui-icon-arrowright mui-btn-outlined " @click="nextday(1)"></button>
</div>
</div>
<div class="top-btn">
<!-- <span @tap="getDetailData" >发包</span>
<span @tap="revokeData" >撤销</span> -->
<button :disabled="!isAward" type="button" class="mui-btn mui-btn-blue " @tap="getDetailData">发包</button>
<button :disabled="isAward" type="button" class="mui-btn mui-btn-blue " @tap="revokeData">撤销</button>
</div>
</div>
</div>
<div class="right-list" v-show="sty1">
<table class="mui-table table-header">
<tbody class="mui-table-view-cell">
<tr>
<td style="text-align: center; width: 20%;">
<div class="mui-input-row mui-checkbox mui-left" @tap="selectAll">
<label>全选</label>
<input id="cheAll" name="checkbox1" type="checkbox" :checked="all">
</div>
</td>
<td style="text-align: center; width: 40%;">工序</td>
<td style="text-align: center; width: 15%;">数量</td>
<td style="text-align: center; width: 25%;">人员</td>
</tr>
</tbody>
</table>
<div class="mui-scroll-wrapper " style="top: 136px; width: 100%; height: 350px;">
<div class="mui-scroll">
<div>
<table class="mui-table">
<tbody class="mui-table-view-cell">
<tr v-for="(item2 ,m) in itemsData2">
<td class="altrowstable" style=" width: 20%;">
<div class="mui-input-row mui-checkbox mui-left">
<label>&nbsp;</label>
<input :id="item2.IEID" class="che" :checked="item2.status" name="checkbox1" type="checkbox" @tap="selectCheck(m)" >
</div>
</td>
<td class="altrowstable" style=" width: 40%;">{{item2.IEName}}</td>
<td class="altrowstable" style=" width: 15%;">{{item2.TotalQty}}</td>
<td class="altrowstable" style=" width: 25%;">
<a @tap="selectPerson(item2)" v-if="item2.Workers.length == 0">
<span class="mui-icon-extra mui-icon-extra-addpeople"></span>
</a>
<a @tap="selectPerson(item2)" v-else>
<label style="height: 25px; display: block;" v-for="k in item2.Workers"> {{k.UserName}}:{{k.Qty}}</label>
</a>
</td>
</tr>
</tbody>
</table>
<p v-if="itemsData2.length == 0" style="text-align: center;line-height: 35px;">没有对应数据!</p>
</div>
</div>
</div>
</div>
<div id="right-dis " v-show="!sty1" class="mui-pull-right " >
<table class="mui-table" style="background: white;">
<tbody class="mui-table-view-cell">
<tr style="height: 30px; ">
<td style="text-align: center; border-bottom:1px solid #BBB; width: 300px;">
姓名
</td>
<td style="text-align: center; border-bottom:1px solid #BBB;">
数量
</td>
</tr>
</tbody>
</table>
<div class="mui-scroll-wrapper " style="top: 36px; width: 100%; height: 460px; background: white;">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
<div id='list'>
<table class="mui-table">
<tbody class="mui-table-view-cell">
<tr v-for="(item ,m) in PersonList">
<td style="text-align: center; border-bottom:1px solid #BBB; width: 300px;" @click="selectChe(m)">
<div class="mui-input-row mui-checkbox mui-left">
<label>{{item.UserName}}</label>
<input :id="item.UserID" class="che" name="checkbox1" type="checkbox" :checked="item.status">
</div>
</td>
<td :id="'num_' + item.UserID " style="text-align: center; border-bottom:1px solid #BBB;">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 1px ; right: 1px; ">
<button type="button" class="mui-btn mui-btn-blue " style=" width: 150px; height: 70px;" @tap="sop">SOP</button>
<button type="button" class="mui-btn mui-btn-blue " style="width:150px;height: 70px; " :disabled="selectPL" @tap="selectPersonAll">批量选员</button>
<button id="submit" type="button" class="mui-btn mui-btn-blue " style=" width: 150px; height: 70px;" @tap="submit">提交</button>
</div>
</div>
</aside>
</div>
</div>
<script src="../dest/js/mui.min.js"></script>
<script src="../dest/js/vue.min.js"></script>
<script src="../dest/js/public.min.js"></script>
<script src="../dest/js/mes/playVoice.js"></script>
<script src="../dest/js/moment.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../dest/js/mui.picker.min.js"></script>
<script src="../dest/js/mes/NeedleDispatch.js"></script>
</body>
</html>
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