优化

src/api/produce/workOrder.js

@@ -48,7 +48,6 @@ export async function treeByPid(data) {
 
 
 // 根据工单ids获取工单列表
-
 export async function workorderList(data) {
   const res = await request.post('/mes/workorder/list', data);
   if (res.data.code == 0) {

src/styles/transition/common.scss

@@ -96,4 +96,188 @@
   .el-icon-caret-bottom {
     color: #157a2c;
   }
+}
+
+
+
+
+
+
+/* 布局-横向 */
+/* c:center，s:start，e:end，a:around，b:between，w:wrap */
+.rx {
+  display: flex;
+}
+
+.rx-c {
+  display: flex;
+  align-items: center;
+}
+
+.rx-cc {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.rx-sc {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.rx-ss {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.rx-warp {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.rx-se {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.rx-dir-start {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.rx-ec {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.rx-es {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.rx-ee {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.rx-ac {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.rx-bc {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.rx-bs {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.rx-be {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.rx-vc {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.rx-cs {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.rx-wsc {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.rx-wss {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+}
+
+.rx-wbs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+}
+
+/* 布局-纵向 */
+
+.cx {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.cx-cc {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.cx-ce {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.cx-sc {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.cx-cs {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.cx-rc {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: center;
+  align-items: center;
 }

src/views/produce/components/feeding/components/paramBom.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="title_box rx-bc mt6">
+      <div class="name">工艺参数 </div>
+
+      <div class="rx-bc"> </div>
+    </div>
+
+    <div class="content_table2">
+      <div class="head row rx-sc">
+        <div class="item ww40">参数名</div>
+        <div class="item ww40">参数值</div>
+        <div class="item ww20">单位</div>
+      </div>
+
+      <div class="table">
+        <div class="tr row rx-sc" v-for="(it, idx) in list" :key="idx">
+          <div class="item ww40">
+            {{ it.name }}
+          </div>
+          <div class="item ww40" v-if="it.textType != 3">
+            {{ it.defaultValue }}
+          </div>
+
+          <div class="item ww40" v-if="it.textType == 3">
+            {{ it.minValue }} - {{ it.maxValue }}
+          </div>
+          <div class="item ww20">
+            {{ it.unitName }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ProduceBom',
+
+    props: {
+      list: {
+        type: Array,
+        default: () => []
+      }
+    },
+
+    data() {
+      return {};
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .content_table2 {
+    width: 100%;
+    margin-top: 6px;
+
+    .row {
+      width: 100%;
+
+      .item {
+        color: #404446;
+        font-size: 14px;
+        padding-left: 6px;
+      }
+
+      .color157 {
+        color: #157a2c;
+      }
+
+      .ww40 {
+        width: 40%;
+      }
+
+      .ww20 {
+        width: 20%;
+      }
+    }
+
+    .head {
+      height: 32px;
+      background: #f7f9fa;
+      border-top: 1px solid #e3e5e5;
+      border-left: 1px solid #e3e5e5;
+
+      .item {
+        height: 32px;
+        line-height: 32px;
+        border-right: 1px solid #e3e5e5;
+        box-sizing: border-box;
+      }
+    }
+
+    .tr {
+      border-top: 1px solid #e3e5e5;
+      border-left: 1px solid #e3e5e5;
+
+      .item {
+        font-size: 12px;
+        min-height: 32px;
+        display: flex;
+        align-items: center;
+        border-right: 1px solid #e3e5e5;
+        box-sizing: border-box;
+        white-space: normal;
+        word-break: break-all;
+      }
+
+      &:last-child {
+        border-bottom: 1px solid #e3e5e5;
+      }
+    }
+  }
+</style>

src/views/produce/components/feeding/components/workOrderBom.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div class="material">
+      <div class="content_table">
+        <div class="item rx-sc">
+          <div class="rx ww50">
+            <div class="lable rx-cc">工单编号</div>
+            <div class="content">
+              {{ item.code }}
+            </div>
+          </div>
+
+          <div class="rx ww50">
+            <div class="lable rx-cc">产品编码</div>
+            <div class="content">{{ item.productCode }}</div>
+          </div>
+        </div>
+
+        <div class="item rx-sc">
+          <div class="rx ww50">
+            <div class="lable rx-cc">产品名称</div>
+            <div class="content">{{ item.productName }}</div>
+          </div>
+          <div class="rx ww30">
+            <div class="lable rx-cc">生产数量</div>
+            <div class="content rx-sc">
+              <div>{{ item.formingNum }}</div>
+              <div class="unit">{{ item.unit }}</div>
+            </div>
+          </div>
+
+          <div class="rx ww20">
+            <div class="lable rx-cc ww60">重量</div>
+            <div class="content content_num">
+              <div>{{ item.formingWeight }}</div>
+              <div class="unit">{{ item.weightUnit }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'workOrderBom',
+    props: {
+      item: {
+        type: Object,
+        default: () => {}
+      },
+      isDetails: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {},
+
+    data() {
+      return {};
+    },
+
+    methods: {}
+  };
+</script>
+
+<style scoped lang="scss">
+  .material {
+    margin-top: 6px;
+
+    .content_table {
+      width: 100%;
+      border: 1px solid #e3e5e5;
+
+      .item {
+        display: flex;
+        border-bottom: 1px solid #e3e5e5;
+
+        .lable {
+          width: 66px;
+          text-align: center;
+          background-color: #f7f9fa;
+          font-size: 13px;
+          border-right: 1px solid #e3e5e5;
+          flex-shrink: 0;
+        }
+
+        .lable80 {
+          width: 80px !important;
+          font-size: 12px;
+        }
+
+        .ww60 {
+          width: 60px;
+        }
+
+        .content {
+          width: 250px;
+          min-height: 32px;
+          font-size: 14px;
+          line-height: 14px;
+          font-style: normal;
+          font-weight: 400;
+          padding: 9px 4px;
+          box-sizing: border-box;
+          word-wrap: break-word;
+          flex-grow: 1 !important;
+
+          .unit {
+            padding: 0 2px;
+            font-size: 12px;
+            color: #404446;
+          }
+        }
+
+        .content_num {
+          display: flex;
+          align-items: center;
+          padding: 0 2px;
+        }
+
+        .pd2 {
+          padding: 2px 4px;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .ww55 {
+        width: 55%;
+      }
+
+      .ww50 {
+        width: 50%;
+      }
+
+      .ww45 {
+        width: 45%;
+      }
+
+      .ww30 {
+        width: 30%;
+      }
+      .ww20 {
+        width: 20%;
+      }
+    }
+  }
+</style>

src/views/produce/components/feeding/index.vue

@@ -1,13 +1,46 @@
 <template>
   <div>
-    投料
-    {{ workListIds }}
+    <div class="top_fixed">
+      <el-button type="primary" size="mini">一键投料</el-button>
+      <el-button type="primary" size="mini">清空缓存</el-button>
+      <el-button type="primary" size="mini">缓存</el-button>
+    </div>
+
+    <div class="feed_box">
+      <div v-for="(item, index) in List" :key="index" class="card_box">
+        <div class="title_box rx-bc">
+          <div class="name">工单信息 </div>
+
+          <div class="rx-bc">
+            <el-button type="text" size="mini">出库单</el-button>
+            <el-button type="text" size="mini">添加物料</el-button>
+            <el-button type="text" size="mini">清空缓存</el-button>
+            <el-button type="text" size="mini">缓存</el-button>
+          </div>
+        </div>
+
+        <workOrderBom :item="item"></workOrderBom>
+
+        <paramBom
+          v-if="item.paramDetailList.length != 0"
+          :list="item.paramDetailList"
+        ></paramBom>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+  import { workorderList } from '@/api/produce/workOrder';
+
+  import workOrderBom from './components/workOrderBom.vue';
+  import paramBom from './components/paramBom.vue';
   export default {
     name: 'feeding',
+    components: {
+      workOrderBom,
+      paramBom
+    },
     props: {
       workListIds: {
         type: Array,
@@ -16,8 +49,173 @@
         }
       }
     },
+
+    computed: {
+      taskObj() {
+        return this.$store.state.user.taskObj;
+      }
+    },
+
+    watch: {
+      workListIds: {
+        handler(val) {
+          this.getList(val);
+        },
+        deep: true,
+        immediate: true
+      }
+    },
     data() {
-      return {};
+      return {
+        List: []
+      };
+    },
+
+    methods: {
+      getList(ids) {
+        let param = {
+          ids: ids,
+          taskId: this.taskObj.id
+        };
+        workorderList(param).then((res) => {
+          this.List = res.map((m) => {
+            m.workOrderId = m.id;
+            m.paramDetailList = [
+              {
+                id: '1787807095306399746',
+                parentId: '1747889385528365058',
+                sort: '',
+                code: 'GYCS20240507255',
+                name: '重量',
+                versions: '',
+                status: '',
+                description: '',
+                defaultValue: '20.14',
+                unitName: '摄氏度',
+                minValue: '',
+                maxValue: '',
+                textType: '1',
+                categoryType: 0,
+                notNull: 0,
+                remark: '',
+                workCenterId: null,
+                workCenterName: '',
+                controlName: '',
+                produceList: [],
+                qualityParam: [],
+                beatParam: null,
+                normalHours: null,
+                materialQuota: [],
+                resource: [],
+                replaceMaterial: []
+              }
+            ];
+
+            m.instanceList = []; // 物料
+            m.equipmentList = []; // 设备
+            m.modelList = []; // 模具
+            m.aridRegionList = []; // 干燥区
+            m.packingList = []; // 包装
+            m.palletList = []; // 舟皿
+            m.revolvingDiskList = []; // 周转盘
+            m.semiProductList = []; //半成品
+
+            if (m.pickOutInList.length > 0) {
+              m.pickOutInList.forEach((f) => {
+                if (f.rootCategoryLevelId == 1) {
+                  m.instanceList.push(f);
+                } else if (f.rootCategoryLevelId == 4) {
+                  m.modelList.push(f);
+                } else if (f.rootCategoryLevelId == 5) {
+                  m.modelList.push(f);
+                } else if (f.rootCategoryLevelId == 11) {
+                  m.aridRegionList.push(f);
+                } else if (f.rootCategoryLevelId == 13) {
+                  m.packingList.push(f);
+                } else if (f.rootCategoryLevelId == 8) {
+                  m.palletList.push(f);
+                } else if (f.rootCategoryLevelId == 26) {
+                  m.revolvingDiskList.push(f);
+                } else if (
+                  [23, 2, 9, 28].includes(Number(f.rootCategoryLevelId))
+                ) {
+                  m.semiProductList.push(f);
+                }
+              });
+            }
+
+            // 处理字段
+            m.quality == '' ? (m.quality = {}) : '';
+
+            if (!Object.prototype.hasOwnProperty.call(m, 'product')) {
+              m.product = '{}';
+            }
+
+            delete m.id;
+            if (this.taskObj.id) {
+              m.taskId = this.taskObj.id;
+              m.taskName = this.taskObj.name;
+            }
+            return {
+              ...m
+            };
+          });
+        });
+
+        this.$forceUpdate();
+      }
     }
   };
 </script>
+
+<style scoped lang="scss">
+  .top_fixed {
+    width: 100%;
+    height: 40px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .feed_box {
+    margin-top: 6px;
+    width: 100%;
+    height: calc(100vh - 70px - 50px - 80px - 60px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .card_box {
+    background: #fff;
+    padding: 8px;
+    border-radius: 2px;
+  }
+</style>
+
+<style lang="scss">
+.mt6{
+  margin-top: 6px;
+}
+  .title_box {
+    .name {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      color: #157a2c;
+      padding-left: 5px;
+      position: relative;
+      &:before {
+        position: absolute;
+        content: '';
+        left: 0px;
+        top: 0px;
+        bottom: 0px;
+        width: 2px;
+        height: 14px;
+        background: #157a2c;
+        margin: auto;
+      }
+    }
+  }
+</style>