X-web/src/views/modules/product/template-add-or-update.vue

<template>
  <div class="product-template">
    <el-dialog
      :title="!isModify ? '新增':'修改'"
      width="70%"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="图号" prop="mapNumber">
              <el-input v-model="dataForm.mapNumber" :disabled="bizType === 3" placeholder="图号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="物料名称" prop="productName">
              <el-input v-model="dataForm.productName" :disabled="bizType === 3" placeholder="物料名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格" prop="productSpecifications">
              <el-input v-model="dataForm.productSpecifications" :disabled="bizType === 3" placeholder="规格"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="单位" prop="unitName">
              <el-input v-model="dataForm.unitName" :disabled="bizType === 3" placeholder="单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" prop="cnt">
              <el-input-number v-model="dataForm.cnt" :disabled="bizType === 3" ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row" v-if="bizType === 2">
          <el-col :span="8">
            <el-form-item label="生产编号" prop="productNumber">
              <el-input v-model="dataForm.productNumber" placeholder="任务单编号" :disabled="bizType === 3" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号" prop="batchNumber">
              <el-input v-model="dataForm.batchNumber" placeholder="批次号" :disabled="bizType === 3" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产要求" prop="produceRequire">
              <el-input v-model="dataForm.produceRequire" placeholder="生产要求" :disabled="bizType === 3" ></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="dataForm.price" :step="1" :min="0" :precision="1" :disabled="bizType === 3" ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税率" prop="rate">
              <el-input-number style="width: 160px" v-model="dataForm.rate" :step="1" :precision="1" :disabled="bizType === 3" />&nbsp;%
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="含税总价" prop="amount">
              <span>{{ (dataForm.cnt * dataForm.price).toFixed(1) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row">
          <el-form-item label="备注" prop="notes">
            <el-input type="textarea" v-model="dataForm.notes" placeholder="备注"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="my-row">
          <el-col :span="8"  v-if="bizType === 3">
            <el-form-item prop="productId" label="物料关联">
              <product-component v-model="dataForm.productId" :product-id="dataForm.productId" @productSelected="prodSelected"/>
            </el-form-item>
          </el-col>
          <el-col :span="8"  v-if="bizType !== 1 && bizType !== 2">
            <el-form-item label="首件鉴定">
              <el-radio-group v-model="dataForm.appraisal">
                <el-radio :label="'1'">否</el-radio>
                <el-radio :label="'2'">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8"  v-if="bizType !== 1 && bizType !== 2">
            <el-form-item label="试制检查">
              <el-radio-group v-model="dataForm.inspect">
                <el-radio :label="'1'">否</el-radio>
                <el-radio :label="'2'">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="my-row" v-if="Number(dataForm.inspect) === 2">
          <el-col :span="8">
            <upload-component :display-star="false" :title="'试制前准备状态检查报告'" :accept="'*'" :file-obj-list="fileList1" @uploadSuccess="uploadSuccess1"/>
          </el-col>
          <el-col :span="8">
            <upload-component :display-star="false" :title="'试制前准备状态自查表'" :accept="'*'" :file-obj-list="fileList2" @uploadSuccess="uploadSuccess2"/>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
          <el-button @click="onChose">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ProductComponent from '@/views/modules/common/product-component'
  import UploadComponent from '@/views/modules/common/upload-component'

export default {
    name: 'template-add-or-update',
    components: {UploadComponent, ProductComponent},
    data () {
      return {
        visible: false,
        isModify: false,
        bizType: 1,
        dataForm: {
        },
        fileList1: [],
        fileList2: [],
        dataRule: {
          mapNumber: [{ required: true, message: '图号不能为空', trigger: 'blur' }],
          productName: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
          productSpecifications: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
          cnt: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
        }
      }
    },
    methods: {
      onChose () {
        this.visible = false
      },
      // 初始化：type: 1 沟通物料明细/合同台账物料明细，2 任务单物料明细
      init (type, dataForm, techType) {
        this.bizType = techType ? 3 : type
        if (dataForm) {
          this.isModify = true
          this.dataForm = dataForm
        } else {
          this.dataForm = {
            recordId: Math.round(Math.random() * 1000000),
            appraisal: 1
          }
        }
        this.visible = true
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 处理附件
            let fList1 = this.fileList1
            if (fList1.length > 0) {
              this.dataForm.attachListInspection = []
              for (let i = 0; i < fList1.length; i++) {
                this.dataForm.attachListInspection.push({
                  fileName: fList1[i].name,
                  url: fList1[i].url
                })
              }
            }
            let fList2 = this.fileList2
            if (fList2.length > 0) {
              this.dataForm.attachListExamine = []
              for (let i = 0; i < fList2.length; i++) {
                this.dataForm.attachListExamine.push({
                  fileName: fList2[i].name,
                  url: fList2[i].url
                })
              }
            }
            this.visible = false
            this.$emit('addItem', this.dataForm)
          }
        })
      },
      prodSelected (item) {
        this.dataForm.productId = item.value
        this.dataForm.relatedProduct = item.label
      },
      // 试制前准备状态自查表
      uploadSuccess1 (fileList) {
        this.fileList1 = fileList
      },
      // 试制前准备状态检查报告
      uploadSuccess2 (fileList) {
        this.fileList2 = fileList
      }
    }
  }
</script>

<style scoped>

</style>