55

src/views/materialReturn/components/returnPop.vue

@@ -8,7 +8,7 @@
     append-to-body
     width="80%"
   >
-   <div>
+    <div>
       <el-form :model="returnForm" ref="returnForm">
         <el-row :gutter="24">
           <el-col :span="6">
@@ -28,6 +28,14 @@
               <el-input v-model="returnForm.scene"></el-input>
             </el-form-item>
           </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="20">
+            <el-form-item label="退料描述" prop="remark" label-width="90px">
+              <el-input v-model="returnForm.remark"></el-input>
+            </el-form-item>
+          </el-col>
 
           <el-col :span="4">
             <el-button type="primary" @click="selectOrder"
@@ -36,8 +44,97 @@
           </el-col>
         </el-row>
       </el-form>
+
+      <div v-for="(item, idx) in returnList" :key="idx">
+        <div class="tableZ_box">
+          <div class="row">
+            <div class="col">
+              <div class="name">领料单编号</div>
+              <div class="content">{{ item.code }}</div>
+            </div>
+            <div class="col">
+              <div class="name">领料单创建时间</div>
+              <div class="content">{{ item.createTime }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <el-table
+            :ref="`form${idx}`"
+            class="table_content"
+            :max-height="300"
+            :data="item.pickOutInList"
+            tooltip-effect="dark"
+            style="width: 100%"
+            stripe
+            border
+          >
+            <el-table-column label="序号" type="index" width="60">
+              <template slot-scope="{ row, $index }">
+                {{ $index }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="类型" prop="rootCategoryLevelId" width="80">
+              <template slot-scope="{ row, $index }">
+                <el-tag>{{ typeName[Number(row.rootCategoryLevelId)] }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="编码" prop="code"> </el-table-column>
+
+            <el-table-column label="名称" prop="name"> </el-table-column>
+            <el-table-column label="型号" prop="modelType"> </el-table-column>
+            <el-table-column label="规格" prop="specification">
+            </el-table-column>
+
+            <el-table-column
+              label="刻码"
+              prop="engrave"
+              v-if="clientEnvironmentId == 3"
+            >
+              <template slot-scope="{ row, $index }">
+                {{ row.extInfo.engrave }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              label="物料代号"
+              prop="materielCode"
+              v-if="clientEnvironmentId == 3"
+            >
+              <template slot-scope="{ row, $index }">
+                {{ row.extInfo.materielCode }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="关联工单编码" prop="workOrderCode">
+            </el-table-column>
+
+            <el-table-column label="退还数量" prop="quantity">
+              <template slot-scope="{ row, $index }">
+                {{ row.quantity }} {{ row.unit }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" fixed="right" width="100px">
+              <template slot-scope="{ $index, row }">
+                <el-link type="danger" @click="removeItem(idx, $index)"
+                  >删除</el-link
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
     </div>
 
+    <template slot="footer">
+      <el-button size="mini" @click="handleClose">取 消</el-button>
+      <el-button size="mini" type="primary" @click="save()">确 定</el-button>
+    </template>
+
     <pickList
       v-if="pickListShow"
       @closeDialog="closeDialog"
@@ -50,6 +147,8 @@
   import { getCode } from '@/api/produce/workOrder';
   import { refundable } from '@/api/materialReturn/index.js';
   import pickList from './pickList.vue';
+
+  import { typeName } from '@/views/produce/components/common.js';
   export default {
     components: { pickList },
     data() {
@@ -59,15 +158,24 @@
         returnForm: {
           code: '',
           name: '',
-          scene: ''
+          scene: '',
+          remark: ''
         },
 
+        typeName,
+
         pickListShow: false,
 
-       returnList: []
+        returnList: []
       };
     },
 
+    computed: {
+      clientEnvironmentId() {
+        return this.$store.state.user.info.clientEnvironmentId;
+      }
+    },
+
     created() {
       this.getOrderCode();
     },
@@ -91,10 +199,83 @@
 
       emitSave(pickIds) {
         refundable(pickIds).then((res) => {
-            this.returnList = res
-          console.log(res, 22);
+          this.returnList = res;
+          this.$forceUpdate();
+          this.pickListShow = false;
         });
+      },
+
+      removeItem(idx, index) {
+        if (this.returnList[idx].pickOutInList.length != 1) {
+          this.returnList[idx].pickOutInList.splice(index, 1);
+        } else {
+          this.$message.warning('领料单中必须保留一条数据');
+        }
+      },
+
+      save() {
+        if (!this.returnForm.name) {
+          return this.$message.warning('请输入退料单名称');
+        }
+        if (this.returnList.length == 0) {
+          return this.$message.warning('请选择领料单');
+        }
+
+        let parma = {
+          ...this.returnForm,
+          returnList: this.returnList
+        };
+        console.log(parma);
       }
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  .tableZ_box {
+    border: 1px solid #e3e5e5;
+    margin: 6px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .row {
+      width: 100%;
+      display: flex;
+    }
+
+    .col {
+      width: calc(100% / 3);
+      display: flex;
+      align-items: center;
+      min-width: 200px;
+      min-height: 32px;
+      border-bottom: 1px solid #e3e5e5;
+      border-right: 1px solid #e3e5e5;
+
+      &:last-child {
+        border-right: none;
+      }
+
+      .name {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        width: 120px;
+        height: 100%;
+        background-color: #d0e4d5;
+        color: #000;
+      }
+
+      .content {
+        padding: 4px 6px;
+        color: #000;
+      }
+    }
+
+    .pd6 {
+      padding: 0 6px;
+    }
+  }
+</style>