drp-ui/src/views/purchase/PurchaseDemandList/add.vue

<template>
  <div id="addDemandList">
    <span>基本信息</span>
    <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="1.5">
            <el-form-item label="编码">
              <el-input
                v-model="basicForm.code"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="组织">
              <el-input v-model="basicForm.org" size="small" style="width: 200px">
               <el-button slot="append" icon="el-icon-more" @click="chooseOrg"></el-button>
              </el-input>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求处理方式">
              <el-select v-model="basicForm.demandBusinessType" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="单据状态">
              <el-select v-model="basicForm.status" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求客户">
              <el-select v-model="basicForm.customer" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求客户名称">
              <el-select v-model="basicForm.customerName" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="客户负责人">
              <el-select v-model="basicForm.customerPrincipal" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求人员">
              <el-select v-model="basicForm.demandPersonal" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求部门">
              <el-select v-model="basicForm.demandDept" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="需求日期">
              <el-input
                v-model="basicForm.demandDate"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="单据来源">
              <el-input
                v-model="basicForm.source"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="供应仓库">
              <el-input
                v-model="basicForm.warehouse"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="供应货位">
              <el-select v-model="basicForm.goodsAllocation" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="业务类型">
              <el-select v-model="basicForm.billType" size="small" style="width: 200px" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="是否客户指定">
              <el-input
                v-model="basicForm.isSpeical"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <!-- <el-col :span="1.5">
            <el-form-item label="是否处理需求">
              <el-input
                v-model="basicForm.isProcess"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col> -->

          <el-col :span="1.5">
            <el-form-item label="是否月销量计算">
              <el-input
                v-model="basicForm.isMonthleyCalculate"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="备注">
              <el-input
                v-model="basicForm.remark"
                size="small"
                placeholder=""
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>
      </el-row>
    

    <span>明细信息</span>
    <el-card>
      <div class="btn_grooup">
        <el-button type="primary" size="small" @click="addLine">增行</el-button>
        <el-button type="primary" size="small" >批量调整</el-button>
        <el-button type="primary" size="small" v-if="pageStu == 'check' || pageStu == 'edit'" @click="showReserved">货权预留单</el-button>
      </div>

      <el-table 
          :data="basicForm.puDemandItemList" 
          fit
          max-height="300"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"/>
          <el-table-column label="序号" type="index" align="center"/>
          <el-table-column label="行状态" align="center" prop="status" />
          <el-table-column label="行号" align="center" >
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.index"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="一级品类" align="center" width="150">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.materialClassifyOneName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="二级品类" align="center" width="150" prop="materialClassifyTwoName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.materialClassifyTwoName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="三级品类" align="center" width="150" prop="materialClassifyThreeName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.materialClassifyThreeName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="四级品类" align="center" width="150" prop="materialClassifyFourName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.materialClassifyFourName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="预留比例" align="center" width="150" prop="reservedProportion">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.reservedProportion"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="预留周期" align="center" width="150" prop="reservedPeriod">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.reservedPeriod"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="预留数量" align="center" width="150" prop="reservedQty">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.reservedQty"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="采购员名称" align="center" prop="buyerName" />
          <el-table-column label="采购员" align="center" width="150" prop="buyer" />
          <el-table-column label="物料编码" align="center" width="120" prop="materialCode">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.materialCode"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" align="center" width="150" prop="materialName" />
          <el-table-column label="规格" align="center" width="150" prop="specification" />
          <el-table-column label="型号" align="center" width="150" prop="model" />
          <el-table-column label="单位" align="center" width="150" prop="unit	" />
          <el-table-column label="生产厂家/代理人" align="center" width="150" prop="registrant" />
          <el-table-column label="注册人" align="center" width="150" prop="registrant" />
          <el-table-column label="采购周期" align="center" width="150" prop="puPeriod">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.puPeriod"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="有效期单位" align="center" width="150" prop="expiryUnit" />
          <el-table-column label="有效期" align="center" width="150" prop="updateTime" />
          <el-table-column label="最小包装" align="center" width="150" prop="minPackage" />
          <el-table-column label="最小订货量" align="center" width="150" prop="minOrderQty" />
          <el-table-column label="最小批量" align="center" width="150" prop="minBatch	" />
          <el-table-column label="安全库存" align="center" width="150" prop="safeStock	">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.safeStock"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="月均销量" align="center" width="150" prop="averageQtyMonth" />
          <el-table-column label="实际(业务)需求量" align="center" width="150" prop="qty">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.qty"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="需求可用周期" align="center" width="150" prop="demandPeriod" />
          <el-table-column label="集团预测分类" align="center" width="150" prop="forecastClassify" />
          <el-table-column label="交货日期" align="center" width="150" prop="deliveryDate">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.deliveryDate"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="补单标识" align="center" width="150" prop="isReplenishment">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.isReplenishment"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="批号锁定标识" align="center" width="150" prop="isBatchLock">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.isBatchLock"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="业务备注" align="center" width="150" prop="remark">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.remark"/>
              </el-form-item>
            </template>
          </el-table-column> 
          <el-table-column label="采购备注" align="center" width="150" prop="puRemark" />
          <!-- <el-table-column label="末级供应仓库存量" align="center" width="150" prop="lastWarehouseQty" /> -->
          <!-- <el-table-column label="调拨占有量" align="center" width="150" prop="superiorAllotQty"></el-table-column> -->
          <el-table-column label="最终净需求量" align="center" width="150" prop="resDemandQty">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.resDemandQty"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="末级供应仓库" align="center" width="150" prop="lastWarehouseName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.lastWarehouseName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="收货仓库" align="center" width="150" prop="deliveryWarehouseName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.deliveryWarehouseName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="末级供应货位" align="center" width="150" prop="lastAllocationName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.lastAllocationName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="收货货位编码" align="center" width="150" prop="deliveryAllocation" />
          <el-table-column label="收货货位" align="center" width="150" prop="deliveryAllocationName">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.deliveryAllocationName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="紧急标识" align="center" width="150" prop="isUrgency">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.isUrgency"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="默认采购组织" align="center" width="150" prop="purOrgName" />
          <el-table-column label="默认采购组织编码" align="center" width="150" prop="puOrg" />
          <!-- <el-table-column label="末级供应调拨待入量" align="center" width="150" prop="lastStockQty">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.lastStockQty"/>
              </el-form-item>
            </template>
          </el-table-column> -->
          <el-table-column label="上级供应中心现存量" align="center" width="150" prop="superiorCenterQty" />
          <el-table-column label="上级库存被调拨占用量" align="center" width="150" prop="superiorAllotQty" />
          <el-table-column label="可用量" align="center" width="150" prop="availableQty" />
          <el-table-column label="调拨状态" align="center" width="150" prop="statusAllot">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.statusAllot"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="补单供应商编码" align="center" width="150" prop="additionalSupplier">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.additionalSupplier"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="补单供应商名称" align="center" width="150" prop="additionalSupplierCode">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.additionalSupplierCode"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="周期单位" align="center" width="150" prop="periodUnit">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.periodUnit"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="需求客户" align="center" width="150" prop="customer">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input v-model="scope.row.customer"/>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column label="末级供应库存组织" align="center" width="150" prop="updateTime"></el-table-column> -->
          <el-table-column label="中心仓可用量" align="center" width="150" prop="updateTime"></el-table-column>
          <!-- <el-table-column label="调拨单号" align="center" width="150" prop="updateTime"></el-table-column> -->
          <!-- <el-table-column label="收货地址" align="center" width="150" prop="updateTime"></el-table-column> -->
          <!-- <el-table-column label="收货地址编码" align="center" width="150" prop="updateTime" /> -->
          <el-table-column label="联系人" align="center" width="150" prop="contacts" />
          <!-- <el-table-column label="联系人电话" align="center" width="150" prop="updateTime" /> -->
          <!-- <el-table-column label="详细地址" align="center" width="150" prop="updateTime" /> -->
          <!-- <el-table-column label="价格类型" align="center" width="150" prop="updateTime"></el-table-column> -->
          <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="150"
          >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delLine(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-form>

    <div class="btn_group">
      <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
      </el-col>
      <!-- <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button size="small" plain @click="back">返回</el-button>
      </el-col>

      <Reserved v-if="dialog.config" :isVisible="dialog.config" :info="row" @updateReserved="updateReserved"/>
    </div>
  </div>
</template>

<script>
import Reserved from './reserved.vue'
import {addDemand,getDemandDetail, getDemandSonDetail, editDemand} from '@/api/purchase/purchaseDemand.js'
import {getRefer} from '@/api/purchase/basic.js'
export default {
  name: 'addDemandList',
  props: ['pageStu','row', 'disable'],
  components: {
    Reserved
  },
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      dialog: {
        config: false
      },
      basicForm: {
        code: '',
        org: '',
        demandBusinessType: '',
        status: '',
        customer: '',
        customerName: '',
        customerPrincipal: '',
        demandPersonal: '',
        demandDept: '',
        demandDate: '',
        source: '',
        warehouse: '',
        goodsAllocation: '',
        billType: '',
        isSpeical: '',
        isProcess: '',
        isMonthleyCalculate: '',
        remark: '',
        puDemandItemList: []
      },
      options: [{
        value: '1', label: '是',
      }, {
        value: '0', label: '否'
      }],
      basicRules: {},
      tableList: []
    }
  },
  created() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    }
  },
  methods: {
    save() {
      if(this.pageStu == 'add') {
        addDemand(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("保存成功");
            this.back()
          }
        })
      } else if (this.pageStu == 'edit') {
        editDemand(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("编辑成功");
            this.back()
          }
        })
      }
    },
    submit() {},
    // 增行
    addLine() {
      const newLine = {
        contacts: null,
        id: null,
        demandId: null,
        status: null,
        businessDept: null,
        businessDeptName: null,
        materialCategory: null,
        buyer: null,
        buyerName: null,
        mateiralClassifyOne: null,
        materialClassifyOneName: null,
        materialClassifyTwo: null,
        materialClassifyTwoName: null,
        materialClassifyThree: null,
        materialClassifyThreeName: null,
        materialClassifyFour: null,
        materialClassifyFourName: null,
        materialCode: null,
        materialName: null,
        specification: null,
        unit: null,
        registrant: null,
        puPeriod: null,
        expiryUnit: null,
        minPackage: null,
        minOrderQty: null,
        minBatch: null,
        safeStock: null,
        averageQtyMonth: null,
        qty: null,
        adjustmentPersonal: null,
        adjustmentTime: null,
        manualRegulation: null,
        updateCause: null,
        reservedProportion: null,
        reservedPeriod: null,
        reservedQty: null,
        demandPeriod: null,
        forecastClassify: null,
        deliveryDate: null,
        isUrgency: null,
        isReplenishment: null,
        isBatchLock: null,
        remark: null,
        puRemark: null,
        lastWarehouseQty: null,
        resDemandQty: null,
        lastWarehouse: null,
        lastWarehouseName: null,
        deliveryWarehouse: null,
        deliveryWarehouseName: null,
        lastAllocation: null,
        lastAllocationName: null,
        deliveryAllocation: null,
        deliveryAllocationName: null,
        passageOn: null,
        puOrg: null,
        purOrgName: null,
        lastStockQty: null,
        superiorCenterQty: null,
        superiorAllotQty: null,
        availableQty: null,
        statusAllot: null,
        additionalSupplier: null,
        additionalSupplierCode: null,
        periodUnit: null,
        demandCustomer: null,
        demandCustomerName: null,
        lastStockOrg: null,
        lastStockOrgName: null,
        superiorStockOrg: null,
        superiorStockOrgName: null,
        allotCode: null,
        deliveryAddress: null,
        deliveryAddressName: null,
        contacts: null,
        contactsPhone: null,
        address: null,
        source: null,
        priceType: null,
        puManagerApprover: null,
        puManagerApproverName: null,
        processTime: null,
        affirmer: null,
        tenantId: null,
        revision: null,
        createBy: null,
        createByName: null,
        createTime: null,
        updateBy: null,
        updateByName: null,
        updateTime: null,
        delFlag: null,
        // 新增字段
        model: null,
      }
      this.basicForm.puDemandItemList.push(newLine)
    },
    delLine(row) {
      console.log('删除行:', row)
      this.basicForm.puDemandItemList = this.basicForm.puDemandItemList.filter(item => {
        return item.id !== row.id
      })
    },
    back() {
      this.$emit('jugislist', true)
      let queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.$emit('refresh', queryParams)
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      getDemandDetail(row.id).then(res => {
        if (res.code === 200) {
          // this.basicForm = res.data
          let reciveForm = res.data
          let params = {...{id: row.id}, ...{pageNum:1, pageSize: 10}}
          getDemandSonDetail(params).then(res => {
            if (res.code === 200) {
              reciveForm.puDemandItemList = res.rows
              console.log('reciveForm',reciveForm)
              this.basicForm = reciveForm
            }
          })
        }
      })
    },
    handleSelectionChange() {},
    // 点击预留单展示
    showReserved() {
      this.dialog.config = true
    },
    // 修改是否让页面显示与隐藏的事件
	  updateReserved (val) {
      this.dialog.config = val
    },
    chooseOrg() {
      getRefer({type:'ORG_PARAM', search:'BB国际'}).then(res => {
        console.log("🚀 ~ file: add.vue:725 ~ getRefer ~ res:", res)
        
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
} 
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.hang {
  margin: auto;
}
.hang ::v-deep .el-form-item__content{
  margin-left: 0px !important;
}
</style>