|
|
@@ -0,0 +1,372 @@
|
|
|
+<template>
|
|
|
+<view>
|
|
|
+ <view v-if="$util.isEmpty(orderInfo)"></view>
|
|
|
+ <view class="work-info" v-else>
|
|
|
+ <view class="work-detail">
|
|
|
+ <view class="order-img">
|
|
|
+ <image :src="orderInfo.cover"></image>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view><text class="left">分类</text><text class="right">{{orderInfo.catName}}</text></view>
|
|
|
+ <view><text class="left">名称</text><text class="right">{{orderInfo.name}}</text></view>
|
|
|
+ <view><text class="left">数量</text><text class="right">{{orderInfo.num}}</text></view>
|
|
|
+ <view><text class="left">商品编号</text><text class="right">{{orderInfo.goodsId}}</text></view>
|
|
|
+ <view><text class="left">售价</text><text class="right">{{orderInfo.price||''}}</text></view>
|
|
|
+ <view><text class="left">工单号</text><text class="right">{{orderInfo.workSn}}</text></view>
|
|
|
+ <view><text class="left">订单号</text><text class="right">{{orderInfo.orderSn}}</text></view>
|
|
|
+ <view><text class="left">状态</text><text class="right">{{getStatus(orderInfo.status)}}</text></view>
|
|
|
+ <view><text class="left">备注</text><text class="right">{{orderInfo.remark}}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="work-item-detail">
|
|
|
+
|
|
|
+ <view class="flex-space right-detail-title">单位用材</view>
|
|
|
+
|
|
|
+ <view class="unit-use-item">
|
|
|
+ <view class="commodity-list">
|
|
|
+ <view v-for="(s, idx) in orderItem" :key="idx" class="commodity-item" >
|
|
|
+ <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})"></image>
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-line">
|
|
|
+ <text class="item-name">{{ s.name }}</text>
|
|
|
+ <text class="item-price">
|
|
|
+ <text class="unit">5扎</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <text class="item-type">20支/扎</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-bar">
|
|
|
+ <view class="operate-view" ></view>
|
|
|
+ <view class="describe-view"><text>2扎</text> <text>3支</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height:2vh;background-color:#EEEEEE;"></view>
|
|
|
+
|
|
|
+ <view class="flex-space right-detail-title"> 累计用材 </view>
|
|
|
+
|
|
|
+ <view class="total-use-item">
|
|
|
+ <view class="commodity-list">
|
|
|
+ <view v-for="(s, idx) in orderItem" :key="idx" class="commodity-item" >
|
|
|
+ <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})" />
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-line">
|
|
|
+ <text class="item-name">{{ s.name }}</text>
|
|
|
+ <text class="item-price">
|
|
|
+ <text class="unit">5扎</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-line">
|
|
|
+ <text class="item-type">20支/扎</text>
|
|
|
+ <button class="wastage">报损</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="summary-bar">
|
|
|
+ <view class="operate-view" ></view>
|
|
|
+ <view class="describe-view"><text>2扎</text> <text>3支</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button-area">
|
|
|
+ <view @click="modifyItem(orderInfo)">修改</view>
|
|
|
+ <view>取消</view>
|
|
|
+ <view>锁定</view>
|
|
|
+ <view class="active">完成</view>
|
|
|
+ <view>打印</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getFullInfo } from '@/api/work'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderInfo:[],
|
|
|
+ orderItem:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ selectOrderId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ selectOrderId:{
|
|
|
+ handler(newId){
|
|
|
+ if(Number(newId)>0){
|
|
|
+ this.getOrderDetail(newId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ modifyItem(info){
|
|
|
+ this.$util.pageTo({url:'/admin/work/modify',query: { id:info.id }})
|
|
|
+ },
|
|
|
+ getStatus(status) {
|
|
|
+ switch (status) {
|
|
|
+ case "0":
|
|
|
+ return "待完成";
|
|
|
+ break;
|
|
|
+ case "1":
|
|
|
+ return "已完成";
|
|
|
+ break;
|
|
|
+ case "2":
|
|
|
+ return "已取消";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ return "待完成";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getOrderDetail(id){
|
|
|
+ getFullInfo({id}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.orderInfo = res.data.info
|
|
|
+ this.orderItem = res.data.item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.work-info{
|
|
|
+ display:flex;
|
|
|
+ height: 100%;
|
|
|
+ & .work-detail{
|
|
|
+ border-right:1upx solid #EEEEEE;
|
|
|
+ flex: 40;
|
|
|
+ .order-img{
|
|
|
+ display:flex;
|
|
|
+ margin:5upx;
|
|
|
+ justify-content:center;
|
|
|
+ image{
|
|
|
+ width:180upx;
|
|
|
+ height:180upx;
|
|
|
+ border-radius:3upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-item{
|
|
|
+ display:flex;
|
|
|
+ font-size:11upx;
|
|
|
+ margin-top:10upx;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap:wrap;
|
|
|
+ view{
|
|
|
+ justify-content:space-between;
|
|
|
+ align-items:center;
|
|
|
+ display:flex;
|
|
|
+ border-bottom:1upx solid #EEEEEE;
|
|
|
+ width:180upx;
|
|
|
+ height:19upx;
|
|
|
+ padding:0 10upx 0 10upx;
|
|
|
+ .left{
|
|
|
+ color:#CCCCCC;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .button-area {
|
|
|
+ flex: 9;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 5upx;
|
|
|
+ border-left:1upx solid #EEEEEE;
|
|
|
+ & > view {
|
|
|
+ border: 1upx solid #EEEEEE;
|
|
|
+ border-radius: 5upx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10upx 0;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ font-size: 10upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ & .active {
|
|
|
+ color: #1627be;
|
|
|
+ border-color: #1627be;
|
|
|
+ font-size: 10upx;
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .work-item-detail {
|
|
|
+ flex: 40;
|
|
|
+ height: 100%;
|
|
|
+ & .right-detail-title{
|
|
|
+ font-size:10upx;
|
|
|
+ font-weight:bold;
|
|
|
+ margin-left:5upx;
|
|
|
+ margin-top:5upx;
|
|
|
+ }
|
|
|
+ & .unit-use-item {
|
|
|
+ flex: 40;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .commodity-list {
|
|
|
+ padding: 5upx;
|
|
|
+ .commodity-item {
|
|
|
+ display: flex;
|
|
|
+ margin-top:5upx;
|
|
|
+ .item-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 38upx;
|
|
|
+ height: 38upx;
|
|
|
+ border-radius:2upx;
|
|
|
+ }
|
|
|
+ .item-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ margin-left:6upx;
|
|
|
+ .info-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
+ .item-name {
|
|
|
+ font-size:11upx;
|
|
|
+ color: black;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ color: #333;
|
|
|
+ font-size: 10upx;
|
|
|
+ }
|
|
|
+ .item-type {
|
|
|
+ color: #999;
|
|
|
+ font-size: 8upx;
|
|
|
+ }
|
|
|
+ .item-count {
|
|
|
+ color: #666;
|
|
|
+ font-size: 11upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .summary-bar {
|
|
|
+ padding: 0 10upx;
|
|
|
+ height: 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1upx solid #eeeeee;
|
|
|
+ .operate-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 12upx;
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 20upx;
|
|
|
+ font-size: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .describe-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333;
|
|
|
+ font-size: 9upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .total-use-item {
|
|
|
+ flex: 40;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .commodity-list {
|
|
|
+ padding: 5upx;
|
|
|
+ .commodity-item {
|
|
|
+ display: flex;
|
|
|
+ margin-top:5upx;
|
|
|
+ .item-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 38upx;
|
|
|
+ height: 38upx;
|
|
|
+ border-radius:2upx;
|
|
|
+ }
|
|
|
+ .item-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ margin-left:6upx;
|
|
|
+ .info-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
+ .item-name {
|
|
|
+ font-size:11upx;
|
|
|
+ color: black;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ color: #333;
|
|
|
+ font-size: 10upx;
|
|
|
+ }
|
|
|
+ .item-type {
|
|
|
+ color: #999;
|
|
|
+ font-size: 8upx;
|
|
|
+ }
|
|
|
+ .item-count {
|
|
|
+ color: #666;
|
|
|
+ font-size: 11upx;
|
|
|
+ }
|
|
|
+ .wastage{
|
|
|
+ position: absolute;
|
|
|
+ right:0upx;
|
|
|
+ font-size:9upx;
|
|
|
+ top:4upx;
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .summary-bar {
|
|
|
+ padding: 0 10upx;
|
|
|
+ height: 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1upx solid #eeeeee;
|
|
|
+ .operate-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 12upx;
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 20upx;
|
|
|
+ font-size: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .describe-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333;
|
|
|
+ font-size: 9upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|