X-web/src/views/modules/warehouse/stock-order-inbound.vue

<!-- 入库申请 -->
<template>
    <div>
      <div class="my-title">{{ !display ? '入库申请':'详情' }}</div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="auto">
        <el-row class="my-row my-row-1">
          <el-col :span="8">
            <el-form-item label="编码" prop="recordCode">
              <el-input v-model="dataForm.recordCode" :disabled="true" placeholder="编码系统自动生成"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-for="(item, index) in dataList">
          <div :key="index" class="my-line">
            <el-row class="my-row">
              <el-col :span="24" style="text-align: right;">
                <el-button v-if="!display" @click="removeOne(index)" type="danger" icon="el-icon-delete" circle style="padding: 6px"></el-button>
              </el-col>
            </el-row>
            <el-row class="my-row">
              <el-col :span="8">
                <el-form-item label="名称" prop="materialId" :rules="{required: false, message: '名称不能为空', trigger: 'blur'}">
                  <el-input v-if="item.buttonType === '1'" placeholder="请输入" v-model="item.materialName"
                            :disabled="display" style="width: 200px; margin-right: 10px"/>
                  <material-component v-else
                                      v-model="dataList[index]"
                                      :material-id="item.materialId">
                  </material-component>
                  <el-button v-show="item.buttonType && item.buttonType === '1'" @click="changeButtonType(item, 0)" type="danger">选择</el-button>
                  <el-button v-show="!item.buttonType || item.buttonType === '0'" @click="changeButtonType(item, 1)" type="danger">输入</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="类别" prop="materialTypeId" :rules="{required: false, message: '类别不能为空', trigger: 'blur'}">
                  <el-input v-if="!item.buttonType || item.buttonType === '0'" v-model="item.categoryName" :disabled="true" style="width: 200px"></el-input>
                  <material-type-component v-else v-model="item.materialTypeId" :type-id.sync="item.materialTypeId"></material-type-component>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="入库依据类别" prop="sourceCategory" :rules="{required: false, message: '类别不能为空', trigger: 'blur'}">
                  <el-select v-model="item.sourceCategory" placeholder="请选择">
                    <el-option
                      v-for="item in optionsSourceCategory"
                      :key="item.code"
                      :label="item.value"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-row">
              <el-col :span="8">
                <el-form-item label="单位" prop="unitName" :rules="{required: false, message: '单位不能为空', trigger: 'blur'}">
                  <el-input v-model="item.unitName" :disabled="display || !item.buttonType || item.buttonType === '0'" placeholder="单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="规格" prop="specifications" :rules="{required: false, message: '规格不能为空', trigger: 'blur'}">
                  <el-input v-model="item.specifications" :disabled="display || !item.buttonType || item.buttonType === '0'" placeholder="规格"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="批次号" prop="batchNumber" :rules="{required: false, message: '批次号不能为空', trigger: 'blur'}">
                  <el-input v-model="item.batchNumber" :disabled="display" placeholder="请填写入库物品（零件）批次"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-row">
              <el-col :span="8">
                <el-form-item label="单价" prop="price">
                  <el-input-number v-model="item.price" :disabled="display" :precision="1" :min="0.0" :step="0.1"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="数量" prop="cnt">
                  <el-input-number v-model="item.cnt" :disabled="display" :min="0"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="金额" prop="amount">
                  <span>{{ item.price * item.cnt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-row">
              <el-col :span="8">
                <el-form-item label="来源" prop="source">
                  <el-input v-model="item.source" :disabled="display" placeholder="来源"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="padding-left: 20px">
                <el-form-item label="是否换算" prop="unitNeedChange">
                  <convert-component v-model="item.unitNeedChange" :convert-id="item.unitNeedChange"></convert-component>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" prop="notes">
                <el-input type="textarea" v-model="item.notes" :disabled="display"></el-input>
              </el-form-item>
            </el-row>
          </div>
        </template>
        <el-row style="text-align: center;">
          <el-button v-if="!display" type="primary" icon="el-icon-plus" @click="addOne"></el-button>
        </el-row>
      </el-form>
      <span v-if="!display" slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </div>
</template>

<script>
  import UserComponent from '../common/user-component'
  import DictSelect from '../sys/dict-select'
  import { inboundBatch, getBoundDetails } from '@/api/warehouse'
  import ConvertComponent from '../common/convert-component'
  import MaterialComponent from '../common/material-component'
  import MaterialTypeComponent from '../common/material-type-component'
  export default {
    name: 'stock-order-inbound',
    components: {MaterialTypeComponent, MaterialComponent, ConvertComponent, DictSelect, UserComponent},
    data () {
      return {
        visible: false,
        display: false,
        id: 0,
        dataForm: {},
        dataList: [],
        dataRule: {
          userId: [{ required: true, message: '请选择入库申请人', trigger: 'blur' }]
        },
        optionsSourceCategory: [
          {code: '1', value: '采购入库'},
          {code: '2', value: '生产入库'},
          {code: '3', value: '委外入库'}
        ]
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id, display, dataForm) {
        this.display = display
        this.id = id || 0
        this.visible = true
        this.dataForm = {}
        this.dataList = []
        if (dataForm) {
          this.addOne(dataForm)
        } else if (!display) {
          this.addOne()
        } else {
          // 获取详情
          await getBoundDetails(id).then(({data}) => {
            if (data && data.code === '200') {
              if (data.data[0]) {
                this.dataForm = {
                  recordCode: data.data[0].recordCode,
                  applicant: data.data[0].applicant,
                  orgName: data.data[0].orgName
                }
              }
              data.data.forEach((item) => {
                this.addOne(item)
              })
            }
          })
        }
      },
      addOne (item) {
        this.dataList.push({...item,
          buttonType: item ? (item.buttonType ? '1' : '0') : '0',
          amount: item ? item.amount : 0,
          state: item ? item.state : 0,
          sourceCategory: item ? item.sourceCategory : '2'
        })
      },
      removeOne (index) {
        this.dataList.splice(index, 1)
        if (this.dataList.length === 0) {
          this.addOne()
        }
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let postData = []
            for (let i = 0; i < this.dataList.length; i++) {
              if (!this.dataList[i].batchNumber) {
                this.$message.warning('批次号不能为空')
                return
              }
            }
            this.dataList.forEach((item) => {
              postData.push({...item,
                applicant: this.dataForm.userId,
                materialName: item.materialName ? item.materialName : item.materialId,
                materialTypeId: item.materialTypeId ? item.materialTypeId : item.cateId,
                orgId: this.$store.state.user.orgId,
                recordCode: this.dataForm.recordCode,
                recordType: this.dataForm.recordType,
                userId: this.$store.state.user.id
              })
            })
            inboundBatch(postData).then(({data}) => {
              if (data && data.code === '200') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.onChose()
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      validateField (type) {
        this.$refs.dataForm.validateField(type)
      },
      // 切换按钮状态
      changeButtonType (item, type) {
        if (!item) return
        item.buttonType = type === 0 ? '0' : '1'
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      }
    }
  }
</script>

<style scoped>
.my-line{
  border-bottom: 1px solid #c0c4cc;
  margin-bottom: 10px;
}
  .my-row-1{
    margin-bottom: 20px;
  }
</style>