【nev-pc】kitting打包相关需求更改

fe/PC/src/views/padManage/isPadForKittingPack.vue

@@ -52,7 +52,7 @@
                 <el-table-column 
                   type="index"
                   label="序号"
-                  width="50px"
+                  width="80px"
                 ></el-table-column>
                 <el-table-column
                   prop="chassisNumber"
@@ -94,30 +94,21 @@
                 :height="'100%'"
                 style="width: 100%">
                 <el-table-column
-                  prop="itemCode"
+                  v-for="(item,index) in rightBottomBomDataConfig"
-                  label="Kitting组别Bom"
+                  :key="index"
-                ></el-table-column>
+                  :prop="item.prop"
-                <el-table-column
+                  :label="item.label"
-                  prop="chassisIndex"
-                  label="底盘序号"
-                ></el-table-column>
-                <!-- <el-table-column
-                  prop="itemName"
-                  label="料号名称"
-                ></el-table-column> -->
-                <el-table-column
-                  prop="itemDesc1"
-                  label="料号描述"
-                ></el-table-column>
-                <el-table-column
-                  prop="configuration"
-                  label="规格/颜色"
-                ></el-table-column>
-                <el-table-column
-                  prop="qty"
-                  label="KittingBom数量"
                 ></el-table-column>
               </el-table>
+              <!-- 右下角放大 -->
+              <el-button 
+                v-if="rightBottomBomData && rightBottomBomData.length > 0"
+                type="primary" 
+                class="rightBottomScreenIcon" 
+                icon="el-icon-full-screen" 
+                circle
+                @click="rightBottomScreenShow = true"
+              ></el-button>
             </div>
           </div>
           <div class="footer-button">
@@ -127,6 +118,31 @@
         </div>
       </div>
     </div>
+    <!-- 右下角放大弹窗 -->
+    <el-dialog 
+      :visible.sync="rightBottomScreenShow"
+      width="90%"
+      top="5vh"
+    >
+      <div class="rightBottomScreenInner">
+        <el-table
+          :border="true"
+          :data="rightBottomBomData"
+          :header-cell-style="{ background: '#e3f0ff',color:'#333'}"
+          :height="'100%'"
+          style="width: 100%">
+          <el-table-column
+            v-for="(item,index) in rightBottomBomDataConfig"
+            :key="index"
+            :prop="item.prop"
+            :label="item.label"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="rightBottomScreenShow = false" style="font-size:1.5rem">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -161,6 +177,17 @@ export default {
       isLock:false,
       // 锁定提示
       lockTip:'该菜单已有用户锁定',
+      // 右下角放大
+      rightBottomScreenShow:false,
+      // 右下数据组
+      rightBottomBomDataConfig:[
+        {prop:'itemCode',label:'Kitting组别Bom'},
+        {prop:'chassisIndex',label:'底盘序号'},
+        {prop:'itemDesc1',label:'料号描述'},
+        {prop:'configuration',label:'规格/颜色'},
+        {prop:'qty',label:'KittingBom数量'},
+        {prop:'chassisTotal',label:'按量份汇总'},
+      ]
     };
   },
   mounted(){
@@ -177,6 +204,7 @@ export default {
   },
   methods:{
     initData(){
+      this.rightBottomScreenShow = false
       this.getKittingList()
     },
     // 格式化时间
@@ -358,6 +386,7 @@ export default {
                     _chassisIndex.push(_Chassis_index[litem])
                   })
                   _item.chassisIndex = _chassisIndex.join(",")
+                  _item.chassisTotal = _chassisIndex.length * Number(item.qty)
                 }
               })
               _rightData.push(_item)
@@ -505,7 +534,7 @@ export default {
       }).catch(err => {
         this.loading = false
       })
-    }
+    },
   },
 };
 </script>
@@ -517,7 +546,16 @@ $footerBtn_height:60px;
 .padpageBox{
   background:#f8f8f8;
 }
+.rightBottomScreenInner{
+  height:73vh;
+  *{
+    font-size:1.5rem
+  }
+}
 .isPadForKittingPackPage{
+  *{
+    font-size:20px
+  }
   min-width:1000px;
   height:100%;
   display:flex;
@@ -555,7 +593,7 @@ $footerBtn_height:60px;
         padding:0 10px;
 
         &.code{
-          font-size:20px
+          font-size:25px
         }
 
         &.name{
@@ -565,7 +603,7 @@ $footerBtn_height:60px;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
-          font-size:14px;
+          // font-size:14px;
         }
       }
     }
@@ -632,7 +670,7 @@ $footerBtn_height:60px;
       color:#909399;
       line-height:60px;
       text-align:center;
-      font-size:14px;
+      // font-size:14px;
     }
   }
   .rightChassisGroup{
@@ -663,9 +701,17 @@ $footerBtn_height:60px;
     }
 
     .rightBottomBomData{
+      position:relative;
       flex: 1.2;
       margin-top:10px;
       overflow:auto;
+      
+      .rightBottomScreenIcon{
+        position:absolute;
+        right:10px;
+        bottom:10px;
+        font-size: 28px;
+      }
     }
   }
   .footer-button{
@@ -685,7 +731,7 @@ $footerBtn_height:60px;
     .flesh-btn{
       position:absolute;
       right:15px;
-      width:100px
+      width:130px
     }
   }
 }

fe/PC/src/views/padManage/isPadForKittingPack_old.vue

@@ -0,0 +1,692 @@
+<template>
+  <div class="padpageBox" v-loading="loading">
+    <div class="isPadForKittingPackPage">
+      <!-- 左侧按钮 -->
+      <div class="leftBtns">
+        【{{loginName}}】您好！
+        <div 
+          v-for="(item,index) of leftButtons" 
+          :key="index"
+          class="left-button"
+          @click="getPageLockList(item)"
+          :style="{
+            background:(currentKittingInfo && (item.code==currentKittingInfo.code)?'#ff6000':'#409EFF'),
+          }"
+        >
+          <p class="code">{{ item.code }}</p>
+          <p class="name">{{ item.name }}</p>
+        </div>
+      </div>
+      <!-- 整个右侧 -->
+      <div class="rightBigBox">
+        <div class="lockShadow" v-if="isLock">{{lockTip}}</div>
+        <!-- 中间底盘号 -->
+        <div class="centerChassisContain">
+          <div class="title">底盘号</div>
+          <ul class="chassisList" v-if="centerChassisList.length > 0">
+            <li
+              v-for="(item,index) of centerChassisList" 
+              :style="{
+                color:(item.canSelect?'#000':'#aaa'),
+                cursor:(item.canSelect?'pointer':'no-drop'),
+                background:(item.isSelect?'#bdddfd':'#fff'),
+              }"
+              :key="index"
+              @click="selectCenterChassis(item,index)"
+            >{{ item.chassisNumber }} ({{item.itemCode}})</li>
+          </ul>
+          <div class="noDataTipper" v-if="centerChassisList.length <= 0">暂无数据</div>
+          <div class="footer-button"><el-button :disabled="isLock" type="primary" @click="createChassisHandle()">创建底盘组</el-button></div>
+        </div>
+        <!-- 右侧底盘组 -->
+        <div class="rightChassisGroup">
+          <div class="rightTopBigBox">
+            <!-- 右上组 -->
+            <div class="rightTopTable">
+              <el-table
+                :border="true"
+                :data="rightTopChassisGroup"
+                :height="'100%'"
+                :header-cell-style="{ background: '#e3f0ff',color:'#333'}"
+                style="width: 100%">
+                <el-table-column 
+                  type="index"
+                  label="序号"
+                  width="50px"
+                ></el-table-column>
+                <el-table-column
+                  prop="chassisNumber"
+                  label="底盘号"
+                ></el-table-column>
+                <el-table-column
+                  prop="itemCode"
+                  label="ERP料号"
+                ></el-table-column>
+                <!-- <el-table-column
+                  prop="itemName"
+                  label="料号名称"
+                ></el-table-column> -->
+                <el-table-column
+                  prop="itemDesc1"
+                  label="料号描述"
+                ></el-table-column>
+                <el-table-column
+                  prop="configuration"
+                  label="规格/颜色"
+                ></el-table-column>
+                <el-table-column
+                  prop="creationTime"
+                  label="时间"
+                  width="160px"
+                >
+                  <template slot-scope="scope">
+                    {{ formatDate(scope.row.creationTime) }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <!-- 右下bom -->
+            <div class="rightBottomBomData">
+              <el-table
+                :border="true"
+                :data="rightBottomBomData"
+                :header-cell-style="{ background: '#e3f0ff',color:'#333'}"
+                :height="'100%'"
+                style="width: 100%">
+                <el-table-column
+                  prop="itemCode"
+                  label="Kitting组别Bom"
+                ></el-table-column>
+                <el-table-column
+                  prop="chassisIndex"
+                  label="底盘序号"
+                ></el-table-column>
+                <!-- <el-table-column
+                  prop="itemName"
+                  label="料号名称"
+                ></el-table-column> -->
+                <el-table-column
+                  prop="itemDesc1"
+                  label="料号描述"
+                ></el-table-column>
+                <el-table-column
+                  prop="configuration"
+                  label="规格/颜色"
+                ></el-table-column>
+                <el-table-column
+                  prop="qty"
+                  label="KittingBom数量"
+                ></el-table-column>
+              </el-table>
+            </div>
+          </div>
+          <div class="footer-button">
+            <el-button :disabled="isLock"  type="success" @click="finishChassisHandle">完成该组底盘</el-button>
+            <el-button class="flesh-btn" type="warning" @click="initData">刷新数据</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getPageList,postCreate } from '@/api/wms-api'
+import { 
+  ChassisGetListWithNextCount,
+  pageLockToLogin,
+  pageLockToLogout,
+  getKittingChassisBom
+} from '@/api/wms-pad'
+import { formatTimeStrToStr } from "@/utils/formatTime"
+import store  from '@/store'
+export default {
+  name: "isPadForKittingPack",
+  data() {
+    return {
+      loginName:store.getters.name.name,
+      loading:false,
+      // 循环数据定时器
+      intervalId:false,
+      // 当前左侧按钮选择信息
+      currentKittingInfo:null,
+      // 左侧按钮
+      leftButtons:[],
+      // 中间底盘号
+      centerChassisList:[],
+      // 右上方组数据
+      rightTopChassisGroup:[],
+      // 右下方组bom数据
+      rightBottomBomData:[],
+      // 是否已经被锁定
+      isLock:false,
+      // 锁定提示
+      lockTip:'该菜单已有用户锁定',
+    };
+  },
+  mounted(){
+    this.initData()
+    clearInterval(this.intervalId)
+    //刷新数据
+    window.LogoutPadUserHandle = this.LogoutUserHandle
+    this.intervalId = setInterval(() => {
+      this.initData()
+    }, localStorage.getItem('padKittingPackUpdate') || 180000)
+  },
+  destroyed() {
+    clearInterval(this.intervalId)
+  },
+  methods:{
+    initData(){
+      this.getKittingList()
+    },
+    // 格式化时间
+    formatDate (time) {
+      if (time == null) {
+        return '-'
+      }
+      return formatTimeStrToStr(time)
+    },
+    resetData(){
+      this.centerChassisList=[]
+      this.rightTopChassisGroup=[]
+      this.rightBottomBomData=[]
+      this.isLock=false
+    },
+    // 获取锁定数据
+    async getPageLockListHttp(filters){
+      let _data = {
+        condition: {
+          filters: filters
+        },
+        Sorting: "",
+        SkipCount: 0,
+        MaxResultCount: 9999,
+      }
+      this.loading = true
+      return getPageList(_data, 'auth/auth/page-lock')
+    },
+    // 左侧按钮点击事件 -获取是否锁定
+    async getPageLockList(selectItem){
+      let _filter= [
+        {
+          logic: "And",
+          column: "menuCode",
+          action: "==",
+          value: this.$route.name + '_' + selectItem.code,
+        },
+        {
+          logic: "And",
+          column: "userAccount",
+          action: "!=",
+          value: store.getters.name.name,
+        }
+      ]
+      let _lockList = await this.getPageLockListHttp(_filter)
+      this.currentKittingInfo = selectItem;
+      // 未锁定
+      if(_lockList.items.length <= 0){
+        this.isLock = false
+        this.lockUserHandle()
+      }
+      // 已锁定
+      else{
+        this.isLock = true
+        this.initKittingData()
+      }
+    },
+    // 锁定账号
+    lockUserHandle(){
+      let _data = {
+        menuCode:this.$route.name + '_' + this.currentKittingInfo.code,
+        userAccount:store.getters.name.name,
+      }
+      pageLockToLogin(_data)
+        .then(res=>{
+          this.initKittingData()
+        })
+        .catch(err=>{})
+    },
+    // 退出锁定账号:批量将当前账号所有的绑定菜单删除，框架调用
+    async LogoutUserHandle(){
+      let _filter = [{
+        logic: "And",
+        column: "userAccount",
+        action: "==",
+        value: store.getters.name.name,
+      }]
+      let _currentUserLockList = await this.getPageLockListHttp(_filter)
+      let _https = 0
+      if(_currentUserLockList && _currentUserLockList.items){
+        _currentUserLockList.items.forEach(item=>{
+          this.LogoutUserHttp(item.menuCode)
+          _https++
+        })
+      }
+      if(_https == _currentUserLockList.items.length){
+        this.loading = false;
+        this.currentKittingInfo = null;
+        // 账号已释放并退出登录，跳转登录页
+        await this.$store.dispatch("user/logout");
+        this.$router.push(`/loginPad?redirect=${this.$route.fullPath}`);
+        window.android.takePhoto();
+      }
+    },
+    // 退出登录http交互
+    LogoutUserHttp(menuCode){
+      let _data = {
+        menuCode:menuCode,
+        userAccount:store.getters.name.name,
+      }
+      pageLockToLogout(_data)
+        .then(res=>{})
+        .catch(err=>{})
+    },
+    // 获取kitting
+    getKittingList(){
+      let _data = {
+        condition: {
+          filters: []
+        },
+        Sorting: "code ASC",
+        SkipCount: 0,
+        MaxResultCount: 9999,
+      }
+      this.loading = true
+      getPageList(_data, 'basedata/kitting',true).then(res => {
+        this.leftButtons = res.items
+        // 如果有当前选择kitting数据，默认点击重置
+        if(this.currentKittingInfo){
+          this.getPageLockList(this.currentKittingInfo)
+        }else{
+          this.resetData()
+          this.loading = false
+        }
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    // 获取中间数据 及初始化数据
+    initKittingData(){
+      let _data = {
+        count:30,
+        kittingCode:this.currentKittingInfo.code
+      }
+      this.loading = true
+      // 获取中间数据
+      ChassisGetListWithNextCount(_data).then(res => {
+        this.centerChassisList = []
+        this.rightTopChassisGroup = []
+        // 初始化中间和右侧数据数据：
+        // 如果不够chassisQty条，则不分开
+        if(res.items.length<Number(this.currentKittingInfo.chassisQty)){
+          res.items.forEach(item=>{ 
+            item.canSelect = true
+            item.isSelect = false
+          })
+          this.centerChassisList = res.items
+        }
+        // 如果够chassisQty条:前三条数据，放到右上方，第四条数据开始显示在中间位置
+        else{
+          res.items.forEach((item,index)=>{
+            if(index < Number(this.currentKittingInfo.chassisQty)){
+              this.rightTopChassisGroup.push(item)
+            }else{
+              item.isSelect = false
+              item.canSelect = false
+              this.centerChassisList.push(item)
+            }
+          })
+        }
+        if(this.centerChassisList && this.centerChassisList.length > 0)this.centerChassisList[0].canSelect = true
+        // 初始化右下数据
+        let _ChassisBomData = {}
+        let _Chassis_index = {}
+        this.rightTopChassisGroup.forEach((Citem,Ckey)=>{ 
+          _ChassisBomData[Citem.chassisNumber] = Citem.itemCode
+          _Chassis_index[Citem.chassisNumber] = Number(Ckey) + 1
+        })
+        // 初始化右下角底盘序号与右上数据序号相对应
+        getKittingChassisBom(this.currentKittingInfo.code,_ChassisBomData)
+          .then(res=>{
+            let _rightData = []
+            this.currentKittingInfo.details.forEach(item=>{
+              let _item = JSON.parse(JSON.stringify(item))
+              res.forEach((rItem,rIndex)=>{
+                if(rItem.itemCode == _item.itemCode){
+                  let _chassisIndex = []
+                  rItem.chassisNumberList.forEach((litem,lindex)=>{
+                    _chassisIndex.push(_Chassis_index[litem])
+                  })
+                  _item.chassisIndex = _chassisIndex.join(",")
+                }
+              })
+              _rightData.push(_item)
+            })
+            this.rightBottomBomData = _rightData
+            this.loading = false
+          })
+          .catch(err => {
+            this.rightBottomBomData = JSON.parse(JSON.stringify(this.currentKittingInfo.details))
+            this.loading = false
+          })
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    // 点击选中中间数据
+    selectCenterChassis(selectItem,selectIndex){
+      for(let i=0;i<this.centerChassisList.length;i++){
+        // 选中
+        if(selectItem.isSelect == false){
+          if(selectIndex == 0 || this.centerChassisList[selectIndex - 1].isSelect){
+            this.centerChassisList[selectIndex].isSelect = true
+            this.centerChassisList[selectIndex].canSelect = true
+            if(this.centerChassisList[selectIndex+1])this.centerChassisList[selectIndex+1].canSelect = true
+          }
+          return
+        }
+        // 取消选中
+        else{
+          this.centerChassisList.forEach((item,index)=>{
+            if(Number(index) >= Number(selectIndex)){
+              item.canSelect = false
+              item.isSelect = false
+            }
+          })
+          this.centerChassisList[selectIndex].canSelect = true
+          return
+        }
+      }
+    },
+    // 创建底盘组操作
+    createChassisHandle(){
+      if(this.isLock)return
+      let _selectItems = this.centerChassisList.filter(item=>{return item.isSelect})
+      if(!_selectItems || _selectItems.length <= 0){
+        this.$warningMsg("请选择至少一项")
+        return
+      }
+      let _selectChassisNumber = []
+      _selectItems.forEach(item=>{ if(item.isSelect)_selectChassisNumber.push(item.chassisNumber)})
+      let _msg = `是否确定将底盘号 (${_selectChassisNumber.join(",")}) 移入底盘组`
+      this.$confirm(_msg, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 中间数据移除已选项
+        this.centerChassisList = this.centerChassisList.filter(item => !_selectChassisNumber.includes(item.chassisNumber))
+        // 右侧数据添加已选
+        this.rightTopChassisGroup = [
+          ...this.rightTopChassisGroup,
+          ..._selectItems
+        ]
+      }).catch(() => {
+      });
+    },
+    // 完成该组底盘
+    async finishChassisHandle(){
+      if(this.isLock)return
+      // 先判断是否别人锁定，如果是别人锁定，踢出
+      let _filter= [
+        {
+          logic: "And",
+          column: "menuCode",
+          action: "==",
+          value: this.$route.name + '_' + this.currentKittingInfo.code,
+        },
+        {
+          logic: "And",
+          column: "userAccount",
+          action: "!=",
+          value: store.getters.name.name,
+        }
+      ]
+      let _lockList = await this.getPageLockListHttp(_filter) 
+      this.loading = false
+      if(_lockList && _lockList.items && _lockList.items.length > 0){
+        this.$errorMsg(this.lockTip)
+        this.isLock=true
+        return
+      }
+      if(!this.rightTopChassisGroup || this.rightTopChassisGroup.length <= 0){
+        this.$warningMsg('请选择底盘数据')
+        return
+      }
+      this.$confirm('是否确定完成该组底盘？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let _data = {
+          extraProperties: {},
+          worker: store.getters.name.userName,
+          kittingCode: this.currentKittingInfo.code,
+          depDetails: [],//右上数据
+          details: [],//右下数据
+        }
+        // 右上数据、depDetails
+        this.rightTopChassisGroup.forEach(item=>{
+          let _item = {
+            itemCode: item.itemCode,
+            itemName: item.itemName || "",
+            itemDesc1: item.itemDesc1 || "",
+            itemDesc2: item.itemDesc2 || "",
+            chassisNumber: item.chassisNumber,//底盘组
+            kittingCode: this.currentKittingInfo.code,//左侧按钮code
+            chassisSortNumber: item.sortNumber,//sortNumber
+          }
+          _data.depDetails.push(_item)
+        })
+        // 右下数据、details
+        this.rightBottomBomData.forEach(item=>{
+          let _item = {
+            itemCode: item.itemCode,
+            itemName: item.itemName || "",
+            itemDesc1: item.itemDesc1 || "",
+            itemDesc2: item.itemDesc2 || "",
+            qty: item.qty,
+            kittingCode: this.currentKittingInfo.code
+          }
+          _data.details.push(_item)
+        })
+        this.finishHandleHttp(_data)
+      }).catch(() => {
+      });
+      
+    },
+    // 完成该组底盘http交互
+    finishHandleHttp(_data){
+      this.loading = true
+      postCreate(_data, 'wms/store/KittingPackagingNote').then(res => {
+        this.initData()
+        this.$successMsg('提交成功')
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/styles/padMain.scss";
+$boxPadding:15px;
+$boxBorder:#ddd solid 1px;
+$footerBtn_height:60px;
+.padpageBox{
+  background:#f8f8f8;
+}
+.isPadForKittingPackPage{
+  min-width:1000px;
+  height:100%;
+  display:flex;
+  .leftBtns{
+    width:15%;
+    min-width:150px;
+    border:$boxBorder;
+    padding:$boxPadding;
+    flex-shrink:0;
+    height:100%;
+    overflow:auto;
+    background:#fff;
+
+    .left-button{
+      flex-wrap: wrap;
+      display:flex;
+      width:100%;
+      height:90px;
+      background:#409EFF;
+      color:#fff;
+      margin:15px 0;
+      border-radius:12px;
+      text-align:center;
+      cursor:pointer;
+      align-content: center;
+
+      &:hover{
+        opacity:0.8
+      }
+
+      p{
+        width:100%;
+        flex-shrink:0;
+        margin:0;
+        padding:0 10px;
+
+        &.code{
+          font-size:20px
+        }
+
+        &.name{
+          overflow: hidden;
+          word-break: break-all;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          font-size:14px;
+        }
+      }
+    }
+  }
+  .rightBigBox{
+    display:flex;
+    width:100%;
+    position:relative;
+
+    .lockShadow{
+      position:absolute;
+      left:0;
+      right:0;
+      top:0;
+      bottom:0;
+      background:rgba(255,255,255,0.7);
+      z-index:100;
+      text-align:center;
+      line-height:50vh;
+      cursor:no-drop;
+      color:#ff6000
+    }
+  }
+  .centerChassisContain{
+    position:relative;
+    width:calc(35% - 20px);
+    min-width:260px;
+    border:$boxBorder;
+    padding:$boxPadding;
+    height:100%;
+    overflow:auto;
+    margin:0 10px;
+    background:#fff;
+
+    $title_height:40px;
+    .title{
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      text-align:center;
+      line-height:$title_height;
+      height:$title_height;
+      overflow:hidden
+    }
+
+    .chassisList,.noDataTipper{
+      position:absolute;
+      top:$title_height;
+      left:0;
+      right:0;
+      bottom:$footerBtn_height;
+      overflow:auto;
+      padding:0;
+      margin:0;
+
+      li{
+        margin:10px;
+        padding:5px 15px;
+        list-style:none;
+      }
+    }
+    .noDataTipper{
+      color:#909399;
+      line-height:60px;
+      text-align:center;
+      font-size:14px;
+    }
+  }
+  .rightChassisGroup{
+    position:relative;
+    width:65%;
+    min-width:600px;
+    border:$boxBorder;
+    padding:$boxPadding;
+    height:100%;
+    background:#fff;
+
+    .rightTopBigBox{
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:$footerBtn_height;
+      display:flex;
+      flex-direction:column;
+      overflow:auto;
+      align-items: stretch;
+    }
+
+    .rightTopTable{
+      flex: 1;
+      margin-bottom:10px;
+      overflow:auto;
+    }
+
+    .rightBottomBomData{
+      flex: 1.2;
+      margin-top:10px;
+      overflow:auto;
+    }
+  }
+  .footer-button{
+    position:absolute;
+    bottom:0;
+    left:0;
+    right:0;
+    text-align:center;
+    border-top:$boxBorder;
+    height:$footerBtn_height;
+
+    .el-button{
+      width:180px;
+      margin-top:10px
+    }
+
+    .flesh-btn{
+      position:absolute;
+      right:15px;
+      width:100px
+    }
+  }
+}
+</style>