kd-aiot-frontend-mes/src/views/materialReturn/components/returnPop.vue

<template>
  <el-dialog
    title="新建退料单"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <div>
      <el-form :model="returnForm" ref="returnForm">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="退料单编号" prop="code" label-width="90px">
              <el-input v-model="returnForm.code" disabled=""></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="退料单名称" prop="name" label-width="90px">
              <el-input v-model="returnForm.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="退料场景" prop="scene" label-width="90px">
              <el-select v-model="returnForm.scene" placeholder="请选择">
                <el-option
                  v-for="item in sceneList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </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"
              >选择领料单</el-button
            >
          </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="taskName"> </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"
      @emitSave="emitSave"
    ></pickList>
  </el-dialog>
</template>

<script>
  import { getCode } from '@/api/produce/workOrder';
  import { refundable, save } from '@/api/materialReturn/index.js';
  import pickList from './pickList.vue';

  import { typeName } from '@/views/produce/components/common.js';
  export default {
    components: { pickList },
    props: {
      sceneList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        visible: true,

        returnForm: {
          code: '',
          name: '',
          scene: '',
          remark: '',
          type: 1
        },

        typeName,

        pickListShow: false,

        returnList: []
      };
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    created() {
      this.getOrderCode();
    },

    methods: {
      async getOrderCode() {
        this.returnForm.code = await getCode('return_materials_code');
      },

      selectOrder() {
        this.pickListShow = true;
      },

      closeDialog() {
        this.pickListShow = false;
      },

      handleClose() {
        this.$emit('close');
      },

      emitSave(pickIds) {
        refundable(pickIds).then((res) => {
          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,
          pickOrderList: this.returnList
        };

        save(parma).then((res) => {
          this.$emit('close', true);
        });
      }
    }
  };
</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>